/* ==========================================================================
   Sistema AI — sistema de design do site público
   --------------------------------------------------------------------------
   Paleta herdada dos painéis do produto (petróleo #071619 + turquesa
   #2CC5B8), com tratamento editorial: o cliente que entra no sistema depois
   de visitar o site tem que reconhecer que é o mesmo lugar.

   Dois temas de verdade: a preferência do sistema operacional decide, e o
   botão do menu tem a palavra final (por isso os blocos [data-theme] vêm
   depois da media query — senão a escolha manual perderia para o SO).

   As faixas .escuro ficam petróleo NOS DOIS TEMAS. Não é esquecimento: é o
   herói e as seções de destaque mantendo a assinatura visual do produto
   mesmo para quem usa o computador no claro.
   ========================================================================== */

/* ---------- fontes (self-hosted, subconjunto latin — sem CDN) ---------- */

@font-face {
    font-family: 'Fraunces';
    src: url('../fontes/fraunces-var.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: 'Public Sans';
    src: url('../fontes/public-sans-var.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('../fontes/plex-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('../fontes/plex-mono-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

/* ---------- tokens ---------- */

:root {
    /* claro é a base; o escuro entra por override mais abaixo */
    --fundo: #EAF0EE;
    --superficie: #FFFFFF;
    --superficie-2: #F4F8F7;
    --superficie-3: #E9F1EF;
    --borda: #D7E4E1;
    --borda-forte: #C3D6D2;
    --texto: #0C2226;
    --texto-fraco: #4F6764;      /* cinza com viés esverdeado, não cinza puro */
    --acento: #0E7C7B;
    --acento-forte: #0B5F5E;
    --vital: #16B8A0;
    --ambar: #C0522F;            /* escurecido no claro: o #E4724E reprova contraste em texto */
    --ambar-cheio: #E4724E;      /* o âmbar original, só para preenchimento/ícone */
    --sobre-acento: #FFFFFF;
    --acento-tenue: rgba(14, 124, 123, .10);
    --vital-tenue: rgba(22, 184, 160, .12);
    --sombra: 0 1px 2px rgba(12, 34, 38, .06), 0 12px 32px -12px rgba(12, 34, 38, .18);
    --sombra-alta: 0 2px 4px rgba(12, 34, 38, .08), 0 32px 64px -24px rgba(12, 34, 38, .30);

    /* tipografia */
    --display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --texto-fonte: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: 'Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

    /* escala de tipo — razão ~1.25, travada para não virar improviso */
    --t-xs: .75rem;
    --t-sm: .875rem;
    --t-base: 1rem;
    --t-md: 1.125rem;
    --t-lg: 1.375rem;
    --t-xl: 1.75rem;
    --t-2xl: 2.25rem;
    --t-3xl: 3rem;
    --t-4xl: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);

    /* ritmo */
    --largura: 1200px;
    --largura-texto: 65ch;
    --gap: 1.5rem;
    --secao-y: clamp(4rem, 8vw, 7rem);
    --raio: 14px;
    --raio-sm: 9px;
    --regua: 128px;              /* coluna da régua de horários */
}

@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #071619;
        --superficie: #0E2529;
        --superficie-2: #122D31;
        --superficie-3: #16363A;
        --borda: #1E3A3D;
        --borda-forte: #2A4B4E;
        --texto: #E7F1EF;
        --texto-fraco: #8AA6A2;
        --acento: #2CC5B8;
        --acento-forte: #59D8CB;
        --vital: #34E0BE;
        --ambar: #F4845F;
        --ambar-cheio: #F4845F;
        --sobre-acento: #052420;
        --acento-tenue: rgba(44, 197, 184, .12);
        --vital-tenue: rgba(52, 224, 190, .13);
        --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
        --sombra-alta: 0 2px 4px rgba(0, 0, 0, .5), 0 32px 64px -24px rgba(0, 0, 0, .75);
    }
}

/* escolha manual ganha da preferência do SO — nos dois sentidos */
:root[data-theme="dark"] {
    --fundo: #071619;
    --superficie: #0E2529;
    --superficie-2: #122D31;
    --superficie-3: #16363A;
    --borda: #1E3A3D;
    --borda-forte: #2A4B4E;
    --texto: #E7F1EF;
    --texto-fraco: #8AA6A2;
    --acento: #2CC5B8;
    --acento-forte: #59D8CB;
    --vital: #34E0BE;
    --ambar: #F4845F;
    --ambar-cheio: #F4845F;
    --sobre-acento: #052420;
    --acento-tenue: rgba(44, 197, 184, .12);
    --vital-tenue: rgba(52, 224, 190, .13);
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
    --sombra-alta: 0 2px 4px rgba(0, 0, 0, .5), 0 32px 64px -24px rgba(0, 0, 0, .75);
}
:root[data-theme="light"] {
    --fundo: #EAF0EE;
    --superficie: #FFFFFF;
    --superficie-2: #F4F8F7;
    --superficie-3: #E9F1EF;
    --borda: #D7E4E1;
    --borda-forte: #C3D6D2;
    --texto: #0C2226;
    --texto-fraco: #4F6764;
    --acento: #0E7C7B;
    --acento-forte: #0B5F5E;
    --vital: #16B8A0;
    --ambar: #C0522F;
    --ambar-cheio: #E4724E;
    --sobre-acento: #FFFFFF;
    --acento-tenue: rgba(14, 124, 123, .10);
    --vital-tenue: rgba(22, 184, 160, .12);
    --sombra: 0 1px 2px rgba(12, 34, 38, .06), 0 12px 32px -12px rgba(12, 34, 38, .18);
    --sombra-alta: 0 2px 4px rgba(12, 34, 38, .08), 0 32px 64px -24px rgba(12, 34, 38, .30);
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--texto-fonte);
    font-size: var(--t-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;         /* nada de rolagem lateral por sangria de imagem */
}

h1, h2, h3 {
    font-family: var(--display);
    font-optical-sizing: auto;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.02em;
    text-wrap: balance;
    margin: 0 0 .5em;
}
h1 { font-size: var(--t-4xl); letter-spacing: -.035em; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1em; max-width: var(--largura-texto); }
a { color: var(--acento); text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--acento-forte); }
img, video { max-width: 100%; height: auto; display: block; }
strong { font-weight: 600; color: var(--texto); }

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
    border-radius: 4px;
}

