/* ==========================================================================
   RADAR DE MINIS — folha unica
   1. tokens        2. base         3. utilitarios
   4. chrome        5. hero         6. cartela (blister)
   7. secoes        8. rodape       9. motion / acessibilidade
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  --ink:        #121212;
  --ink-2:      #1a1a19;
  --ink-3:      #232321;
  --red:        #e5231b;
  --red-deep:   #8e120e;
  --paper:      #e8e2d5;
  --paper-2:    #d9d1bf;
  --bone:       #f5f1e8;
  --gold:       #c9a227;
  --dim:        #9e9890;

  /* verde do WhatsApp. o texto e escuro porque branco sobre #25d366 da
     apenas 1,98:1 — ilegivel. a propria WhatsApp usa texto escuro sobre ele. */
  --wa:         #25d366;
  --wa-hover:   #1fbe5c;
  --wa-ink:     #062e1b;

  --f-sans: "Archivo", -apple-system, "Segoe UI", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --barra: 68px;
  --wrap: 1180px;
  --pad-x: clamp(1.25rem, 5vw, 3rem);
  --pad-y: clamp(4.5rem, 10vw, 8.5rem);

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-snap: cubic-bezier(.34,1.4,.5,1);
}

/* ---------- 2. base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-sans);
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; }
p{ margin:0; }
img,svg{ display:block; max-width:100%; }

a{ color:inherit; }
:focus-visible{ outline:2.5px solid var(--red); outline-offset:3px; border-radius:2px; }
.sec-paper :focus-visible,.close :focus-visible{ outline-color:var(--ink); }

::selection{ background:var(--red); color:#fff; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:.75rem 1.25rem;
  font:700 .8rem/1 var(--f-mono);
}
.skip:focus{ left:0; }

/* ---------- 3. utilitarios ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x); }
.wrap-narrow{ max-width:780px; }

.h-display,.h-sec,.h-close{
  font-family:var(--f-sans);
  font-variation-settings:"wdth" 78,"wght" 800;
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:-.005em;
}
.h-display{ font-size:clamp(1.95rem,5vw,3.85rem); }
.h-sec{ font-size:clamp(1.78rem,4.4vw,3.2rem); }
.h-close{ font-size:clamp(2.1rem,6.4vw,4.6rem); }
.h-display .l,.h-sec .l,.h-close .l{ display:block; }
/* telas muito estreitas (<=380px): as linhas fixas nao cabem no tamanho minimo */
@media (max-width:380px){
  .h-display{ font-size:1.65rem; }
  .h-sec{ font-size:1.6rem; }
  .h-close{ font-size:1.75rem; }
}
.h-display .red{ color:var(--red); }

.kicker,.eyebrow,.micro,.art-note{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}
.kicker{ margin-bottom:1.1rem; }

.grain{
  position:fixed; inset:0; z-index:150; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- pista lateral: progresso de scroll ----------
   duas guias + linha central tracejada. a mini desce como marcador,
   deixando o rastro vermelho atras. o deslocamento vem de --car-y (JS). */
.rail{
  position:fixed; left:8px; top:0; bottom:0; width:34px; z-index:120;
  pointer-events:none;
}
.rail-lane{
  position:absolute; inset:0;
  border-left:1px solid rgba(245,241,232,.13);
  border-right:1px solid rgba(245,241,232,.13);
}
.rail-lane::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(to bottom,
    rgba(245,241,232,.17) 0 12px, transparent 12px 28px);
}
.rail-trail{
  position:absolute; left:50%; top:0; width:3px; height:0;
  transform:translateX(-50%);
  /* duas camadas: o rastro quente logo atras do carro (240px fixos, nao estica)
     sobre o registro fraco do caminho ja percorrido */
  background:
    linear-gradient(to top, var(--red), rgba(229,35,27,0)) no-repeat 50% 100% / 100% 240px,
    linear-gradient(rgba(229,35,27,.2), rgba(229,35,27,.2));
}
.rail-car{
  position:absolute; left:50%; top:0; width:30px; height:auto;
  margin-left:-15px;
  /* --car-rot: gire 180deg se algum dia trocar por um PNG de nariz para cima */
  transform:translateY(var(--car-y,0px)) rotate(var(--car-rot,0deg));
  /* o brilho vermelho sai do proprio carro, para tras — nao do rastro inteiro */
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.7))
         drop-shadow(0 -12px 16px rgba(229,35,27,.45));
}


