/* --- PALETA DE COLORES --- */
:root {
    --color-primario: #136991;
    --color-base-texto: #1C323C;
    --color-verde: #139175;
    --color-mostaza: #917313;
    --color-cafe: #613B0D;

    --color-blanco: #FFFFFF;
    --color-negro: #000000;
    --color-gris-claro: #a0a0a0;
}

/* Animación para la primera imagen */
@keyframes slideUp1 {
    0% { transform: translateY(0%); z-index: 2; }        /* Empieza visible */
    43.75% { transform: translateY(0%); z-index: 2; }    /* Permanece visible (7s) */
    50% { transform: translateY(-100%); z-index: 2; }    /* Se desliza hacia arriba para salir (1s) */
    50.01% { transform: translateY(100%); z-index: 1; }  /* Se reposiciona abajo, fuera de vista */
    93.75% { transform: translateY(100%); z-index: 1; }  /* Espera abajo (7s) */
    100% { transform: translateY(0%); z-index: 2; }      /* Vuelve a entrar para el siguiente ciclo (1s) */
}

/* Animación para la segunda imagen */
@keyframes slideUp2 {
    0% { transform: translateY(100%); z-index: 1; }      /* Empieza abajo, fuera de vista */
    43.75% { transform: translateY(100%); z-index: 1; }  /* Espera abajo (7s) */
    50% { transform: translateY(0%); z-index: 2; }       /* Entra deslizándose desde abajo (1s) */
    93.75% { transform: translateY(0%); z-index: 2; }    /* Permanece visible (7s) */
    100% { transform: translateY(-100%); z-index: 2; }   /* Se desliza hacia arriba para salir (1s) */
}

.supercenter {
  display: flex;
  flex-wrap: wrap;
  /* flex-direction será 'row' por defecto, que es lo que necesitamos */
  justify-content: center;
  align-items: center;
}
.no-m{
  margin: 0 !important;
}
.no-p{
  padding: 0 !important;
}

main{
    background-color: #1C323C;
}


nav{
  position: fixed;
    z-index: 999;
    margin: 1em;
    width: -webkit-fill-available;
    padding-left: 2em;
    padding-right: 2em;
    background: transparent;
    box-shadow: none;
    transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, margin-left 0.4s ease-in-out, margin-right 0.4s ease-in-out, border-radius 0.4s ease-in-out;
}

/* Nueva clase que se añadirá con JavaScript al hacer scroll */
nav.scrolled {
    background-color: rgba(255, 255, 255, 0.4); /* Un blanco con opacidad */
    margin-left: 2em;
    margin-right: 2em;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Estilo para el logo en la nav */
nav .brand-logo img {
    height: 40px; /* Ajusta la altura del logo */
    margin-top: 12px; /* Centra verticalmente el logo */
}


/* Estilos para la portada de inicio */
#div-home-portada {
    position: relative;
    /* Inicialmente, ocupa el 100% de la altura de la ventana */
    height: 100vh; /* Fallback */
    height: 100dvh;
    /* Se encogerá para dejar espacio al banner */
    flex-shrink: 0;    transition: height 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    width: 100%;
}

/* Estilos para los contenedores de las imágenes */
#portada-img-1, #portada-img-2, #cancun-portada-img-1, #cancun-portada-img-2, #chichen-portada-img-1, #chichen-portada-img-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

#portada-img-1, #cancun-portada-img-1 {
    background-image: url('../imagenes/inicio_portada.webp');
    z-index: 1;
    /* Animación para la primera imagen */
    animation: slideUp1 16s infinite ease-in-out;
}

#portada-img-2, #cancun-portada-img-2 {
    background-image: url('../imagenes/inicio_portada2.webp');
    z-index: 1;
    /* Animación para la segunda imagen, con un retraso para alternar */
    animation: slideUp2 16s infinite ease-in-out;
}

