/* ======================================================
   BILLY PAGÁN · SITIO OFICIAL
   responsive.css
   RESPONSIVE · MÓVIL · TABLET · ESCRITORIO
====================================================== */


/* ======================================================
   01 · MÓVIL · VERTICAL
   Hasta 767px · Portrait
====================================================== */

@media (max-width: 767px) and (orientation: portrait) {


    /* --------------------------------------------------
       PORTADA
    -------------------------------------------------- */

    .pagina-inicio {

        height: 100svh;
        min-height: 100svh;

        overflow: hidden;

    }


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

    .pagina-inicio .hero {

        height: 100svh;
        min-height: 100svh;

        background-image:
            url("../images/fondos/movil/fondo-general-movil.jpg");

        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: scroll;

    }


    /* --------------------------------------------------
       IMAGEN DE BILLY
       MÓVIL VERTICAL · MÁS GRANDE
       Y PEGADA A LOS MÁRGENES IZQUIERDO E INFERIOR
    -------------------------------------------------- */

    .pagina-inicio .imagen-billy-portada {

        height: 48svh;

        width: auto;

        top: auto;

        bottom: 0;

        left: 0;

        transform:
            scale(1.015);

        transform-origin: left bottom;

    }


    /* --------------------------------------------------
       MENÚ
    -------------------------------------------------- */

    .pagina-inicio .menu {

        display: none;

    }


    /* --------------------------------------------------
       HAMBURGUESA
    -------------------------------------------------- */

    .pagina-inicio .hamburguesa {

        display: flex;

    }


    /* --------------------------------------------------
       MENÚ MÓVIL
    -------------------------------------------------- */

    .pagina-inicio .menu-movil {

        position: fixed;

        top: 0;
        left: 0;

        z-index: 40;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 1.8rem;

        width: 100%;
        height: 100svh;

        padding: 5rem 2rem;

        background:
            rgba(245, 245, 245, 0.94);

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;

    }


    .pagina-inicio .menu-movil.abierto {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }


    /* --------------------------------------------------
       CONTENIDO
    -------------------------------------------------- */

    .pagina-inicio .contenido {

        top: 46%;

        width: 92%;

    }


    .pagina-inicio .contenido h1 {

        font-size:
            clamp(3.4rem, 15vw, 5.5rem);

        line-height: 0.9;

    }


    .pagina-inicio .subtitulo {

        margin-top: 1rem;

        font-size: 0.6rem;

        letter-spacing: 0.32em;

    }


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

    .pagina-inicio .footer {

        padding:
            0 0.75rem 1rem;

        font-size: 0.48rem;

        letter-spacing: 0.045em;

    }


    .pagina-inicio .footer-contenido {

        flex-direction: column;

        gap: 0.2rem;

        white-space: normal;

    }


    .pagina-inicio .footer-copy,
    .pagina-inicio .footer-terminos {

        display: block;

        width: 100%;

        margin: 0;

        text-align: center;

        white-space: nowrap;

    }

}


/* ======================================================
   02 · MÓVIL · HORIZONTAL
   Hasta 767px · Landscape
====================================================== */

@media (max-width: 767px) and (orientation: landscape) {


    /* --------------------------------------------------
       PORTADA
    -------------------------------------------------- */

    .pagina-inicio {

        background:
            url("../images/fondos/movil/fondo-general-movil.jpg")
            center center
            / cover
            no-repeat;

        height: 100svh;
        min-height: 100svh;

        overflow: hidden;

    }


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

    .pagina-inicio .hero {

        height: 100svh;
        min-height: 100svh;

        background-image:
            url("../images/fondos/movil/fondo-general-movil.jpg");

        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: scroll;

    }


    /* --------------------------------------------------
       IMAGEN DE BILLY
       MÓVIL HORIZONTAL · MISMO DISEÑO QUE ESCRITORIO
       AJUSTADA A LOS BORDES INFERIOR E IZQUIERDO
    -------------------------------------------------- */

    .pagina-inicio .imagen-billy-portada {

        top: auto;

        bottom: 0;

        left: 0;

        height: 100svh;

        width: auto;

        transform: none;

        transform-origin: left bottom;

        animation: none;

    }


    /* --------------------------------------------------
       MENÚ
       MÓVIL HORIZONTAL · AJUSTADO AL ANCHO DISPONIBLE
       Tamaño de fuente y espaciado fluidos (clamp) para
       que los 8 enlaces quepan en cualquier ancho de
       pantalla en horizontal, incluso en los teléfonos
       más pequeños; el ajuste con flex-wrap actúa como
       red de seguridad si aun así no cupieran en una
       sola línea.
    -------------------------------------------------- */

    .pagina-inicio .menu ul {

        flex-wrap: wrap;

        row-gap: 0.4rem;

        gap: clamp(0.4rem, 2vw, 1rem);

        padding: 0.6rem 0.5rem;

    }


    .pagina-inicio .menu a {

        font-size: clamp(0.42rem, 1.7vw, 0.55rem);

        letter-spacing: 0.05em;

    }


    /* --------------------------------------------------
       HAMBURGUESA, CONTENIDO Y FOOTER
       MÓVIL HORIZONTAL · MISMO DISEÑO QUE ESCRITORIO
       No se sobrescriben aquí: se heredan las reglas
       base (hamburguesa.css, styles.css, footer.css),
       idénticas a la versión de escritorio.
    -------------------------------------------------- */

}