/* ---------- botao ---------- */
.btn{
  --b: var(--wa);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--b); color:var(--wa-ink); text-decoration:none;
  font-family:var(--f-sans);
  font-variation-settings:"wdth" 92,"wght" 700;
  text-transform:uppercase; letter-spacing:.04em;
  border:none; border-radius:3px;
  padding:.95rem 1.5rem; font-size:.9rem; line-height:1;
  transition:transform .35s var(--e-snap), background .25s ease;
}
.btn::after{
  content:""; position:absolute; top:-60%; left:-30%;
  width:32%; height:220%; transform:rotate(18deg) translateX(-320%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transition:transform .7s var(--e-out);
}
.btn:active{ transform:translateY(0) scale(.985); }
.btn-sm{ padding:.68rem 1.05rem; font-size:.76rem; }
.btn-lg{ padding:1.15rem 2rem; font-size:1.02rem; }
.btn-block{ width:100%; }
.btn-ghost{ background:var(--ink); color:var(--bone); }
.wa{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }

/* ---------- 4. chrome ---------- */
.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(18,18,18,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(245,241,232,.09);
}
.topbar-in{ display:flex; align-items:center; gap:1.5rem; min-height:var(--barra); }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto; }
/* logo oficial, recortada no circulo — o quadrado preto original
   apareceria como mancha sobre a barra translucida */
.brand-mark{ width:42px; height:42px; flex:none; transition:transform .45s var(--e-snap); }
@media (max-width:520px){ .brand-mark{ width:36px; height:36px; } }
.brand-name{
  font-variation-settings:"wdth" 80,"wght" 800;
  text-transform:uppercase; letter-spacing:.02em; font-size:1.02rem;
}
/* "MINIS" em vermelho, ecoando a logo. o espaco vem da marcacao,
   entao aqui nao entra padding — senao sobra folga depois da palavra */
.brand-thin{ color:var(--red); }

.nav{ display:flex; gap:1.7rem; }
.nav a{
  position:relative; text-decoration:none; color:var(--dim);
  font-family:var(--f-mono); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase;
  transition:color .25s ease;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--e-out);
}
@media (max-width:900px){ .nav{ display:none; } }
@media (max-width:520px){ .topbar .btn-sm{ display:none; } }

/* ---------- 5. hero ---------- */
.hero{ padding:clamp(3rem,7vw,5.5rem) 0 var(--pad-y); position:relative; }
.hero::before{
  content:""; position:absolute; inset:0 0 auto; height:520px; pointer-events:none;
  background:radial-gradient(120% 90% at 12% 0%, rgba(229,35,27,.20), transparent 62%);
}
.hero-in{
  position:relative; display:grid; gap:clamp(3rem,6vw,5rem);
  grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  align-items:center;
}
@media (max-width:960px){ .hero-in{ grid-template-columns:1fr; } }

.eyebrow{ display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.6rem; color:var(--bone); }
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 0 rgba(229,35,27,.6); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(229,35,27,.55); }
  70%{ box-shadow:0 0 0 9px rgba(229,35,27,0); }
  100%{ box-shadow:0 0 0 0 rgba(229,35,27,0); }
}

.lede{ max-width:46ch; margin-top:1.7rem; color:#cfc9c0; font-size:1.06rem; }
.hero-cta{ margin-top:2.4rem; display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }
.micro{ color:var(--bone); letter-spacing:.09em; font-weight:700; }

/* ---------- 6. cartela ---------- */
.hero-art{ display:flex; flex-direction:column; align-items:center; gap:1rem; perspective:1100px; }
.card-tilt{ transform-style:preserve-3d; will-change:transform; width:min(360px,100%); }

.blister{
  position:relative; transform-style:preserve-3d;
  background:var(--paper);
  background-image:
    repeating-linear-gradient(94deg, rgba(18,18,18,.028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(18,18,18,.022) 0 1px, transparent 1px 5px);
  border-radius:7px 7px 4px 4px;
  padding:2.4rem .9rem 1.1rem;
  box-shadow:0 34px 64px -26px rgba(0,0,0,.85), inset 0 0 0 1px rgba(18,18,18,.09);
}
.blister-hole{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:30px; height:14px; border-radius:20px;
  background:var(--ink);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.55);
}
.blister-head{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--red); color:#fff;
  padding:.5rem .7rem; border-radius:3px 3px 0 0;
}
.blister-brand{
  font-variation-settings:"wdth" 76,"wght" 800;
  text-transform:uppercase; letter-spacing:.05em; font-size:.86rem;
}
.blister-scale{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; opacity:.9; }