/* Sobrescribimos las imágenes para la página de Cancún */
#cancun-portada-img-1 {
    background-image: url('../imagenes/location_cancun1.webp');
}

#cancun-portada-img-2 {
    background-image: url('../imagenes/location_cancun2.webp');
}

/* Sobrescribimos las imágenes para la página de Chichén Itzá */
#chichen-portada-img-1 {
    background-image: url('../imagenes/chichen_banner1.webp');
    animation: slideUp1 16s infinite ease-in-out; /* Aplicamos la animación correcta */
}

#chichen-portada-img-2 {
    background-image: url('../imagenes/chichen_banner2.webp');
    animation: slideUp2 16s infinite ease-in-out; /* Aplicamos la animación correcta */
}

/* Estilos para el texto de la portada */
#div-home-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5; /* Aseguramos que el texto siempre esté por encima de las imágenes */
  color: var(--color-blanco);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Mantenemos la sombra negra por ahora */
  display: flex;
  flex-direction: column; /* Apila los spans verticalmente */
  justify-content: flex-end; /* Alinea el contenido en la parte inferior */
  align-items: flex-start; /* Alinea el contenido a la izquierda */
  background-color: rgba(0, 0, 0, 0.3); /* Mantenemos el overlay negro por ahora */
  padding: 0 5% 5% 5%; /* Padding: Arriba | Derecha | Abajo | Izquierda */
  box-sizing: border-box; /* Asegura que el padding no desborde el contenedor */
}

#div-home-title span {
    display: block; 
    font-size: clamp(3em, 15vw, 6em);
    font-weight: 900;
    line-height: 1;
    text-shadow: 4px 4px 2px #000000;
}



/* Colores específicos para el título principal */
.text-primario {
    color: var(--color-primario);
}

.text-soporte {
    color: var(--color-cafe);
}

.text-gris {
    color: var(--color-gris-claro);
}

/* Clase para texto en segundo plano */
.text-desactivado {
    color: var(--color-gris-claro);
    text-shadow: none !important; /* Usamos !important para asegurar que se elimine la sombra base */
    opacity: 0.5;
}

/* --- ESTILOS PARA PISTAS DE SCROLL --- */
.scroll-hint {
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translate(-50%, 20px); /* Empieza abajo y centrado */
    background-color: rgba(28, 50, 60, 0.8); /* --color-base-texto con alfa */
    color: var(--color-blanco);
    padding: 0.5em 1em;
    border-radius: 20px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 0.5em;
    z-index: 10;
    pointer-events: none; /* Para que no interfiera con los eventos del ratón */
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    white-space: nowrap; /* Evita que el texto se parta */
}

.scroll-hint .material-icons {
    font-size: 1.2em;
}

/* --- LÓGICA DE VISIBILIDAD PARA PISTAS DE SCROLL DINÁMICAS --- */

/* Por defecto, el mensaje de "salir" está oculto */
.scroll-hint .hint-exit {
    display: none;
}
/* Cuando la pista está en modo activo, se muestra el mensaje de "salir" y se oculta el de "entrar" */
.scroll-hint.in-active-zone .hint-enter {
    display: none;
}
.scroll-hint.in-active-zone .hint-exit {
    display: inline; /* O 'block' si prefieres que ocupe toda la línea */
}

/* Nueva animación de desvanecido para la primera imagen */
@keyframes imageFade1 {
    0% { opacity: 1; }
    45% { opacity: 1; }
    50% { opacity: 0; }
    95% { opacity: 0; }
    100% { opacity: 1; }
}

/* Nueva animación de desvanecido para la segunda imagen */
@keyframes imageFade2 {
    0% { opacity: 0; }
    45% { opacity: 0; }
    50% { opacity: 1; }
    95% { opacity: 1; }
    100% { opacity: 0; }
}

/* Animación de balanceo para los iconos divisores */
@keyframes sway {
    0% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
    100% { transform: rotate(-8deg); }
}

#div_home_letras{
    position: sticky;
    left: 5%;
    bottom: 5%;
}