.pular {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--acento); color: var(--sobre-acento);
    padding: .75rem 1.25rem; border-radius: 0 0 var(--raio-sm) 0;
}
.pular:focus { left: 0; }

/* ---------- estrutura ---------- */

.faixa { padding: var(--secao-y) 0; position: relative; }
.envelope {
    width: min(100% - 2.5rem, var(--largura));
    margin-inline: auto;
}

/* faixa petróleo — mantém a assinatura do produto nos dois temas.
   O tom é #0B2126, um degrau ACIMA do fundo escuro da página (#071619), e
   não igual a ele: no tema claro a diferença é gritante de qualquer jeito,
   mas no escuro duas faixas do mesmo tom fariam a alternância desaparecer —
   a página viraria um bloco só. As superfícies internas sobem junto para os
   cartões continuarem se destacando da faixa. */
.escuro {
    --fundo: #0B2126;
    --superficie: #123035;
    --superficie-2: #16373C;
    --superficie-3: #1B4045;
    --borda: #1E3A3D;
    --borda-forte: #2A4B4E;
    --texto: #E7F1EF;
    --texto-fraco: #8AA6A2;
    --acento: #2CC5B8;
    --acento-forte: #59D8CB;
    --vital: #34E0BE;
    --ambar: #F4845F;
    --ambar-cheio: #F4845F;
    --sobre-acento: #052420;
    --acento-tenue: rgba(44, 197, 184, .12);
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
    --sombra-alta: 0 2px 4px rgba(0, 0, 0, .5), 0 32px 64px -24px rgba(0, 0, 0, .75);
    background: var(--fundo);
    color: var(--texto);
}

/* ---------- régua de horários ----------
   O elemento estrutural da home. Cada seção principal está ancorada num
   momento real de um dia de atendimento — a régua marca a passagem do
   tempo, não decora. No celular vira uma etiqueta acima do título.        */

.secao-regua {
    display: grid;
    grid-template-columns: var(--regua) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
.regua-marca {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding-top: .35rem;
}
.regua-hora {
    font-family: var(--mono);
    font-size: var(--t-md);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--acento);
    letter-spacing: -.02em;
}
.regua-nota {
    font-size: var(--t-xs);
    line-height: 1.4;
    color: var(--texto-fraco);
    text-transform: uppercase;
    letter-spacing: .09em;
}
.regua-marca::after {
    content: "";
    width: 1px;
    flex: 1;
    min-height: 60px;
    margin-top: .35rem;
    background: linear-gradient(to bottom, var(--borda-forte), transparent);
}

