/* ============================================================
   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; }

/* ============================================================
   RESPONSIVIDADE — TABLET (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .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) {
    .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ÃO DA PEÇA — cmorefuture (LP de evento)
   _midia/landing-page.md §4.2 e §13 · COPASTUR/midia/landing-page.md §13
   ============================================================ */

/* ------------------------------------------------------------
   PALETA DO EVENTO — tokens ACRESCENTADOS, nada redefinido

   Os hex saem dos próprios SVG do sistema (CE/RJ-PATTERN, CE/RJ-LINHA).
   #29abe2, #2baae2 e #00608b são o mesmo tom com arredondamento de
   exportação — quatro cores, não sete.

   #01608b é a resposta que IDENTIDADE-VISUAL.md §1.3 pede: um azul de
   texto para fundo claro "com hex próprio e medição própria", vindo da
   arte do evento e não emprestado da linha TripCare. Mede 6,89:1 no
   branco e 6,27:1 no fundo claro do evento.

   #22abe2 tem o mesmo defeito do #39b3e7 da marca-mãe: 2,63:1 no branco.
   Sobre o navy do evento dá 6,27:1. Brilho e área, nunca texto claro.
   ------------------------------------------------------------ */
:root {
    --evt-navy-900: #002138;
    --evt-navy-800: #00285c;
    --evt-blue-700: #01608b;
    --evt-blue-700-dark: #004d6f;
    --evt-blue-400: #22abe2;
    --evt-bg-light: #f0f5f8;
    --evt-border: #d6e6ec;
    --evt-text-muted: #3f5a6b;
    --evt-vidro: rgba(255, 255, 255, 0.08);
    --evt-vidro-borda: rgba(255, 255, 255, 0.20);
}

/* ------------------------------------------------------------
   OS TOKENS SEMÂNTICOS DO BASE, NO ESCOPO DA PEÇA

   §4.2 proíbe redefinir variável no `:root` — e a razão é que o `:root` é
   compartilhado: mexer lá mudaria toda LP que copia este base. Aqui a
   redefinição é ESCOPADA em `.lp-evt`, a classe que marca a livraria do
   evento no header, em cada seção e no rodapé. Fora dela nada muda.

   Sem isto sobram trinta e poucos lugares pintados pelo token do base e não
   pelo do evento: `h2.section-title` e `h3.solucao-title` em #1c2555, as
   bordas de card em #dce6f0, o `<label>` do CF7, o fundo do
   `.lp-footer-wrap`, as barras do menu sanfona. Foram medidos um a um no
   navegador, não deduzidos — e caçar cada seletor à mão deixaria o próximo
   de fora. A instrução do pedido é dura: "não pode fugir desses tons de
   azul".
   ------------------------------------------------------------ */
.lp-evt {
    --color-navy: var(--evt-navy-900);
    --color-navy-dark: #001726;
    --color-blue: var(--evt-blue-400);
    --color-blue-dark: var(--evt-blue-700-dark);
    --color-text: var(--evt-navy-900);
    --color-text-muted: var(--evt-text-muted);
    --color-bg-light: var(--evt-bg-light);
    --color-border: var(--evt-border);
}

/* ------------------------------------------------------------
   TOM DAS DOBRAS DO EVENTO

   Dois tons novos ao lado dos três do base, na mesma gramática
   (§4.10): o modificador decide o TOM, o componente decide a estrutura.
   Vem depois de toda classe de seção no arquivo — especificidade igual,
   quem vence é a ordem.
   ------------------------------------------------------------ */
.lp-tom--evt-escuro { background-color: var(--evt-navy-900); }
.lp-tom--evt-claro  { background-color: var(--evt-bg-light); }

.lp-tom--evt-escuro,
.lp-tom--evt-escuro p,
.lp-tom--evt-escuro h2,
.lp-tom--evt-escuro h3,
.lp-tom--evt-escuro h4 { color: var(--color-white); }