.info-grid-text {
    /* Hacemos que la columna ocupe toda la altura disponible */
    background-color: transparent;
    align-self: stretch; 
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    /* Le damos una altura explícita para que no colapse */
    aspect-ratio: 1 / 1;
    /* Limitamos la altura máxima en pantallas muy grandes */
    max-height: 500px; 
    overflow: hidden; /* Oculta los slides que se salen del contenedor */
}

.text-content-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Proporción cuadrada */
    max-width: 450px; /* Límite máximo para que no sea demasiado grande en desktop */
    background-color: rgba(0, 0, 0, 0.5); /* Mantenemos overlay negro por ahora */
    color: var(--color-blanco);
    padding: 2em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: n-resize; /* El cursor sugiere scroll vertical */
}

/* --- NUEVOS ESTILOS PARA LA CUADRÍCULA 2x2 --- */
.grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas de igual tamaño */
    grid-template-rows: 1fr 1fr;    /* Dos filas de igual tamaño */
    width: 100%;
    height: 100%;
    gap: 5px; /* Un pequeño espacio entre los cuadros */
}

.grid-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-blanco);
}

/* Estilos individuales para cada celda */
.cell-style-1 {
    font-size: clamp(0.9em, 2.2vw, 1.2em); /* Fuente más grande y audaz */
    font-weight: 700; /* Bold */
}

.cell-style-2 {
    font-size: clamp(0.7em, 1.8vw, 0.9em); /* Fuente más pequeña y ligera */
    font-weight: 300; /* Light */
}

.cell-style-3 {
    font-size: clamp(0.8em, 2vw, 1em); /* Fuente de tamaño medio */
    font-weight: 500; /* Medium */
}

.cell-style-4 {
    font-size: clamp(0.8em, 2vw, 1em); /* Fuente de tamaño medio */
    font-weight: 700; /* Bold */
    font-style: italic; /* Añadimos un estilo itálico para variar */
}

.grid-cell-title {
    font-size: clamp(1.5em, 4vw, 2.2em); /* Fuente grande y responsiva */
    font-weight: 900; /* Extra Bold */
    line-height: 1.1;
}

.btn-reservar-grid {
    background-color: var(--color-blanco);
    color: var(--color-base-texto);
    padding: 0.8em 1.5em;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.btn-reservar-grid:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.info-grid-image {
    /* Hacemos que la columna ocupe toda la altura disponible */
    background-color: transparent;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    /* Le damos la misma altura que a la columna de texto */
    aspect-ratio: 1 / 1;
    /* Limitamos la altura máxima en pantallas muy grandes */
    max-height: 500px;
    overflow: hidden; /* Oculta los slides que se salen del contenedor */
}

.info-grid-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover; /* Asegura que la imagen llene el cuadrado sin deformarse */
    max-width: 450px; /* Mismo límite que el cuadro de texto */
    margin: auto; /* Asegura el centrado perfecto dentro del contenedor flex */
    cursor: n-resize; /* El cursor sugiere scroll vertical fino */
}

.info-grid-text h2 {
    /* clamp(MIN, PREFERRED, MAX) */
    /* El tamaño de la fuente se ajustará entre 1.5em y 2.5em, intentando ser 4vh */
    font-size: clamp(1.5em, 4vh, 2.5em);
    margin-bottom: 0.5em;
}

.info-grid-text p {
    /* El tamaño de la fuente se ajustará entre 0.8em y 1em, intentando ser 2vh */
    font-size: clamp(0.8em, 2vh, 1em);
    margin-bottom: 2em;
    max-width: 500px; /* Evita que el texto sea demasiado ancho */
}

.info-button {
    padding: .5em 1em;
    color: var(--color-blanco);
    background-color: var(--color-primario);
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    text-align: center;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.info-button:hover {
    background-color: #ddd;
}

/* --- ESTILOS PARA LOS SLIDES DE LA ANIMACIÓN --- */

.text-slide, .image-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    transform: translateY(100%);
}

