/* ============================================================
   RAIO-X DO FUNIL · v2 · camada premium
   Lâminas no padrão Megazord + efeitos do Taste Master Showcase.
   Carrega depois de style.css (que continua dono dos componentes
   do checklist, da calculadora, do formulário e da impressão).
   Origem de cada efeito anotada no bloco.
   ============================================================ */

:root{
  --noite:#050505;
  --lam-dark:#0E0E10;
  --lam-ink:#09090A;
  --lam-graf:#141417;
  --gut:8px;
  --lam-r:22px;
  --nav-h:52px;
  --head-top:clamp(44px,9vw,104px);
}
@media (min-width:700px){ :root{ --gut:14px; --lam-r:26px } }
@media (min-width:1100px){ :root{ --gut:18px; --lam-r:30px } }

html{scroll-padding-top:84px}
body{background:var(--noite)}
.skip{z-index:1100}
.grain{opacity:.04;z-index:40}

/* ---------- lâminas (Megazord) ---------- */
section{--bg:var(--lam-dark);--card:#16161A;--field:#1C1D21}
.lam{margin:var(--gut) var(--gut) 0;border-radius:var(--lam-r);border:1px solid rgba(243,239,232,.07);padding:0 0 var(--sec-y);overflow:hidden}
@supports (overflow:clip){ .lam{overflow:clip} }
.lam.s-graf{--bg:var(--lam-graf);--card:#1B1C20;--field:#202227}
.lam.lam-ink{--bg:var(--lam-ink);--card:#121214;--field:#18191C}
.lam.s-paper{border-color:rgba(7,7,7,.08)}
.lam-bar{position:relative;z-index:3;display:flex;align-items:center;gap:14px;padding:18px var(--px) 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.lam-bar .lb-wm{font-family:var(--f-dis);font-size:17px;letter-spacing:.01em;text-transform:none;color:var(--ink)}
.lam-bar .lb-ln{flex:1;height:1px;background:var(--line)}
.lam-bar .lb-t,.lam-bar .lb-ln:nth-of-type(2){display:none}
.lam-bar .lb-p{font-variant-numeric:tabular-nums}
@media (min-width:700px){ .lam-bar .lb-t,.lam-bar .lb-ln:nth-of-type(2){display:block} .lam-bar{padding-top:22px} }

/* cabeçalho de lâmina: numeral + título (composição Megazord "01 Bússola de valor") */
.lh{display:grid;grid-template-columns:1fr;gap:14px;margin:var(--head-top) 0 clamp(34px,6vw,64px);padding-bottom:24px;border-bottom:1px solid var(--line);position:relative}
.lh-num{font-family:var(--f-imp);font-weight:400;font-size:clamp(96px,30vw,232px);line-height:.8;letter-spacing:-.01em;color:var(--ink);position:relative;padding-bottom:18px;font-variant-numeric:tabular-nums;justify-self:start}
.lh-num::after{content:"";position:absolute;left:2px;bottom:0;width:48px;height:3px;background:var(--scar)}
.lh-txt{display:grid;gap:12px;align-content:end;min-width:0}
.lh .sidx{white-space:nowrap}
.lh .stitle{font-size:clamp(42px,10.6vw,96px);line-height:.96;letter-spacing:-.02em}
@media (min-width:700px){
  .lh{grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:end}
}

/* figuras fotográficas */
.ph{position:relative;border-radius:18px;overflow:hidden;background:#070707;isolation:isolate}
.ph picture,.ph img{display:block;width:100%;height:100%}
.ph img{object-fit:cover;transition:transform 1.4s var(--corte)}
.ph:hover img{transform:scale(1.025)}
.ph-cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:12px;padding:40px 16px 14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#E6E0D6;
  background:linear-gradient(180deg,transparent,rgba(5,5,5,.78))}
.ph-cap span:first-child{color:#D9767B}

/* ============================================================
   00 · CAPA · RADIOGRAFIA
   05.02 Image Spotlight (facho no cursor) + varredura de raio-x
   automática (janela com contra-translação: só transform).
   02.10 Outline → Fill na 2ª linha do título.
   02.09 Rolling Digits nos números da capa.
   ============================================================ */
.capa{margin:var(--gut) var(--gut) 0;border-radius:var(--lam-r);border:1px solid rgba(243,239,232,.07);background:#030303;isolation:isolate;min-height:calc(100dvh - var(--gut));overflow:hidden}
.capa .wrap{z-index:3}
.xr{position:absolute;z-index:0;top:0;right:-22%;width:122%;height:min(118vw,780px)}
.xr picture{position:absolute;inset:0}
.xr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 0}
.xr-base{opacity:.5}
.xr-hi{filter:brightness(1.55) contrast(1.12)}
.xr-scan{position:absolute;left:0;right:0;top:0;height:24%;overflow:hidden;transform:translateY(-100%);will-change:transform;
  animation:xrScan 7.5s cubic-bezier(.7,0,.15,1) 1.2s infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 35%,#000 82%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 35%,#000 82%)}
.xr-scan-in{position:absolute;left:0;right:0;top:0;height:416.667%;transform:translateY(24%);will-change:transform;
  animation:xrScanIn 7.5s cubic-bezier(.7,0,.15,1) 1.2s infinite}
.xr-scan::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 30%,rgba(243,239,232,.08) 92%,rgba(243,239,232,.0) 100%)}
.xr-scan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3;background:linear-gradient(90deg,transparent,rgba(243,239,232,.85) 18%,rgba(243,239,232,.85) 82%,transparent)}
@keyframes xrScan{0%{transform:translateY(-100%)}62%,100%{transform:translateY(417%)}}
@keyframes xrScanIn{0%{transform:translateY(24%)}62%,100%{transform:translateY(-100.1%)}}
.xr-spot{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--corte);
  -webkit-mask-image:radial-gradient(circle 190px at var(--mx,60%) var(--my,40%),#000 40px,transparent 190px);
  mask-image:radial-gradient(circle 190px at var(--mx,60%) var(--my,40%),#000 40px,transparent 190px)}
.xr.on .xr-spot{opacity:1}
.xr-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(3,3,3,.2) 0%,rgba(3,3,3,0) 26%,rgba(3,3,3,.55) 62%,#030303 100%),
  linear-gradient(90deg,rgba(3,3,3,.82) 0%,rgba(3,3,3,.35) 46%,rgba(3,3,3,0) 70%)}
.xr-marks{position:absolute;inset:0;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,239,232,.5)}
.xr-marks .xm{position:absolute}
.xr-marks .xm-1{right:calc(22% + 18px);top:118px}
.xr-marks .xm-2{right:calc(22% + 18px);top:136px;color:#D9767B}
.xr-marks .xm-3{display:none}
.capa .topbar{border-bottom-color:rgba(243,239,232,.14)}
.capa-body{padding-top:clamp(120px,40vw,260px)}
.brut{text-shadow:0 2px 28px rgba(3,3,3,.55)}
.brut .l2{position:relative;-webkit-text-stroke-color:#D8DCE1;text-shadow:none}
.brut .l2::after{content:attr(data-fill);position:absolute;left:0;top:0;color:var(--branco);-webkit-text-stroke:0;pointer-events:none;
  clip-path:inset(100% 0 0 0);animation:l2scan 2.6s .7s cubic-bezier(.7,0,.15,1) both}
@keyframes l2scan{0%{clip-path:inset(100% 0 0 0)}48%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0)}}
@media (hover:hover){ .brut:hover .l2::after{animation:l2scan 1.8s cubic-bezier(.7,0,.15,1) both} }
.capa-sub{text-shadow:0 1px 18px rgba(3,3,3,.6)}
.capa-meta{border-top-color:rgba(243,239,232,.16);background:rgba(3,3,3,.35)}
.capa-meta b{font-size:32px;color:var(--branco)}
.rd{display:inline-block;height:1.1em;line-height:1.1em;overflow:hidden;vertical-align:top}
.rd-s{display:flex;flex-direction:column;transform:translateY(0);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.rd-s span{height:1.1em;line-height:1.1em}
.capa .btn-pri{background:var(--branco);color:#070707}
.capa .btn-pri:hover{background:#D8DCE1}
.capa .btn-sec{background:rgba(3,3,3,.45);border-color:rgba(243,239,232,.28)}
@media (min-width:700px){
  .xr{top:0;bottom:0;right:0;width:74%;height:auto}
  .xr img{object-position:100% 50%}
  .xr-base{opacity:.62}
  .xr-veil{background:
    linear-gradient(90deg,#030303 0%,rgba(3,3,3,.86) 18%,rgba(3,3,3,.2) 52%,rgba(3,3,3,0) 70%),
    linear-gradient(180deg,rgba(3,3,3,0) 50%,rgba(3,3,3,.72) 86%,#030303 100%)}
  .xr-marks .xm-1{right:28px;top:86px}
  .xr-marks .xm-2{right:28px;top:106px}
  .xr-marks .xm-3{display:block;right:28px;bottom:150px;writing-mode:vertical-rl;transform:rotate(180deg)}
  .capa-body{padding-top:56px}
  .capa-lead{color:#D2D5D9;text-shadow:0 1px 3px rgba(3,3,3,.95),0 0 24px rgba(3,3,3,.9)}
}
@media (min-width:1100px){
  .brut{font-size:clamp(150px,15vw,232px)}
}

/* fita (01.03 Statement + Ticker) */
.ticker{margin:var(--gut) var(--gut) 0;border:1px solid rgba(243,239,232,.08);border-radius:999px;background:#08080A}

/* ============================================================
   01 · MÉTODO · cronômetro sobre a mesa
   06.05 Timeline scroll-linked (preenchimento por scaleY)
   ============================================================ */
.mt-grid{display:grid;gap:36px}
.mt-side .lede{margin-bottom:28px}
.ph-mesa{aspect-ratio:3/2}
.tl{position:relative;padding-left:30px}
.tl-line{position:absolute;left:5px;top:30px;bottom:30px;width:1px;background:var(--line)}
.tl-fill{position:absolute;inset:0;background:var(--vinho-leg);transform:scaleY(0);transform-origin:50% 0;will-change:transform}
.tl .steps{border-top:0;margin-top:0}
.tl .steps li{position:relative}
.tl .steps li::before{content:"";position:absolute;left:-30px;top:31px;width:11px;height:11px;border-radius:50%;border:1px solid var(--faint);background:var(--bg);
  transition:background-color .5s var(--corte),border-color .5s var(--corte),transform .5s var(--corte);transform:scale(.85)}
.tl .steps li.on::before{background:var(--vinho-leg);border-color:var(--vinho-leg);transform:scale(1)}
.tl .steps .t{transition:color .5s var(--corte)}
.tl .steps li.on .t{color:var(--ink)}
.mt-main .need{margin-top:32px}
#como-usar .rule-1{margin-top:56px;font-size:clamp(28px,5.2vw,46px);max-width:24ch}
@media (min-width:1000px){
  .mt-grid{grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .mt-side{position:sticky;top:96px}
  .tl .steps li{grid-template-columns:150px 1fr;gap:6px 28px}
  .tl .steps li .t{grid-row:span 2;padding-top:8px}
  .mt-main .need{grid-template-columns:1fr}
  .mt-main .need ul{grid-template-columns:1fr 1fr}
}

/* ============================================================
   ÍNDICE · torre 3D (linguagem da torre do Megazord, em CSS 3D)
   ============================================================ */
.idx-grid{display:grid;gap:32px;padding-top:var(--head-top)}
.tw-box{border:1px solid rgba(243,239,232,.1);border-radius:20px;background:radial-gradient(120% 80% at 50% 92%,rgba(201,162,122,.10),transparent 60%),#0C0C0E;padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
.tw-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(243,239,232,.08)}
.tw-head .label{font-size:10px}
.tw{position:relative;height:400px;perspective:1100px;perspective-origin:50% 30%;cursor:default}
.tw-spin{position:absolute;left:50%;top:54%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-21deg) rotateY(0deg);animation:twRot 48s linear infinite;animation-play-state:paused}
.tw.run .tw-spin{animation-play-state:running}
@keyframes twRot{to{transform:rotateX(-21deg) rotateY(-360deg)}}
.tw-f{position:absolute;width:var(--s,148px);height:var(--s,148px);left:calc(var(--s,148px) / -2);top:calc(var(--s,148px) / -2);border-radius:9px;
  border:1px solid var(--edge,rgba(243,239,232,.34));background:linear-gradient(135deg,rgba(34,34,38,.97),rgba(15,15,17,.97));
  transform:translateY(var(--y)) rotateY(var(--ry)) translateX(var(--dx,0px)) rotateX(90deg);transition:transform .7s var(--corte),border-color .35s var(--corte),background .35s var(--corte);
  backface-visibility:visible;pointer-events:auto;cursor:pointer}
.tw-f::before{content:"";position:absolute;inset:14px;border:1px dashed rgba(243,239,232,.13);border-radius:4px}
.tw-f::after{content:attr(data-n);position:absolute;left:12px;top:9px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:rgba(243,239,232,.45)}
.tw-f.tw-top{background:linear-gradient(135deg,#242428,#121214)}
.tw-f.tw-top::before{inset:22px;border-style:solid;border-color:rgba(243,239,232,.22)}
.tw-f.tw-top .tw-mk{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-dis);font-size:44px;color:rgba(243,239,232,.8)}
.tw-f.tw-top .tw-mk i{font-style:normal;color:#C24A50}
.tw-f.tw-base{border-color:rgba(243,239,232,.14);background:#0A0A0B}
.tw-f.tw-base::before,.tw-f.tw-base::after{display:none}
.tw-f.on{--dx:30px;border-color:#C24A50;background:linear-gradient(135deg,#3A1418,#170B0D)}
.tw-f.on::after{color:#F3EFE8}
.tw-foot{display:flex;align-items:flex-end;gap:14px;padding-top:12px;border-top:1px solid rgba(243,239,232,.08)}
.tw-big{font-family:var(--f-dis);font-size:54px;line-height:.8;color:#D9767B}
.tw-sub{display:block;font-family:var(--f-dis);font-size:24px;line-height:1.1;color:var(--branco);margin-top:4px}
.idx-side .toc{margin-top:0}
.idx-side .toc > .label{font-family:var(--f-dis);font-size:clamp(46px,9vw,84px);letter-spacing:-.02em;text-transform:none;color:var(--ink);line-height:1;margin-bottom:28px !important}
.idx-side .toc ol{grid-template-columns:1fr !important}
.idx-side .toc a{padding:16px 0;transition:padding .45s var(--corte),color .3s}
.idx-side .toc a span:last-child{font-size:19px}
.idx-side .toc a:hover,.idx-side .toc a.hot{padding-left:12px}
.idx-side .toc a.hot span:first-child{color:#D9767B}
@media (min-width:1000px){
  .idx-grid{grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .tw{height:540px}
  .tw-f{--s:170px}
  .tw .tw-spin{scale:1.28}
}

/* ============================================================
   TRANSIÇÕES · 06.07 Cinematic Break com parallax
   ============================================================ */
.brk{position:relative;margin:var(--gut) var(--gut) 0;border-radius:var(--lam-r);overflow:hidden;height:min(112vw,540px);background:#050505;border:1px solid rgba(243,239,232,.06)}
.brk-frame{position:absolute;left:0;right:0;top:-12%;height:124%;will-change:transform}
.brk-frame picture,.brk-frame img{display:block;width:100%;height:100%}
.brk-frame img{object-fit:cover}
.brk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.35),rgba(5,5,5,0) 30%,rgba(5,5,5,0) 62%,rgba(5,5,5,.7)),radial-gradient(120% 95% at 50% 50%,rgba(5,5,5,0) 55%,rgba(5,5,5,.55) 100%)}
.brk-cap{position:absolute;z-index:2;left:var(--px);bottom:20px;display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#F3EFE8}
.brk-cap .ln{width:34px;height:2px;background:var(--vinho-leg)}
@media (min-width:700px){ .brk{height:clamp(320px,40vw,600px)} }

/* ============================================================
   02 · MAPA · planta técnica
   03.08 Grid Lines + Light Beam · traçado do mapa no scroll
   ============================================================ */
#mapa .wrap{z-index:3}
.lam-media{position:absolute;z-index:0;left:0;right:0;top:0;height:clamp(360px,62vw,700px);opacity:.38;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 48%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 48%,transparent 100%)}
.lam-media picture,.lam-media img{display:block;width:100%;height:100%}
.lam-media img{object-fit:cover;object-position:50% 40%}
.gb{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.gb-lines{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(243,239,232,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(243,239,232,.045) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 45%,#000 20%,transparent 82%);mask-image:radial-gradient(ellipse 90% 70% at 50% 45%,#000 20%,transparent 82%)}
.gb-beam{position:absolute;top:-30%;bottom:-30%;left:0;width:140px;opacity:0;background:linear-gradient(90deg,transparent,rgba(243,239,232,.05),transparent);transform:translateX(-40vw) rotate(14deg)}
.gb.run .gb-beam{animation:gbSweep 11s cubic-bezier(.7,0,.15,1) infinite}
@keyframes gbSweep{0%{transform:translateX(-40vw) rotate(14deg);opacity:0}12%{opacity:1}70%{opacity:1}82%,100%{transform:translateX(120vw) rotate(14deg);opacity:0}}
.mapa-intro{display:grid;gap:18px}
.mapa-intro .intro{margin-top:0}
#mapa .map-box{margin-top:40px;background:rgba(8,8,10,.92);border-color:rgba(243,239,232,.12);position:relative}
#mapa .map-box::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(243,239,232,.07);border-radius:16px;pointer-events:none}
@media (min-width:1000px){ .mapa-intro{grid-template-columns:1fr 1fr;gap:56px;align-items:end} .mapa-intro .lede{max-width:20ch} }
.js .map-box .map-svg > g:first-of-type{opacity:0;transition:opacity .9s var(--corte)}
.js .map-box.drawn .map-svg > g:first-of-type{opacity:1}
.js .map-box .map-svg .ln,.js .map-box .map-svg .loop{stroke-dasharray:900;stroke-dashoffset:900;opacity:0;transition:stroke-dashoffset 1.3s var(--corte),opacity .3s}
.js .map-box.drawn .map-svg .ln,.js .map-box.drawn .map-svg .loop{stroke-dashoffset:0;opacity:1}
.js .map-box.drawn .map-svg .ln.dash{stroke-dasharray:4 5}
.js .map-box.drawn .map-svg path:nth-of-type(1){transition-delay:.5s}
.js .map-box.drawn .map-svg path:nth-of-type(2){transition-delay:.65s}
.js .map-box.drawn .map-svg path:nth-of-type(3){transition-delay:.8s}
.js .map-box.drawn .map-svg path:nth-of-type(4){transition-delay:.95s}
.js .map-box.drawn .map-svg path:nth-of-type(5){transition-delay:1.1s}
.js .map-box.drawn .map-svg path:nth-of-type(6){transition-delay:1.25s}
.js .map-box.drawn .map-svg path:nth-of-type(7){transition-delay:1.4s}
.js .map-box.drawn .map-svg path:nth-of-type(8){transition-delay:1.55s}
.js .map-box.drawn .map-svg path:nth-of-type(9){transition-delay:1.7s}
.js .map-box.drawn .map-svg path:nth-of-type(10){transition-delay:1.85s}
.js .map-box.drawn .map-svg path:nth-of-type(11){transition-delay:2s}
.js .map-box.drawn .map-svg .loop{transition-delay:2.2s;transition-duration:2s}
.map-svg .badge{transform-box:fill-box;transform-origin:center}
.js .map-box.drawn .map-svg .badge{animation:pop .7s cubic-bezier(.16,1,.3,1) both;animation-delay:1.2s}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
#mapa .legend .b{box-shadow:0 0 0 4px rgba(176,53,59,.12)}

/* ============================================================
   03 · PONTOS · prontuário
   02.10 Outline → Fill no número quando o ponto entra
   ============================================================ */
.pt-open{display:grid;gap:28px}
.ph-vaz{aspect-ratio:3/2}
.pt-open .pontos-intro{margin:0}
.pt-open .pontos-intro .lede{max-width:20ch}
@media (min-width:1000px){ .pt-open{grid-template-columns:1.1fr 1fr;gap:56px;align-items:center} }
.pt-idx{margin-top:44px}
.pt-idx ol{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pt-idx a{display:flex;flex-direction:column;gap:6px;min-height:76px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;text-decoration:none;background:rgba(244,238,224,.55);
  transition:background-color .35s var(--corte),color .35s var(--corte),border-color .35s var(--corte),transform .35s var(--corte)}
.pt-idx .n{font-family:var(--f-imp);font-size:28px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--ink)}
.pt-idx .t{font-size:14px;line-height:1.25;font-weight:500}
.pt-idx a:hover{border-color:var(--ink);transform:translateY(-2px)}
.pt-idx a.on{background:#0B0B0C;color:var(--branco);border-color:#0B0B0C}
.pt-idx a.on .n{-webkit-text-stroke-color:#D9767B}
.pt-idx li:last-child{grid-column:1/-1}
@media (min-width:760px){ .pt-idx ol{grid-template-columns:repeat(7,1fr)} .pt-idx li:last-child{grid-column:auto} }
.ponto-n{position:relative}
.ponto-n::after{content:attr(data-n);position:absolute;left:0;top:0;color:var(--ink);-webkit-text-stroke:0;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.15,1);pointer-events:none}
.ponto.lit .ponto-n::after{clip-path:inset(0 0 0 0)}
.ponto-n::before{content:"";position:absolute;left:0;right:0;bottom:-10px;height:3px;background:var(--scar);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s .4s var(--corte)}
.ponto.lit .ponto-n::before{transform:scaleX(.42)}
.fix{background:#0B0B0C}
@media (min-width:1000px){ .ponto-head{top:96px} }

/* ============================================================
   04 · CHECKLIST · terminal de diagnóstico
   ============================================================ */
#checklist .ck-group{background:var(--card);border:1px solid rgba(243,239,232,.08);border-radius:18px;padding:14px 16px 6px;margin-top:14px}
#checklist .ck-group:first-child{margin-top:0}
#checklist .ck-wrap{margin-top:28px}
@media (min-width:700px){ #checklist .ck-wrap{margin-top:40px} }
#checklist .ck-gh{border-bottom-color:rgba(243,239,232,.1)}
#checklist .ck-item:last-child{border-bottom:0}
@media (min-width:700px){ #checklist .ck-group{padding:18px 24px 8px} }
.ck-score{border-radius:16px 16px 0 0;border:1px solid rgba(243,239,232,.12);border-bottom:0;background:rgba(10,10,11,.94);flex-wrap:wrap;row-gap:8px}
.ck-meter{order:5;flex-basis:100%;display:grid;grid-template-columns:repeat(20,1fr);gap:3px;height:6px}
.ck-score{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
@media (max-width:699px){
  .ck-score{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:4px;padding-top:10px}
  .ck-score .sc{grid-column:1;grid-row:1}
  .ck-score .ans{grid-column:1;grid-row:2;font-size:12px}
  .ck-score #ck-reset{grid-column:2;grid-row:1 / span 2;align-self:center}
  .ck-score .ck-meter{grid-column:1 / -1;grid-row:3;margin-top:6px}
}
.ck-meter i{display:block;border-radius:2px;background:rgba(243,239,232,.1);transition:background-color .35s var(--corte),transform .35s var(--corte)}
.ck-meter i.y{background:var(--branco)}
.ck-meter i.n{background:var(--vinho-leg)}
#ck-pts.bump{animation:bump .5s cubic-bezier(.16,1,.3,1)}
@keyframes bump{0%{transform:translateY(45%);opacity:.2}100%{transform:none;opacity:1}}
#ck-pts{display:inline-block}
.ck-result{background:radial-gradient(90% 120% at 100% 0%,rgba(176,53,59,.10),transparent 55%),var(--card)}

/* ============================================================
   05 · OFERTA · envelope lacrado
   05.04 Editorial Split · 04.07 Spotlight Border nos cards
   ============================================================ */
.of-top{display:grid;gap:28px;margin-bottom:40px}
.ph-env{aspect-ratio:4/3}
@media (min-width:1000px){ .of-top{grid-template-columns:1.15fr .85fr;gap:56px;align-items:end} .of-top .lh{margin-bottom:28px;grid-template-columns:1fr;gap:18px} }
#oferta .of-grid{margin-top:0}
@media (min-width:1240px){ #oferta .of-grid{grid-template-columns:repeat(3,1fr)} }
.of-card{position:relative;transition:transform .45s var(--corte)}
.of-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(220px circle at var(--sx,-300px) var(--sy,-300px),rgba(111,17,24,.9),transparent 68%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity .3s var(--corte)}
.of-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(240px circle at var(--sx,-300px) var(--sy,-300px),rgba(111,17,24,.06),transparent 70%);opacity:0;transition:opacity .3s var(--corte)}
.of-grid.ativo .of-card::before,.of-grid.ativo .of-card::after{opacity:1}
.of-card header .label{font-family:var(--f-imp);font-size:15px;letter-spacing:.06em;color:var(--scar)}

/* ============================================================
   06 · PÚBLICO · peneira (faixa de imagem com cabeçalho sobreposto)
   ============================================================ */
#publico{padding-top:0}
.pub-band{position:relative;min-height:min(150vw,640px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;margin-bottom:40px}
.pb-frame{position:absolute;left:0;right:0;top:-10%;height:120%;will-change:transform}
.pb-frame picture,.pb-frame img{display:block;width:100%;height:100%}
.pb-frame img{object-fit:cover;object-position:50% 40%}
.pb-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,10,.55) 0%,rgba(9,9,10,.1) 26%,rgba(9,9,10,.72) 52%,var(--lam-ink) 92%)}
.pub-band .lam-bar{--ink:#F3EFE8;--faint:#C9CDD2;--line:rgba(243,239,232,.24)}
.pb-head{position:relative;z-index:2;padding-bottom:8px}
.pb-head .lh{margin-top:auto;border-bottom-color:rgba(243,239,232,.25)}
.pb-head .lede{color:#F3EFE8}
.pb-head .sidx,.pb-head .stitle,.pb-head .lede{text-shadow:0 1px 14px rgba(0,0,0,.85)}
.pb-head .sidx{color:#E58A8F}
.pub-card{position:relative}
.pub-card::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;background:var(--branco);border-radius:2px}
.pub-card.bad::before{background:var(--vinho-leg)}
@media (min-width:700px){ .pub-band{min-height:clamp(520px,56vw,700px)} .pub-card::before{left:32px;right:32px} }

/* ============================================================
   07 · CONTA · máquina de somar · 06.06 Counters
   ============================================================ */
.calc-head{display:grid;gap:28px;margin-bottom:40px}
.calc-head .lh{margin-bottom:28px}
.ph-calc{aspect-ratio:3/2}
@media (min-width:1000px){ .calc-head{grid-template-columns:1.1fr .9fr;gap:56px;align-items:end} }
.calc-out{background:#0D0D0F;border-color:rgba(243,239,232,.14)}
.calc-out output.flash{animation:flash .6s var(--corte)}
@keyframes flash{0%{color:#D9767B}100%{color:inherit}}
.res li.sum output{font-size:26px}
@media (max-width:699px){
  .res li.sum{display:grid;grid-template-columns:1fr auto;column-gap:14px;row-gap:8px;align-items:baseline}
  .res li.sum > span:first-child{display:contents}
  .res li.sum output{grid-column:2;grid-row:1}
  .res li.sum .delta{grid-column:1 / -1;grid-row:2;margin-top:0}
}

/* ---------- casos ---------- */
#casos .lh{margin-top:var(--head-top)}
#casos .lh-num{font-family:var(--f-dis);font-style:italic}
.caso{position:relative;border-radius:18px;padding:22px 20px 24px;gap:14px;transition:transform .5s var(--corte),box-shadow .5s var(--corte)}
.caso::before{content:"";position:absolute;left:20px;right:20px;top:-1px;height:2px;background:var(--scar);border-radius:2px}
.caso-n{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--scar)}
.caso .label{margin-top:-6px}
.caso h3{font-size:clamp(34px,8vw,44px);letter-spacing:-.01em}
.caso p:not(.label):not(.print-link){font-family:var(--f-dis);font-size:20px;line-height:1.25;color:var(--ink)}
.caso ul{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.caso li.lk{padding:0;border:0}
#casos .casos-grid{margin-top:clamp(28px,4vw,44px)}
.caso li.lk a{display:inline-flex;align-items:baseline;gap:8px;min-height:34px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none;font-family:var(--f-body);font-size:13.5px;letter-spacing:0;line-height:1.3;transition:border-color .3s,background-color .3s}
.caso li.lk a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--scar);transform:translateY(-1px)}
.caso li.lk a:hover,.caso li.lk a:focus-visible{border-color:var(--ink);background:rgba(7,7,7,.05)}
@media (hover:hover){ .caso:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(7,7,7,.45)} }
@media (min-width:900px){ .caso{padding:28px 28px 30px} .caso::before{left:28px;right:28px} }

/* ============================================================
   08 · APLICAÇÃO · escada (formulário sem efeito nenhum por baixo)
   ============================================================ */
.ph-esc{aspect-ratio:16/10;margin-bottom:28px}
.ph-esc img{object-position:50% 30%}
@media (min-width:1000px){ .ph-esc{aspect-ratio:4/5;max-height:62vh} .app-side{top:96px} }
.app-form{background:#121215;border-color:rgba(243,239,232,.14)}

/* ============================================================
   RODAPÉ · 12.03 Brand Marquee
   ============================================================ */
.bm{margin:var(--gut) var(--gut) 0;overflow:hidden;border-radius:var(--lam-r);border:1px solid rgba(243,239,232,.06);background:#08080A;padding:22px 0}
.bm-track{display:flex;width:max-content;gap:.35em;font-family:var(--f-imp);font-size:clamp(64px,13vw,180px);line-height:1;text-transform:uppercase;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(243,239,232,.28);animation:bmRun 60s linear infinite;animation-play-state:paused}
.bm.run .bm-track{animation-play-state:running}
.bm-track .amp{font-family:var(--f-dis);-webkit-text-stroke:0;color:#8E1B1B;text-transform:none}
@keyframes bmRun{to{transform:translateX(-50%)}}
.foot{margin:var(--gut) var(--gut) var(--gut);border-radius:var(--lam-r);border:1px solid rgba(243,239,232,.06);background:#0B0B0C}

/* ============================================================
   07.01 navegação flutuante + 06.01 progresso de leitura
   ============================================================ */
.pnav{position:fixed;z-index:100;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;max-width:780px;margin:0 auto;height:var(--nav-h);display:flex;align-items:center;gap:6px;padding:0 6px 0 16px;
  border-radius:999px;background:rgba(10,10,11,.84);border:1px solid rgba(243,239,232,.12);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  color:var(--branco);transform:translateY(calc(-100% - 24px));transition:transform .55s var(--corte);overflow:hidden}
.pnav.on{transform:none}
.pn-wm{font-family:var(--f-dis);font-size:20px;text-decoration:none;flex:none;min-height:44px;display:flex;align-items:center}
.pn-wm .amp{color:var(--vinho-leg)}
.pn-cur{flex:1;min-width:0;display:flex;gap:8px;align-items:baseline;padding:0 8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.pn-k{color:#D9767B;flex:none}
.pn-t{color:#C9CDD2;overflow:hidden;text-overflow:ellipsis}
.pn-btn{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(243,239,232,.18);background:transparent;color:var(--branco);font-family:var(--f-body);font-size:14px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer;
  transition:background-color .3s var(--corte),color .3s var(--corte)}
.pn-btn:hover{background:var(--branco);color:#070707}
.pn-prog{position:absolute;left:18px;right:18px;bottom:0;height:2px;background:rgba(243,239,232,.06)}
.pn-prog span{position:absolute;inset:0;background:var(--vinho-leg);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.pnav :focus-visible{outline-color:var(--branco)}

/* gaveta do índice (a mesma torre, em painel lateral) */
.drawer{position:fixed;inset:0;z-index:1000}
.dr-scrim{position:absolute;inset:0;background:rgba(3,3,3,.6);opacity:0;transition:opacity .4s var(--corte)}
.dr-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:#0B0B0C;border-left:1px solid rgba(243,239,232,.1);color:var(--branco);
  display:flex;flex-direction:column;padding:16px 18px 20px;transform:translateX(100%);transition:transform .55s var(--corte);overflow-y:auto;overscroll-behavior:contain}
.drawer.open .dr-scrim{opacity:1}
.drawer.open .dr-panel{transform:none}
.dr-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid rgba(243,239,232,.1)}
.dr-top .label{color:#C9CDD2}
.tw.tw-sm{height:280px;flex:none}
.tw.tw-sm .tw-f{--s:118px}
.dr-list ol{list-style:none;border-top:1px solid rgba(243,239,232,.1)}
.dr-list a{display:flex;gap:14px;align-items:baseline;padding:12px 2px;min-height:48px;border-bottom:1px solid rgba(243,239,232,.1);text-decoration:none;color:var(--branco)}
.dr-list a .n{font-family:var(--f-mono);font-size:12px;color:#8B9198;width:40px;flex:none}
.dr-list a.sub{padding-left:22px}
.dr-list a.sub .n{width:28px}
.dr-list a.cur .n,.dr-list a:hover .n{color:#D9767B}
.dr-list a span:last-child{font-size:16px}

/* 12.06 voltar ao topo com anel de progresso */
.fab{position:fixed;z-index:90;right:14px;bottom:max(14px,env(safe-area-inset-bottom));width:52px;height:52px;border-radius:50%;border:1px solid rgba(243,239,232,.16);background:rgba(10,10,11,.88);
  color:var(--branco);display:grid;place-items:center;cursor:pointer;font-family:var(--f-mono);font-size:16px;
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .4s var(--corte),transform .4s var(--corte)}
.fab.on{opacity:1;transform:none;pointer-events:auto}
.fab svg{position:absolute;inset:0;width:52px;height:52px;transform:rotate(-90deg)}
.fab circle{fill:none;stroke-width:1.5}
.fab .fab-tr{stroke:rgba(243,239,232,.1)}
.fab .fab-bar{stroke:var(--vinho-leg);stroke-linecap:round}

/* 02.05 Text Scramble · caractere ainda embaralhado */
.sidx i{font-style:normal;color:var(--faint)}

/* reveal com stagger (06.02) */
.js .rv{transition-duration:.9s}

/* ============================================================
   MOVIMENTO REDUZIDO · todo efeito tem estado parado
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .xr-scan,.xr-spot{display:none}
  .brut .l2::after{display:none}
  .tw-spin{animation:none}
  .gb-beam{display:none}
  .bm-track{animation:none}
  .brk-frame,.pb-frame{transform:none !important}
  .ponto-n::after,.ponto-n::before{transition:none}
  .js .map-box .map-svg > g:first-of-type,.js .map-box .map-svg .ln,.js .map-box .map-svg .loop{opacity:1;stroke-dashoffset:0;transition:none}
  .js .map-box .map-svg .ln.dash{stroke-dasharray:4 5}
}

/* ============================================================
   IMPRESSÃO / PDF · sem efeito, sem moldura de lâmina
   ============================================================ */
@media print{
  .pnav,.drawer,.fab,.bm,.brk,.lam-bar,.gb,.lam-media,.xr-scan,.xr-spot,.xr-marks,.pt-idx,#indice,.ck-meter,.ph-mesa,.ph-calc,.ph-esc{display:none !important}
  .lam,.capa,.foot{margin:0 !important;border:0 !important;border-radius:0 !important;overflow:visible !important}
  .lam{padding:0}
  .lam.lam-ink,.lam.s-graf,.lam.s-paper{--bg:transparent;--card:transparent;--field:transparent}
  #como-usar .rule-1{font-size:15pt;margin-top:6mm;max-width:none;break-inside:avoid}
  .lh{display:flex;align-items:flex-end;gap:6mm;margin:0 0 7mm;padding-bottom:4mm;border-bottom:2px solid #070707}
  .lh-num{font-size:46pt;padding-bottom:3mm;color:#070707}
  .lh-num::after{height:2px;width:12mm;background:#6F1118}
  .lh .stitle{font-size:28pt}
  .brut .l2::after{display:none}
  .brut,.capa-sub{text-shadow:none}
  .capa{position:relative}
  .xr{display:block !important;top:24mm;right:0;bottom:auto;width:84%;height:68%;opacity:1}
  .caso::before,.caso-n{display:none}
  .caso h3{font-size:18pt}
  .caso p:not(.label):not(.print-link){font-size:11pt}
  .caso li.lk a{min-height:0;padding:1mm 2.5mm;color:#070707}
  .xr img{object-position:46% 20%}
  .xr-base{opacity:.9}
  .xr-veil{background:linear-gradient(90deg,#070707 0%,rgba(7,7,7,.72) 24%,rgba(7,7,7,.1) 60%,rgba(7,7,7,0) 80%),linear-gradient(180deg,rgba(7,7,7,.25) 0%,rgba(7,7,7,0) 30%,rgba(7,7,7,.6) 70%,#070707 100%)}
  .capa-body{padding-top:30mm}
  .capa-meta{background:transparent}
  .mt-grid,.pt-open,.of-top,.calc-head{display:block}
  .mt-side{position:static}
  .tl{padding-left:0}
  .tl-line,.tl .steps li::before{display:none}
  .tl .steps li{grid-template-columns:34mm 1fr !important;gap:2mm 5mm}
  .tl .steps li .t{grid-row:span 2}
  .ph{break-inside:avoid;border-radius:4mm}
  .ph-vaz{aspect-ratio:auto;height:62mm;margin:0 0 5mm}
  .ph-env{aspect-ratio:auto;height:58mm;margin:4mm 0 5mm}
  .ph-cap{font-size:7pt;padding:6mm 4mm 3mm}
  .pub-band{min-height:0;display:block;margin:0 0 6mm}
  .pb-frame,.pb-veil{display:none}
  .pb-head{padding:0}
  .pb-head .lh{border-bottom-color:#070707}
  .pb-head .lede{color:#070707}
  .pb-head .sidx,.pb-head .stitle,.pb-head .lede{text-shadow:none}
  .pb-head .sidx{color:var(--vinho-leg,#8E2A30)}
  #publico{--bg:transparent}
  .map-box .map-svg > g:first-of-type,.map-box .map-svg .ln,.map-box .map-svg .loop{opacity:1 !important;stroke-dashoffset:0 !important;transition:none !important}
  .map-box .map-svg .ln.dash{stroke-dasharray:4 5 !important}
  .map-box .map-svg .badge{animation:none !important}
  #mapa .map-box::before{display:none}
  .ponto-n::after{clip-path:inset(0 0 0 0) !important;transition:none !important;color:#070707}
  .ponto-n::before{display:none}
  .ck-group{background:transparent !important;border:0 !important;padding:0 !important}
  .of-card::before,.of-card::after,.pub-card::before{display:none}
  .of-card header .label{font-family:var(--f-mono);font-size:7.5pt;letter-spacing:.14em;color:#57524b}
  #oferta .of-grid{grid-template-columns:repeat(3,1fr)}
  .foot{background:transparent !important}
}