/* Método Relevo · Black Friday
   Padrão Fábrica (creme pontilhado, borda preta, sombra dura, Space Grotesk + IBM Plex Mono, traço que se desenha)
   com as cores da Black: preto #080B12 + vermelho #E61E2A nos destaques. Mobile first. */

@font-face { font-family: 'Space Grotesk'; src: url(/black/fontes/space-grotesk-latin.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/black/fontes/plex-mono-600-latin.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/black/fontes/plex-mono-700-latin.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ink: #080B12; --ink6: #3B3F4A; --ink4: #5E626D; --ink2: #D9D4C8; --creme: #F6F3EC; --creme2: #EDE7DA; --pp: #FFFFFF;
  --rd: #E61E2A; --rd-esc: #B8121D; --rd2: #FDE3E4; --ok: #17A354;
  --dot: rgba(8,11,18,.09);
  --tex: radial-gradient(circle, var(--dot) 1.4px, transparent 1.9px) 0 0/24px 24px;
  --tex-tinta: radial-gradient(circle, rgba(255,255,255,.07) 1.4px, transparent 1.9px) 0 0/24px 24px;
  --fd: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --fm: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --bw: 2.5px; --sh: 4px; --raio: 14px;
  --largura: 1120px; --margem: max(16px, calc((100% - var(--largura)) / 2));
  --mola: cubic-bezier(.34,1.56,.64,1); --sai: cubic-bezier(.22,1,.36,1);
}
@media (min-width: 900px) { :root { --bw: 3px; --sh: 6px; } }

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; overflow-x: clip; }
body { font: 500 16px/1.5 var(--fd); color: var(--ink); background: var(--tex), var(--creme); min-height: 100vh; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
s { text-decoration-color: var(--rd); text-decoration-thickness: 2.5px; }
::selection { background: var(--rd); color: #fff; }
:focus-visible { outline: 3px solid var(--rd); outline-offset: 3px; border-radius: 6px; }
.escura :focus-visible, .barra-fixa :focus-visible, .faixa-black :focus-visible { outline-color: #fff; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -80px; z-index: 80; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; }
.pular:focus { top: 12px; }

/* ---------- peças básicas ---------- */
.rot { font: 700 11.5px/1.2 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--ink4); }
.escura .rot { color: #A9ADB8; }
h1, h2, h3 { font-family: var(--fd); font-weight: 700; overflow-wrap: break-word; }
h2 { font-size: clamp(30px, 7.4vw, 52px); line-height: 1.04; letter-spacing: -.035em; margin-top: 10px; }
h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--ink6); max-width: 56ch; margin-top: 16px; }
.escura .lead { color: #C9CCD4; }
.aviso { font: 600 12px/1.5 var(--fm); color: var(--ink4); letter-spacing: .02em; margin-top: 14px; }
.escura .aviso { color: #A9ADB8; }
.centro { text-align: center; justify-content: center; }
div.centro { display: flex; margin-top: 22px; }

.bt { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 13px 22px; border: var(--bw) solid var(--ink); border-radius: 12px; background: var(--pp); color: var(--ink);
  font: 700 17px/1 var(--fd); text-decoration: none; cursor: pointer; box-shadow: var(--sh) var(--sh) 0 var(--ink); transition: transform .15s var(--sai), box-shadow .15s var(--sai), background .2s; white-space: nowrap; }
.bt:hover { transform: translate(-1px, -1px); box-shadow: calc(var(--sh) + 2px) calc(var(--sh) + 2px) 0 var(--ink); }
.bt:active { transform: translate(var(--sh), var(--sh)); box-shadow: 0 0 0 var(--ink); }
.bt.verm { background: var(--rd); color: #fff; }
.bt.verm:hover { background: var(--rd-esc); }
.escura .bt { border-color: #fff; box-shadow: var(--sh) var(--sh) 0 #fff; }
.escura .bt:hover { box-shadow: calc(var(--sh) + 2px) calc(var(--sh) + 2px) 0 #fff; }
.bt.peq { min-height: 40px; padding: 8px 12px; font-size: 14px; border-width: 2px; border-radius: 9px; --sh: 3px; }
.bt.grande { min-height: 58px; font-size: 19px; padding: 16px 26px; }
.bt.largo { width: 100%; }

.marca-verm { background: linear-gradient(transparent 58%, var(--rd2) 58%, var(--rd2) 94%, transparent 94%); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.escura .marca-verm { background: none; color: var(--rd); }

/* selo BLACK FRIDAY */
.selo-black { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; border: var(--bw) solid var(--ink); border-radius: 9px; padding: 8px 12px;
  font: 700 12.5px/1 var(--fm); letter-spacing: .12em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--rd); transform: rotate(-2.5deg); }
.selo-black.peq { font-size: 11px; padding: 6px 9px; }
.escura .selo-black { border-color: #fff; }
.selo-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--rd); box-shadow: 0 0 0 0 rgba(230,30,42,.6); animation: radar 1.6s ease-out infinite; flex: none; }
@keyframes radar { to { box-shadow: 0 0 0 9px rgba(230,30,42,0); } }

/* traço que se desenha (pathLength=1 em cada traço) */
.desenha path, .desenha circle, .desenha rect { stroke-dasharray: 1; stroke-dashoffset: 1; }
.desenha.vivo path, .desenha.vivo circle, .desenha.vivo rect { animation: desenhar 1.1s var(--sai) forwards; animation-delay: var(--atraso, 0s); }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
.sem-js .desenha path, .sem-js .desenha circle, .sem-js .desenha rect { stroke-dashoffset: 0; }

.risco { position: relative; display: inline-block; white-space: nowrap; }
.risco svg, .circulo svg, .circulo-preco svg { max-width: none; }
.risco svg { position: absolute; left: -3%; width: 106%; height: .32em; bottom: -.18em; overflow: visible; color: var(--rd); pointer-events: none; }
.circulo { position: relative; display: inline-block; white-space: nowrap; }
.circulo svg { position: absolute; left: -8%; top: -22%; width: 116%; height: 144%; overflow: visible; color: var(--rd); pointer-events: none; }

/* entrada ao rolar */
.sobe { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--sai), transform .8s var(--sai); transition-delay: var(--atraso, 0s); }
.sobe.vivo, .sem-js .sobe { opacity: 1; transform: none; }

/* ---------- faixa e topo ---------- */
.faixa-black { background: var(--rd); color: #fff; border-bottom: var(--bw) solid var(--ink); overflow: hidden; }
.faixa-black-in { display: flex; width: max-content; animation: corre 26s linear infinite; font: 700 12px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.faixa-black-in span { padding: 9px 22px; }
.faixa-black-in b { background: var(--ink); padding: 3px 6px; border-radius: 4px; }
@keyframes corre { to { transform: translateX(-50%); } }

.topo { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--creme) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: var(--bw) solid var(--ink); }
.topo-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--margem); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.marca-ico { width: 34px; height: 34px; flex: none; border: var(--bw) solid var(--ink); border-radius: 9px; background: var(--ink); position: relative; box-shadow: 3px 3px 0 var(--rd); }
.marca-ico::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 11px; background: var(--rd); clip-path: polygon(0 100%, 30% 20%, 55% 65%, 75% 35%, 100% 100%); }
.marca-txt { line-height: .95; }
.marca-txt b { display: block; font: 700 18px/1 var(--fd); letter-spacing: -.02em; }
.marca-txt span { display: inline-flex; gap: 5px; align-items: center; font: 700 9.5px/1 var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--ink6); margin-top: 3px; }
.marca-txt i { font-style: normal; background: var(--rd); color: #fff; border: 1.5px solid var(--ink); border-radius: 4px; padding: 2px 4px; }

/* ---------- herói ---------- */
.heroi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 28px var(--margem) 56px; }
.heroi h1 { font-size: clamp(36px, 10.4vw, 66px); line-height: 1; letter-spacing: -.045em; margin-top: 20px; }
.heroi .lead { margin-top: 16px; }
.provas-topo { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.provas-topo li { background: var(--pp); border: var(--bw) solid var(--ink); border-radius: 12px; padding: 12px; box-shadow: 3px 3px 0 var(--ink); display: grid; gap: 4px; }
.provas-topo li:first-child { box-shadow: 3px 3px 0 var(--rd); }
.provas-topo b { font: 700 clamp(28px, 8vw, 40px)/1 var(--fd); letter-spacing: -.04em; color: var(--rd); }
.provas-topo span { font: 600 12px/1.35 var(--fm); color: var(--ink6); }
.preco-topo { margin-top: 24px; display: grid; gap: 12px; justify-items: start; }
.preco-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 700; }
.preco-linha .de { font-size: 18px; color: var(--ink4); }
.preco-linha .por { font-size: 20px; }
.preco-linha .por b { font-size: 40px; letter-spacing: -.04em; color: var(--rd); }
.preco-topo .bt { width: 100%; }
.nota { font: 700 11.5px/1.5 var(--fm); letter-spacing: .06em; text-transform: uppercase; color: var(--ink6); }
.escura .nota { color: #C9CCD4; }

.heroi-cel { position: relative; justify-self: center; width: min(78vw, 300px); padding: 0 6px 34px; }
.cel { position: relative; aspect-ratio: 9 / 16; background: var(--ink); border: var(--bw) solid var(--ink); border-radius: 30px; padding: 8px; box-shadow: 8px 8px 0 var(--rd); animation: flutua 6s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-6px) rotate(-.6deg); } }
.cel::before { content: ''; position: absolute; top: 14px; left: 50%; translate: -50% 0; width: 56px; height: 8px; border-radius: 6px; background: var(--ink); z-index: 2; }
.cel-tela { position: relative; height: 100%; border-radius: 22px; overflow: hidden; background: #E9E4D8; }
.cel-video { width: 100%; height: 100%; object-fit: cover; }
.cel-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%; border: var(--bw) solid var(--ink); background: var(--rd); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: opacity .25s, transform .2s var(--mola); }
.cel-play svg { width: 28px; height: 28px; margin-left: 3px; }
.cel-play:hover { transform: scale(1.06); }
.cel[data-tocando] .cel-play { opacity: 0; pointer-events: none; }
.balao { position: absolute; display: inline-flex; align-items: center; gap: 6px; background: var(--pp); border: var(--bw) solid var(--ink); border-radius: 11px; padding: 7px 10px; font: 700 14px/1 var(--fd); box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; animation: balanca 4s ease-in-out infinite; }
.balao span { color: var(--rd); font-size: 13px; }
.b1 { left: -12px; top: 14%; transform: rotate(-4deg); }
.b2 { right: -12px; top: 42%; transform: rotate(3deg); animation-delay: -1.3s; }
.b3 { left: -8px; top: 68%; transform: rotate(-2deg); animation-delay: -2.6s; }
@keyframes balanca { 50% { translate: 0 -5px; } }
.cel-leg { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 700 10.5px/1.3 var(--fm); letter-spacing: .06em; text-transform: uppercase; color: var(--ink4); }

/* ---------- contador ---------- */
.escura { background: var(--tex-tinta), var(--ink); color: #fff; }
.contador { padding: 40px var(--margem); border-block: var(--bw) solid var(--ink); }
.contador-in { display: grid; justify-items: center; text-align: center; gap: 16px; }
.contador-tit { font: 700 13px/1 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0; }
.relogio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 520px; }
.relogio div { background: var(--pp); color: var(--ink); border: var(--bw) solid #fff; border-radius: 12px; padding: 12px 4px 10px; box-shadow: 4px 4px 0 var(--rd); display: grid; gap: 6px; }
.relogio b { font: 700 clamp(30px, 9vw, 56px)/1 var(--fd); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.relogio small { font: 700 10.5px/1 var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--ink4); }
.contador-fim { font: 700 22px/1.2 var(--fd); }
.contador-nota { font: 600 12.5px/1.5 var(--fm); color: #C9CCD4; }

/* ---------- seções ---------- */
.secao { padding: 64px var(--margem); position: relative; }
.secao-cab { max-width: 780px; margin-bottom: 32px; }
.creme-escuro { background: var(--tex), var(--creme2); border-block: var(--bw) solid var(--ink); }

.passos { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; counter-reset: p; }
.passo { position: relative; padding: 22px; border: var(--bw) solid var(--ink); border-radius: var(--raio); background: var(--pp); box-shadow: var(--sh) var(--sh) 0 var(--ink); }
.passo:nth-child(2) { box-shadow: var(--sh) var(--sh) 0 var(--rd); }
.passo-n { position: absolute; right: 16px; top: 14px; font: 700 13px/1 var(--fm); color: var(--ink4); }
.passo-ic { width: 52px; height: 52px; padding: 8px; border: var(--bw) solid var(--ink); border-radius: 12px; background: var(--rd2); color: var(--rd); margin-bottom: 14px; }
.passo p { color: var(--ink6); margin-top: 6px; }
.passo .passo-tag { display: inline-block; margin-top: 14px; font: 700 11px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--creme); border: 2px solid var(--ink); border-radius: 7px; padding: 6px 8px; }

/* ---------- provas ---------- */
.prova-bloco { background: var(--pp); border: var(--bw) solid var(--ink); border-radius: 16px; padding: 18px; box-shadow: var(--sh) var(--sh) 0 var(--ink); margin-bottom: 22px; }
.prova-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.chip-rede { font: 700 12px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #fff; border-radius: 7px; padding: 6px 9px; }
.numeros { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.numeros li { border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; display: grid; gap: 3px; background: var(--creme); min-width: 0; }
.numeros b { font: 700 clamp(20px, 5.6vw, 28px)/1.05 var(--fd); letter-spacing: -.03em; overflow-wrap: anywhere; }
.numeros span { font: 600 11.5px/1.3 var(--fm); color: var(--ink6); }
.numeros .num-grande { grid-column: 1 / -1; background: var(--ink); color: #fff; }
.numeros .num-grande b { font-size: clamp(40px, 12vw, 64px); color: #fff; }
.numeros .num-grande span { color: #C9CCD4; }
.numeros .num-verm { background: var(--rd2); }
.numeros .num-verm b { color: var(--rd); }
.print { margin-top: 14px; }
.print img { width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
.print figcaption { font: 600 11.5px/1.4 var(--fm); color: var(--ink4); margin-top: 8px; }

.videos-prova { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 26px; }
.video-prova { min-width: 0; }
.video-prova img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border: var(--bw) solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); background: var(--creme); }
.video-prova:first-child img { box-shadow: 3px 3px 0 var(--rd); }
.video-prova figcaption { margin-top: 10px; font: 600 11px/1.35 var(--fm); color: var(--ink6); }
.video-prova figcaption b { display: block; font: 700 clamp(18px, 5vw, 30px)/1 var(--fd); letter-spacing: -.03em; color: var(--rd); margin-bottom: 3px; }
.video-prova small { display: block; color: var(--ink4); margin-top: 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 430px) { .video-prova figcaption { font-size: 10px; } }

/* ---------- onde postar ---------- */
.redes { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.rede { border: var(--bw) solid var(--ink); border-radius: var(--raio); background: var(--pp); padding: 20px; box-shadow: var(--sh) var(--sh) 0 var(--ink); }
.rede-ic { width: 40px; height: 40px; border-radius: 11px; border: 2px solid var(--ink); background: var(--ink); color: #fff; display: grid; place-items: center; margin-bottom: 12px; }
.rede-ic svg { width: 22px; height: 22px; }
.rede p { color: var(--ink6); margin-top: 6px; }
.rede p b { color: var(--rd); }

/* ---------- oferta ---------- */
.oferta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
.pilha { list-style: none; padding: 0; display: grid; gap: 10px; }
.pilha li { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--pp); color: var(--ink); border: var(--bw) solid #fff; border-radius: 12px; padding: 14px 16px; }
.pilha li div { min-width: 0; }
.pilha b { display: block; font-size: 17px; line-height: 1.2; }
.pilha span { display: block; color: var(--ink6); font-size: 14.5px; margin-top: 3px; }
.pilha em { font: 700 15px/1 var(--fm); font-style: normal; white-space: nowrap; color: var(--ink4); }
.pilha .pilha-total { background: transparent; color: #fff; border-style: dashed; }
.pilha .pilha-total em { color: #fff; font-size: 20px; }
.caixa-preco { background: var(--pp); color: var(--ink); border: var(--bw) solid #fff; border-radius: 18px; padding: 24px 20px; box-shadow: 8px 8px 0 var(--rd); display: grid; justify-items: center; text-align: center; gap: 10px; }
.caixa-de { font: 700 15px/1.4 var(--fm); color: var(--ink4); margin-top: 8px; }
.caixa-valor { font: 700 clamp(64px, 20vw, 96px)/1 var(--fd); letter-spacing: -.05em; padding: 10px 14px; }
.circulo-preco { position: relative; display: inline-block; }
.circulo-preco svg { position: absolute; left: -14%; top: -18%; width: 128%; height: 136%; overflow: visible; color: var(--rd); pointer-events: none; }
.caixa-sub { font: 700 12px/1.4 var(--fm); text-transform: uppercase; letter-spacing: .06em; color: var(--ink6); }
.caixa-preco .bt { margin-top: 6px; border-color: var(--ink); box-shadow: var(--sh) var(--sh) 0 var(--ink); }
.garantias { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 6px; font: 700 11.5px/1.3 var(--fm); text-transform: uppercase; letter-spacing: .04em; color: var(--ink6); }
.garantias li::before { content: '✓ '; color: var(--ok); }
.aulas { margin-top: 26px; border: var(--bw) solid #fff; border-radius: 14px; background: rgba(255,255,255,.04); }
.aulas summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-weight: 700; font-size: 17px; min-height: 48px; }
.aulas summary::-webkit-details-marker { display: none; }
.aulas ol { list-style: none; padding: 0 18px 18px; display: grid; gap: 8px; color: #E3E5EA; }
.aulas ol b { font: 700 12px/1 var(--fm); color: var(--rd); margin-right: 8px; }

/* ---------- para quem ---------- */
.para { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.para-col { border: var(--bw) solid var(--ink); border-radius: var(--raio); padding: 22px; background: var(--pp); box-shadow: var(--sh) var(--sh) 0 var(--ink); }
.para-col h3 { display: flex; align-items: center; gap: 10px; }
.para-col h3 span { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 15px; }
.sim h3 span { background: #D7F2E1; color: #0d6b36; }
.nao { background: var(--creme); }
.nao h3 span { background: var(--rd); color: #fff; }
.para-col ul { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 16px; }
.para-col li { padding-left: 20px; position: relative; color: var(--ink6); }
.para-col li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 9px; height: 3px; border-radius: 2px; background: var(--ink); }
.nao li::before { background: var(--rd); }

/* ---------- garantia ---------- */
.garantia-sec { padding-top: 8px; }
.garantia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; border: var(--bw) solid var(--ink); border-radius: 18px; padding: 24px; background: var(--pp); box-shadow: 8px 8px 0 var(--ink); }
.garantia h2 { font-size: clamp(26px, 6vw, 40px); }
.garantia p:not(.rot) { color: var(--ink6); margin-top: 10px; max-width: 60ch; }
.garantia-selo { position: relative; width: 120px; height: 120px; display: grid; place-content: center; text-align: center; color: var(--rd); }
.garantia-selo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.garantia-selo b { font: 700 52px/0.9 var(--fd); color: var(--ink); letter-spacing: -.04em; }
.garantia-selo small { font: 700 11px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }

/* ---------- quem ensina ---------- */
.quem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; }
.quem-foto { max-width: 300px; }
.quem-foto img { width: 100%; height: auto; border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: 8px 8px 0 var(--rd); transform: rotate(-1.5deg); background: var(--creme); }
.quem-txt > p:not(.rot):not(.aviso) { color: var(--ink6); margin-top: 12px; max-width: 60ch; }
.quem-txt .quem-cargo { font: 700 13px/1.4 var(--fm); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin-top: 6px; }
.quem-cargo a { color: var(--rd); text-decoration: none; display: inline-block; padding: 6px 0; }
.quem-cargo a:hover { text-decoration: underline; }
.quem-num { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.quem-num li { background: var(--pp); border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; display: grid; gap: 3px; }
.quem-num b { font: 700 28px/1 var(--fd); letter-spacing: -.03em; color: var(--rd); }
.quem-num span { font: 600 11.5px/1.3 var(--fm); color: var(--ink6); }

/* ---------- dúvidas ---------- */
.duvidas { display: grid; gap: 12px; max-width: 820px; }
.duvida { border: var(--bw) solid var(--ink); border-radius: 14px; background: var(--pp); box-shadow: 3px 3px 0 var(--ink); }
.duvida[open] { box-shadow: 3px 3px 0 var(--rd); }
.duvida summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; font-weight: 700; font-size: 17px; min-height: 48px; }
.duvida summary::-webkit-details-marker { display: none; }
.duv-mais { width: 28px; height: 28px; flex: none; border: 2px solid var(--ink); border-radius: 8px; position: relative; background: var(--rd); transition: transform .35s var(--mola), background .2s; }
.aulas .duv-mais { border-color: #fff; }
.duv-mais::before, .duv-mais::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; background: #fff; translate: -50% -50%; border-radius: 2px; }
.duv-mais::after { rotate: 90deg; transition: rotate .3s; }
details[open] > summary .duv-mais { transform: rotate(180deg); background: var(--ink); }
details[open] > summary .duv-mais::after { rotate: 0deg; }
.duvida p { padding: 0 18px 18px; color: var(--ink6); max-width: 68ch; animation: abre .35s var(--sai); }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- fecho e rodapé ---------- */
.final { padding: 72px var(--margem) 80px; text-align: center; display: grid; justify-items: center; gap: 20px; }
.final h2 { max-width: 18ch; }
.final-preco { font: 700 22px/1 var(--fd); }
.final-preco b { font-size: 48px; letter-spacing: -.04em; color: var(--rd); }
.final-preco s { color: #A9ADB8; }

.rodape { padding: 30px var(--margem) 110px; border-top: var(--bw) solid var(--ink); display: grid; gap: 10px; font-size: 14px; color: var(--ink6); }
.rodape .aviso { margin-top: 0; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.rodape nav a { font-weight: 600; display: inline-block; padding: 10px 0; }
.termos summary { cursor: pointer; font: 700 12px/1 var(--fm); text-transform: uppercase; letter-spacing: .08em; padding: 10px 0; }
.termos p { max-width: 80ch; font-size: 13.5px; line-height: 1.55; }

/* ---------- barra fixa (celular) ---------- */
.barra-fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--ink); color: #fff; border-top: var(--bw) solid var(--rd);
  transform: translateY(110%); transition: transform .35s var(--sai); }
.barra-fixa.vivo { transform: none; }
.barra-fixa p { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; line-height: 1.1; }
.barra-fixa s { color: #A9ADB8; font-weight: 700; font-size: 14px; }
.barra-fixa b { font-size: 24px; letter-spacing: -.03em; }
.barra-fixa small { grid-column: 1 / -1; font: 700 10px/1.3 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: #C9CCD4; }
.barra-fixa .bt { border-color: #fff; box-shadow: 3px 3px 0 #fff; padding: 12px 16px; font-size: 16px; }

/* ---------- telas maiores ---------- */
@media (min-width: 600px) {
  .heroi-cel { width: 300px; }
  .preco-topo .bt { width: auto; }
  .redes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .para { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garantia { grid-template-columns: 130px minmax(0, 1fr); padding: 30px; }
  .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prova-bloco { padding: 24px; }
  .videos-prova { gap: 18px; }
  .relogio { gap: 14px; }
}
@media (min-width: 900px) {
  .heroi { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; padding: 56px var(--margem) 80px; }
  .heroi-cel { width: 320px; justify-self: center; }
  .secao { padding: 96px var(--margem); }
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .passo:hover { transform: translate(-3px, -3px) rotate(-.6deg); box-shadow: 9px 9px 0 var(--ink); transition: transform .3s var(--mola), box-shadow .3s; }
  .oferta { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; }
  .caixa-preco { position: sticky; top: 90px; padding: 30px; }
  .quem { grid-template-columns: 320px minmax(0, 1fr); gap: 56px; }
  .contador { padding: 48px var(--margem); }
  .contador-in { grid-template-columns: auto minmax(0, 1fr) auto; text-align: left; gap: 28px; justify-items: start; align-items: center; }
  .contador-tit { max-width: 9ch; font-size: 15px; line-height: 1.4; }
  .contador-nota { grid-column: 1 / -1; justify-self: center; }
  .contador-fim { grid-column: 2; grid-row: 1; }
  .contador-in .bt { grid-column: 3; grid-row: 1; }
  .contador-in { max-width: 980px; margin: 0 auto; }
  .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .numeros .num-grande { grid-column: span 2; grid-row: span 2; align-content: center; }
  .final { padding: 110px var(--margem); }
  .rodape { padding-bottom: 36px; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px 24px; }
  .rodape nav { justify-content: flex-end; }
  .termos { grid-column: 1 / -1; }
  .barra-fixa { display: none; }
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sobe { opacity: 1; transform: none; transition: none; }
  .desenha path, .desenha circle, .desenha rect { stroke-dashoffset: 0; animation: none !important; }
  .faixa-black-in, .cel, .balao, .selo-ponto { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------- tops + estilos (09/11) ---------- */
.tops-tit { font: 700 clamp(20px, 5vw, 26px)/1.1 var(--fd); letter-spacing: -.02em; margin: 8px 0 12px; }
.videos-prova.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-prova.tile img { aspect-ratio: 271 / 423; object-fit: cover; object-position: center bottom; background: #0f1218; }
.barra-curtidas { max-width: 520px; margin: 0 auto 26px; }
.barra-curtidas img { width: 100%; height: auto; border-radius: 10px; background: #212328; }
.estilos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 22px; }
.estilos figure { min-width: 0; margin: 0; }
.estilos img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border: var(--bw) solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); background: var(--creme); }
.estilos figcaption { margin-top: 8px; font: 700 12px/1.2 var(--fm); text-transform: uppercase; letter-spacing: .05em; color: var(--ink6); }
.redes.extras { margin-bottom: 24px; }
@media (min-width: 600px) { .videos-prova.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } .estilos { grid-template-columns: repeat(6, minmax(0, 1fr)); } .redes.extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 10/11: demo do pedido, agentes, estilos em vídeo, custo ---------- */
.demo { display: grid; gap: 16px; margin: 4px 0 28px; }
.term { background: var(--ink); color: #E8E6E0; border: var(--bw) solid var(--ink); border-radius: var(--raio); box-shadow: var(--sh) var(--sh) 0 var(--rd); padding: 0 0 16px; font: 600 14px/1.55 var(--fm); overflow: hidden; min-width: 0; }
.term-cab { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #23262f; margin-bottom: 12px; }
.term-cab i { width: 10px; height: 10px; border-radius: 50%; background: #3B3F4A; }
.term-cab i:first-child { background: var(--rd); }
.term-cab span { margin-left: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8A8E99; }
.term-pedido { padding: 0 16px; color: #fff; overflow-wrap: anywhere; }
.term-pedido > span:first-child { color: var(--rd); }
.term-lista { list-style: none; padding: 10px 16px 0; display: grid; gap: 5px; }
.term-lista li { color: #B9BCC5; padding-left: 22px; position: relative; }
.term-lista li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); }
.term-lista .term-ok { color: #fff; }
.term-lista .term-ok::before { content: "▶"; color: var(--rd); }
.digita { display: inline; }
body:not(.sem-js) .demo:not(.vivo) .term-lista li { opacity: 0; }
body:not(.sem-js) .demo.vivo .term-lista li { animation: termEntra .35s var(--sai) both; animation-delay: calc(1.1s + var(--n) * .45s); }
body:not(.sem-js) .demo.vivo .digita { animation: digitar 1s steps(24) both; }
body:not(.sem-js) .demo:not(.vivo) .digita { opacity: 0; }
@keyframes termEntra { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes digitar { from { opacity: 0; } to { opacity: 1; } }
.agentes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; counter-reset: ag; }
.agentes li { counter-increment: ag; background: var(--pp); border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; min-width: 0; position: relative; }
.agentes li::before { content: counter(ag, decimal-leading-zero); font: 700 11px/1 var(--fm); color: var(--rd); display: block; margin-bottom: 4px; }
.agentes b { display: block; font-size: 15px; }
.agentes span { display: block; font-size: 13px; color: var(--ink6); line-height: 1.35; }
.agentes li:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .demo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 28px; }
  .agentes { grid-template-columns: minmax(0, 1fr); }
  .agentes li:last-child { grid-column: auto; }
  .agentes li:not(:last-child)::after { content: "↓"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--rd); }
}

.pedido-linha { font: 600 14px/1.5 var(--fm); margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.pedido-linha code { background: var(--ink); color: #fff; padding: 3px 8px; border-radius: 6px; font: inherit; }
.pedido-linha b { color: var(--rd); }
.estilos-v { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.estilo { position: relative; }
.estilo video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border: var(--bw) solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); background: var(--ink); }
.estilo-tag { position: absolute; top: 8px; left: 8px; font: 700 10.5px/1 var(--fm); text-transform: uppercase; letter-spacing: .06em; padding: 5px 7px; border-radius: 6px; background: var(--rd); color: #fff; border: 2px solid var(--ink); }
.estilo-tag.pack { background: var(--creme); color: var(--ink); }
@media (min-width: 600px) { .estilos.estilos-v { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .estilos.estilos-v { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.custos { list-style: none; padding: 0; display: grid; gap: 10px; }
.custos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; background: var(--pp); border: var(--bw) solid var(--ink); border-radius: 12px; padding: 14px 16px; }
.custos b { font-size: 17px; }
.custos span { grid-column: 1; color: var(--ink6); font-size: 14.5px; }
.custos em { grid-column: 2; grid-row: 1 / span 2; font: 700 13px/1 var(--fm); font-style: normal; text-transform: uppercase; white-space: nowrap; padding: 6px 8px; border: 2px solid var(--ink); border-radius: 7px; }
.custos em.gratis { background: var(--ok); color: #fff; }
@media (min-width: 900px) { .custos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .custos li:first-child { grid-column: 1 / -1; } }

/* ---------- ajustes do analisador de telas (10/11) ---------- */
.marca { min-height: 44px; }
.estilo-tag { font-size: 12px; }
.cel-leg { font-size: 11.5px; }
@media (min-width: 900px) {
  .heroi { padding-top: 36px; }
  .heroi h1 { font-size: clamp(40px, min(5.2vw, 7.4vh), 66px); margin-top: 14px; }
  .heroi .lead { font-size: 17.5px; margin-top: 12px; }
  .provas-topo { margin-top: 16px; }
  .provas-topo b { font-size: clamp(26px, 3vw, 36px); }
  .preco-topo { margin-top: 18px; }
}
.com-som { display: flex; align-items: center; gap: 8px; margin: 14px auto 0; font: 700 13px/1 var(--fm); text-transform: uppercase; letter-spacing: .05em; background: var(--ink); color: #fff; border: var(--bw) solid var(--ink); border-radius: 999px; padding: 12px 16px; min-height: 44px; cursor: pointer; box-shadow: 3px 3px 0 var(--rd); }
.com-som:hover { background: var(--rd); }