/* Cuando el ratón está sobre la columna, muestra la pista de ayuda */
.info-grid-text:hover .text-hint,
.info-grid-image:hover .image-hint {
    opacity: 1;
    transform: translate(-50%, 0);
}

.text-slide.active,
.image-slide.active {
    transform: translateY(0);
}

/* --- ESTILOS PARA SCROLL SNAPPING --- */

html {
    /* Habilitamos el scroll snapping en el eje vertical */
    scroll-snap-type: y proximity;
}


#info-grid-anim-section{
    min-height: 85vh; /* Fallback */
    min-height: 85dvh; /* 85% de la altura de la pantalla */
    height: auto;
    background-color: var(--color-primario);
    /* El padding-top se mantiene para cuando la sección es visible por sí sola */
    padding-top: calc(4em + 64px);
    box-sizing: border-box; /* Incluye el padding en la altura total */

}
/* 2. Definimos qué secciones son "puntos de ajuste" */
#super-portada-section,
#info-grid-anim-section {
    scroll-snap-align: start;
}

/* --- ESTILOS PARA LA SUPER PORTADA --- */

#super-portada-section {
    /* Ocupa el 100% de la altura de la ventana */
    height: 100vh; /* Fallback */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Oculta el banner cuando está fuera de la vista */
}

/* --- ESTILOS SECCIÓN TEST (FRASE) --- */

#frase-section {
    position: relative; /* Contexto para los elementos absolutos internos */
    height: 100vh; /* Fallback */
    height: 100dvh;
    width: 100%;
    background-color: var(--color-base-texto); /* Color de fondo por si la imagen no carga */
    scroll-snap-align: start; /* Hacemos que sea un punto de ajuste */
    background-image: url('../imagenes/chichen_banner2.webp');
    background-size: cover;
    background-position: center;
    display: flex;
}

.frase-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Mantenemos overlay negro */
    z-index: 2; /* Se asegura que esté por encima de la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1em;
    box-sizing: border-box;
}

.frase-overlay h2 {
    color: var(--color-blanco);
    /* Fuente responsiva más grande que se ajusta entre 2.5em y 6em, intentando ser el 7% del ancho de la ventana */
    font-size: clamp(2.5em, 7vw, 6em);
    text-shadow: 5px 5px 2px var(--color-negro);
    text-transform: uppercase; /* Texto en mayúsculas */
    width: 90%; /* Ocupa el 90% del ancho del overlay */
    max-width: 1400px; /* Evita que la línea de texto sea demasiado larga en pantallas muy grandes */
    font-family: "Oswald", sans-serif;
    font-weight: 600;
}

/* --- ESTILOS SECCIÓN HEADER SIN PARALLAX --- */
#header-section {
    position: relative;
    height: 100vh;
    width: 100%;
    background-image: url('../imagenes/chichen_banner1.webp');
    background-size: cover;
    background-position: center;
    display: flex; /* Para que el overlay se posicione correctamente */
}

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    color: var(--color-blanco);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 0 5% 5% 5%;
    box-sizing: border-box;
}

/* Ajustamos el selector para que apunte al div_home_letras dentro del nuevo overlay */
.header-overlay #div_home_letras {
    position: static; /* Lo reseteamos porque ya no es sticky */
}

/* --- ESTILOS PARA LA SECCIÓN DE INFO-BLOCKS (INICIO) --- */
.desktop-info-grid {
    width: 80%;
    margin: 0 auto; /* Centra el contenedor */
    display: flex;
    flex-direction: column; /* Apila los bloques de tours verticalmente */
    gap: 2em; /* Espacio entre cada bloque de tour */
    height: 100%;
    align-items: center; /* Centra los bloques verticalmente */
    position: relative;
    z-index: 1;
}

.info-block{
    background-color: #FFFFFF;
    display: flex;
    width: 100%; /* Asegura que ocupe todo el espacio del contenedor flex */
}

