/* IA Club — camada de movimento e peças vivas.
   Carrega depois do style.css original e não apaga nada dele: só sobrepõe. */

/* ---------- fontes embutidas (o Impact não existe no Android) ---------- */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/anton-ia-latin.woff2') format('woff2'); 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: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/anton-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('../assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+25A0-25FF, U+2580-259F; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url('../assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+25A0-25FF, U+2580-259F; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url('../assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+25A0-25FF, U+2580-259F; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url('../assets/fonts/jetbrains-mono-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  --teal-ink: #087365;
}
html { scroll-behavior: auto; }
h1, h2 { letter-spacing: 0.012em; line-height: 1.04; }
.retro-transition h3 { letter-spacing: 0.012em; }

/* marca teal: varre como seleção de terminal (o fundo cresce, não aparece seco) */
/* o bloco cobre só a faixa da letra (acento compacto incluso), sem invadir a linha vizinha */
mark { background: linear-gradient(90deg, #18c8b0, #2de0c4) 0 0 / 100% 100% no-repeat; }
.paper h2 mark, .routine-section h2 mark { background: linear-gradient(90deg, #18c8b0, #38d7b5) 0 0 / 100% 100% no-repeat; }
:is(h1, h2) mark { display: inline-block; line-height: 1; padding: 0.15em 0.1em 0.05em; margin: 0.07em 0 0.06em; }
.nw { white-space: nowrap; }

/* cursor de bloco (piscar não é movimento: fica no compositor) */
.caret { display: inline-block; width: 0.55em; height: 1em; background: currentColor; vertical-align: -0.14em; margin-left: 0.14em; animation: ia-blink 1.06s steps(1) infinite; }
@keyframes ia-blink { 50% { opacity: 0; } }

/* SplitText: a máscara de linha ganha folga para o topo redondo e para a marca */
.ln-mask { overflow: visible !important; clip-path: inset(-0.3em -0.3em -0.14em -0.3em); }

/* ---------- estados iniciais (só com JS de movimento ativo) ---------- */
.motion [data-split] { visibility: hidden; }
.motion main .eyebrow { opacity: 0; }
.motion :is(.lead, .intro-text > p, .routine-manifesto p, .routine-outcome, .ecosystem-note, .fine, .case-story, .time-grid p, .closing .button, .delivery-bottom, .retro-transition p, .membership p, .proof-number p, .proof-number > span, .hero-copy > p, .hero-cta, .noise-note, .method-lead) { opacity: 0; }
.motion:not(.ready) :is(.laptop, .hero-field, .hero-globe, .hud-cross, .hud-bracket, .hud-words, .hero-foot span) { opacity: 0; }
.motion .message { visibility: hidden; }
.motion .rolo-pulse { opacity: 0; }
/* transições CSS antigas brigavam com o motor: o GSAP manda agora */
.motion :is(.delivery-card, .message, .ecosystem-map article, .people img, .method-grid article, .routine-grid article, .tabs button) { transition: none; }
.motion .case-panel:not([hidden]), .motion details[open] > p, .motion .soft-reveal { animation: none; }
.motion .delivery-card:hover, .motion .method-grid article:hover, .motion .routine-grid article:hover, .motion .ecosystem-map article:hover, .motion .message:hover { transform: none; }

/* ---------- boot ---------- */
.boot { display: none; }
html.booting .boot { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--black); color: var(--bright); }
.boot-grid { position: absolute; inset: 0; display: grid; overflow: hidden; }
.boot-grid i { display: block; background: var(--black); outline: 1px solid var(--black); }
.boot-inner { position: relative; z-index: 1; }
.boot-inner { width: min(440px, 82vw); }
.boot-logo { width: 74px; height: auto; }
.boot-log { font: 500 13px/1.75 var(--mono); min-height: 12.5em; margin: 22px 0 18px; white-space: pre-wrap; letter-spacing: 0.04em; }
.boot-bar { height: 8px; border: 1px solid #2c4038; padding: 1px; }
.boot-bar i { display: block; height: 100%; background: var(--teal); transform-origin: left; transform: scaleX(0); }

/* ---------- herói ---------- */
.hero { padding: clamp(22px, 3.6vh, 48px) 0 0; overflow-x: clip; overflow-y: visible; position: relative; z-index: 3; border-bottom: 0; min-height: min(calc(100svh - 112px), 980px); display: flex; flex-direction: column; }
.hero > .wrap { flex: 1 0 auto; }
.hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 3vw, 48px); align-items: stretch; }
.hero-copy { align-self: center; padding: clamp(8px, 2vh, 24px) 0 clamp(20px, 4vh, 44px); position: relative; z-index: 3; }
.hero h1 { font-size: clamp(34px, min(5vw, 9vh), 66px); margin-bottom: clamp(14px, 2.6vh, 28px); }
.hero .lead { max-width: 560px; font-size: clamp(16px, min(1.45vw, 2.4vh), 19px); margin-bottom: clamp(10px, 1.8vh, 20px); }
.hero-copy > p:not(.lead) { font-size: clamp(14px, min(1.2vw, 2.1vh), 17px); margin-bottom: clamp(14px, 2.4vh, 24px); }
.hero .eyebrow { max-width: none; margin-bottom: clamp(12px, 2vh, 22px); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.hero-cta .micro { margin: 0; }
.hero-foot { position: relative; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 10px; margin-top: clamp(22px, 4vh, 44px); padding: 16px 0 0; border-top: 1px solid #9aa79b; font: 500 11px/1.4 var(--mono); }
.hero-foot span { position: relative; padding: 0 0 0 16px !important; border: 0 !important; color: #5c6b64; }
.hero-foot span::before { content: ''; position: absolute; left: 0; top: 0.3em; width: 8px; height: 8px; border: 1px solid #87978d; }
.hero-foot span.lit { color: var(--ink); }
.hero-foot span.lit::before { background: var(--teal); border-color: var(--teal); }
.foot-bar { position: absolute; left: 0; right: 0; top: -2px; height: 3px; background: var(--teal); transform-origin: left; transform: scaleX(0); }
html:not(.motion) .foot-bar { transform: none; }

.hero-art { position: relative; align-self: stretch; display: flex; justify-content: flex-end; align-items: flex-end; margin: 0; min-width: 0; perspective: 1400px; z-index: 2; }
.hero-field { position: absolute; left: -12%; right: -18%; top: -6%; bottom: 0; z-index: 0; }
.hero-globe { position: absolute; right: -14%; top: 2%; width: min(360px, 52%); aspect-ratio: 1; z-index: 0; }
.hero-hud { position: absolute; right: 0; top: clamp(6px, 2vh, 26px); z-index: 1; display: flex; gap: 14px; align-items: flex-start; }
.hud-words { margin: 0; font: 500 11px/1.75 var(--mono); color: var(--ink); letter-spacing: 0.08em; min-width: 9ch; }
.hud-cross { position: relative; width: 70px; height: 70px; }
.hud-cross::before, .hud-cross::after { content: ''; position: absolute; background: var(--teal); }
.hud-cross::before { left: 0; right: 0; top: 50%; height: 1px; }
.hud-cross::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.hud-bracket { position: absolute; left: 4%; top: 30%; z-index: 1; font: 500 11px var(--mono); color: var(--teal-ink); padding: 8px 10px; background:
  linear-gradient(var(--teal), var(--teal)) 0 0 / 8px 1px no-repeat, linear-gradient(var(--teal), var(--teal)) 0 0 / 1px 8px no-repeat,
  linear-gradient(var(--teal), var(--teal)) 100% 100% / 8px 1px no-repeat, linear-gradient(var(--teal), var(--teal)) 100% 100% / 1px 8px no-repeat; }
.laptop { position: relative; z-index: 2; flex: none; width: min(124%, calc((100svh - 160px) * 1.0986), 840px); margin-right: -6%; transform-origin: 50% 100%; margin-bottom: calc(-1 * var(--arm-ext, 0px)); }
.hero-art .laptop-img { position: relative; z-index: 2; display: block; width: calc(100% * 1555 / 1315); max-width: none; height: auto; margin-left: calc(-100% * 120 / 1315); }
/* o papel desce até a ponta das mangas; a faixa fica nessa emenda, cobrindo os últimos 14 px */
.hero { --arm-pad: max(0px, calc(var(--arm-ext, 0px) - 14px)); padding-bottom: var(--arm-pad); min-height: calc(min(calc(100svh - 112px), 980px) + var(--arm-pad)); }
.laptop-screen { position: absolute; left: 0; top: 0; width: 1000px; height: 677px; transform-origin: 0 0; z-index: 1; overflow: hidden; background: #050807; color: #f3f1ea; font-family: var(--display); }
.scr-term { position: absolute; left: 70px; top: 62px; font: 500 30px/1.55 var(--mono); color: var(--bright); }
.scr-noise { position: absolute; inset: 0; display: grid; place-items: center; }
.scr-noise span, .scr-ghost { grid-area: 1 / 1; font: 400 150px/1 var(--display); letter-spacing: 0.01em; white-space: nowrap; }
.scr-noise span { opacity: 0; }
.scr-ghost { color: var(--teal); font-style: normal; mix-blend-mode: screen; opacity: 0; }
.scr-head { position: absolute; inset: 0 0 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 108px; line-height: 1; opacity: 0; }
.scr-head .ln { display: block; overflow: hidden; padding: 0.04em 0.1em; }
.scr-head .ln > span { display: block; }
.scr-head b { font-weight: 400; color: #060908; padding: 0 0.1em; background: linear-gradient(#18c8b0, #2de0c4) 0 0 / 100% 100% no-repeat; }
html:not(.motion) .scr-head { opacity: 1; }
.scr-prompt { position: absolute; left: 70px; bottom: 58px; font: 700 52px/1 var(--mono); color: var(--teal); }
.scr-lines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, #ffffff09 0 1px, transparent 1px 4px); }
.scr-roll { position: absolute; left: 0; right: 0; top: 0; height: 26%; pointer-events: none; background: linear-gradient(transparent, #2de0c414 55%, transparent); }
.scr-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, #ffffff12 0%, #ffffff05 26%, transparent 40%); }
.scr-power { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: #e9fffb; opacity: 0; pointer-events: none; }

/* ---------- faixas que dobram (bending marquee, WebGL) ---------- */
.bend { position: relative; z-index: 1; height: clamp(230px, 22vw, 330px); overflow: hidden; background: var(--black); }
.bend--marca { --bh: clamp(210px, 19vw, 290px); height: var(--bh); margin-top: calc(var(--bh) / -2); z-index: 2; background: linear-gradient(to bottom, transparent 50%, var(--paper) 50%); }
.time-section { padding-bottom: calc(100px + clamp(210px, 19vw, 290px) / 2) !important; }
.bend-gl { position: absolute; inset: 0; }
.bend-gl canvas { display: block; width: 100%; height: 100%; }
.bend + section { padding-top: 0; }
.bend + section.paper { border-top: 0; }

/* ---------- 01 · recados ---------- */
.noise-board { position: relative; }
.noise-head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font: 500 11px var(--mono); letter-spacing: 0.1em; color: #9fb5ab; }
.noise-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; background: var(--teal); color: var(--black); font: 700 12px var(--mono); }
.noise-head em { margin-left: auto; font-style: normal; color: #6f857b; }
.motion .message { cursor: grab; touch-action: pan-y; will-change: auto; }
.noise-board .message { margin-bottom: 6px; position: relative; }
.noise-board .m2 { margin-left: 34px; }
.noise-board .m4 { margin-left: 22px; margin-bottom: 18px; }
.message:active { cursor: grabbing; }
@media (hover: none), (max-width: 700px) { .noise-head em { display: none; } .motion .message { cursor: auto; } }

/* ---------- 02 · fichário ---------- */
.rolo { position: relative; }
.rolo img { display: block; width: 100%; height: auto; }
.rolo-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rolo-wire { fill: none; stroke: none; }
.rolo-pulse { fill: #2de0c4; }
.rolo-quad { opacity: 0; }
.motion .stamp { opacity: 0; }
.forum-links a { transition: none; }
.forum-links a:hover { background: var(--black); color: var(--paper); }
.forum-links a:hover span { color: var(--bright); }
.window-title { cursor: grab; }

/* ---------- fita K7 ---------- */
.retro-transition { position: relative; overflow: hidden; }
.retro-transition .wrap { position: relative; z-index: 1; }
.k7-wire { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.k7-path { fill: none; stroke: none; }
.k7-glow { fill: none; stroke: #c9fff6; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.k7 { position: relative; }
.k7-img { display: block; width: 100%; height: auto; }
.reel { position: absolute; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.reel img { display: block; width: 100%; height: 100%; }
.reel-l { left: 20.387%; top: 46.061%; width: 5.637%; }
.reel-r { left: 41.222%; top: 39.445%; width: 5.411%; }
.k7-node { position: absolute; left: var(--x); top: var(--y); width: 1.5%; aspect-ratio: 1; translate: -50% -50%; background: #ecfffb; box-shadow: 0 0 10px 3px #2de0c4, 0 0 26px 8px #18c8b077; opacity: 0; pointer-events: none; }
.deck { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-left: 4%; }
.deck button { display: grid; place-items: center; width: 50px; height: 38px; padding: 0; color: #e8efe9; background: #1d2321; border: 1px solid #0b0f0e; box-shadow: 0 4px 0 #0b0f0e; }
.deck button svg { width: 20px; height: 12px; fill: currentColor; }
.deck button[aria-pressed='true'] { background: var(--teal); color: var(--black); box-shadow: 0 1px 0 #0b0f0e; translate: 0 3px; }
.deck button:hover { color: var(--bright); }
.deck button[aria-pressed='true']:hover { color: var(--black); }
.deck-counter { margin-left: 10px; padding: 7px 10px; font: 700 17px/1 var(--mono); letter-spacing: 0.18em; color: var(--bright); background: var(--black); border: 1px solid #2c3a35; }
.deck-counter::before { content: 'TAPE '; font-size: 9px; letter-spacing: 0.1em; color: #6f857b; vertical-align: 2px; }

/* ---------- 03 · chips vivos ---------- */
.retro-icon { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.chip-ui { display: inline-flex; align-items: center; gap: 6px; }
.chip-bar { position: relative; width: 52px; height: 4px; background: #ffffff1f; overflow: hidden; }
.chip-bar i { position: absolute; inset: 0; background: var(--bright); transform-origin: left; transform: scaleX(0); }
.chip-tc, .chip-load { font: 500 10.5px var(--mono); color: #9fb5ab; letter-spacing: 0.02em; }
.chip-sig { height: 12px; gap: 2px; align-items: flex-end; }
.chip-sig i { width: 3px; height: 12px; background: var(--bright); transform-origin: bottom; }
.chip-rec { display: inline-block; width: 9px; height: 9px; background: var(--bright); box-shadow: 0 0 8px #2de0c4; }
.chip-dots i { display: inline-block; width: 4px; height: 4px; background: var(--bright); }
.chip-net { width: 54px; height: 22px; }
.chip-net path { fill: none; stroke: var(--bright); stroke-width: 1.5; }
.chip-net rect { fill: var(--bright); }

/* ---------- 04 · método ---------- */
.method-grid article { position: relative; }
.m-line { position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--teal); transform-origin: left; transform: scaleX(0); }
.method-grid article > span { font-variant-numeric: tabular-nums; }

/* ---------- rotina · relógio de flip ---------- */
.routine-heading { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; max-width: none; }
.flip { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 6px; }
.flip-label { font: 500 11px var(--mono); letter-spacing: 0.14em; color: var(--teal-ink); }
.flip-label::before { content: '● '; color: var(--teal); }
.flip-row { display: flex; align-items: center; gap: 4px; perspective: 380px; }
.fd { position: relative; width: clamp(34px, 3.4vw, 48px); height: clamp(50px, 4.9vw, 68px); font: 400 clamp(38px, 3.8vw, 54px) / 1 var(--display); color: #f3f1ea; box-shadow: 3px 4px 0 #6b918455; }
.fd > b { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: #131c19; }
.fd-top, .fd-ftop { top: 0; border-bottom: 1px solid #00000080; }
.fd-bot, .fd-fbot { bottom: 0; }
.fd i { position: absolute; left: 0; right: 0; height: 200%; display: grid; place-items: center; font-style: normal; }
.fd-top i, .fd-ftop i { top: 0; }
.fd-bot i, .fd-fbot i { bottom: 0; }
.fd-ftop { z-index: 2; transform-origin: 50% 100%; backface-visibility: hidden; }
.fd-fbot { z-index: 2; transform-origin: 50% 0; backface-visibility: hidden; transform: rotateX(90deg); }
.fd::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; translate: 0 -1px; background: #0b0f0e; z-index: 3; }
.fd-sep { font: 400 clamp(26px, 2.6vw, 38px) / 1 var(--display); color: var(--teal-ink); padding: 0 2px; }

/* ---------- aplicações · fluxo ---------- */
.workflow { position: relative; padding-left: 28px; }
.wf-rail { position: absolute; left: 9px; width: 2px; background: var(--teal); transform-origin: top; transform: scaleY(0); }
.wf-packet { position: absolute; left: 4px; top: 0; width: 12px; height: 12px; background: var(--bright); box-shadow: 0 0 14px #2de0c4; opacity: 0; }
.workflow .caret { color: var(--bright); }

/* ---------- 05 · walkman ---------- */
.wk { position: relative; }
.wk > img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.wk-reel { position: absolute; z-index: 2; width: 5.775%; aspect-ratio: 1; translate: -50% -50%; rotate: -6deg; scale: 0.833 1; pointer-events: none; }
.wk-reel img { display: block; width: 100%; height: 100%; }
.wk-reel-t { left: 24.309%; top: 56.616%; }
.wk-reel-b { left: 27.362%; top: 72.272%; }
.wk-waves { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wk-waves path { fill: none; stroke: var(--teal); stroke-linecap: round; opacity: 0; }
.wk-btn { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 6.15%; height: 5.05%; padding: 0; translate: -50% -50%; rotate: var(--r, -6deg); background: transparent; border: 0; cursor: pointer; }
.wk-btn i { position: absolute; inset: -2px; border: 2px solid transparent; border-radius: 9px; }
.wk-btn:hover i { border-color: #18c8b0aa; }
.wk-btn[aria-pressed='true'] i { border-color: var(--bright); background: #2de0c41f; box-shadow: 0 0 16px #2de0c466; }
.wk-now { position: absolute; z-index: 3; left: 2%; bottom: 0; padding: 7px 11px; font: 500 11px/1.3 var(--mono); letter-spacing: 0.06em; color: var(--bright); background: var(--black); white-space: nowrap; }

/* ---------- 06 · odômetro ---------- */
.proof-number strong { white-space: nowrap; }
.proof-number strong span { display: inline-block; font: inherit; margin: 0; letter-spacing: inherit; }
.odo { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: top; }
.odo-col { display: flex; flex-direction: column; }
.odo-col i { display: block; height: 1.1em; line-height: 1.1em; font-style: normal; }
.ecosystem-map { perspective: 1200px; }

/* ---------- 07 · fotos de tubo ---------- */
.people article { position: relative; overflow: hidden; }
.tv-scan { position: absolute; left: 0; top: 0; width: 42.5%; height: 14%; pointer-events: none; opacity: 0; background: linear-gradient(transparent, #2de0c455 50%, transparent); mix-blend-mode: screen; }

/* ---------- seções pretas: campo de pontos em onda atrás de tudo ---------- */
#ruido, #entrega, #aplicacoes, #ecossistema, .time-section, .closing { position: relative; overflow: hidden; }
.motion :is(.time-section, .closing) { background-image: none; }
.wave-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
:is(#ruido, #entrega, #aplicacoes, #ecossistema, .time-section, .closing) > .wrap { position: relative; }

/* letras vazadas: nas seções pretas o texto da marca teal mostra o fundo animado por dentro */

/* ---------- 09 · oferta ---------- */
.offer-grid { perspective: 1300px; }
.price-card { --sx: 14; --sy: 14; box-shadow: calc(var(--sx) * 1px) calc(var(--sy) * 1px) 0 var(--teal); }
.includes li::before { display: inline-block; rotate: calc(var(--tick, 0) * 90deg); }
.card-code { display: flex; align-items: center; gap: 12px; margin-top: 24px; font: 500 10px var(--mono); letter-spacing: 0.09em; color: #7f958b; }
.barcode { display: block; width: 118px; height: 26px; flex: none; background: linear-gradient(90deg,
  currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 8px, currentColor 8px 11px, transparent 11px 12px, currentColor 12px 13px, transparent 13px 16px,
  currentColor 16px 18px, transparent 18px 19px, currentColor 19px 22px, transparent 22px 25px, currentColor 25px 26px, transparent 26px 28px, currentColor 28px 31px, transparent 31px 32px,
  currentColor 32px 33px, transparent 33px 36px, currentColor 36px 38px, transparent 38px 39px, currentColor 39px 40px, transparent 40px 43px, currentColor 43px 46px, transparent 46px 47px) 0 0 / 47px 100% repeat-x; }

/* ---------- dúvidas ---------- */
details[open] > summary::after { content: '+'; }
summary::after { transition: rotate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
details.is-open > summary::after, html:not(.motion) details[open] > summary::after { rotate: 45deg; }
.faq details > p { overflow: hidden; }

/* ---------- rodapé ---------- */
.footer-sys { display: flex; align-items: center; gap: 12px; font: 500 11px var(--mono); letter-spacing: 0.08em; color: var(--bright); }
.footer-sys .barcode { color: #2c4a40; }

/* ---------- cursor de colchetes ---------- */
.cursor { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; }
.cursor-box { position: absolute; left: 0; top: 0; width: 26px; height: 26px; }
.cursor-box i { position: absolute; width: 8px; height: 8px; border: 2px solid var(--teal); transition: width 0.25s, height 0.25s; }
.cursor-box i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.cursor-box i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.cursor-box i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.cursor-box i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.cursor.on .cursor-box i { width: 12px; height: 12px; border-color: var(--bright); }
.cursor-dot { position: absolute; left: 0; top: 0; width: 6px; height: 6px; background: var(--teal); }

/* ---------- responsivo ---------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-hud { display: none; }
  .routine-heading { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 700px) {
  .hero-grid { grid-template-columns: 1fr; gap: 6px; }
  .hero-art { width: 100%; margin: 0 auto; aspect-ratio: auto; }
  .hero-globe { right: -20%; top: -6%; width: 58%; }
  .hero-foot { grid-template-columns: 1fr 1fr; row-gap: 12px; font-size: 10px; }
  .hud-bracket { display: none; }
  .bend { height: 132px; }
  .deck { padding-left: 0; }
  .deck button { width: 46px; }
  .flip { gap: 8px; }
  .wk-now { font-size: 10px; }
  body.cta-bar .nav > .compact { opacity: 0; pointer-events: none; }
  .tv-scan { width: 42.5%; }
}
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  .cursor { display: none; }
}
@media (max-width: 700px) {
  .scroll-top { display: none; }
  .hero-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ecossistema: o ciano segue o mouse ---------- */
.ecosystem-map.lit-ready article :is(p, .card-no, .ecosystem-role) { transition: color 0.35s, border-color 0.35s; }
.ecosystem-map.lit-ready article.is-lit :is(p, .card-no) { color: #0b3026; }
.ecosystem-map.lit-ready article.is-lit .ecosystem-role { color: #0b0f0e; border-color: #0b302666; }
.ecosystem-map.lit-ready article:not(.is-lit) p { color: #c9d0ca; }
.ecosystem-map.lit-ready article:not(.is-lit) .card-no { color: var(--bright); }

/* ---------- oferta enxuta: cabe numa tela ---------- */
#oferta { padding: clamp(48px, 8vh, 84px) 0; }
#oferta .offer-grid { gap: clamp(32px, 5vw, 72px); align-items: center; }
#oferta h2 { font-size: clamp(34px, min(4.3vw, 8vh), 60px); margin-bottom: clamp(12px, 2vh, 20px); }
#oferta .lead { font-size: clamp(16px, 1.3vw, 18px); margin-bottom: 0; }
#oferta .includes { margin-top: clamp(10px, 2vh, 20px); }
#oferta .includes li { padding: clamp(6px, 1.1vh, 10px) 0; font-size: 15px; }
#oferta .price-card { padding: clamp(24px, 3.6vh, 36px); }
#oferta .price-card h3 { font-size: clamp(22px, 2vw, 26px); margin-bottom: clamp(12px, 2vh, 20px); }
#oferta .price { font-size: clamp(46px, min(4.4vw, 8vh), 60px); line-height: 1.05; }
#oferta .price-divider { margin: clamp(12px, 2vh, 20px) 0; }
#oferta .price-card .button { margin: clamp(10px, 1.6vh, 14px) 0 clamp(14px, 2.4vh, 22px); }
#oferta .guarantee { padding-top: clamp(12px, 2vh, 18px); }
#oferta .card-code { margin-top: clamp(12px, 2vh, 20px); }

@media (max-width: 700px) {
  .hero h1 { font-size: calc((100vw - 40px) / 9.45); }
  .hero-copy { padding-bottom: 12px; }
  .bend--marca { --bh: 170px; }
  .time-section { padding-bottom: calc(65px + 85px) !important; }
}
/* notebook baixo (768): a oferta inteira numa tela só */
@media (min-width: 701px) and (max-height: 860px) {
  #oferta { padding: 34px 0; }
  #oferta .price-card h3 br { display: none; }
  #oferta .card-code { display: none; }
  #oferta .guarantee p { font-size: 13px; }
  #oferta .includes li { padding: 5px 0; }
}

/* ---------- faixa de cima: na emenda herói / seção preta, por cima do pé dos braços ---------- */
.bend--ias { --bh: clamp(230px, 22vw, 330px); height: var(--bh); margin: calc(var(--bh) / -2) 0; z-index: 4; background: transparent; pointer-events: none; }
.bend--ias + #ruido { padding-top: calc(100px + var(--bh-ias, clamp(230px, 22vw, 330px)) / 2); }
/* escondida no carregamento: desenrola do centro quando a rolagem começa */
.motion .bend--ias { clip-path: inset(0 50% 0 50%); opacity: 0; }
@media (max-width: 700px) {
  .bend--ias { --bh: 150px; }
  .bend--ias + #ruido { padding-top: calc(65px + 75px); }
}

/* nada passa da lateral: efeito que começa grande (carimbo, recados) não pode arrastar a página no Safari */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }