/* ==========================================================================
   HEADER RESPONSIVE: TABLET Y MÓVIL
   ========================================================================== */

@media (max-width: 1100px) {

    /*
    |--------------------------------------------------------------------------
    | Header
    |--------------------------------------------------------------------------
    */

    .pa-header,
    .pa-header__container {
        min-height: 78px;
    }

    .pa-header {
        z-index: 1000;
    }


    .pa-header__container {
        position: relative;
        width: min(calc(100% - 32px), 1440px);
        z-index: 2;

        margin-inline: auto;

        gap: var(--pa-space-4, 1rem);
    }

    .pa-header__brand {
        position: relative;
        z-index: 1210;
    }

    .pa-header__logo {
        width: auto;
        max-width: 180px;
        height: 50px;
    }


    /*
    |--------------------------------------------------------------------------
    | Botón hamburguesa
    |--------------------------------------------------------------------------
    */

    .pa-header__toggle {
        position: relative;
        z-index: 1300;

        display: flex;
        flex-shrink: 0;

        color: var(--pa-color-heading);
        background: #ffffff;

        border:
            1px solid
            rgba(15, 52, 58, 0.14);

        box-shadow:
            0 8px 24px
            rgba(15, 52, 58, 0.12);
    }

     .pa-header__toggle[aria-expanded="true"] {
        position: fixed;
        top: 18px;
        right: 18px;

        color: var(--pa-color-heading);
        background: #ffffff;
    }

    .pa-header__toggle[aria-expanded="true"]
    .pa-header__toggle-line {
        background: currentColor;
    }


    /*
    |--------------------------------------------------------------------------
    | Bloqueo del scroll
    |--------------------------------------------------------------------------
    */

    body.pa-menu-open {
        overflow: hidden;
    }


    /*
    |--------------------------------------------------------------------------
    | Fondo oscuro detrás del menú
    |--------------------------------------------------------------------------
    */

 /*
    |--------------------------------------------------------------------------
    | Fondo oscuro: queda detrás del header y del panel
    |--------------------------------------------------------------------------
    */

    body.pa-menu-open::before {
        position: fixed;
        inset: 0;
        z-index: 900;

        content: "";

        background: rgba(5, 30, 34, 0.58);

        opacity: 1;
        visibility: visible;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }



    /*
    |--------------------------------------------------------------------------
    | Panel lateral
    |--------------------------------------------------------------------------
    */

    .pa-navigation {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;

        z-index: 1200;

        width: min(88vw, 400px);
        height: 100dvh;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        gap: var(--pa-space-5, 1.25rem);

        padding:
            96px
            24px
            32px;

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        color: var(--pa-color-heading);
        background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--pa-color-primary) 92%,
                black 8%
            ) 0%,
            color-mix(
                in srgb,
                var(--pa-color-primary-dark) 94%,
                black 6%
            ) 100%
        );

        border-left:
            1px solid
            rgba(215, 228, 226, 0.9);

        box-shadow:
            -24px 0 60px
            rgba(16, 42, 48, 0.18);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateX(105%);

        transition:
            transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.25s ease,
            visibility 0.25s ease;
    }


     .pa-navigation.is-open,
    .pa-navigation.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateX(0);
    }


    /*
    |--------------------------------------------------------------------------
    | Listado de navegación
    |--------------------------------------------------------------------------
    */

    .pa-navigation__list {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 6px;

        margin: 0;
        padding: 0;

        list-style: none;
    }

    .pa-navigation__item {
        width: 100%;
    }

    .pa-navigation__link,
    .pa-header--overlay:not(.is-sticky)
    .pa-navigation__link {
        width: 100%;
        min-height: 52px;

        display: flex;
        align-items: center;

        padding: 0 16px;

        color: var(--pa-color-heading);
        background: transparent;

        border-radius: var(--pa-radius-md, 14px);

        font-size: 1rem;
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none;

        transition:
            color 0.25s ease,
            background-color 0.25s ease,
            transform 0.25s ease;
    }

    .pa-navigation__link::after {
        display: none;
    }

    .pa-navigation__link,
    .pa-header--overlay:not(.is-sticky)
    .pa-navigation__link {
        color: rgba(255, 255, 255, 0.92);
    }

    .pa-navigation__link:hover,
    .pa-navigation__link:focus-visible,
    .pa-navigation__link.is-active,
    .pa-navigation__link[aria-current="page"],
    .pa-header--overlay:not(.is-sticky)
    .pa-navigation__link:hover,
    .pa-header--overlay:not(.is-sticky)
    .pa-navigation__link.is-active,
    .pa-header--overlay:not(.is-sticky)
    .pa-navigation__link[aria-current="page"] {
        color: var(--pa-color-accent);

        background:
            color-mix(
                in srgb,
                var(--pa-color-accent) 14%,
                transparent
            );

        transform: translateX(2px);
    }


    /*
    |--------------------------------------------------------------------------
    | CTA del menú
    |--------------------------------------------------------------------------
    */

    .pa-header__cta,
    .pa-header--overlay:not(.is-sticky)
    .pa-header__cta {
        width: 100%;
        min-height: 50px;

        margin-top: 8px;
        padding-inline: 18px;

        color: var(--pa-color-white);
        background: var(--pa-color-primary);

        border-color: var(--pa-color-primary);
        border-radius: var(--pa-radius-pill, 999px);

        box-shadow:
            0 14px 30px
            rgba(13, 111, 117, 0.2);
    }

    .pa-header__cta:hover,
    .pa-header--overlay:not(.is-sticky)
    .pa-header__cta:hover {
        color: var(--pa-color-white);
        background: var(--pa-color-primary-dark);
        border-color: var(--pa-color-primary-dark);

        box-shadow:
            0 18px 36px
            rgba(13, 111, 117, 0.26);
    }


    /*
    |--------------------------------------------------------------------------
    | Otros componentes
    |--------------------------------------------------------------------------
    */

    .pa-hero__container {
        grid-template-columns: 1fr 0.82fr;
        gap: 48px;
    }

    .pa-hero__floating-card {
        right: -10px;
    }

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