.info-block-alt-bg {
    background-color: var(--color-base-texto); /* Nuevo color de fondo para páginas de tours */
}

.info-block-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em !important;
    aspect-ratio: 1 / 1; /* Mantiene la proporción cuadrada, igual que la imagen */
}

.info-block-text2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em !important;
}





.info-block-images {
    width: 100%; /* Ocupa todo el ancho de su columna */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: cover; /* Asegura que la imagen cubra el espacio si es necesario */
    padding: 1em !important;
}

.info-block-images img {
    width: 100%; /* Ocupa todo el ancho de su columna */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: cover; /* Asegura que la imagen cubra el espacio si es necesario */
    padding: 1em !important;
}

/* --- ESTILOS PARA LA ANIMACIÓN DE IMÁGENES EN INFO-GRID --- */
.animated-image-container {
    position: relative; /* Contexto para las imágenes absolutas */
    overflow: hidden; /* Oculta las imágenes cuando se mueven */
    padding: 1em !important;
    aspect-ratio: 1 / 1; /* Mantiene la proporción cuadrada */
}

.animated-image-container2 {
    position: relative; /* Contexto para las imágenes absolutas */
    overflow: hidden; /* Oculta las imágenes cuando se mueven */
    padding: 1em !important;
}

.animated-image {
    position: absolute;
    top: 1em;
    left: 1em;
    right: 1em;
    bottom: 1em;
    background-size: cover;
    background-position: center;
}

/* Aplicamos la animación slideUp existente */
.animated-image:nth-child(1) { animation: imageFade1 10s infinite ease-in-out; }
.animated-image:nth-child(2) { animation: imageFade2 10s infinite ease-in-out; }

/* --- ESTILOS PARA DIVISOR DE TOURS --- */
.tour-divider {
    width: 100%;
    margin: 1em 0; /* Espacio vertical igual al padding que tenía antes */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
}

.divider-icon {
    width: 70px;
    height: 70px;
    animation: sway 1s ease-in-out infinite; /* Aplicamos la animación de balanceo */
}





/* --- ESTILOS PARA EL FOOTER --- */

.page-footer {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #0F0F0F;
    scroll-snap-align: start; /* Hacemos que el footer sea un punto de ajuste */
    padding: 0;
}

.newsletter-section {
    min-height: 50vh;    
    color: var(--color-blanco);
    display: flex;
    /* Por defecto, los elementos estarán en una fila */
    align-items: center;
    padding: 100px 2em 2em 2em; /* Padding superior para librar la nav */
    box-sizing: border-box;
    gap: 2em; /* Espacio entre las dos columnas */
    width: 100%; /* Asegura que ocupe todo el ancho del footer */
}

.newsletter-left {
    flex: 1; /* Ocupa una parte del espacio */
    text-align: right;
    padding-right: 2em;
}

.newsletter-right {
    flex: 2; /* Ocupa dos partes del espacio, es más ancha */
    text-align: left;
}

.newsletter-left h2 {
    font-size: clamp(3em, 8vw, 6em);
    line-height: 1;
}

.newsletter-section h2 {
    font-size: clamp(2em, 5vw, 3.5em);
    margin-bottom: 0.5em;
}

.newsletter-section p {
    font-size: clamp(0.9em, 2vw, 1.1em);
    margin-bottom: 2em;
}

.newsletter-form {
    display: flex;
    width: 100%;
    max-width: 500px;
    gap:1em;
}

.newsletter-form input {
    flex-grow: 1;
    border: 2px solid var(--color-blanco);
    background: transparent;
    color: var(--color-blanco);
    padding: 0.8em;
    border-radius: 5px 0 0 5px;
    outline: none;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Mantenemos este por ahora */
}

.btn-suscribir {
    padding: 0.8em 1.5em;
    border: 2px solid var(--color-blanco);
    background-color: var(--color-blanco);
    color: var(--color-primario);
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-weight: bold;
}

.footer-bottom {
    height: 50vh;
    display: grid;
    align-items: center; /* Centra el .row verticalmente */
    width: 100%;
    padding: 0 5%; /* Padding lateral del 5% */
    box-sizing: border-box; /* Asegura que el padding no desborde el contenedor */
}

.footer-left-content {
    color: var(--color-blanco);
}

.sitemap-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sitemap-list li a {
    color: var(--color-gris-claro);
    font-size: 1.1em;
    line-height: 2;
    transition: color 0.3s;
}

.sitemap-list li a:hover {
    color: var(--color-blanco);
}

.contact-info p {
    margin: 0.5em 0;
    color: var(--color-gris-claro);
}

.social-icons {
    margin-top: 1.5em;
    display: flex;
    gap: 1em;
}

.social-icon {
    height: 40px;
    width: 40px;
    border: 1px solid var(--color-gris-claro);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-gris-claro);
    transition: all 0.3s;
}

.social-icon:hover {
    background-color: var(--color-blanco);
    color: var(--color-negro);
    border-color: var(--color-blanco);
}

.footer-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-logo-container img {
    max-width: 250px;
    width: 100%;
}

/* --- AJUSTES PARA EL SIDENAV (MENÚ MÓVIL) --- */
.sidenav{
    height: auto !important;
    max-height: 100vh;
    width: 100%;
    background-color: var(--color-primario);
}

.sidenav a{
    color: var(--color-blanco) !important;
    font-size: 5em !important;
    line-height: 1.2em !important;
    height: auto !important;
    text-shadow: 5px 5px 2px var(--color-negro);
    text-decoration: underline;
}
/* Cuando el sidenav está abierto (transform: translateX(0%)), sobreescribimos su posición final */
ul.sidenav[style*="transform: translateX(0%)"] {
    /* Lo movemos 50px a la derecha para dejar un espacio */
    transform: translateX(6.1em) !important;
    
}

/* Aseguramos que la transición sea suave */
ul.sidenav {
    transition: transform 0.3s, margin-left 0.3s;
}


.mobile-info-grid{
    /* El fondo lo hereda de la sección padre */
    padding: 1em 0; /* Añadimos padding vertical para separar los bloques */
}

#tours-cancun-section{
    background-color: var(--color-base-texto);    
    /* Creamos un espacio superior e inferior */
    padding-top: 120px; 
    padding-bottom: 120px;
    box-sizing: border-box;
    min-height: 100vh; /* Asegura que la sección tenga al menos la altura de la pantalla */
    position: relative;
    overflow: hidden;
}

/* --- ESTILOS MOVIDOS DESDE QUERYS.CSS --- */

/* Ajuste para los títulos de los tours en la cuadrícula de escritorio */
.grid-cell-title {
    font-size: 2.2rem; /* Reducimos el tamaño para que quepan los nombres largos */
}

/* --- DEFINICIÓN DE ANIMACIÓN PARA FADE DE IMÁGENES --- */
@keyframes portadaImageFade {
    0% { opacity: 0; }
    10% { opacity: 1; } /* Aparece suavemente */
    33% { opacity: 1; } /* Se mantiene visible */
    43% { opacity: 0; } /* Se desvanece suavemente */
    100% { opacity: 0; }
}

/* Animación para la entrada del formulario de contacto */
@keyframes formEntrance {
    from {
        opacity: 0;
        transform: translateY(50%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- ESTILOS PARA LA PÁGINA DE CONTACTO --- */

/* Imágenes de fondo para la portada de contacto */
#contacto-portada-img-1, #contacto-portada-img-2, #contacto-portada-img-3 {
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: portadaImageFade 18s infinite; /* 6s por imagen */
}

#contacto-portada-img-1 { background-image: url('../imagenes/contacto1.webp'); animation-delay: 0s; }
#contacto-portada-img-2 { background-image: url('../imagenes/contacto2.webp'); animation-delay: 6s; }
#contacto-portada-img-3 { background-image: url('../imagenes/contacto3.webp'); animation-delay: 12s; }

/* Contenedor principal del formulario */
.contact-form-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro para resaltar el formulario */
}

/* Estilo del formulario */
#contacto-form {
    width: 100%;
    max-width: 1400px;
    background-color: var(--color-primario);
    padding: 2em 3em;
    border-radius: 10px;
    color: white;
    /* Aplicamos la animación de entrada */
    opacity: 0; /* Estado inicial invisible */
    transform: translateY(50%); /* Estado inicial abajo */
    animation: formEntrance 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
}

.form-title {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0.2em;
    text-shadow: 3px 3px 2px #000000;
}

.form-subtitle {
    text-align: center;
    margin-bottom: 2em;
    opacity: 0.9;
    font-weight: 600;
}

/* Estilo de los inputs y textarea */
#contacto-form input[type=text],
#contacto-form input[type=tel],
#contacto-form input[type=email],
#contacto-form textarea.materialize-textarea {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
}

/* Botón de envío */
#contact-btn {
    background-color: var(--color-base-texto);
}

/* --- ESTILOS ESPECÍFICOS PARA FOOTER DE CONTACTO --- */
/* Usamos la clase única para aplicar el color solo al footer de la página de contacto */
.contact-page-wrapper + .page-footer {
    background-color: var(--color-base-texto);
}

/* --- ESTILOS ESPECÍFICOS PARA LA BARRA DE NAVEGACIÓN EN LA PÁGINA DE GALERÍA --- */
/* Aplicamos un fondo sólido y eliminamos los márgenes para que ocupe todo el ancho */
.nav-galeria {
    background-color: var(--color-primario) !important; /* Azul primario */
}

/* --- ESTILOS PARA LA PÁGINA DE GALERÍA --- */

.galeria-container {
    width: 100%;
    height: 100vh;
    background-color: #1C323C;
    padding-top: 80px; /* Espacio para la barra de navegación fija */
    box-sizing: border-box; /* Incluye el padding en la altura total de 100vh */
}
.galeria-container .row {
    height: 100%;
}
.galeria-izquierda, .galeria-derecha {
    height: 100%; /* Hacemos que las columnas ocupen el 100% de la altura de la fila */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.galeria-izquierda {
    
}

/* --- Columna Izquierda: Slider --- */
.marco-polaroid {
    background-color: white;
    padding: 25px 25px 80px 25px; /* Padding tipo polaroid (más abajo) */
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    box-sizing: border-box;
    transform: rotate(-2deg);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Transición suave para los cambios de posición/rotación */
    display: flex; /* Usamos flex para centrar el contenido */
    justify-content: center;
    align-items: center;
}
.marco-polaroid-inverted {
    transform: rotate(2deg); /* Invertimos la rotación para el efecto espejo */
}
.slider-vertical {
    width: 300px; /* Ancho fijo para la imagen */
    height: 400px; /* Altura fija para la imagen, proporción ~3:4 */
    position: relative; /* Contenedor para las imágenes posicionadas absolutamente */
    overflow: hidden; /* Nos aseguramos que nada se salga */
}
.slide-imagen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Todas las imágenes están ocultas por defecto */
    transition: opacity 0.8s ease-in-out; /* Transición suave para el desvanecimiento */
    z-index: 1;
}
.slide-imagen.active-img {
    opacity: 1; /* La imagen activa se hace visible */
    z-index: 2; /* Se asegura que esté por encima de las otras */
}
.slide-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la proporción 3:4 y recorta */
}