@media (max-width: 860px) {
    .secao-regua { grid-template-columns: 1fr; gap: 1rem; }
    .regua-marca {
        position: static;
        flex-direction: row;
        align-items: baseline;
        gap: .75rem;
        padding: .3rem .7rem;
        border-left: 2px solid var(--acento);
        background: var(--acento-tenue);
        border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
        width: fit-content;
    }
    .regua-marca::after { display: none; }
    .regua-hora { font-size: var(--t-sm); }
}

/* ---------- textos auxiliares ---------- */

.sobrancelha {
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--acento);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.sobrancelha::before {
    content: "";
    width: 26px; height: 2px;
    background: var(--acento);
    flex: none;
}
.chamada {
    font-size: var(--t-md);
    color: var(--texto-fraco);
    max-width: 58ch;
}
.miudo { font-size: var(--t-sm); color: var(--texto-fraco); }
.numero {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ---------- botões ---------- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    font-size: var(--t-sm);
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
    white-space: nowrap;
}
.botao:hover { transform: translateY(-1px); }
.botao:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .botao { transition: none; } .botao:hover { transform: none; } }

.botao-cheio { background: var(--acento); color: var(--sobre-acento); }
.botao-cheio:hover { background: var(--acento-forte); color: var(--sobre-acento); }
.botao-vazio {
    background: transparent;
    color: var(--texto);
    border-color: var(--borda-forte);
}
.botao-vazio:hover { border-color: var(--acento); color: var(--acento); }
.botao-grande { padding: 1rem 1.75rem; font-size: var(--t-base); }
.botao svg { width: 18px; height: 18px; flex: none; }

.grupo-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

/* ---------- navegação ---------- */

.topo {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--fundo) 82%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, background-color .2s ease;
}
.topo.rolou { border-bottom-color: var(--borda); }
.topo-interno {
    width: min(100% - 2.5rem, var(--largura));
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: 72px;
}

.marca {
    display: inline-flex;
    align-items: baseline;
    gap: .38rem;
    text-decoration: none;
    color: var(--texto);
    font-size: var(--t-md);
    letter-spacing: -.02em;
    flex: none;
}
.marca:hover { color: var(--texto); }
.marca-sistema { font-weight: 600; }
.marca-ai {
    font-family: var(--display);
    font-style: italic;
    font-weight: 600;
    color: var(--acento);
}

.menu {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}
.menu a {
    padding: .5rem .8rem;
    border-radius: var(--raio-sm);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--texto-fraco);
    text-decoration: none;
}
.menu a:hover { color: var(--texto); background: var(--superficie-2); }
.menu a[aria-current="page"] { color: var(--texto); }

.acoes-topo { display: flex; align-items: center; gap: .5rem; flex: none; }

.tema-botao {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--borda);
    border-radius: 50%;
    background: transparent;
    color: var(--texto-fraco);
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}
.tema-botao:hover { color: var(--acento); border-color: var(--acento); }
.tema-botao svg { width: 17px; height: 17px; }
.tema-botao .icone-claro { display: none; }
:root[data-theme="dark"] .tema-botao .icone-claro { display: block; }
:root[data-theme="dark"] .tema-botao .icone-escuro { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tema-botao .icone-claro { display: block; }
    :root:not([data-theme="light"]) .tema-botao .icone-escuro { display: none; }
}

.menu-hamburguer { display: none; }

@media (max-width: 900px) {
    .menu {
        position: fixed;
        inset: 72px 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .75rem 1.25rem 1.5rem;
        background: var(--fundo);
        border-bottom: 1px solid var(--borda);
        box-shadow: var(--sombra);
        display: none;
    }
    .menu.aberto { display: flex; }
    .menu a { padding: .85rem .5rem; font-size: var(--t-base); border-bottom: 1px solid var(--borda); }
    .menu a:last-child { border-bottom: 0; }
    .menu-hamburguer {
        display: grid;
        place-items: center;
        width: 38px; height: 38px;
        margin-left: auto;
        border: 1px solid var(--borda);
        border-radius: var(--raio-sm);
        background: transparent;
        color: var(--texto);
        cursor: pointer;
    }
    .menu-hamburguer svg { width: 20px; height: 20px; }
    .acoes-topo .botao { display: none; }
}

/* ---------- herói ---------- */

