/* ==========================================================================
   ESCALA MOBILE DA LP  (primeiro arquivo do $page_css — vale para a página toda)

   Os design tokens de variables.css são clamp() calibrados para o DESKTOP
   encolhendo: seus pisos ficam em ~80% do valor máximo e são atingidos bem
   antes do mobile (a 375px, 0.9vw = 3,4px, então todo clamp cai no piso).
   Na prática isso entregava corpo de texto a 10,4px e legendas a 9,6px no
   celular — muito abaixo do mockup e do mínimo legível.

   Redefinimos os tokens no escopo .lp-page para corrigir a LP inteira sem
   tocar no site institucional, que já está aprovado em produção.
   Os valores abaixo foram calibrados contra os mockups mobile do Figma
   (medindo caracteres por linha, que independe da escala do print).
   ========================================================================== */

@media (max-width: 900px) {
    .lp-page {
        /* Corpo de texto */
        --fs-body: 14px;
        --fs-body-md: 14px;
        --fs-body-lg: 15px;
        --fs-body-sm: 13px;
        --fs-body-small: 12px;
        --fs-label: 16px;
        --fs-card-title: 17px;
        --fs-caption: 12.5px;
        --fs-caption-sm: 11px;

        /* Títulos */
        --fs-display: 30px;
        --fs-hero-title: 30px;
        --fs-section-xl: 28px;
        --fs-section-lg: 26px;
        --fs-cta-title: 22px;
        --fs-heading-2xl: 26px;
        --fs-heading-xl: 24px;
        --fs-heading-lg: 22px;
        --fs-heading-md: 19px;
        --fs-heading-sm: 17px;
        --fs-step: 18px;
        --fs-step-number: 18px;

        /* CTA — a família --cta-* mora em variables.css e tem os mesmos pisos
           baixos: sem isto o rótulo do botão de conversão renderiza a 12,8px,
           MENOR que o corpo de texto (14px) que ele deveria comandar. */
        --cta-font: 15px;
        --cta-icon: 20px;

        /* Medidas — 44px é o alvo mínimo de toque (WCAG 2.5.5) */
        --btn-size: 44px;
        --gap-content: 12px;
        --gap-card: 20px;
        --line-width: 48px;
    }
}

.lp-header {
    position: absolute;
    top: clamp(44px, 2.81vw, 54px);
    left: 0;
    right: 0;
    z-index: 100;
}

.lp-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(35.84px, 2.576vw, 49.28px);
    padding-top: var(--gap-content);
    padding-bottom: var(--gap-content);
}

/* ===== Logo ===== */
.lp-nav__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.lp-nav__logo img {
    width: var(--nav-logo-w);
    height: var(--nav-logo-h);
    object-fit: contain;
    display: block;
}

/* ===== Pill central ===== */
.lp-nav__menu {
    display: flex;
    align-items: center;
    gap: clamp(6.72px, 0.4704vw, 8.96px);
    list-style: none;
    margin: 0;
    padding: clamp(4.48px, 0.3472vw, 6.72px);
    background: var(--nav-pill-bg);
    border: var(--nav-pill-border);
    backdrop-filter: var(--nav-pill-blur);
    -webkit-backdrop-filter: var(--nav-pill-blur);
    border-radius: 100px;
}

.lp-nav__item {
    display: flex;
    align-items: center;
}

.lp-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(14.1px, 0.84vw, 16.1px);
    line-height: 1.19;
    letter-spacing: -0.01em;
    color: var(--color-white);
    padding: clamp(4.48px, 0.3472vw, 6.72px) clamp(11.2px, 0.7056vw, 13.44px);
    border-radius: 100px;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.lp-nav__link:hover {
    opacity: 0.8;
}

.lp-nav__link--active {
    background: var(--color-white);
    color: var(--color-dark);
    font-weight: 500;
}

.lp-nav__link--active:hover {
    opacity: 1;
}

.lp-nav__dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== CTA "Fale conosco" — pill clara translúcida ===== */
.lp-nav__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 0.42vw, 8px);
    padding: clamp(8.96px, 0.6944vw, 13.44px) clamp(14px, 1vw, 20px);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: var(--nav-pill-blur);
    -webkit-backdrop-filter: var(--nav-pill-blur);
    border-radius: 100px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(14.1px, 0.84vw, 16.1px);
    line-height: 1.19;
    letter-spacing: -0.01em;
    color: var(--color-dark);
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.lp-nav__cta:hover {
    background: var(--color-white);
    color: var(--color-dark);
}

