/* ==========================================================================
   Shape — site publico (landing, entrar, cadastro, senha, MFA, legais)
   CARTAZ (D13; DESIGN 10 e 13.10; design/final/landing.html). So tokens
   semanticos de tokens.css + componentes de shape.css. Sem estilo inline (CSP).
   ========================================================================== */

body.pub { background: var(--bg); color: var(--txt); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
body.pub > main { flex: 1 0 auto; outline: none; }
.pw { width: 100%; max-width: calc(var(--container) + 2 * var(--grid-margin)); margin: 0 auto; padding: 0 var(--grid-margin); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--txt); color: var(--bg); padding: 10px 14px; border-radius: 10px;
  font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.ic { width: 20px; height: 20px; flex: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Botao com cara de link (Reenviar codigo, Trocar e-mail, Gerar outra chave): sem "font: inherit", que aqui (depois do
   shape.css) apagava o peso e o tamanho do .link e deixava o botao em 16 px regular ao lado dos links em 14 px bold. */
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- Cabecalho e rodape ---------- */
.pub-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 72px; }
.pub-logo { display: inline-flex; align-items: center; color: var(--txt); min-height: var(--tap); }
.pub-logo .logo { height: 32px; }
.pub-anchors { display: none; list-style: none; margin: 0; padding: 0; gap: 28px; font-weight: 600; font-size: 15px; }
.pub-anchors a { text-decoration: none; }
.pub-anchors a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pub-acts { display: flex; gap: 8px; align-items: center; }
.pub-acts .pub-cta { display: none; }

.pub-foot { background: var(--p-tinta); color: var(--p-papel); padding: 40px 0 48px; font-size: 14px; margin-top: auto; }
.pub-foot .logo-foot { height: 40px; color: var(--p-papel); }
.pub-foot .logo-foot .logo-dot { fill: var(--p-brasa-500); }
.pub-foot .aviso { border-left: 4px solid var(--p-brasa-500); padding: 4px 0 4px 14px; color: #F7F2EA; font-size: 15px; line-height: 1.45; margin: 24px 0; max-width: 620px; }
.pub-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: #BDB4AA; }
.pub-foot a { color: #F7F2EA; }
.pub-foot :focus-visible { outline-color: var(--p-brasa-500); }

/* ---------- Mensagens ---------- */
.pub-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 15px; line-height: 1.4; margin: 0 0 16px; }
.pub-alert .ic { margin-top: 1px; }
.pub-alert-err { background: var(--perigo-soft); color: var(--txt); box-shadow: inset 4px 0 0 var(--perigo); }
.pub-alert-err .ic { color: var(--perigo); }
.pub-alert-ok { background: var(--sucesso-soft); color: var(--txt); box-shadow: inset 4px 0 0 var(--sucesso); }
.pub-alert-ok .ic { color: var(--sucesso); }
.pub-alert-info { background: var(--info-soft); color: var(--txt); box-shadow: inset 4px 0 0 var(--info); }
.pub-alert-info .ic { color: var(--info); }
.msg-err .ic, .fld .msg-err svg { width: 16px; height: 16px; }

/* ---------- Telas de conta (DESIGN 10: uma coluna de 440 px, cards calmos) ---------- */
.pub-narrow { width: 100%; max-width: 520px; margin: 0 auto; padding: 8px var(--grid-margin) 56px; }
.auth-card { background: var(--bg-elev); border-radius: var(--r-xl); box-shadow: var(--sh-1), var(--card-ring); padding: 24px 20px 28px; }
.auth-card > .kicker { display: block; }
.auth-title { font-size: 40px; margin: 8px 0 10px; }
.auth-lead { margin: 0 0 18px; color: var(--txt-2); font-size: 16px; line-height: 1.5; }
.auth-lead b { color: var(--txt); word-break: break-all; }
.auth-form { display: grid; gap: 16px; margin: 0 0 8px; }
.auth-form + .auth-form { margin-top: 12px; }
.auth-form .btn-block { margin-top: 4px; }
.auth-form .t-cap { margin: 0; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 8px 0 0; }
.auth-links .auth-inline { display: inline; }
.auth-inline { margin: 0; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.auth-card .fld .help { margin: 0; }
.fld .msg-err { margin: 0; }
.reveal-wrap { position: relative; }
.reveal-wrap .input { padding-right: 56px; }
.reveal { position: absolute; right: 4px; top: 4px; height: 44px; min-width: 44px; border: 0; background: transparent; border-radius: 10px; color: var(--txt-2);
  font-size: 13px; font-weight: 700; padding: 0 10px; }
.reveal:hover { color: var(--txt); }
.input-code { font-family: var(--font-mono); font-size: 22px; letter-spacing: .18em; text-align: center; }
.textarea { min-height: 120px; padding: 12px 14px; line-height: 1.45; resize: vertical; }

/* Passo "1 de 8" */
.steps-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.steps-bar .dots { display: flex; gap: 6px; }
.steps-bar .dots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--brd-strong); display: block; }
.steps-bar .dots i.on { box-shadow: inset 0 0 0 3px var(--accent); }

/* Medidor de forca da senha (so dica; a regra e do servidor) */
.meter { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-top: -8px; }
.meter-bar { height: 6px; border-radius: 99px; background: var(--bg-elev-2); overflow: hidden; }
.meter-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--txt-3); transition: width var(--dur-fast) var(--ease-out); }
.meter[data-level="1"] .meter-bar i { width: 25%; background: var(--txt-3); }
.meter[data-level="2"] .meter-bar i { width: 55%; background: var(--txt-2); }
.meter[data-level="3"] .meter-bar i { width: 80%; background: var(--txt); }
.meter[data-level="4"] .meter-bar i { width: 100%; background: var(--st-dentro); }