.controles-slider {
    position: absolute;
    bottom: 20px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.controles-slider .btn-floating {
    background-color: #2c3e50;
}

/* --- Columna Derecha: Texto --- */
.galeria-derecha {
    align-items: flex-start; /* Alineamos el contenido arriba */
    padding-top: 5vh !important; /* Espacio superior */
}
.textos-galeria {
    position: relative;
    width: 80%;
}
.texto-item {
    position: absolute;
    width: 100%;
    opacity: 0; /* Oculto por defecto, la visibilidad la controla JS */
    pointer-events: none; /* Evita que los textos ocultos interfieran */
    transition: opacity 0.1s; /* Transición rápida para evitar parpadeos */
}
.texto-item.active {
    opacity: 1;
    position: relative; /* Ocupa espacio en el layout cuando está activo */
    pointer-events: auto;
}
.texto-escalonado p {
    background-image: url('../imagenes/textura2.webp'); /* Nueva textura */
    background-repeat: repeat; /* Repetimos la textura */
    background-origin: border-box;
    background-size: 150px; /* Hacemos el patrón de la textura más grande */
    color: white;
    text-shadow: 3px 2px 0px #000000;
    padding: 10px 15px;
    margin-bottom: 0;
    font-size: clamp(1.1em, 1.5vw, 1.3em); /* Fuente responsiva para evitar saltos de línea */
    font-weight: 750;
    display: block;
    text-align: right;
    margin-left: auto;
    border: 5px solid #130a02;
    border-radius: 5px;
    border-right: 0;
    margin-top: -5px;
    line-height: 2.8em;    
    /* Estado inicial para la animación de entrada */
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
/* Cuando el texto está activo, animamos la entrada de cada línea */
.texto-item.active .texto-escalonado p {
    opacity: 1;
    transform: translateX(0);
}

/* --- ESTILOS PARA BANNER DE COMENTARIOS --- */
@keyframes scrollComments {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Se desplaza la mitad de su ancho (la parte original) */
}

#comment-banner {
    height: 15vh; /* Fallback */
    height: 15dvh; /* 15% de la altura de la pantalla */
    background-color: var(--color-base-texto);
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex; /* Para centrar verticalmente el contenido */
    align-items: center;
    padding: 0; /* Eliminamos el padding vertical para un control preciso de la altura */
}

/* Degradados en los bordes para un efecto suave */
#comment-banner::before,
#comment-banner::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
}

#comment-banner::before {
    left: 0;
    background: linear-gradient(to right, var(--color-base-texto), transparent);
}

#comment-banner::after {
    right: 0;
    background: linear-gradient(to left, var(--color-base-texto), transparent);
}

.comment-slider-track {
    display: flex; /* Pone los comentarios en una fila horizontal */
    animation: scrollComments 60s linear infinite;
}

.comment-item {
    flex-shrink: 0; /* Evita que los items se encojan */
    width: 350px; /* Ancho fijo para cada comentario */
    margin: 0 10em;
    color: var(--color-blanco);
}

.comment-item p {
    font-style: italic;
    opacity: 0.8;
}
.comment-item span {
    font-weight: bold;
    display: block;
    text-align: right;
    margin-top: 1em;
}
.texto-escalonado p.linea-25 { max-width: 25%; transition-delay: 0.2s; }
.texto-escalonado p.linea-50 { max-width: 50%; transition-delay: 0.15s; }
.texto-escalonado p.linea-75 { max-width: 75%; transition-delay: 0.1s; }
.texto-escalonado p.linea-100 { max-width: 100%; transition-delay: 0.05s; }

/* --- ESTILOS PARA DEMO PARALLAX (test.html) --- */

/* El contenedor que define el área visible del parallax */
.parallax-container-test {
    position: relative;
    overflow: hidden;
    height: 70vh; /* Altura del área parallax, puedes ajustarla */
}

/* El div que contiene la imagen y se moverá */
.parallax-test {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* Se asegura que esté detrás de cualquier contenido */
}

.parallax-test img {
    position: absolute;
    left: 50%;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(-50%);
    /* La propiedad 'top' será manipulada por JavaScript */
    will-change: transform; /* Optimización para el navegador */
}


.section {
    padding-top: 0; 
     padding-bottom: 0; 
}