/* COMENZAMOS A ESTILAR LA PAGINA */
/* importamos menu.css, var.css habra que unificar criterios */
@import url('var.css');  
@import url('mnu.css');


@font-face {
    font-family: 'Yellowtail';
    src: url('/fonts/Yellowtail-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fjalla';
    src: url('/fonts/FjallaOne.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}   

/* definimos colores y formas de encabezados, cuerpo y pie */

h2 {
  color: black;
  font-family: Yellowtail, sans-serif;
  font-size: clamp(1rem, 3vw, 1.5rem); /* Tamaño responsivo para el título Minimo 1.5 maximo 2.5 y ajustado a 5vw */
}

p {
    color: var(--color-texto);
}



/* modificar este tit1 ya no llevara animaciones y quizas desaparezca  esto fue para la cabecera y la cabecera lo lleva y bien 
   Este titulo me creo que no debe de llevarlo. ya veremos cuando hagamos limpieza. 
*/
tit1{
   /*  ver oklch colores mas potentes */
   color: #C78B38;
   font-family: Yellowtail, sans-serif;
   font-size: 1rem;
   text-align: center;
  /* padding: 16px;  Creo que no hara falta el paddin */
   margin: 0;
   width: 100%;
   position: sticky; /* fijo, vamos */
   top:0;
   left: 0; 
   text-align: center;
   animation: enhance-header linear both;
   animation-timeline: scroll(root);
   animation-range: 0 200px;
   z-index: 1;
}



  body{
    margin: 0;
    background: var(--color-fondo); /*estupendo color de background va muy bien con c78b38 */
    /* el font-family yellowtail solo lo quiero para titulos y poco mas 
       Para lo demas Open Sans y sans-serif como defecto */
    font-family: 'Open Sans', 'Helvetica Neue', sans-serif; 
    overflow-x: hidden; /* Solo evita el scroll horizontal */
  }



  footer {
    color:gray  /* color para comentarios y pies de pagina */
  }


.cabecera {
  display: grid; /* Usar grid para contener los elementos */
  grid-template-columns: repeat(3, 1fr); /* 3 columnas de una fracion */
  position: sticky;  /* lo dejamos fijo */
  left:0;         /* importante para dejarlo fijo si no no sabe */
  top:0;          /* donde posicionarlo */
  background: var(--color-cabecera); /* con trasparencia incluida */
  backdrop-filter: blur(5px);
  color:black; 
  z-index: 1;
}


.logo {
  grid-column: 1;
  grid-row: 1; 
  min-width: 2em;   
  height: auto; /* Mantener la proporción del logo */
  justify-self:center; /* Espacio debajo del logo */
}


.titulo {
  grid-column: 2;
  grid-row: 1/-1;
  color: var(--color-titulo);
  font-family: Yellowtail, sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.5rem); /* Tamaño responsivo para el título Minimo 1.5 maximo 2.5 y ajustado a 5vw */
  margin: 0px 0 10px 0; /* Espaciado vertical */
  text-align: left; /* Centrar el texto del título, a la izquierda mejor */
  width: 100%; /* Asegurarse de que el título ocupe todo el ancho */
}


.subtitulo {
  font-size: clamp(.5rem, 4vw, .7rem); /* Tamaño responsivo para el subtítulo */
  font-style: italic; /* no se nota mucho pero es italica */
  margin: 5px 0; /* Espaciado vertical */
  color: var(--color-subtitulo); /* Color del subtítulo (puedes cambiarlo) */
  text-align: left; /* Centrar el texto del subtítulo, mejor a la izquierda */
  width: 100%; /* Asegurarse de que el subtítulo ocupe todo el ancho */
} 

  .novedades {
    background: var(--color-novedad);
    text-align: center;
    /* margin:-14px auto 0 auto; parece que solo hace falta el padding eso para que cuadre con cabecera */
    padding-top: 2px;         /* y esto tambien */
  }

  .novedades p {
    font-size: clamp(0.6rem, 2vw, 1rem); /* responsive no? */
  }
  .novedades footer {
    color:white;  /* Que resalte un poco */
    font-size: clamp(0.6rem, 2vw, 1.1rem); /* y algo mas de tamaño */
  }

 
 
 .grid-embalaje {
   /* background: salmon; */
    background: var(--color-fondo); 
   /* border: 3px solid black;  /* estos 2 border iran fuera al terminar la composicion */
    display: grid;
    grid-template-columns: 40% 30% 30%; /* Primera fila: 40%, 30%, 30% */
    gap: 10px; /* Espacio entre los elementos del grid */

}
 






/* Portada es la extructura conteniendo la ultima foto, que debe ser lo mas visible en nuestro inicio 
*/
    .portada {
        grid-column: 1 / 2;  
        max-height: 50vh;  /* limitamos el alto de la portada, ver como hacer que no se salga el contenido */
                                                        /* no necesario   width: 50%;   /* tamaño de la imagen */
        max-height: 100%; /* maxima altura de la imagen */
        min-width: 200px; /* minima anchura de la imagen */
        height: auto;     /* que ajuste automaticamente la altura (pero respetando el 100%) */
   
    }  

    /* a desaparecer */
    .portada figcaption {
      font-size: clamp(0.6rem, 2vw, 1rem); /* responsive, ¿no?, que no se haga muy grande */
    }
 
    

.grid-embalaje p {
  font-size: clamp(0.3rem, 1.3vw, .9rem);
  margin:3px;
}

.dat-toma {
  background-image: url('/media/img/xt/xtmarble1.png'); /* Imagen de fondo */
  background-size: cover; /* Asegura que la imagen cubra toda la casilla */
  background-position: center; /* Centra la imagen */

}


.dat-objeto {
background-image: url('/media/img/xt/xtinte2.png'); /* Imagen de fondo */
background-size: cover; /* Asegura que la imagen cubra toda la casilla */
background-position: center; /* Centra la imagen */  

padding-right: 5%;
}

.com-autor {
background-image: url('/media/img/xt/xtrain.png'); /* Imagen de fondo sin espacio entre ?> */
background-size: cover; /* Asegura que la imagen cubra toda la casilla */
background-position: center; /* Centra la imagen */  

padding-right: 5%;
grid-column: 2 / -1;
}

/* a desaparecer */
.medio {
  display: grid;
  grid-template-columns: 30vw auto; /* 50% del ancho visible y el resto en automatico (de momento) */

  width:100%;
}


/*
     Instrucciones para el carrusel de fotos
*/


/* Este es para el titulo */
@keyframes enhance-header {
      
  to {
    background: rgba(255,255,255, .6);
    backdrop-filter: blur(5px);
    font-size: 1.2rem;
    color: black;
  }
}


/* a desaparecer? */ 
.titulo_carru {
  width: 32%; /* O el ancho que desees AL TERMINAR VER 80% Y CENTRADO */
  overflow-x: auto; /* Permite el desplazamiento horizontal */
  white-space: nowrap; /* Evita que los elementos se envuelvan */
  margin-left: 37px;
  }




/*
      Ajustamos la section del carrusel y las imagenes 
*/
      .carrusel {

        overflow-x: auto; /* Permite el desplazamiento horizontal */
        white-space: nowrap; /* Evita que los elementos se envuelvan */
        display: inline-block;
        overflow-x: scroll;     /* scroll x horizontal */
       
        }
     
      .carrusel img {
        display: inline-block; /* permitir que las imagenes se muestren uno al lado del otro 2025.02.19 */ 
         border-radius: 4px;   /* El radius, veremos si queda despues */
        width: 38%;          /* ancho 100% de la imagen?  contenedor  era 20 al final  */
        height: auto;         /* el alto automatico */
        

      
        animation: reveal linear both;    /* esta animación creo que no es  no se por que pasa de mi reveal: */
        animation-timeline: view(inline);       /* para que muestre la animacion  quitemos el rango era 20% y 80% */
        animation-range: entry 40% cover 60%; /* parametros para el desenfoque de fotos 40 y 60 eran */
         object-fit: cover; 
     
      }



/*
      Estilo para el blog o efemerides si lo cambiamos 
*/  
     .blog {
      background: yellowgreen;
      grid-column: 4 / -1;
     }
  

/*                        template acerca-de 

     Primero la imagen. 
*/


.image-acerca {
    position: relative; /* Necesario para posicionar el overlay */
    overflow: hidden; /* Oculta la parte de la imagen que se sale del contenedor */
    width: 100%; /* Ajusta el ancho según sea necesario */
    height: 500px; /* Ajusta la altura según sea necesario */
}

.image-acerca img {
    position: absolute; /* Asegura que la imagen se posicione dentro del contenedor */
    top: 50%; /* Centra verticalmente la imagen */
    left: 50%; /* Centra horizontalmente la imagen */
    width: auto; /* Permite que la imagen mantenga su proporción */
    height: 100%; /* Llena el contenedor en altura */
    min-width: 100%; /* Asegura que la imagen cubra el contenedor en ancho */
    transform: translate(-50%, -50%); /* Ajusta la posición de la imagen */
    object-fit: cover; /* Recorta la imagen para que llene el contenedor */
    object-position: 50% 65%; /* Ajusta la posición de la imagen (50% horizontal, 30% vertical) */
}



.image-acerca::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* Oscurece la imagen con un overlay negro */
    z-index: 1; /* Asegura que el overlay esté encima de la imagen */
}

.texto-over1 {
    position: absolute; /* Posiciona el texto sobre la imagen */
    top: 50px; /* Ajusta la posición vertical del texto */
    left: 260px; /* Ajusta la posición horizontal del texto */
    color: #ffe49a; /* Color del texto */
    font-size: 38px; /* Tamaño de la fuente */
    padding: 10px; /* Espaciado alrededor del texto */
    border-radius: 5px; /* Bordes redondeados */
}

.texto-over2 {
    position: absolute; /* Posiciona el texto sobre la imagen */
    top: 100px; /* Ajusta la posición vertical del texto */
    left: 260px; /* Ajusta la posición horizontal del texto */
    color: #ffe49a; /* Color del texto */
    font-size: 38px; /* Tamaño de la fuente */
    padding: 10px; /* Espaciado alrededor del texto */
    border-radius: 5px; /* Bordes redondeados */
}


.texto-unes1 {
    position: absolute; /* Posiciona el texto sobre la imagen */
    top: 340px; /* Ajusta la posición vertical del texto */
    left: 1450px; /* Ajusta la posición horizontal del texto */
    color: #ffe49a; /* Color del texto */
    font-size: 18px; /* Tamaño de la fuente */
    padding: 10px; /* Espaciado alrededor del texto */
    border-radius: 5px; /* Bordes redondeados */
}

.texto-unes2 {
    position: absolute; /* Posiciona el texto sobre la imagen */
    top: 370px; /* Ajusta la posición vertical del texto */
    left: 1450px; /* Ajusta la posición horizontal del texto */
    color: #ffe49a; /* Color del texto */
    font-size: 18px; /* Tamaño de la fuente */
    padding: 10px; /* Espaciado alrededor del texto */
    border-radius: 5px; /* Bordes redondeados */
}

.texto-unes3 {
    position: absolute; /* Posiciona el texto sobre la imagen */
    top: 400px; /* Ajusta la posición vertical del texto */
    left: 1450px; /* Ajusta la posición horizontal del texto */
    color: #ffe49a; /* Color del texto */
    font-size: 18px; /* Tamaño de la fuente */
    padding: 10px; /* Espaciado alrededor del texto */
    border-radius: 5px; /* Bordes redondeados */
}

/*
      CUERPO DE ACERCA DE 2025.08.05
*/

.grid-acerca {
    display: grid;
  
    grid-template-columns: 40vw 40vw; /* dos columnas del 33% y 40 el resto el otro 33% o eso o dejarlo fijo.  cURRADO POR CEREBRO */
    gap: 2vw; /* 20px; /* Espacio entre las casillas */
    width: 100%; /* Asegura que el grid ocupe todo el ancho disponible */
    max-width: 1600px; /* Opcional: establece un ancho máximo */
    margin: 0 auto; /* Centra el grid en la página */
}

.grid-acerca p {
     color: var(--color-textoBG);
     font-size: clamp(.6rem, 1.8vw, 1.4rem);
     /* clamp(0.5rem, 1.8vw, .9rem); */
     font-family: 'Fjalla', sans-serif; /* Hace que el texto del párrafo sea negrita */
     line-height: 1.8;   /* espaciado interlineal */ 
}

.casilla {

    display: flex;
    flex-direction: column; /* Asegura que el contenido se apile verticalmente */
    justify-content: flex-start; /* Alinea el contenido al inicio */
    align-items: stretch; /* Asegura que los artículos ocupen todo el ancho */
    background-image: url('/media/img/xt/xtseco.png'); /* Imagen de fondo */
    background-size: cover; /* Asegura que la imagen cubra toda la casilla */
    background-position: center; /* Centra la imagen */
    padding: 20px; /* Espaciado interno */
    border: none; /* Borde A DESAPARECER */
    border-radius: 5px; /* Bordes redondeados */
   

}



#acercaForma {
 
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para efecto de elevación */
    padding: 15px; /* Espaciado interno */
    background-image: url('/media/img/xt/xtblank.png'); /* Imagen de fondo */
    background-size: cover; /* Asegura que la imagen cubra toda la casilla */
    background-position: center; /* Centra la imagen */
   
}