/* Codigo de 6 digitos em 6 caixas */
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; border: 0; padding: 0; margin: 0; }
.otp-d { width: 100%; min-height: 64px; text-align: center; font-family: var(--font-display); font-stretch: var(--wdth-num); font-weight: 900; font-size: 36px;
  border-radius: var(--r-field); background: var(--bg-elev); border: 1.5px solid var(--brd-field); color: var(--txt); outline: none; padding: 0; }
.otp-d:focus { border-color: var(--txt); box-shadow: 0 0 0 3px var(--accent-soft); }
.otp-d[aria-invalid="true"] { border-color: var(--perigo); }

/* Consentimentos (caixas separadas, desmarcadas; DESIGN 9.2) */
.consents { border: 0; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.consents legend { padding: 0; margin-bottom: 4px; }
.consent { border-radius: 16px; background: var(--bg-elev-2); padding: 12px 14px; }
.consent-req { background: var(--bg-elev); box-shadow: inset 0 0 0 1.5px var(--brd-strong); }
.consents-err .consent-req:not(:has(input:checked)) { box-shadow: inset 0 0 0 2px var(--perigo); }
.consent-row { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; cursor: pointer; position: relative; }
.consent-row input { position: absolute; opacity: 0; width: 28px; height: 28px; margin: 0; cursor: pointer; }
.consent-box { width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--brd-field); display: grid; place-items: center; background: var(--bg-elev);
  color: transparent; margin-top: 1px; }
