/* ============================================================
   LP — Copastur
   Fonte: Poppins (carregada via core.php / wp_head)
   ============================================================ */

/* -------------------------
   VARIÁVEIS
   ------------------------- */
:root {
    --color-navy:       #1c2555;
    --color-blue:       #39b3e7;
    --color-white:      #ffffff;
    --color-text:       #1c2555;
    --color-text-muted: #4a5578;
    --color-bg-light:   #eef4fa;
    --color-border:     #dce6f0;

    --radius:     8px;
    --radius-lg:  16px;
    --shadow-sm:  0 2px 8px rgba(28, 37, 85, 0.08);
    --shadow-md:  0 8px 32px rgba(28, 37, 85, 0.14);
    --shadow-lg:  0 16px 48px rgba(28, 37, 85, 0.18);

    --max-width:  1200px;
    --gap:        24px;

    --transition: 0.25s ease;

    --color-blue-dark:  #2fa2d4;
    --color-navy-dark:  #0f1733;
    --color-error:      #e05c5c;
    --color-star:       #f5a623;
    --color-esg-bg:     #0a2814;
}

/* -------------------------
   RESET
   ------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: var(--color-text);
    background: var(--color-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul { list-style: none; }

a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--transition);
}

a:hover { opacity: 0.8; }

/* -------------------------
   RESET DEFENSIVO — vence o CSS que o WordPress injeta via wp_head()
   O style.css da LP é impresso ANTES do wp_head(), então temas/plugins
   (ex.: reset.css) sobrescrevem qualquer seletor de MESMA especificidade.
   Os seletores abaixo usam tipos compostos (html body h2 = 0,0,3): ganham
   de `h2` (0,0,1) e continuam perdendo de QUALQUER regra com classe (0,1,0),
   então não atropelam nada do nosso próprio CSS. NÃO REMOVER.
   ------------------------- */
html body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: var(--color-text);
    background-color: var(--color-white);
    line-height: 1.6;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-navy);
    margin: 0;
}

/* Destaque por PESO, não por cor — IDENTIDADE §1.7. O azul da marca
   como texto em fundo claro dá 2,39:1 e reprova. Quem quer o destaque
   colorido usa .lp-realce (caixa), não cor de fonte. */
html body h2 strong,
html body h3 strong {
    color: var(--color-navy);
    font-weight: 800;
}

html body p { margin: 0; }

html body ul,
html body ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

html body a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

html body a:hover,
html body a:focus,
html body a:active {
    color: inherit;
    text-decoration: none;
}

html body img {
    max-width: 100%;
    height: auto;
    display: block;
}

html body button {
    font-family: 'Poppins', sans-serif;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    text-transform: none;
}

html body button:hover,
html body button:focus {
    background: none;
    color: inherit;
    text-decoration: none;
}

html body input,
html body select,
html body textarea { font-family: 'Poppins', sans-serif; }

/* Indicador de foco: navy. O azul da marca contra branco dá 2,39:1 e
   não alcança nem o piso de 3:1 de componente de interface. */
:focus-visible {
    outline: 2px solid var(--color-navy);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------
   FUNDO PADRÃO — cor + pattern-biosfera-quadrado.png repetido em baixa opacidade
   Único sistema de fundo permitido. Aplicar a classe .lp-pattern na seção.
   ------------------------- */
.lp-pattern { position: relative; overflow: hidden; }

.lp-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../bg-imgs/pattern-biosfera-quadrado.png');
    background-repeat: repeat;
    /* ESCALA ÚNICA DE SEÇÃO — 400px, igual em toda largura de tela.
       NUNCA reduzir o tile no mobile: tile menor não "encaixa melhor", ele
       multiplica o número de bolhas na tela e a seção fica sobrecarregada.
       Mantendo 400px, o mobile mostra ~1 repetição (respiro) e o desktop ~3.
       A escala se ajusta pela ÁREA DO ELEMENTO (card pequeno), nunca pela
       largura do viewport. Ver base-lp.md §3.5.3. */
    background-size: 400px auto;
    opacity: 0.02;
    z-index: 0;
    pointer-events: none;
}

/* Degrau 2 — o conteúdo. Entre ele e o pattern cabe o degrau 1, que é
   onde entra o elemento da biosfera (`.lp-biosfera`). Ver o bloco de
   ORDEM DE PINTURA junto de `.lp-biosfera`. */
.lp-pattern > * {
    position: relative;
    z-index: 2;
}

/* -------------------------
   CONTAINER
   ------------------------- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* -------------------------
   TIPOGRAFIA
   ------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-navy);
}

/* font-size dos headings TAMBEM entra blindado (html body hN = 0,0,3).
   Motivo real, medido: `hello-elementor/assets/css/reset.css` declara
   h1{2.5rem} h2{2rem} h3{1.75rem} h4{1.5rem} com especificidade 0,0,1 —
   igual a um `h1` pelado. Como o style.css da LP e impresso ANTES de
   wp_head(), o reset vencia por ordem e a escala tipografica inteira era
   substituida (h1/h2 menores que o projetado, h3/h4 maiores). O bloco de
   defesa acima ja protegia peso, familia, cor e margem; o tamanho ficava
   de fora e era o unico que vazava. Ver base-lp.md §4.3. */
html body h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
html body h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
html body h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
html body h4 { font-size: 1rem; }

h2 strong, h3 strong {
    color: var(--color-navy);   /* §1.7 — peso, não cor */
    font-weight: 800;
}

/* -------------------------
   SECTION HELPERS
   ------------------------- */
.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

/* Pílula de seção: NAVY CHAPADA com texto branco (14,53:1).
   Até set/2026 era texto azul sobre véu de rgba(57,179,231,.1). Dois
   defeitos no mesmo lugar: o azul não carrega texto em fundo claro, e o
   véu a 10% CLAREIA o fundo — qualquer tom escolhido cai mais ainda.
   Chapada, o fundo é conhecido e a medição é estável. */
.section-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-white);
    background: var(--color-navy);
    padding: 5px 15px;
    border-radius: 100px;
    margin-bottom: 16px;
}

.section-tag--light {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.15);
}

.section-title {
    margin-bottom: 16px;
}

.section-title--light,
.section-title--light strong {
    color: var(--color-white);
}

.section-subtitle,
.section-desc {
    font-size: 1rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* O `100%` aqui existe para o parágrafo PREENCHER uma coluna mais estreita
   que 600px — não para soltar a medida. Sozinho ele solta: medido, o fecho
   da LP tripcare deu 100 caracteres por linha e o da cmorefuture deu 84,
   contra o teto de 80 da G-21.
   `min(100%, 40em)` mantém as duas intenções: enche a coluna estreita, e
   para de crescer no ponto em que a leitura começa a sofrer (§4.13). */
.section-desc--light {
    color: rgba(255, 255, 255, 0.85);
    max-width: min(100%, 40em);
}

.section-cta {
    text-align: center;
    margin-top: 48px;
}

/* -------------------------
   BOTÕES
   ------------------------- */
.btn {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 32px;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition),
                box-shadow var(--transition);
    text-align: center;
    white-space: nowrap;
}

.btn:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Fundo branco/neutro.
   Fundo NAVY, não azul: branco sobre #39b3e7 dá os mesmos 2,39:1 do azul
   como texto — o problema é o par, não o papel. Navy + branco = 14,53:1. */
.cta-primary {
    background: var(--color-navy);
    color: var(--color-white);
    border-color: var(--color-navy);
}
.cta-primary:hover {
    background: var(--color-navy-dark);
    border-color: var(--color-navy-dark);
    color: var(--color-white);
}

.cta-secondary {
    background: transparent;
    color: var(--color-navy);
    border-color: var(--color-navy);
}
.cta-secondary:hover {
    background: rgba(28, 37, 85, 0.06);
    color: var(--color-navy);
}

/* Fundo azul-claro (hero com Background-claro.png) */
.cta-dark {
    background: var(--color-navy);
    color: var(--color-white);
    border-color: var(--color-navy);
}
.cta-dark:hover {
    background: var(--color-navy-dark);
    border-color: var(--color-navy-dark);
    color: var(--color-white);
}

.cta-outline-dark {
    background: transparent;
    color: var(--color-navy);
    border-color: var(--color-navy);
}
.cta-outline-dark:hover {
    background: rgba(28, 37, 85, 0.08);
    color: var(--color-navy);
}

/* Fundo escuro (navy, ESG overlay) */
.cta-white {
    background: var(--color-white);
    color: var(--color-navy);
    border-color: var(--color-white);
}
.cta-white:hover {
    background: var(--color-bg-light);
    border-color: var(--color-bg-light);
    color: var(--color-navy);
}

/* ============================================================
   HEADER
   ============================================================ */
.lp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition), box-shadow var(--transition);
}

.lp-header.scrolled {
    box-shadow: var(--shadow-md);
}

.lp-header.dark-header {
    background: rgba(28, 37, 85, 0.97);
    border-bottom-color: rgba(255,255,255,0.1);
}

.lp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 24px;
}

.lp-logo-link { flex-shrink: 0; }

.lp-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.lp-logo--light { display: none; }

.lp-header.dark-header .lp-logo--dark { display: none; }
.lp-header.dark-header .lp-logo--light { display: block; }

.lp-nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.lp-nav-links li a:not(.btn) {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-navy);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color var(--transition);
}

.lp-header.dark-header .lp-nav-links li a:not(.btn) {
    color: rgba(255,255,255,0.9);
}

/* Hover do menu: sublinha navy, não cor azul. O item já é navy, então a
   mudança visível é a linha — e aqui sublinha é permitida, porque marca
   um link, não decora um título (IDENTIDADE §1.7). */
.lp-nav-links li a:not(.btn):hover {
    color: var(--color-navy);
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.nav-cta { padding: 10px 24px; font-size: 0.8rem; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-navy);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

.lp-header.dark-header .nav-toggle span { background: var(--color-white); }

.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
    display: none;
    padding: 16px 0 24px;
    border-top: 1px solid var(--color-border);
}

.nav-mobile.open { display: block; }

.nav-mobile ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp-header .nav-mobile ul li a:not(.btn) {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-navy);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    padding: 8px 0;
}

.lp-header .nav-mobile ul li a.btn { margin-top: 8px; width: 100%; text-align: center; }

