/* casa.css: GERADO por montar-casa-css.py. Não edite aqui; edite as fontes e rode de novo. */

/* ===== tokens.css ===== */
/* =====================================================================
   SISTEMA VISUAL DA CASA · tokens
   Extraído em 05/10/2026 do código que está no ar (letra trocada em 06/10/2026, proposta premium aprovada):
   - pratica.claudepartners.org /?v=f e /?v=h (camada "prm-f": noite do começo ao fim,
     Geist, verde só onde há ação ou número que importa, cantos de 20px, respiro grande)
   - pratica.claudepartners.org versão base (papel #F4F3EE, verde-fundo #1F6B45, rótulo mono)
   - udiia.com (ameixa, papel quente, cores de seção dos 4 sistemas, serifa itálica de destaque,
     índice mono, amarelo e ciano)
   Nenhum valor aqui foi inventado: cada um tem a origem anotada ao lado.
   Componentes usam SÓ os papéis semânticos (--fundo, --tinta, --acento...). As seções
   (.s-noite, .s-papel, .s-cor) trocam os papéis; o componente nunca sabe a cor crua.
   ===================================================================== */

/* ---- reservas com a métrica das fontes: enquanto a fonte baixa, o texto já
   ocupa o mesmo espaço e a troca não mexe nas quebras de linha ---- */
@font-face { font-family: "EB Garamond Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 98.7%; ascent-override: 102%; descent-override: 30.2%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 102.5%; ascent-override: 100%; descent-override: 26.8%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Mono Fallback"; src: local("Consolas"); size-adjust: 109.1%; ascent-override: 93.9%; descent-override: 25.2%; line-gap-override: 0%; }
/* métricas medidas em 06/10/2026 com fontTools nos arquivos do Google Fonts (latin) contra Times New Roman, Arial e Consolas */

:root {
  /* ---------------- cor crua (não usar direto em componente) ---------------- */
  /* noite: camada prm-f da /f e /h */
  --cr-noite:        #0A0C0B;
  --cr-noite-2:      #121514;
  --cr-noite-3:      #1A1E1C;
  --cr-linha-noite:  rgba(237, 239, 234, 0.10);
  --cr-tinta-noite:  #EDEFEA;
  --cr-tinta-noite-2:#A5ADA6;   /* 8,6:1 sobre #0A0C0B (era #8E978F, 6,5:1; a porteira achou o cinza apagado no celular, 06/10/2026) */

  /* papel: versão base do Claude na Prática */
  --cr-papel:        #F4F3EE;
  --cr-papel-2:      #EAE9E2;
  --cr-branco:       #FFFFFF;   /* só superfície elevada (cartão sobre papel); nunca fundo de página */
  --cr-linha-papel:  #D5D4CB;
  --cr-tinta-papel:  #121513;
  --cr-tinta-papel-2:#424944;   /* 8,7:1 sobre #F4F3EE (era #4F5652, 6,8:1) */

  /* UDIIA */
  --cr-ameixa:       #160714;
  --cr-ameixa-funda: #0D030D;
  --cr-papel-quente: #F4F0E9;
  --cr-papel-quente-2:#E7DFD2;
  --cr-tinta-ameixa: #1B0B1B;
  --cr-creme:        #FFFDF9;
  /* fundos de seção "cor": os quatro cartões de sistema da udiia.com */
  --cr-tijolo:       #71311F;   /* Palácio das Vendas */
  --cr-oliva:        #4A3714;   /* Symbolon */
  --cr-petroleo:     #0E3F4B;   /* Arsenal Anti-IA */
  --cr-uva:          #2A1656;   /* Equipe IA */

  /* acentos (UM por página; escolha com data-acento no <html>) */
  --cr-verde:        #46B07A;   /* verde-receita sobre noite (prm-f) */
  --cr-verde-hover:  #5DC48F;
  --cr-verde-fundo:  #1F6B45;   /* o mesmo verde sobre papel (base) */
  --cr-amarelo:      #FFD51D;   /* udiia, botão principal */
  --cr-ciano:        #2BDAC5;   /* udiia, destaque sobre ameixa */
  --cr-roxo-texto:   #9B3BD0;   /* udiia, serifa de destaque sobre papel */
  --cr-azul:         #2346CB;   /* prm-g (versão clara da /g) */

  /* ---------------- fontes ---------------- */
  /* Aprovado pelo Hibra em 06/10/2026 (proposta única premium). Três famílias, cada uma no seu papel:
     EB Garamond 500/600 em título e número, sempre com algarismo alinhado (o padrão dela é de estilo antigo);
     IBM Plex Sans no corpo, rótulo, botão e interface; IBM Plex Mono só em código, prompt e nome de arquivo.
     Proibidas como escolha: Geist, Inter, Arial, Roboto, Open Sans, Poppins. Cormorant saiu pelo circunflexo
     alto e solto em você, três, português (medido 06/10). Itálico em título: nunca. */
  --f-display: "EB Garamond", "EB Garamond Fallback", Garamond, "Times New Roman", serif;
  --f-corpo:   "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, Consolas, monospace;
  --f-serifa:  var(--f-display);   /* legado: a antiga serifa itálica de destaque saiu; quem usava herda o título */
  --fontes-url: "https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400..600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap";

  /* ---------------- escala de letra (página) ---------------- */
  /* valores da camada prm da /h; o hero sobe a 5,05rem no computador */
  --t-hero:     clamp(2.8rem, 1.45rem + 4.1vw, 5.05rem);
  --t-gigante:  clamp(2.6rem, 1.6rem + 5vw, 6rem);       /* fecho e frase-bandeira */
  --t-h2:       clamp(2.3rem, 1.45rem + 3.1vw, 4.3rem);
  --t-h2-menor: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
  --t-h3:       clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --t-numero:   clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --t-lede:     clamp(1.12rem, 1rem + 0.55vw, 1.4rem);
  --t-corpo:    clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-pequeno:  0.9375rem;   /* 15 px: texto de apoio, item de lista, legenda de número (era 14 até 06/10/2026) */
  --t-nota:     0.9375rem;
  --t-rotulo:   0.875rem;    /* piso absoluto de letra na página: 14 px (era 13 até 06/10/2026; a porteira pediu 14 no celular) */

  --lh-titulo: 1.02;
  --lh-corpo:  1.6;
  --track-titulo: -0.01em;   /* h1/h2: Garamond não aguenta aperto */
  --track-hero:   -0.012em;
  --track-rotulo: 0;          /* rótulo em caixa normal, sem espaçamento */
  --medida: 40rem;           /* largura máxima de parágrafo (~65 caracteres) */

  /* ---------------- escala de letra (anúncio 9:16, tela de 1080 x 1920) ---------------- */
  /* 1080 px de tela viram ~390 px no celular (fator 2,77). 44 px no quadro = 16 px na mão.
     Abaixo de 44 px nada entra num anúncio. */
  --ad-gancho:  132px;
  --ad-titulo:  96px;
  --ad-sub:     64px;
  --ad-corpo:   52px;
  --ad-rotulo:  44px;        /* piso absoluto no anúncio */
  --ad-seguro-topo: 220px;   /* área que o Instagram/TikTok cobre em cima */
  --ad-seguro-base: 380px;   /* legenda, botões e nome do perfil embaixo */
  --ad-seguro-lado: 72px;

  /* ---------------- espaço ---------------- */
  --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;
  --sec:        clamp(5.5rem, 3.8rem + 6.5vw, 10.5rem);  /* respiro entre seções (prm) */
  --sec-curta:  clamp(4rem, 3rem + 4vw, 7.5rem);          /* seção de apoio (base) */
  --cabeca:     clamp(3rem, 2rem + 3.2vw, 5.25rem);       /* do título da seção ao conteúdo */
  --wrap:  72rem;
  --pad:   clamp(1rem, 0.6rem + 1.8vw, 2rem);

  /* ---------------- forma ---------------- */
  --r:        4px;    /* botão retangular, tag, chip pequeno (base e udiia) */
  --r-medio:  12px;   /* chip, aviso, bloco interno (prm) */
  --r-cartao: 20px;   /* cartão, painel, vídeo (prm) */
  --r-pilula: 999px;  /* botão principal (prm). Cor do botão: marfim, o inverso da seção (decisão do Hibra 06/10/2026); tokens --botao-* em base.css */

  /* a casa quase não usa sombra: superfície se separa por tom, não por sombra */
  --sombra-flutua: drop-shadow(0 1px 1px rgb(0 0 0 / .22)) drop-shadow(0 8px 18px rgb(0 0 0 / .18)); /* botão do WhatsApp */
  --sombra-tela:   0 2px 0 rgb(0 0 0 / .25);           /* sombra curta e escura; elevação é por superfície e fio (06/10) */

  /* ---------------- movimento ---------------- */
  --ease:       cubic-bezier(.16, 1, .3, 1);   /* desacelera; o mesmo da /h */
  --ease-io:    cubic-bezier(.65, 0, .35, 1);
  --t-rapido:   120ms;
  --t-medio:    220ms;
  --t-lento:    420ms;
  --t-revela:   1s;

  /* ---------------- acento da página (padrão: verde-receita) ---------------- */
  --ac-noite:        var(--cr-verde);
  --ac-noite-hover:  var(--cr-verde-hover);
  --ac-noite-tinta:  rgba(70, 176, 122, 0.10);
  --ac-noite-sobre:  var(--cr-noite);
  --ac-papel:        var(--cr-verde-fundo);
  --ac-papel-hover:  #185A39;
  --ac-papel-tinta:  #DDEBE2;
  --ac-papel-sobre:  var(--cr-branco);

  /* foco: aparece na hora, nunca com transição */
  --foco: 2px solid currentColor;
}

/* outros acentos (um por página) */
[data-acento="amarelo"] {
  --ac-noite: var(--cr-amarelo); --ac-noite-hover: #FFE15C; --ac-noite-tinta: rgba(255, 213, 29, 0.10); --ac-noite-sobre: var(--cr-tinta-ameixa);
  --ac-papel: #8A6A00; --ac-papel-hover: #6F5500; --ac-papel-tinta: #FBF0C2; --ac-papel-sobre: var(--cr-creme);
}
[data-acento="ciano"] {
  --ac-noite: var(--cr-ciano); --ac-noite-hover: #5CE6D4; --ac-noite-tinta: rgba(43, 218, 197, 0.10); --ac-noite-sobre: var(--cr-ameixa);
  --ac-papel: #0B7468; --ac-papel-hover: #085E54; --ac-papel-tinta: #D3F4EF; --ac-papel-sobre: var(--cr-creme);
}
[data-acento="azul"] {
  --ac-noite: #9CB0FA; --ac-noite-hover: #B7C6FC; --ac-noite-tinta: rgba(156, 176, 250, 0.12); --ac-noite-sobre: #121A19;
  --ac-papel: var(--cr-azul); --ac-papel-hover: #1B379F; --ac-papel-tinta: #EEF2FF; --ac-papel-sobre: var(--cr-branco);
}

/* celular: texto de apoio, nota e rótulo sobem 1 px (06/10/2026, a porteira na página inteira achou a letra
   auxiliar pequena no 390). O corpo já fica em 16 px. */
@media (max-width: 40rem) {
  :root { --t-pequeno: 1rem; --t-nota: 1rem; --t-rotulo: 1rem; }   /* 16 px, o mesmo do corpo: no celular a hierarquia vem da cor e do peso, não do tamanho */
}


/* ===== componentes/base.css ===== */
/* =====================================================================
   SISTEMA VISUAL DA CASA · base
   Reset, papéis de cor por seção, letra, botões, foto com legenda, revelação.
   Depende de ../tokens.css. Todo componente depende deste arquivo.
   ===================================================================== */

/* ---------------- papéis de cor por seção ----------------
   Cada seção escolhe um tema. Tudo dentro dela lê só os papéis abaixo. */