/* ======================================================
   03 · TABLET
   768px — 1199px
====================================================== */

@media (min-width: 768px) and (max-width: 1199px) {


    /* --------------------------------------------------
       PORTADA
    -------------------------------------------------- */

    .pagina-inicio {

        height: 100vh;

        min-height: 100vh;

        overflow: hidden;

    }


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

    .pagina-inicio .hero {

        height: 100vh;

        min-height: 100vh;

    }


    /* --------------------------------------------------
       IMAGEN DE BILLY
       POSICIÓN PROVISIONAL · CENTRADA
    -------------------------------------------------- */

    .pagina-inicio .imagen-billy-portada {

        height: 95vh;

        width: auto;

        top: 52%;

        left: 50%;

        transform:
            translate(-50%, -50%);

    }


    /* --------------------------------------------------
       MENÚ
    -------------------------------------------------- */

    .pagina-inicio .menu ul {

        gap: 1.5rem;

        padding: 1.75rem 1rem;

    }


    .pagina-inicio .menu a {

        font-size: 0.65rem;

        letter-spacing: 0.15em;

    }


    /* --------------------------------------------------
       HAMBURGUESA
    -------------------------------------------------- */

    .pagina-inicio .hamburguesa {

        display: none;

    }


    /* --------------------------------------------------
       MENÚ MÓVIL
    -------------------------------------------------- */

    .pagina-inicio .menu-movil {

        display: none;

    }


    /* --------------------------------------------------
       CONTENIDO
    -------------------------------------------------- */

    .pagina-inicio .contenido {

        width: 90%;

    }


    .pagina-inicio .contenido h1 {

        font-size:
            clamp(4rem, 10vw, 7rem);

    }


    .pagina-inicio .subtitulo {

        font-size: 0.7rem;

        letter-spacing: 0.38em;

    }

}


/* ======================================================
   04 · ESCRITORIO
   Desde 1200px

   IMPORTANTE:
   La posición de Billy NO se controla aquí.
   Se controla exclusivamente desde styles.css.
====================================================== */

@media (min-width: 1200px) {


    /* --------------------------------------------------
       MENÚ
    -------------------------------------------------- */

    .pagina-inicio .menu {

        display: block;

    }


    .pagina-inicio .menu ul {

        gap: 2.5rem;

        padding: 2rem;

    }


    .pagina-inicio .menu a {

        font-size: 0.72rem;

    }


    /* --------------------------------------------------
       HAMBURGUESA / MENÚ MÓVIL
    -------------------------------------------------- */

    .pagina-inicio .hamburguesa,
    .pagina-inicio .menu-movil {

        display: none;

    }


    /* --------------------------------------------------
       CONTENIDO
    -------------------------------------------------- */

    .pagina-inicio .contenido h1 {

        font-size:
            clamp(4rem, 9vw, 8rem);

    }

}


/* ======================================================
   05 · PANTALLAS MUY GRANDES
   Desde 1600px
====================================================== */

@media (min-width: 1600px) {


    .pagina-inicio .menu ul {

        gap: 3rem;

    }


    .pagina-inicio .contenido h1 {

        font-size: 8rem;

    }

}


/* ======================================================
   06 · ACCESIBILIDAD
====================================================== */

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

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}


/* ======================================================
   FIN · responsive.css
====================================================== */