/* ============================================================
   HERO
   Fundo CLARO (branco -> bg-light) + pattern.
   O componente inteiro (título, subtítulo, trust items, botões) foi
   desenhado para fundo claro com texto navy: 13:1 de contraste.
   NÃO inverter para fundo de cor com texto claro — o branco sobre o
   azul da marca dá 2,26:1 e reprova em AA. Ver base-lp.md §3.5.4.
   ============================================================ */
.hero {
    position: relative;
    padding: 112px 0 76px;
    background-color: var(--color-white);
    background-image: linear-gradient(168deg, var(--color-white) 0%, var(--color-bg-light) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero.lp-pattern::before {
    /* sem background-size: herda a escala única de seção (400px) */
    opacity: 0.02; /* padrao fixo — ver 3.5.3 */
}

.hero-elemento {
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 520px;
    max-width: 40%;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.hero-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-white);
    background: var(--color-navy);
    padding: 4px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.hero-title {
    color: var(--color-navy);
    margin-bottom: 24px;
}

/* ------------------------------------------------------------
   DESTAQUE EM TÍTULO — .lp-realce (highlight NEGATIVO)
   IDENTIDADE-VISUAL.md §1.7

   NENHUM HEADING LEVA SUBLINHA. Nem text-decoration, nem barra em
   ::after, nem background-size: 100% 4px. Até set/2026 este componente
   era "navy + sublinha azul"; a sublinha saiu por decisão de marca.

   O destaque em fundo claro é uma de duas coisas, e as duas medem:
     peso   -> navy 800 sobre branco = 14,53:1   (é o padrão de h2/h3 strong)
     caixa  -> fundo #39b3e7 + texto navy = 6,07:1  (é esta classe)

   NÃO pintar a palavra de azul: #39b3e7 como TEXTO sobre fundo claro dá
   2,39:1 e reprova. Nesta marca o azul é cor de ÁREA, não de texto.

   box-decoration-break: clone é OBRIGATÓRIO. Sem ele, um destaque que
   quebra em duas linhas ganha UMA caixa que atravessa o vão entre as
   linhas. É a mesma armadilha que derrubou o ::after absoluto da
   sublinha antiga (jul/2026): ela sobreviveu à troca do desenho.

   padding VERTICAL fica em zero: padding-top num inline empurra a linha
   de cima e abre um degrau no título. O respiro é só horizontal. */
.lp-realce,
.hero-highlight {
    color: var(--color-navy);
    background-color: var(--color-blue);
    padding: 0 0.18em;
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Em fundo escuro a caixa inverte: branca com texto navy (14,53:1).
   O azul como caixa sobre navy daria 6,07:1 de caixa contra fundo, mas o
   texto navy dentro da caixa azul só tem 6,07:1 — passa; a caixa branca
   é mais legível e mais limpa sobre escuro. */
.lp-realce--on-dark {
    background-color: var(--color-white);
    color: var(--color-navy);
}

.hero-subtitle {
    font-size: 1.05rem;
    color: var(--color-text-muted); /* 6,6:1 sobre bg-light */
    margin-bottom: 32px;
    max-width: 520px;
}

.hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.trust-item {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-navy);
}

/* Form card */
.hero-form-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.hero-form-header {
    background: var(--color-navy);
    padding: 24px 32px;
}

.hero-form-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.hero-form-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    text-transform: none;
    font-weight: 400;
}

.form-box {
    padding: 28px 32px;
}

/* CF7 form styles */
.form-box .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-box p {
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ------------------------------------------------------------
   VÃO MORTO DO CF7 — <p> que não desenha nada, mas ocupa lugar

   O CF7 embala em <p> coisas sem altura: o <script> do `on_sent_ok`, o
   `campo_oculto` de atribuição e, às vezes, um <p> só com espaço em
   branco. Todos herdam o `margin: 0 0 14px` do `.form-box p`, e o que
   está no nível do <form> ainda soma o `gap: 14px` do flex. No pé
   acontece o mesmo com o `.wpcf7-spinner`: ele é `visibility: hidden`,
   não `display: none`, então ocupa 24px + 4px de gap embaixo do botão o
   tempo todo, mesmo sem envio em curso.

   Medido na `tripcare` (set/2026): 70px entre a base do cabeçalho do
   card e o primeiro campo, e 70px entre o botão e a microcópia. Só 28px
   de cada lado eram o `padding` do `.form-box` — os outros 42px acima e
   42px abaixo eram caixa fantasma.

   Isto NÃO é ajuste de respiro, é remoção de caixa que não deveria
   existir. O `padding` do `.form-box` continua inteiro: quem separa o
   formulário das bordas do card é ele, não o resto do CF7.

   `display: none` no <p> NÃO tira o campo do envio — só `disabled` faz
   isso. A atribuição do lead (§9.7) continua chegando ao CRM.
   ------------------------------------------------------------ */

/* <p> que embala só um <script>. Tem de sumir INTEIRO: como é item de
   flex do <form>, zerar a margem ainda deixaria os 14px de `gap`. */
.form-box .wpcf7-form > p:has(> script:only-child) { display: none; }

/* <p> que embala só um campo escondido (`campo_oculto`, `[hidden ...]`) */
.form-box .wpcf7-form p:has(> .wpcf7-form-control-wrap:only-child > input.read),
.form-box .wpcf7-form p:has(> .wpcf7-form-control-wrap:only-child > input[type="hidden"]) {
    display: none;
}

/* <p> sem nenhum filho-elemento (só espaço em branco). Aqui zera a
   margem em vez de esconder: se o template um dia puser texto solto num
   <p>, ele continua aparecendo. */
.form-box .wpcf7-form p:not(:has(*)) { margin-bottom: 0; }

/* o spinner só ocupa lugar enquanto o CF7 está enviando */
.form-box .wpcf7-spinner { display: none; }
.form-box .wpcf7-form.submitting .wpcf7-spinner { display: block; }

/* o último <p> de cada nível não precisa de margem: quem separa do pé
   do card é o `padding-bottom` do `.form-box` */
.form-box .wpcf7-form p:last-of-type { margin-bottom: 0; }

.form-box label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-navy);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-box input[type="text"],
.form-box input[type="email"],
.form-box input[type="tel"],
.form-box input[type="number"],
.form-box input[type="url"],
.form-box textarea,
.form-box select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    color: var(--color-navy);
    background: #f7fafd;
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.form-box input:focus,
.form-box textarea:focus,
.form-box select:focus {
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgba(28, 37, 85, 0.12);
    background: var(--color-white);
}

.form-box input.wpcf7-not-valid,
.form-box textarea.wpcf7-not-valid,
.form-box select.wpcf7-not-valid {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(224, 92, 92, 0.12);
}

.form-box textarea { resize: vertical; min-height: 100px; }

.form-box select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231c2555' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}

/* Checkbox e aceite */
.form-box .aceite,
.form-box input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    accent-color: var(--color-navy);
    flex-shrink: 0;
}

.form-box label:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: flex-start;
    font-size: 0.78rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    cursor: pointer;
}

/* Link dentro de texto corrido: navy + sublinha. A sublinha AQUI é
   semântica ("isto é clicável"), não decoração de título — a proibição
   da §1.7 é de sublinha em heading. */
.form-box label:has(input[type="checkbox"]) a {
    color: var(--color-navy);
    font-weight: 600;
    text-decoration: underline;
}

/* Submit */
.form-box input[type="submit"],
.form-box .wpcf7-submit {
    width: 100%;
    padding: 14px 24px;
    background: var(--color-navy);   /* branco sobre #39b3e7 = 2,39:1 */
    color: var(--color-white);
    border: none;
    border-radius: var(--radius);
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    margin-top: 4px;
}

.form-box input[type="submit"]:hover,
.form-box .wpcf7-submit:hover {
    background: var(--color-blue-dark);
    transform: translateY(-1px);
}

.form-box input[type="submit"]:disabled,
.form-box .wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Feedback CF7 */
.form-box .wpcf7-response-output {
    font-size: 0.8rem;
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-top: 8px;
    border: 1px solid transparent;
}

.form-box .wpcf7-mail-sent-ok {
    background: #e8f5e9;
    border-color: #4caf50;
    color: #2e7d32;
}

.form-box .wpcf7-mail-sent-ng,
.form-box .wpcf7-aborted {
    background: #fdecea;
    border-color: var(--color-error);
    color: #c62828;
}

.form-box .wpcf7-spam-blocked,
.form-box .wpcf7-validation-errors {
    background: #fff8e1;
    border-color: #f9a825;
    color: #6d4c00;
}

.form-box .wpcf7-not-valid-tip {
    font-size: 0.72rem;
    color: var(--color-error);
    margin-top: 4px;
}

/* hcaptcha */
.form-box .h-captcha { margin: 4px 0; }

/* Aceites: espaço extra acima para separar dos campos de input */
.form-box .wpcf7-acceptance { margin-top: 8px; }

/* ============================================================
   STATS BAR
   Fundo: #1c2555 (navy) — texto branco
   ============================================================ */
.stats-section {
    background: var(--color-navy);
    padding: 48px 0;
}

.stats-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 40px;
}

.stat-number {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--color-blue);
    line-height: 1;
    margin-bottom: 6px;
}

.stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.stat-divider {
    width: 1px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

/* ============================================================
   SOLUÇÕES
   Fundo: #eef4fa (cinza-claro) — texto navy
   ============================================================ */
.solucoes-section {
    padding: 96px 0;
    background: var(--color-bg-light);
}

.solucoes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Card branco em seção #eef4fa: 1,11:1 de diferença de fundo — o tom
   sozinho não o desenha. Quem o desenha é a sombra + o chip de cor do
   ícone (.lp-icon-chip). Ver a regra em .diferencial-card (G-14). */
.solucao-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.solucao-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------
   CHIP DE ÍCONE — .lp-icon-chip
   IDENTIDADE-VISUAL.md §1.7 (o azul é cor de ÁREA) + §3.6

   RESOLVE TRÊS COISAS AO MESMO TEMPO:

   1. O ícone volta a ter cor. O glifo azul sobre card claro dava 2,39:1;
      aqui o azul é o FUNDO do chip e o glifo é navy — 6,07:1.
   2. O card ganha ancoradouro de cor. Card branco dentro de seção
      #eef4fa tem 1,11:1 de diferença de fundo: sem o chip, o card não
      se lê como objeto. Ver a regra em .diferencial-card.
   3. CONTRATO EXPLÍCITO DE FILHO — e é isto que faltava.
      O antigo .solucao-icon era uma caixa 52x52 desenhada para um <svg>
      (que esticava com width/height 100%). Recebendo um <i> de
      FontAwesome, o glifo herdava font-size do corpo (16px) e ficava
      perdido no canto de uma caixa de 52px: 36px de vazio ao lado, mais
      o gap de 20px do .lp-card-h = o texto começava 72px adentro.
      Era o "espaçamento esquisito" reportado em set/2026.
      O chip usa `place-items: center` e declara `font-size` PRÓPRIO,
      então funciona com <i> E com <svg>. */
.lp-icon-chip,
.solucao-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--color-blue);
    color: var(--color-navy);
    font-size: 24px;     /* o <i> não herda o corpo; o chip manda */
    line-height: 1;
    margin-bottom: 20px;
}