.consent-box .ic { width: 18px; height: 18px; stroke-width: 3; }
.consent-row input:checked + .consent-box { background: var(--txt); box-shadow: none; color: var(--bg); }
.consent-row input:focus-visible + .consent-box { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.consent-txt b { font-weight: 750; }
.consent-sum { display: block; font-size: 14px; line-height: 1.45; color: var(--txt-2); margin-top: 3px; }
.chip-opt { height: 22px; font-size: 11.5px; padding: 0 8px; margin-left: 4px; vertical-align: 1px; }
.consent-group { display: grid; gap: 10px; padding: 12px 0 2px; border-top: 1px dashed var(--brd-strong); }
.consent-group-t { margin: 0; }
.consent-note, .consent-hint { margin: 0; }
.consent-hint { display: flex; gap: 6px; align-items: center; color: var(--info); font-weight: 650; }
.consent-hint .ic { width: 16px; height: 16px; }

/* Texto integral (prova por hash: exibido exatamente como publicado) */
.doc { margin: 8px 0 0 40px; }
.doc summary { cursor: pointer; color: var(--accent-text); font-weight: 650; font-size: 14px; min-height: 32px; display: inline-flex; align-items: center; }
.doc-body { margin-top: 6px; max-height: 280px; overflow: auto; background: var(--bg-elev); border-radius: 12px; padding: 12px 14px;
  box-shadow: inset 0 0 0 1px var(--brd); }
.doc-body .t-cap { margin: 0 0 6px; }
.doc-text { white-space: pre-wrap; margin: 0; font-size: 14px; line-height: 1.5; }
.doc-h { font-size: 15px; margin: 14px 0 4px; }
.doc-h:first-child { margin-top: 0; }

/* MFA */
.mfa-qr { display: grid; place-items: center; margin: 4px 0 10px; }
.mfa-qr .qr { background: #fff; border-radius: 16px; box-shadow: var(--sh-1), var(--card-ring); width: 208px; height: 208px; }
.mfa-secret code, .codes code, .hash { font-family: var(--font-mono); }
.mfa-secret { margin: 0 0 18px; font-size: 18px; letter-spacing: .06em; overflow-wrap: anywhere; }   /* quebra entre os grupos de 4, nunca no meio */
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; padding: 0; margin: 0 0 8px; }
.codes li { background: var(--bg-elev-2); border-radius: 10px; padding: 10px 12px; text-align: center; font-size: 17px; letter-spacing: .06em; }

/* ---------- Paginas legais ---------- */
.legal { max-width: 820px; padding-top: 8px; padding-bottom: 64px; }
.legal-head { margin-bottom: 24px; }
.legal-title { font-size: 48px; margin: 8px 0 14px; }
.legal-draft { background: var(--aviso-soft); color: var(--txt); border-radius: 14px; padding: 12px 14px; margin: 0 0 10px; font-size: 15px; line-height: 1.45;
  box-shadow: inset 4px 0 0 var(--aviso); }
.legal-note { background: var(--bg-elev-2); border-radius: 14px; padding: 12px 14px; }
.legal-toc ol { margin: 0; padding: 14px 18px 14px 34px; background: var(--bg-elev); border-radius: 16px; box-shadow: var(--sh-1), var(--card-ring);
  columns: 2; column-gap: 28px; font-size: 15px; line-height: 1.9; }
.legal section { margin-top: 34px; scroll-margin-top: 16px; }
.legal h2 { font-family: var(--font-display); font-stretch: var(--wdth-head); font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: -.01em; margin: 0 0 12px; }
.legal-h3 { font-size: 18px; margin: 24px 0 8px; }
.legal p, .legal li { font-size: 16px; line-height: 1.6; }
.legal ul { padding-left: 22px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--brd); line-height: 1.45; }
.legal th { font-stretch: var(--wdth-kicker); font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-2); }
.legal .tbl-wrap { overflow-x: auto; background: var(--bg-elev); border-radius: 16px; box-shadow: var(--sh-1), var(--card-ring); }
.doc-quote { margin: 0 0 8px; padding: 14px 16px; background: var(--bg-elev); border-radius: 14px; box-shadow: inset 4px 0 0 var(--txt); white-space: pre-wrap; line-height: 1.55; }
.hash { font-size: 12px; word-break: break-all; }
.pend { background: var(--aviso-soft); color: var(--aviso); border-radius: 6px; padding: 0 6px; font-weight: 700; font-size: .9em; }
.legal p .link, .legal li .link, .legal td .link { display: inline; min-height: 0; font-size: inherit; }
.lead-sm { font-size: 17px; line-height: 1.55; color: var(--txt-2); margin: 0; }
.legal-form { max-width: 520px; background: var(--bg-elev); border-radius: 20px; padding: 18px; box-shadow: var(--sh-1), var(--card-ring); }
.dsr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.dsr-list li { background: var(--bg-elev); border-radius: 12px; padding: 10px 12px; font-size: 15px; }

/* ==========================================================================
   LANDING (DESIGN 13.10)
   ========================================================================== */
