/*
 * Menu movil compacto.
 * El diseño de escritorio permanece intacto.
 */

.pfi-header {
    position: relative;
    z-index: 100;
}

.pfi-header-inner {
    position: relative;
}

.pfi-mobile-menu {
    display: none;
}


/* TABLET Y CELULAR */

@media (max-width: 920px) {

    .pfi-header .pfi-header-inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;

        gap: 12px;
        min-height: 75px;
        padding-top: 11px;
        padding-bottom: 11px;
    }

    .pfi-header .pfi-navigation {
        display: none !important;
    }

    .pfi-header .pfi-brand {
        display: flex;
        align-items: center;
        gap: 10px;

        min-width: 0;
        max-width: calc(100% - 60px);
    }

    .pfi-header .pfi-logo-oficial {
        display: block;

        width: 82px;
        max-width: 82px;
        height: auto;
        max-height: 60px;

        flex: 0 0 auto;
        object-fit: contain;
    }

    .pfi-header .pfi-logo-oficial[hidden] {
        display: none;
    }

    .pfi-header .pfi-brand-name {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .pfi-header .pfi-brand-name strong {
        font-size: clamp(14px, 3.7vw, 19px);
        font-weight: 600;
        line-height: 1.22;
        letter-spacing: -.02em;
    }

    .pfi-header .pfi-brand-name small {
        font-size: 11px;
        line-height: 1.4;
    }


    /* BOTON HAMBURGUESA */

    .pfi-mobile-menu {
        display: block;
        flex: 0 0 auto;
    }

    .pfi-mobile-trigger {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 46px;
        height: 46px;

        padding: 0;

        border: 1px solid #d7e2d9;
        border-radius: 4px;

        background: #fff;
        cursor: pointer;

        list-style: none;
    }

    .pfi-mobile-trigger::-webkit-details-marker {
        display: none;
    }

    .pfi-mobile-trigger::marker {
        content: '';
    }

    .pfi-mobile-trigger:focus-visible {
        outline: 3px solid #71987b;
        outline-offset: 3px;
    }

    .pfi-mobile-bars {
        display: flex;
        flex-direction: column;
        justify-content: center;

        gap: 5px;
        width: 21px;
    }

    .pfi-mobile-bars > span {
        display: block;

        width: 21px;
        height: 2px;

        border-radius: 2px;
        background: #274b36;

        transition:
            transform .2s ease,
            opacity .2s ease;
    }

    .pfi-mobile-menu[open]
    .pfi-mobile-bars > span:first-child {
        transform: translateY(7px) rotate(45deg);
    }

    .pfi-mobile-menu[open]
    .pfi-mobile-bars > span:nth-child(2) {
        opacity: 0;
    }

    .pfi-mobile-menu[open]
    .pfi-mobile-bars > span:last-child {
        transform: translateY(-7px) rotate(-45deg);
    }


    /* MENU DESPLEGABLE */

    .pfi-mobile-menu:not([open])
    .pfi-mobile-links {
        display: none;
    }

    .pfi-mobile-menu[open]
    .pfi-mobile-links {
        position: absolute;

        top: calc(100% + 3px);
        right: 0;

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

        width: min(
            320px,
            calc(100vw - 40px)
        );

        padding: 12px;

        border: 1px solid #e0e8e1;
        border-radius: 5px;
        background: #fff;

        box-shadow:
            0 17px 34px rgba(17, 38, 26, .16);

        z-index: 200;
    }

    .pfi-mobile-links a {
        display: block;
        padding: 13px 12px;

        border-radius: 3px;

        color: #294436;

        font: 500 14px/1.5
            'Montserrat',
            Arial,
            sans-serif;

        text-decoration: none;
    }

    .pfi-mobile-links a:hover,
    .pfi-mobile-links a[aria-current="page"] {
        background: #f0f5ef;
    }

    .pfi-mobile-links .pfi-mobile-contact {
        margin-top: 8px;
        padding: 14px;

        background: #28543b;
        color: #fff;

        font-weight: 600;
        text-align: center;
    }

    .pfi-mobile-links
    .pfi-mobile-contact:hover {
        background: #1d402d;
        color: #fff;
    }

    .pfi-mobile-links .pfi-mobile-phone {
        text-align: center;
        color: #41614c;
        font-size: 12px;
    }

}


/* CELULARES PEQUEÑOS */

@media (max-width: 390px) {

    .pfi-header .pfi-brand {
        gap: 8px;
    }

    .pfi-header .pfi-logo-oficial {
        width: 72px;
        max-width: 72px;
    }

    .pfi-header .pfi-brand-name strong {
        font-size: 14px;
    }

    .pfi-header .pfi-brand-name small {
        font-size: 10px;
    }

}