/* <svg> preenche o chip com respiro; <i> já está centrado pelo grid */
.lp-icon-chip svg,
.solucao-icon svg { width: 26px; height: 26px; }

/* Em fundo escuro o chip inverte: o azul continua sendo a área, mas o
   contorno precisa existir contra o navy. Chip branco, glifo navy. */
.lp-icon-chip--on-dark {
    background: var(--color-white);
    color: var(--color-navy);
}

.solucao-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.solucao-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}

/* ============================================================
   DIFERENCIAIS
   Fundo: #ffffff (branco) — texto navy
   ============================================================ */
.diferenciais-section {
    position: relative;
    padding: 96px 0;
    background: var(--color-white);
    overflow: hidden;
}

/* O pattern vem SÓ do componente .lp-pattern e da escada de tom
   (--on-light 0.02 · --on-color 0.02 · --on-dark 0.05). Esta declaração
   existia por fora do componente e pintava 0,05 num fundo BRANCO — o
   dobro do que a IDENTIDADE §3.5.3 permite em fundo claro. Quando a
   seção também levava `.lp-pattern--on-light`, o modificador (0,2,1)
   vencia por especificidade e o defeito ficava escondido; sem ele,
   aparecia. Fica só a escada de camadas. */
.diferenciais-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.diferenciais-section > .container { position: relative; z-index: 1; }

.diferenciais-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.diferenciais-content .section-tag { margin-bottom: 16px; }
.diferenciais-content .section-title { margin-bottom: 20px; }

.diferenciais-content .section-desc {
    max-width: 100%;
    margin: 0 0 32px;
}

.diferenciais-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ------------------------------------------------------------
   REGRA: CARD E SEÇÃO NUNCA COMPARTILHAM TOM
   _core/regras-gerais.md G-14

   Até set/2026 este card era `background: var(--color-bg-light)` chapado.
   Reaproveitado numa seção .solucoes-section (que TAMBÉM é #eef4fa), o
   resultado medido foi 1,00:1 — o card era literalmente da cor do fundo,
   e só a barra de 4px aparecia. Quatro cards invisíveis passaram por 36
   verificações e 653 trechos de contraste sem uma reprovação, porque a
   chapa mede TEXTO contra fundo e não CARD contra seção.

   O card agora é branco com sombra e barra navy: ele lê tanto em seção
   branca (pela sombra e pela barra) quanto em seção #eef4fa (pelo tom).

   SOMBRA SOZINHA NÃO CONTA. Card em seção do mesmo tom precisa de um
   ancoradouro: chip de cor (.lp-icon-chip), barra >= 4px, ou fundo
   invertido. */
.diferencial-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px 24px 24px 22px;
    background: var(--color-white);
    border-radius: var(--radius);
    border-left: 4px solid var(--color-navy);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.diferencial-card:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }

.diferencial-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-navy);   /* §1.7 — peso, não cor */
    line-height: 1;
    flex-shrink: 0;
    min-width: 36px;
}

.diferencial-text h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.diferencial-text p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ============================================================
   TECNOLOGIA / SUPERAPP C+
   Fundo: #1c2555 (navy escuro) — texto branco
   ============================================================ */
.app-section {
    position: relative;
    padding: 96px 0;
    background: var(--color-navy);
    overflow: hidden;
}

.app-elemento {
    position: absolute;
    right: -80px;
    bottom: -40px;
    width: 480px;
    max-width: 40%;
    opacity: 0.08;
    pointer-events: none;
}

.app-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.app-content .section-tag { margin-bottom: 16px; }
.app-content .section-title { margin-bottom: 20px; }
.app-content .section-desc { margin: 0 0 32px; }

.app-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
}

.app-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.app-feature-check {
    color: var(--color-blue);
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Mockups de smartphone */
.app-screens {
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-mockups {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 480px;
}

/* CONTRATO: .mockup funciona como INVÓLUCRO (<div class="mockup"><img></div>)
   e aplicado DIRETO no <img>. Antes só a primeira forma funcionava: o
   `object-fit: cover` vivia só em `.mockup img`, então um <img class="mockup">
   não casava com o seletor e a tela de 1179x2556 era ESTICADA 25% para
   caber na caixa de 220x380. O object-fit vai no próprio seletor. */
.mockup {
    position: absolute;
    border-radius: 24px;
    overflow: hidden;
    object-fit: cover;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.mockup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* SEM OPACIDADE. Até set/2026 este mockup tinha `opacity: 0.75` e o navy
   da seção atravessava a tela do app — a "imagem de fundo aparecendo na
   imagem". Print de produto é CONTEÚDO: ele não é translúcido nunca.
   A profundidade vem de escala, rotação e sombra. */
.mockup--back {
    width: 206px;
    height: 356px;
    top: 52px;
    right: 0;
    transform: rotate(4deg);
    z-index: 1;
}

.mockup--front {
    width: 220px;
    height: 380px;
    top: 0;
    left: 0;
    z-index: 2;
    transform: rotate(-2deg);
}

/* ============================================================
   FAIXA DE COR CHAPADA — .lp-faixa
   IDENTIDADE-VISUAL.md §3.5.6 · _core/regras-gerais.md G-14

   O QUE RESOLVE. O sistema de fundo dá quatro tons (branco, #eef4fa,
   navy, verde ESG). Usados sozinhos, produzem página monótona: a LP de
   set/2026 saiu com 7 das 10 dobras em branco ou quase-branco e o
   pattern da marca em TODAS as 10. Esta é a quinta cor — o azul da
   marca chapado — e o instrumento de ritmo.

   REGRA ESTREITA, e ela não é negociável:

     cor      #39b3e7 CHAPADO. Nunca o gradiente #39b3e7 -> #2fa2d4: no
              gradiente o navy cai de 6,4:1 para 4,95:1 na ponta escura
              e fica pastoso (§3.5.4). Chapado fica 6,07:1 inteiro.
     texto    TUDO navy, inclusive o secundário. Branco dá 2,39:1 e
              --color-text-muted dá 3,07:1 — os dois REPROVAM aqui.
     destaque por PESO (navy 800). A caixa .lp-realce não entra: azul
              sobre azul não existe.
     altura   1 a 3 linhas de conteúdo. NÃO é uma dobra de 96px de
              padding — sobre tom intermediário, área grande com texto
              corrido volta a ser o caso que a §3.5.4 proíbe.
     pattern  --on-color (0.02) e nunca acima: em cor média as duas
              metades do tile marcam juntas e volta o "azulejo".
   ============================================================ */
.lp-faixa {
    position: relative;
    background: var(--color-blue);
    padding: 40px 0;
    overflow: hidden;
}

/* Todo texto da faixa é navy — inclusive o que herdaria `muted` */
.lp-faixa,
.lp-faixa .section-title,
.lp-faixa .section-title strong,
.lp-faixa .section-desc,
.lp-faixa p,
.lp-faixa h2,
.lp-faixa h3 {
    color: var(--color-navy);
}

/* A pílula sobre a faixa: navy chapada continua sendo a certa (6,07:1 de
   pílula contra fundo, 14,53:1 de texto dentro dela) */
.lp-faixa .section-tag {
    color: var(--color-white);
    background: var(--color-navy);
}

/* Botões da faixa: os mesmos do fundo claro de cor média (§1.4) */
.lp-faixa .btn.cta-primary { background: var(--color-navy); border-color: var(--color-navy); }
.lp-faixa .btn.cta-secondary { color: var(--color-navy); border-color: var(--color-navy); }

/* Guarda-corpo: se alguém puser `muted` aqui, ele vira navy em vez de
   reprovar silenciosamente a 3,07:1 */
.lp-faixa .section-desc--muted,
.lp-faixa .text-muted { color: var(--color-navy); }

/* Frase única da faixa — o formato para que ela existe: uma linha de fecho.
   `<strong>` aqui NÃO leva a caixa de realce: azul sobre azul não existe
   (IDENTIDADE §1.7). O destaque é peso. */
.lp-faixa-frase {
    text-align: center;
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
    font-weight: 600;
    color: var(--color-navy);
    max-width: 900px;
    margin: 0 auto;
}
.lp-faixa-frase strong { font-weight: 800; color: var(--color-navy); }

/* ============================================================
   ESG / SUSTENTABILIDADE
   Fundo: #0a2814 (cor sólida) + pattern pelo componente
   Texto: #ffffff | Botão: .cta-white
   ============================================================
   Duas coisas saíram daqui em set/2026:

   1. `background-image: url(background-verde.png)` — arquivo APOSENTADO.
      A IDENTIDADE §3.5 é dura: o único fundo de seção é cor + pattern.

   2. `::before` com `rgba(10,40,20,0.65)`. Ele existia como VÉU sobre a
      foto; sem a foto, era um véu sobre a própria cor. E era pior que
      redundante: `.esg-section::before` e `.lp-pattern::before` são o
      MESMO pseudo-elemento, com a mesma especificidade (0,1,1) — este
      vem depois no arquivo, então `background:` sobrescrevia o
      `background-image` do pattern e a seção ESG ficava LISA. Toda LP
      que quisesse pattern aqui tinha de desfazer isso na extensão.
      Sem o véu, a escada de camadas da §3.6.2 funciona sozinha. */
.esg-section {
    position: relative;
    padding: 96px 0;
    background-color: var(--color-esg-bg);
    overflow: hidden;
}

.esg-section .container { position: relative; z-index: 2; }

.esg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.esg-content .section-tag { margin-bottom: 16px; }
.esg-content .section-title { margin-bottom: 20px; }
.esg-content .section-desc { margin: 0 0 32px; }

.esg-stats {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.esg-stat {
    padding: 24px;
    border-left: 4px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.esg-stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-white);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.esg-stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}

/* ============================================================
   DEPOIMENTOS
   Fundo: #ffffff — texto navy
   ============================================================ */
.depoimentos-section {
    padding: 96px 0;
    background: var(--color-white);
}

.depoimentos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Branco com sombra, não `bg-light` chapado. Numa dobra `.lp-tom--claro` (que
   TAMBÉM é #eef4fa) o card ficava com 1,00:1 contra a seção e simplesmente não
   se lia — o mesmo defeito do `.diferencial-card` (G-14). A estrela amarela do
   `.depoimento-stars` é o ancoradouro de cor deste card. */
.depoimento-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.depoimento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.depoimento-stars {
    color: var(--color-star);
    font-size: 1rem;
    letter-spacing: 2px;
}

.depoimento-texto {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    flex: 1;
    font-style: italic;
    border: none;
    padding: 0;
    margin: 0;
}

.depoimento-autor {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-blue), var(--color-navy));
    flex-shrink: 0;
}

.autor-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.autor-info strong {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-navy);
    text-transform: uppercase;
}

.autor-info span {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ============================================================
   FORM DE FECHAMENTO
   Fundo: Background-branco.png (neutro/branco)
   Texto: #1c2555 | Botão dentro do card: .cta-primary
   ============================================================ */
.form-section {
    position: relative;
    padding: 96px 0;
    background-color: #ffffff;
    overflow: hidden;
}

/* idem .diferenciais-section::before — o pattern vem do componente */
.form-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.form-elemento {
    position: absolute;
    left: -60px;
    bottom: -20px;
    width: 400px;
    opacity: 0.1;
    pointer-events: none;
}

.form-section .container { position: relative; z-index: 1; }

.form-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.form-section-content {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.form-section-content .section-tag { margin-bottom: 16px; }
.form-section-content .section-title { margin-bottom: 20px; }
/* min(), não 100% — mesma razão do .section-desc--light acima. */
.form-section-content .section-desc { max-width: min(100%, 40em); margin: 0 0 28px; }

.form-benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto 36px;
    text-align: left;
}

.form-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--color-navy);
    font-weight: 500;
}

