/* ============================================================================
   WhatsApp Atende — sistema de design
   ----------------------------------------------------------------------------
   A decisão que corta tudo: quem compra isto está entregando o PRÓPRIO NÚMERO
   de WhatsApp a um robô. O sentimento a produzir é confiança, não empolgação.
   Por isso: verde sóbrio (não o neon da categoria), muito espaço em branco,
   tipografia grande e calma, zero gradiente gritante, zero contador falso de
   "1.243 empresas". Quem exagera aqui perde exatamente o cliente cauteloso que
   é o nosso.

   Como usar: só tokens. Nenhuma cor, tamanho ou sombra literal fora deste
   arquivo — é o que mantém claro e escuro coerentes sem revisar tela por tela.
   ========================================================================= */

/* ── 1. Cor ────────────────────────────────────────────────────────────────
   O verde é mais fundo e menos saturado que o #25D366 do WhatsApp: fica na
   mesma família (o cliente reconhece a categoria em 200ms) sem imitar marca de
   terceiro. A escala vai de 50 a 900 para haver contraste suficiente nos dois
   temas sem inventar cor no meio do caminho.                                */
:root {
    --verde-50:  #ecfdf5;
    --verde-100: #d1fae5;
    --verde-200: #a7f3d0;
    --verde-300: #6ee7b7;
    --verde-400: #34d399;
    --verde-500: #10b981;
    --verde-600: #059669;
    --verde-700: #047857;
    --verde-800: #065f46;
    --verde-900: #064e3b;

    /* Neutros levemente esverdeados: um cinza puro ao lado de verde parece
       sujo. O desvio é mínimo — não se percebe isolado, só no conjunto. */
    --cinza-0:   #ffffff;
    --cinza-25:  #fbfdfc;
    --cinza-50:  #f6f8f7;
    --cinza-100: #ebefed;
    --cinza-200: #dde3e0;
    --cinza-300: #c2ccc7;
    --cinza-400: #93a29b;
    --cinza-500: #6b7a73;
    --cinza-600: #4d5a54;
    --cinza-700: #3a443f;
    --cinza-800: #232b27;
    --cinza-900: #141917;
    --cinza-950: #0b0f0d;

    --ambar-500: #f59e0b;
    --ambar-100: #fef3c7;
    --vermelho-500: #e5484d;
    --vermelho-100: #ffe5e5;

    /* ── papéis semânticos: é ISTO que as telas usam ── */
    --fundo:          var(--cinza-0);
    --fundo-suave:    var(--cinza-50);
    --fundo-elevado:  var(--cinza-0);
    --fundo-inverso:  var(--cinza-900);

    --tinta:          var(--cinza-900);
    --tinta-media:    var(--cinza-600);
    --tinta-fraca:    var(--cinza-500);
    --tinta-inversa:  var(--cinza-0);

    --borda:          var(--cinza-200);
    --borda-forte:    var(--cinza-300);
    --borda-sutil:    var(--cinza-100);

    --marca:          var(--verde-600);
    --marca-forte:    var(--verde-700);
    --marca-fraca:    var(--verde-50);
    --marca-borda:    var(--verde-200);
    --marca-tinta:    var(--verde-800);

    /* O verde quando ele é PREENCHIMENTO, e a tinta que vai em cima dele. Separados de --marca
       pelo mesmo motivo de --perigo-tinta: --marca é calibrado para ser lido SOBRE o fundo da
       página, e um verde que se lê bem sobre branco não aguenta texto branco em cima.
       Medido: verde-600 + branco = 3.77:1 (reprova). verde-700 + branco = 5.48:1 (passa).
       No escuro o verde clareia, então a tinta inverte: fundo escuro sobre verde claro = 10.04:1. */
    --marca-cheia:       var(--verde-700);
    --marca-cheia-forte: var(--verde-800);
    --marca-sobre:       #ffffff;

    --alerta:         #b45309;
    --alerta-fundo:   #fffbeb;
    --alerta-borda:   #fde68a;
    --perigo:         #c73a3f;
    --perigo-fundo:   #fff5f5;
    --perigo-borda:   #fecaca;
    /* A tinta que vai SOBRE o vermelho quando ele é fundo de botão. Separada de --perigo porque
       no escuro o vermelho clareia (vira cor de texto) e branco sobre ele fica ilegível. */
    --perigo-tinta:   #ffffff;

    --logo-de:  var(--verde-500);
    --logo-ate: var(--verde-700);

    /* Foco visível, sempre. Acessibilidade não é opcional e some primeiro
       quando alguém mexe no CSS com pressa — por isso é token. */
    --foco: var(--verde-600);
}

