/* 1. Para Móviles (Hasta 600px) */
@media (max-width: 600px) {
.info-block-images{
        aspect-ratio: 1/1 !important;
}
    .galeria-container{
        width: 100%;
    }
    .info-button {
    font-size: 1em;
}


    .cell-style-1 h2{
        font-size: .9em !important;
        font-weight: 400;
        font-style: italic;
        padding: 1em;
    }
    .cell-style-2{
        font-size: .9em;
        font-weight: 400;
        font-style: italic;
        padding: 1em;
    }
    .cell-style-3{
        font-size: .8em;
        font-weight: 400;
        padding: 2em;
    }
    .cell-style-4{
        font-size: 1em;
        font-weight: 300;
        font-style: italic;
    }

    .tour-grid-column{
    flex-direction: column-reverse;
    }

     .info-block-text h2 {
        font-size: 1.5em;
        margin: .5em
    }

        .info-block-text p {
        margin: 2em;
        font-size: 1em;
        text-align: justify;
}

    .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 */
    font-size: 1.2rem; /* Tamaño de fuente reducido para móvil */
    display: block;
    text-align: center; /* Centramos el texto dentro del bloque */
    border: 5px solid #211101; /* Restauramos el borde */
    margin-top: -5px; /* Superponemos los bloques */
    line-height: 3em;
    margin-left: auto; /* Centramos el bloque en la pantalla */
    margin-right: auto; /* Centramos el bloque en la pantalla */
}
    /* En móviles, un padding aún menor en las columnas */
    .info-grid-text, .info-grid-image {
        padding: 1em;
    }

    /* En móvil, el formulario del newsletter se apila verticalmente */
    .newsletter-form {
        flex-direction: column;
        width: 90%; /* El formulario ocupa el 90% del ancho */
        max-width: 400px; /* Un límite para móviles muy anchos */
    }
    .newsletter-form input, .btn-suscribir {
        border-radius: 5px; /* Bordes redondeados completos */
        margin: 0.5em 0;
    }

    /* En móvil, la barra de navegación tiene un fondo sólido */
    nav {
        background-color: rgb(0, 0, 0, .8);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Añadimos una sombra sutil */
    }

    /* En móvil, el newsletter vuelve a ser una sola columna */
    .newsletter-section {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 1em;
    }

    /* Aseguramos que el texto de las columnas también se centre */
    .newsletter-left, .newsletter-right {
        text-align: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* En móvil, la altura del footer y sus secciones es automática */
    .page-footer {
        height: auto;
    }
    .newsletter-section {
        min-height: auto; /* Quitamos la altura mínima */
        padding: 4em 1em; /* Ajustamos el padding para móvil */
    }
    .footer-bottom {
        height: auto; /* Quitamos la altura fija */
        padding: 4em 5%; /* Añadimos padding vertical */
    }

    /* Centramos el contenido del footer-bottom en móvil */
    .footer-left-content {
        text-align: center;
    }
    .contact-info {
        margin-top: 2em; /* Espacio entre sitemap y contacto */
    }
    .social-icons {
        justify-content: center; /* Centra los iconos */
        margin-top: 1em;
    }

    /* Ajustamos el tamaño de fuente del sidenav en móvil */
    .sidenav a {
        /* clamp(MIN, PREFERIDO, MAX) */
        /* La fuente se ajustará entre 2.5em y 4em, intentando ser el 10% del ancho de la pantalla */
        font-size: clamp(2.5em, 10vw, 4em) !important;
        line-height: 1.2 !important; /* Usamos un valor sin unidad para que sea relativo al font-size */
    }

    /* Desactivamos el scroll snapping en móvil para un desplazamiento libre */
    html {
        scroll-snap-type: none;
    }

    /* Control de visibilidad para Info-Grid */
   .desktop-info-grid {
        display: flex; /* Mostramos la vista de escritorio */
        width: 80%;
    }

 
    #info-grid-anim-section{
        height: auto;
        padding: 1em;
        background-color: var(--color-primario);
    }

    /* --- NUEVOS ESTILOS PARA INFO-GRID EN MÓVIL --- */
    .mobile-info-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* --- Sobrescritura de VH a DVH para Móvil --- */
    #div-home-portada,
    #super-portada-section,
    #frase-section {
        height: 100dvh;
    }
    .sidenav {
        max-height: 100dvh;
    }

    /* Altura de pantalla completa para la sección de tours en móvil */
    #tours-cancun-section {
        height: auto; /* La altura se adapta al contenido */
    }

    /* Ajustes para el formulario de contacto en móvil */
    #contacto-form {
        padding: 1.5em; /* Reducimos el padding */
    }
    .form-title {
        font-size: 2em; /* Reducimos el título */
    }
    .form-subtitle {
        font-size: 0.9em; /* Reducimos el subtítulo */
        margin-bottom: 1.5em;
    }

    /* --- ESTILOS RESPONSIVOS PARA LA GALERÍA (MÓVIL) --- */
    .galeria-container {
        height: auto; /* La altura se adapta al contenido */
        padding-top: 64px;
        padding-bottom: 5em; /* Añadimos espacio inferior */
    }
    .galeria-izquierda, .galeria-derecha {
        height: auto;
    }
    .galeria-izquierda {
        height: 60vh;
        min-height: 400px;
    }
    .marco-polaroid {
        padding: 15px 15px 80px 15px; /* Ajustamos padding para móvil */
    }
    .controles-slider { right: 5%; bottom: 10px; }
    .galeria-derecha { 
        padding: 5vh 0 !important;
        display: none !important; /* Ocultamos la columna derecha en móvil */
    }

      .info-block.row {
        display: flex;
        flex-direction: column;
        margin-bottom: 2em; 
    }

}