.form-benefits li span {
    color: var(--color-navy);
    font-weight: 700;
    flex-shrink: 0;
}

/* ============================================================
   FOOTER
   Fundo: #1c2555 (navy) — texto branco
   Logo: copastur-light.png
   ============================================================ */
.lp-footer-wrap {
    background: var(--color-navy);
}

.lp-footer-main {
    padding: 64px 0 48px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
}

.footer-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
    margin-bottom: 20px;
}

/* O .lp-bcorp acima é `display: block` com `line-height: 0` (para o <a>
   não herdar o leading do rodapé). O efeito colateral: sem margin-top
   aqui, a tagline encostava na borda do selo. Foi o rodapé "colado e mal
   diagramado" de set/2026.
   E `max-width: 280px` quebrava a frase em 3 linhas com a última órfã;
   320px resolve na mesma coluna. */
.footer-tagline {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    max-width: 320px;
    margin-top: 20px;
}

.footer-heading {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-footer-wrap .footer-links ul li a {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    transition: color var(--transition);
}

.lp-footer-wrap .footer-links ul li a:hover {
    color: var(--color-blue);
    opacity: 1;
}

.footer-contact .footer-tagline { margin-bottom: 20px; }

.footer-cta { padding: 10px 24px; font-size: 0.8rem; }

/* ------------------------------------------------------------
   REDES SOCIAIS DO RODAPÉ — .lp-footer-social
   MARCA.md §7 (URLs canônicas) · _midia/landing-page.md §4.9

   Obrigatório em toda peça que tem rodapé. A LP de set/2026 saiu sem
   ele: o bloco de redes estava documentado apenas para a página de
   agradecimento, e o rodapé da LP nunca o exigiu.

   Alvo de 40x40 (piso de área de toque). Ícone a 65% de branco sobre
   navy = 8,4:1; no hover vai a branco. `gap` de 10px para os alvos não
   se tocarem. */
.lp-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.lp-footer-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.65);
    font-size: 16px;
    line-height: 1;
    transition: background var(--transition), color var(--transition);
}

.lp-footer-social a:hover,
.lp-footer-social a:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-white);
    opacity: 1;
}

/* Glassdoor não existe no Font Awesome Free — entra como SVG inline.
   O <svg> herda a cor pelo currentColor, igual aos glifos. */
.lp-footer-social a svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.lp-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
}

.lp-footer-bottom p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

/* ============================================================
   ACORDEÃO / FAQ
   Estado via classe COM NAMESPACE (.lp-faq-item--open) — nunca `.open`,
   `.active` ou outra classe genérica: plugins do WP usam esses nomes e
   pintam o componente com a cor de destaque deles.
   ============================================================ */
.lp-faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* A sombra entrou em set/2026: numa dobra branca o item era branco com 1px de
   `#dce6f0` (1,26:1 de borda contra o card) e a lista lia como texto solto, não
   como acordeão. A borda esquerda de 3px em navy é o ancoradouro (G-14). */
.lp-faq-item {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-navy);
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.lp-faq-item--open {
    border-color: var(--color-navy);   /* borda de estado: piso de 3:1 */
    box-shadow: var(--shadow-sm);
}

.lp-faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-navy);
    transition: color var(--transition);
}

.lp-faq-item .lp-faq-trigger:hover,
.lp-faq-item .lp-faq-trigger:focus-visible { color: var(--color-navy); text-decoration: underline; text-underline-offset: 4px; }

.lp-faq-trigger i {
    color: var(--color-navy);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: transform var(--transition);
}

.lp-faq-item--open .lp-faq-trigger i { transform: rotate(180deg); }

.lp-faq-panel { display: none; }

.lp-faq-item--open .lp-faq-panel { display: block; }

/* MEDIDA DA LINHA — _midia/landing-page.md §4.13 (G-21)
   A resposta é leitura corrida e não declarava largura: herdava os 820px da
   `.lp-faq-list` menos as margens e dava 97 caracteres por linha, o pior
   número medido na casa. O teto da G-21 é 80.
   O limite é em `em` e não em px porque o equivalente em pixel muda com o
   corpo — e são 40em, não 42: os 42 vieram de uma conta com largura MÉDIA de
   caractere, e medido caractere a caractere 42em devolve 81 e 41em ainda
   devolve 81. Cada peça que corrigiu isso à mão repetiu a mesma linha; ela
   nasce aqui para a próxima não precisar. */
.lp-faq-panel p {
    margin: 0 24px 22px;
    max-width: 40em;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    font-size: 0.925rem;
    line-height: 1.8;
    color: var(--color-text-muted);
}

/* ============================================================
   ANIMAÇÕES ON-SCROLL
   ============================================================ */
.fade-in {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }

/* ============================================================
   ESCALA DE TEXTO POR RESOLUÇÃO (29/10/2026)
   Desktop >1366 · LAPTOP ≤1366 · tablet ≤1024 · celular ≤640.
   Os números são os do site (site.md 3FX; guideline §4.0b): o laptop
   1366 × 768 é a tela de referência de quem avalia, e a LP saía com
   tamanho de monitor grande. Método: `_midia/landing-page.md` §4.14.

   texto corrido   18 / 15 / 15 / 15 px      destaque   21 / 18 / 18 / 17 px
   título ≥ 20 px  nasce com valor de laptop (x0,85); respiro vertical
   ≥ 80 px do laptop é x0,75. O que o laptop muda e o tablet NÃO herda
   é refixado no bloco do tablet, logo abaixo (guideline §4.0b).
   Tamanho solto digitado em classe nova é o que mistura 15, 16, 17 e
   18 px na mesma tela: use var(--fs-corpo) e var(--fs-destaque).
   ============================================================ */
:root {
    --fs-corpo:     1.125rem;     /* 18 px */
    --fs-destaque:  1.3125rem;    /* 21 px */
}

body { font-size: var(--fs-corpo); }
.section-subtitle, .section-desc { font-size: var(--fs-corpo); }
.hero-subtitle { font-size: var(--fs-destaque); }

@media (max-width: 1366px) {
    :root {
        --fs-corpo:     0.9375rem;    /* 15 px */
        --fs-destaque:  1.125rem;     /* 18 px */
    }

    html body h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); }      /* 52 → 44 px */
    html body h2 { font-size: clamp(1.6rem, 2.6vw, 2.125rem); }   /* 40 → 34 px */
    html body h3 { font-size: clamp(1.1rem, 1.7vw, 1.2rem); }     /* 22 → 19 px */
    .stat-number { font-size: clamp(2rem, 3.4vw, 2.55rem); }      /* 48 → 41 px */
    .lp-faixa-frase { font-size: clamp(1.05rem, 1.9vw, 1.25rem); }
    .diferencial-num { font-size: 1.3rem; }
    .esg-stat-number { font-size: 1.75rem; }

    .hero { padding: 84px 0 57px; }
    .solucoes-section,
    .diferenciais-section,
    .app-section,
    .esg-section,
    .depoimentos-section,
    .form-section { padding: 72px 0; }
}

/* ============================================================
   RESPONSIVIDADE — TABLET (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
    /* o tablet NÃO herda o valor do laptop (guideline §4.0b): refixa o antigo */
    html body h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
    html body h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
    html body h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
    .stat-number { font-size: clamp(2rem, 4vw, 3rem); }
    .lp-faixa-frase { font-size: clamp(1.05rem, 2.2vw, 1.45rem); }
    .diferencial-num { font-size: 1.5rem; }
    .esg-stat-number { font-size: 2rem; }
    .solucoes-section,
    .diferenciais-section,
    .app-section,
    .esg-section,
    .depoimentos-section,
    .form-section { padding: 96px 0; }

    .hero-grid,
    .app-grid,
    .esg-grid,
    .diferenciais-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero { padding: 96px 0 64px; }

    .lp-nav-links { display: none; }
    .nav-toggle { display: flex; }

    /* O CTA do header SAI no mobile, junto com os links — e não é enfeite.
       Ele continua na barra enquanto os links somem, e a linha do nav passa
       a ser logo + botão + hambúrguer. Com rótulo curto isso ainda cabe; com
       rótulo longo, não. MEDIDO a 375px na LP gestao-viagens-corporativas,
       cujo rótulo é "Falar com um especialista": o botão ocupa 263px numa
       barra de 343px, empurra o hambúrguer para x=566 numa tela de 375 e o
       MENU FICA INALCANÇÁVEL. Com "Avaliar minha operação" (obt) cabe por
       pouco — ou seja, o defeito é latente em toda peça e dispara pelo
       comprimento do texto. Quatro LPs passavam e a quinta quebrava.
       Esconder é seguro porque o CTA JÁ ESTÁ dentro do `.nav-mobile`, em
       todas as peças: o visitante não perde o botão, ele o encontra onde os
       links também estão. */
    .nav-cta { display: none; }

    .hero-elemento { display: none; }
    .app-elemento { display: none; }
    .form-elemento { display: none; }

    .hero-content { order: 1; }
    .hero-form-card { order: 2; max-width: 560px; margin: 0 auto; width: 100%; }

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

    .diferenciais-content { text-align: center; }
    .diferenciais-content .section-desc { margin: 0 auto 32px; }

    .app-screens { order: -1; }
    .app-mockups { height: 320px; max-width: 280px; margin: 0 auto; }
    .mockup--back, .mockup--front { width: 160px; height: 280px; }

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

    .footer-brand {
        grid-column: 1 / -1;
    }

    .stats-grid { gap: 0; }
    .stat-divider { display: none; }
    .stat-item { padding: 12px 24px; }
}