.lp-tom--evt-claro p { color: var(--evt-text-muted); }

/* ------------------------------------------------------------
   TOMADA DE COR — header, rodapé, faixa e botões

   Classe ADITIVA em cada caso: o base não é editado nem sobrescrito
   por nome próprio (§4.2). O logo Copastur e o selo Sistema B™ ficam:
   a marca anfitriã não sai da peça.
   ------------------------------------------------------------ */
/* HEADER DE COR FIXA — UM ESTADO, NÃO DOIS.
   ------------------------------------------------------------
   O header do base tem DUAS chaves independentes: `.scrolled` pinta o fundo
   e `.dark-header` troca logo e cor de link, cada uma com o seu gatilho. Elas
   podem discordar — e discordaram. Com o fundo do evento fixo em navy e o
   `.dark-header` ainda amarrado a `data-header="dark"`, toda dobra CLARA
   devolvia logo navy e link navy SOBRE fundo navy:

     y=1700   dark-header ausente   fundo rgba(0,33,56,.96)   link rgb(0,33,56)   -> 1,00:1
     y=2600   idem
     y=4300   idem

   A correção não é sincronizar as duas chaves: é ter uma só. O header fica
   navy do começo ao fim, com o logo claro e o link branco sempre. `.scrolled`
   continua existindo — mas só para a sombra, que é o que ele deveria fazer.
   ------------------------------------------------------------ */
.lp-evt-header,
.lp-evt-header.scrolled,
.lp-evt-header.dark-header {
    background-color: rgba(0, 33, 56, 0.96);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

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

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

.lp-evt-header .lp-nav-links li a:not(.btn):hover,
.lp-evt-header .nav-mobile ul li a:not(.btn):hover { color: var(--color-white); }

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

.lp-evt-header .nav-mobile { border-top-color: rgba(255, 255, 255, 0.14); }

.lp-evt-header .nav-cta { background: var(--evt-blue-700); border-color: var(--evt-blue-700); }
.lp-evt-header .nav-cta:hover,
.lp-evt-header .nav-cta:focus-visible {
    background: var(--evt-blue-700-dark);
    border-color: var(--evt-blue-700-dark);
}

.lp-evt-footer .lp-footer-main { background-color: var(--evt-navy-900); }
.lp-evt-footer .lp-footer-bottom { background-color: #001726; }
.lp-evt-footer .footer-heading { color: var(--evt-blue-400); }

.lp-faixa--evt { background-color: var(--evt-blue-400); }
.lp-faixa--evt,
.lp-faixa--evt p,
.lp-faixa--evt .lp-faixa-frase,
.lp-faixa--evt .lp-faixa-frase strong { color: var(--evt-navy-900); }

/* Texto sobre a faixa é o navy do evento (6,27:1). Branco daria 2,63:1 —
   é a mesma proibição que IDENTIDADE-VISUAL.md §1.4 registra para o
   azul da marca-mãe como fundo chapado. */

.lp-evt .cta-primary {
    background: var(--evt-blue-700);
    border-color: var(--evt-blue-700);
    color: var(--color-white);
}
.lp-evt .cta-primary:hover,
.lp-evt .cta-primary:focus-visible {
    background: var(--evt-blue-700-dark);
    border-color: var(--evt-blue-700-dark);
    color: var(--color-white);
}

.lp-evt .cta-secondary {
    color: var(--evt-blue-700);
    border-color: var(--evt-blue-700);
}
.lp-evt .cta-secondary:hover,
.lp-evt .cta-secondary:focus-visible {
    background: rgba(1, 96, 139, 0.07);
    color: var(--evt-blue-700);
}

.lp-evt .cta-white { color: var(--evt-navy-900); }
.lp-evt .cta-white:hover,
.lp-evt .cta-white:focus-visible {
    background: var(--evt-bg-light);
    border-color: var(--evt-bg-light);
    color: var(--evt-navy-900);
}

/* Secundário em dobra escura. O .cta-secondary do base é outline navy —
   invisível sobre o navy do evento. */
.cta-outline-evt {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.55);
}
.cta-outline-evt:hover,
.cta-outline-evt:focus-visible {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--color-white);
    color: var(--color-white);
}

