body {
  font-family: "Inter", sans-serif;
  background-color: #ffffff;
  color: #000000;
  scroll-behavior: smooth;
}

/* Estilo para la transición suave del menú */
#mainNav {
  transition: top 0.3s ease-in-out;
  height: 64px;
}

/* Clase para ocultar el menú moviéndolo fuera de la vista */
.nav-hidden {
  top: -80px;
}

/* Estilo para el contenido de las secciones */
.section-content {
  min-height: 80vh;
  padding-top: 80px;
  padding-bottom: 60px;
  position: relative;
  z-index: 1;
  background-size: auto;
  background-position: center center;
  background-repeat: repeat;
  background-attachment: fixed; /* Efecto Parallax */
}


  
.section-content:last-of-type {
  border-bottom: none;
}
.section-inner-content {
  background-color: rgba(255, 255, 255, 0.6);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
}

/* Fondos y patrones específicos para cada sección en tonos de gris */
#home {
  background-color: #f7f7f7;
  background-image: url("../recursos/fondos/garabatillos-fondo1.png");
  background-size: contain;
}
#sobre-mi {
  background-color: #efefef;
  background-image: url("../recursos/fondos/garabatillos-fondo2.png");
}
#blog {
  background-color: #e8e8e8;
  background-image: url("../recursos/fondos/garabatillos-fondo1.png");
}
#galeria {
  background-color: #e0e0e0;
  background-image: url("../recursos/fondos/nopasesfam.png");
}
#proyectos {
  background-color: #dcdcdc;
  background-image: url("../recursos/fondos/cult-of-the-lamb.png");
}

.scroll-spacer {
  height: 10em;
}

/* Botón Volver Arriba (Rombo) */
#scrollTopButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.65);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
    background-color 0.3s ease;
  z-index: 1000;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

#scrollTopButton.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

#scrollTopButton:hover {
  background-color: rgba(0, 0, 0, 0.85);
  transform: translateY(-3px) scale(1.1);
}

#scrollTopButton svg {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease;
}

#scrollTopButton:hover svg {
  transform: scale(1.15);
}


/* Estilos para la sección de Blog con Supabase */
.post-card {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  padding: 1.25rem; /* p-5 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  transition: box-shadow 0.3s ease;
}
.post-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
}
.post-title {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  margin-bottom: 0.5rem; /* mb-2 */
}
.post-content-preview {
  color: #4a5568; /* text-gray-700 */
  font-size: 0.875rem; /* text-sm */
  margin-bottom: 1rem; /* mb-4 */
  /* Para previsualizar solo una parte del contenido si es muy largo */
  max-height: 100px; /* Ajusta según necesites */
  overflow: hidden;
  text-overflow: ellipsis;
  /* Considerar display -webkit-box para multilínea con ellipsis si es necesario */
}
.post-link {
  color: #3b82f6; /* text-blue-500 */
  text-decoration: underline;
  margin-top: 0.5rem; /* mt-2 */
  display: inline-block;
}
.post-link:hover {
  color: #1d4ed8; /* text-blue-700 */
}


.vlkj-card {
  background-color: aqua;
  border: #718096 1px solid;
  color: #000000;
  border-radius: 1em;
  margin-top: 0.5em;
  padding: 1em;
}



/*Mini Twisky*/

#minitwitskyContainer{
  background-image: linear-gradient( #fdad99, #ffd6b7);
  color: #252525;
  font-size: 0.8em;
  border-radius: 0.5em;
  max-height: 50vh; 
  overflow-y: auto;
}

.twitskypost {
  background-color: gainsboro;
  border-bottom: 1px solid #5f5f5f;
  border-radius: 0.5em;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  
}

.post-meta {
  font-size: 0.6em; 
  color: #718096; 
  margin-top: 0.5em; 
}



#logo-ppal {
    position: fixed;
    top: 3vw;
    left: 3vw;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 4em;
    height: 4em;
    border-radius: 50%;
    border: 4px solid black;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: transform 0.3s ease;
}