:root, .s-noite {
  --fundo: var(--cr-noite);       --fundo-2: var(--cr-noite-2);   --fundo-3: var(--cr-noite-3);
  --tinta: var(--cr-tinta-noite); --tinta-2: var(--cr-tinta-noite-2);
  --linha: var(--cr-linha-noite); --linha-forte: rgba(237, 239, 234, 0.22);
  --acento: var(--ac-noite);      --acento-hover: var(--ac-noite-hover);
  --acento-tinta: var(--ac-noite-tinta); --acento-sobre: var(--ac-noite-sobre);
  --risco: #6F7872;
  color-scheme: dark;
}
.s-noite-2 {
  --fundo: var(--cr-noite-2); --fundo-2: var(--cr-noite-3); --fundo-3: #222724;
  --tinta: var(--cr-tinta-noite); --tinta-2: var(--cr-tinta-noite-2);
  --linha: var(--cr-linha-noite); --linha-forte: rgba(237, 239, 234, 0.22);
  --acento: var(--ac-noite); --acento-hover: var(--ac-noite-hover);
  --acento-tinta: var(--ac-noite-tinta); --acento-sobre: var(--ac-noite-sobre);
  --risco: #6F7872;
  color-scheme: dark;
}
.s-papel {
  --fundo: var(--cr-papel); --fundo-2: var(--cr-branco); --fundo-3: var(--cr-papel-2);
  --tinta: var(--cr-tinta-papel); --tinta-2: var(--cr-tinta-papel-2);
  --linha: var(--cr-linha-papel); --linha-forte: #B9B8AD;
  --acento: var(--ac-papel); --acento-hover: var(--ac-papel-hover);
  --acento-tinta: var(--ac-papel-tinta); --acento-sobre: var(--ac-papel-sobre);
  --risco: #8A918C;
  color-scheme: light;
}
.s-papel-2 {
  --fundo: var(--cr-papel-2); --fundo-2: var(--cr-branco); --fundo-3: var(--cr-papel);
  --tinta: var(--cr-tinta-papel); --tinta-2: var(--cr-tinta-papel-2);
  --linha: var(--cr-linha-papel); --linha-forte: #B9B8AD;
  --acento: var(--ac-papel); --acento-hover: var(--ac-papel-hover);
  --acento-tinta: var(--ac-papel-tinta); --acento-sobre: var(--ac-papel-sobre);
  --risco: #8A918C;
  color-scheme: light;
}
/* família UDIIA */
.s-ameixa {
  --fundo: var(--cr-ameixa); --fundo-2: #22101F; --fundo-3: #2D1729;
  --tinta: var(--cr-creme); --tinta-2: rgba(255, 253, 249, 0.82);
  --linha: rgba(255, 253, 249, 0.16); --linha-forte: rgba(255, 253, 249, 0.30);
  --acento: var(--ac-noite); --acento-hover: var(--ac-noite-hover);
  --acento-tinta: var(--ac-noite-tinta); --acento-sobre: var(--ac-noite-sobre);
  --risco: rgba(255, 253, 249, 0.45);
  color-scheme: dark;
}
.s-papel-quente {
  --fundo: var(--cr-papel-quente); --fundo-2: var(--cr-creme); --fundo-3: var(--cr-papel-quente-2);
  --tinta: var(--cr-tinta-ameixa); --tinta-2: #564856;
  --linha: rgba(27, 11, 27, 0.16); --linha-forte: rgba(27, 11, 27, 0.32);
  --acento: var(--ac-papel); --acento-hover: var(--ac-papel-hover);
  --acento-tinta: var(--ac-papel-tinta); --acento-sobre: var(--ac-papel-sobre);
  --risco: #8C7F8C;
  color-scheme: light;
}
/* seção de cor: fundo escolhido com data-cor; o acento vira creme (botão creme, texto na cor do fundo) */
.s-cor {
  --cor: var(--cr-tijolo);
  --fundo: var(--cor); --fundo-2: color-mix(in srgb, var(--cor) 82%, #000); --fundo-3: color-mix(in srgb, var(--cor) 70%, #000);
  --tinta: var(--cr-creme); --tinta-2: rgba(255, 253, 249, 0.84);
  --linha: rgba(255, 253, 249, 0.20); --linha-forte: rgba(255, 253, 249, 0.40);
  --acento: var(--cr-creme); --acento-hover: #FFFFFF;
  --acento-tinta: rgba(255, 253, 249, 0.08); --acento-sobre: var(--cor);
  --risco: rgba(255, 253, 249, 0.5);
  color-scheme: dark;
}
.s-cor[data-cor="oliva"]    { --cor: var(--cr-oliva); }
.s-cor[data-cor="petroleo"] { --cor: var(--cr-petroleo); }
.s-cor[data-cor="uva"]      { --cor: var(--cr-uva); }
.s-cor[data-cor="tijolo"]   { --cor: var(--cr-tijolo); }

.s-noite, .s-noite-2, .s-papel, .s-papel-2, .s-ameixa, .s-papel-quente, .s-cor {
  background: var(--fundo); color: var(--tinta);
}

/* ---------------- reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--f-corpo);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  background: var(--fundo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
svg { flex: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { text-wrap: pretty; }
::selection { background: color-mix(in srgb, var(--acento) 32%, transparent); }
a, button, summary, label, [role="button"] { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
/* sublinhado da casa: fio de 1px, colado na letra (régua slop, 06/10/2026) */
a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
/* estados de todo clicável (régua slop, 06/10/2026): hover com UM efeito só, de cor e sem movimento; foco com contorno;
   apertado. Este é o piso, com :where pra não pesar: o componente que tem estado próprio passa por cima. */
:where(a[href]):hover { color: var(--acento); }
:where(a[href]):active, :where(button):active, :where(summary):active, :where([role="button"]):active { opacity: 0.72; }
:where(button):disabled, :where(button)[aria-disabled="true"], :where(input, select, textarea):disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------------- estrutura ---------------- */
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.sec { padding-block: var(--sec); }
.sec-curta { padding-block: var(--sec-curta); }
.sec + .sec.mesma-cor { padding-top: 0; }            /* duas seções seguidas no mesmo fundo */
.cabeca { display: grid; gap: var(--e-5); margin-bottom: var(--cabeca); max-width: 56rem; }
.cabeca--lado { max-width: none; }
@media (min-width: 56rem) {
  /* título à esquerda, texto de apoio à direita, alinhados pela base (udiia). Metade e metade: o apoio fica com
     45 a 75 caracteres por linha (régua slop, 06/10/2026); com 0.75fr ele caía pra 40 */
  .cabeca--lado { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--e-16); }
  .cabeca--lado .lede { font-size: var(--t-corpo); line-height: 1.6; }
  .cabeca--lado > .rotulo { grid-column: 1 / -1; }
}

/* ---------------- letra ---------------- */
h1, h2, .display {
  font-family: var(--f-display);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  letter-spacing: var(--track-titulo);
  line-height: var(--lh-titulo);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--t-hero); letter-spacing: var(--track-hero); line-height: 0.98; }
h2 { font-size: var(--t-h2); }
.h2-menor { font-size: var(--t-h2-menor); }
.gigante { font-size: var(--t-gigante); letter-spacing: var(--track-hero); line-height: 0.98; }
h3, .h3, h4 { font-family: var(--f-display); font-weight: 600; font-size: var(--t-h3); line-height: 1.2; letter-spacing: 0; font-variant-numeric: lining-nums; text-wrap: balance; overflow-wrap: anywhere; }
/* medida (régua slop, 06/10/2026): parágrafo e lede com 45 a 75 caracteres por linha no computador. Em coluna
   lateral (menos de ~38rem) a lede desce pra letra do corpo com .lede--coluna, senão a linha cai abaixo de 45. */
.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--tinta-2); max-width: var(--medida); }
.lede--coluna { font-size: var(--t-corpo); line-height: 1.6; }
.texto { max-width: var(--medida); color: var(--tinta-2); }
.texto > * + * { margin-top: var(--e-4); }
.texto strong, .lede strong { color: var(--tinta); font-weight: 600; }
.muted { color: var(--tinta-2); }
.nota { font-size: var(--t-nota); line-height: 1.5; color: var(--tinta-2); max-width: 44rem; }

/* rótulo: linha curta na letra do corpo, caixa normal, sem espaçamento (06/10/2026).
   Nunca colado acima do título: no máximo 1 por página, e não em cima de h1 ou h2. */
.rotulo {
  font-family: var(--f-corpo);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: var(--track-rotulo);
  line-height: 1.4;
  color: var(--tinta-2);
}
.rotulo--acento { color: var(--acento); }
/* .rotulo--fio: legado; o fio na frente saiu junto com o rótulo de revista */
.rotulo--fio { display: inline; }
/* índice de seção (udiia): número + fio + descrição */
.indice { display: grid; gap: var(--e-3); font-family: var(--f-corpo); font-size: var(--t-nota); letter-spacing: 0; color: var(--tinta-2); max-width: 10rem; }
.indice b { font-weight: 600; color: var(--tinta); font-size: 0.875rem; }
.indice i { height: 1px; background: var(--linha); }

/* número que importa: mesma família do título, algarismo tabular */
.num { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
/* número grande dos componentes quebra em vez de vazar na coluna estreita (régua slop, 06/10/2026) */
.faixa b, .hero-preco b, .roda-centro b, .saldo-num, .plano-preco, .contador-num, .perguntas-res b, .ad-dados b, .prova-numeros .num { overflow-wrap: anywhere; }
.ac { color: var(--acento); }
.nw { white-space: nowrap; }
s, .riscado { color: var(--risco); text-decoration-thickness: 1px; }

/* .serifa: legado. Título é numa cor só e sem itálico (regra de 06/10/2026); quem ainda usa a classe herda o título */
.serifa { font: inherit; color: inherit; letter-spacing: inherit; }

/* ---------------- botões ----------------
   Botão da casa: MARFIM, escolha do Hibra em 06/10/2026 ("Marfim"). É o inverso da seção: claro na noite,
   escuro no papel e na cor. Um token só (fundo, texto, hover); a pílula verde saiu do sistema (fica no backup
   claude-rollback/sistema-visual-botao-marfim-20261006). O verde segue como acento de número e link, não de botão. */
.btn, .ad-botao { --botao-fundo: var(--tinta); --botao-tinta: var(--fundo); --botao-hover: color-mix(in srgb, var(--tinta) 86%, var(--fundo)); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.1rem; padding: 0.85rem 1.6rem;
  background: var(--botao-fundo); color: var(--botao-tinta);
  font-family: var(--f-corpo); font-weight: 500; font-size: 1rem; line-height: 1; letter-spacing: 0;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-pilula); cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
/* hover só muda a cor; nada sobe, nada cresce, a seta fica parada (régua slop, 06/10/2026) */
.btn:hover { background: var(--botao-hover); color: var(--botao-tinta); }
.btn:active { background: color-mix(in srgb, var(--tinta) 74%, var(--fundo)); opacity: 1; }
.btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--fantasma { background: transparent; color: var(--tinta); border-color: var(--linha-forte); }
.btn--fantasma:hover { background: var(--fundo-3); color: var(--tinta); }
.btn--fantasma:active { background: color-mix(in srgb, var(--tinta) 14%, var(--fundo)); }
.btn--grande { min-height: 3.6rem; padding-inline: 2rem; font-size: 1.0625rem; }
/* botão retangular da udiia: canto de 3px (caixa-alta espaçada saiu em 06/10/2026) */
.btn--caixa { border-radius: 3px; font-size: 0.9375rem; font-weight: 500; min-height: 3.4rem; padding-inline: 1.3rem; gap: 1.25rem; }
@media (max-width: 26rem) { .btn { white-space: normal; text-align: center; text-wrap: balance; } .btn--cheio-celular { width: 100%; } }

/* link com seta (ação secundária) */
.link-seta {
  display: inline-flex; align-items: center; gap: 0.5rem; padding-bottom: 3px;
  color: var(--tinta); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--acento) 55%, transparent);
  transition: border-color var(--t-medio) var(--ease), color var(--t-medio) var(--ease);
}
.link-seta:hover { border-color: var(--acento); color: var(--acento); }

/* ---------------- foto e print com legenda ----------------
   Foto real ou print real. Nunca quadrado de cor no lugar, nunca foto de banco óbvia.
   A legenda diz o que é, de quem é e de quando é. */
.foto { display: grid; gap: var(--e-3); }
.foto img { width: 100%; border-radius: var(--r-cartao); object-fit: cover; aspect-ratio: var(--proporcao, auto); background: var(--fundo-2); }
.foto figcaption { font-family: var(--f-corpo); font-size: var(--t-nota); letter-spacing: 0; line-height: 1.5; color: var(--tinta-2); max-width: 36rem; }
.foto figcaption b { color: var(--tinta); font-weight: 500; }
/* tratamento de foto de pessoa sobre fundo escuro: um pouco menos de saturação, mais contraste */
.foto--tratada img { filter: saturate(0.82) contrast(1.06); }

/* print de tela real: moldura de fio, sem sombra; nome e data viram legenda tipográfica (sem barra de janela) */
.print { border-radius: var(--r-medio); overflow: hidden; background: var(--fundo-2); border: 1px solid var(--linha); }
.print-barra { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--linha); font-family: var(--f-corpo); font-size: var(--t-nota); letter-spacing: 0; color: var(--tinta-2); }
.print-barra span:last-child { color: var(--acento); }
.print img { width: 100%; }

/* ícone de traço (Lucide, 1 biblioteca só) */
.ico { width: 1.15em; height: 1.15em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* texto que some no celular estreito ("Pedir no WhatsApp" vira "Pedir") */
@media (max-width: 30rem) { .so-largo { display: none; } }

/* acessibilidade */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: fixed; z-index: 100; top: 1rem; left: 1rem; transform: translateY(-200%); padding: 0.75rem 1rem; background: var(--acento); color: var(--acento-sobre); font-weight: 600; border-radius: var(--r); }
.pular:focus { transform: none; }

/* ---------------- revelação em cascata (camada prm da /h) ----------------
   Só liga se o casa.js rodar. Sem script, tudo aparece normal.
   Só no hero (06/10/2026): fora dele o conteúdo já está lá, sem animar na rolagem. */
html.revela [data-revela] {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity .8s var(--ease) var(--atraso, 0ms), transform var(--t-revela) var(--ease) var(--atraso, 0ms);
}
html.revela [data-revela="midia"] { transform: translate3d(0, 44px, 0) scale(0.965); }
html.revela [data-revela].dentro { opacity: 1; transform: none; }
html.revela [data-revela].ja { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.revela [data-revela] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
html.revela [data-revela]:not(.hero [data-revela]) { opacity: 1; transform: none; transition: none; }
html.revela .hero [data-revela] { transition-duration: 700ms; }
@media print { html.revela [data-revela] { opacity: 1 !important; transform: none !important; } }

/* celular: rótulo no mínimo do sistema (16 px) */
@media (max-width: 40rem) { .rotulo { font-size: var(--t-rotulo); } }


/* ===== componentes/topo.css ===== */
/* TOPO · fundo sólido, fixo, SEM fio embaixo (régua slop, 06/10/2026: logo + links + botão + linha é menu de molde).
   O topo se separa da página pela cor: noite sólida sobre o papel e a cor das seções. Vidro saiu em 06/10/2026.
   Padrão: marca + até 2 links + 1 botão (3 links contando a marca). No celular: só marca + botão curto.
   Nada de menu sanduíche pra 2 links. */
.topo {
  position: sticky; top: 0; z-index: 30;
  background: var(--fundo);
}
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--e-6); min-height: 4rem; }
.marca {
  font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; letter-spacing: 0; line-height: 1; font-variant-numeric: lining-nums;
  text-decoration: none; white-space: nowrap; color: var(--tinta);
  transition: color var(--t-medio) var(--ease);
}
.marca:hover { color: var(--tinta-2); }
.marca span { color: var(--acento); }
.marca small { margin-left: 0.55rem; padding-left: 0.6rem; border-left: 1px solid var(--linha-forte); font-family: var(--f-corpo); font-weight: 500; font-size: var(--t-rotulo); letter-spacing: 0; color: var(--tinta-2); vertical-align: 0.12em; }
.topo-links { display: none; gap: var(--e-8); margin-right: auto; margin-left: var(--e-12); }
.topo-links a { font-size: 0.9375rem; color: var(--tinta-2); text-decoration: none; transition: color var(--t-medio) var(--ease); }
.topo-links a:hover, .topo-links a[aria-current] { color: var(--tinta); }
.topo .btn { min-height: 2.4rem; padding: 0.5rem 1.1rem; font-size: 0.875rem; white-space: nowrap; flex: none; }
@media (min-width: 56rem) { .topo-links { display: flex; } }
@media (max-width: 26rem) { .marca small { display: none; } }
/* botão do topo inteiro a partir de 360 px ("Pedir" sozinho não diz onde); o .so-largo da base some só abaixo disso aqui
   (vindo do projeto 10 da Fábrica, 06/10/2026) */
@media (min-width: 22.5rem) { .topo .so-largo { display: inline; } }

/* celular: botão do topo no mínimo do sistema (16 px) */
@media (max-width: 40rem) { .topo .btn { font-size: var(--t-rotulo); } }


/* ===== componentes/hero.css ===== */
/* HERO · texto à esquerda, ELEMENTO ASSINATURA à direita (desenhado em código, do assunto da página).
   A primeira tela responde: o que a pessoa ganha, pra quem é, o que fazer. Sem rolar.
   Nada centralizado. Rótulo > título > linha de apoio > botão + preço/nota > faixa de dados embaixo.
   Origem: .hero da /h (camada prm). */