/* Pílula, realce e ícone na cor do evento */
.lp-evt .section-tag { background: var(--evt-navy-900); }
.lp-evt .section-tag--light { background: rgba(255, 255, 255, 0.15); }

.lp-evt .lp-realce {
    background-color: var(--evt-blue-400);
    color: var(--evt-navy-900);
}
.lp-evt .lp-realce--on-dark {
    background-color: var(--color-white);
    color: var(--evt-navy-900);
}

.lp-evt .solucao-icon,
.lp-evt .lp-icon-chip {
    background: var(--evt-bg-light);
    color: var(--evt-blue-700);
}

.lp-evt .trust-item { color: var(--evt-navy-900); }
/* Em dobra escura o `.trust-item` do base é navy — 1,13:1 sobre o navy do
   evento, ou seja, invisível. Precisa das DUAS dobras escuras da peça: o
   hero (.lp-evt-hero) e as seções com modificador de tom. */
.lp-evt-hero .trust-item,
.lp-tom--evt-escuro .trust-item { color: rgba(255, 255, 255, 0.92); }

/* Submit do CF7 na cor do evento. De quebra corrige o hover do base, que
   troca para #2fa2d4 e leva o branco a 2,6:1 — aqui vai para 9,17:1. */
.lp-evt .form-box input[type="submit"],
.lp-evt .form-box .wpcf7-submit {
    background: var(--evt-blue-700);
}

.lp-evt .form-box input[type="submit"]:hover,
.lp-evt .form-box .wpcf7-submit:hover {
    background: var(--evt-blue-700-dark);
}

/* ------------------------------------------------------------
   FAIXAS GRÁFICAS — o sistema de fundo do evento

   Substituem o pattern biosfera e os elementos CopasturTec nestas
   páginas. Os SVG são composições de ladrilho de 125px com aresta
   dura em toda borda: `repeat-x` não deixa emenda visível.

   MOSAICO: 2000×625 = 16×5 ladrilhos. `background-size` no tamanho
   NATURAL e altura de 250px mostra exatamente DUAS fileiras — corte
   no fio da grade, nunca no meio de um ladrilho.

   LINHA: 2250×177,12, uma fileira só (a altura extra é um elemento que
   sangra de propósito). Aqui `auto 100%` serve, porque a composição
   inteira cabe na faixa.
   ------------------------------------------------------------ */
.lp-evt-faixa {
    background-repeat: repeat-x;
    background-position: top left;
    pointer-events: none;
}

.lp-evt-faixa--mosaico {
    height: 250px;
    background-size: 2000px 625px;
}

.lp-evt-faixa--linha {
    height: 110px;
    background-size: auto 100%;
    background-position: center left;
}

.lp-evt-faixa--ce.lp-evt-faixa--mosaico { background-image: url('../img/CE-PATTERN.svg'); }
.lp-evt-faixa--rj.lp-evt-faixa--mosaico { background-image: url('../img/RJ-PATTERN.svg'); }
.lp-evt-faixa--ce.lp-evt-faixa--linha   { background-image: url('../img/CE-LINHA.svg'); }
.lp-evt-faixa--rj.lp-evt-faixa--linha   { background-image: url('../img/RJ-LINHA.svg'); }

/* ------------------------------------------------------------
   HERO DO EVENTO
   ------------------------------------------------------------ */
.lp-evt-hero {
    background-color: var(--evt-navy-900);
    background-image: none;
    padding-top: 128px;   /* header fixo (72px) + respiro sobre o logotipo */
}