.pub-landing .sec { padding: 64px 0; }
.s-ink { background: var(--p-tinta); color: var(--p-papel); }
.s-ink .kicker { color: #BDB4AA; } .s-ink .lead { color: #D6CDC2; }
.s-brasa { background: var(--p-brasa-500); color: var(--p-tinta); }
.s-brasa .kicker { color: var(--p-tinta); }
.s-acai { background: var(--p-acai); color: var(--p-papel); }
.s-acai .kicker { color: #CDBFD6; } .s-acai .lead { color: #E3D8EA; }
.pub-landing h1, .pub-landing h2, .pub-landing h3 { margin: 0; }
.h2 { font-family: var(--font-display); font-stretch: 64%; font-weight: 900; font-size: 46px; line-height: .9; letter-spacing: -0.015em; text-wrap: balance; margin-top: 14px !important; }
.h2-wide { max-width: 980px; }
.h2-card { font-size: 44px; margin-top: 10px !important; }
.lead { font-size: 18px; line-height: 1.5; color: var(--txt-2); max-width: 580px; margin: 18px 0 0; }
.lead-center { text-align: center; margin: 56px auto 0; }
mark.faixa { background: var(--p-brasa-500); color: var(--p-tinta); padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* hero */
.hero { padding-top: 12px; padding-bottom: 44px; overflow-x: clip; }
.hero-kicker { font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.hero-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-dot); display: block; }
.hero-title { font-family: var(--font-display); font-stretch: 62%; font-weight: 900; font-size: 66px; line-height: .86; letter-spacing: -0.02em; margin: 16px 0 0 !important; }
.hero-form { margin-top: 26px; scroll-margin-top: 24px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.wl { display: grid; gap: 10px; max-width: 520px; }
.wl form { display: grid; grid-template-columns: 1fr; gap: 8px; }
.wl .input { min-height: 56px; font-size: 17px; }
.wl .btn { min-height: 56px; font-size: 17px; border-radius: 16px; }
/* Erro fora de .fld (lista de espera e autorizacoes do cadastro; DESIGN 9.2): icone e texto na mesma linha, em --perigo.
   Antes so o .fld .msg-err tinha estilo: o icone ficava sozinho numa linha e o texto saia em tinta normal. */
.wl-err, .consents > .msg-err { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--perigo); font-size: var(--fs-14);
  font-weight: var(--fw-ui-bold); line-height: 1.4; }
.wl-err .ic, .consents > .msg-err .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.micro { font-size: 14px; color: var(--txt-2); display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.wl .micro { margin: 0; }
.micro .ic { width: 16px; height: 16px; color: var(--st-dentro); }
.wl .ok { display: none; padding: 14px 16px; border-radius: 16px; background: var(--bg-elev); box-shadow: var(--sh-1), var(--card-ring); outline: none; }
.wl.done form { display: none; } .wl.done .ok { display: block; } .wl.done .wl-err { display: none; }
.wl .ok .n { font-family: var(--font-display); font-stretch: 62%; font-weight: 900; font-size: 44px; line-height: .9; display: block; margin: 4px 0 6px; }
.wl .ok .t-cap { display: block; }
.hero-vis { position: relative; height: 600px; margin-top: 36px; }
.hero-vis .sol { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: var(--p-brasa-500); left: 50%; top: 60px; transform: translateX(-50%); }
.hero-vis .pm { position: absolute; border-radius: 10px; box-shadow: 0 24px 40px -20px rgba(20,17,15,.6); width: 205px; height: auto; }
.hero-vis .pm1 { left: calc(50% - 196px); top: 26px; transform: rotate(-9deg); }
.hero-vis .pm2 { left: calc(50% + 78px); top: 286px; transform: rotate(7deg); }
.hero-vis .phone-wrap { position: absolute; left: 50%; top: 0; transform: translateX(-50%); zoom: .7; }
.exemplo { position: absolute; left: 0; bottom: 8px; font-size: 11px; font-weight: 800; font-stretch: 118%; letter-spacing: .08em; text-transform: uppercase;
  background: var(--p-tinta); color: var(--p-papel); padding: 4px 9px; border-radius: 99px; }

/* celular de exemplo (moldura das pranchetas) */
.phone { position: relative; width: 390px; height: 844px; border-radius: 56px; overflow: hidden; background: var(--p-papel); color: var(--p-tinta);
  box-shadow: 0 0 0 11px #0E0D0C, 0 0 0 12.5px #4A4541, 0 50px 90px -40px rgba(20,17,15,.55); margin: 12px; isolation: isolate;
  /* A tela do exemplo e sempre a do tema claro (prancheta A3): sem isto, no escuro do sistema as bolinhas da semana e os
     rotulos herdavam o creme do tema e sumiam no cartao branco. */
  color-scheme: light; --txt: var(--p-tinta); --txt-2: #5E5751; --txt-3: #736A61; --brd-field: #8C8174; --accent-text: var(--p-brasa-700);
  --bg-elev: #FFFFFF; --bg-elev-2: #F4EDE3; --sh-1: 0 1px 2px rgba(20,17,15,.06), 0 1px 1px rgba(20,17,15,.04); --card-ring: 0 0 0 1px rgba(20,17,15,.05); }
.phone .island { position: absolute; top: 11px; left: 50%; width: 124px; height: 36px; margin-left: -62px; background: #000; border-radius: 20px; z-index: 200; }
.phone .sbar { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; padding: 6px 30px 0 46px; z-index: 150;
  font-family: -apple-system, "Archivo", sans-serif; font-weight: 650; font-size: 17px; }
.phone .homebar { position: absolute; bottom: 8px; left: 50%; width: 136px; height: 5px; margin-left: -68px; border-radius: 3px; background: var(--p-tinta); z-index: 210; opacity: .9; }
.phone .scr { position: absolute; inset: 0; padding: 54px 16px 0; overflow: hidden; display: flex; flex-direction: column; gap: 9px; }
.phone .card { background: #fff; color: var(--p-tinta); }
.phone .kicker, .phone .t-cap { color: #5E5751; }
.phone .plate .kicker { color: #B3AAA0; }
.ph-top { display: flex; align-items: flex-end; justify-content: space-between; padding: 6px 2px 0; }
.ph-hi { font-size: 31px; margin-top: 4px; }
.ph-plate { display: grid; grid-template-columns: 106px 1fr; gap: 12px; align-items: center; padding: 12px; }
.ph-sun { width: 106px; height: 106px; }
.ph-sun .num { font-size: 42px; }
.ph-lbl { font-size: 28px; margin: 2px 0; }
.ph-txt { margin: 0; font-size: 13.5px; line-height: 1.35; }
.ph-was { font-size: 13px; font-weight: 650; opacity: .82; text-decoration: line-through; margin-top: 6px; }
.ph-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin: 4px 0 10px; }
.ph-ttl { font-size: 26px; line-height: .95; }
.ph-cn { font-size: 74px; }
.ph-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-btns .btn { min-height: 50px; border-radius: 16px; }
.ph-btns .btn-tint { font-size: 14px; }
.ph-card { padding: 12px 14px; }
.ph-card .week { margin-top: 8px; }
.ph-voz { margin: 5px 0 0; font-size: 18px; }
.phone .wd i { width: 24px; height: 24px; }

/* sol de prontidao (SVG do servidor) */
.sun .ray-pronto { fill: var(--rd-pronto); } .sun .ray-ok { fill: var(--rd-ok); } .sun .ray-leve { fill: var(--rd-leve); }
.sun .ray-recupere { fill: var(--rd-recupere); } .sun .ray-off { fill: var(--rd-off); } .sun .ray-mark { fill: var(--txt-plate-2); }

/* faixa */
.marq { overflow: hidden; white-space: nowrap; padding: 18px 0; }
.marq div { display: inline-flex; gap: 22px; align-items: center; font-family: var(--font-display); font-stretch: 66%; font-weight: 900; font-size: 34px; }
.marq i { width: 14px; height: 14px; border-radius: 50%; background: var(--p-brasa-500); display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .marq div { animation: marq 38s linear infinite; } }
@keyframes marq { to { transform: translateX(-50%); } }

/* problema + demo */
.prob { display: grid; gap: 28px; }
.demo { border-radius: 28px; background: var(--bg-elev); box-shadow: var(--sh-2), var(--card-ring); padding: 20px; }
.demo fieldset { border: 0; padding: 0; margin: 0; } .demo legend { font-weight: 700; font-size: 16px; margin-bottom: 10px; padding: 0; }
.radios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.radios label { position: relative; display: grid; place-items: center; min-height: 56px; border-radius: 16px; background: var(--bg-elev-2); cursor: pointer;
  font-family: var(--font-display); font-stretch: 62%; font-weight: 900; font-size: 30px; }
.radios input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.radios label:has(input:checked) { background: var(--txt); color: var(--bg); }
.radios label:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.demo .poster { margin-top: 14px; }
.demo .poster h3 { font-family: var(--font-display); font-stretch: 70%; font-weight: 900; font-size: 34px; line-height: .95; margin-top: 4px; }
.demo .was { font-size: 14px; font-weight: 650; text-decoration: line-through; text-decoration-thickness: 2px; opacity: .8; min-height: 18px; }
.demo .why { font-size: 15px; line-height: 1.4; margin: 10px 0 12px; font-weight: 500; }
.demo .mini-plate { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; }
.demo .mini-plate .sun { width: 64px; height: 64px; } .demo .mini-plate .sun .num { font-size: 26px; }
.mini-lbl { font-size: 24px; }
.demo-keep { min-height: 48px; border-radius: 14px; }
.demo .note { margin: 12px 0 0; font-size: 13px; color: var(--txt-2); }

/* como funciona */
.steps-3 { display: grid; gap: 28px; margin-top: 36px; }
.step { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: start; border-top: 4px solid var(--p-tinta); padding-top: 14px; }
.step .n { font-family: var(--font-display); font-stretch: 62%; font-weight: 900; font-size: 128px; line-height: .78; letter-spacing: -0.04em; }
.step h3 { font-family: var(--font-display); font-stretch: 70%; font-weight: 880; font-size: 30px; line-height: .95; }
.step p { margin: 8px 0 0; font-size: 16px; line-height: 1.45; }

/* tres apps */
.apps { display: grid; gap: 16px; margin-top: 32px; }
.app { position: relative; border-radius: 28px; padding: 22px; color: var(--on-mod); overflow: hidden; min-height: 400px; display: flex; flex-direction: column; }
.app[data-mod="forca"] { background: var(--mod-forca); } .app[data-mod="corrida"] { background: var(--mod-corrida); } .app[data-mod="bike"] { background: var(--mod-bike); }
.app .kicker { color: var(--on-mod); padding-right: 64px; }
.app h3 { font-family: var(--font-display); font-stretch: 66%; font-weight: 900; font-size: 44px; line-height: .9; margin-top: 8px; }
.app p { font-size: 16px; line-height: 1.45; margin: 10px 0 0; max-width: 340px; font-weight: 500; }
.app .big { margin-top: auto; padding-top: 22px; font-size: 112px; } .app .na.big { font-size: 84px; }
.app .shp { height: 56px; margin-top: 12px; color: var(--p-tinta); } .app .shp svg { width: 100%; height: 56px; }
.app .pic { position: absolute; top: 18px; right: 18px; width: 54px; height: 54px; border-radius: 50%; background: rgba(20,17,15,.1); display: grid; place-items: center; }
.app .pic svg { width: 34px; height: 34px; }

/* prova */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; margin-top: 36px; }
.proof > div { border-top: 3px solid #3A3430; padding-top: 12px; }
.proof .cn { font-size: 96px; color: var(--p-papel); }
.proof .proof-unit { font-size: .15em; }
.proof p { margin: 8px 0 0; font-size: 15px; color: #D6CDC2; line-height: 1.4; }
.wall { display: flex; gap: 14px; margin-top: 44px; justify-content: center; align-items: flex-start; flex-wrap: nowrap; }
.wall img { border-radius: 10px; box-shadow: 0 30px 50px -24px rgba(0,0,0,.8); flex: none; width: 31%; max-width: 238px; height: auto; }
.wall .w1 { transform: rotate(-4deg); } .wall .w2 { transform: translateY(26px) rotate(2.5deg); } .wall .w3 { transform: rotate(-1.5deg); }

/* projeto 52 */
.p52 { display: grid; gap: 28px; align-items: center; }
.g52 svg { width: 100%; height: auto; }
.g52 .g-on { fill: var(--p-brasa-500); } .g52 .g-now { fill: var(--p-papel); }
.g52 .g-off { fill: none; stroke: rgba(251,246,239,.3); } .g52 .g-pause { fill: none; stroke: var(--p-brasa-500); }

/* coach + dados + faq */
.duo { display: grid; gap: 16px; }
.duo .card { border-radius: 28px; padding: 22px; }
.duo .bubble { margin-top: 10px; }
.duo .bubble .kicker { display: flex; margin-bottom: 4px; }
.ia-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 99px; background: var(--bg-elev-2); margin-top: 14px; }
.ia-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-dot); display: block; }
.checks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; font-size: 15px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.checks .link { display: inline; min-height: 0; }
.checks .ic { width: 20px; height: 20px; color: var(--st-dentro); margin-top: 1px; }
.faq { display: grid; margin-top: 28px; }
.faq details { border-top: 1px solid var(--brd); padding: 4px 0; }
.faq summary { font-weight: 700; font-size: 17px; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-stretch: 62%; font-weight: 900; font-size: 28px; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: 0 0 14px; color: var(--txt-2); font-size: 15px; }

/* fim */
.fim .giant { font-family: var(--font-display); font-stretch: 62%; font-weight: 900; font-size: 112px; line-height: .8; letter-spacing: -0.03em; }
.fim .giant i { display: inline-block; width: .19em; height: .19em; border-radius: 50%; background: var(--p-tinta); margin-left: .03em; }
.fim-name { margin: 14px 0 22px; font-weight: 750; font-size: 16px; }
.fim .wl .input { background: var(--p-papel); border-color: var(--p-tinta); color: var(--p-tinta); }
.fim .wl .input::placeholder { color: #5E5751; }
.fim .wl .btn-ink { background: var(--p-tinta); color: var(--p-papel); }
.fim .wl .micro, .fim .wl .micro .ic { color: var(--p-tinta); }
.fim .wl .ok { background: var(--p-papel); color: var(--p-tinta); }
.fim .wl .ok .kicker, .fim .wl .ok .t-cap { color: #5E5751; }
.fim .wl-err { color: var(--p-tinta); background: var(--p-papel); padding: 8px 10px; border-radius: 10px; }
.fim .hero-ctas .btn-ink { background: var(--p-tinta); color: var(--p-papel); }
.s-brasa :focus-visible { outline-color: var(--p-tinta); }

/* ==========================================================================
   Tablet e desktop
   ========================================================================== */
@media (min-width: 768px) {
  .pub-narrow { padding-top: 24px; }
  .auth-card { padding: 32px 32px 34px; }
  .auth-title { font-size: 52px; }
  .legal-title { font-size: 64px; }
  .pub-landing .sec { padding: 88px 0; } .h2 { font-size: 64px; } .hero-title { font-size: 96px; }
  .wl form { grid-template-columns: 1fr auto; }
  .steps-3 { grid-template-columns: repeat(3, 1fr); } .step { grid-template-columns: 1fr; }
  .apps { grid-template-columns: repeat(3, 1fr); } .proof { grid-template-columns: repeat(4, 1fr); }
  .duo { grid-template-columns: 1fr 1fr; } .faq { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}
@media (min-width: 1200px) {
  .pub-nav { height: 88px; } .pub-anchors { display: flex; } .pub-acts .pub-cta { display: inline-flex; }
  .hero { padding-top: 24px; padding-bottom: 72px; display: grid; grid-template-columns: 1fr 560px; gap: 56px; align-items: center; }
  .hero-title { font-size: 128px; margin-top: 22px !important; } .hero .lead { font-size: 20px; max-width: 610px; }
  .hero-vis { height: 720px; margin-top: 0; } .hero-vis .sol { width: 540px; height: 540px; top: 80px; }
  .hero-vis .phone-wrap { zoom: .84; top: 10px; } .hero-vis .pm1 { left: -40px; top: 70px; } .hero-vis .pm2 { left: 330px; top: 320px; }
  .marq div { font-size: 44px; }
  .prob { grid-template-columns: 1fr 540px; gap: 80px; align-items: center; }
  .h2 { font-size: 88px; } .step .n { font-size: 200px; } .step h3 { font-size: 38px; }
  .app { min-height: 520px; padding: 28px; } .app h3 { font-size: 56px; } .app .big { font-size: 132px; } .app .na.big { font-size: 100px; }
  .proof .cn { font-size: 140px; }
  .p52 { grid-template-columns: 1fr 560px; gap: 64px; }
  .fim { display: grid; grid-template-columns: 1fr 520px; align-items: end; gap: 40px; } .fim .giant { font-size: 236px; }
  .h2-card { font-size: 44px; }
}
@media (max-width: 420px) {
  .hero-title { font-size: 58px; }
  .hero-vis { height: 560px; }
  .hero-vis .phone-wrap { zoom: .64; }
  .hero-vis .sol { width: 340px; height: 340px; }
  .hero-vis .pm { width: 170px; }
  .hero-vis .pm1 { left: calc(50% - 176px); }
  .hero-vis .pm2 { left: calc(50% + 40px); top: 300px; }
  .proof .cn { font-size: 80px; }
  .fim .giant { font-size: 96px; }
  .legal-toc ol { columns: 1; }
  .otp { gap: 6px; }
  .otp-d { min-height: 56px; font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo .poster { transition: none; }
}