.hero { padding-block: clamp(3rem, 1.8rem + 4.5vw, 7rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.hero-grade { display: grid; gap: clamp(2.75rem, 1.75rem + 3.5vw, 6rem); align-items: center; }
.hero-texto { display: grid; gap: var(--e-6); align-content: start; min-width: 0; }
.hero-texto h1 { max-width: 16ch; }
.hero-texto .lede { max-width: 48ch; }   /* 45 a 75 caracteres por linha */
.hero-acao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) var(--e-6); margin-top: var(--e-2); }
/* preço ou condição ao lado do botão */
.hero-preco { display: grid; gap: 0.15rem; }
.hero-preco b { font-family: var(--f-display); font-weight: 500; font-size: 1.9rem; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.hero-preco span { font-size: var(--t-nota); color: var(--tinta-2); }
.hero-preco s { white-space: nowrap; }
.hero-assinatura { min-width: 0; }
@media (min-width: 64rem) {
  .hero-grade { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .hero--assinatura-larga .hero-grade { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  /* título curto em fonte grande: o texto ganha largura pra fechar em 2 linhas */
  .hero--texto-largo .hero-grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
/* celular: o botão cabe na primeira tela; a assinatura vem logo depois do texto */
@media (max-width: 40rem) {
  .hero-texto { gap: var(--e-5); }
  .hero-acao .btn { flex: 1 1 100%; }
}


/* ===== componentes/assinatura.css ===== */
/* ELEMENTO ASSINATURA · o conceito da página desenhado em código (HTML + CSS + SVG).
   É a peça que só ESTA página teria: o mapa do negócio do Rafael na /h, a arte de cada sistema
   na udiia.com. Nunca foto de banco, nunca ícone genérico, nunca quadrado de cor.
   Três kits de partida. Troque o conteúdo pelo objeto real do assunto (termos, nomes, números).

   .ass-painel  moldura comum (cabeçalho com rótulos, corpo, rodapé)
   .ass-fluxo   entra > Claude > sai (painel do hero da /h)
   .ass-mapa    nó central ligado aos pontos do negócio (mapa do Rafael, vídeo da /h)
   .ass-folha   documento com marcas de revisão (texto, contrato, proposta, roteiro) */

/* ---------------- moldura ---------------- */
.ass-painel {
  background: var(--fundo-2); border-radius: var(--r-cartao);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--e-6);
}
.ass-cabeca { display: flex; justify-content: space-between; gap: var(--e-4); align-items: baseline; padding-bottom: var(--e-4); border-bottom: 1px solid var(--linha); }
.ass-cabeca .rotulo:first-child { color: var(--acento); }
.ass-pe { font-size: var(--t-pequeno); color: var(--tinta-2); border-top: 1px solid var(--linha); padding-top: var(--e-4); }

/* ---------------- fluxo ---------------- */
.ass-fluxo { display: grid; gap: 0.9rem; align-content: center; }
.ass-entradas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.ass-chip { display: flex; align-items: center; gap: 0.55rem; min-width: 0; border: 1px solid var(--linha); background: var(--fundo); border-radius: 10px; padding: 0.75rem 0.85rem; font-size: 0.875rem; color: var(--tinta); }
.ass-chip .ico { color: var(--tinta-2); }
.ass-seta { justify-self: center; color: var(--acento); line-height: 0; }
.ass-nucleo { justify-self: center; width: 100%; max-width: 20rem; padding: 0.9rem 1rem; border-radius: var(--r-pilula); border: 1px solid var(--acento); background: var(--acento-tinta); text-align: center; font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; line-height: 1.1; font-variant-numeric: lining-nums; }
.ass-nucleo small { display: block; margin-top: 0.25rem; font-family: var(--f-corpo); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0; color: var(--tinta-2); }
.ass-saidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
.ass-saidas div { border-radius: var(--r-medio); padding: 0.8rem 0.4rem; text-align: center; background: var(--acento-tinta); color: var(--acento); border: 1px solid color-mix(in srgb, var(--acento) 38%, transparent); font-weight: 600; font-size: var(--t-rotulo); letter-spacing: 0; overflow-wrap: anywhere; }

/* ---------------- mapa ---------------- */
.ass-mapa { position: relative; aspect-ratio: 4 / 3; }
.ass-mapa svg.ass-fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ass-fios path { fill: none; stroke: color-mix(in srgb, var(--acento) 55%, transparent); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.ass-fios circle { fill: var(--acento); }
.ass-no {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  padding: 0.55rem 0.8rem; border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--fundo);
  font-family: var(--f-corpo); font-size: 0.75rem; font-weight: 600; letter-spacing: 0; white-space: nowrap;
}
.ass-centro {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%);
  width: clamp(6.5rem, 22%, 9rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  border: 1.5px solid var(--acento); background: color-mix(in srgb, var(--acento) 12%, var(--fundo-2));
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--acento) 6%, transparent), 0 0 0 22px color-mix(in srgb, var(--acento) 3%, transparent);
  font-family: var(--f-display); font-weight: 600; font-size: clamp(1rem, 0.85rem + 0.6vw, 1.35rem); letter-spacing: 0; font-variant-numeric: lining-nums; }
.ass-mapa-legenda { position: absolute; left: 50%; top: calc(50% + clamp(4.2rem, 13%, 5.6rem)); transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 30rem) { .ass-no { padding: 0.4rem 0.5rem; } }

/* ---------------- folha ---------------- */
/* a folha é papel mesmo sobre a noite: o contraste é o desenho */
.ass-folhas { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; padding: 5.25rem 0 0; }
.ass-folha {
  --f-fundo: #FBFAF6; --f-tinta: #1D211E; --f-tinta-2: #5E6661; --f-linha: #E2E0D7; --f-marca: #B3261E;
  grid-area: 1 / 1; position: relative; min-width: 0;
  background: var(--f-fundo); color: var(--f-tinta);
  border-radius: 14px; padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
  box-shadow: 0 1px 0 rgb(0 0 0 / .08);
  font-size: 0.9375rem; line-height: 1.55;
}
/* folhas de trás: só o cabeçalho (nome do arquivo e contagem) aparece acima da da frente */
.ass-folha.atras { transform: translateY(-5.25rem) scale(.9); transform-origin: 50% 0; filter: brightness(.8); }
.ass-folha.atras-2 { transform: translateY(-2.65rem) scale(.95); transform-origin: 50% 0; filter: brightness(.9); }
/* o resto da folha de trás sai do layout (display, não visibility: texto escondido conta como slop P6). A folha
   continua do tamanho da da frente porque divide a mesma célula do grid. HTML: a folha de trás só precisa do cabeçalho. */
.ass-folha.atras > :not(.ass-folha-cabeca), .ass-folha.atras-2 > :not(.ass-folha-cabeca) { display: none; }
.ass-folha-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.7rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--f-linha); font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0; color: var(--f-tinta-2); }
.ass-folha-cabeca b { color: var(--f-tinta); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ass-folha-cabeca span { white-space: nowrap; flex: none; }
@media (max-width: 40rem) { .ass-folha-cabeca i { display: none; } }
.ass-folha-cabeca i { font-style: normal; }
.ass-folha h4 { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; margin: 0 0 0.4rem; font-variant-numeric: lining-nums; }
.ass-folha p + p { margin-top: 0.6rem; }
/* trecho cortado pela revisão, com a etiqueta do motivo */
.ass-folha del { color: var(--f-marca); text-decoration: line-through 1.5px; text-decoration-color: var(--f-marca); }
/* nota de revisão: letra do corpo, caixa normal, sem pílula (06/10/2026) */
.ass-marca { margin: 0 0 0 0.35rem; color: var(--f-marca); font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: 0; white-space: nowrap; }
/* trecho que a pessoa escreveu na revisão */
/* marca-texto em cor chapada (sem degradê, régua slop 06/10/2026), acompanhando a quebra de linha */
.ass-folha ins { text-decoration: none; background: color-mix(in srgb, var(--ac-papel) 16%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 2px; padding-inline: 0.08em; color: var(--f-tinta); font-weight: 600; }
/* trecho inserido que já tem negrito próprio (ex.: o negrito acertado de um passo): o resto fica regular, o <b> marca */
.ass-folha ins:has(b) { font-weight: 400; }
.ass-folha ins b, .ass-folha del b { font-weight: 700; }
.ass-folha:has(.ass-carimbo) { padding-bottom: 3.75rem; }
.ass-carimbo { position: absolute; right: clamp(0.9rem, 0.6rem + 1vw, 1.5rem); bottom: 1rem; color: var(--ac-papel); font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: 0; }

/* CENA · a foto do mundo do assunto com o elemento assinatura por cima (06/10/2026). A foto mostra onde o assunto
   acontece (o ateliê, a cozinha, a obra); as folhas, o que a página entrega. Foto gerada só pela skill
   realismo-foto-video, e a legenda diz que é gerada; foto de banco nunca.
   Computador: foto à direita, folhas descem sobre o canto de baixo à esquerda. Celular: folhas sobem sobre a foto. */
.ass-cena { position: relative; display: grid; min-width: 0; }
/* a foto aparece de verdade: recorte 4:3 no que importa (rosto, máquina, mãos); as folhas cobrem só o pé dela, à direita */
.ass-cena-foto { margin: 0; }
.ass-cena-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--foco, 40% 38%); border-radius: var(--r-cartao); background: var(--fundo-2); }
.ass-cena > .ass-folhas { margin: -14% 0 0 auto; width: 88%; padding-top: 4.5rem; }
.ass-cena-legenda { margin-top: var(--e-4); font-size: var(--t-nota); line-height: 1.5; color: var(--tinta-2); max-width: 34rem; }
.ass-cena-legenda b { color: var(--tinta); font-weight: 500; }
@media (min-width: 64rem) {
  .hero-grade:has(.ass-cena) { align-items: start; }
  .ass-cena > .ass-folhas { width: 84%; }
}
/* celular: cabeçalho da folha e marca no mínimo do sistema */
@media (max-width: 40rem) { .ass-folha-cabeca, .ass-marca, .ass-carimbo { font-size: var(--t-rotulo); } }

/* celular: texto da folha desenhada no mínimo do sistema */
@media (max-width: 40rem) { .ass-folha { font-size: 1rem; } }

/* ---------------- conversa no WhatsApp ----------------
   .wa-conversa (vindo do projeto 10 da Fábrica, 06/10/2026): uma conversa desenhada em código na moldura .ass-painel,
   com o texto EXATO que o número manda. Bolha da pessoa (.wa-eu) à direita, no acento; link numa linha só, cortado com
   reticências. Valor de exemplo sempre dito no .ass-pe. As trilhas em minmax(0, 1fr): o link não alarga a coluna no celular. */
.wa-conversa { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
.wa-fio { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); align-content: start; }
.wa-quando { font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 500; color: var(--tinta-2); }
.wa-msg { justify-self: start; max-width: 92%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding: 0.75rem 0.95rem 0.55rem; border: 1px solid var(--linha); border-radius: var(--r-medio); background: var(--fundo); color: var(--tinta); font-size: var(--t-pequeno); line-height: 1.45; overflow-wrap: anywhere; }
.wa-msg time { justify-self: end; font-family: var(--f-mono); font-size: var(--t-rotulo); color: var(--tinta-2); }
.wa-eu { justify-self: end; background: var(--acento-tinta); border-color: color-mix(in srgb, var(--acento) 45%, transparent); font-family: var(--f-mono); font-weight: 500; }
.wa-link { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--f-mono); font-size: var(--t-rotulo); color: var(--acento); }


/* ===== componentes/faixa.css ===== */
/* FAIXA DE DADOS · fatos reais em número: data, horário, quantidade, prazo, preço.
   Fio em cima, colunas separadas por fio fino, número grande e legenda curta embaixo.
   Origem: .facts da /h ("6 terças · 19h30 · 13/10 · 12 meses de gravação").
   Só número verdadeiro e conferível. Se não tem 3 fatos reais, não use a faixa. */
.faixa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linha); }
.faixa li { padding: var(--e-5) var(--e-4) var(--e-5) 0; border-bottom: 1px solid var(--linha); display: grid; gap: 0.25rem; align-content: start; min-width: 0; }
.faixa li:nth-child(2n) { padding-left: var(--e-4); border-left: 1px solid var(--linha); }
.faixa b { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.faixa b.ac { color: var(--acento); }
.faixa b small { font-size: 0.55em; color: var(--tinta-2); margin-left: 0.15em; letter-spacing: -0.01em; }
.faixa span { color: var(--tinta-2); font-size: var(--t-pequeno); line-height: 1.4; }
@media (min-width: 48rem) {
  .faixa { grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr)); }
  .faixa li { border-bottom: 0; }
  .faixa li:nth-child(2n) { padding-left: 0; border-left: 0; }
  .faixa li:nth-child(n+2) { padding-left: var(--e-5); border-left: 1px solid var(--linha); }
}
/* .faixa--2: 2 x 2 também no computador, pra caber na coluna do texto do hero (embaixo do botão, onde sobrava vão) */
@media (min-width: 48rem) {
  .faixa--2 { --colunas: 2; }
  .faixa--2 li:nth-child(n+2) { padding-left: 0; border-left: 0; }
  .faixa--2 li:nth-child(2n) { padding-left: var(--e-5); border-left: 1px solid var(--linha); }
  .faixa--2 li:nth-child(-n+2) { border-bottom: 1px solid var(--linha); }
}
/* versão grande: a faixa vira a seção (números gigantes, legenda mono) */
.faixa--grande b { font-size: clamp(2.6rem, 1.8rem + 3.2vw, 4.75rem); letter-spacing: -0.05em; }
.faixa--grande span { font-family: var(--f-corpo); font-size: var(--t-rotulo); letter-spacing: 0; }
.faixa--grande li { padding-block: var(--e-8); }


/* ===== componentes/secoes.css ===== */
/* SEÇÕES · o ritmo da página. Cada seção troca o fundo (noite, papel, cor) E a composição.
   Duas seções seguidas nunca repetem a mesma composição. Composições prontas:

   .manchete      frase gigante de um lado, lista com fio do outro, alinhadas pela base (/h, "não venda IA")
   .indexada      índice mono numa coluna estreita + texto em duas colunas + cartão escuro (udiia, manifesto)
   .antes-depois  linhas "antes > depois" com seta (/h, seção 13)
   .cartoes-cor   2 a 4 cartões altos, cada um numa cor e com o próprio desenho (udiia, sistemas)
   .lista-fio     lista com fio entre itens e etiqueta mono à direita (/h, seção 02) */