/* A faixa-mosaico fica no PÉ da dobra, não no topo.

   No topo ela seria cortada pelo header fixo (72px) no meio da primeira
   fileira de ladrilhos — corte que o olho lê como erro de recorte — e
   empurraria o cartão do formulário para fora da primeira tela, contra o
   §5.2. No pé ela mostra as duas fileiras inteiras, serve de base para a
   dobra, e é onde a arte SAVE THE DATE também a coloca. */
.lp-evt-hero { padding-bottom: 306px; }

/* `.hero` do base é `display: flex`, e item de flex tem `min-width: auto` —
   ou seja, não encolhe abaixo do próprio min-content. Na dobra de coluna
   única do hub isso fazia o `.container` sair 12px para fora da tela a
   375px, sem `scrollWidth` maior que a janela (o `overflow: hidden` do
   ancestral escondia). A grade de duas colunas das páginas de cidade não
   sofre porque `minmax(0, 1fr)` já zera o mínimo. */
.lp-evt-hero > .container {
    width: 100%;
    min-width: 0;
}

.lp-evt-hero .lp-evt-faixa {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

/* Realce do título em dobra escura: o azul-claro do evento sobre o navy
   do evento mede 6,27:1. É o corte de cor da arte, sem a caixa — que
   ficava pesada no meio da frase, com a vírgula pendurada do lado de fora. */
.lp-evt-hl { color: var(--evt-blue-400); }

.lp-evt-hero .hero-grid,
.lp-evt-hero .lp-hero-solo {
    position: relative;
    z-index: 2;
}

.lp-evt-hero .hero-title { color: var(--color-white); }

.lp-evt-hero .hero-subtitle { color: rgba(255, 255, 255, 0.88); }

.lp-evt-hero .hero-tag {
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-white);
    border-color: transparent;
}

.lp-evento-logo {
    display: block;
    width: auto;
    height: 132px;
    margin-bottom: 20px;
}

.lp-hero-solo {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.lp-hero-solo .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.lp-hero-solo .hero-ctas,
.lp-hero-solo .hero-trust { justify-content: center; }

/* A data em display — a hierarquia que a arte SAVE THE DATE ensinou.
   O conteúdo continua sendo o do briefing. */
.lp-evt-data {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
    font-weight: 800;
    line-height: 1;
    color: var(--evt-blue-400);
}

.lp-evt-data-dia {
    font-size: clamp(2.6rem, 6vw, 4rem);
    letter-spacing: -0.02em;
}

.lp-evt-data-hora {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white);
}

.lp-evt-kicker {
    display: block;
    margin-bottom: 26px;
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--evt-blue-400);
}

.lp-evt-hero .hero-form-card { box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42); }
.lp-evt-hero .hero-form-header { background: var(--evt-navy-800); }

/* ------------------------------------------------------------
   SEÇÕES
   ------------------------------------------------------------ */
.lp-sec {
    position: relative;
    padding: 96px 0;
}

.lp-sec--curta { padding: 72px 0; }

.lp-sobre-texto {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.lp-sobre-texto p {
    /* G-21 · §4.13: os 820px do pai davam 98 caracteres por linha. O bloco
       é centrado, então o limite vem com margem automática — senão os dois
       parágrafos encostariam à esquerda dentro da caixa de 820px. */
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    color: var(--evt-text-muted);
    margin-bottom: 16px;
}

.lp-tom--evt-escuro .lp-sobre-texto p { color: rgba(255, 255, 255, 0.88); }

/* LOCAL */
.lp-local {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: center;
    max-width: 940px;
    margin: 0 auto;
    padding: 40px;
    border-radius: var(--radius-lg);
    background: var(--evt-vidro);
    border: 1px solid var(--evt-vidro-borda);
}

.lp-local-cidade { text-align: left; }

.lp-local-uf {
    display: block;
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-white);
}

.lp-local-evento {
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--evt-blue-400);
}

.lp-local-dados {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-local-dados li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-white);
}

.lp-local-dados li i {
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 1rem;
    color: var(--evt-blue-400);
}