/* Se aplica entre 601px y 768px */
@media only screen and (min-width: 601px) and (max-width: 768px) {
    .col.sm1{width:8.33333% !important;margin-left:auto !important}.col.sm2{width:16.66667% !important;margin-left:auto !important}.col.sm3{width:25% !important;margin-left:auto !important}.col.sm4{width:33.33333% !important;margin-left:auto !important}.col.sm5{width:41.66667% !important;margin-left:auto !important}.col.sm6{width:50% !important;margin-left:auto !important}.col.sm7{width:58.33333% !important;margin-left:auto !important}.col.sm8{width:66.66667% !important;margin-left:auto !important}.col.sm9{width:75% !important;margin-left:auto !important}.col.sm10{width:83.33333% !important;margin-left:auto !important}.col.sm11{width:91.66667% !important;margin-left:auto !important}.col.sm12{width:100% !important;margin-left:auto !important}.offset-sm1{margin-left:8.33333% !important}.offset-sm2{margin-left:16.66667% !important}.offset-sm3{margin-left:25% !important}.offset-sm4{margin-left:33.33333% !important}.offset-sm5{margin-left:41.66667% !important}.offset-sm6{margin-left:50% !important}.offset-sm7{margin-left:58.33333% !important}.offset-sm8{margin-left:66.66667% !important}.offset-sm9{margin-left:75% !important}.offset-sm10{margin-left:83.33333% !important}.offset-sm11{margin-left:91.66667% !important}.hide-on-sm-only{display:none !important}
    
      .galeria-container{
        width: 100%;
    }

        .info-button {
                    font-size: 1em;
                }

    .cell-style-1 h2{
        font-size: .7em !important;
        font-weight: 400;
        font-style: italic;
        padding: .5em;
    }

        .cell-style-2{
        font-size: .7em;
        font-weight: 400;
        font-style: italic;
        padding: .5em;
    }
    .cell-style-3{
        font-size: .7em;
        font-weight: 300;
        padding: 1em;
    }
    .cell-style-4{
        font-size: .7em;
        font-style: italic;
    }
    /* --- REGLAS PARA REPLICAR VISTA MÓVIL EN TABLET PEQUEÑA --- */
    .desktop-info-grid {
        width: 80%;
    }

    .tour-grid-column{
        flex-direction: column;
    }
    .info-block.row {
        display: flex;
        flex-direction: row; /* Apila el texto y la imagen internos verticalmente */
        margin-bottom: 2em; /* Añade un espacio entre los bloques apilados */
    }

    .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 */
    display: block;
    text-align: center; /* Centramos el texto dentro del bloque */
    border: 5px solid #211101; /* Restauramos el borde */
    margin-top: -5px; /* Superponemos los bloques */
    line-height: 3em;
    margin-left: auto; /* Centramos el bloque en la pantalla */
    margin-right: auto; /* Centramos el bloque en la pantalla */
}

    .info-block-text h2 {
        font-size: 1.3em;
        margin: .5em !important;
    }

    .info-block-text p {
        font-size: 0.7em; /* Tamaño de párrafo más pequeño */
        text-align: justify;
        margin: 2em;
    }


      .galeria-container {
        height: auto; /* La altura se adapta al contenido */
        padding-top: 64px;
        padding-bottom: 5em; /* Añadimos espacio inferior */
    }
    .galeria-izquierda, .galeria-derecha {
        height: auto;
    }
    .galeria-izquierda {
        height: 60vh;
        min-height: 400px;
    }
    .marco-polaroid {
        padding: 15px 15px 80px 15px; /* Ajustamos padding para tablet */
    }
    .controles-slider { right: 5%; bottom: 10px; }
    .galeria-derecha { 
        padding: 5vh 0 !important;
        display: none !important; /* Ocultamos la columna derecha en tablet pequeña */
    }
    /* En tablet pequeña, la barra de navegación también tiene fondo sólido */
    nav {
        background-color: rgb(0, 0, 0, .8);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* --- ESTILOS PARA INFO-GRID EN TABLETS PEQUEÑAS (DUPLICADOS) --- */
    #info-grid-anim-section{
        height: auto;
        padding: 1em;
        background-color: var(--color-primario);
    }
 
    /* --- Sobrescritura de VH a DVH para Tablet Pequeña --- */
    #div-home-portada,
    #super-portada-section,
    #frase-section {
        height: 100dvh;
    }
    .sidenav {
        max-height: 100dvh;
    }

    /* Altura de pantalla completa para la sección de tours en tablet pequeña */
    #tours-cancun-section {
        height: auto; /* La altura se adapta al contenido */
    }
}