#logo-ppal.clicked{
  transform: translate(-50%, -50%) scale(1.1);
  border: linear-gradient(to right, canary, black) border-box;
}

#links {
    position: fixed;
    display: flex;
    flex-direction: column;
    left: 1.5vw;
    top: 5vw;
    transition: transform 0.3s ease;
}

#links .rrss {
  display: inline-block;
  margin: 0.5em;
  left: 0;
}

#links img {
  width: 2em;
  height: 2em;
  
}


@media (max-width: 577px) {
  #logo-ppal {
    top: 10vw;
    left: 10vw;
    width: 13vw;
    height: 13vw;
  }

  #links {
    left: 3.5vw;
    top: 16vw;

  }
}

/*
#logo-ppal:hover {
  transform: translate(-50%, -50%) scale(1.1);
  transition: transform 0.3s ease;
  border: linear-gradient(to right, canary, black) border-box;
}
  */

/*
#a2d-galeria a {
  width: 300px;
  height: 300px;
}*/

.derecha {
  text-align: end !important;
}

.izquierda {
  text-align: start !important;
}




.ir-a-boton {
  font-size: 1em;
  color: #000;
  position: relative;
  display: inline-block;
  background-color: #dcdfe4;
  border:1px solid #71792d;
  border-radius: 0.5em;
  padding: 0.5em;
}

.rainbow-char {
    /* Define el degradado arcoíris */
    background-image: linear-gradient(to right,
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        violet
    );
    /* Recorta el fondo al texto */
    -webkit-background-clip: text; /* Para compatibilidad con navegadores basados en WebKit */
    background-clip: text;
    /* Hace el texto transparente para que el fondo sea visible */
    -webkit-text-fill-color: transparent; /* Para compatibilidad con navegadores basados en WebKit */
    color: transparent; /* Fallback para navegadores que no soporten -webkit-text-fill-color */

    /* Opcional: Ajusta el tamaño de la fuente para que el efecto sea más visible */
    font-size: 1.2em; /* Ejemplo: 3 veces el tamaño normal de la fuente */
    font-weight: bold; /* Opcional: para que el color se aprecie mejor */
}


 #menu-galeria {
            width: 100%; 
            height: 200px; 
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0; 
            position: relative; 
            font-size: 2em;
        }
        #menu-galeria ul {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #menu-galeria li a {
            position: relative;
            width: 200px; 
            height: 150px; 
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 1em;
            overflow: hidden;
            transition: all 0.3s ease;
            font-weight: bold;
            text-transform: uppercase;  
            background-size: auto;
            background-position: bottom bottom;
            color: white; 
            text-shadow:
            -1px -1px 0 black, 
            1px -1px 0 black, 
            -1px  1px 0 black, 
            1px  1px 0 black; 
        }

        #menu-galeria li:not(:first-child) {
            margin-left: -20px;
        }


        #menu-galeria li:nth-child(odd) {
            background: #88B04B; 
            z-index: 1003;
            clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
        }


        #menu-galeria li:nth-child(even) {
            background: #F7CAC9; 
            z-index: 1002; 
            clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
        }


        #menu-galeria li:first-child {
            background: #FF6F61; 
            z-index: 1004; 
            margin-left: 0; 
            clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%); 
        }


        #menu-galeria li:last-child {
            background: #6B5B95; 
            z-index: 1001; 
            margin-right: 0; 
            clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%); 
        }

    
        #menu-galeria li:hover {
            transform: translateY(-5px); 
            box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
            z-index: 9999 !important; 
        }

        
        @keyframes moverFondo {
            0% {
                background-position: 0% 0%; 
            }
            100% {
                background-position: 100% 100%; 
            }
        }

        #menu-galeria li:hover {
            animation: moverFondo 10s linear infinite alternate; /* Aplica la animación */
        }

        .boton-volver {
          border: solid 3px #000;
          padding: 0.2em;
          border-radius: 0.5em;
          margin-top: 1em;
          text-transform: uppercase;
        }

.hidden-logo{
  display: none !important;
}