.lp-local-cta {
    grid-column: 1 / -1;
    text-align: center;
}

.lp-local-nota {
    margin-top: 14px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.82);
}

/* CIDADES (hub) — card branco sobre dobra escura.
   A cor de cada linha fica AMARRADA AO CARD (0,2,0) para vencer a regra
   de tom (0,1,1), que pinta p/h3 de branco. Sem isso: branco no branco,
   1,00:1 — foi o defeito medido na rodada anterior. */
.lp-cidades-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 980px;
    margin: 0 auto;
}

.lp-cidade-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition), box-shadow var(--transition);
}

.lp-cidade-card:hover { transform: translateY(-4px); }

.lp-cidade-card .lp-cidade-nome {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--evt-navy-900);
}

.lp-cidade-card .lp-cidade-data {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--evt-blue-700);
}

.lp-cidade-card .lp-cidade-local {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--evt-text-muted);
    flex: 1;
}

.lp-cidade-card .btn { align-self: flex-start; }

/* CONVIDADOS */
.lp-convidados-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.lp-convidados-titulo {
    margin: 48px 0 24px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--evt-blue-700);
    text-align: center;
}

.lp-convidado {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: var(--radius-lg);
    background: var(--color-white);
    border: 1px solid var(--evt-border);
    box-shadow: var(--shadow-sm);
}

.lp-convidado-foto {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--evt-bg-light);
}

.lp-convidado-nome {
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--evt-navy-900);
}

.lp-convidado-cargo {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--evt-text-muted);
}

.lp-convidado--pendente .lp-convidado-nome { color: var(--evt-text-muted); }

/* PARTICIPAÇÃO ESPECIAL */
.lp-especial {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: center;
}

.lp-especial-foto {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--evt-bg-light);
    box-shadow: var(--shadow-lg);
}

.lp-especial-texto p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--evt-text-muted);
    margin-bottom: 14px;
}

/* A linha de escassez da dobra de inscrição. Fica entre o texto e o botão,
   com peso, não com cor de alerta: a restrição é informação do briefing
   ("vagas limitadas e sujeitas à confirmação"), não aviso de sistema. */
/* `.lp-evt .lp-evt-vagas` (0,2,0) e não `.lp-evt-vagas` (0,1,0): o modificador
   de tom pinta `p` com (0,1,1) e venceria por especificidade, em qualquer
   ordem de arquivo. Mesma armadilha dos cartões de cidade. */
.lp-evt .lp-evt-vagas {
    margin: 20px auto 28px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--evt-blue-700);
}

/* ------------------------------------------------------------
   VÍDEO — facade (§12.2)

   Nada do YouTube carrega no load: só o poster self-hosted. O iframe
   entra no clique, por youtube-nocookie.com. Portado da LP tripcare,
   onde o padrão já foi medido.
   ------------------------------------------------------------ */
.lp-video-stage {
    max-width: 900px;
    margin: 0 auto;
}

.lp-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--evt-navy-900);
}

.lp-video-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-video-play {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 33, 56, 0.38);
    border: none;
    cursor: pointer;
    transition: background var(--transition);
}

.lp-video-play:hover,
.lp-video-play:focus-visible { background: rgba(0, 33, 56, 0.18); }

.lp-video-play span {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--evt-blue-400);
    color: var(--evt-navy-900);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45);
    transition: transform var(--transition);
}

.lp-video-play:hover span,
.lp-video-play:focus-visible span { transform: scale(1.08); }

.lp-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lp-video-legenda {
    margin-top: 18px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--evt-text-muted);
}

/* IMPRENSA */
.lp-imprensa {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px 48px;
    margin-top: 48px;
}

.lp-imprensa img {
    height: 34px;
    width: auto;
    opacity: 0.85;
}

.lp-imprensa-rotulo {
    margin-top: 40px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--evt-text-muted);
}

/* ------------------------------------------------------------
   AGRADECIMENTO
   ------------------------------------------------------------ */