.blister-body{
  border:1.5px solid rgba(18,18,18,.16); border-top:none;
  border-radius:0 0 3px 3px; padding:.8rem;
}
.bubble{
  position:relative; overflow:hidden;
  border-radius:16px 16px 8px 8px;
  padding:1.4rem .7rem 1.2rem;
  /* folga acima da miniatura, como bolha de blister de verdade.
     o min-height segura a proporcao do cartao quando a foto e baixa e larga. */
  min-height:148px;
  display:grid; place-items:center;
  transform:translateZ(34px);
  background:linear-gradient(155deg, rgba(255,255,255,.62), rgba(255,255,255,.10) 46%, rgba(255,255,255,.34));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -18px 26px -14px rgba(18,18,18,.28),
    0 10px 20px -12px rgba(18,18,18,.6);
}
.bubble-shine{
  position:absolute; top:-40%; left:-15%; width:38%; height:190%;
  transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  pointer-events:none;
}
.car{
  width:100%; height:auto;
  /* aterra a miniatura na bolha — a foto vem recortada, sem sombra propria */
  filter:drop-shadow(0 6px 7px rgba(18,18,18,.32));
}

/* variante: foto opaca de sangria no lugar do recorte.
   preenche a bolha inteira, recortada pelo raio, com o brilho do
   plastico por cima. sombra propria seria errada aqui — nao ha recorte. */
.bubble.is-photo{ padding:0; place-items:stretch; }
.bubble.is-photo .car{
  width:100%; height:100%; object-fit:cover; filter:none;
}

.blister-meta{ padding:.9rem .35rem .1rem; transform:translateZ(16px); }
.blister-title{
  color:var(--ink); font-variation-settings:"wdth" 82,"wght" 800;
  text-transform:uppercase; font-size:1.15rem; line-height:1;
}
.blister-sub{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.09em;
  text-transform:uppercase; color:#5f594f; margin-top:.35rem;
}
.price{ display:flex; align-items:baseline; gap:.7rem; margin-top:.7rem; }
.price-old{
  font-family:var(--f-mono); font-size:.8rem; color:#6b6459; text-decoration:line-through;
}
.price-new{
  color:var(--red); font-variation-settings:"wdth" 84,"wght" 800;
  font-size:1.5rem; line-height:1;
}
/* etiqueta de desconto, solta no canto superior direito da cartela.
   o fundo e a mesma cor da pagina de proposito: sobre o escuro so o texto
   aparece, flutuando adiante do cartao pelo translateZ alto. */
.tag-off{
  position:absolute; top:-14px; right:-12px; transform:rotate(9deg) translateZ(52px);
  background:var(--ink); color:var(--bone);
  font-family:var(--f-mono); font-weight:700; font-size:.82rem;
  padding:.42rem .6rem; border-radius:3px;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.8);
}
.art-note{ text-align:center; }

/* ---------- 7. secoes ---------- */
.sec{ padding:var(--pad-y) 0; position:relative; }
.sec-tight{ padding:clamp(3rem,6vw,4.5rem) 0; }
.sec-head{ margin-bottom:clamp(2.5rem,5vw,4rem); max-width:46rem; }

.sec-paper{ background:var(--paper); color:var(--ink); }
.sec-paper .kicker{ color:#7a7367; }
.sec-paper .h-sec{ color:var(--ink); }

/* cards de aviso */
.grid-4{ display:grid; gap:1.1rem; grid-template-columns:repeat(4,minmax(0,1fr)); }
/* 4 colunas so acima de 1100px: abaixo disso o card fica < 235px e
   "PROMOCOES RELAMPAGO" nao cabe em uma linha na tarja */
@media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .grid-4{ grid-template-columns:1fr; } }

.mini{
  background:var(--ink-2); border:1px solid rgba(245,241,232,.11);
  border-radius:5px; overflow:hidden;
  transition:transform .45s var(--e-out), border-color .45s ease;
}
.mini-head{
  display:flex; align-items:center; gap:.5rem;
  background:var(--red); color:#fff; padding:.62rem .7rem;
  font-family:var(--f-mono); font-size:.8rem; font-weight:700;
  letter-spacing:.045em; text-transform:uppercase;
}
/* o numero saiu da bolha quando a foto entrou; sobrevive aqui na tarja */
.mini-n{
  padding-right:.5rem;
  border-right:1px solid rgba(255,255,255,.45);
  flex:none;
}
.mini-body{ padding:1.1rem .95rem 1.35rem; }