/* ---------------- manchete ---------------- */
.manchete { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.manchete h2 { font-size: var(--t-gigante); letter-spacing: var(--track-hero); line-height: 0.98; }
.lista-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linha); align-content: end; }
.lista-dupla li { padding: var(--e-4) var(--e-2) var(--e-4) 0; border-bottom: 1px solid var(--linha); font-size: 1.05rem; }
@media (min-width: 56rem) { .manchete { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }

/* ---------------- indexada ---------------- */
.indexada { display: grid; gap: var(--e-8); }
.indexada-corpo { display: grid; gap: var(--e-10); min-width: 0; }
.indexada-colunas { display: grid; gap: var(--e-6); color: var(--tinta-2); max-width: 46rem; }
.cartao-escuro {
  position: relative; overflow: hidden; min-height: 18rem; padding: var(--e-5);
  background: var(--cr-ameixa); color: var(--cr-creme); border-radius: 2px;
  display: grid; align-content: space-between; gap: var(--e-8);
}
.cartao-escuro .rotulo { color: var(--cr-ciano); }
.cartao-escuro p { font-family: var(--f-display); font-weight: 600; font-size: 1.375rem; line-height: 1.08; letter-spacing: -0.01em; max-width: 14ch; position: relative; z-index: 1; font-variant-numeric: lining-nums; }
.cartao-escuro p .serifa { display: block; margin-top: 0.4rem; font-size: 1.05em; color: var(--cr-amarelo); }
/* anel desenhado no canto (udiia .principle-card::after) */
.cartao-escuro::after { content: ""; position: absolute; right: -75px; bottom: -77px; width: 221px; height: 221px; border: 1px solid rgba(43, 218, 197, .65); border-radius: 50%; box-shadow: 0 0 0 27px rgba(43, 218, 197, .09), 0 0 0 55px rgba(43, 218, 197, .04); }
@media (min-width: 40rem) { .indexada-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); } }
@media (min-width: 64rem) {
  .indexada { grid-template-columns: 9rem minmax(0, 1fr) 17.5rem; gap: var(--e-12); align-items: start; }
}

/* ---------------- antes e depois ---------------- */
.antes-depois { display: grid; border-top: 1px solid var(--linha); }   /* largura inteira da página (06/10/2026: com 62rem sobrava vão à direita em 1280) */
.ad-cabeca, .ad-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--e-6); align-items: center; }
.ad-cabeca { padding-block: var(--e-3); border-bottom: 1px solid var(--linha); }
.ad-cabeca span:nth-child(2) { width: 20px; }
.ad-cabeca .rotulo:last-child { color: var(--acento); }
.ad-linha { padding-block: clamp(1rem, 0.8rem + 1vw, 1.6rem); border-bottom: 1px solid var(--linha); }
.ad-linha .antes { color: var(--tinta-2); font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.35rem); line-height: 1.45; }
.ad-linha .antes s { color: var(--tinta-2); text-decoration-color: color-mix(in srgb, var(--tinta-2) 70%, transparent); }
.ad-linha .depois { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.3rem, 1.05rem + 1vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.ad-linha .depois small { display: block; margin-top: 0.35rem; font-family: var(--f-corpo); font-weight: 500; font-size: var(--t-rotulo); letter-spacing: 0; color: var(--acento); }
.ad-linha > .ico { color: var(--acento); width: 20px; height: 20px; }
@media (max-width: 40rem) {
  .ad-cabeca { display: none; }
  .ad-linha { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
  .ad-linha > .ico { transform: rotate(90deg); }
}

/* ---------------- cartões de cor ---------------- */
.cartoes-cor { display: grid; gap: 2px; }
.cartao-cor {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(26rem, 22rem + 10vw, 35rem); padding: var(--e-5);
  display: flex; flex-direction: column; color: var(--cr-creme); background: var(--cor, var(--cr-tijolo));
  text-decoration: none; transition: background-color .35s var(--ease);
}
/* hover só escurece a cor do cartão; o cartão não sobe (régua slop, 06/10/2026) */
a.cartao-cor:hover { background: color-mix(in srgb, var(--cor, var(--cr-tijolo)) 84%, var(--cr-noite)); color: var(--cr-creme); }
a.cartao-cor:active { background: color-mix(in srgb, var(--cor, var(--cr-tijolo)) 72%, var(--cr-noite)); }
.cartao-cor[data-cor="oliva"] { --cor: var(--cr-oliva); }
.cartao-cor[data-cor="petroleo"] { --cor: var(--cr-petroleo); }
.cartao-cor[data-cor="uva"] { --cor: var(--cr-uva); }
.cartao-cor-topo { display: flex; justify-content: space-between; font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0; color: rgba(255, 253, 249, .82); }
.cartao-cor-topo span:last-child { color: var(--cr-amarelo); }
.cartao-cor .desenho { flex: 1; display: grid; place-items: center; padding-block: var(--e-6); }
.cartao-cor .desenho svg { width: min(78%, 15rem); height: auto; overflow: visible; }
.cartao-cor h3 { font-family: var(--f-serifa); font-style: normal; font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem); letter-spacing: -0.01em; line-height: 1; margin-bottom: var(--e-3); }
.cartao-cor p { font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 253, 249, .82); max-width: 28ch; }
.cartao-cor .preco { margin-top: var(--e-4); font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0; color: var(--cr-amarelo); }
@media (min-width: 40rem) { .cartoes-cor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .cartoes-cor { grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr)); } }

/* ---------------- lista com fio ---------------- */
.lista-fio li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); padding: var(--e-4) 0; border-bottom: 1px solid var(--linha); font-size: 1.05rem; }
.lista-fio li:first-child { border-top: 1px solid var(--linha); }
.lista-fio li span:last-child { font-family: var(--f-corpo); font-size: var(--t-rotulo); color: var(--tinta-2); letter-spacing: 0; white-space: nowrap; }


/* ===== componentes/passos.css ===== */
/* LISTA DE PASSOS · o "como funciona". Cabeçalho preso à esquerda no computador, passos à direita
   com marco no fio, título, texto e a linha "resultado que você vê".
   Um fio vertical liga os marcos: é uma sequência, não uma grade de cartões iguais.
   Sem "01 02 03" (régua slop, 06/10/2026): a ordem é do <ol> e do fio; número de enfeite saiu.
   .passo-num é legado: some se ainda estiver no HTML.
   Origem: .steps e .enc2 da /h; linha "Resultado que você vê" dos kits de presente. */
.passos-grade { display: grid; gap: var(--e-10); }
.passos { counter-reset: passo; display: grid; }
.passo {
  position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--e-4);
  padding-bottom: var(--e-10);
}
.passo:last-child { padding-bottom: 0; }
.passo > :not(.passo-num) { grid-column: 2; }
/* marco no fio, na altura da 1ª linha do título; o último vem cheio (é o resultado) */
.passo::after { content: ""; position: absolute; left: calc(0.75rem - 0.4rem); top: 0.45rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 1.5px solid var(--acento); background: var(--fundo); }
.passo:last-child::after { background: var(--acento); }
/* fio que desce de um marco até o próximo */
.passo::before { content: ""; position: absolute; left: calc(0.75rem - 0.5px); top: 1.6rem; bottom: 0.3rem; width: 1px; background: var(--linha-forte); }
.passo:last-child::before { display: none; }
.passo-num { display: none; }
.passo h3 { margin-bottom: var(--e-2); }
.passo p { color: var(--tinta-2); max-width: 38rem; }
.passo-resultado {
  margin-top: var(--e-4); display: flex; gap: var(--e-3); align-items: baseline; max-width: 38rem;
  padding-top: var(--e-3); border-top: 1px dashed var(--linha-forte); color: var(--tinta);
}
.passo-resultado .rotulo { flex: none; color: var(--acento); }
/* trecho de pedido pra colar na IA, dentro do passo */
.pedido {
  margin-top: var(--e-4); max-width: 38rem; padding: var(--e-4) var(--e-5);
  background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--r-medio);
  font-family: var(--f-corpo); font-size: 0.875rem; line-height: 1.6; color: var(--tinta); white-space: pre-wrap; overflow-wrap: anywhere;
}
/* variante em linha: no computador, cabeçalho em cima e os passos lado a lado, ligados por fio horizontal */
@media (min-width: 64rem) {
  .passos--linha { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: var(--e-8); }
  /* só pra passo de 1 ou 2 linhas de texto: em 4 colunas o parágrafo fica abaixo de 45 caracteres; texto maior usa a coluna */
  .passos--linha .passo { grid-template-columns: minmax(0, 1fr); padding: var(--e-8) 0 0; align-content: start; }
  .passos--linha .passo > :not(.passo-num) { grid-column: 1; }
  .passos--linha .passo::after { left: 0; top: 0; }
  .passos--linha .passo::before { left: 1.25rem; right: calc(var(--e-8) * -1 + 0.45rem); top: calc(0.4rem - 0.5px); bottom: auto; width: auto; height: 1px; }
  .passos--linha .pedido { font-size: var(--t-rotulo); }
}
@media (min-width: 64rem) {
  .passos-grade:not(.passos-grade--topo) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--e-16); align-items: start; }
  /* cabeçalho na coluna da esquerda: a lede vem na letra do corpo pra manter 45+ caracteres por linha */
  .passos-grade:not(.passos-grade--topo) > .cabeca .lede { font-size: var(--t-corpo); line-height: 1.6; }
  .passos-grade:not(.passos-grade--topo) > .cabeca { position: sticky; top: 7rem; margin-bottom: 0; }
}

/* celular: pedido pra colar no mínimo do sistema */
@media (max-width: 40rem) { .pedido { font-size: var(--t-pequeno); } }

/* PASSOS COM O CABEÇALHO EM CIMA (vindo do projeto 10 da Fábrica, 06/10/2026)
   .passos-grade--topo   título à esquerda e a lede (ou .precisa) à direita, os passos embaixo na largura toda
   .passos-grade--larga  cada passo em 3 colunas no computador: marco, título e texto, e o "Você vê" à direita com fio tracejado
   .passos-corpo         passos à esquerda e um desenho à direita (ex.: .wa-conversa), dentro do --topo
   .precisa              "O que você precisa", com .lista-ok, no cabeçalho */
.passos-grade--topo { gap: var(--cabeca); }
.passos-grade--topo > .cabeca { margin-bottom: 0; max-width: none; }
.passos-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-10); min-width: 0; }
.precisa { display: grid; gap: var(--e-3); margin-top: var(--e-4); padding-top: var(--e-5); border-top: 1px solid var(--linha); }
.precisa .rotulo { color: var(--acento); }
.precisa .lista-ok li { color: var(--tinta-2); }
@media (min-width: 64rem) {
  .passos-grade--topo > .cabeca { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--e-16); align-items: start; }
  .passos-grade--topo > .cabeca > h2 { grid-column: 1; grid-row: 1; }
  .passos-grade--topo > .cabeca > :not(h2) { grid-column: 2; }
  .passos-grade--topo > .cabeca:has(> .precisa) > .lede { grid-column: 1; grid-row: 2; font-size: var(--t-corpo); line-height: 1.6; }
  .passos-grade--topo > .cabeca > .precisa { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .passos-grade--larga .passo { grid-template-columns: 1.5rem minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .passos-grade--larga .passo > .passo-resultado { grid-column: 3; grid-row: 1 / span 4; align-self: start; flex-direction: column; gap: var(--e-2); max-width: none; margin: 0 0 0 var(--e-10); padding: 0 0 0 var(--e-6); border-top: 0; border-left: 1px dashed var(--linha-forte); }
  .passos-corpo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: var(--e-16); align-items: start; }
}


/* ===== componentes/prova.css ===== */
/* PROVA E DEPOIMENTO · prova é coisa que aconteceu: print real, número medido, frase com nome,
   data e lugar. Três formas:

   .prova-print    print de tela real grande + legenda com origem e data + 2 ou 3 números ao lado
   .print-detalhe  recorte ampliado do MESMO print (o trecho que prova), com legenda; vai na coluna dos números
   .citacao        frase curta tirada do print, grande, com quem disse, quando e onde
   .mural          prints de conversa (WhatsApp) em colunas desencontradas, cada um com legenda

   Sem foto de banco, sem estrela de avaliação, sem "cliente satisfeito". Sem prova real, sem seção. */

/* ---------------- print + números ---------------- */
.prova-print { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: start; }
.prova-lado { display: grid; gap: var(--e-8); align-content: start; min-width: 0; }
/* recorte ampliado: o img é o print inteiro, mais largo que a caixa, alinhado pelo canto escolhido.
   --zoom-w = largura do print em % da caixa (maior = mais perto); --canto = right ou left. Sem arquivo novo:
   o recorte é do print real, e a legenda diz de onde ele saiu. */
.print-detalhe { display: grid; gap: var(--e-3); margin: 0; }
.print-detalhe .recorte { position: relative; overflow: hidden; aspect-ratio: var(--recorte, 4 / 5); border-radius: var(--r-medio); border: 1px solid var(--linha); background: var(--fundo-2); }
.print-detalhe .recorte img { position: absolute; top: var(--topo, 0); width: var(--zoom-w, 400%); max-width: none; height: auto; }
.print-detalhe .recorte img { right: 0; }
.print-detalhe[data-canto="left"] .recorte img { right: auto; left: 0; }
.print-detalhe figcaption { font-size: var(--t-nota); line-height: 1.5; color: var(--tinta-2); }
.print-detalhe figcaption b { color: var(--tinta); font-weight: 500; }
/* no celular o print inteiro vira miniatura ilegível: quando tem recorte, só o recorte aparece (06/10/2026).
   A legenda do recorte precisa se sustentar sozinha (dono, data, o que mostra). */
@media (max-width: 40rem) { .prova-print:has(.print-detalhe) > .foto { display: none; } .print-detalhe .recorte { aspect-ratio: var(--recorte-celular, 3 / 4); } }

/* VERSÕES · peça autoral em código: as versões de um texto (ou de qualquer entrega) numa régua, com o número real
   de cada uma e, entre elas, o que cada etapa fez. A barra é proporcional ao número (--p, em %); a última versão leva
   o acento. Sem ícone, sem cartão: fio, barra e número. */
