/* Home · Raphael Cyborg / Synapse Sales. Identity: navy, Synapse Burn, human + machine. */

/* Self-hosted fonts, latin subset, only the weights in use. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/poppins-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/jetbrains-mono-latin-800-normal.woff2") format("woff2"); }

@property --split { syntax: '<percentage>'; inherits: true; initial-value: 50%; }

:root {
  --void: #02060b;
  --deep: #051221;
  --navy: #0a2a4e;
  --burn: #ff5733;
  --ink: #eaeff4;
  --paper: #eaeff4;
  --muted: #7d8da0;
  --gut: clamp(18px, 3vw, 40px);
  --cut: 28px;
  --line: rgba(234, 239, 244, 0.045);
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--void); }
body { font-family: Lato, system-ui, sans-serif; color: var(--ink); background: var(--void); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, strong, .big, .row, .fim-big, .manifesto-txt, blockquote p { font-family: Poppins, system-ui, sans-serif; }
em { font-style: normal; }

/* Machine voice: every word the robots "say" switches face and color. */
.mq { font-family: "JetBrains Mono", monospace; font-weight: 800; color: var(--burn); letter-spacing: -0.06em; }

.tag { display: block; font: 500 0.68rem/1.4 "JetBrains Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* ---------- Loading screen ---------- */
.loader { display: none; }
.js .loader { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: var(--burn); color: var(--void); clip-path: inset(0 0 0 0); transition: clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1); }
.js .loader.out { clip-path: inset(0 0 100% 0); pointer-events: none; }
/* Brand symbol v2 (human S + machine S + spark), single color over the burn. Geometry from 05-Marca/logo/v2-ss. */
.loader-s { width: clamp(76px, 8vw, 116px); overflow: visible; --s-ink: var(--void); }
.loader-s .s-bg { opacity: 0.16; }
.loader-s .s-fill { fill: var(--s-ink); }
.loader-s .s-trace, .loader-s .s-pad { fill: none; stroke: var(--s-ink); }
.loader-s .s-trace { stroke-width: 4.4; stroke-linejoin: miter; }
.loader-s .s-pad { stroke-width: 1.7; }
.loader-s .s-pen { fill: none; stroke: var(--s-ink); stroke-width: 7; stroke-linecap: round; }
.loader-s .s-fg { stroke-dasharray: 100; stroke-dashoffset: 100; }
.loader-s .s-spark { fill: var(--s-ink); transform-box: fill-box; transform-origin: center; transform: scale(0); }
.loader-txt { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 64px); display: flex; justify-content: center; gap: 14px; font: 800 0.9rem/1 Poppins, system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }
.loader-txt b { font: 800 0.9rem/1 "JetBrains Mono", monospace; min-width: 4ch; font-variant-numeric: tabular-nums; }
html.loading, html.loading body { overflow: hidden; }

/* ---------- Fixed brand + call ---------- */
.brand { position: fixed; z-index: 50; top: 22px; left: var(--gut); font: 800 clamp(1rem, 0.8rem + 0.6vw, 1.35rem)/1 Poppins, sans-serif; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; color: var(--ink); transition: color 0.3s; }
/* Over the light sections both fixed pieces get a solid dark backing, so they read over paper and over cards alike. */
.brand::before { content: ""; position: absolute; z-index: -1; inset: -10px -14px; background: var(--void); opacity: 0; transition: opacity 0.3s; }
.brand.on-light::before { opacity: 1; }
.brand small { display: block; margin-top: 6px; font: 500 0.62rem/1 "JetBrains Mono", monospace; letter-spacing: 0.18em; }
.cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; background: var(--burn); color: #160500; font: 700 0.86rem/1 Poppins, sans-serif; text-decoration: none; letter-spacing: 0.02em; border-radius: 3px; transition: background 0.3s, color 0.3s, transform 0.3s; }
.cta:hover { transform: translateY(-2px); }
.cta-fixed { position: fixed; z-index: 50; top: 16px; right: var(--gut); }
.cta-fixed.on-light, .cta-dark { background: var(--void); color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- 1 · Hero ---------- */
/* The section is tall; the stage sticks. --k (0 to 1, written by the scroll script) shrinks the canvas into a card. */
.hero { position: relative; height: 100svh; min-height: 560px; }
.motion .hero { height: 360vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; --k: 0;
  background: var(--navy); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 96px 96px; }
.stage canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s ease; }
.stage canvas.on { opacity: 1; }
/* The still photo is the first paint (LCP) and the fallback wherever WebGL does not run. It sits exactly where the
   shader draws the portrait, and leaves once the canvas has faded in over it. */