/* 3.5 BREAKPOINT PERSONALIZADO: "Medium" (m) */
/* Se aplica entre 769px y 992px */
@media only screen and (min-width: 769px) and (max-width: 992px) {
    
    .galeria-container{
        width: 100%; 
    }
        .info-button {
                font-size: 1em;
            }
        .cell-style-1 h2{
        font-size: .7em !important;
        font-weight: 400;
        font-style: italic;
        padding: .5em;
    }
    .cell-style-2{
        font-size: .9em;
        font-weight: 300;
        font-style: italic;
        padding: .5em;
    }
    .cell-style-3{
        font-size: 1em;
        font-weight: 400;
        padding: 1em;

    }
    .cell-style-4{
        font-size: 1em;
        font-weight: 300;
        font-style: italic;
    }

    .desktop-info-grid {
        display: flex;
        width: 80%;
    }

    .tour-grid-column{
        flex-direction: column-reverse;
    }
    


    /* En tablet mediana, la barra de navegación también tiene fondo sólido */
    nav {
        background-color: rgb(0, 0, 0, .8);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* Altura de pantalla completa para la sección de tours en tablet mediana */
    #tours-cancun-section {
        height: auto; /* La altura se adapta al contenido */
    }

    .info-block-text h2 {
        font-size: 1.4em;
        margin: .5em !important;
    }

    .info-block-text p {
        font-size: 0.8em; /* Tamaño de párrafo más pequeño */
        text-align: justify;
        margin: 2em;
    }

    /* En tablet mediana (vista escritorio), el texto pasa a 2 columnas */
    .info-grid-text p {
        column-count: 2;
        column-gap: 2em;
    }
}

