/* ==================================================
   PARADISE INN — ESTILOS RESPONSIVE
   Archivo: responsive.css
   Breakpoints: 900px, 700px y 500px
================================================== */


/* ==================================================
   TABLETAS Y DISPOSITIVOS MÓVILES
   Hasta 900px
================================================== */

@media (max-width:900px){

    /* ==========================
       NAVEGACIÓN
    ========================== */

    .menu-toggle{
        display:block;
    }

   .navlinks{
    position:absolute;
    top:100%;
    left:0;

    width:100%;
    max-height:calc(100vh - 130px);

    display:none;
    overflow-y:auto;
    overscroll-behavior:contain;

    padding:15px 0 24px;

    background:var(--cream);

    z-index:1001;

    -webkit-overflow-scrolling:touch;
}
    .navlinks.active{
        display:block;
    }

    .navlinks ul{
        flex-direction:column;
        align-items:center;
        gap:0;
    }

    .navlinks ul li{
        width:100%;
        text-align:center;
    }

    .navlinks ul li a{
        display:block;
        width:100%;
        padding:16px 20px;
        border-radius:0;
    }

    .navlinks ul li.cta-btn{
        padding:16px;
    }

    .navlinks ul li.cta-btn a{
        display:inline-block;
        width:auto;
    }


    /* ==========================
       SUBMENÚ MÓVIL
    ========================== */

  .navlinks ul li.menu-item-has-children{
    position:relative;
}

.navlinks ul li.menu-item-has-children:hover > ul{
    display:none;
}

.navlinks ul ul{
    position:static;
    display:none;
    width:100%;
    min-width:0;
    padding:0;
    background:rgba(31,122,92,.06);
    border-radius:0;
}

.navlinks ul li.submenu-open > ul{
    display:block;
}

.navlinks ul ul li a{
    padding:12px 20px;
    font-size:.9rem;
}

.navlinks ul li.submenu-open:hover > ul{
    display:block;
}


    /* ==========================
       HERO / PORTADA
    ========================== */

    .hero-grid{
        grid-template-columns:1fr;
    }

    .hero h1{
        font-size:2.3rem;
    }

    .hero-photo-stack{
        height:320px;
        margin-top:20px;
    }


    /* ==========================
       SERVICIOS
    ========================== */

    .service-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }


    /* ==========================
       HABITACIONES: LISTADO
    ========================== */

    .room-scroll{
        grid-template-columns:1fr;
    }


    /* ==========================
       SALONES: LISTADO
    ========================== */

    .salon-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }


    /* ==========================
       CONTACTO
    ========================== */

    .contact{
        padding:60px 0;
    }

    .contact-card{
        grid-template-columns:1fr;
        gap:30px;
        padding:36px;
        border-radius:28px;
    }

    .map-frame iframe{
        height:320px;
    }


    /* ==========================
       HABITACIÓN INDIVIDUAL
    ========================== */

    .room-detail{
        padding:40px 0;
    }

    .room-header h1{
        font-size:2.2rem;
    }

    .room-description{
        font-size:1rem;
    }

    .room-features{
        grid-template-columns:1fr;
        gap:15px;
        margin:30px 0;
    }

    .feature-card{
        padding:22px;
    }

    .room-info-box{
        padding:25px;
        border-radius:25px;
    }

    .room-price strong{
        font-size:1.7rem;
    }


    /* ==========================
       GALERÍA REUTILIZABLE
    ========================== */

    .gallery-container{
        margin-bottom:32px;
    }

    .gallery-main{
        aspect-ratio:4 / 3;
        margin-bottom:16px;
        border-radius:24px;
    }

    .gallery-strip{
        gap:12px;
        padding-bottom:10px;
        scrollbar-width:none;
    }

    .gallery-strip::-webkit-scrollbar{
        display:none;
    }

    .gallery-thumb-button{
        flex-basis:112px;
        width:112px;
        border-radius:14px;
    }

    .gallery-thumb{
        border-radius:14px;
    }


    /* ==========================
       AMENIDADES
    ========================== */

    .amenidades ul{
        grid-template-columns:1fr;
    }


    /* ==========================
       SALÓN INDIVIDUAL
    ========================== */

    .salon-features,
    .equipamiento-list{
        grid-template-columns:1fr;
    }

    .salon-header h1{
        font-size:2.2rem;
    }

    .salon-info-box{
        padding:28px;
    }


    /* ==========================
       RESTAURANTE
    ========================== */

    .restaurant-page{
        padding:50px 0;
    }

    .restaurant-header h1{
        font-size:2.2rem;
    }

    .restaurant-main-image img{
        height:320px;
    }

    .restaurant-gallery{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .restaurant-information{
        grid-template-columns:1fr;
    }


    /* ==========================
       RESERVACIONES
    ========================== */

    main,
    .page-content{
        padding-top:130px;
    }

    .reservation-section{
        padding:32px 0 70px;
    }

    .reservation-layout{
        grid-template-columns:1fr;
        gap:34px;
    }

    .reservation-information{
        position:static;
    }

    .reservation-information-card{
        margin-top:24px;
    }

    .reservation-form-container{
        padding:32px;
    }

}