.lp-nav-social {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lp-header .lp-footer-social {
    margin-top: 0;
    gap: 6px;
}

/* O header do agradecimento é o mesmo navy fixo das outras páginas. */
.lp-header .lp-footer-social a {
    width: 36px;
    height: 36px;
    font-size: 15px;
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.12);
}

.lp-header .lp-footer-social a:hover,
.lp-header .lp-footer-social a:focus-visible {
    color: var(--evt-navy-900);
    background: var(--color-white);
}

.lp-nav-social .footer-heading {
    color: var(--evt-blue-400);
    margin: 0;
    white-space: nowrap;
}

.lp-thanks {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 104px 0 56px;
    position: relative;
    overflow: hidden;
}

/* No agradecimento a faixa é MENOR e fica colada no rodapé da viewport:
   a dobra tem de caber sem rolar em 375x667 (§4.6.2, item 2), e o conteúdo
   é centrado verticalmente — a faixa ocupa a folga, não o orçamento. */
.lp-thanks .lp-evt-faixa {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.lp-thanks .lp-evt-faixa--linha { height: 76px; }

.lp-thanks-inner {
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.lp-thanks-brand { margin-bottom: 36px; }

.lp-thanks-logo {
    height: 38px;
    width: auto;
    margin: 0 auto;
}

.lp-thanks-check { margin: 0 auto 24px; }

.lp-thanks-title {
    margin-bottom: 16px;
    color: var(--evt-navy-900);
}

.lp-thanks-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--evt-text-muted);
    margin-bottom: 28px;
}

.lp-thanks-timer {
    margin-top: 22px;
    font-size: 0.8rem;
    color: var(--evt-text-muted);
}

/* ------------------------------------------------------------
   PATROCINADORES — hub, fortaleza e rio

   Cinco logos de terceiros, cada um numa tela BRANCA de 480x240 (2:1) que já
   traz o fundo e o peso óptico resolvidos pelo script da receita
   (normalizar-patrocinadores.py). O CSS não corrige logo: só dimensiona o
   cartão. A imagem preenche o cartão por inteiro — o branco da tela é o
   branco do cartão, sem emenda, e os cinco saem do mesmo tamanho.

   Não é link, então não levanta no hover: cartão que sobe promete clique.
   Cinco itens: a última linha é CENTRADA (flex-wrap + justify-content), não
   esticada nem encostada à esquerda, em 3 por linha (tablet) e em 2 (celular).
   ------------------------------------------------------------ */
/* O título é curto: com os 720px do .section-header ele quebra em duas linhas
   a 1440px e fica mais alto que a fileira de logos que ele apresenta. */
.lp-patroc-header { max-width: 960px; }

.lp-patroc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-patroc-item {
    flex: 0 0 calc((100% - 4 * 24px) / 5);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-white);
    border: 1px solid var(--evt-border);
    box-shadow: var(--shadow-sm);
}

.lp-patroc-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------
   BREAKPOINTS DA PEÇA
   ------------------------------------------------------------ */
@media (min-width: 1025px) {
    .lp-especial-foto { max-width: 380px; }
}