/* foto do produto: as imagens sao 1:1, entao o tile e 1:1 e nada e cortado */
.mini-shot{
  position:relative; overflow:hidden;
  aspect-ratio:1/1; margin:0 auto 1rem;
  /* sem o teto, em 2 colunas o tile chega a 404px e engole o texto do card */
  max-width:280px;
  border-radius:20px 20px 6px 6px;
  background:var(--bone);
  border:1px solid rgba(245,241,232,.13);
  transition:transform .45s var(--e-out), border-color .45s ease;
}
.mini-shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--e-out);
}
.mini-body p{ font-size:.94rem; color:#c3bdb4; }

/* passos */
.steps{
  position:relative; list-style:none; margin:0; padding:0;
  display:grid; gap:2rem; grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:820px){ .steps{ grid-template-columns:1fr; gap:2.4rem; } }
.steps-track{
  position:absolute; left:0; right:0; top:20px; height:3px;
  background:rgba(18,18,18,.14);
}
.steps-track i{ display:block; height:100%; width:0%; background:var(--red); }


.step{ position:relative; padding-top:3.4rem; }
.step-n{
  position:absolute; top:0; left:0;
  display:grid; place-items:center; width:42px; height:42px;
  background:var(--red); color:#fff; border-radius:3px;
  font-family:var(--f-mono); font-weight:700; font-size:.9rem;
  box-shadow:0 0 0 6px var(--paper);
}
.step h3{
  font-variation-settings:"wdth" 84,"wght" 800;
  text-transform:uppercase; font-size:1.3rem; margin-bottom:.5rem;
}
.step p{ color:#544f47; font-size:.98rem; max-width:34ch; }

.rule{
  margin-top:clamp(3rem,6vw,4.5rem);
  border-left:5px solid var(--red);
  background:rgba(18,18,18,.05);
  padding:1.5rem 1.6rem;
}
.rule-label{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red); margin-bottom:.5rem;
}
.rule-text{
  font-variation-settings:"wdth" 88,"wght" 700;
  font-size:clamp(1.15rem,2.4vw,1.6rem); line-height:1.25; color:var(--ink);
  /* sem teto, no desktop o texto cabe em uma linha por 4px de margem — instavel,
     e uma medida longa demais para tipo de destaque. duas linhas em toda largura. */
  max-width:44rem;
}

/* marquee */
.marquee{ overflow:hidden; padding:1.6rem 0; border-block:1px solid rgba(245,241,232,.1); }
.marquee-in{ display:flex; align-items:center; gap:1.6rem; width:max-content; will-change:transform; }
.marquee-in span{
  font-variation-settings:"wdth" 74,"wght" 800;
  text-transform:uppercase; font-size:clamp(1.8rem,4.5vw,3rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.2px rgba(245,241,232,.42);
  white-space:nowrap;
}
.marquee-in i{ color:var(--red); font-style:normal; font-size:.8rem; }

/* numeros */
.stats{
  display:grid; gap:1.5rem; grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(3rem,6vw,4rem);
}
@media (max-width:720px){ .stats{ grid-template-columns:1fr; gap:2rem; } }
.stat{ border-top:2px solid var(--red); padding-top:1rem; }
.stat-n{
  display:block; font-variation-settings:"wdth" 80,"wght" 800;
  font-size:clamp(2.6rem,6vw,4rem); line-height:1;
}
.stat-l{
  display:block; margin-top:.5rem; color:var(--dim);
  font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
}

/* faq */
.faq{ border-top:1px solid rgba(245,241,232,.13); }
.qa{ border-bottom:1px solid rgba(245,241,232,.13); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.35rem 0; cursor:pointer; list-style:none;
  font-variation-settings:"wdth" 92,"wght" 700;
  font-size:clamp(1.05rem,2.2vw,1.28rem);
  transition:color .25s ease;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa-i{ position:relative; width:16px; height:16px; flex:none; }
.qa-i::before,.qa-i::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:2px; background:var(--red);
  transform:translateY(-50%); transition:transform .4s var(--e-out);
}
.qa-i::after{ transform:translateY(-50%) rotate(90deg); }
.qa[open] .qa-i::after{ transform:translateY(-50%) rotate(0deg); }
.qa-body{ padding:0 0 1.5rem; max-width:60ch; }
.qa-body p{ color:#bcb6ad; }
.qa[open] .qa-body{ animation:qaIn .4s var(--e-out) both; }
@keyframes qaIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* fechamento */
.close{ background:var(--red); color:#fff; padding:var(--pad-y) 0; position:relative; overflow:hidden; }
.close::before{
  content:""; position:absolute; inset:auto 0 0; height:6px;
  background:repeating-linear-gradient(90deg,#fff 0 18px,transparent 18px 36px); opacity:.35;
}
.close-in{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:2rem; }
.h-close{ color:#fff; }
.close-micro{
  font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82);
}

/* ---------- 8. rodape ---------- */
.foot{ background:var(--ink); padding:clamp(3rem,6vw,4.5rem) 0 clamp(4rem,7vw,5rem); }
.foot-in{ display:flex; flex-direction:column; gap:1rem; }
.foot-brand{
  font-variation-settings:"wdth" 80,"wght" 800;
  text-transform:uppercase; letter-spacing:.02em; font-size:1.1rem;
}
.foot-legal{ max-width:66ch; color:#8b857c; font-size:.82rem; line-height:1.6; }
.foot-links{ display:flex; gap:.7rem; align-items:center; color:#8b857c; font-size:.88rem; }
.foot-links a{ color:var(--dim); text-decoration:none; border-bottom:1px solid rgba(229,35,27,.5); padding-bottom:1px; }
.foot-year{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; color:#8b857c; }

/* dock mobile */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  padding:.7rem var(--pad-x) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(18,18,18,.93);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(245,241,232,.12);
  /* visibility junto do transform: escondido, o botao nao pode receber foco
     de teclado nem ser lido por leitor de tela — ele duplica o CTA do hero */
  transform:translateY(115%); visibility:hidden;
  transition:transform .5s var(--e-out), visibility .5s;
}
.dock.is-on{ transform:translateY(0); visibility:visible; }
@media (min-width:521px){ .dock{ display:none; } }

/* ---------- 9. motion / acessibilidade ---------- */
.js [data-rev],
.js [data-stagger] > *:not(.steps-track),
.js [data-split] .l{ opacity:0; }

/* sem motion (CDN fora do ar ou usuario pediu calma):
   os elementos que dependiam de scroll ficam no estado final, nao vazios */
.no-motion .rail{ display:none; }
.no-motion .steps-track i{ width:100%; }

@media (prefers-reduced-motion: reduce){
  .js [data-rev],
  .js [data-stagger] > *,
  .js [data-split] .l{ opacity:1 !important; transform:none !important; }
  .rail{ display:none; }
  .steps-track i{ width:100%; }
  .dot{ animation:none; }
  .btn::after{ display:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ==========================================================================
   10. PONTEIRO E TOQUE
   hover so existe onde ha ponteiro de verdade. em tela de toque o :hover
   "gruda" depois do tap e o card fica preso no estado ativo ate o proximo
   toque em outro lugar — parece bug para o usuario.
   ========================================================================== */
@media (hover: hover) and (pointer: fine){
  .btn:hover{ background:var(--wa-hover); transform:translateY(-2px); }
  .btn:hover::after{ transform:rotate(18deg) translateX(560%); }
  .btn-ghost:hover{ background:#000; }
  .brand:hover .brand-mark{ transform:scale(1.09); }
  .nav a:hover{ color:var(--bone); }
  .nav a:hover::after{ transform:scaleX(1); }
  .mini:hover{ transform:translateY(-7px); border-color:rgba(229,35,27,.55); }
  .mini:hover .mini-shot{ transform:translateY(-4px); }
  .mini:hover .mini-shot img{ transform:scale(1.05); }
  .qa summary:hover{ color:var(--red); }
  .foot-links a:hover{ color:var(--bone); border-color:var(--red); }
}

/* o realce de toque padrao do Android e um ciano que briga com a paleta.
   desligado, com resposta propria no :active — o toque continua respondendo. */
a,button,summary{ -webkit-tap-highlight-color:transparent; }
@media (hover: none){
  .mini:active{ border-color:rgba(229,35,27,.6); }
  .mini:active .mini-shot{ transform:scale(.985); }
  .qa summary:active{ color:var(--red); }
  .foot-links a:active{ color:var(--bone); }
  .brand:active .brand-mark{ transform:scale(.94); }
}

/* ==========================================================================
   11. MOBILE
   ========================================================================== */
@media (max-width:560px){
  /* sem nav e sem CTA, a barra so carrega a marca — 68px era espaco morto */
  /* a altura da barra alimenta o topo da pista horizontal */
  /* area de toque de 44px sem mudar o desenho da marca */
  .brand{ padding-block:5px; }

  /* a foto continua sendo a vitrine, mas 280px por card somavam
     mais de 2000px de rolagem so nesta secao */
  .mini-shot{ max-width:210px; }

  /* rotulos miudos: 11,5px em mono com tracking e apertado no celular */
  .micro,.stat-l{ font-size:.78rem; letter-spacing:.07em; }
  .foot-legal{ font-size:.85rem; }
}

@media (max-width:520px){
  /* o dock e fixo e tem 70px: sem esta reserva ele tapa o fim do rodape */
  .foot{ padding-bottom:calc(94px + env(safe-area-inset-bottom)); }
  /* os links do rodape tinham 25px de altura de toque */
  .foot-links{ gap:1.2rem; flex-wrap:wrap; }
  .foot-links a{ display:inline-block; padding-block:11px; }
}

/* ==========================================================================
   12. AS DUAS PISTAS NO MOBILE
   nao ha vao lateral no celular (a margem e de 20px), entao a pista de
   progresso deita: vira uma faixa fixa logo abaixo da barra do topo, e a
   mini atravessa da esquerda para a direita puxando o mesmo rastro.
   ========================================================================== */
@media (max-width:940px){
  .rail{
    left:0; right:0; top:var(--barra); bottom:auto;
    width:auto; height:22px;
    background:rgba(18,18,18,.86);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(245,241,232,.09);
  }
  /* a faixa e fixa: sem esta reserva ela cobre o inicio do conteudo */
  main{ padding-top:22px; }

  .rail-lane{
    border-left:none; border-right:none;
    border-top:1px solid rgba(245,241,232,.10);
    border-bottom:1px solid rgba(245,241,232,.10);
  }
  .rail-lane::before{
    left:0; right:0; top:50%; bottom:auto; width:auto; height:1px;
    transform:translateY(-50%);
    background:repeating-linear-gradient(to right,
      rgba(245,241,232,.17) 0 12px, transparent 12px 28px);
  }
  .rail-trail{
    left:0; top:50%; width:0; height:3px;
    transform:translateY(-50%);
    /* mesmo rastro, deitado: 240px quentes coladas atras do carro */
    background:
      linear-gradient(to left, var(--red), rgba(229,35,27,0)) no-repeat 100% 50% / 240px 100%,
      linear-gradient(rgba(229,35,27,.2), rgba(229,35,27,.2));
  }
  .rail-car{
    left:0; top:50%; width:18px; margin-left:0;
    /* -90deg poe o nariz apontando para a direita, o sentido da viagem */
    transform:translate(var(--car-x,0px), -50%) rotate(-90deg);
    filter:drop-shadow(0 3px 7px rgba(0,0,0,.7))
           drop-shadow(-12px 0 16px rgba(229,35,27,.45));
  }
}

/* ---------- passos: o trilho fica em pe quando a lista empilha ---------- */
@media (max-width:820px){
  .steps{ gap:1.9rem; }
  .steps-track{
    display:block;
    /* 21px = centro do selo de 42px, entao a linha nasce dentro do primeiro
       numero em vez de aparecer solta acima dele */
    left:20px; right:auto; top:21px; bottom:10px;
    width:3px; height:auto;
  }
  .steps-track i{ display:block; width:100%; height:0; }
  /* numero a esquerda e texto ao lado: o trilho passa a ligar os selos */
  .step{ padding:0 0 0 66px; min-height:42px; }
  .step-n{ top:0; left:0; }
  .step p{ max-width:none; }
}

@media (max-width:560px){ :root{ --barra:58px; } }

/* o trilho parado seria lido como quebra; preenchido, parece intencional */
.no-motion .steps-track i{ width:100%; height:100%; }
@media (prefers-reduced-motion: reduce){
  .steps-track i{ width:100%; height:100%; }
}