/* ==================================================
   PIE DE PÁGINA RESPONSIVE
   Hasta 700px
================================================== */

@media (max-width:700px){

    .footer-row{
        flex-direction:column;
        justify-content:center;
        gap:18px;
    }

    .footer-title{
        justify-content:center;
    }

    .footer-bottom{
        margin-top:18px;
    }

    .footer-fine{
        line-height:1.7;
    }
}


/* ==================================================
   DISPOSITIVOS MÓVILES PEQUEÑOS
   Hasta 500px
================================================== */

@media (max-width:500px){

    /* ==========================
       HERO / PORTADA
    ========================== */

    .hero h1{
        font-size:2rem;
    }


    /* ==========================
       SERVICIOS
    ========================== */

    .service-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .service-card{
        padding:16px;
    }

    .service-icon{
        width:42px;
        height:42px;
        margin-bottom:10px;
    }

    .service-card h3{
        font-size:.95rem;
    }

    .service-card p{
        font-size:.82rem;
        line-height:1.4;
    }


    /* ==========================
       SALONES: LISTADO
    ========================== */

    .salon-grid{
        grid-template-columns:1fr;
    }


    /* ==========================
       CONTACTO
    ========================== */

    .contact{
        padding:40px 0;
    }

    .contact .wrap{
        width:calc(100% - 24px);
    }

    .contact-card{
        gap:24px;
        padding:26px 18px;
        border-radius:22px;
    }

    .contact-info h2{
        margin-bottom:12px;
        font-size:1.55rem;
        line-height:1.15;
    }

    .contact-info p{
        margin-bottom:20px;
        font-size:.92rem;
    }

    .contact-list{
        gap:12px;
    }

    .contact-list > div{
        grid-template-columns:34px minmax(0,1fr);
        gap:10px;
        font-size:.86rem;
        line-height:1.4;
    }

    .contact-list .ico{
        width:34px;
        height:34px;
        border-radius:9px;
        font-size:14px;
    }

    .map-frame{
        border-radius:17px;
    }

    .map-frame iframe{
        height:230px;
    }


    /* ==========================
       GALERÍA REUTILIZABLE
    ========================== */

    .gallery-container{
        margin-bottom:28px;
    }

    .gallery-main{
        border-radius:20px;
    }

    .gallery-strip{
        gap:10px;
        margin-right:-28px;
        padding-right:28px;
    }

    .gallery-thumb-button{
        flex-basis:96px;
        width:96px;
        border-radius:13px;
    }

    .gallery-thumb{
        border-radius:13px;
    }


    /* ==========================
       RESERVACIONES
    ========================== */

    main,
    .page-content{
        padding-top:158px;
    }

    .reservation-section{
        padding:24px 0 52px;
    }

    .reservation-section .wrap{
        padding-right:18px;
        padding-left:18px;
    }

    .reservation-layout{
        gap:24px;
    }

    .reservation-intro-card{
        padding:26px 22px;
        border-radius:18px;
    }

    .reservation-intro-card h1{
        font-size:2.15rem;
        line-height:1.08;
    }

    .reservation-intro-card p{
        font-size:.94rem;
        line-height:1.7;
    }

    .reservation-information-card{
        margin-top:20px;
        padding:24px 22px;
        border-radius:18px;
    }

    .reservation-information-card h2{
        font-size:1.65rem;
    }

    .reservation-form-container{
        padding:24px 18px;
        border-radius:20px;
    }

    .reservation-form{
        gap:28px;
    }

    .reservation-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .reservation-field-full{
        grid-column:auto;
    }

    .reservation-fieldset + .reservation-fieldset{
        padding-top:28px;
    }

    .reservation-fieldset legend{
        margin-bottom:20px;
        font-size:1.2rem;
    }

    .reservation-field input,
    .reservation-field select,
    .reservation-field textarea{
        min-height:50px;
        padding:12px 14px;
    }

    .reservation-consent{
        padding:18px 16px;
    }

    .reservation-submit{
        align-items:stretch;
        flex-direction:column;
    }

    .reservation-submit-button{
        width:100%;
        min-width:0;
    }

    .reservation-required-note{
        text-align:center;
    }

    .reservation-message{
        margin-bottom:24px;
        padding:16px 18px;
    }

    /* ==========================
       RESUMEN DE COTIZACIÓN
    ========================== */

    .reservation-summary{
        padding:22px;
    }

    .reservation-summary-header{
        flex-direction:column;
        gap:12px;
    }

    .reservation-summary-list > div,
    .reservation-summary-total{
        align-items:flex-start;
    }

    .reservation-summary-total{
        flex-direction:column;
        gap:8px;
    }

    .reservation-summary-total strong{
        text-align:left;
    }

}