@media (max-width: 1024px) {
    .lp-evento-logo { height: 108px; }

    .lp-evt-faixa--mosaico { height: 250px; }

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

    .lp-local,
    .lp-especial {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .lp-local { padding: 32px; }

    .lp-especial-foto {
        max-width: 320px;
        margin: 0 auto;
    }

    .lp-imprensa { gap: 24px 32px; }

    .lp-patroc-item { flex-basis: calc((100% - 2 * 24px) / 3); }
}

@media (max-width: 640px) {
    .lp-sec { padding: 64px 0; }
    .lp-sec--curta { padding: 56px 0; }

    /* Uma fileira de ladrilho no lugar de duas: a faixa é respiro, e a
       450px de tela duas fileiras viram metade da primeira dobra. */
    .lp-evt-faixa--mosaico { height: 125px; }
    .lp-evt-faixa--linha { height: 76px; }

    .lp-evt-hero { padding-top: 104px; padding-bottom: 181px; }

    .lp-evento-logo { height: 92px; }

    .lp-cidades-grid,
    .lp-convidados-grid { grid-template-columns: 1fr; }

    .lp-local { padding: 24px; }
    .lp-cidade-card { padding: 24px; }

    .lp-cidade-card .btn {
        align-self: stretch;
        text-align: center;
    }

    .lp-imprensa img { height: 26px; }

    .lp-patroc { gap: 16px; }
    .lp-patroc-item { flex-basis: calc((100% - 16px) / 2); }

    .lp-thanks { padding: 88px 0 40px; }
    .lp-video-play span { width: 64px; height: 64px; font-size: 1.2rem; }
}

/* ============================================================
   QUIZ — cmorefuture/quiz (Executive Check-up)
   Todo seletor leva `.lp-evt`: sem ele sobra a paleta-mãe (§13.9), e o
   `html body button:hover` do reset zera o fundo de um botão que só tem
   (0,1,0). Estado de alternativa é o próprio aria-checked.
   ============================================================ */
.lp-quiz-sec { scroll-margin-top: 72px; }

.lp-quiz [hidden] { display: none !important; }

.lp-hero-solo > .lp-evento-logo {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 28px;
}

.lp-quiz-regras {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 560px;
    margin: 40px auto 0;
}

.lp-quiz-regras li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--evt-navy-900);
}

.lp-quiz-regras li i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--evt-bg-light);
    color: var(--evt-blue-700);
    font-size: 1.1rem;
}

.lp-evt .lp-quiz-escala-titulo {
    margin: 64px 0 28px;
    text-align: center;
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}

.lp-quiz-escala {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto;
}

.lp-quiz-escala-card {
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    background: var(--evt-bg-light);
    border: 1px solid var(--evt-border);
}

.lp-quiz-escala-nota {
    display: block;
    margin-bottom: 14px;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--evt-blue-700);
}

.lp-evt .lp-quiz-escala-card .lp-quiz-escala-nome {
    margin-bottom: 10px;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: var(--evt-navy-900);
}

.lp-evt .lp-quiz-escala-card .lp-quiz-escala-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--evt-text-muted);
}

.lp-quiz {
    position: relative;
    scroll-margin-top: 88px;
    max-width: 760px;
    margin: 0 auto;
    padding: 32px;
    border-radius: var(--radius-lg);
    background: var(--color-white);
    border: 1px solid var(--evt-border);
    box-shadow: var(--shadow-lg);
}

.lp-quiz-topo { margin-bottom: 28px; }

.lp-evt .lp-quiz-progresso {
    margin-bottom: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--evt-blue-700);
}

.lp-quiz-segmentos {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
}

.lp-quiz-seg {
    height: 6px;
    border-radius: 6px;
    background: var(--evt-border);
}

.lp-quiz-seg--feito { background: var(--evt-blue-700); }

.lp-quiz-dimensao {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 15px;
    border-radius: 100px;
    background: var(--evt-navy-900);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lp-evt .lp-quiz-pergunta {
    margin-bottom: 24px;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
    color: var(--evt-navy-900);
}

.lp-quiz-opcoes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp-evt .lp-quiz-op {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--evt-border);
    border-radius: var(--radius);
    background: var(--color-white);
    color: var(--evt-navy-900);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.lp-evt .lp-quiz-op:hover {
    border-color: var(--evt-blue-700);
    background: var(--evt-bg-light);
    color: var(--evt-navy-900);
}

.lp-evt .lp-quiz-op:focus-visible {
    outline: 3px solid var(--evt-navy-900);
    outline-offset: 2px;
}

.lp-evt .lp-quiz-op[aria-checked="true"] {
    border-color: var(--evt-blue-700);
    background: var(--evt-bg-light);
    font-weight: 600;
}

.lp-quiz-op-nota {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--evt-bg-light);
    color: var(--evt-blue-700);
    font-size: 0.95rem;
    font-weight: 800;
}