#acercaForma ul li {
    font-style: italic; /* Aplica cursiva al título y a los elementos de la lista */
}

#acercaRecuerdo {
    display: flex;
    align-items: center; /* Centrar verticalmente */
}

#acercaRecuerdo img {
    width: 50px; /* Ajusta el tamaño de la imagen */
    height: auto; /* Mantener la proporción */
    margin-right: 10px; /* Espacio entre la imagen y el texto */
}

/* Media Query para pantallas pequeñas */
@media (max-width: 600px) {
    .grid-acerca {
        grid-template-columns: 1fr; /* Una sola columna en pantallas pequeñas */
    }
}





     .grid-acerca li {
      font-size: clamp(0.6rem, 2vw, 1rem); /* responsive no? */
     }




.flexcolumnas {
    display: grid; /* Usar grid para columnas */
    grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual tamaño */
    gap: 20px; /* Espacio entre columnas */
}

.flexcolumnas p {
    margin: 0; /* Eliminar márgenes para un mejor control */
}






  


/*
     El pie debe de estar fuera del contenedor main y de main.
     Pero puede ser que nos interese un pie dentro de main con agradecimientos u otros enlaces
*/     
     .pie {
      display: grid; /* Usar grid para contener los elementos */
      grid-template-columns: repeat(3, 1fr); /* 3 columnas de una fracion */
      position: sticky;  /* lo dejamos fijo */
      left:0;         /* importante para dejarlo fijo si no no sabe */
      bottom:0;          /* donde posicionarlo */
      backdrop-filter: blur(5px);
      z-index: 1;
      background: rgb(145, 86, 93);
     }

/*
     El texto del pie, bueno de la primera columna del pie. 
*/    
     .pie p {
      font-size: clamp(.4rem, 3vw, .6rem); /* Tamaño responsivo para el subtítulo */
      color:white; 
      text-align: center;
     }
  


.mnudisable {
  color: gray; /* Cambiar el color del enlace deshabilitado */
  pointer-events: none; /* Deshabilitar eventos de puntero */
  text-decoration: none; /* Quitar subrayado */
}