.heroi { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.heroi-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.heroi h1 { margin-bottom: 1.25rem; }
.heroi h1 em {
    font-style: italic;
    color: var(--acento);
    font-variation-settings: "opsz" 120;
}
.heroi .chamada { font-size: var(--t-lg); line-height: 1.5; color: var(--texto-fraco); }

/* a imagem sangra na borda direita — proposital, dá continuidade ao painel */
.heroi-imagem {
    position: relative;
    margin-right: calc(-1 * max(1.25rem, (100vw - var(--largura)) / 2));
}
.heroi-imagem img, .heroi-imagem .placa {
    width: 100%;
    border-radius: var(--raio) 0 0 var(--raio);
    border: 1px solid var(--borda-forte);
    border-right: 0;
    box-shadow: var(--sombra-alta);
}
/* Print de painel encolhido a 50% vira textura: não dá para ler nem o
   horário da consulta. Passando de 100% para 145% da coluna, a parte que
   fica visível (agenda + assistente) volta a um tamanho legível, e o que
   sobra sangra para fora da tela — que é o efeito pretendido. O overflow
   hidden da faixa impede que isso vire rolagem lateral. */
@media (min-width: 941px) {
    .heroi-imagem img { width: 145%; max-width: none; }
}
.heroi-selo {
    position: absolute;
    bottom: 1.25rem;
    left: -1.25rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1rem;
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: 999px;
    box-shadow: var(--sombra);
    font-size: var(--t-xs);
    font-weight: 600;
}
.pulso {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--vital);
    box-shadow: 0 0 0 0 var(--vital);
    animation: pulsar 2.4s infinite;
    flex: none;
}
@keyframes pulsar {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vital) 55%, transparent); }
    70%  { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }

@media (max-width: 940px) {
    .heroi-grade { grid-template-columns: 1fr; }
    .heroi-imagem { margin-right: calc(-1 * 1.25rem); margin-top: 1rem; }
    .heroi-selo { left: 0; }
}

/* ---------- portas de entrada ---------- */

.portas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.porta {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.4rem 1.4rem 1.25rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    text-decoration: none;
    color: var(--texto);
    position: relative;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.porta:hover {
    border-color: var(--acento);
    transform: translateY(-2px);
    box-shadow: var(--sombra);
    color: var(--texto);
}
@media (prefers-reduced-motion: reduce) { .porta:hover { transform: none; } }
.porta-nome {
    font-weight: 600;
    font-size: var(--t-md);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.porta-nome svg { width: 18px; height: 18px; color: var(--acento); flex: none; }
.porta-quem { font-size: var(--t-sm); color: var(--texto-fraco); }
.porta-ir {
    margin-top: .6rem;
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--acento);
}
.porta-aviso {
    margin-top: 1rem;
    padding: .9rem 1.1rem;
    border-left: 2px solid var(--ambar);
    background: color-mix(in srgb, var(--ambar-cheio) 8%, transparent);
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
    font-size: var(--t-sm);
    color: var(--texto-fraco);
}
.porta-aviso strong { color: var(--texto); }

/* ---------- cartões ---------- */

.grade {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
/* Quatro cartões dentro da coluna da régua não cabem numa linha (sobra
   ~1015px, não 1200px) e o quarto cai sozinho. Em 2×2 eles ficam com peso
   igual e o texto respira. */
@media (min-width: 720px) {
    .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cartao {
    padding: 1.5rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.cartao h3 { margin-bottom: .4rem; }
.cartao p { font-size: var(--t-sm); color: var(--texto-fraco); margin-bottom: 0; }
.cartao-icone {
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--acento-tenue);
    color: var(--acento);
    margin-bottom: 1rem;
}
.cartao-icone svg { width: 20px; height: 20px; }

/* lista de atributos com marcador próprio */
.lista-checa {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    gap: .7rem;
    max-width: 68ch;   /* linha de leitura; sem isto a lista ocupa 1000px de largura */
}
.lista-checa li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: .75rem;
    align-items: start;
    font-size: var(--t-sm);
    color: var(--texto-fraco);
}
/* Máscara, e não background-image com a cor dentro do SVG: uma data URI não
   enxerga variável CSS, então a turquesa do tema escuro ia junto para o tema
   claro e ficava fraca demais sobre branco. Com mask, quem pinta é o token. */
.lista-checa li::before {
    content: "";
    width: 20px; height: 20px;
    margin-top: .16rem;
    background-color: var(--acento);
    -webkit-mask: var(--icone-checa) center / contain no-repeat;
    mask: var(--icone-checa) center / contain no-repeat;
}
:root {
    --icone-checa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='16.5 9 10.8 15 7.5 12'/%3E%3C/svg%3E");
}
.lista-checa strong { color: var(--texto); font-weight: 600; }

/* ---------- conversa de WhatsApp (elemento nativo, sem imagem) ---------- */

.conversa {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1.25rem;
    display: grid;
    gap: .6rem;
    box-shadow: var(--sombra);
    max-width: 460px;
}
.conversa-topo {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-bottom: .9rem;
    margin-bottom: .3rem;
    border-bottom: 1px solid var(--borda);
}
.conversa-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--acento-tenue);
    color: var(--acento);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: var(--t-sm);
    flex: none;
}
.conversa-quem { font-weight: 600; font-size: var(--t-sm); line-height: 1.2; }
.conversa-estado { font-size: var(--t-xs); color: var(--vital); display: flex; align-items: center; gap: .35rem; }
.balao {
    padding: .65rem .9rem;
    border-radius: 14px;
    font-size: var(--t-sm);
    line-height: 1.5;
    max-width: 84%;
    position: relative;
}
.balao-deles {
    background: var(--superficie-3);
    border-bottom-left-radius: 4px;
    justify-self: start;
}
.balao-nosso {
    background: var(--acento);
    color: var(--sobre-acento);
    border-bottom-right-radius: 4px;
    justify-self: end;
}
.balao-nosso strong { color: var(--sobre-acento); }
.balao-hora {
    display: block;
    margin-top: .3rem;
    font-family: var(--mono);
    font-size: 10px;
    opacity: .65;
    text-align: right;
}
.conversa-nota {
    margin-top: .4rem;
    padding-top: .8rem;
    border-top: 1px dashed var(--borda);
    font-size: var(--t-xs);
    color: var(--texto-fraco);
}