/* ============================================================
   RESPONSIVIDADE — MOBILE (≤640px)
   ============================================================ */
@media (max-width: 640px) {
    :root { --fs-destaque: 1.0625rem; }   /* celular: destaque 17 px, corpo segue 15 */

    .container { padding: 0 16px; }

    .lp-logo { height: 30px; }

    .hero { padding: 88px 0 56px; }
    /* NÃO reduzir o background-size do pattern aqui: a escala é do elemento,
       não da tela. Tile menor = mais bolhas na tela = seção sobrecarregada. */

    .lp-faq-trigger { padding: 18px 20px; gap: 16px; }
    .lp-faq-panel p { margin: 0 20px 20px; }

    .hero-ctas {
        flex-direction: column;
    }

    .hero-ctas .btn { width: 100%; text-align: center; }

    .hero-trust {
        flex-direction: column;
        gap: 8px;
    }

    .form-box { padding: 20px; }
    .hero-form-header { padding: 20px; }

    .solucoes-section,
    .diferenciais-section,
    .app-section,
    .esg-section,
    .depoimentos-section,
    .form-section {
        padding: 64px 0;
    }

    .solucoes-grid,
    .depoimentos-grid {
        grid-template-columns: 1fr;
    }

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

    .stat-divider { display: none; }
    .stat-item { padding: 16px; }

    .esg-grid {
        grid-template-columns: 1fr;
    }

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

    .app-mockups { display: none; }

    .btn { padding: 12px 24px; font-size: 0.825rem; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .lp-header,
    .hero-form-card,
    .form-section,
    .lp-footer-wrap { display: none; }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .btn,
    .btn:hover,
    .solucao-card:hover,
    .diferencial-card:hover,
    .depoimento-card:hover {
        transform: none;
        transition: none;
    }
}

/* ============================================================
   PATTERN — MODIFICADORES POR TOM DA BASE (obrigatório)
   Ficam no FIM do arquivo de propósito: assim vencem por ordem
   qualquer regra de componente com a mesma especificidade
   (ex.: `.hero.lp-pattern::before`).

   O nome diz o fundo, não a força — é assim que se escolhe:

     branco / bg-light        -> --on-light   0.035
     cor média (azul-claro)   -> --on-color   0.022  <- o mais fraco
     navy / escura            -> --on-dark    0.120

   Por que o meio é o mais fraco: `pattern-biosfera-quadrado.png` é
   preto-e-branco OPACO, então o que aparece depende de para que lado
   a cor de base tem espaço de contraste.

     - base quase BRANCA: só as formas escuras marcam (as claras somem
       no branco) -> UMA leitura, limpa;
     - base NAVY: só as formas claras marcam -> UMA leitura, limpa;
     - base de COR MÉDIA (o azul #39b3e7): as duas metades marcam ao
       mesmo tempo e com força parecida -> DUAS leituras concorrendo,
       o desenho ganha contorno duro e vira "azulejo de piscina".

   Por isso o tom intermediário é o caso perigoso e o único que exige
   opacidade quase transparente. Não é escala linear.

   VALORES EM USO — medidos no navegador, não estimados:

     --on-light  0.02   branco / #eef4fa   (o padrão de `.lp-pattern`)
     --on-color  0.02   #39b3e7            (nunca subir: vira azulejo)
     --on-dark   0.05   #1c2555            (obrigatório em seção navy)

   Por que o navy PRECISA de modificador: a 0.02 sobre #1c2555 o pattern
   simplesmente não existe — a seção escura fica lisa e a textura da marca
   aparece só nas seções claras. 0.05 sobre navy tem o mesmo PESO VISUAL
   que 0.02 sobre branco; é equivalência de percepção, não de número.
   Testado lado a lado em 0.02 / 0.04 / 0.06 / 0.09 / 0.12.
   ============================================================ */
.lp-pattern.lp-pattern--on-light::before { opacity: 0.02; }
.lp-pattern.lp-pattern--on-color::before { opacity: 0.02; }
.lp-pattern.lp-pattern--on-dark::before  { opacity: 0.05; }

/* Sem bloco mobile de opacidade: como o tile NÃO diminui mais em tela pequena,
   a densidade de bolhas por área é a mesma em qualquer largura e a opacidade de
   desktop vale igual no mobile. (Havia um ajuste aqui enquanto o tile encolhia
   para 240–300px — a compensação existia por causa da redução, não por causa do
   mobile em si.) */

/* ============================================================
   SISTEMA B — SELO E LOGO "EMPRESA B CERTIFICADA"
   Componente obrigatório em toda LP. Ver base-lp.md §3.10.

   REGRA DURA: o selo (`SELO/PT_Pessoas-e-do-planeta_*.svg`) entra no
   rodapé de TODA LP, imediatamente abaixo do logo Copastur, dentro do
   mesmo bloco de marca (`.footer-brand`). Nunca em outra coluna e nunca
   no `.lp-footer-bottom`.

   TONALIDADE = inverso do fundo:
     rodapé navy/escuro  -> arte  _WHITE / _White
     rodapé branco/claro -> arte  _BLACK / _Black
   Nunca claro sobre claro nem escuro sobre escuro.

   LINK para https://www.bcorp.com/ (target="_blank" rel="noopener"):
     SELO                    -> SEMPRE
     LOGO "SEM URL"          -> SEMPRE (a arte não traz a URL)
     LOGO "COM URL"          -> NÃO (a URL já está impressa na arte)

   H ou V: escolher pelo espaço. Coluna estreita ou slot de ícone -> V.
   Faixa larga, rodapé ou linha de trust -> H. O SELO só existe em
   horizontal (2,65:1).
   ============================================================ */
.lp-bcorp {
    display: inline-block;
    margin-top: 16px;   /* encostado no logo — nunca solto no rodapé */
    line-height: 0;     /* o <a> não herda o leading do rodapé */
    transition: opacity var(--transition), transform var(--transition);
}

/* o `a:hover { opacity: .8 }` do reset apagaria a arte da certificação */
.lp-bcorp:hover,
.lp-bcorp:focus { opacity: 1; }
.lp-bcorp:hover { transform: translateY(-2px); }
.lp-bcorp:focus-visible { outline: 2px solid var(--color-white); outline-offset: 4px; }

/* Selo "Em benefício de todas as pessoas e do planeta" — 561×212 (2,65:1)

   TAMANHO MÍNIMO NO RODAPÉ = LARGURA DO LOGO COPASTUR (258px no v1).
   O selo tem três linhas de texto dentro da arte; abaixo de ~240px de
   largura elas deixam de ser legíveis e o selo vira uma manchinha ao pé
   do logo. Como ele é o único sinal de certificação da página, precisa
   ser lido, não adivinhado. Alinhar pela largura do logo dá a medida
   certa e ainda deixa a coluna de marca visualmente encaixada.
   Nunca reduzir abaixo de 240px em desktop. */
.lp-bcorp-seal { width: 258px; height: auto; }

/* Logo "Empresa B Certificada" — vertical (137×200) por padrão */
.lp-bcorp-logo { width: auto; height: 72px; }
.lp-bcorp-logo--h { height: 56px; }   /* variante horizontal (1,59:1) */

/* Variante em linha — faixa de trust, coluna estreita, dentro de card */
.lp-bcorp--inline { margin-top: 0; vertical-align: middle; }

/* No rodapé o link ocupa a própria linha para o `margin-top` valer */
.footer-brand .lp-bcorp { display: block; }

@media (max-width: 1024px) {
    /* a coluna de marca estreita; 100% da coluna, com teto de 258px */
    .lp-bcorp-seal { width: 100%; max-width: 258px; }
}

@media (max-width: 640px) {
    .lp-bcorp-seal { width: 240px; max-width: 100%; }
}

/* ============================================================
   ELEMENTO DA BIOSFERA EM SOBREPOSIÇÃO — .lp-biosfera
   Componente de acabamento. Regra completa em base-lp.md §3.6.

   Um `Elemento-*` do acervo ancorado em UM CANTO e saindo da tela —
   nunca inteiro, nunca centralizado, nunca em cima do texto. Não
   substitui o `.lp-pattern` (§3.5): pattern é textura, este é forma.

   ESCADA DE PINTURA dentro de `.lp-pattern`:
     fundo da seção
     `::before`      z-index 0  -> PATTERN
     `.lp-biosfera`  z-index 1  -> ELEMENTO
     `> .container`  z-index 2  -> CONTEÚDO
   Cada camada tem seu número: a ordem não depende da ordem do HTML.
   Elemento translúcido deixa o pattern ler ATRAVÉS dele, então a escada
   correta não dispensa opacidade suficiente — daí os números de FORÇA.

   A SEÇÃO PRECISA CLIPAR: `.lp-pattern` já tem `overflow: hidden`; em
   seção sem pattern, aplicar `.lp-biosfera-host` no `<section>`, senão o
   elemento cria rolagem horizontal na página.

   TONALIDADE = inverso do fundo:
     fundo navy   -> arte `(line)` branca ou `(white)`, ou sólido AZUL
     fundo claro  -> arte sólida NAVY

   FORÇA (o modificador diz o fundo, não o número):
     --on-dark   0.28   outline branco ou `(white)` sobre navy
     --azul      0.40   sólido #39b3e7 sobre navy
     --on-light  0.16   sólido navy sobre claro
   Sobre fundo claro o mesmo número pesa mais — 0.16 e 0.28 são
   equivalentes percebidos, não incoerência.

   NÃO REPETIR O MESMO ARQUIVO na mesma LP (§3.6).

   O PNG PRECISA SER APARADO: a âncora de canto move a borda do ARQUIVO,
   não a do desenho, então elemento com moldura transparente para no meio
   da seção parecendo solto. `Elemento-*` vem aparado; os numerados têm
   44% a 84% de vazio em volta. Medir antes de usar (§3.6.3).
   ============================================================ */
.lp-biosfera-host { position: relative; overflow: hidden; }

/* Vem ANTES de `.lp-biosfera` de propósito: as duas têm especificidade
   0,1,0, e o elemento precisa vencer por ordem para ficar no degrau 1. */
.lp-biosfera-host > * { position: relative; z-index: 2; }

.lp-biosfera {
    position: absolute;
    z-index: 1;   /* degrau 1: acima do pattern (0), abaixo do texto (2) */
    width: 900px;
    max-width: 78vw;
    height: auto;
    opacity: 0.28;
    pointer-events: none;
    user-select: none;
}

/* Âncora — sempre um canto, sempre com estouro negativo para sangrar */
.lp-biosfera--tr { top: -80px;    right: -190px; }
.lp-biosfera--br { bottom: -130px; right: -190px; }
.lp-biosfera--bl { bottom: -130px; left: -190px; }
.lp-biosfera--tl { top: -80px;    left: -190px; }

/* Escala — abaixo de ~560px o desenho vira "manchinha" e perde leitura */
.lp-biosfera--sm { width: 620px; }
.lp-biosfera--lg { width: 1150px; }

/* Força por tom de fundo — CALIBRADA COM MASSA (arte de 25% a 45% de
   cobertura opaca). Ver IDENTIDADE §3.6.1.1. */
.lp-biosfera--on-dark  { opacity: 0.28; }
.lp-biosfera--azul     { opacity: 0.40; }
.lp-biosfera--on-light { opacity: 0.16; }

/* Força para TRAÇO (arte de 2% a 4% de cobertura: `(line)`, `(line2)`,
   `(blue2)`, `(line-blue)`).

   A escada acima não serve aqui, e o motivo é aritmético: o traço tem
   pouquíssimo pixel, e reduzir esse pouco a 16% de opacidade é apagá-lo.
   Medido no acervo (IDENTIDADE §3.6.0): `Elemento-CopasturTec(line).png`
   tem 2% de cobertura, `Elemento-Live(blue2).png` 3%.

   Traço pede o INVERSO da massa: área GRANDE (`--lg`) e opacidade ALTA.
   Massa pede área pequena (`--sm`) e opacidade baixa. Tratar os dois como
   uma família só foi o que produziu, na LP de set/2026, um elemento de
   1150px em cinza-quase-branco no pé da página. */
.lp-biosfera--traco-on-dark  { opacity: 0.45; }
.lp-biosfera--traco-on-light { opacity: 0.40; }

/* ============================================================
   ABAIXO DE 1025px O ELEMENTO NÃO ENTRA
   ============================================================
   Até set/2026 este bloco ENCOLHIA o elemento no mobile (440px, com o
   estouro reduzido a -90px). Estava errado, e o motivo é de layout, não
   de tamanho: abaixo de 640px o grid vira UMA COLUNA que ocupa a
   viewport inteira, e a seção deixa de ter canto livre. Encolher o
   desenho não cria espaço — só faz um desenho menor por cima do texto.

   Medido em 375px na LP `gestao-viagens-corporativas`: com o elemento
   encolhido, o desenho pintava sobre **21,7%** das linhas de texto da
   seção. É a regra 4 da IDENTIDADE §3.6.1 ("nunca por cima do texto")
   sendo violada por uma media query que ninguém tinha medido.

   O elemento é acabamento de CANTO. Sem canto, ele não existe. A marca
   segue presente no mobile pelo pattern, pela pílula, pelo chip e pela
   faixa de cor.

   O CORTE SUBIU DE 640px PARA 1025px em set/2026, e o argumento é o
   mesmo um degrau acima. Até aqui havia, antes deste bloco, uma media
   query a 1024px que ENCOLHIA o elemento (640/480/780px) — a mesma ideia
   errada, só que na faixa do tablet. Medido na LP `obt-gestao-viagens`:
   a 768px o texto da seção ocupa de x=24 a x=736 numa janela de 768.
   NÃO SOBRA CANTO NENHUM, e os quatro elementos pintavam sobre 32% a 45%
   das linhas de texto. Encolher não cria canto: faz um desenho menor em
   cima do texto.

   1025px é onde o grid vira coluna única e a seção passa a ocupar a
   viewport inteira. Abaixo disso não existe canto livre em nenhuma peça
   da casa — por isso o corte é aqui, e não no tamanho da tela. */
@media (max-width: 1024px) {
    .lp-biosfera { display: none; }
}

/* ============================================================
   ÚLTIMA LINHA ÓRFÃ DE GRID — .lp-grid-orfaos
   Ver base-lp.md §4.7.

   PROBLEMA: grid de 3 colunas com 5 cards deixa 2 cards encostados à
   esquerda na segunda linha, e o buraco à direita é lido como "faltou
   um item" — não como fim de lista.

   SOLUÇÃO: o grid passa a ter 6 colunas com cada card ocupando 2. A
   largura de card e os gaps ficam IDÊNTICOS ao grid de 3 colunas
   (2c + g = (W - 2g)/3), então nada mais no layout muda. O ganho é
   poder deslocar a última linha meia coluna e centralizá-la:

     sobraram 2 -> o primeiro da linha começa na coluna 2
     sobrou  1 -> o único da linha começa na coluna 3

   `:nth-child(3n+1):nth-last-child(2)` = "é o primeiro de uma linha E
   ainda faltam 2" — vale para 2, 5, 8, 11... cards, sem hard-code de
   quantidade. Mesma ideia com `:last-child` para 1, 4, 7, 10...

   OBRIGATÓRIO ficar dentro de `@media (min-width: 1025px)`: o número de
   colunas do componente muda no tablet/mobile e uma regra de mesma
   especificidade escrita fora de media query venceria por ordem as
   media queries do base, travando 6 colunas no celular.
   ============================================================ */
@media (min-width: 1025px) {
    .lp-grid-orfaos { grid-template-columns: repeat(6, 1fr); }
    .lp-grid-orfaos > * { grid-column: span 2; }
    .lp-grid-orfaos > :nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
    .lp-grid-orfaos > :nth-child(3n+1):last-child        { grid-column: 3 / span 2; }
}

@media (min-width: 641px) and (max-width: 1024px) {
    /* 2 colunas no base -> 4 colunas com span 2, mesma aritmética */
    .lp-grid-orfaos { grid-template-columns: repeat(4, 1fr); }
    .lp-grid-orfaos > * { grid-column: span 2; }
    .lp-grid-orfaos > :nth-child(2n+1):last-child { grid-column: 2 / span 2; }
}


/* ============================================================
   CARD HORIZONTAL — `.lp-card-h`
   Modificador de card: slot visual à ESQUERDA, texto à DIREITA, em vez
   de um embaixo do outro. Vale sobre qualquer card do base
   (`.solucao-card`, `.diferencial-card`, card de FAQ, o que houver).

   QUANDO USAR
   - Card de 1 a 3 linhas de texto. Empilhado, um card curto vira uma
     coluna alta com o ícone perdido no topo e muito ar embaixo.
   - Quando o slot da esquerda é SELO ou LOGO (Sistema B™, certificação,
     logo de parceiro): empilhado, a arte tem de ficar pequena para não
     empurrar o texto; na horizontal ela pode ocupar toda a altura do
     card e ganhar legibilidade.
   - Quando a seção tem 4 ou mais cards: a versão horizontal é mais
     baixa, então a seção inteira ocupa menos rolagem.

   QUANDO NÃO USAR
   - Card com 4+ linhas de texto ou com título de duas linhas: a coluna
     de texto fica estreita e o card volta a crescer em altura, sem
     ganho nenhum.
   - Card com imagem larga no topo (foto, mockup). Aí o empilhado é que
     está certo.

   ESTRUTURA — o texto precisa vir EMBRULHADO. São 2 colunas de grid:
   se título e parágrafo forem filhos diretos, cada um cai numa linha
   diferente e o ícone fica sozinho na primeira.

     <article class="solucao-card lp-card-h">
         <span class="solucao-icon">…</span>
         <div class="lp-card-h-text">
             <h3 class="solucao-title">…</h3>
             <p class="solucao-desc">…</p>
         </div>
     </article>

   Fica horizontal em TODA largura, inclusive no celular — num card de
   texto curto a horizontal é ainda mais eficiente na tela estreita.
   ============================================================ */
.lp-card-h {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

/* o slot da esquerda perde o respiro de baixo da versão empilhada — na
   horizontal esse espaço viraria um degrau entre ícone e texto */
.lp-card-h > :first-child {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* último parágrafo do card não empurra o fundo */
.lp-card-h-text > :last-child { margin-bottom: 0; }

/* ============================================================
   TOM DA SEÇÃO — .lp-tom--*
   _core/regras-gerais.md G-14 · IDENTIDADE §3.5.6

   O INSTRUMENTO DE RITMO. As classes de seção do base trazem o fundo
   embutido (`.solucoes-section` é #eef4fa, `.depoimentos-section` é
   branca, `.app-section` é navy), e isso amarra o tom ao componente:
   duas seções de card viravam duas seções da mesma cor, sempre.

   Resultado medido na LP de set/2026: 7 das 10 dobras em branco ou
   quase-branco, e o pattern da marca em TODAS as 10. A página ficou
   plana e o pattern deixou de ser respiro para virar assinatura.

   Estas classes DESAMARRAM tom de componente. O componente segue
   decidindo a estrutura (grid, card, espaçamento); o tom passa a ser
   escolha de ritmo, dobra por dobra.

   ESTE BLOCO VIVE NO FIM DO ARQUIVO, e não é arrumação: a especificidade
   é 0,1,0, IGUAL à da classe de seção, então quem vence é a ORDEM. Na
   primeira tentativa ele ficou no meio do arquivo — depois de
   `.diferenciais-section` mas ANTES de `.depoimentos-section` (1387) e
   `.form-section` (1470). Resultado medido: as duas dobras que deveriam
   ser #eef4fa renderizaram branco, e o ritmo não existiu. Classe nova de
   seção acrescentada abaixo daqui repete o defeito.

   A REGRA DE RITMO (G-14, medida por medir_elementos.py):
     - nenhum tom em mais de 2 dobras seguidas
     - pattern em no máximo METADE das dobras
     - a faixa azul (.lp-faixa) é curta: 1 a 3 linhas, nunca uma dobra
   ============================================================ */
.lp-tom--branco { background-color: var(--color-white); }
.lp-tom--claro  { background-color: var(--color-bg-light); }
.lp-tom--navy   { background-color: var(--color-navy); }

/* Fundo escuro por modificador de tom traz o texto claro junto — senão a
   dobra troca de cor e o texto navy fica ilegível por descuido. */
.lp-tom--navy,
.lp-tom--navy p,
.lp-tom--navy h2,
.lp-tom--navy h3,
.lp-tom--navy h4 { color: var(--color-white); }

/* ============================================================
   EXTENSÕES DESTA LP — cmais-maestro
   Base: style_v1.css (cópia integral acima, com a escala de texto por
   resolução de 29/10/2026). Nada aqui redefine variável existente do
   :root nem toca no reset defensivo.

   O C+ Maestro tem identidade de linha (COPASTUR/marca/C-MAESTRO.md):
   céu, ondas navy + azul, caixa branca com borda azul, degradê turquesa
   → azul em superfície, título em caixa mista com par leve/forte. Os
   tokens --mae-* são ACRESCENTADOS ao :root; os do base são redefinidos
   no escopo `.lp-mae`, que vai no header, em cada seção e no rodapé
   (_midia/landing-page.md §13.9).
   ============================================================ */

:root {
    --mae-navy:          #1c2555;
    --mae-azul:          #4bb1e4;
    --mae-borda:         #42bee0;
    --mae-degrade-de:    #41cfe2;
    --mae-degrade-ate:   #4285db;
    --mae-texto-de:      #178cbe;
    --mae-texto-ate:     #4285db;
    --mae-claro:         #eaf4fb;
    --mae-raio:          22px;
}

.lp-mae {
    --color-navy:       var(--mae-navy);
    --color-blue:       var(--mae-azul);
    --color-text:       var(--mae-navy);
    --color-text-muted: var(--mae-navy);
}

/* TÍTULOS — caixa mista, 700, com a primeira frase em 400 (o par leve/forte
   do One Page). O reset do base pinta h1..h6 em caixa alta 800 com 0,0,3;
   `.lp-mae hN` (0,1,1) devolve a caixa mista sem mexer no reset. */
.lp-mae h1,
.lp-mae h2,
.lp-mae h3 { text-transform: none; }

.lp-mae .section-title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.lp-mae-leve {
    display: block;
    font-weight: 400;
}

/* Degradê em TEXTO: só em corpo de 24 px ou mais, sobre branco ou claro.
   O do One Page (#17c9f3 → #4283da) dá 2,1:1 na ponta clara e reprova até o
   piso de texto grande; a ponta clara desce para o ciano de texto grande da
   marca (#178cbe, 3,80:1 no branco) e a azul fica a do One Page (3,74:1).
   `color` é a ponta PIOR: é ela que a chapa de contraste carimba. */
.lp-texto-degrade {
    color: var(--mae-texto-ate);
    background-image: linear-gradient(90deg, var(--mae-texto-de), var(--mae-texto-ate));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* HEADER DE COR FIXA (_midia/landing-page.md §4.12) ---------------- */

.lp-mae-header,
.lp-mae-header.scrolled,
.lp-mae-header.dark-header {
    background-color: var(--color-white);
    border-bottom-color: var(--color-border);
    backdrop-filter: none;
}

.lp-mae-header .lp-logo--dark { display: block; }
.lp-mae-header .lp-logo--light { display: none; }

.lp-mae-header .lp-nav-links li a:not(.btn),
.lp-mae-header .nav-mobile ul li a:not(.btn),
.lp-mae-header.dark-header .lp-nav-links li a:not(.btn),
.lp-mae-header.dark-header .nav-mobile ul li a:not(.btn) { color: var(--mae-navy); }

.lp-mae-header .nav-toggle span,
.lp-mae-header.dark-header .nav-toggle span { background: var(--mae-navy); }

/* HERO — o céu do One Page no topo, a onda no canto ------------------ */

/* O céu tem alfa crescente para baixo e termina branco: sobre o branco da
   seção não há emenda. 1080 px de arquivo; abaixo dessa largura de janela ele
   não encolhe (o céu viraria uma faixa fina no celular). */
.lp-mae-hero {
    background-color: var(--color-white);
    background-image: url('../cmais-maestro/maestro-fundo-ceu-1080x583.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: max(100%, 1080px) auto;
}

/* `.hero` é flex no base: sem isto o `.container` encolhe até o conteúdo e,
   no tablet, a coluna única fica 200 px mais estreita que as outras dobras. */
.lp-mae-hero > .container { width: 100%; }

.lp-mae-onda {
    position: absolute;
    z-index: 0;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.lp-mae-onda--sup { top: 72px; right: 0; width: 400px; }

.lp-mae-hero .hero-grid {
    grid-template-columns: 7fr 5fr;
    gap: 56px;
    align-items: start;
}

/* 126 px de arquivo: a 56 px o logotipo sai a 2,25x (IDENTIDADE §3.4.2). */
.lp-mae-logo {
    display: block;
    height: 56px;
    width: auto;
    margin-bottom: 28px;
}

.lp-mae .hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
}

.lp-mae-hero-sub {
    font-size: 1.625rem;
    font-weight: 500;
    line-height: 1.3;
    max-width: 22em;
    margin-bottom: 20px;
}

.lp-mae-marca {
    width: 88px;
    height: auto;
    margin-bottom: 24px;
}

.lp-mae .hero-subtitle {
    max-width: 34em;
    margin-bottom: 16px;
}

.lp-mae-hero-texto {
    font-size: var(--fs-corpo);
    line-height: 1.7;
    max-width: 40em;
    margin-bottom: 32px;
}

.lp-mae .hero-form-card {
    border: 2px solid var(--mae-borda);
    border-radius: var(--mae-raio);
}

/* CONTEXTO E SOLUÇÕES ------------------------------------------------ */

.lp-mae-contexto,
.lp-mae-como,
.lp-mae-porque,
.lp-mae-ai { padding: 96px 0; }

.lp-mae-contexto-titulo { max-width: 26em; margin-bottom: 40px; }

.lp-mae-contexto-texto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.lp-mae-contexto-texto p {
    font-size: var(--fs-corpo);
    line-height: 1.7;
    max-width: 40em;
}

.lp-mae-contexto-texto p::before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 2px;
    margin-bottom: 16px;
    background: linear-gradient(90deg, var(--mae-degrade-de), var(--mae-degrade-ate));
}

/* O DIAGRAMA chegou como imagem de 1059 px com o texto pintado dentro: a 375 px
   o rótulo cairia para 5 px. Aqui ele é HTML (G-09), com o mesmo texto e a
   mesma forma — duas caixas de borda azul ligadas ao Maestro e à Zuri. */
.lp-mae-diagrama {
    max-width: 1000px;
    margin: 64px auto 0;
}

.lp-mae-caixa {
    background: var(--color-white);
    border: 2px solid var(--mae-borda);
    border-radius: 26px;
    padding: 28px 32px 32px;
    box-shadow: 0 12px 32px rgba(28, 37, 85, 0.07);
}

.lp-mae-caixa-titulo {
    text-align: center;
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 28px;
}

.lp-mae .lp-mae-caixa-titulo strong { font-weight: 700; color: var(--mae-navy); }

.lp-mae-solucoes,
.lp-mae-assistentes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.lp-mae-solucoes { gap: 28px 16px; }

.lp-mae-solucao {
    flex: 0 0 calc(25% - 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--mae-navy);
    font-size: 0.875rem;
    line-height: 1.4;
}

.lp-mae-bolha {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mae-degrade-de), var(--mae-degrade-ate));
    color: var(--color-white);
    font-size: 28px;
    line-height: 1;
    margin-bottom: 12px;
    box-shadow: 0 6px 16px rgba(66, 133, 219, 0.28);
}

.lp-mae-solucao strong { font-weight: 700; }

.lp-mae-ligacao {
    position: relative;
    width: 3px;
    height: 44px;
    margin: 0 auto;
    background: var(--mae-borda);
}

.lp-mae-ligacao::before,
.lp-mae-ligacao::after,
.lp-mae-ligacao-h::before,
.lp-mae-ligacao-h::after {
    content: '';
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--mae-borda);
}

.lp-mae-ligacao::before { top: -5px; left: -4px; }
.lp-mae-ligacao::after { bottom: -5px; left: -4px; }

/* O Maestro fica no eixo das duas ligações verticais; a Zuri pendura do lado
   direito dele, como no One Page. */
.lp-mae-centro {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.lp-mae-no--maestro {
    grid-column: 2;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-mae-lado {
    grid-column: 3;
    justify-self: start;
    display: flex;
    align-items: center;
}

.lp-mae-no {
    background: var(--color-white);
    border: 2px solid var(--mae-borda);
    border-radius: var(--mae-raio);
    box-shadow: 0 12px 32px rgba(28, 37, 85, 0.07);
}

.lp-mae-no--maestro { padding: 32px 56px; }
.lp-mae-no--maestro img { height: 56px; width: auto; }

.lp-mae-ligacao-h {
    position: relative;
    width: 40px;
    height: 3px;
    background: var(--mae-borda);
    flex-shrink: 0;
}

.lp-mae-ligacao-h::before { left: -5px; top: -4px; }
.lp-mae-ligacao-h::after { right: -5px; top: -4px; }

.lp-mae-no--zuri {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 210px;
    padding: 18px 18px 20px;
}

.lp-mae-zuri-rosto {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2px solid var(--mae-borda);
    background: var(--mae-claro);
}

.lp-mae-zuri-nome {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 8px;
}

.lp-mae-zuri-papel {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--mae-navy);
    margin-top: 4px;
}

.lp-mae-assistentes { gap: 20px 8px; }

.lp-mae-assistentes li {
    flex: 0 0 calc(20% - 8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mae-navy);
}

.lp-mae-marca-ia {
    font-size: 36px;
    line-height: 1;
}

.lp-mae-marca-ia i {
    background-image: linear-gradient(135deg, var(--mae-degrade-de), var(--mae-degrade-ate));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* O Font Awesome Free não tem a marca do Google Gemini (o `fa-gemini` é o
   signo de Gêmeos): a estrela de quatro pontas vai em SVG, no mesmo degradê. */
.lp-mae-gemini { display: block; width: 1em; height: 1em; }
.lp-mae-grad-de { stop-color: var(--mae-degrade-de); }
.lp-mae-grad-ate { stop-color: var(--mae-degrade-ate); }

.lp-mae-bordao {
    text-align: center;
    font-size: 2.375rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    max-width: 18em;
    margin: 72px auto 0;
}

.lp-mae-linha { display: block; }

/* COMO FUNCIONA ------------------------------------------------------- */

.lp-mae .section-header { max-width: 820px; margin-bottom: 48px; }
.lp-mae .section-header .section-desc { max-width: 40em; }

.lp-mae-acoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.lp-mae-card {
    background: var(--color-white);
    border: 2px solid var(--mae-borda);
    border-radius: var(--mae-raio);
    padding: 32px 28px;
}

.lp-mae-acao { box-shadow: 0 12px 32px rgba(28, 37, 85, 0.06); }

.lp-mae .lp-mae-chip {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mae-degrade-de), var(--mae-degrade-ate));
    color: var(--color-white);
    font-size: 26px;
    margin-bottom: 20px;
    box-shadow: 0 6px 16px rgba(66, 133, 219, 0.28);
}

.lp-mae-card-titulo {
    font-size: 1.125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    margin-bottom: 14px;
}

.lp-mae .lp-mae-card-titulo { text-transform: uppercase; }

.lp-mae-card p {
    font-size: var(--fs-corpo);
    line-height: 1.65;
    max-width: 40em;
}

/* a pergunta, como fala de quem usa o assistente */
.lp-mae-card .lp-mae-pergunta {
    font-weight: 600;
    line-height: 1.5;
    background: var(--mae-claro);
    border-radius: 16px 16px 16px 4px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

/* A nota do One Page: faixa navy, texto branco (14,53:1). Numa linha só ela
   tem 82 caracteres; o teto da G-21 é 80, então quebra em duas equilibradas. */
.lp-mae-nota {
    width: fit-content;
    max-width: min(100%, 38em);
    text-wrap: balance;
    margin: 40px auto 0;
    padding: 10px 24px;
    border-radius: 18px;
    background: var(--mae-navy);
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

/* POR QUE IMPORTA — o card 3D do One Page --------------------------- */

.lp-mae-porque-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    margin-bottom: 56px;
}

.lp-mae-porque-titulo .section-title { margin-bottom: 0; }

.lp-mae-seta {
    width: 30px;
    height: auto;
    flex-shrink: 0;
}

.lp-mae-seta--fecha { transform: scaleX(-1); }

.lp-mae-pilares {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

/* O degradê é a placa de trás; a face é branca, com o contorno navy deslocado
   — a mesma geometria do One Page. No One Page o texto é branco sobre o
   degradê, e ali ele dá 1,87:1 na ponta turquesa: a superfície fica com o
   degradê, o texto vai para a face. */
.lp-mae-pilar { position: relative; }

.lp-mae-pilar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 12px;
    bottom: 12px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--mae-degrade-de), var(--mae-degrade-ate));
}