/* ==================================================
   GUÍA TURÍSTICA RESPONSIVE
================================================== */


/* ==================================================
   GUÍA TURÍSTICA
   Hasta 1100px
================================================== */

@media (max-width:1100px){

    .tourism-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* ==================================================
   GUÍA TURÍSTICA
   Hasta 900px
================================================== */

@media (max-width:900px){

    .tourism-hero{
        padding:60px 0 45px;
    }

    .tourism-navigation{
        top:76px;
    }

    .tourism-navigation-list{
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:4px;
        scrollbar-width:none;
    }

    .tourism-navigation-list::-webkit-scrollbar{
        display:none;
    }

    .tourism-navigation-link{
        flex:0 0 auto;
    }

    .tourism-section{
        padding:65px 0;
    }
}


/* ==================================================
   GUÍA TURÍSTICA
   Hasta 700px
================================================== */

@media (max-width:700px){

    .tourism-hero h1{
        font-size:2.7rem;
    }

    .tourism-hero p{
        font-size:1rem;
    }

    .tourism-section-header{
        grid-template-columns:1fr;
        gap:16px;
    }

    .tourism-section-number{
        width:52px;
        height:52px;
    }

    .tourism-grid{
        grid-template-columns:1fr;
    }

    .tourism-card-content{
        padding:22px;
    }

    .tourism-empty-card{
        padding:42px 24px;
    }
}


/* ==================================================
   GUÍA TURÍSTICA
   Hasta 500px
================================================== */

@media (max-width:500px){

    .tourism-hero{
        padding:45px 0 35px;
    }

    .tourism-hero h1{
        font-size:2.25rem;
    }

    .tourism-navigation{
        padding:13px 0;
    }

    .tourism-navigation-link{
        min-height:38px;
        padding:8px 14px;
        font-size:.82rem;
    }

    .tourism-section{
        padding:50px 0;
    }

    .tourism-section-header h2{
        font-size:2rem;
    }

    .tourism-card h3{
        font-size:1.35rem;
    }
}

/* ==================================================
   REDUCCIÓN DE MOVIMIENTO
================================================== */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }
}