.stage .still { position: absolute; z-index: 2; bottom: -6%; left: calc(50% + 20vw); height: 106%; width: auto; max-width: none; transform: translateX(-50%); transition: opacity 0.2s linear 0.9s;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); }
.stage canvas.on ~ .still { opacity: 0; }
/* Without WebGL the scan still happens: the machine photo sits on top and a scroll-driven curtain uncovers it. */
.stage .still-m { clip-path: inset(0 0 calc((1 - max(var(--scan, 0), var(--build, 0))) * 100%) 0); }
.stage .still:not(.still-m) { clip-path: inset(calc(max(var(--scan, 0), var(--build, 0)) * 100%) 0 0 0); }
.stage::before { content: ""; position: absolute; z-index: 1; inset: 0; background: radial-gradient(60% 80% at 70% 45%, #0b1b30 0%, var(--void) 70%); opacity: calc(1 - var(--k)); pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.headline { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); bottom: clamp(40px, 8vh, 96px); pointer-events: none; }
.headline h1 { font-weight: 800; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.02em; font-size: clamp(2.4rem, 1rem + 4.6vw, 6.2rem); max-width: 9ch; }
.headline h1 .mq { font-size: 0.93em; }
.headline { will-change: transform; }
/* Each line rises from behind its own mask. The padding keeps the accent of "MÁQUINA" from being clipped. */
.ln { display: block; overflow: hidden; padding-top: 0.16em; margin-top: -0.16em; }
.ln-in { display: block; }
.js .ln-in { transform: translateY(110%); }
.js.loaded .ln-in { animation: rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(var(--i) * 110ms + 350ms); }
@keyframes rise { to { transform: none; } }
.caret { display: inline-block; width: 0.6em; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--burn); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* The native arrow disappears inside the hero: the liquid is the cursor. A small dot stays so the pointer is never lost. */
@media (hover: hover) and (pointer: fine) {
  .hero { cursor: none; }
}
.cur { position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s; transform: translate3d(var(--x, -100px), var(--y, -100px), 0); }
.cur.on { opacity: 1; }
.cur::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--burn); }
.cur i { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border: 1px solid rgba(234, 239, 244, 0.55); border-radius: 50%; transform: scale(var(--s, 1)); transition: transform 0.25s ease-out; }
.headline p { margin-top: 18px; max-width: 46ch; font: 500 0.72rem/1.6 "JetBrains Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hint { position: absolute; z-index: 4; right: var(--gut); bottom: clamp(40px, 8vh, 96px); font: 500 0.68rem/1.4 "JetBrains Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: right; }
.hint b { color: var(--burn); font-weight: 500; }
.scroll-cue { position: absolute; z-index: 4; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font: 500 0.6rem/1 "JetBrains Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.scroll-cue i { width: 1px; height: 34px; background: linear-gradient(var(--burn), transparent); }

/* ---------- 2 · Giant letters (inside the hero stage) ---------- */
.row { position: absolute; left: 0; width: 100%; white-space: nowrap; font-weight: 800; text-transform: uppercase; font-size: clamp(5rem, 17vw, 19rem); line-height: 0.9; letter-spacing: -0.03em; pointer-events: none; display: none; }
.motion .row { display: block; opacity: 0; }
.row-in { display: inline-block; will-change: transform; }
.row-back { top: 15%; z-index: 1; color: var(--ink); }
.row-front { bottom: 23%; z-index: 3; color: transparent; -webkit-text-stroke: 2px var(--burn); }
.faixa-say { position: absolute; z-index: 4; right: var(--gut); bottom: clamp(24px, 4vh, 44px); max-width: 30ch; font: 400 1rem/1.5 Lato, sans-serif; color: var(--ink); text-align: right; display: none; }
.motion .faixa-say { display: block; opacity: 0; }
.faixa-say .tag { margin-bottom: 10px; color: #ff8263; }

/* ---------- 1b · The dream: pick one, watch it get built ---------- */
/* Three states on #sonho: escolher (pick), montar (the plan draws itself and the puzzle lands), pronto (a real result
   and the full signature line). The board is painted on the stage canvas; .quadro-tela only reserves its place.
   Montar and pronto share one layout, so the only jump is the first one, and the script glides the headline across it. */
.stage canvas.sonho-fx { z-index: 3; opacity: 1; transition: none; pointer-events: none; }
.headline.sonho { top: 92px; bottom: clamp(28px, 6vh, 72px); right: auto; width: min(46vw, 620px); display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(12px, 2.2vh, 22px); }
.headline.sonho h1 { font-size: min(clamp(2.4rem, 1rem + 4.2vw, 5.6rem), 7.6vh); }
/* Who this is for, in the owner's own terms: readable text, not a caption. */
.headline.sonho p.sonho-sub { margin-top: 0; max-width: 34ch; font: 400 clamp(1.02rem, 0.9rem + 0.45vw, 1.3rem)/1.45 Lato, system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--ink); }
.sonho .acao, .sonho .quadro { pointer-events: auto; }
.sonho .acao, .sonho .quadro { display: none; }
.js .sonho[data-estado="escolher"] .acao-escolher { display: grid; gap: 10px; justify-items: start; }
.headline.sonho h1 { max-width: none; }
.sonho .h-pergunta, .sonho .h-frase { display: block; }
.sonho .h-pergunta { display: none; }   /* without JS: the whole line, no question nobody can answer */
.js .sonho[data-estado="escolher"] .h-pergunta { display: block; }
.js .sonho[data-estado="escolher"] .h-frase { display: none; }
/* While typing on a phone the keyboard can scroll the page, and scrolling is what dissolves the hero: hold the panel. */
.sonho.digitando .ln, .sonho.digitando p, .sonho.digitando .acao { opacity: 1 !important; transform: none !important; }
.js .sonho:not([data-estado="escolher"]) .quadro { display: grid; }
.js .sonho:not([data-estado="escolher"]) .acao-pronto { display: flex; }
.js .sonho:not([data-estado="escolher"]) .sonho-sub { display: none; }
/* The second half of the line waits, masked, until the dream is done. */
.js .sonho .ln-depois .ln-in { animation: none; transform: translateY(110%); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc((var(--i) - 2) * 120ms); }
.js .sonho[data-estado="pronto"] .ln-depois .ln-in { transform: none; }

.quadro { gap: 12px; justify-items: start; animation: quadro-in 0.5s ease-out both; }
@keyframes quadro-in { from { opacity: 0; } }   /* opacity only: the board is measured the moment it appears */
/* The board is what gives way on short screens: its height is whatever the headline and the buttons leave free. */
.quadro-tela { width: max(200px, min(100%, 45vh, 88vh - 390px)); aspect-ratio: 4 / 3; }
.quadro-topo, .quadro-legenda { max-width: max(200px, min(100%, 45vh, 88vh - 390px)); font: 500 0.66rem/1.45 "JetBrains Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.quadro-topo b { font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0.02em; }
/* Two lines reserved: the result text is longer than the progress text, and the panel is anchored at the bottom,
   so a growing legend would push the board's slot away from where the canvas painted it. */
.quadro-legenda { color: #ff8263; min-height: calc(2 * 1.45em); }

.sonhos { display: flex; flex-wrap: wrap; gap: 8px; }
.sonhos button, .sonho-livre input, .sonho-livre button { min-height: 46px; border-radius: 3px; }
.sonhos button { padding: 10px 14px; background: rgba(2, 6, 11, 0.66); color: var(--ink); border: 1px solid rgba(234, 239, 244, 0.3); font: 600 0.9rem/1.25 Poppins, sans-serif; text-align: left; cursor: pointer; transition: border-color 0.25s, transform 0.25s; }
.sonhos button:hover { border-color: var(--burn); transform: translateY(-2px); }
.sonho-livre { display: flex; gap: 8px; width: min(100%, 500px); }
.sonho-livre input { flex: 1 1 auto; min-width: 0; padding: 0 14px; background: rgba(2, 6, 11, 0.66); color: var(--ink); border: 1px solid rgba(234, 239, 244, 0.3); font: 400 1rem/1 Lato, sans-serif; }
.sonho-livre input::placeholder { color: var(--muted); }
.sonho-livre input:focus { outline: none; border-color: var(--burn); }
.sonho-livre button { padding: 0 18px; background: var(--burn); color: #160500; border: 0; font: 700 0.86rem/1 Poppins, sans-serif; letter-spacing: 0.02em; cursor: pointer; }
.acao-pronto { align-items: center; flex-wrap: wrap; gap: 6px 22px; visibility: hidden; opacity: 0; transition: opacity 0.5s ease 0.35s; }
.js .sonho[data-estado="pronto"] .acao-pronto { visibility: visible; opacity: 1; }
.sonho-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; color: var(--ink); font: 500 0.72rem/1 "JetBrains Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--burn); text-underline-offset: 5px; cursor: pointer; }
.sonho-link[hidden] { display: none; }

/* ---------- 3 · Manifesto ---------- */
.manifesto { position: relative; height: 230vh; background: var(--void); }
.manifesto-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 4vh, 44px); padding: 96px var(--gut) 40px; }
.manifesto-txt { font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 0.6rem + 4.5vw, 5.6rem); line-height: 1.08; letter-spacing: -0.025em; max-width: 21ch; }
.manifesto-txt em:not(.mq) { color: var(--burn); }
.manifesto-txt { position: relative; }
.manifesto-txt .w { display: inline-block; position: relative; }
.blk { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; }
.blk i { position: absolute; inset: 0; background: var(--burn); }

/* ---------- 4 · Horizontal track ---------- */
.trilho { position: relative; background: var(--deep); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 96px 96px; }
/* The seam with the black manifesto melts instead of cutting. */
.trilho::before { content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 55vh; pointer-events: none; background: linear-gradient(var(--void), rgba(2, 6, 11, 0.6) 35%, transparent); }
.trilho-view { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.track { position: relative; display: flex; align-items: stretch; gap: clamp(40px, 7vw, 140px); width: max-content; height: 100vh; height: 100svh; padding: 0 12vw 0 var(--gut); }
.trace { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.trace path { fill: none; stroke: var(--burn); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(255, 87, 51, 0.6)); }
.panel { position: relative; flex: 0 0 auto; width: clamp(280px, 30vw, 480px); display: flex; flex-direction: column; gap: 14px; scroll-snap-align: center; padding: 120px 0 72px; }
.panel[data-pos="top"] { justify-content: flex-start; }
.panel[data-pos="mid"] { justify-content: center; }
.panel[data-pos="bot"] { justify-content: flex-end; }
.panel-wide { width: clamp(300px, 40vw, 640px); }
.panel-intro { width: clamp(300px, 46vw, 760px); justify-content: center; }
.panel-intro h2 { font-weight: 800; text-transform: uppercase; font-size: clamp(2.6rem, 1rem + 5.6vw, 7rem); line-height: 0.92; letter-spacing: -0.03em; }
.panel-intro p { max-width: 40ch; font-size: 1.12rem; line-height: 1.55; color: #b7c3d0; }
.panel .num { font: 800 clamp(5rem, 11vw, 12rem)/0.8 Poppins, sans-serif; color: transparent; -webkit-text-stroke: 1.5px rgba(234, 239, 244, 0.28); letter-spacing: -0.04em; }
.panel h3 { font-weight: 800; text-transform: uppercase; font-size: clamp(1.7rem, 0.9rem + 2.4vw, 3.4rem); line-height: 0.95; letter-spacing: -0.02em; }
.panel p { font-size: 1.05rem; line-height: 1.6; color: #b7c3d0; max-width: 38ch; }
.panel .node { position: absolute; left: -22px; width: 12px; height: 12px; border: 2px solid var(--burn); background: var(--deep); transform: rotate(45deg); }
/* Nodes sit on two empty lanes (above and below all content), so the trace never crosses text. */
.panel[data-pos="top"] .node { top: 92px; }
.panel[data-pos="mid"] .node, .panel[data-pos="bot"] .node { bottom: 44px; }
.panel-end h3 { color: var(--burn); }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 12px; border: 1px solid rgba(234, 239, 244, 0.2); font: 500 0.72rem/1 "JetBrains Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.chips .chip-todo { border-color: var(--burn); color: var(--burn); border-style: dashed; }

.motion .trilho-view { position: sticky; top: 0; overflow: hidden; height: 100vh; height: 100svh; }

/* ---------- 5 · Numbers ---------- */
.numeros { background: var(--paper); color: #061120; padding: clamp(96px, 14vh, 180px) var(--gut) clamp(72px, 10vh, 140px); }
.numeros .tag { color: #4a5a6d; }
.numeros .mq, .perguntas .mq { color: #c2330d; }
.sec-head { display: grid; gap: 22px; margin-bottom: clamp(40px, 7vh, 88px); }
.sec-head h2 { font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 0.8rem + 6.4vw, 8rem); line-height: 0.92; letter-spacing: -0.03em; max-width: 12ch; }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 1.2vw, 18px); }
.card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 40px); background: var(--void); color: var(--ink); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); transition: translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.card:hover { translate: 0 -6px; }
.card .tag { color: var(--muted); margin-bottom: auto; padding-bottom: 28px; }
.card-a { grid-column: span 7; grid-row: span 2; min-height: 560px; background: var(--navy); }
.card-b { grid-column: span 5; background: var(--burn); color: #160500; }
.card-b .tag, .card-b .how { color: #4d1204; }
.card-c { grid-column: span 5; }
.card-d { grid-column: span 7; }
.card-e { grid-column: span 5; background: var(--deep); }
.big { display: block; font-weight: 800; letter-spacing: -0.04em; line-height: 0.85; font-variant-numeric: tabular-nums; font-size: clamp(3.4rem, 1rem + 7vw, 9rem); }
.card-a .big { font-size: clamp(6rem, 2rem + 17vw, 22rem); color: var(--ink); }
.big-money { font-size: clamp(2.4rem, 0.8rem + 4.2vw, 5.4rem); }
.big-arrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.18em; }
.big-arrow > span:first-child { color: transparent; -webkit-text-stroke: 1.5px rgba(234, 239, 244, 0.45); }
.big-arrow i { font-style: normal; color: var(--burn); font-size: 0.6em; }
.big small { font: 800 0.28em/1 "JetBrains Mono", monospace; letter-spacing: 0; margin-left: 0.15em; }
.was { font: 800 clamp(1.2rem, 0.8rem + 1.2vw, 2rem)/1 Poppins, sans-serif; opacity: 0.55; text-decoration-thickness: 3px; }
.lead { font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.4rem); line-height: 1.4; max-width: 30ch; }
.sub { font-size: 1rem; line-height: 1.5; max-width: 40ch; color: #b7c3d0; }
.sub b { color: var(--burn); font-family: Poppins, sans-serif; font-weight: 800; }
.card-b .sub { color: #3a0e03; }
.card .go { margin-top: 6px; }
.card-b .go { color: #160500; }
/* The same format as the hero: the client's dream, then the number that made it possible. */
.card .sonho-card { font: 700 clamp(1.02rem, 0.9rem + 0.4vw, 1.25rem)/1.3 Poppins, sans-serif; max-width: 26ch; }
.card .sonho-card span { display: block; margin-bottom: 6px; font: 500 0.66rem/1 "JetBrains Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.card-b .sonho-card span { color: #4d1204; }
.how { font: 400 0.72rem/1.6 "JetBrains Mono", monospace; letter-spacing: 0.04em; color: var(--muted); max-width: 52ch; padding-top: 12px; border-top: 1px solid currentColor; }
.miudo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); margin-top: clamp(36px, 6vh, 72px); }
.miudo p { font: 700 clamp(1.15rem, 0.9rem + 1vw, 1.9rem)/1.3 Poppins, sans-serif; letter-spacing: -0.01em; max-width: 26ch; }

/* ---------- 6 · Two paths, one face ---------- */
.caminhos { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: var(--void); --split: 50%; transition: --split 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); display: grid; grid-template-columns: 1fr 1fr; }
.caminhos:has(.lado-m:hover), .caminhos:has(.lado-m:focus-visible) { --split: 61%; }
.caminhos:has(.lado-h:hover), .caminhos:has(.lado-h:focus-visible) { --split: 39%; }
.camada { position: absolute; inset: 0; }
.camada img { position: absolute; bottom: 0; left: 50%; height: 96%; width: auto; max-width: none; transform: translateX(-55.4%); }
.camada-m { background: radial-gradient(60% 70% at 40% 45%, #2a0b06 0%, var(--void) 70%); clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.camada-h { background: radial-gradient(60% 70% at 60% 45%, #0d3461 0%, var(--deep) 75%); clip-path: inset(0 0 0 var(--split)); }
.caminhos::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none; background: linear-gradient(to top, rgba(2, 6, 11, 0.92) 8%, rgba(2, 6, 11, 0.55) 45%, transparent); }
.fio { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: var(--burn); box-shadow: 0 0 28px 5px rgba(255, 87, 51, 0.65); }
.lado { position: relative; z-index: 4; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 0 var(--gut) clamp(40px, 8vh, 88px); text-decoration: none; }
.lado-h { align-items: flex-end; text-align: right; }
.lado strong { font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 0.8rem + 4.4vw, 5.8rem); line-height: 0.92; letter-spacing: -0.03em; }
.lado-p { max-width: 30ch; font-size: 1.02rem; line-height: 1.5; color: #c4cfda; }
.go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 0.72rem/1 "JetBrains Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--burn); }
.go::after { content: "→"; transition: transform 0.4s; }
.lado:hover .go::after { transform: translateX(8px); }

/* ---------- 7 · Quote ---------- */
.fala { background: var(--navy); padding: clamp(110px, 18vh, 220px) var(--gut); display: grid; gap: clamp(28px, 5vh, 56px); }
/* Every voice is on the page. One is big (the closest to the visitor's dream, or Dr. Carlos by default);
   the rest sit in a row under it, all readable, none hidden behind a button. */
.vozes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 5vh, 56px) clamp(20px, 3vw, 44px); }
.voz { margin: 0; display: grid; gap: 12px; align-content: start; padding-left: 20px; border-left: 2px solid var(--burn); min-width: 0; }
.voz blockquote { margin: 0; }
.voz blockquote p { font: 400 1.05rem/1.6 Lato, system-ui, sans-serif; color: #c4cfda; }
.voz blockquote .mq { font-size: 0.95em; letter-spacing: -0.02em; }
.voz figcaption { font: 500 0.68rem/1.5 "JetBrains Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #a9b8c8; }
.voz .perto { display: none; font: 500 0.66rem/1 "JetBrains Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: #ff8263; }
.voz.perto-on .perto { display: block; }
.voz.destaque { grid-column: 1 / -1; padding-left: 0; border-left: 0; gap: 24px; }
.voz.destaque blockquote p { font: 700 clamp(1.8rem, 0.8rem + 3.8vw, 5rem)/1.04 Poppins, system-ui, sans-serif; letter-spacing: -0.025em; max-width: 22ch; color: var(--ink); }
.voz.destaque blockquote .mq { font-size: 0.92em; letter-spacing: -0.06em; }
.voz.destaque figcaption { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--ink); }
.fala-sonho { font: 700 clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem)/1.3 Poppins, system-ui, sans-serif; color: var(--ink); }
.fala .tag, .continuidade .tag { color: #a9b8c8; }

/* ---------- 3b · Problems ---------- */
.problemas { background: var(--void); padding: clamp(40px, 8vh, 120px) var(--gut) clamp(96px, 14vh, 180px); }
.problemas .sec-head h2 { max-width: 15ch; font-size: clamp(2.2rem, 0.8rem + 5vw, 6.4rem); }
.probs { list-style: none; padding: 0; display: grid; }
.prob { display: grid; grid-template-columns: minmax(120px, 0.34fr) 1fr; gap: clamp(20px, 4vw, 72px); padding: clamp(36px, 6vh, 72px) 0; border-top: 1px solid rgba(234, 239, 244, 0.14); align-items: start; }
.prob:last-child { border-bottom: 1px solid rgba(234, 239, 244, 0.14); }
.prob-r { grid-template-columns: 0.5fr minmax(120px, 0.34fr) 1fr; }
.prob-r .prob-n { grid-column: 2; }
.prob-n { font: 800 clamp(4.4rem, 10vw, 11rem)/0.8 Poppins, sans-serif; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px var(--burn); position: sticky; top: 110px; }
.prob h3 { font-weight: 700; font-size: clamp(1.5rem, 0.9rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 24ch; }
.prob p { margin-top: 20px; max-width: 58ch; font-size: 1.08rem; line-height: 1.65; color: #b7c3d0; }

/* ---------- 6b · Mentoring ---------- */
.mentoria { background: var(--deep); padding: clamp(96px, 14vh, 180px) var(--gut); display: grid; gap: clamp(24px, 4vh, 48px); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 96px 96px; }
.mentoria h2 { font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 0.8rem + 6vw, 7.4rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 14ch; }
.mentoria-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 56px); margin-top: clamp(8px, 2vh, 24px); }
.mentoria-cols p { font-size: 1.08rem; line-height: 1.65; color: #c4cfda; padding-top: 18px; border-top: 2px solid var(--burn); }
.mentoria-quem { font: 700 clamp(1.1rem, 0.9rem + 0.9vw, 1.8rem)/1.3 Poppins, sans-serif; letter-spacing: -0.01em; max-width: 40ch; }

/* ---------- 7b · How it works ---------- */
.processo { background: var(--void); padding: clamp(96px, 14vh, 180px) var(--gut); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 120px); align-items: start; }
.processo-l { position: sticky; top: 110px; display: grid; gap: 22px; }
.processo-l h2 { font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 0.8rem + 3.6vw, 4.6rem); line-height: 0.96; letter-spacing: -0.03em; }
.processo-l p { max-width: 38ch; font-size: 1.1rem; line-height: 1.6; color: #c4cfda; }
.processo-r { position: relative; padding-left: clamp(28px, 4vw, 64px); }
.processo-fio { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(234, 239, 244, 0.12); }
.processo-fio b { position: absolute; inset: 0; background: var(--burn); box-shadow: 0 0 18px 2px rgba(255, 87, 51, 0.6); transform-origin: 50% 0; }
.motion .processo-fio b { transform: scaleY(0); }
.passos { list-style: none; padding: 0; display: grid; gap: clamp(44px, 9vh, 110px); }
.passos li { display: grid; gap: 10px; }
.passos b { font: 800 0.9rem/1 "JetBrains Mono", monospace; color: var(--burn); letter-spacing: 0.1em; }
.passos h3 { font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 0.9rem + 2.4vw, 3.4rem); line-height: 0.98; letter-spacing: -0.02em; }
.passos p { max-width: 44ch; font-size: 1.08rem; line-height: 1.6; color: #b7c3d0; }
.processo-notas { margin-top: clamp(56px, 10vh, 120px); display: grid; gap: 22px; }
.processo-notas p { max-width: 52ch; font-size: 1.08rem; line-height: 1.65; color: #c4cfda; }

/* ---------- 7c · Continuity ---------- */
.continuidade { background: var(--navy); padding: clamp(96px, 14vh, 180px) var(--gut); display: grid; gap: clamp(36px, 6vh, 72px); }
.continuidade h2 { font-weight: 800; text-transform: uppercase; font-size: clamp(3rem, 1rem + 10vw, 12.5rem); line-height: 0.86; letter-spacing: -0.04em; }
.continuidade h2 .mq { font-size: 0.9em; }
.cont-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 96px); align-items: start; }
.cont-txt { display: grid; gap: 20px; }
.cont-txt p { font-size: 1.12rem; line-height: 1.65; color: #d3dce5; max-width: 50ch; }
.cont-txt .cont-lead { font: 700 1.2rem/1.3 Poppins, sans-serif; color: var(--ink); }
.cont-lista { list-style: none; padding: 0; display: grid; gap: 0; }
.cont-lista li { position: relative; padding: 22px 0 22px 34px; border-top: 1px solid rgba(234, 239, 244, 0.16); font-size: 1.05rem; line-height: 1.55; color: #d3dce5; }
.cont-lista li::before { content: ""; position: absolute; left: 4px; top: 29px; width: 10px; height: 10px; border: 2px solid var(--burn); transform: rotate(45deg); }
.cont-lista a { text-decoration-color: var(--burn); text-underline-offset: 4px; }

/* ---------- 7d · Questions ---------- */
.perguntas { background: var(--paper); color: #061120; padding: clamp(96px, 14vh, 180px) var(--gut); }
.perguntas .tag { color: #4a5a6d; }
.perguntas .sec-head h2 { max-width: 14ch; font-size: clamp(2.2rem, 0.8rem + 5vw, 6.4rem); }
.faq { border-bottom: 2px solid #061120; }
.faq details { border-top: 2px solid #061120; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(20px, 3vh, 34px) 0; font: 800 clamp(1.25rem, 0.9rem + 1.6vw, 2.6rem)/1.08 Poppins, sans-serif; letter-spacing: -0.02em; text-transform: uppercase; transition: color 0.3s, padding-left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; font: 500 1.4em/1 "JetBrains Mono", monospace; color: var(--burn); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: #c93a1a; padding-left: 14px; }
.faq details p { max-width: 62ch; padding: 0 0 clamp(24px, 4vh, 40px); font-size: 1.12rem; line-height: 1.65; color: #24364a; }

.ficha { margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(234, 239, 244, 0.14); font: 400 0.74rem/1.6 "JetBrains Mono", monospace; color: var(--muted); }
.ficha b { color: var(--ink); font-weight: 500; }

/* ---------- 8 · Closing ---------- */
.fim { background: var(--burn); color: #160500; padding: clamp(96px, 14vh, 180px) var(--gut) var(--gut); overflow: hidden; }
.fim-top { display: grid; gap: 18px; justify-items: start; }
.fim-pre { font: 700 clamp(1.2rem, 0.9rem + 1.2vw, 2.1rem)/1.2 Poppins, sans-serif; letter-spacing: -0.01em; }
.fim-big { font-weight: 800; text-transform: uppercase; font-size: clamp(4.4rem, 21vw, 25rem); line-height: 0.8; letter-spacing: -0.05em; margin: 0 0 clamp(20px, 4vh, 48px) -0.04em; overflow: hidden; padding-bottom: 0.06em; }
.fim-big span { display: inline-block; }
.moldura { margin-top: clamp(64px, 10vh, 140px); background: var(--void); color: var(--ink); padding: clamp(28px, 4vw, 64px); display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(24px, 4vw, 64px); clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 56px 100%, 0 calc(100% - 56px)); }
.fim-menu { display: grid; gap: 4px; align-content: start; }
.fim-menu a { font: 800 clamp(1.8rem, 1rem + 2.6vw, 3.6rem)/1.05 Poppins, sans-serif; text-transform: uppercase; letter-spacing: -0.02em; text-decoration: none; transition: color 0.3s, translate 0.4s; }
.fim-menu a:hover { color: var(--burn); translate: 10px 0; }
.fim-dados, .fim-contato { display: grid; gap: 12px; align-content: start; font-size: 0.95rem; line-height: 1.5; color: #b7c3d0; list-style: none; padding: 0; }
.fim-contato a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: var(--burn); text-underline-offset: 4px; }


/* ---------- Consent notice: a corner card, never a wall. Both answers weigh exactly the same. ---------- */
.aviso { position: fixed; z-index: 80; left: var(--gut); bottom: var(--gut); width: min(440px, calc(100vw - var(--gut) * 2)); padding: 20px 22px; background: #07182b; color: var(--ink); border: 1px solid rgba(234, 239, 244, 0.22); font: 400 0.95rem/1.5 Lato, system-ui, sans-serif; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.aviso p + p, .aviso p + .aviso-botoes { margin-top: 12px; }
.aviso a { color: var(--ink); text-underline-offset: 3px; }
.aviso-estado b { color: #ff8263; }
.aviso-botoes { display: flex; gap: 10px; }
.aviso-botoes button { flex: 1 1 0; min-height: 44px; padding: 0 16px; background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 3px; font: 700 0.86rem/1 Poppins, system-ui, sans-serif; letter-spacing: 0.02em; cursor: pointer; }
.aviso-botoes button:hover, .aviso-botoes button:focus-visible { background: var(--ink); color: var(--void); }
.link-medicao { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: var(--burn); text-underline-offset: 4px; cursor: pointer; }

/* ---------- Narrow screens ---------- */
@media (max-width: 760px) {
  .prob, .prob-r { grid-template-columns: 1fr; gap: 12px; }
  .prob-r .prob-n { grid-column: auto; }
  .prob-n { position: static; font-size: 4.4rem; }
  .mentoria-cols, .cont-cols, .processo { grid-template-columns: 1fr; }
  .processo-l { position: static; }
  .hint { display: none; }
  .aviso { bottom: 14px; }
  .aviso-botoes { flex-direction: column; }
  .aviso-aberto .cta-fixed { display: none; }
  .stage .still { left: 50%; bottom: 16%; height: 78%; }
  .stage::before { background: radial-gradient(90% 60% at 50% 45%, #0b1b30 0%, var(--void) 75%); }
  .cta-fixed { top: auto; bottom: 14px; left: var(--gut); right: var(--gut); justify-content: center; min-height: 52px; }
  .headline { bottom: 96px; }
  .headline h1 { max-width: 10ch; font-size: clamp(2.2rem, 1rem + 7vw, 3.6rem); }
  .headline.sonho { top: 76px; bottom: 84px; right: var(--gut); width: auto; gap: 12px; }
  /* On a phone the panel sits over the chest (white turtleneck): a dark floor keeps the small type readable. */
  .headline.sonho::before { content: ""; position: absolute; z-index: -1; left: calc(var(--gut) * -1); right: calc(var(--gut) * -1); top: auto; bottom: -84px; height: calc(100% + 84px); max-height: 640px; background: linear-gradient(to bottom, rgba(2, 6, 11, 0), rgba(2, 6, 11, 0.78) 34%, rgba(2, 6, 11, 0.94)); pointer-events: none; opacity: max(0, 1 - var(--k, 0) * 4); }
  .headline.sonho h1 { font-size: min(clamp(2.1rem, 1rem + 6vw, 3.2rem), 5.8vh); }
  .quadro-tela, .quadro-topo, .quadro-legenda { width: 100%; max-width: 44vh; }
  .sonhos button { font-size: 0.86rem; padding: 9px 12px; }
  .acao-pronto .cta { flex: 1 1 100%; justify-content: center; }
  .scroll-cue { display: none; }
  .row { font-size: 24vw; }
  .row-back { top: 8%; }
  .row-front { bottom: 9%; -webkit-text-stroke-width: 1.5px; }
  .faixa-say { display: none !important; }
  .panel { padding: 96px 0 96px; }
  .bento { grid-template-columns: 1fr; }
  .card-a, .card-b, .card-c, .card-d, .card-e { grid-column: auto; grid-row: auto; min-height: 0; }
  .miudo { grid-template-columns: 1fr; }
  .vozes { grid-template-columns: 1fr; }
  .caminhos { grid-template-columns: 1fr 1fr; }
  .camada img { height: 70%; bottom: 22%; }
  .lado strong { font-size: clamp(1.5rem, 6.4vw, 2.4rem); }
  .lado-p { display: none; }
  .lado { padding-bottom: 96px; }
  .moldura { grid-template-columns: 1fr; }
  .fim { padding-bottom: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto { height: auto; }
  .manifesto-pin { position: relative; }
  .stage canvas { display: none; }
  .caminhos, .card, .cta, .js .loader { transition: none; }
  .js .ln-in, .js.loaded .ln-in { transform: none; animation: none; }
  .stage canvas.sonho-fx { display: block; }
  .js .sonho .ln-depois .ln-in { transition: none; }
  .quadro { animation: none; }
  .acao-pronto { transition: none; }
}