.lp-mae-pilar-face {
    position: relative;
    height: calc(100% - 12px);
    margin: 12px 0 0 12px;
    border: 3px solid var(--mae-navy);
    border-radius: 24px;
    text-align: center;
}

.lp-mae-pilar-face .lp-mae-chip { margin: 0 auto 18px; }
.lp-mae-pilar-face p { margin: 0 auto; }

/* AI FIRST ------------------------------------------------------------- */

.lp-mae-ai-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: center;
}

.lp-mae-ai-marca img { width: 100%; max-width: 380px; height: auto; }

.lp-mae-ai-texto .section-title { margin-bottom: 20px; }

.lp-mae-ai-texto .section-desc { margin: 0; max-width: 40em; }
.lp-mae-ai-texto .section-desc + .section-desc { margin-top: 16px; }
.lp-mae-ai-texto .section-desc strong { font-weight: 700; color: var(--color-white); }

/* azul do símbolo sobre o navy: 6,05:1 */
.lp-mae .lp-mae-azul { color: var(--mae-azul); }

/* FECHAMENTO — a Zuri aponta para o convite, como no pé do One Page ---- */

.lp-mae-fecho {
    position: relative;
    overflow: hidden;
    padding: 96px 0 0;
}

.lp-mae-fecho > .container { position: relative; z-index: 1; }