.versoes { margin: 0; display: grid; gap: var(--e-4); }
.versoes ol { display: grid; border-top: 1px solid var(--linha); }
.versao { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.35rem var(--e-4); padding-block: var(--e-4); }
.versao b { font-family: var(--f-mono); font-size: var(--t-pequeno); font-weight: 500; color: var(--tinta); overflow-wrap: anywhere; }
.versao .num { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); color: var(--tinta); }
.versao small { grid-column: 1 / -1; font-size: var(--t-nota); color: var(--tinta-2); }
.versao-barra { grid-column: 1 / -1; display: block; height: 0.5rem; border-radius: var(--r-pilula); background: var(--linha); overflow: hidden; }
.versao-barra::before { content: ""; display: block; height: 100%; width: var(--p, 100%); border-radius: inherit; background: var(--tinta-2); }
.versao:last-child .versao-barra::before { background: var(--acento); }
.versao:last-child .num { color: var(--acento); }
.versoes-etapa { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--e-3); align-items: start; padding: var(--e-3) 0; border-block: 1px dashed var(--linha-forte); font-size: var(--t-pequeno); line-height: 1.5; color: var(--tinta); }
.versoes-etapa::before { content: ""; width: 1px; height: 100%; min-height: 1.5rem; justify-self: center; background: var(--acento); }
.versoes-etapa b { font-weight: 600; }
.versoes figcaption { font-size: var(--t-nota); line-height: 1.5; color: var(--tinta-2); }
.prova-numeros { display: grid; gap: 0; border-top: 1px solid var(--linha); }
.prova-numeros li { display: grid; gap: 0.3rem; padding: var(--e-5) 0; border-bottom: 1px solid var(--linha); }
.prova-numeros .num { font-size: clamp(2.2rem, 1.7rem + 2vw, 3.4rem); }
.prova-numeros .num.ac { color: var(--acento); }
.prova-numeros span { color: var(--tinta-2); font-size: var(--t-pequeno); max-width: 26rem; }
@media (min-width: 60rem) {
  .prova-print { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr); }
  /* computador: as duas colunas terminam juntas (06/10/2026; o vão embaixo do print lia como buraco antes da seção seguinte).
     O recorte deixa de ter proporção fixa e cresce até o fim do print; tem piso pra não sumir. */
  .prova-print:has(.prova-lado) { align-items: stretch; }
  .prova-lado { grid-template-rows: minmax(0, 1fr) auto; gap: var(--e-6); }
  .prova-lado .print-detalhe { grid-template-rows: minmax(11rem, 1fr) auto; }
  .prova-lado .print-detalhe .recorte { aspect-ratio: auto; min-height: 11rem; }
  .prova-lado .prova-numeros li { padding: var(--e-4) 0; }
}

/* ---------------- citação ---------------- */
.citacao { display: grid; gap: var(--e-6); max-width: 54rem; }
.citacao blockquote { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; font-variant-numeric: lining-nums; }
.citacao blockquote::before { content: "“"; display: block; height: 0.55em; margin-bottom: 0.1em; font-family: var(--f-serifa); font-size: 2.2em; line-height: 1; color: var(--acento); }
.citacao figcaption { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; font-size: var(--t-pequeno); color: var(--tinta-2); }
.citacao figcaption b { color: var(--tinta); font-weight: 600; font-size: 1rem; }

/* ---------------- mural de conversas ---------------- */
.mural { columns: 1; column-gap: var(--e-5); }
.mural .foto { break-inside: avoid; margin-bottom: var(--e-8); }
.mural .foto img { border-radius: var(--r-medio); border: 1px solid var(--linha); background: #0B141A; }
@media (min-width: 40rem) { .mural { columns: 2; } }
@media (min-width: 64rem) { .mural { columns: 3; } .mural .foto:nth-child(2) { margin-top: var(--e-12); } }

/* ---------------- quem faz (retrato real + texto) ---------------- */
.quem { display: grid; gap: var(--e-8); align-items: end; }
.quem .foto img { aspect-ratio: 4 / 5; max-height: 34rem; }
.quem-texto { display: grid; gap: var(--e-5); }
@media (min-width: 56rem) { .quem { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--e-16); } }

/* .prova-print--larga (vindo do projeto 10 da Fábrica, 06/10/2026): o print na largura toda e os números numa linha
   embaixo, no computador. Pra print que perde leitura em 2/3 da largura. O recorte .print-detalhe fica só pro celular,
   onde ele substitui o print. */
@media (min-width: 60rem) {
  .prova-print--larga { grid-template-columns: minmax(0, 1fr); }
  .prova-print--larga.prova-print:has(.prova-lado) { align-items: start; }
  .prova-print--larga .prova-lado { grid-template-rows: auto; }
  .prova-print--larga .prova-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--e-10); border-top: 0; }
  .prova-print--larga .prova-numeros li { border-top: 1px solid var(--linha); border-bottom: 0; }
}
@media (min-width: 40.0625rem) { .prova-print--larga .print-detalhe { display: none; } }


/* ===== componentes/planos.css ===== */
/* TABELA DE PLANOS · colunas com as mesmas linhas, alinhadas entre si no computador (subgrid).
   Um plano em destaque: fundo com tinta do acento, borda no acento, selo em cima.
   Preço à vista grande; parcelado e condições em letra menor; botões no fim de cada coluna.
   Origem: .tbx da /h (A/B de 4 braços, 04/10/2026). */