.lp-evt .lp-quiz-op:hover .lp-quiz-op-nota { background: var(--color-white); }

.lp-evt .lp-quiz-op[aria-checked="true"] .lp-quiz-op-nota {
    background: var(--evt-blue-700);
    color: var(--color-white);
}

.lp-quiz-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
}

.lp-quiz-nav .btn { min-width: 140px; }

.lp-quiz-nav .lp-quiz-proxima { margin-left: auto; }

.lp-evt .lp-quiz-nav .btn[disabled] {
    cursor: not-allowed;
    background: var(--evt-border);
    border-color: var(--evt-border);
    color: var(--evt-navy-900);
    transform: none;
    box-shadow: none;
}

.lp-quiz-resultado { text-align: center; }

.lp-evt .lp-quiz-res-rotulo {
    margin-bottom: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--evt-blue-700);
}

.lp-evt .lp-quiz-nota {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    line-height: 1;
}

.lp-quiz-nota strong {
    font-size: clamp(4rem, 12vw, 6rem);
    font-weight: 800;
    color: var(--evt-blue-700);
}

.lp-quiz-nota span {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--evt-text-muted);
}

.lp-evt .lp-quiz-res-intro {
    max-width: 40em;
    margin: 0 auto 28px;
    font-size: 1rem;
    line-height: 1.7;
}

.lp-quiz-regua {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    max-width: 520px;
    margin: 0 auto 28px;
}

.lp-quiz-regua-item {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    color: var(--evt-text-muted);
}

.lp-quiz-regua-item::before {
    content: '';
    display: block;
    height: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: var(--evt-border);
}

.lp-quiz-regua-item--ativo {
    font-weight: 800;
    color: var(--evt-navy-900);
}

.lp-quiz-regua-item--ativo::before { background: var(--evt-blue-700); }

.lp-evt .lp-quiz-res-titulo {
    margin-bottom: 14px;
    font-size: clamp(1.5rem, 3.6vw, 2.25rem);
    color: var(--evt-navy-900);
}

.lp-evt .lp-quiz-res-desc,
.lp-evt .lp-quiz-res-proximo {
    max-width: 40em;
    margin: 0 auto 14px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--evt-text-muted);
}

.lp-evt .lp-quiz-res-proximo em {
    font-weight: 600;
    color: var(--evt-navy-900);
}

/* O resultado leva ao consultor. UM bloco, depois da faixa, porque o texto é igual
   para as cinco e se lê uma vez (G-05). Mesma divisória do bloco de download que
   ele substitui, mesma medida de linha do texto de cima (G-21). */
.lp-quiz-consultor {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--evt-border);
}

.lp-evt .lp-quiz-consultor-titulo {
    margin-bottom: 10px;
    font-size: clamp(1.25rem, 3vw, 1.625rem);
    color: var(--evt-navy-900);
}

.lp-evt .lp-quiz-consultor-texto {
    max-width: 40em;
    margin: 0 auto 24px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--evt-text-muted);
}

.lp-quiz-refazer { margin-top: 16px; }

@media (min-width: 1025px) {
    .lp-quiz { padding: 48px; }

    .lp-quiz-regras {
        flex-direction: row;
        justify-content: center;
        gap: 40px;
        max-width: 980px;
    }

    .lp-quiz-regras li {
        flex: 1 1 0;
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 1024px) {
    .lp-quiz-escala { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .lp-quiz-escala { grid-template-columns: 1fr; }

    .lp-quiz { padding: 24px 20px; }

    .lp-quiz-nav .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .lp-evt .lp-quiz-op {
        gap: 12px;
        padding: 12px 14px;
    }

    .lp-evt .lp-quiz-escala-titulo { margin-top: 48px; }
}