/* A onda fica no canto e o texto termina acima dela: 220 px de onda dão 138 px
   de altura, e o botão para a 160 px do pé. */
.lp-mae-onda--inf { left: 0; bottom: 0; width: 220px; }

.lp-mae-fecho-grid {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: 48px;
    align-items: end;
}

.lp-mae-fecho-texto {
    align-self: center;
    padding-bottom: 160px;
}

.lp-mae-fecho-texto .section-title { margin-bottom: 18px; }
.lp-mae-fecho-texto .section-desc { margin: 0; max-width: 40em; }
.lp-mae-fecho-acoes { margin-top: 32px; }

/* 536 px de arquivo, nunca acima disso na tela (G-32). */
.lp-mae-zuri {
    margin: 0;
    width: 100%;
    max-width: 480px;
    justify-self: end;
}

.lp-mae-zuri img { width: 100%; height: auto; display: block; }

/* RODAPÉ --------------------------------------------------------------- */

@media (min-width: 1025px) {
    .lp-mae-footer .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* ESCALA POR RESOLUÇÃO (_midia/landing-page.md §4.14) -------------------
   Laptop: fonte de 20 px ou mais × 0,85; respiro de 96 px × 0,75. O tablet
   NÃO herda o laptop: o bloco dele refixa os valores do desktop. */
@media (max-width: 1366px) {
    .lp-mae-hero { padding-top: 104px; }
    .lp-mae .hero-title { font-size: 2.125rem; }
    .lp-mae-hero-sub { font-size: 1.375rem; }
    .lp-mae .section-title { font-size: 1.875rem; }
    .lp-mae-bordao { font-size: 2rem; }
    .lp-mae-caixa-titulo { font-size: 1.1875rem; }
    .lp-mae-zuri-nome { font-size: 1.5rem; }
    .lp-mae-logo { height: 50px; }
    .lp-mae-onda--sup { width: 340px; }

    .lp-mae-contexto,
    .lp-mae-como,
    .lp-mae-porque,
    .lp-mae-ai { padding: 72px 0; }
    .lp-mae-fecho { padding-top: 72px; }
    .lp-mae-fecho-texto { padding-bottom: 140px; }
    .lp-mae-onda--inf { width: 200px; }
    .lp-mae-bordao { margin-top: 56px; }
}

@media (max-width: 1024px) {
    .lp-mae-hero { padding-top: 96px; }
    .lp-mae .hero-title { font-size: 2.5rem; }
    .lp-mae-hero-sub { font-size: 1.625rem; }
    .lp-mae .section-title { font-size: 2.25rem; }
    .lp-mae-bordao { font-size: 2.375rem; margin-top: 72px; }
    .lp-mae-caixa-titulo { font-size: 1.375rem; }
    .lp-mae-zuri-nome { font-size: 1.625rem; }
    .lp-mae-logo { height: 56px; }
    .lp-mae-onda--sup { display: none; }

    .lp-mae-contexto,
    .lp-mae-como,
    .lp-mae-porque,
    .lp-mae-ai { padding: 96px 0; }
    .lp-mae-fecho { padding-top: 96px; }

    .lp-mae-hero .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .lp-mae-contexto-texto { grid-template-columns: 1fr; gap: 28px; }
    .lp-mae-acoes { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
    .lp-mae-pilares { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .lp-mae-ai-grid { grid-template-columns: 1fr; gap: 40px; }
    .lp-mae-ai-marca img { max-width: 300px; }
    .lp-mae-fecho-grid { grid-template-columns: 1fr; gap: 8px; }
    .lp-mae-fecho-texto { padding-bottom: 0; }
    .lp-mae-zuri { justify-self: center; max-width: 420px; }
    .lp-mae-onda--inf { display: none; }
}

@media (max-width: 640px) {
    .lp-mae-hero { padding-top: 88px; }
    .lp-mae .hero-title { font-size: 2rem; }
    .lp-mae-hero-sub { font-size: 1.3125rem; }
    .lp-mae .section-title { font-size: 1.625rem; }
    .lp-mae-bordao { font-size: 1.75rem; margin-top: 56px; }
    .lp-mae-caixa-titulo { font-size: 1.1875rem; }
    .lp-mae-zuri-nome { font-size: 1.5rem; }
    .lp-mae-logo { height: 44px; margin-bottom: 22px; }
    .lp-mae-marca { width: 72px; }

    .lp-mae-contexto,
    .lp-mae-como,
    .lp-mae-porque,
    .lp-mae-ai { padding: 64px 0; }
    .lp-mae-fecho { padding-top: 64px; }

    .lp-mae-diagrama { margin-top: 48px; }
    .lp-mae-caixa { padding: 24px 16px 28px; border-radius: 20px; }
    .lp-mae-solucao { flex-basis: calc(50% - 8px); }
    .lp-mae-assistentes li { flex-basis: calc(33.333% - 6px); }
    .lp-mae-centro { grid-template-columns: auto auto; justify-content: center; }
    .lp-mae-no--maestro { grid-column: 1; padding: 20px 14px; }
    .lp-mae-no--maestro img { height: 30px; }
    .lp-mae-lado { grid-column: 2; }
    .lp-mae-ligacao-h { width: 16px; }
    .lp-mae-no--zuri { width: 136px; padding: 14px 10px 16px; }
    .lp-mae-zuri-rosto { width: 60px; height: 60px; }
    .lp-mae-zuri-papel { font-size: 0.75rem; }

    .lp-mae-card { padding: 28px 20px; }
    .lp-mae-porque-titulo { gap: 10px; margin-bottom: 40px; }
    .lp-mae-seta { width: 20px; }
    .lp-mae-nota { border-radius: 16px; }
    .lp-mae-zuri { max-width: 340px; }
}