.planos { display: grid; gap: var(--e-4); }
.plano {
  position: relative; display: grid; align-content: start;
  background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--r-cartao);
  padding: 0 var(--e-5) var(--e-5);
}
.plano--destaque { background: var(--acento-tinta); border: 1.5px solid color-mix(in srgb, var(--acento) 70%, transparent); margin-top: var(--e-3); }
.plano-selo {
  position: absolute; top: 0; left: var(--e-5); transform: translateY(-50%);
  padding: 0.3rem 0.75rem; border-radius: var(--r-pilula); background: var(--acento); color: var(--acento-sobre);
  font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0; white-space: nowrap;
}
.plano-linha { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); padding: var(--e-3) 0; border-top: 1px solid var(--linha); min-width: 0; }
.plano-linha:first-of-type { display: block; border-top: 0; padding: var(--e-6) 0 var(--e-3); }
.plano-chave { font-size: var(--t-nota); color: var(--tinta-2); }
.plano-valor { font-size: 0.9375rem; text-align: right; }
.plano-nome { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); letter-spacing: -0.01em; line-height: 1.15; font-variant-numeric: lining-nums; }
.plano-desc { margin-top: 0.3rem; font-size: var(--t-pequeno); color: var(--tinta-2); }
.plano-preco { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); letter-spacing: -0.01em; line-height: 1.05; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.plano--destaque .plano-preco { color: var(--acento); }
.plano-ok { display: inline-flex; align-items: center; gap: 0.4rem; }
.plano-ok .ico { color: var(--acento); }
.plano-linha.plano-botoes { display: grid; justify-content: stretch; align-items: stretch; gap: var(--e-2); padding-top: var(--e-4); }
.plano-botoes .btn { width: 100%; white-space: normal; }
.plano:not(.plano--destaque) .plano-botoes .btn:first-child { background: transparent; color: var(--acento); border-color: color-mix(in srgb, var(--acento) 60%, transparent); }
.plano:not(.plano--destaque) .plano-botoes .btn:first-child:hover { background: var(--acento-tinta); }
.planos-chaves { display: none; }
.planos-rodape { margin-top: var(--e-8); display: grid; gap: var(--e-3) var(--e-6); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.planos-rodape li { display: flex; align-items: center; gap: 0.55rem; font-size: var(--t-pequeno); color: var(--tinta-2); }
.planos-rodape .ico { color: var(--acento); }

/* computador: a primeira coluna vira a legenda das linhas e as colunas alinham por subgrid */
@media (min-width: 64rem) {
  .planos { grid-template-columns: minmax(9rem, 0.75fr) repeat(var(--n, 3), minmax(0, 1fr)); grid-template-rows: repeat(var(--linhas, 6), auto); column-gap: var(--e-3); row-gap: 0; align-items: stretch; }
  .planos-chaves, .plano { grid-row: 1 / span var(--linhas, 6); display: grid; grid-template-rows: subgrid; }
  .planos-chaves { padding: 0 var(--e-4); }
  .planos-chaves .plano-linha { font-size: var(--t-pequeno); color: var(--tinta-2); justify-content: flex-start; align-items: center; }
  .plano { margin-top: 0; padding-inline: var(--e-4); }
  .plano--destaque { margin-top: 0; }
  .plano-linha { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0.25rem; }
  .plano-linha:first-of-type { text-align: center; padding-top: var(--e-8); }
  .plano-linha.plano-botoes { display: grid; justify-content: stretch; align-content: end; }
  .plano .plano-chave { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .plano-valor { text-align: center; }
  .plano-selo { left: 50%; transform: translate(-50%, -50%); }
}


/* ===== componentes/cta.css ===== */
/* CTA FINAL · a seção que fecha a página. Título grande à esquerda, UM botão, uma linha de
   garantia/condição embaixo, e o resumo do que a pessoa leva à direita.
   + barra fixa do celular (vidro, preço + botão), que só aparece no celular.
   Origem: .final e .sticky da /h; fecho escuro da /g. */
.final { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.final h2 { font-size: var(--t-gigante); letter-spacing: var(--track-hero); line-height: 0.98; max-width: 14ch; }
.final-acao { display: grid; gap: var(--e-5); justify-items: start; align-content: end; }
.final-acao .nota { max-width: 30rem; }
.final-leva { display: grid; border-top: 1px solid var(--linha); }
.final-leva li { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-4) 0; border-bottom: 1px solid var(--linha); }
.final-leva .ico { color: var(--acento); margin-top: 0.25rem; }
.final-leva b { font-weight: 600; }
.final-leva span { display: block; color: var(--tinta-2); font-size: var(--t-pequeno); }
@media (min-width: 60rem) {
  .final { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; }
  .final > .final-titulo { grid-column: 1 / -1; }
}

/* barra fixa do celular */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: 0.7rem var(--pad) calc(0.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fundo) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--linha);
}
.barra-fixa div { display: grid; line-height: 1.15; }
.barra-fixa b { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.barra-fixa span { font-size: var(--t-rotulo); color: var(--tinta-2); }
.barra-fixa .btn { min-height: 2.75rem; padding: 0.6rem 1.15rem; font-size: 0.9375rem; }
/* a barra só sobe quando o botão do hero sai da tela (casa.js põe html.barra-espera e .ativa): na primeira tela
   já tem botão, e a barra não cobre o elemento assinatura (porteira, 06/10/2026). Sem script, ela fica sempre visível. */
html.barra-espera .barra-fixa { transform: translateY(110%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s; }
html.barra-espera .barra-fixa.ativa { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { html.barra-espera .barra-fixa { transition: none; } }
@media (min-width: 48rem) { .barra-fixa { display: none; } }
@media (max-width: 47.99rem) { body:has(.barra-fixa) { padding-bottom: 4.5rem; } }

/* .final-leva--fio (vindo do projeto 10 da Fábrica, 06/10/2026): a lista só com o fio, sem o ícone de visto.
   Pra quando o item não é benefício marcado, e sim o que vem depois (passos seguintes, o que chega e quando). */
.final-leva--fio li { display: block; }


/* ===== componentes/rodape.css ===== */
/* RODAPÉ · marca, uma frase do que é, até 6 links em mono, e a linha legal completa
   (razão social, CNPJ, cidade, contato, aviso de marca da Anthropic quando citar Claude).
   Origem: footer.site da /h e .site-footer da udiia.com. */
.rodape { padding-block: var(--e-16) var(--e-10); border-top: 1px solid var(--linha); }
.rodape-grade { display: grid; gap: var(--e-8); }
.rodape .marca { font-size: 1.35rem; }
.rodape-frase { margin-top: var(--e-3); max-width: 24rem; font-size: var(--t-pequeno); color: var(--tinta-2); }
.rodape-links { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); align-content: start; }
.rodape-links a { font-family: var(--f-corpo); font-size: var(--t-rotulo); letter-spacing: 0; color: var(--tinta); text-decoration: none; padding-block: 0.4rem; }
.rodape-links a:hover { color: var(--acento); }
.rodape-legal { margin-top: var(--e-10); padding-top: var(--e-5); border-top: 1px solid var(--linha); font-size: var(--t-rotulo); line-height: 1.6; color: var(--tinta-2); max-width: 68ch; }
@media (min-width: 56rem) { .rodape-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .rodape-links { justify-content: flex-end; } }


/* ===== componentes/anuncio.css ===== */
/* ANÚNCIO 9:16 · quadros de 1080 x 1920 desenhados em HTML, pra capturar como imagem ou
   quadro de vídeo (abra com ?render=1 numa janela de 1080 x 1920).
   Regras que valem pra todo quadro:
   - nada abaixo de 44 px (= 16 px no celular). Texto pequeno em anúncio é proibido.
   - tudo que importa fica dentro da área segura (?guias=1 mostra): 220 px em cima, 380 embaixo, 72 dos lados.
   - um pensamento por quadro. Se precisa de mais, é outro quadro.
   Quadros: .ad-gancho (abre), .ad-tela (chat ou terminal), .ad-cartela (fecha). */

/* ---------------- palco: encaixa o quadro de 1080 na largura disponível ---------------- */
.palco { position: relative; width: min(100%, 405px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; background: #000; box-shadow: var(--sombra-tela); flex: none; }
.quadro {
  position: absolute; top: 0; left: 0; width: 1080px; height: 1920px; overflow: hidden;
  transform: scale(var(--escala, 0.375)); transform-origin: 0 0;
  background: var(--fundo); color: var(--tinta); font-family: var(--f-corpo);
  -webkit-font-smoothing: antialiased;
}
.quadro-seguro { position: absolute; inset: var(--ad-seguro-topo) var(--ad-seguro-lado) var(--ad-seguro-base); display: flex; flex-direction: column; }
/* captura em tamanho real */
html.render body { margin: 0; background: #000; }
html.render .so-demo { display: none !important; }
html.render .palco { width: 1080px; border-radius: 0; box-shadow: none; }
html.render .palco + .palco { margin-top: 0; }
html.render .quadro { transform: none; }
/* guias da área segura */
html.guias .quadro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 50;
  border-style: solid; border-color: rgba(255, 60, 60, .28);
  border-width: var(--ad-seguro-topo) var(--ad-seguro-lado) var(--ad-seguro-base);
}

/* elementos comuns */
/* .ad-rotulo: linha de apoio em caixa normal; nunca colada acima do título do gancho (06/10/2026) */
.ad-rotulo { font-family: var(--f-corpo); font-size: var(--ad-rotulo); font-weight: 500; letter-spacing: 0; color: var(--tinta-2); line-height: 1.3; }
.ad-rotulo.ac { color: var(--acento); }
.ad-titulo { font-family: var(--f-display); font-weight: 500; font-variant-numeric: lining-nums; font-size: var(--ad-titulo); letter-spacing: -0.01em; line-height: 0.98; }
.ad-corpo { font-size: var(--ad-corpo); line-height: 1.3; color: var(--tinta-2); letter-spacing: -0.01em; }
.ad-corpo b { color: var(--tinta); font-weight: 600; }

/* ---------------- gancho ---------------- */
.ad-gancho .quadro-seguro { gap: 56px; }
.ad-gancho h1 { font-size: var(--ad-gancho); font-weight: 500; letter-spacing: -0.012em; line-height: 0.98; max-width: 13ch; text-wrap: balance; }
.ad-gancho .ad-objeto { margin-top: auto; padding-top: 56px; position: relative; }
/* o objeto real (print, foto, folha) sai da área de texto e passa da borda: dá profundidade */
.ad-gancho .ad-objeto img, .ad-gancho .ad-objeto .ad-folha { width: 1010px; max-width: none; border-radius: 28px; box-shadow: 0 2px 0 rgb(0 0 0 / .25); transform: rotate(-4deg); transform-origin: left top; margin-left: -12px; }
.ad-folha { background: #FBFAF6; color: #1D211E; padding: 56px 60px; font-size: 46px; line-height: 1.4; }
.ad-folha del { color: #B3261E; text-decoration: line-through 4px; }
/* nota de revisão ao lado do trecho cortado: letra do corpo, caixa normal, sem pílula (carimbo mono saiu em 06/10/2026) */
.ad-folha .ad-marca { margin-left: 18px; color: #B3261E; font-family: var(--f-corpo); font-size: 44px; font-weight: 500; letter-spacing: 0; }

/* ---------------- tela: chat ---------------- */
.ad-tela .quadro-seguro { gap: 44px; }
.ad-chat { display: flex; flex-direction: column; gap: 28px; margin-top: 12px; }
.ad-chat-cabeca { display: flex; align-items: center; gap: 28px; padding-bottom: 32px; border-bottom: 2px solid var(--linha); }
.ad-chat-cabeca i { width: 96px; height: 96px; border-radius: 50%; background: var(--acento-tinta); border: 3px solid var(--acento); display: grid; place-items: center; font-style: normal; font-family: var(--f-display); font-weight: 600; font-size: 44px; color: var(--acento); font-variant-numeric: lining-nums; }
.ad-chat-cabeca b { display: block; font-size: 52px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.ad-chat-cabeca span { font-size: 44px; color: var(--tinta-2); }
.ad-msg { max-width: 860px; padding: 30px 38px; border-radius: 36px; font-size: 48px; line-height: 1.3; letter-spacing: -0.01em; }
.ad-msg small { display: block; margin-top: 10px; font-family: var(--f-corpo); font-size: 44px; color: var(--tinta-2); text-align: right; }
.ad-msg.eu { align-self: flex-end; background: var(--acento); color: var(--acento-sobre); border-bottom-right-radius: 10px; }
.ad-msg.eu small { color: color-mix(in srgb, var(--acento-sobre) 70%, transparent); }
.ad-msg.ela { align-self: flex-start; background: var(--fundo-3); border-bottom-left-radius: 10px; }
.ad-msg.destaque { outline: 4px solid var(--acento); outline-offset: 10px; }

/* ---------------- tela: terminal ---------------- */
.ad-terminal { margin-top: 12px; border-radius: 32px; overflow: hidden; background: #0E100F; border: 2px solid var(--linha); }
.ad-terminal-barra { display: flex; justify-content: space-between; padding: 26px 36px; border-bottom: 2px solid var(--linha); font-family: var(--f-mono); font-size: 44px; color: var(--tinta-2); }
.ad-terminal pre { margin: 0; padding: 40px 36px 48px; font-family: var(--f-mono); font-size: 44px; line-height: 1.45; white-space: pre-wrap; color: var(--cr-tinta-noite); }
.ad-terminal .p { color: var(--acento); }
.ad-terminal .c { color: var(--cr-tinta-noite-2); }
.ad-terminal .ok { color: var(--acento); font-weight: 600; }
.ad-cursor { display: inline-block; width: 26px; height: 50px; background: var(--acento); vertical-align: -8px; }

/* ---------------- cartela final ---------------- */
.ad-cartela .quadro-seguro { gap: 0; justify-content: space-between; }
.ad-cartela .ad-marca-grande { font-family: var(--f-display); font-weight: 600; font-size: 72px; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.ad-cartela .ad-marca-grande span { color: var(--acento); }
.ad-cartela h2 { font-size: 112px; letter-spacing: -0.01em; line-height: 0.98; margin-top: 64px; max-width: 13ch; }
/* os 3 fatos em linhas com fio (como a moldura luxo da thread de Vídeos): em 3 colunas o rótulo quebrava */
.ad-dados { border-top: 2px solid var(--linha); margin-top: 56px; }
.ad-dados li { display: flex; align-items: baseline; gap: 22px; padding: 20px 0 22px; border-bottom: 2px solid var(--linha); }
.ad-dados b { font-family: var(--f-display); font-weight: 600; font-size: 76px; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.ad-dados span { font-size: 48px; color: var(--tinta-2); line-height: 1.15; }
.ad-chamada { display: grid; gap: 36px; margin-top: 48px; }
.ad-botao { display: flex; align-items: center; justify-content: center; gap: 24px; height: 148px; border-radius: 999px; background: var(--botao-fundo); color: var(--botao-tinta); font-size: 56px; font-weight: 500; letter-spacing: 0; }
.ad-botao svg { width: 56px; height: 56px; }
.ad-endereco { text-align: center; font-family: var(--f-corpo); font-size: 52px; font-weight: 500; letter-spacing: 0; color: var(--tinta); }

/* ---------------- miolo dos cartões de cena (.cq-*) ----------------
   Vindo da thread de vídeos (lote 7, 05/10/2026). Vai dentro de .quadro-seguro, depois do
   .ad-rotulo e do .ad-titulo. Por padrão o miolo OCUPA a altura que sobra até a área de
   legenda: listas, escada, raias e duas pistas esticam e distribuem as linhas.
   .cq--topo   mantém tudo junto no alto (quando vem legenda/fala grande embaixo no vídeo)
   .cq--meio   centraliza na altura (folha, terminal, slides)
   Letra: nada abaixo de --ad-rotulo (44 px). */
.quadro-seguro > .cq { flex: 1 1 auto; min-height: 0; }
.cq { display: flex; flex-direction: column; gap: 40px; margin-top: 16px; }
.cq--topo { flex: 0 0 auto !important; }
.cq--meio { justify-content: center; }
.cq b { font-weight: 600; }
.cq-n { flex: none; font-family: var(--f-corpo); font-size: var(--ad-rotulo); font-weight: 500; color: var(--acento); min-width: 104px; }

/* lista com fio: marca mono + título + apoio; as linhas dividem a altura */
.cq-lista { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--linha); display: flex; flex-direction: column; }
.cq > .cq-lista { flex: 1 1 auto; }
.cq-lista li { flex: 1 1 0; max-height: 340px; display: flex; gap: 28px; align-items: center; padding: 34px 0; border-bottom: 2px solid var(--linha); }
.cq-lista b { display: block; font-size: var(--ad-sub); letter-spacing: -0.03em; line-height: 1.05; }
.cq-lista div span { display: block; margin-top: 12px; font-size: var(--ad-rotulo); color: var(--tinta-2); line-height: 1.25; }

/* barra de progresso em pedaços (feito, meio, a fazer) */
.cq-barra { display: flex; gap: 14px; flex: none; }
.cq-barra i { flex: 1; height: 24px; border-radius: var(--r-pilula); background: var(--fundo-3); }
.cq-barra .f { background: var(--acento); }
.cq-barra .m { background: linear-gradient(90deg, var(--acento) 50%, var(--fundo-3) 50%); }

/* fluxo de passagem: conversa > arquivo > conversa */
.cq-fluxo { display: flex; align-items: center; flex: none; font-size: var(--ad-rotulo); }
.cq-fluxo span { flex: none; width: 210px; padding: 26px 18px; border-radius: var(--r-cartao); background: var(--fundo-3); color: var(--tinta-2); text-align: center; line-height: 1.15; }
.cq-fluxo b { flex: none; padding: 26px 22px; border-radius: var(--r-cartao); background: var(--acento); color: var(--acento-sobre); font-family: var(--f-corpo); font-weight: 600; }
.cq-fluxo i { flex: 1; height: 4px; min-width: 24px; background: var(--acento); }

/* duas pistas: cartões que esticam até embaixo, itens espalhados */
.cq-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cq > .cq-duas { flex: 1 1 auto; max-height: 1000px; }
.cq-duas > div { display: flex; flex-direction: column; gap: 28px; padding: 44px 36px; border-radius: var(--r-cartao); background: var(--fundo-3); }
.cq-duas > div > b { font-size: var(--ad-sub); line-height: 1.08; letter-spacing: -0.03em; padding-top: 28px; border-top: 2px solid var(--linha); }
.cq-duas .on { background: var(--acento); color: var(--acento-sobre); }
.cq-duas .on > b { border-top-color: color-mix(in srgb, var(--acento-sobre) 22%, transparent); }
.cq-duas .on .ad-rotulo { color: var(--acento-sobre); }

/* escada: cada degrau mais à direita; os degraus dividem a altura */
.cq-escada { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.cq > .cq-escada { flex: 1 1 auto; max-height: 1060px; }
.cq-escada li { flex: 1 1 0; max-height: 190px; display: flex; align-items: center; gap: 22px; padding: 28px 34px; border-radius: var(--r-medio); background: var(--fundo-3); margin-left: calc((var(--k) - 1) * 60px); }
.cq-escada li:first-child { background: var(--acento); color: var(--acento-sobre); }
.cq-escada li:first-child .cq-n { color: var(--acento-sobre); }
.cq-escada .cq-n { min-width: 44px; }
.cq-escada b { font-size: var(--ad-sub); letter-spacing: -0.03em; line-height: 1.05; }

/* raias de quadro (kanban): cada raia divide a altura */
.cq-raia { flex: 1 1 0; max-height: 360px; padding: 34px 0; border-top: 2px solid var(--linha); display: grid; gap: 20px; align-content: center; }
.cq-raia b { justify-self: start; font-size: var(--ad-sub); padding: 24px 34px; border-radius: var(--r-medio); background: var(--fundo-3); letter-spacing: -0.03em; line-height: 1.12; }
.cq-raia.on .ad-rotulo { color: var(--acento); }
.cq-raia.on b { background: var(--acento); color: var(--acento-sobre); }

/* chips de teste */
.cq-chips { display: flex; flex-wrap: wrap; gap: 18px; flex: none; }
.cq-chips b { font-size: var(--ad-corpo); padding: 18px 32px; border-radius: var(--r-pilula); border: 3px solid var(--acento); color: var(--acento); }

/* folha marcada (usa .ad-folha) */
.cq-folha { border-radius: var(--r-cartao); transform: rotate(-1.5deg); margin: 0 18px; font-size: 52px; }
.cq-folha p { margin: 0 0 22px; }
.cq-pe { margin: 0; }

/* slides do carrossel: cores de seção da casa */
/* a rotação de 3° faz a quina sair ~10 px pro lado: o recuo de 28 px segura os slides dentro da área segura */
.cq-slides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 0 28px; }
.cq-slides div { min-width: 0; aspect-ratio: 4 / 5; border-radius: var(--r-cartao); background: var(--cor); color: var(--cr-creme); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.cq-slides .ad-rotulo { color: var(--cr-creme); opacity: .8; }
.cq-slides b { font-size: var(--ad-rotulo); line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cq-slides div:nth-child(1) { transform: rotate(-3deg); }
.cq-slides div:nth-child(3) { transform: rotate(3deg); }

/* página de demonstração dos quadros */
.vitrine { display: flex; flex-wrap: wrap; gap: var(--e-8); align-items: flex-start; }
.vitrine-item { display: grid; gap: var(--e-3); width: min(100%, 405px); }

/* ---------------- página em tela cheia (06/10/2026) ----------------
   .ad-pagina: o print real da página cobre o quadro inteiro, de borda a borda, e rola no vídeo. Sem moldura, sem vão.
   .ad-veu-topo: fundo da casa que desce do alto e some num degradê, pra o gancho, o selo ou a fonte ficarem legíveis.
   .ad-veu-base: reservado (hoje sem efeito; o Instagram já escurece a base e a legenda tem caixa própria).
   --pg-y: em que altura do quadro está o topo da página (px). --veu: até onde vai o véu de cima (px).
   .ad-fonte: o que gerou a página (resposta da conversa, linha da ficha, requisito da spec), por cima do véu.
   .ad-marca-pg: contorno do acento em volta do trecho da página que saiu da fonte (--x, --y, --w, --h em px do quadro).
   .ad-marca-pg--texto: em vez do contorno, marca-texto do acento por cima de texto escuro em fundo claro.
   .ad-selo: diz que a página é de teste e de onde veio. Fica sempre no véu, nunca por cima de texto da página. */
.ad-pagina { background: var(--fundo); }
.ad-pagina .ad-pg { position: absolute; inset: 0; overflow: hidden; }
.ad-pagina .ad-pg img { position: absolute; left: 0; top: var(--pg-y, 0px); width: 1080px; max-width: none; display: block; }
.ad-veu-topo, .ad-veu-base { position: absolute; left: 0; right: 0; pointer-events: none; }
.ad-veu-topo { top: 0; height: var(--veu, 760px);
  background: linear-gradient(to bottom, var(--fundo) 0, var(--fundo) calc(100% - var(--fade, 90px)),
    color-mix(in srgb, var(--fundo) 70%, transparent) calc(100% - var(--fade, 90px) * 0.62),
    color-mix(in srgb, var(--fundo) 28%, transparent) calc(100% - var(--fade, 90px) * 0.28), transparent 100%); }
.ad-veu-base { bottom: 0; height: 0; } /* o Instagram já escurece a base do Reels; a legenda tem caixa própria */
.ad-pagina .quadro-seguro { z-index: 2; gap: 32px; }
.ad-pagina h1 { font-size: 124px; font-weight: 500; letter-spacing: -0.012em; line-height: 0.98; text-wrap: balance; }
.ad-fonte { box-shadow: 0 2px 0 rgb(0 0 0 / .3); }
.ad-fonte.ad-msg { max-width: none; font-size: 50px; line-height: 1.28; }
.ad-fonte.ad-folha { border-radius: var(--r-cartao); padding: 44px 52px; font-size: 54px; line-height: 1.25; }
.ad-fonte.ad-folha .ad-rotulo { color: #5E655F; margin-bottom: 18px; }
.ad-fonte.ad-folha small { display: block; margin-top: 20px; font-family: var(--f-corpo); font-size: 44px; color: #5E655F; line-height: 1.25; }
.ad-fonte.ad-terminal { margin-top: 0; }
.ad-fonte.ad-terminal pre { font-size: 46px; padding: 34px 36px 40px; }
.ad-marca-pg { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 6px solid var(--acento); border-radius: 22px; box-shadow: 0 0 0 9999px color-mix(in srgb, var(--fundo) 0%, transparent); }
.ad-marca-pg--texto { border: 0; border-radius: 10px; background: color-mix(in srgb, var(--acento) 42%, transparent); mix-blend-mode: multiply; }
.ad-selo { position: absolute; z-index: 2; top: var(--ad-seguro-topo); left: var(--ad-seguro-lado); right: var(--ad-seguro-lado); display: flex; align-items: center; gap: 20px; font-family: var(--f-corpo); font-size: var(--ad-rotulo); font-weight: 500; letter-spacing: 0; color: var(--tinta); line-height: 1.2; white-space: nowrap; }
.ad-selo i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--acento); }
.ad-selo b { color: var(--acento); font-weight: 500; }


/* ===== componentes/pedido.css ===== */
/* PEDIDO · formulário curto que termina num código pra mandar no WhatsApp (presentes.claudepartners.org).
   Campo de 3rem de altura, rótulo mono em cima, linha de erro reservada embaixo (o layout não pula quando o erro aparece).
   Dois estados no mesmo cartão: .pedido-form (os campos) e .pedido-codigo (último passo, o código grande).
   Troca de estado com o atributo hidden. O sistema não tem cor de erro: o erro é borda na tinta + "!" no acento + texto. */
.pedido-cartao {
  display: grid; gap: var(--e-5); max-width: 34rem; min-width: 0; padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
  background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--r-medio);
}
.pedido-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e-2) var(--e-4); padding-bottom: var(--e-4); border-bottom: 1px solid var(--linha); }
.pedido-topo b { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.pedido-topo span { font-family: var(--f-corpo); font-size: var(--t-rotulo); letter-spacing: 0; color: var(--tinta-2); }
.pedido-topo span em { font-style: normal; color: var(--acento); }

.pedido-form { display: grid; gap: var(--e-3); }
.campo { display: grid; gap: 0.4rem; min-width: 0; }
.campo label { font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.campo input {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem;
  font: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--fundo); border: 1px solid var(--linha-forte); border-radius: var(--r);
  transition: border-color var(--t-medio) var(--ease), box-shadow var(--t-medio) var(--ease);
}
.campo input::placeholder { color: var(--risco); }
.campo input:hover { border-color: var(--tinta-2); }
.campo input:active { border-color: var(--tinta); }
.campo input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-tinta); }
.campo-erro { min-height: 1.2em; font-size: var(--t-rotulo); line-height: 1.2; color: var(--tinta); }
.campo-erro:empty { visibility: hidden; }
.campo[data-erro] input { border-color: var(--tinta); border-width: 2px; padding: calc(0.7rem - 1px) calc(0.9rem - 1px); }
.campo[data-erro] .campo-erro::before { content: "! "; font-family: var(--f-corpo); font-weight: 600; color: var(--acento); }
.campos-dupla { display: grid; gap: var(--e-3); }
@media (min-width: 40rem) { .campos-dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); } }

.pedido-nota { font-size: 0.875rem; line-height: 1.45; color: var(--tinta-2); }

/* aceite: quadrado desenhado no CSS, texto longo em letra menor; o link da política fica sublinhado */
.aceite { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--e-3); align-items: start; font-size: var(--t-rotulo); line-height: 1.5; color: var(--tinta-2); cursor: pointer; }
.aceite input {
  appearance: none; -webkit-appearance: none; margin: 0.1rem 0 0; width: 1.25rem; height: 1.25rem;
  border: 1px solid var(--linha-forte); border-radius: 3px; background: var(--fundo); display: grid; place-content: center; cursor: pointer;
}
.aceite input::after { content: ""; width: 0.65rem; height: 0.35rem; border: solid var(--acento-sobre); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--t-rapido) var(--ease); }
.aceite input:checked { background: var(--acento); border-color: var(--acento); }
.aceite input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.aceite input:hover, .aceite:hover input { border-color: var(--tinta-2); }
.aceite input:active { border-color: var(--tinta); background: var(--fundo-3); }
.aceite input:checked:hover, .aceite:hover input:checked { border-color: var(--acento); }
.aceite input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.aceite a { color: var(--tinta); text-underline-offset: 2px; }

/* campo-isca contra robô (input com tabindex="-1", autocomplete="off", dentro de um .campo-isca com aria-hidden="true"):
   fora da tela e transparente, pra pessoa e pro leitor de tela não verem; robô que preenche tudo cai nele */
.campo-isca { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.pedido-form .btn, .pedido-codigo .btn { width: 100%; }
.pedido-aviso { font-size: 0.875rem; line-height: 1.45; color: var(--tinta-2); }
.pedido-aviso b { color: var(--tinta); font-weight: 600; }

/* último passo: o código em mono grande, com o botão do WhatsApp embaixo */
.pedido-codigo { display: grid; gap: var(--e-4); }
.pedido-codigo[hidden], .pedido-form[hidden] { display: none; }
.codigo-grande {
  display: block; padding: var(--e-5) var(--e-4); text-align: center;
  font-family: var(--f-mono); font-weight: 600; font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); letter-spacing: 0.14em; line-height: 1;
  color: var(--tinta); background: var(--fundo); border: 1px dashed var(--linha-forte); border-radius: var(--r);
  overflow-wrap: anywhere; user-select: all;
}

/* .pedido-cartao--solto (vindo do projeto 10 da Fábrica, 06/10/2026): o formulário solto no papel, com um fio em cima,
   sem cartão. Pra página que já tem desenho e cartão em volta e não pede mais uma caixa. */
.pedido-cartao--solto { padding: var(--e-6) 0 0; background: none; border: 0; border-top: 1px solid var(--linha-forte); border-radius: 0; }


/* ===== componentes/contador.css ===== */
/* CONTADOR DO DIA · quantos presentes novos o número já pegou hoje (limite 3).
   .pips é UMA régua só, em 3 trechos, que enche no acento (data-n="0..3"). Até 06/10/2026 eram 3 bolinhas iguais
   lado a lado; saíram pela régua slop (3 caixas iguais). Serve sozinha, dentro de frase, ou no .contador, que junta
   a régua, o "X de 3" e a regra do 4º presente. .contador--linha cabe num topo.
   HTML: <span class="pips" data-n="2" aria-hidden="true"></span> (o "2 de 3" vai em texto ao lado). */
.pips {
  --n: 0;
  position: relative; display: inline-block; flex: none; width: 3.5rem; height: 0.375rem; vertical-align: 0.12em;
  border-radius: var(--r-pilula); background: var(--linha-forte); overflow: hidden;
  /* 2 cortes de 3px entre os trechos, pela máscara: o corte é transparente em qualquer fundo */
  -webkit-mask: linear-gradient(90deg, var(--tinta) calc(100% / 3 - 1.5px), transparent 0 calc(100% / 3 + 1.5px), var(--tinta) 0 calc(200% / 3 - 1.5px), transparent 0 calc(200% / 3 + 1.5px), var(--tinta) 0);
          mask: linear-gradient(90deg, var(--tinta) calc(100% / 3 - 1.5px), transparent 0 calc(100% / 3 + 1.5px), var(--tinta) 0 calc(200% / 3 - 1.5px), transparent 0 calc(200% / 3 + 1.5px), var(--tinta) 0);
}
.pips::before { content: ""; position: absolute; inset: 0; background: var(--acento); transform: scaleX(calc(var(--n) / 3)); transform-origin: left; transition: transform var(--t-medio) var(--ease); }
.pips[data-n="1"] { --n: 1; } .pips[data-n="2"] { --n: 2; } .pips[data-n="3"] { --n: 3; }
.pips > i { display: none; }   /* legado: as bolinhas <i> não aparecem mais */
.pips--grande { width: 5.25rem; height: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .pips::before { transition: none; } }

.contador { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-2) var(--e-4); align-items: center; padding: var(--e-4) 0; border-block: 1px solid var(--linha); max-width: 34rem; }
.contador .pips { grid-row: span 2; }
.contador-rotulo { font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.contador-num { font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: lining-nums; }
.contador-num small { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.contador-regra { grid-column: 1 / -1; font-size: 0.875rem; line-height: 1.45; color: var(--tinta-2); }
.contador[data-cheio] .contador-num { color: var(--acento); }

/* numa linha só, pra topo ou cabeçalho de cartão: "Hoje ●●○ 2 de 3" */
.contador--linha { display: inline-flex; align-items: center; gap: var(--e-3); padding: 0.45rem 0.85rem; border: 1px solid var(--linha); border-radius: var(--r-pilula); font-family: var(--f-corpo); font-size: var(--t-rotulo); letter-spacing: 0; color: var(--tinta-2); white-space: nowrap; }
.contador--linha b { color: var(--tinta); font-weight: 600; }


/* ===== componentes/perguntas.css ===== */
/* 3 PERGUNTAS · sim ou não, uma por linha, com dois botões de escolha. Sem "01 02 03" (régua slop, 06/10/2026):
   a ordem é a da lista; .pergunta-num é legado e some se ainda estiver no HTML.
   O botão escolhido leva aria-pressed="true". Embaixo, .perguntas-res (aria-live) mostra o nível quando as 3
   têm resposta. Nível = a pergunta mais alta respondida com sim (Nível 0 a 3, como no metro.js do presentes); o nível marca as casas do metrô (metro.css, .metro[data-nivel]). */
.perguntas { display: grid; border-top: 1px solid var(--linha); max-width: 52rem; }
.pergunta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); align-items: center; padding-block: var(--e-5); border-bottom: 1px solid var(--linha); }
.pergunta-num { display: none; }
.pergunta p { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.25; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.sim-nao { display: flex; gap: var(--e-2); }
.sim-nao button {
  min-width: 5.5rem; min-height: 2.75rem; padding: 0.5rem 1.1rem;
  font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0;
  color: var(--tinta); background: transparent; border: 1px solid var(--linha-forte); border-radius: var(--r-pilula); cursor: pointer;
  transition: background var(--t-medio) var(--ease), color var(--t-medio) var(--ease), border-color var(--t-medio) var(--ease);
}
.sim-nao button:hover { background: var(--fundo-3); }
.sim-nao button:active { background: color-mix(in srgb, var(--tinta) 16%, var(--fundo)); opacity: 1; }
.sim-nao button[aria-pressed="true"] { background: var(--acento); color: var(--acento-sobre); border-color: var(--acento); }
@media (min-width: 48rem) {
  .pergunta { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-6); }
}
.perguntas-res { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4); padding-top: var(--e-5); color: var(--tinta-2); }
.perguntas-res b { font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--tinta); font-variant-numeric: lining-nums; }
.perguntas-res b em { font-style: normal; color: var(--acento); }

/* composição de seção: chamada à esquerda, as 3 perguntas à direita (64rem+); no celular, uma embaixo da outra */
.perguntas-grade { display: grid; gap: var(--e-8); }
@media (min-width: 64rem) {
  .perguntas-grade { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--e-12); align-items: start; }
  .perguntas-grade .perguntas { max-width: none; }
  .perguntas-grade .pergunta { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
}


/* ===== componentes/metro.css ===== */
/* METRÔ · as 20 casas dos presentes: 5 linhas (assuntos) x 4 níveis (Nível 0 a Nível 3).
   Cada linha é um trilho; cada casa é uma estação; uma casa com 2 ou 3 presentes vira estação de
   baldeação (o ponto alonga, como no mapa do metrô). Monocromático de propósito: um acento por página,
   então o trilho é --linha-forte e o acento só marca o nível da pessoa (.metro[data-nivel="N"]).
   Computador (64rem+): níveis em colunas, linhas em fileiras, trilho horizontal.
   Celular: cada linha vira um trilho vertical, com o nível escrito em cada estação.
   .metro--vertical fica vertical em qualquer largura (uma linha só, numa coluna estreita, como no hero). */
.metro { --ponto: 0.95rem; --trilho: 3px; display: grid; gap: 0; border-top: 1px solid var(--linha); }
.metro-niveis { display: none; }
.metro-linha { display: grid; gap: var(--e-4); padding-block: var(--e-6); border-bottom: 1px solid var(--linha); min-width: 0; }
.metro-nome { display: grid; gap: 0.35rem; align-content: start; font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.metro-nome span { font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0; color: var(--tinta-2); }
.metro-nome small { font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }

.metro-casas { display: grid; min-width: 0; }
.casa { position: relative; min-width: 0; padding: 0 0 var(--e-5) calc(var(--ponto) + var(--e-4)); }
.casa:last-child { padding-bottom: 0; }
/* trilho: do centro do ponto desta casa até o ponto da próxima */
.casa::before { content: ""; position: absolute; left: calc(var(--ponto) / 2 - var(--trilho) / 2); top: calc(var(--ponto) / 2); bottom: calc(var(--ponto) / -2); width: var(--trilho); background: var(--linha-forte); }
.casa:last-child::before { display: none; }
/* estação: ponto com contorno; casa com mais presentes alonga o ponto */
.casa::after { content: ""; position: absolute; left: 0; top: 0.2rem; width: var(--ponto); height: calc(var(--ponto) + (var(--qtd, 1) - 1) * 0.7rem); border-radius: var(--r-pilula); background: var(--fundo); border: var(--trilho) solid var(--tinta); box-sizing: border-box; }
.casa[data-qtd="2"] { --qtd: 2; }
.casa[data-qtd="3"] { --qtd: 3; }
.casa-nivel { display: block; margin-bottom: 0.3rem; font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.casa ul { display: grid; gap: 0.3rem; }
.casa li { font-size: 0.9375rem; line-height: 1.35; }
.casa a { color: var(--tinta); text-decoration: none; }
/* casa com 2 ou 3 presentes: cada um ganha um traço na frente e respiro entre eles, pra ler onde um termina */
.casa[data-qtd] ul { gap: 0.55rem; }
.casa[data-qtd] li { position: relative; padding-left: 0.95rem; }
.casa[data-qtd] li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.5rem; height: 1.5px; background: var(--tinta-2); }
.casa a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* presente já pego: marcado em mono depois do nome */
.casa li.pego::after { content: " · pego"; font-family: var(--f-corpo); font-size: var(--t-nota); letter-spacing: 0; color: var(--tinta-2); }

/* o nível da pessoa (vem das 3 perguntas): estação cheia no acento e o rótulo "seu nível" */
.metro[data-nivel="0"] .casa[data-n="0"]::after, .metro[data-nivel="1"] .casa[data-n="1"]::after,
.metro[data-nivel="2"] .casa[data-n="2"]::after, .metro[data-nivel="3"] .casa[data-n="3"]::after { background: var(--acento); border-color: var(--acento); }
.metro[data-nivel="0"] .casa[data-n="0"] .casa-nivel, .metro[data-nivel="1"] .casa[data-n="1"] .casa-nivel,
.metro[data-nivel="2"] .casa[data-n="2"] .casa-nivel, .metro[data-nivel="3"] .casa[data-n="3"] .casa-nivel { color: var(--acento); }
.metro[data-nivel="0"] .casa[data-n="0"] .casa-nivel::after, .metro[data-nivel="1"] .casa[data-n="1"] .casa-nivel::after,
.metro[data-nivel="2"] .casa[data-n="2"] .casa-nivel::after, .metro[data-nivel="3"] .casa[data-n="3"] .casa-nivel::after { content: " · o seu"; }

@media (min-width: 64rem) {
  .metro:not(.metro--vertical) { --cols: 14rem repeat(4, minmax(0, 1fr)); }
  .metro:not(.metro--vertical) > .metro-niveis, .metro:not(.metro--vertical) .metro-linha { display: grid; grid-template-columns: var(--cols); gap: var(--e-6); }
  .metro:not(.metro--vertical) > .metro-niveis { padding-block: var(--e-3); border-bottom: 1px solid var(--linha); font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
  .metro:not(.metro--vertical) .metro-casas { grid-column: 2 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); }
  .metro:not(.metro--vertical) .casa { padding: calc(var(--ponto) + var(--e-4)) 0 0; }
  .metro:not(.metro--vertical) .casa-nivel { display: none; }
  /* trilho horizontal: do ponto desta casa até o da próxima, atravessando o vão da grade */
  .metro:not(.metro--vertical) .casa::before { left: calc(var(--ponto) / 2); right: calc(var(--e-6) * -1 - var(--ponto) / 2); top: calc(0.2rem + var(--ponto) / 2 - var(--trilho) / 2); bottom: auto; width: auto; height: var(--trilho); }
  .metro:not(.metro--vertical) .casa::after { top: 0.2rem; width: calc(var(--ponto) + (var(--qtd, 1) - 1) * 0.7rem); height: var(--ponto); }
  .metro[data-nivel="0"] .metro-niveis span:nth-child(2), .metro[data-nivel="1"] .metro-niveis span:nth-child(3),
  .metro[data-nivel="2"] .metro-niveis span:nth-child(4), .metro[data-nivel="3"] .metro-niveis span:nth-child(5) { color: var(--acento); }
  .metro[data-nivel="0"] .metro-niveis span:nth-child(2)::after, .metro[data-nivel="1"] .metro-niveis span:nth-child(3)::after,
  .metro[data-nivel="2"] .metro-niveis span:nth-child(4)::after, .metro[data-nivel="3"] .metro-niveis span:nth-child(5)::after { content: " · o seu"; }
}


/* ===== componentes/painel.css ===== */
/* PAINEL DE PONTOS · a página "eu" do presentes: saldo, hoje, dias seguidos, indicar um amigo,
   3 perguntas, histórico e presentes pegos. Cartões de tamanhos diferentes numa grade de 6 colunas
   (nada de 3 cartões iguais lado a lado). O saldo é o cartão grande; o resto se encaixa em volta.
   .painel-vazio é o estado de quem abriu o painel sem link. */
.painel { display: grid; gap: var(--e-3); }
.painel-cartao { display: grid; gap: var(--e-4); align-content: start; min-width: 0; padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--r-medio); }
.painel-cartao > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e-1, 0.25rem) var(--e-3); }
.painel-cartao h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: lining-nums; }
.painel-cartao > header span { font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0; color: var(--acento); white-space: nowrap; }
.painel-cartao p { font-size: 0.9375rem; line-height: 1.5; color: var(--tinta-2); }
@media (min-width: 48rem) {
  .painel { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e-4); }
  .painel-cartao { grid-column: span 3; }
  .painel-cartao--saldo { grid-column: span 4; grid-row: span 2; }
  .painel-cartao--hoje, .painel-cartao--dias { grid-column: span 2; }
  .painel-cartao--largo { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .painel-cartao--indicar { grid-column: span 4; }
  .painel-cartao--perguntas { grid-column: span 2; }
}