@media (max-width: 820px) {
    .pa-container {
        width: min(
            calc(100% - 32px),
            var(--pa-container)
        );
    }

    .pa-hero {
        min-height: auto;
    }

    .pa-hero__container {
        grid-template-columns: 1fr;
        padding-top: 70px;
        padding-bottom: 90px;
    }

    .pa-hero__content {
        max-width: 720px;
    }

    .pa-hero__media {
        width: min(100%, 620px);
        margin-inline: auto;
    }

    .pa-hero__image-wrapper {
        aspect-ratio: 1 / 1.05;
    }

    .pa-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================================
   MÓVILES
   ========================================================================== */

@media (max-width: 600px) {

    .pa-header,
    .pa-header__container {
        min-height: 72px;
    }

    .pa-header__container {
        width: calc(100% - 24px);
    }

    .pa-header__logo {
        max-width: 155px;
        height: 44px;
    }

    .pa-header__toggle {
        width: 44px;
        height: 44px;
    }

    /*
     * En móviles pequeños el panel ocupa todo el ancho.
     */

    .pa-navigation {
        top: 0;
        right: -1px;
        bottom: -1px;
        left: 0;

        width: calc(100% + 1px);
        max-width: none;
        min-height: calc(100dvh + 1px);

        padding:
            88px
            18px
            28px;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    .pa-navigation__list {
        gap: 4px;
    }

    .pa-navigation__link {
        min-height: 50px;
        padding-inline: 14px;

        font-size: 0.98rem;
    }

    .pa-header__cta {
        min-height: 50px;
        margin-top: 10px;
    }

    .pa-hero__container {
        padding-top: 56px;
        padding-bottom: 74px;
    }

    .pa-hero__title {
        font-size:
            clamp(2.4rem, 12vw, 3.7rem);
    }

    .pa-hero__description {
        font-size: 1rem;
    }

    .pa-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .pa-hero__actions .pa-button {
        width: 100%;
    }

    .pa-hero__features {
        align-items: flex-start;
        flex-direction: column;
    }

    .pa-hero__image-wrapper {
        border-radius:
            var(--pa-radius-lg)
            var(--pa-radius-lg)
            70px
            var(--pa-radius-lg);
    }

    .pa-hero__floating-card {
        position: relative;
        right: auto;
        bottom: auto;

        max-width: none;

        margin-top: -24px;
        margin-inline: 16px;
    }

    .pa-footer__grid {
        grid-template-columns: 1fr;
    }

    .pa-footer__legal {
        flex-direction: column;
        gap: var(--pa-space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}