/* ---------- figuras / prints ---------- */

.figura { margin: 0; }
.figura img {
    width: 100%;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    background: var(--superficie-2);
}
.figura figcaption {
    margin-top: .8rem;
    font-size: var(--t-sm);
    color: var(--texto-fraco);
    display: flex;
    align-items: baseline;
    gap: .5rem;
}
.figura figcaption::before {
    content: "";
    width: 14px; height: 1px;
    background: var(--acento);
    flex: none;
    transform: translateY(-4px);
}

/* espaço reservado enquanto a mídia real não foi gerada */
.placa {
    aspect-ratio: 16 / 10;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .5rem;
    padding: 2rem;
    text-align: center;
    background:
        repeating-linear-gradient(-45deg, var(--superficie-2) 0 12px, var(--superficie-3) 12px 24px);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    color: var(--texto-fraco);
    font-size: var(--t-sm);
}
.placa svg { width: 26px; height: 26px; color: var(--acento); }

/* ---------- passos ---------- */

.passos {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    counter-reset: passo;
    margin-top: 2.5rem;
}
.passo {
    padding: 1.4rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    position: relative;
}
.passo::before {
    counter-increment: passo;
    content: counter(passo, decimal-leading-zero);
    display: block;
    font-family: var(--mono);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--acento);
    margin-bottom: .7rem;
}
.passo h3 { font-size: var(--t-base); font-family: var(--texto-fonte); font-weight: 600; }
.passo p { font-size: var(--t-sm); color: var(--texto-fraco); margin: 0; }

/* ---------- planos ---------- */

.planos {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    margin-top: 3rem;
    /* stretch, e não start: sem cartões de mesma altura, o `flex:1` da lista
       não tem contra o que empurrar e os botões "Quero este" ficam cada um
       numa altura, o que faz a linha inteira parecer torta. */
    align-items: stretch;
}
/* Os quatro planos da clínica precisam caber numa linha só: com auto-fit,
   4 × 290px + gaps estoura os 1200px do envelope e o quarto cartão cai
   sozinho numa segunda linha, deixando um buraco de três colunas. */