/* saldo: número grande + barra até 10 */
.painel-cartao .saldo-num { color: var(--tinta); font-family: var(--f-display); font-weight: 500; font-size: clamp(4rem, 3rem + 5vw, 7rem); line-height: 0.9; letter-spacing: var(--track-hero); font-variant-numeric: lining-nums; }
.painel-cartao .saldo-num small { margin-left: 0.4rem; font-size: 1.1rem; font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.barra-pontos { position: relative; height: 0.6rem; border-radius: var(--r-pilula); background: var(--fundo-3); overflow: hidden; }
.barra-pontos i { position: absolute; inset: 0 auto 0 0; width: calc(min(var(--p, 0), 10) * 10%); background: var(--acento); border-radius: inherit; }
.barra-marcas { display: flex; justify-content: space-between; align-items: start; gap: var(--e-4); line-height: 1.4; font-family: var(--f-corpo); font-size: var(--t-rotulo); letter-spacing: 0; color: var(--tinta-2); }
.barra-marcas span:last-child { text-align: right; }
.painel-cartao--saldo { align-content: space-between; }

/* dias seguidos: 9 quadradinhos, os marcos 3, 6 e 9 levam o número embaixo */
.dias { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0.3rem; }
.dias i { position: relative; aspect-ratio: 1; max-width: 1.6rem; border: 1.5px solid var(--linha-forte); border-radius: 3px; }
.dias i.on { background: var(--acento); border-color: var(--acento); }
.dias i.marco::after { content: attr(data-dia); position: absolute; top: calc(100% + 0.25rem); left: 50%; transform: translateX(-50%); font-family: var(--f-corpo); font-size: 0.75rem; font-style: normal; color: var(--tinta-2); }
.dias + p { margin-top: var(--e-3); }

/* lista com visto desenhado (regras do indicar) */
.lista-ok { display: grid; gap: var(--e-2); }
.lista-ok li { position: relative; padding-left: 1.6rem; font-size: 0.9375rem; line-height: 1.45; }
.lista-ok li::before { content: ""; position: absolute; left: 0.15rem; top: 0.42em; width: 0.7rem; height: 0.38rem; border: solid var(--acento); border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* link pessoal pra copiar: campo só leitura + botões que quebram pra baixo no celular */
.link-copia { display: grid; gap: var(--e-2); }
.link-copia input { width: 100%; min-width: 0; min-height: 2.9rem; padding: 0.6rem 0.8rem; font-family: var(--f-mono); font-size: 0.875rem; color: var(--tinta); background: var(--fundo); border: 1px solid var(--linha-forte); border-radius: var(--r); }
.link-copia input:hover { border-color: var(--tinta-2); }
.link-copia input:active { border-color: var(--tinta); }
.link-copia input:focus { border-color: var(--acento); }
.link-copia-botoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.link-copia-botoes .btn { flex: 1 1 12rem; }

/* histórico e presentes pegos: lista com fio, valor em mono à direita */
.extrato li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-3); align-items: baseline; padding-block: var(--e-3); border-bottom: 1px solid var(--linha); font-size: 0.9375rem; }
.extrato li:first-child { border-top: 1px solid var(--linha); }
.extrato small { display: block; font-family: var(--f-corpo); font-size: var(--t-rotulo); letter-spacing: 0; color: var(--tinta-2); }
.extrato b { font-family: var(--f-corpo); font-size: 0.9375rem; font-weight: 600; color: var(--acento); white-space: nowrap; }