.lp-nav__cta-icon {
    width: clamp(15px, 0.94vw, 18px);
    height: clamp(15px, 0.94vw, 18px);
    flex-shrink: 0;
}

.lp-nav__cta:focus-visible,
.lp-nav__link:focus-visible,
.lp-nav__toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* ===== Hambúrguer (mesma pill translúcida do institucional) ===== */
.lp-nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 12px;
    z-index: 110;
    background: var(--nav-pill-bg);
    border: var(--nav-pill-border);
    border-radius: 100px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    cursor: pointer;
    overflow: visible;
}

.lp-nav__toggle-bar {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 1px;
    flex-shrink: 0;
    background: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-base), width var(--transition-base);
}

.lp-nav__toggle-bar:nth-child(3) {
    width: 75%;
    align-self: flex-end;
}

.lp-nav__toggle[aria-expanded="true"] .lp-nav__toggle-bar:nth-child(1) {
    transform: translateY(5.6px) rotate(45deg);
}

.lp-nav__toggle[aria-expanded="true"] .lp-nav__toggle-bar:nth-child(2) {
    opacity: 0;
}

.lp-nav__toggle[aria-expanded="true"] .lp-nav__toggle-bar:nth-child(3) {
    width: 100%;
    align-self: stretch;
    transform: translateY(-5.6px) rotate(-45deg);
}

/* ===== Desktop estreito (901–1100px): versão compacta, igual ao institucional ===== */
@media (min-width: 901px) and (max-width: 1100px) {
    .lp-nav {
        gap: 22.4px;
    }

    .lp-nav__logo img {
        width: 129.92px;
        height: 49.28px;
    }

    .lp-nav__menu {
        gap: 4.48px;
        padding: 4.48px;
    }

    .lp-nav__link {
        font-size: 10.08px;
        padding: 4.48px 8.96px;
    }

    .lp-nav__cta {
        font-size: 10.08px;
        padding: 8.96px 14px;
    }
}

/* ===== Mobile (≤900px) — drawer escuro, mesmo padrão do menu institucional ===== */
@media (max-width: 900px) {
    /* Top bar do mockup mobile: linha única centrada, texto maior que o
       institucional. lp-header.css só carrega na LP — não vaza para o site. */
    .top-bar__inner,
    .top-bar__inner * {
        font-size: clamp(10.5px, 3.2vw, 12px);
    }

    /* Logo maior no mobile (mockup: ~35% da largura da viewport) */
    .lp-nav__logo img {
        width: clamp(126px, 35.5vw, 155px);
        height: auto;
    }

    .lp-nav__toggle {
        display: flex;
        order: 3;
        /* Mockup: barras brancas soltas — sem pill, sem borda, sem blur */
        background: none;
        border: none;
        border-radius: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        width: 40px;
        height: 40px;
        padding: 8px 6px;
        gap: 6px;
    }

    .lp-nav__toggle-bar {
        height: 2px;
        border: none;
        border-radius: 2px;
    }

    /* Mockup: 3 barras de largura igual */
    .lp-nav__toggle-bar:nth-child(3) {
        width: 100%;
        align-self: stretch;
    }

    /* X do estado aberto recalibrado para o novo passo (2px barra + 6px gap) */
    .lp-nav__toggle[aria-expanded="true"] .lp-nav__toggle-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .lp-nav__toggle[aria-expanded="true"] .lp-nav__toggle-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Mockup mobile: só logo + hambúrguer no header (sem CTA) */
    .lp-nav__cta {
        display: none;
    }

    .lp-nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(393px, 100vw);
        height: 100vh;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 88px 20px 24px;
        background: var(--color-dark);
        border: none;
        border-radius: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: right var(--transition-base);
        z-index: 105;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .lp-nav__menu::-webkit-scrollbar {
        display: none;
    }

    .lp-nav__menu--open {
        right: 0;
    }

    .lp-nav__item {
        display: block;
    }

    .lp-nav__link {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
        min-height: 51px;
        padding: 16px 20px;
        background: rgba(255, 255, 255, 0.08);
        color: var(--color-white);
        border-radius: 120px;
        font-size: 16px;
        line-height: 1;
    }

    .lp-nav__link:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.14);
    }

    .lp-nav__link--active,
    .lp-nav__link--active:hover {
        background: var(--color-white);
        color: var(--color-dark);
        font-weight: 500;
    }

    .lp-nav__link--active .lp-nav__dot {
        width: 8px;
        height: 8px;
    }
}