/* Escuro é ESCOLHIDO, não invertido: os papéis trocam de degrau na escala, a
   marca clareia (verde 600 sobre preto some) e as bordas ficam mais próximas
   do fundo, porque no escuro a borda grita mais. */
@media (prefers-color-scheme: dark) {
    :root {
        --fundo:         var(--cinza-950);
        --fundo-suave:   var(--cinza-900);
        --fundo-elevado: var(--cinza-800);
        --fundo-inverso: var(--cinza-0);

        --tinta:         #f2f5f3;
        --tinta-media:   var(--cinza-300);
        --tinta-fraca:   var(--cinza-400);
        --tinta-inversa: var(--cinza-900);

        --borda:         #2c3531;
        --borda-forte:   #3d4a44;
        --borda-sutil:   #1c2320;

        --marca:         var(--verde-400);
        --marca-forte:   var(--verde-300);
        --marca-fraca:   #0d2b20;
        --marca-borda:   #17513a;
        --marca-tinta:   var(--verde-300);

        --marca-cheia:       var(--verde-400);
        --marca-cheia-forte: var(--verde-300);
        --marca-sobre:       var(--cinza-950);

        --alerta:        #fbbf24;
        --alerta-fundo:  #251d0a;
        --alerta-borda:  #573f0c;
        --perigo:        #ff8b8b;
        --perigo-fundo:  #2a1416;
        --perigo-borda:  #6b2122;
        /* Tinta escura sobre o vermelho claro: é o que mantém o contraste no tema escuro. */
        --perigo-tinta:  var(--cinza-950);

        --logo-de:  var(--verde-400);
        --logo-ate: var(--verde-600);
        --foco:     var(--verde-400);
    }
}

/* ── 2. Tipografia ─────────────────────────────────────────────────────────
   Plus Jakarta Sans: geométrica o bastante para parecer moderna, humanista o
   bastante para não parecer fria — e com acentuação boa em português, que é
   onde muita fonte da moda falha (o til e o ã ficam apertados).
   Uma família só, com pesos variáveis: uma fonte a menos para carregar.

   Escala em rem com passo ~1.25 (quarta maior). Os títulos usam clamp() para
   não precisarem de media query — o tamanho acompanha a largura sozinho.      */
:root {
    --fonte: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    --t-xs:   0.75rem;    /* 12 — etiquetas, legendas */
    --t-sm:   0.875rem;   /* 14 — auxiliar, ajuda */
    --t-base: 1rem;       /* 16 — corpo */
    --t-md:   1.0625rem;  /* 17 — corpo de leitura longa */
    --t-lg:   1.25rem;    /* 20 — destaque */
    --t-xl:   1.5rem;     /* 24 — título de seção pequeno */
    --t-2xl:  clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    --t-3xl:  clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
    --t-4xl:  clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);

    --peso-normal: 400;
    --peso-medio:  500;
    --peso-semi:   600;
    --peso-forte:  700;
    --peso-extra:  800;

    --linha-apertada: 1.08;
    --linha-titulo:   1.18;
    --linha-normal:   1.55;
    --linha-solta:    1.7;

    /* Título grande com tracking negativo é o que separa "bonito" de "padrão".
       Abaixo de ~24px o negativo atrapalha a leitura, então só os grandes. */
    --letra-titulo: -0.03em;
    --letra-normal: 0;
    --letra-larga:  0.06em;
}

/* ── 3. Espaço ─────────────────────────────────────────────────────────────
   Grade de 4px. Todo espaçamento sai daqui; nada de "margin: 13px". */
