/* =========================================================
   HOTEL VYC
   RESPONSIVE.CSS
   Adaptación para tablets, celulares y pantallas pequeñas
   ========================================================= */


/* =========================================================
   TABLETS Y PANTALLAS MEDIANAS
   Hasta 1100px
   ========================================================= */

@media (max-width: 1100px) {

    /* -----------------------------------------------------
       CONTENEDOR
       ----------------------------------------------------- */

    .contenedor {
        width: min(94%, 1000px);
    }


    /* -----------------------------------------------------
       ENCABEZADO
       ----------------------------------------------------- */

    .encabezado-contenido {
        gap: 15px;
    }


    .menu-principal {
        gap: 0;
    }


    .menu-principal a {
        padding: 9px 9px;
        font-size: 0.88rem;
    }


    .menu-principal a i {
        display: none;
    }


    /* -----------------------------------------------------
       RESERVA
       ----------------------------------------------------- */

    .reserva-layout {
        grid-template-columns:
            minmax(0, 1.4fr)
            minmax(280px, 0.8fr);

        gap: 25px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer-contenido {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   TABLETS
   Hasta 900px
   ========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------------------
       BARRA SUPERIOR
       ----------------------------------------------------- */

    .barra-superior-contenido {
        padding: 7px 0;

        flex-direction: column;

        justify-content: center;

        gap: 6px;
    }


    .informacion-superior {
        justify-content: center;

        text-align: center;

        gap: 10px 18px;
    }


    .redes-superiores {
        display: none;
    }


    /* -----------------------------------------------------
       ENCABEZADO
       ----------------------------------------------------- */

    .encabezado-contenido {
        min-height: 70px;
    }


    .menu-btn {
        display: flex;

        align-items: center;
        justify-content: center;
    }


    .menu-principal {
        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background: var(--blanco);

        border-top: 1px solid var(--gris-borde);

        box-shadow:
            0 8px 15px rgba(0, 0, 0, 0.10);

        display: none;

        flex-direction: column;

        align-items: stretch;

        padding: 10px;
    }


    .menu-principal.menu-abierto {
        display: flex;
    }


    .menu-principal a {
        width: 100%;

        padding: 13px 15px;

        border-radius: 7px;

        justify-content: flex-start;

        font-size: 0.95rem;
    }


    .menu-principal a i {
        display: inline-block;

        width: 20px;

        text-align: center;
    }


    /* -----------------------------------------------------
       ACCESIBILIDAD
       ----------------------------------------------------- */

    .accesibilidad-contenido {
        justify-content: center;

        flex-wrap: wrap;

        padding: 8px 0;
    }


    .titulo-accesibilidad {
        width: 100%;

        justify-content: center;

        margin-right: 0;

        margin-bottom: 3px;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero-pagina {
        min-height: 280px;
    }


    .hero-pagina .contenedor {
        padding: 55px 0;
    }


    /* -----------------------------------------------------
       RESERVAS
       ----------------------------------------------------- */

    .reserva-layout {
        grid-template-columns: 1fr;
    }


    .resumen-lateral {
        position: static;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        align-items: start;
    }


    /* -----------------------------------------------------
       TARJETAS CONTACTO
       ----------------------------------------------------- */

    .tarjetas-contacto {
        grid-template-columns:
            1fr 1fr;
    }


    .tarjeta-contacto:last-child {
        grid-column: 1 / -1;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer-contenido {
        grid-template-columns:
            1fr 1fr;

        gap: 30px;
    }

}


/* =========================================================
   CELULARES GRANDES
   Hasta 700px
   ========================================================= */

@media (max-width: 700px) {

    /* -----------------------------------------------------
       GENERAL
       ----------------------------------------------------- */

    html {
        font-size: 15px;
    }


    .contenedor {
        width: 92%;
    }


    /* -----------------------------------------------------
       BARRA SUPERIOR
       ----------------------------------------------------- */

    .informacion-superior {
        flex-direction: column;

        gap: 3px;

        font-size: 0.78rem;
    }


    /* -----------------------------------------------------
       LOGO
       ----------------------------------------------------- */

    .logo {
        font-size: 1.15rem;
    }


    .logo-icono {
        width: 38px;
        height: 38px;
    }


    /* -----------------------------------------------------
       ACCESIBILIDAD
       ----------------------------------------------------- */

    .barra-accesibilidad {
        padding: 4px 0;
    }


    .accesibilidad-contenido {
        gap: 5px;
    }


    .titulo-accesibilidad {
        font-size: 0.82rem;
    }


    .accesibilidad-contenido button {
        min-width: 38px;

        padding: 5px 7px;

        font-size: 0.8rem;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero-pagina {
        min-height: 250px;
    }


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


    .hero-pagina p {
        font-size: 0.95rem;
    }


    /* -----------------------------------------------------
       SECCIONES
       ----------------------------------------------------- */

    .seccion-reservas,
    .informacion-reserva {
        padding: 55px 0;
    }


    .titulo-seccion {
        margin-bottom: 30px;
    }


    .titulo-seccion h2 {
        font-size: 1.8rem;
    }


    /* -----------------------------------------------------
       FORMULARIO
       ----------------------------------------------------- */

    .reserva-formulario {
        padding: 23px 18px;
    }


    .fila-formulario {
        grid-template-columns: 1fr;

        gap: 0;

        margin-bottom: 0;
    }


    .grupo-formulario {
        margin-bottom: 18px;
    }


    .formulario-titulo {
        margin-top: 20px;
    }


    /* -----------------------------------------------------
       RESUMEN
       ----------------------------------------------------- */

    .resumen-lateral {
        display: flex;

        flex-direction: column;
    }


    .resumen-item {
        flex-wrap: wrap;
    }


    .resumen-item strong {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       PAGO
       ----------------------------------------------------- */

    .tarjeta-pago {
        padding: 35px 20px;
    }


    /* -----------------------------------------------------
       CONTACTO
       ----------------------------------------------------- */

    .tarjetas-contacto {
        grid-template-columns: 1fr;
    }


    .tarjeta-contacto:last-child {
        grid-column: auto;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer-contenido {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .footer-columna {
        display: flex;

        flex-direction: column;

        align-items: center;
    }


    .footer-columna > a:not(.footer-logo):hover {
        padding-left: 0;
    }


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


    /* -----------------------------------------------------
       BOTONES FLOTANTES
       ----------------------------------------------------- */

    .whatsapp-flotante {
        width: 52px;
        height: 52px;

        right: 16px;
        bottom: 16px;

        font-size: 1.6rem;
    }


    .volver-arriba {
        width: 42px;
        height: 42px;

        right: 20px;
        bottom: 78px;
    }

}


/* =========================================================
   CELULARES PEQUEÑOS
   Hasta 480px
   ========================================================= */

@media (max-width: 480px) {

    /* -----------------------------------------------------
       BARRA SUPERIOR
       ----------------------------------------------------- */

    .barra-superior {
        min-height: auto;
    }


    .barra-superior-contenido {
        padding: 8px 0;
    }


    .informacion-superior span {
        font-size: 0.75rem;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .encabezado-contenido {
        min-height: 64px;
    }


    .logo-texto {
        font-size: 1rem;
    }


    .logo-icono {
        width: 35px;
        height: 35px;

        font-size: 1rem;
    }


    .menu-btn {
        width: 38px;
        height: 38px;
    }


    /* -----------------------------------------------------
       ACCESIBILIDAD
       ----------------------------------------------------- */

    .accesibilidad-contenido {
        padding: 7px 0;
    }


    .titulo-accesibilidad {
        margin-bottom: 5px;
    }


    .accesibilidad-contenido button {
        min-width: 34px;

        min-height: 32px;

        padding: 4px 6px;

        font-size: 0.75rem;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero-pagina {
        min-height: 220px;
    }


    .hero-pagina .contenedor {
        padding: 40px 0;
    }


    .hero-pagina h1 {
        font-size: 1.75rem;
    }


    .hero-pagina p {
        font-size: 0.9rem;
    }


    /* -----------------------------------------------------
       FORMULARIO
       ----------------------------------------------------- */

    .reserva-formulario {
        padding: 20px 14px;
    }


    .formulario-titulo {
        gap: 10px;
    }


    .numero-paso {
        width: 34px;
        height: 34px;

        font-size: 0.9rem;
    }


    .formulario-titulo h3 {
        font-size: 1rem;
    }


    .formulario-titulo p {
        font-size: 0.78rem;
    }


    .campo-icono input,
    .campo-icono select {
        min-height: 46px;

        font-size: 0.9rem;
    }


    textarea {
        font-size: 0.9rem;
    }


    .btn-principal,
    .btn-pago {
        min-height: 50px;

        font-size: 0.9rem;
    }


    /* -----------------------------------------------------
       RESUMEN
       ----------------------------------------------------- */

    .resumen-cabecera {
        padding: 18px;
    }


    .resumen-detalle {
        padding: 15px;
    }


    .resumen-total {
        padding: 17px;

        flex-direction: column;

        align-items: flex-start;
    }


    .resumen-total strong {
        font-size: 1.15rem;
    }


    /* -----------------------------------------------------
       AYUDA
       ----------------------------------------------------- */

    .tarjeta-ayuda {
        padding: 22px 18px;
    }


    /* -----------------------------------------------------
       INFORMACIÓN
       ----------------------------------------------------- */

    .tarjeta-contacto {
        padding: 25px 18px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer {
        padding-top: 40px;
    }


    .footer-contenido {
        padding-bottom: 30px;
    }


    /* -----------------------------------------------------
       WHATSAPP
       ----------------------------------------------------- */

    .whatsapp-flotante {
        width: 50px;
        height: 50px;

        right: 13px;
        bottom: 13px;

        font-size: 1.5rem;
    }


    .volver-arriba {
        right: 16px;
        bottom: 72px;

        width: 40px;
        height: 40px;
    }

}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
   Hasta 360px
   ========================================================= */

@media (max-width: 360px) {

    html {
        font-size: 14px;
    }


    .contenedor {
        width: 94%;
    }


    .logo-texto {
        font-size: 0.9rem;
    }


    .logo-icono {
        width: 32px;
        height: 32px;
    }


    .accesibilidad-contenido button {
        min-width: 31px;

        padding: 4px;
    }


    .hero-pagina h1 {
        font-size: 1.55rem;
    }


    .hero-pagina p {
        font-size: 0.85rem;
    }


    .reserva-formulario {
        padding: 17px 11px;
    }


    .formulario-titulo {
        align-items: flex-start;
    }


    .resumen-total {
        align-items: stretch;
    }


    .resumen-total strong {
        font-size: 1.05rem;
    }

}


/* =========================================================
   ORIENTACIÓN HORIZONTAL EN CELULARES
   ========================================================= */

@media (max-height: 500px) and (orientation: landscape) {

    .hero-pagina {
        min-height: 200px;
    }


    .hero-pagina .contenedor {
        padding: 35px 0;
    }


    .menu-principal {
        max-height: 75vh;

        overflow-y: auto;
    }

}
@media (max-width: 768px) {

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

    .norma {
        padding: 22px;
    }

    .norma h3 {
        font-size: 18px;
    }

    .aviso-contenido {
        flex-direction: column;
    }

}

/* =========================================================
   ACCESIBILIDAD:
   REDUCIR MOVIMIENTO
   ========================================================= */

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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }

}


/* =========================================================
   FIN RESPONSIVE.CSS
   ========================================================= */