/* ============================================================
   Overflow — tokens e componentes · 24/09/2026
   A FONTE ÚNICA do visual da marca. O guia (identidade-visual.html)
   e as aplicações importam este arquivo; qualquer página nova também:
     <link rel="stylesheet" href="assets/overflow.css">
   Mudou cor, fonte ou componente? Muda AQUI, e só aqui.
   ============================================================ */

@font-face { font-family: "Hanken Grotesk"; src: url(fontes/hanken-grotesk-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; src: url(fontes/hanken-grotesk-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Sora; src: url(fontes/sora-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Sora; src: url(fontes/sora-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tema claro ---------- */
:root, [data-tema="claro"] {
  --bg: #FBFBFC; --sup: #FFFFFF; --sup-2: #F4F5F7;
  --fio: #E4E6EA; --fio-forte: #D2D5DB;
  --tinta: #15171B; --tinta-2: #565B66; --tinta-3: #868C98;
  --acc: #1D4ED8; --acc-forte: #1E40AF; --acc-suave: #EAF0FE; --acc-fio: #C7D6FB; --acc-tinta: #FFFFFF;
  /* degradê de BOTÃO: horizontal. Degradê de TEXTO: diagonal, de um canto ao outro. */
  --grad: linear-gradient(100deg, #1E3A8A 0%, #1D4ED8 45%, #0E7490 100%);
  --grad-btn: var(--grad);
  --grad-texto: linear-gradient(to bottom right, #1E3A8A 0%, #1D4ED8 48%, #0E7490 100%);
  --grad-brilho: linear-gradient(to bottom right, #15171B 0%, #2A2E36 38%, #5A606B 62%, #1B1E23 100%);
  --grad-chao: linear-gradient(150deg, #1E3A8A 0%, #1D4ED8 52%, #0E7490 100%);
  --dado: #565B66; --dado-forte: #15171B;          /* série de gráfico: neutra, nunca o acento */
  --sombra-1: 0 1px 2px rgba(15,17,19,.05), 0 1px 3px rgba(15,17,19,.04);
  --sombra-2: 0 2px 4px rgba(15,17,19,.04), 0 12px 28px rgba(15,17,19,.08);
  --sombra-3: 0 6px 14px rgba(15,17,19,.07), 0 22px 48px rgba(15,17,19,.11);
  --aro: rgba(255,255,255,.9); --brilho: rgba(255,255,255,.55);
  --grao: .028; --grade-fio: rgba(21,23,27,.055);
  --fundo-texto: .045;
  --erro: #B42318; --erro-suave: #FEF3F2;   /* só para erro de formulário */
}
/* ---------- tema escuro ---------- */
[data-tema="escuro"] {
  --bg: #141516; --sup: #1C1E1F; --sup-2: #232527;
  --fio: #2C2F31; --fio-forte: #3D4143;
  --tinta: #E9EAEA; --tinta-2: #A5AAAC; --tinta-3: #868B8D;
  --acc: #7AA7FF; --acc-forte: #93B8FF; --acc-suave: #161D2E; --acc-fio: #26345A; --acc-tinta: #0B1020;
  --grad: linear-gradient(100deg, #5B8DEF 0%, #7AA7FF 45%, #67E8F9 100%);
  --grad-btn: linear-gradient(100deg, #6E9BF7 0%, #7AA7FF 55%, #93BDFF 100%);
  --grad-texto: linear-gradient(to bottom right, #5B8DEF 0%, #7AA7FF 45%, #67E8F9 100%);
  --grad-brilho: linear-gradient(to bottom right, #FFFFFF 0%, #E4E6E8 30%, #A9AEB3 62%, #F2F3F3 100%);
  --dado: #A5AAAC; --dado-forte: #E9EAEA;
  --sombra-1: 0 1px 2px rgba(0,0,0,.3);
  --sombra-2: 0 2px 6px rgba(0,0,0,.26), 0 14px 32px rgba(0,0,0,.34);
  --sombra-3: 0 6px 16px rgba(0,0,0,.32), 0 24px 56px rgba(0,0,0,.44);
  --aro: rgba(255,255,255,.05); --brilho: rgba(255,255,255,.13);
  --grao: .055; --grade-fio: rgba(233,234,234,.05);
  --fundo-texto: .05;
  --erro: #F97066; --erro-suave: #2A1614;
}
:root {
  --f-texto: "Hanken Grotesk", system-ui, sans-serif;
  --f-forte: Sora, system-ui, sans-serif;
  --r-pill: 999px; --r-lg: 34px; --r-md: 26px; --r-sm: 16px;
  --seta-peso: 2.6;
  /* o símbolo da marca como máscara — o eyebrow e o selo usam */
  --simbolo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6.61 6.61 34.77 34.77'%3E%3Cpath d='M36.889 20.784A15 15 0 1 1 27.216 11.111A8 8 0 0 0 36.889 20.784Z'/%3E%3Cpath d='M29.587 13.013a5.4 5.4 0 1 0 10.8 0a5.4 5.4 0 1 0-10.8 0Z'/%3E%3C/svg%3E");
}

/* ============================================================
   ÊNFASE — o texto é fino; o que importa ganha um destes
   ============================================================ */
.forte { font-weight: 700; }
.degrade { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.brilho { background: var(--grad-brilho); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* em bloco (título inteiro), o degradê atravessa o bloco todo de um canto ao outro */
.brilho-bloco, .degrade-bloco { width: fit-content; -webkit-background-clip: text; background-clip: text; color: transparent; }
.brilho-bloco { background-image: var(--grad-brilho); }
.degrade-bloco { background-image: var(--grad-texto); }
.grifo { display: inline-block; white-space: nowrap; line-height: .98; padding: .03em .3em .09em; margin: .1em 0 .04em; background: var(--acc-suave); color: var(--acc); border-radius: var(--r-pill); }
.grifo.pendura { margin-left: -.3em; }

/* eyebrow — o símbolo da marca em miniatura, em degradê, antes do rótulo */
.olho { display: inline-flex; align-items: center; gap: .6em; font-family: var(--f-forte); font-weight: 600; font-size: 13px; letter-spacing: -.005em; color: var(--tinta-2); }
.olho::before { content: ""; width: 1.15em; height: 1.15em; flex: none; background: var(--grad-texto); -webkit-mask: var(--simbolo) center / contain no-repeat; mask: var(--simbolo) center / contain no-repeat; }

/* ============================================================
   BOTÕES
   .btn      — conversão (landing, anúncio, proposta): degradê + seta
   .btn-cta  — o de conversão que chama: seta que dá o toque + pulso. Um por tela.
   .btn-2    — secundário: contorno, sobe no cursor
   .btn-3    — link com cara de link: sublinhado que acende no cursor
   .btn-ui   — interface de sistema: sólido, sem seta, sem efeito
   ============================================================ */
.btn { position: relative; overflow: hidden; isolation: isolate; font-family: var(--f-forte); font-weight: 600; letter-spacing: -.01em; font-size: 14.5px; line-height: 1.2; padding: 14px 24px 14px 26px; border-radius: var(--r-pill); border: 1px solid transparent; background: var(--grad-btn); color: var(--acc-tinta); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; box-shadow: var(--sombra-1); transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s; }
.btn .seta { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: var(--seta-peso); stroke-linecap: round; stroke-linejoin: round; transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%); background: linear-gradient(100deg, transparent 20%, var(--brilho) 50%, transparent 80%); }
.btn-cta { animation: ovf-pulso 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.btn-cta .seta { animation: ovf-chama 2.4s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes ovf-pulso { 0% { box-shadow: var(--sombra-1), 0 0 0 0 color-mix(in srgb, var(--acc) 42%, transparent); } 70%, 100% { box-shadow: var(--sombra-1), 0 0 0 14px color-mix(in srgb, var(--acc) 0%, transparent); } }
@keyframes ovf-chama { 0%, 55%, 100% { transform: none; } 70% { transform: translate(3px, -3px); } 80% { transform: translate(-1px, 1px); } 90% { transform: none; } }
.btn-2 { background: var(--sup); color: var(--tinta); border-color: var(--fio-forte); }
.btn-2::after { display: none; }
.btn-3 { background: none; box-shadow: none; border: 0; border-radius: 0; padding: 8px 2px; color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: var(--fio-forte); transition: color .2s, text-decoration-color .2s, text-underline-offset .2s; }
.btn-3::after { display: none; }
.btn-ui { background: var(--acc); color: var(--acc-tinta); font-size: 13.5px; padding: 10px 18px; gap: 8px; box-shadow: none; }
.btn-ui::after { display: none; }
.btn-ui.btn-2 { background: var(--sup); color: var(--tinta); border-color: var(--fio-forte); }
@media (hover: hover) {
  .btn:hover .seta { transform: translate(2px, -2px); }
  .btn:not(.btn-2):not(.btn-3):not(.btn-ui):hover::after { transform: translateX(120%); transition: transform .7s ease-out; }
  .btn-2:hover { transform: translateY(-2px); border-color: var(--tinta-3); box-shadow: var(--sombra-2); }
  .btn-3:hover { color: var(--acc); text-decoration-color: var(--acc); text-underline-offset: 4px; }
  .btn-ui:hover { background: var(--acc-forte); }
  .btn-ui.btn-2:hover { background: var(--sup-2); transform: none; box-shadow: none; }
}

/* ============================================================
   SUPERFÍCIES
   ============================================================ */
.cartao { position: relative; background: var(--sup); border: 1px solid var(--fio); border-radius: var(--r-md); box-shadow: var(--sombra-2); }
.cartao::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 var(--aro); pointer-events: none; }

/* caixa — um chão arredondado entre o fundo e o conteúdo. O conteúdo mora
   DENTRO dela, não direto no fundo da seção. */
.caixa { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: clamp(28px, 5vw, 64px); background: var(--sup); border: 1px solid var(--fio); box-shadow: var(--sombra-2); color: var(--tinta); }
.caixa-suave { background: var(--acc-suave); border-color: var(--acc-fio); box-shadow: none; }
.caixa-azul .btn-2 { background: #FFFFFF; color: #1D4ED8; border-color: transparent; }
.caixa-azul .btn-3 { color: #FFFFFF; text-decoration-color: rgba(255,255,255,.5); }
.caixa-azul { background: var(--grad-chao); border: 0; color: #FFFFFF; --tinta-2: rgba(255,255,255,.8); --fundo-texto: .08; }
.caixa[data-tema] { background: var(--sup); }

/* texto de fundo — uma palavra enorme, pesada, em opacidade baixa, atrás do conteúdo */
.texto-fundo { position: absolute; left: 50%; bottom: -.14em; transform: translateX(-50%); z-index: -1; pointer-events: none; user-select: none; white-space: nowrap; font-family: var(--f-texto); font-weight: 800; font-size: clamp(120px, 20vw, 320px); line-height: .8; letter-spacing: -.06em; color: currentColor; opacity: var(--fundo-texto); }

/* ============================================================
   PEÇAS
   ============================================================ */
.tarja { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-forte); font-weight: 700; font-size: 12px; padding: 6px 12px 6px 10px; border-radius: var(--r-pill); background: var(--acc-suave); color: var(--acc); border: 1px solid var(--acc-fio); white-space: nowrap; }
.ponto { position: relative; width: 8px; height: 8px; border-radius: 999px; background: currentColor; flex: none; }
.ponto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid currentColor; animation: ovf-respira 2.6s ease-out infinite; }
@keyframes ovf-respira { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-forte); font-weight: 600; font-size: 12.5px; padding: 7px 14px; border-radius: var(--r-pill); background: var(--sup-2); color: var(--tinta-2); border: 1px solid var(--fio); white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--bg); border-color: var(--tinta); }
.selo { position: relative; width: 48px; height: 48px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--acc-suave); color: var(--acc); }
.selo::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 1px solid var(--acc-fio); }
.selo svg { width: 24px; height: 24px; }
.campo { display: grid; gap: 7px; }
.campo label { font-family: var(--f-forte); font-weight: 600; font-size: 13px; }
.campo input { font: inherit; font-size: 15.5px; color: var(--tinta); background: var(--sup); border: 1px solid var(--fio-forte); border-radius: var(--r-pill); padding: 13px 20px; min-width: 0; }
.campo input::placeholder { color: var(--tinta-3); }
.campo .ajuda { font-size: 13.5px; color: var(--tinta-2); padding-left: 20px; }
.etapa { position: relative; padding-top: 22px; }
.etapa::before { content: ""; position: absolute; top: 0; left: 0; width: 42px; height: 3px; border-radius: 3px; background: var(--grad-texto); }
.etapa .n { font-family: var(--f-forte); font-weight: 700; font-size: 13px; color: var(--acc); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}