:root {
    --e-1:  0.25rem;  --e-2:  0.5rem;   --e-3:  0.75rem;  --e-4:  1rem;
    --e-5:  1.25rem;  --e-6:  1.5rem;   --e-8:  2rem;     --e-10: 2.5rem;
    --e-12: 3rem;     --e-16: 4rem;     --e-20: 5rem;     --e-24: 6rem;
    --e-32: 8rem;

    /* Respiro vertical entre seções, encolhendo no celular sem media query. */
    --secao: clamp(var(--e-16), 10vw, var(--e-32));

    --largura-texto: 42rem;   /* ~70 caracteres: o limite do conforto de leitura */
    --largura-pagina: 68rem;
    --gutter: clamp(var(--e-5), 5vw, var(--e-10));
}

/* ── 4. Forma, sombra e movimento ──────────────────────────────────────────
   Sombras em verde-escuro translúcido, não preto: preto puro sobre fundo
   esverdeado deixa a borda acinzentada e "suja". Duas camadas em cada uma —
   uma curta que define a borda, uma longa que dá a altura.                   */
:root {
    --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-2xl: 28px;
    --r-pill: 999px;

    --sombra-1: 0 1px 2px rgba(6, 78, 59, .06), 0 1px 3px rgba(6, 78, 59, .05);
    --sombra-2: 0 2px 4px rgba(6, 78, 59, .05), 0 4px 12px rgba(6, 78, 59, .07);
    --sombra-3: 0 4px 8px rgba(6, 78, 59, .06), 0 12px 32px rgba(6, 78, 59, .10);
    --sombra-marca: 0 2px 6px rgba(5, 150, 105, .22), 0 8px 24px rgba(5, 150, 105, .20);

    --rapido: 120ms;
    --medio:  220ms;
    --lento:  420ms;
    /* Saída suave: começa rápido e desacelera. É o que faz a interface parecer
       responder em vez de "tocar uma animação". */
    --curva: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --sombra-1: 0 1px 2px rgba(0,0,0,.5);
        --sombra-2: 0 2px 4px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.4);
        --sombra-3: 0 4px 10px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45);
        --sombra-marca: 0 4px 16px rgba(16, 185, 129, .18);
    }
}

/* ── 5. Base ───────────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; }

/* `[hidden]` tem de VENCER, sempre.
   O `display: none` do atributo `hidden` vem da folha do NAVEGADOR, e qualquer regra de autor com
   `display` o atropela — foi assim que o botão "Cancelar" do diálogo aparecia vazio mesmo com
   `hidden = true` (visto em 2026-09-22: hidden=true, display=flex, 49px de largura). Como todo
   componente daqui declara `display`, a única forma de o atributo continuar significando o que
   promete é esta linha. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Quem pediu menos movimento recebe menos movimento — incluindo o scroll. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        /* O ATRASO também vai a zero — e isto não é detalhe. Como `ds-surge` usa `both`, o
           elemento fica em opacity:0 durante o delay: zerar só a duração deixaria quem pediu
           menos movimento esperando segundos com o conteúdo invisível. Conteúdo escondido atrás
           de atraso é defeito, não enfeite. */
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: var(--fonte);
    font-size: var(--t-base);
    line-height: var(--linha-normal);
    font-weight: var(--peso-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: var(--linha-titulo);
    font-weight: var(--peso-extra);
    letter-spacing: var(--letra-titulo);
    color: var(--tinta);
    /* Evita a última palavra sozinha numa linha — detalhe pequeno que separa
       uma página caprichada de uma padrão. */
    text-wrap: balance;
}
h1 { font-size: var(--t-4xl); line-height: var(--linha-apertada); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-lg); font-weight: var(--peso-forte); letter-spacing: -0.01em; }

p { margin: 0; text-wrap: pretty; }

a { color: var(--marca-forte); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--marca); }

img, svg { max-width: 100%; display: block; }

:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}
/* Sem anel no clique de mouse, com anel no teclado: o :focus-visible já faz
   isso, mas alguns navegadores antigos precisam do reset explícito. */
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--marca-fraca); color: var(--marca-tinta); }

/* ── 6. Primitivos de layout ───────────────────────────────────────────────*/
.ds-pagina { max-width: var(--largura-pagina); margin-inline: auto; padding-inline: var(--gutter); }
.ds-texto  { max-width: var(--largura-texto); }
.ds-secao  { padding-block: var(--secao); }
.ds-centro { text-align: center; margin-inline: auto; }
.ds-pilha  { display: flex; flex-direction: column; gap: var(--e-4); }
.ds-linha  { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }

/* Só para leitor de tela: usado nos rótulos que o olho dispensa e o leitor não. */
.ds-oculto-visual {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.oculto { display: none !important; }

/* ── 7. Botões ─────────────────────────────────────────────────────────────
   Altura mínima 44px: é o alvo de toque confortável, e a maioria do nosso
   público chega pelo celular. */
.ds-botao {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    min-height: 44px; padding: var(--e-3) var(--e-6);
    border: 1px solid transparent; border-radius: var(--r-pill);
    font-family: inherit; font-size: var(--t-base); font-weight: var(--peso-semi);
    line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background var(--rapido) var(--curva),
                box-shadow var(--medio) var(--curva),
                transform var(--rapido) var(--curva),
                border-color var(--rapido) var(--curva);
}
.ds-botao:active { transform: translateY(1px); }
.ds-botao:disabled, .ds-botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.ds-botao--primario {
    background: var(--marca-cheia); color: var(--marca-sobre); box-shadow: var(--sombra-marca);
}
.ds-botao--primario:hover { background: var(--marca-cheia-forte); color: var(--marca-sobre); }

.ds-botao--secundario {
    background: var(--fundo-elevado); color: var(--tinta);
    border-color: var(--borda-forte); box-shadow: var(--sombra-1);
}
.ds-botao--secundario:hover { background: var(--fundo-suave); border-color: var(--tinta-fraca); color: var(--tinta); }

.ds-botao--fantasma { background: transparent; color: var(--tinta-media); padding-inline: var(--e-3); }
.ds-botao--fantasma:hover { background: var(--fundo-suave); color: var(--tinta); }

.ds-botao--perigo { background: var(--perigo); color: var(--perigo-tinta); }
.ds-botao--perigo:hover { background: color-mix(in srgb, var(--perigo) 88%, var(--tinta)); color: var(--perigo-tinta); }

.ds-botao--grande { min-height: 52px; padding: var(--e-4) var(--e-8); font-size: var(--t-md); }
.ds-botao--largo  { width: 100%; }

/* ── 8. Superfícies ────────────────────────────────────────────────────────*/
.ds-cartao {
    background: var(--fundo-elevado);
    border: 1px solid var(--borda);
    border-radius: var(--r-xl);
    padding: var(--e-6);
}
.ds-cartao--elevado { box-shadow: var(--sombra-2); border-color: var(--borda-sutil); }
.ds-cartao--marca   { background: var(--marca-fraca); border-color: var(--marca-borda); }

/* ── 9. Etiquetas e avisos ─────────────────────────────────────────────────*/
.ds-etiqueta {
    display: inline-flex; align-items: center; gap: var(--e-2);
    padding: var(--e-1) var(--e-3); border-radius: var(--r-pill);
    font-size: var(--t-xs); font-weight: var(--peso-semi); line-height: 1.6;
    background: var(--fundo-suave); color: var(--tinta-media); border: 1px solid var(--borda);
}
.ds-etiqueta--marca  { background: var(--marca-fraca); color: var(--marca-tinta); border-color: var(--marca-borda); }
.ds-etiqueta--alerta { background: var(--alerta-fundo); color: var(--alerta); border-color: var(--alerta-borda); }

.ds-aviso {
    padding: var(--e-4) var(--e-5); border-radius: var(--r-lg);
    border: 1px solid; font-size: var(--t-sm); line-height: var(--linha-normal);
}
.ds-aviso--ok     { background: var(--marca-fraca);  border-color: var(--marca-borda);  color: var(--marca-tinta); }
.ds-aviso--alerta { background: var(--alerta-fundo); border-color: var(--alerta-borda); color: var(--alerta); }
.ds-aviso--erro   { background: var(--perigo-fundo); border-color: var(--perigo-borda); color: var(--perigo); }

/* ── 10. Campos ────────────────────────────────────────────────────────────*/
.ds-rotulo {
    display: block; font-size: var(--t-sm); font-weight: var(--peso-semi);
    margin-bottom: var(--e-2); color: var(--tinta);
}
.ds-campo {
    width: 100%; min-height: 48px; padding: var(--e-3) var(--e-4);
    background: var(--fundo); color: var(--tinta);
    border: 1px solid var(--borda-forte); border-radius: var(--r-md);
    font-family: inherit; font-size: var(--t-base); line-height: var(--linha-normal);
    transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.ds-campo::placeholder { color: var(--tinta-fraca); }
.ds-campo:focus {
    outline: none; border-color: var(--marca);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 20%, transparent);
}
.ds-campo[aria-invalid="true"] { border-color: var(--perigo); }
.ds-ajuda { font-size: var(--t-sm); color: var(--tinta-fraca); margin-top: var(--e-2); }

/* ── 11. Marca ─────────────────────────────────────────────────────────────*/
.ds-marca {
    display: inline-flex; align-items: center; gap: var(--e-3);
    text-decoration: none; color: var(--tinta); font-weight: var(--peso-forte);
    font-size: var(--t-base); letter-spacing: -0.02em;
}
.ds-marca__simbolo { width: 30px; height: 30px; flex: none; }
.ds-marca__nome { font-weight: var(--peso-medio); color: var(--tinta-media); }
.ds-marca__nome strong { font-weight: var(--peso-extra); color: var(--tinta); }

/* ── 12. Diálogo ───────────────────────────────────────────────────────────
   O <dialog> nativo. O `::backdrop` é o fundo que o próprio elemento desenha —
   não há overlay de mentira aqui. */
.dlg {
    border: none; padding: 0; background: transparent;
    max-width: min(28rem, calc(100vw - var(--e-8)));
    /* O navegador centraliza sozinho com margin:auto nos dois eixos. */
    margin: auto;
    /* `overflow: visible` no lugar do `auto` que o NAVEGADOR põe em todo <dialog>.
       Motivo: a animação de entrada usa `translateY(10px)` no corpo, e um descendente transformado
       conta como transbordo do ancestral — com `auto`, o navegador desenhava uma barra de rolagem
       vertical que aparecia e sumia junto com a animação (medido em 2026-09-22: 1px de rolagem aos
       50ms). Quem rola, quando o conteúdo é longo, é o corpo — ver abaixo. */
    overflow: visible;
}
.dlg::backdrop {
    background: rgba(6, 20, 15, .55);
    backdrop-filter: blur(3px);
    animation: dlg-fundo var(--medio) var(--curva) both;
}
.dlg__corpo {
    background: var(--fundo-elevado); color: var(--tinta);
    border: 1px solid var(--borda); border-radius: var(--r-xl);
    padding: var(--e-6); box-shadow: var(--sombra-3);
    animation: dlg-sobe var(--medio) var(--curva) both;
    /* Texto longo rola AQUI, não no <dialog>: assim os botões nunca saem da tela. `dvh` e não `vh`
       por causa da barra do navegador no celular, que muda de altura ao rolar. */
    max-height: calc(100dvh - var(--e-10));
    overflow-y: auto;
}
.dlg__titulo { font-size: var(--t-lg); margin-bottom: var(--e-3); }
.dlg__texto { color: var(--tinta-media); font-size: var(--t-sm); line-height: var(--linha-solta); }
.dlg__acoes { display: flex; gap: var(--e-3); justify-content: flex-end; margin-top: var(--e-6); flex-wrap: wrap; }
/* No celular os botões ocupam a linha inteira: alvo grande e ordem óbvia. */
@media (max-width: 26rem) {
    .dlg__acoes { flex-direction: column-reverse; }
    .dlg__acoes .ds-botao { width: 100%; }
}
@keyframes dlg-fundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlg-sobe { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── 13. Entrada em cena ───────────────────────────────────────────────────
   Uma animação só, reaproveitada com atraso escalonado. Sutil de propósito:
   8px e 420ms passam como "a página assentou", não como "animação". */
@keyframes ds-surge {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.ds-surge { animation: ds-surge var(--lento) var(--curva) both; }
.ds-atraso-1 { animation-delay:  60ms; }
.ds-atraso-2 { animation-delay: 120ms; }
.ds-atraso-3 { animation-delay: 180ms; }
.ds-atraso-4 { animation-delay: 240ms; }
.ds-atraso-5 { animation-delay: 300ms; }