@media (min-width: 1060px) {
    .planos-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.plano {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    position: relative;
}
.plano-destaque {
    border-color: var(--acento);
    box-shadow: 0 0 0 1px var(--acento), var(--sombra-alta);
}
.plano-etiqueta {
    position: absolute;
    top: -11px;
    left: 1.75rem;
    padding: .2rem .7rem;
    background: var(--acento);
    color: var(--sobre-acento);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.plano h3 { font-family: var(--texto-fonte); font-size: var(--t-md); margin-bottom: .25rem; }
.plano-para { font-size: var(--t-sm); color: var(--texto-fraco); min-height: 3em; }
.plano-preco {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    margin: 1.25rem 0 .25rem;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}
.plano-moeda { font-size: var(--t-base); font-weight: 600; color: var(--texto-fraco); }
.plano-valor { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.04em; }
.plano-por { font-size: var(--t-sm); color: var(--texto-fraco); }

/* "Sem mensalidade" e "A combinar" não são número: em monoespaçada e no
   corpo de um preço, viravam letreiro. Vão na fonte de display, menores. */
.plano-preco-texto { font-family: var(--display); }
.plano-preco-texto .plano-valor {
    font-size: var(--t-xl);
    letter-spacing: -.02em;
    line-height: 1.15;
}
.plano-obs { font-size: var(--t-xs); color: var(--texto-fraco); margin: 0 0 1.25rem; }
.plano .lista-checa { margin-top: 0; flex: 1; }
.plano .botao { margin-top: 1.5rem; width: 100%; }

.grupo-titulo {
    margin-top: 3.5rem;
    font-size: var(--t-xl);
}
.grupo-titulo + .planos { margin-top: 1.25rem; }

/* tabela de consumo */
.tabela-consumo {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.25rem;
    font-size: var(--t-sm);
}
.rolagem-lateral { overflow-x: auto; }
.tabela-consumo th, .tabela-consumo td {
    padding: .7rem .9rem;
    text-align: left;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}
.tabela-consumo th {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--texto-fraco);
    font-weight: 600;
}
.tabela-consumo td:last-child, .tabela-consumo th:last-child { text-align: right; }
.tabela-consumo td:last-child {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ---------- vídeos ---------- */

/* Dois por linha, não três: a 380px de largura o painel gravado fica em 38%
   do tamanho real e não dá para ler nada. Em dois, sobe para ~59%. */
.videos {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    margin-top: 2.5rem;
}
.video-cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
}
.video-cartao video, .video-cartao .placa {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--borda);
    width: 100%;
}
.video-texto { padding: 1.1rem 1.25rem 1.35rem; }
.video-texto h3 { font-family: var(--texto-fonte); font-size: var(--t-base); margin-bottom: .3rem; }
.video-texto p { font-size: var(--t-sm); color: var(--texto-fraco); margin: 0; }
.video-duracao {
    font-family: var(--mono);
    font-size: var(--t-xs);
    color: var(--acento);
    font-weight: 600;
}

/* ---------- perguntas ---------- */

/* Título à esquerda, perguntas à direita: numa tela larga, uma coluna só de
   800px deixava metade da página vazia. */
.faq-grade {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
.faq-grade > div:first-child { position: sticky; top: 110px; }
@media (max-width: 860px) {
    .faq-grade { grid-template-columns: 1fr; }
    .faq-grade > div:first-child { position: static; }
}
.perguntas { margin-top: 0; }
.pergunta {
    border-bottom: 1px solid var(--borda);
    padding: 0;
}
.pergunta summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem .25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--t-md);
    list-style: none;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
    content: "+";
    margin-left: auto;
    font-family: var(--mono);
    font-size: var(--t-lg);
    color: var(--acento);
    flex: none;
    transition: transform .2s ease;
}
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta summary:hover { color: var(--acento); }
.pergunta-corpo { padding: 0 .25rem 1.35rem; color: var(--texto-fraco); font-size: var(--t-sm); }
.pergunta-corpo p:last-child { margin-bottom: 0; }

/* ---------- chamada final ---------- */

.chamada-final {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
}
@media (max-width: 800px) { .chamada-final { grid-template-columns: 1fr; } }

/* ---------- rodapé ---------- */

.rodape {
    padding: 3.5rem 0 2.5rem;
    border-top: 1px solid var(--borda);
    font-size: var(--t-sm);
}
.rodape-grade {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
}
.rodape h4 {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--texto-fraco);
    margin: 0 0 .9rem;
    font-weight: 600;
}
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.rodape a { color: var(--texto-fraco); text-decoration: none; }
.rodape a:hover { color: var(--acento); }
.rodape-fim {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borda);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    color: var(--texto-fraco);
    font-size: var(--t-xs);
}

/* ---------- animação de entrada (discreta, só uma vez) ---------- */

.revela {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
}
.revela.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .revela { opacity: 1; transform: none; transition: none; }
}