/* 4. Para Escritorio (993px en adelante) */
@media only screen and (min-width: 993px) and (max-width: 1599px) {
    /* Control de visibilidad para Info-Grid */

       .galeria-container{
        width: 80%;
        margin-left: auto;
        margin-right: auto; 
    }
    
        .info-button {
                font-size: .7em;
            }

        .cell-style-1 h2{
        font-size: .7em !important;
        font-weight: 400;
        font-style: italic;
        padding: .5em;
    }
        .cell-style-2{
        font-size: .7em;
        font-weight: 300;
        font-style: italic;
        padding:1em;
    }
    .cell-style-3{
        font-size: .8em;
        font-weight: 400;
        padding: 1.5em;
    }
    .cell-style-4{
        font-size: 1em;
        font-weight: 300;
        font-style: italic;
    }

    .desktop-info-grid {
        display: flex; /* Mostramos la vista de escritorio */
        width: 60%;
        max-width: 1400px; /* Limitamos el ancho máximo para mejor legibilidad */
       
    }
      .tour-grid-column {
        flex-direction: column !important;
    }
      
      .info-block{
        flex-direction: row !important;
    }
  

         .info-block-text-2 {
        aspect-ratio: unset;
    }
      .animated-image-container2 {
        aspect-ratio: unset;
    }

    #info-grid-anim-section {height: auto !important;}
    /* Altura de pantalla completa para la sección de tours en escritorio */
    #tours-cancun-section {
        height: auto; /* La altura se adapta al contenido */
    }

    .info-block-text h2 {
        font-size: 1.2em !important;
        margin: .5em;
        margin-bottom: .1em;
        text-align: center;
    }

    .info-block-text p {
        font-size: 0.7em; /* Tamaño de párrafo más pequeño */
        text-align: justify;
        margin: 2em;
    }

    /* En escritorio, el texto de la descripción es a 2 columnas */
    .info-grid-text p {
        column-count: 2;
        column-gap: 2em;
    }

    /* Ajustes para mostrar 2 imágenes en lugar de slider en INICIO */
    #info-grid-anim-section .animated-image-container {
        display: flex;
        gap: 1em;
        padding: 1em;
    }

    #info-grid-anim-section .animated-image {
        position: relative;
        width: 50%;
        height: auto;
        aspect-ratio: 1 / 1;
        animation: none; /* Quitamos la animación de fade */
        top: 0; left: 0; right: 0; bottom: 0; /* Reseteamos posición */
    }
}

/* 5. Para Escritorios Grandes (1600px en adelante) */
@media only screen and (min-width: 1600px) {
    /* Control de visibilidad para Info-Grid */
           .galeria-container{
        width: 70%;
        margin-left: auto;
        margin-right: auto; 
    }

        .info-button {
                font-size: 1em;
            }

        .cell-style-1 h2{
        font-size: 1.8em !important;
        font-weight: 400;
        font-style: italic;
        padding: .5em;
    }       
    .cell-style-2{
        font-size: 1.4em;
        font-weight: 300;
        font-style: italic;
        padding: 1.5em;
    }
    .cell-style-3{
        font-size: 1.2em;
        font-weight: 300;
        padding: 2em;
    }
    .cell-style-4{
        font-size: 1em;
        font-weight: 300;
        font-style: italic;
    }
   
    .desktop-info-grid {
        display: flex; /* Mostramos la vista de escritorio */
        width: 60%;
        max-width: 1400px; /* Limitamos el ancho máximo para mejor legibilidad */
        
    }

      .tour-grid-column {
        flex-direction: column !important;
    }
      
      .info-block{
        flex-direction: row !important;
    }
      .info-block-text {
        aspect-ratio: unset;
    }
    .animated-image-container {


        
    }
    #info-grid-anim-section {height: auto !important;}
    .info-block-text {
        padding: 3em; /* Más espaciado interno */
    }

    .info-block-text h2 {
        font-size: 1.5rem; /* Título más grande */
        margin: 1em;
        margin-bottom: .2em;
    }

    .info-block-text p {
        font-size: .9rem; /* Párrafo más grande y legible */
        text-align: justify;
        margin: 2em;
        margin-bottom: 1em;
    }

    /* Ajustes para mostrar 2 imágenes en lugar de slider en INICIO */
    #info-grid-anim-section .animated-image-container {
        display: flex;
        gap: 1em;
        padding: 1em;
    }

    #info-grid-anim-section .animated-image {
        position: relative;
        width: 50%;
        height: auto;
        aspect-ratio: 1 / 1;
        animation: none; /* Quitamos la animación de fade */
        top: 0; left: 0; right: 0; bottom: 0; /* Reseteamos posición */
    }
}