.painel-pe { font-size: 0.875rem; color: var(--tinta-2); }

/* sem link: uma frase grande e a saída pelo WhatsApp */
.painel-vazio { display: grid; gap: var(--e-4); max-width: 36rem; padding-block: var(--e-8); }
.painel-vazio p:first-child { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--tinta); font-variant-numeric: lining-nums; text-wrap: balance; overflow-wrap: anywhere; }
.painel-vazio p { color: var(--tinta-2); }
.painel-vazio code { font-family: var(--f-mono); font-weight: 600; color: var(--acento); }


/* ===== componentes/prompt.css ===== */
/* PROMPT · bloco de texto pra copiar (prompt, comando, mensagem pronta) com o botão Copiar.
   O botão mora numa barra própria em cima do texto, nunca solto por cima dele: botão absoluto
   cobria o começo das linhas do prompt no guia dos anúncios (achado da fábrica em 05/10/2026).
   .prompt-barra = rótulo mono à esquerda + botão à direita; pre embaixo, quebra de linha livre. */
.prompt { min-width: 0; margin-top: var(--e-3); background: var(--fundo-3); color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--r-medio); overflow: hidden; }
.prompt-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-2) var(--e-3); padding: 0.5rem 0.5rem 0.5rem var(--e-4); border-bottom: 1px solid var(--linha); }
.prompt-barra span { font-family: var(--f-corpo); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.prompt-barra .btn { min-height: 2.5rem; padding: 0.4rem 1rem; font-size: var(--t-rotulo); flex: none; }
.prompt-barra .btn[data-copiado] { background: transparent; color: var(--acento); border-color: var(--acento); }
.prompt pre { margin: 0; padding: var(--e-4) var(--e-4) var(--e-5); white-space: pre-wrap; overflow-wrap: anywhere; font: 400 0.875rem/1.6 var(--f-mono); }

/* celular: prompt no mínimo do sistema */
@media (max-width: 40rem) { .prompt pre { font-size: var(--t-pequeno); } }


/* ===== componentes/roda.css ===== */
/* RODA DOS PRESENTES · as 5 linhas do metrô em volta do total, com o painel da linha escolhida ao lado.
   Origem: protótipo da thread Presentes (06/10/2026, prototipo-roda/index.html), no conceito da roda da central
   do IPV; entrou no sistema em 06/10/2026 já na letra aprovada (EB Garamond + Plex Sans).
   Monocromática como o metrô: trilho em --linha-forte, só a linha escolhida ganha o acento.
   Estação sem ícone: nome + contagem (5 círculos iguais com ícone em cima caíam em "cards iguais com ícone").
   Computador (60rem+): roda à esquerda, fixa na rolagem; painel à direita. Celular: roda em cima, o toque desce até o painel.
   A posição de cada estação vem do script da página (left/top em %, raio 37 num quadro de 100). */
.roda { display: grid; gap: var(--e-8); align-items: start; }
@media (min-width: 60rem) {
  .roda { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: var(--e-16); }
  .roda-palco { position: sticky; top: 6rem; }
}

.roda-palco { position: relative; width: min(100%, 30rem); aspect-ratio: 1; margin-inline: auto; }
.roda-trilhos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.roda-trilhos line { stroke: var(--linha-forte); stroke-width: 0.5; transition: stroke var(--t-medio) var(--ease); }
.roda-trilhos line.on { stroke: var(--acento); stroke-width: 0.7; }

.roda-centro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 32%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 0.1rem;
  background: var(--fundo-3); border: 1px solid var(--linha-forte);
}
.roda-centro b { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.roda-centro span { font-size: 0.9375rem; color: var(--tinta-2); }

.estacao-roda {
  position: absolute; transform: translate(-50%, -50%);
  width: 25%; aspect-ratio: 1; min-width: 4.75rem; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 0.25rem; padding: 0.4rem;
  background: var(--fundo-2); border: 1px solid var(--linha-forte); color: var(--tinta);
  font: inherit; cursor: pointer; text-align: center;
  transition: border-color var(--t-medio) var(--ease), background-color var(--t-medio) var(--ease);
}
.estacao-roda strong { font-family: var(--f-display); font-size: clamp(0.875rem, 0.78rem + 0.4vw, 1.1rem); font-weight: 600; line-height: 1.1; max-width: 8ch; text-wrap: balance; }
.estacao-roda .qtd { font-family: var(--f-display); font-size: 1.05rem; line-height: 1; color: var(--tinta-2); font-variant-numeric: lining-nums tabular-nums; }
/* hover só na cor do contorno; a estação não cresce (régua slop, 06/10/2026) */
.estacao-roda:hover { border-color: var(--tinta-2); }
.estacao-roda:active { background: var(--fundo-3); }
.estacao-roda[aria-pressed="true"] { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, var(--fundo-2)); }
.estacao-roda[aria-pressed="true"] .qtd { color: var(--acento); }
.estacao-roda:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }

/* painel da linha escolhida: lista com fio, título com a parte depois da barra em tinta-2.
   Uma coluna só (régua slop, 06/10/2026): título, texto com 45+ caracteres por linha, e embaixo a linha de
   nível + "Abrir o presente". Nada de rótulo ao lado do título, nem coluna estreita de texto. */
.roda-painel { min-width: 0; scroll-margin-top: 5rem; }
.roda-painel header { display: grid; gap: 0.3rem; padding-bottom: var(--e-5); border-bottom: 1px solid var(--linha-forte); }
.roda-painel h2 { font-size: var(--t-h2-menor); }
.roda-painel header p { font-size: var(--t-pequeno); color: var(--tinta-2); }
.roda-lista li { border-bottom: 1px solid var(--linha); }
.roda-lista a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "t t" "p p" "nv ir";
  gap: 0.4rem var(--e-5); align-items: baseline; padding-block: var(--e-5); text-decoration: none; color: var(--tinta);
}
.roda-lista h3 { grid-area: t; font-size: 1.25rem; line-height: 1.25; }
.roda-lista h3 span { display: block; margin-top: 0.15rem; font-family: var(--f-corpo); font-size: 0.9375rem; font-weight: 500; color: var(--tinta-2); }
.roda-lista p { grid-area: p; font-size: 0.9375rem; line-height: 1.5; color: var(--tinta-2); max-width: 40rem; }
.roda-lista .nv { grid-area: nv; margin-top: 0.3rem; font-size: var(--t-pequeno); color: var(--tinta-2); }
.roda-lista .ir { grid-area: ir; justify-self: start; margin-top: 0.3rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; font-weight: 500; white-space: nowrap; border-bottom: 1px solid color-mix(in srgb, var(--acento) 55%, transparent); padding-bottom: 2px; transition: color var(--t-medio) var(--ease), border-color var(--t-medio) var(--ease); }
.roda-lista a:hover { color: var(--tinta); }
.roda-lista a:hover .ir { color: var(--acento); border-color: var(--acento); }
.roda-lista a:active { opacity: 0.72; }
@media (prefers-reduced-motion: reduce) { .estacao-roda, .roda-trilhos line { transition: none; } }