/* ═══════════════════════════════════════════════════════════
   ZELON — página de vendas
   1. Tokens   2. Base   3. Componentes   4. Seções   5. Responsivo
   ═══════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────── */
:root{
  /* cor */
  --ink:      #08090a;   /* preto base, frio como concreto de oficina */
  --ink-2:    #0c0e11;
  --panel:    #14171b;
  --panel-2:  #0e1114;
  --line:     rgba(255,255,255,.09);
  --line-2:   rgba(255,255,255,.16);

  --red:      #e10e17;   /* vermelho Zelon — usado como LUZ, não como tinta */
  --red-hi:   #ff3b3b;
  --red-deep: #5c0408;

  --white:    #f4f5f7;
  --grey:     #8d949d;
  --grey-2:   #5e656d;

  /* tipografia — uma família, três larguras */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* espaço */
  --pad: clamp(20px, 5vw, 40px);
  --sec: clamp(88px, 12vw, 168px);
  --wrap: 1220px;

  /* raio — escala, não um valor só. Quanto maior o bloco, mais macio o canto. */
  --r-sm: 12px;
  --r:    20px;
  --r-lg: 28px;
  --pill: 999px;

  /* superfície de vidro: luz batendo de cima à esquerda no painel */
  --vidro: linear-gradient(155deg, rgba(255,255,255,.06), rgba(255,255,255,.014) 44%, rgba(255,255,255,0) 72%);

  --ease: cubic-bezier(.22,.8,.28,1);
}

/* ── 2. BASE ───────────────────────────────────────────── */
*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

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

img{ max-width:100%; display:block; }
a{ color:inherit; }

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

:focus-visible{
  outline:2px solid var(--red-hi);
  outline-offset:3px;
  border-radius:3px;
}

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--red); color:#fff; padding:12px 18px; text-decoration:none;
}
.skip:focus{ left:12px; top:12px; }

.wrap{
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--pad);
}

/* tipografia de títulos — 800 expandido, cara de decalque de tanque */
.h2{
  font-size:clamp(1.95rem, 1rem + 3.4vw, 3.4rem);
  font-variation-settings:"wdth" 112, "wght" 800;
  line-height:.96;
  letter-spacing:-.025em;
  color:var(--white);
  margin:0 0 .5em;
  text-wrap:balance;
}
.h3{
  font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  font-variation-settings:"wdth" 108, "wght" 700;
  line-height:1.08;
  letter-spacing:-.018em;
  color:var(--white);
  margin:0 0 .7em;
}

/* dado técnico — condensado, cara de painel de instrumentos */
.spec{
  display:block;
  font-size:.75rem;
  font-variation-settings:"wdth" 84, "wght" 600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey-2);
}

p{ margin:0 0 1.05em; max-width:62ch; }
p:last-child{ margin-bottom:0; }

.big{
  font-size:clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height:1.35;
  color:var(--white);
  font-variation-settings:"wdth" 104, "wght" 600;
  letter-spacing:-.012em;
}
.ask{ color:var(--white); font-variation-settings:"wdth" 102,"wght" 600; }
strong{ color:var(--white); font-variation-settings:"wdth" 100,"wght" 700; }

/* ── FUNDO ─────────────────────────────────────────────────
   Malha técnica exposta: a grade de diagramação fica visível, como
   uma prancha de projeto. Fixa na viewport, então o conteúdo desliza
   por cima dela em vez de arrastá-la junto.
   ---------------------------------------------------------- */
.malha{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  /* a malha fina */
  background-image:
    linear-gradient(rgba(255,255,255,.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.042) 1px, transparent 1px);
  background-size:88px 88px;
  background-position:center top;
}
/* as colunas mestras, alinhadas ao mesmo container do conteúdo:
   é isso que faz a grade parecer projeto e não papel quadriculado */
.malha__col{
  height:100%;
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
  background-clip:content-box;
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.105) 0 1px,
    transparent 1px,
    transparent calc(100% / 4));
}
/* a última linha, que o repeating não desenha */
.malha__col::after{
  content:""; position:absolute; top:0; bottom:0;
  right:var(--pad); width:1px;
  background:rgba(255,255,255,.105);
  max-width:none;
}
.malha__col{ position:relative; }

/* em tela estreita, quatro colunas viram listrado: fica com duas */
@media (max-width: 700px){
  .malha{ background-size:64px 64px; }
  .malha__col{
    background-image:repeating-linear-gradient(90deg,
      rgba(255,255,255,.105) 0 1px,
      transparent 1px,
      transparent calc(100% / 2));
  }
}

/* brasa: o calor difuso por trás de tudo, na cor da marca */
.malha__brasa{
  position:absolute; inset:0;
  background:
    radial-gradient(58% 38% at 78% 6%,  rgba(225,14,23,.15), transparent 70%),
    radial-gradient(50% 34% at 12% 52%, rgba(225,14,23,.09), transparent 72%),
    radial-gradient(64% 40% at 62% 96%, rgba(225,14,23,.13), transparent 72%);
}

/* o conteúdo passa por cima da malha */
main, .foot{ position:relative; z-index:1; }
/* rodapé translúcido para a malha continuar aparecendo lá embaixo */
.foot{ background:linear-gradient(180deg, rgba(12,14,17,.86), rgba(12,14,17,.97)); }

/* ── 3. COMPONENTES ────────────────────────────────────── */

/* marca — logo oficial, PNG com fundo transparente */
.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brand__logo{
  height:clamp(24px, 2.4vw, 30px); width:auto;
  filter:drop-shadow(0 0 18px rgba(225,14,23,.35));
  transition:filter .3s var(--ease);
}
.brand:hover .brand__logo{ filter:drop-shadow(0 0 22px rgba(225,14,23,.6)); }
.foot__logo{
  height:clamp(40px, 4.6vw, 58px); width:auto; flex:none;
  filter:drop-shadow(0 0 26px rgba(225,14,23,.3));
}

/* botões */
.btn{
  --bg: var(--red);
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 26px;
  background:var(--bg);
  color:#fff;
  border:0; border-radius:999px;
  font-family:inherit; font-size:.95rem;
  font-variation-settings:"wdth" 102, "wght" 700;
  letter-spacing:.005em;
  text-decoration:none; cursor:pointer;
  position:relative; overflow:hidden;
  box-shadow:0 10px 30px -12px rgba(225,14,23,.8), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn::after{ /* varredura de brilho no hover — o próprio produto é brilho */
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%);
  transform:translateX(-130%);
  transition:transform .6s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(225,14,23,.95), inset 0 1px 0 rgba(255,255,255,.28); }
.btn:hover::after{ transform:translateX(130%); }
.btn:active{ transform:translateY(0); }
.btn--lg{ padding:20px 34px; font-size:1.02rem; }
.btn--sm{ padding:11px 20px; font-size:.85rem; }
.btn--ghost{
  background:transparent; color:var(--white);
  border:1px solid var(--line-2);
  box-shadow:none;
}
.btn--ghost:hover{ background:rgba(255,255,255,.05); border-color:var(--white); box-shadow:none; }

/* painel de vidro: gradiente diagonal + fio de luz na borda de cima */
.plano, .depo, .duo__col{
  position:relative;
  background:var(--vidro), linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.plano::before, .depo::before, .duo__col::before{
  content:""; position:absolute; left:18px; right:18px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
}

/* cápsula de dado — horário, número de etapa, etiqueta */
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 14px; border-radius:var(--pill);
  border:1px solid rgba(225,14,23,.42);
  background:rgba(225,14,23,.1);
  color:var(--red-hi);
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 700;
  white-space:nowrap;
}
.chip--neutro{
  border-color:var(--line-2);
  background:rgba(255,255,255,.05);
  color:var(--grey);
}
.chip--cheio{
  border-color:var(--red-hi); background:var(--red); color:#fff;
  box-shadow:0 6px 20px -8px rgba(225,14,23,.9);
}

/* bloom de seção — a luz vermelha atrás do conteúdo */
.bloom{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; top:50%; translate:-50% -50%;
  width:min(1100px, 120%); aspect-ratio:1.6;
  background:radial-gradient(closest-side, rgba(225,14,23,.17), rgba(225,14,23,.05) 52%, transparent 76%);
}

/* faíscas: pontos de brasa flutuando, como no fundo da referência */
.faiscas{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  mask-image:linear-gradient(180deg, #000 55%, transparent);
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent);
}
.faiscas i{
  position:absolute; inset:-20% 0 -20%;
  background-repeat:repeat;
  animation:subir 26s linear infinite;
}
.faiscas i:nth-child(1){
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,90,80,.85) 0 1.4px, transparent 2px),
    radial-gradient(circle at 34% 62%, rgba(255,140,120,.6) 0 1px, transparent 1.6px),
    radial-gradient(circle at 58% 30%, rgba(255,70,60,.75) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 78% 74%, rgba(255,120,100,.5) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 91% 44%, rgba(255,80,70,.7) 0 1.3px, transparent 1.9px);
  background-size:520px 420px;
}
.faiscas i:nth-child(2){
  background-image:
    radial-gradient(circle at 22% 46%, rgba(255,255,255,.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 66% 12%, rgba(255,160,140,.45) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 44% 84%, rgba(255,90,80,.55) 0 1.5px, transparent 2.1px);
  background-size:360px 300px;
  animation-duration:41s; animation-direction:reverse;
  opacity:.75;
}
@keyframes subir{ to{ background-position:-90px -1400px; } }

/* placeholders de foto — chapa escovada com legenda do que entra ali */
.slot{
  position:relative;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:
    radial-gradient(120% 80% at 25% 0%, rgba(225,14,23,.14), transparent 58%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.022) 0 2px, transparent 2px 5px),
    linear-gradient(152deg, #191d22, #0b0d10 62%);
  overflow:hidden;
  background-size:cover; background-position:center;
}
.slot::before{
  content:""; position:absolute; left:14px; top:14px; width:20px; height:20px;
  border-left:2px solid var(--red); border-top:2px solid var(--red);
  opacity:.85;
}
.slot::after{
  content:attr(data-caption);
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 18px;
  font-size:.74rem;
  font-variation-settings:"wdth" 88, "wght" 500;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--grey-2);
  background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
}
.slot.is-filled::before, .slot.is-filled::after{ content:none; }
/* foto real colocada como <img> dentro do .slot */
.slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slot:has(img)::before, .slot:has(img)::after{ content:none; }

/* Casa a foto com o fundo preto: rebaixa as luzes, escurece as bordas
   e joga um pouco da luz vermelha da marca no canto superior. */
.slot__grade{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(76% 52% at 22% 6%, rgba(225,14,23,.24), transparent 62%),
    linear-gradient(180deg, rgba(8,9,10,.38) 0 8%, transparent 30%),
    linear-gradient(0deg, rgba(8,9,10,.94), rgba(8,9,10,.45) 25%, transparent 54%),
    radial-gradient(120% 84% at 56% 42%, transparent 38%, rgba(8,9,10,.4) 76%, rgba(8,9,10,.8) 100%);
}

/* animação de entrada — discreta e única por bloco */
.anim{ opacity:0; transform:translateY(14px); animation:rise .85s var(--ease) forwards; animation-delay:var(--d,0ms); }
@keyframes rise{ to{ opacity:1; transform:none; } }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .anim{ opacity:1; transform:none; animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn::after, .sheen, .fab__ping{ display:none; }
  .hero__bloom{ animation:none; }
  .dot{ animation:none; }
  .faiscas i{ animation:none; }
  .step__fill{ transition:none; }
  .qa[open] > p{ animation:none; }
  .fab{ transition:none; }
}

/* ── 4. SEÇÕES ─────────────────────────────────────────── */

/* NAV */
.nav{
  position:fixed; inset:0 0 auto; z-index:60;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,9,10,.82);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto;
  padding:16px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__links{ display:flex; gap:30px; }
.nav__links a{
  text-decoration:none; font-size:.92rem; color:var(--grey);
  font-variation-settings:"wdth" 100,"wght" 500;
  position:relative; padding-block:4px;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:var(--white); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__end{ display:flex; align-items:center; gap:12px; }

.burger{
  display:none; width:44px; height:40px; padding:0;
  background:transparent; border:1px solid var(--line-2); border-radius:14px;
  cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:12px; right:12px; height:2px; background:var(--white);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.burger span:first-child{ top:15px; }
.burger span:last-child{ bottom:15px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-6px) rotate(-45deg); }

.menu{
  display:flex; flex-direction:column; gap:4px;
  padding:12px var(--pad) 26px;
  background:rgba(8,9,10,.96); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.menu[hidden]{ display:none; }
.menu a{
  text-decoration:none; color:var(--white); padding:14px 0;
  font-size:1.25rem; font-variation-settings:"wdth" 106,"wght" 600;
  border-bottom:1px solid var(--line);
}
.menu__cta{
  margin-top:14px; border:0 !important; text-align:center;
  background:var(--red); border-radius:999px; padding:16px !important;
  font-size:1rem !important;
}

/* HERO */
.hero{
  position:relative;
  padding-top:clamp(120px, 15vh, 172px);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero__bloom{
  position:absolute; z-index:0;
  top:-16%; right:-10%; width:min(880px, 95vw); aspect-ratio:1;
  background:radial-gradient(circle at center, rgba(225,14,23,.30), rgba(225,14,23,.08) 42%, transparent 68%);
  filter:blur(14px);
  animation:ignite 1.6s var(--ease) both;
}
@keyframes ignite{ from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:none; } }

.hero__in{
  position:relative; z-index:1;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:clamp(28px, 5vw, 64px); align-items:center;
  padding-bottom:clamp(48px, 7vw, 80px);
}

.hero__title{
  margin:0 0 24px;
  font-size:clamp(2.3rem, .8rem + 4.4vw, 4rem);
  font-variation-settings:"wdth" 110, "wght" 800;
  line-height:.93;
  letter-spacing:-.035em;
  color:var(--white);
}
.hero__title .ln{ display:block; }
.hero__lead{
  font-size:clamp(1.1rem, .98rem + .7vw, 1.45rem);
  color:var(--white);
  font-variation-settings:"wdth" 102,"wght" 500;
  line-height:1.35; max-width:34ch;
  margin-bottom:18px;
}
.hero__text{ max-width:46ch; margin-bottom:34px; }

.hero__cta{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.hero__note{
  margin:0; font-size:.85rem; color:var(--grey-2);
  display:inline-flex; align-items:center; gap:9px;
}
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 0 rgba(225,14,23,.6); animation:pulse 2.6s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(225,14,23,0); }
  100%{ box-shadow:0 0 0 0 rgba(225,14,23,0); }
}

.hero__art{ position:relative; }
.slot--hero{
  aspect-ratio:4/5;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.95), 0 0 90px -30px rgba(225,14,23,.45);
}
.slot--hero img{
  object-position:center 38%;   /* mantém tanque e guidão no quadro */
  filter:brightness(.9) contrast(1.12) saturate(1.08);
}
/* No desktop a foto quase não é cortada pelo slot, então aproximamos
   para tirar o piso claro e o carrinho de ferramentas do enquadramento. */
@media (min-width: 1021px){
  .slot--hero img{
    object-position:center 46%;
    transform:scale(1.22); transform-origin:50% 42%;
  }
}
/* varredura especular — acontece UMA vez, no carregamento */
.sheen{
  position:absolute; inset:0; border-radius:var(--r-lg); overflow:hidden; pointer-events:none;
}
.sheen::before{
  content:""; position:absolute; top:-30%; bottom:-30%; width:36%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform:translateX(-160%) skewX(-14deg);
  animation:sweep 2.1s 1.1s var(--ease) both;
}
@keyframes sweep{ to{ transform:translateX(420%) skewX(-14deg); } }

/* faixa de preço */
.strip{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.strip__in{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
}
.strip__item{
  padding:26px 0; padding-right:28px;
  border-right:1px solid var(--line);
}
.strip__item:first-child{ padding-left:0; }
.strip__item:last-child{ border-right:0; padding-right:0; }
.strip__item .chip{ margin-bottom:14px; }
.strip__price{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  font-size:clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem);
  font-variation-settings:"wdth" 94,"wght" 800;
  letter-spacing:-.02em; color:var(--white);
}
.strip__price em{
  font-style:normal; font-size:.78rem; color:var(--grey-2);
  font-variation-settings:"wdth" 88,"wght" 500; letter-spacing:.06em;
}
.strip__txt{
  display:block; font-size:.95rem; color:var(--grey);
  font-variation-settings:"wdth" 100,"wght" 400; max-width:38ch;
}

/* estrutura de seção */
.sec{ padding-block:var(--sec); position:relative; }
/* só onde tem bloom sangrando: overflow:hidden aqui quebraria o sticky
   da foto na seção de processo. */
.sec--solucao, .sec--pacotes{ overflow:hidden; }
.sec > .wrap{ position:relative; z-index:1; }

.faiscas--final{ mask-image:none; -webkit-mask-image:none; opacity:.8; }

.lead-2col{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px); align-items:end;
  margin-bottom:clamp(40px, 6vw, 72px);
}
.lead-2col .h2{ margin-bottom:0; }
.lead-2col__side > p:first-child{ margin-bottom:.7em; }

/* problema */
.sec--problema{ border-bottom:1px solid var(--line); }
.wear{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:clamp(24px,4vw,64px);
  border-top:1px solid var(--line);
}
.wear li{
  display:flex; align-items:center; gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  color:var(--white);
  font-variation-settings:"wdth" 100,"wght" 500;
}
.wear__i{
  width:14px; height:14px; flex:none;
  background:var(--red);
  clip-path:polygon(100% 0, 42% 0, 0 100%, 58% 100%);
  opacity:.9;
}
.turn{
  margin-top:clamp(36px,5vw,56px);
  font-size:clamp(1.4rem, 1rem + 1.8vw, 2.2rem);
  font-variation-settings:"wdth" 110,"wght" 700;
  letter-spacing:-.02em; color:var(--white);
}

/* solução — bento grid.
   O tamanho de cada bloco é hierarquia, não decoração: o benefício
   principal ocupa o bloco grande e vem em cima da foto que o prova. */
.bento{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  grid-auto-rows:minmax(186px, auto);
  gap:clamp(10px,1.2vw,16px);
}
.bento__c{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:28px 26px;
  background:var(--vidro), linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.bento__c::before{
  content:""; position:absolute; left:18px; right:18px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  z-index:2;
}
.bento__c:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.bento__c h3{
  margin:0 0 10px; color:var(--white);
  font-size:1.06rem; line-height:1.22;
  font-variation-settings:"wdth" 104,"wght" 700; letter-spacing:-.012em;
}
.bento__c p{ margin:0; font-size:.93rem; }

/* blocos de foto: a imagem é o fundo, o texto assenta no pé */
.bento__c--foto{ padding:0; justify-content:flex-end; }
.bento__c--foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* base escura própria: aqui o texto assenta em cima da foto e precisa
   de contraste garantido, não de uma vinheta decorativa. */
.bento__c--foto .slot__grade{
  background:
    linear-gradient(0deg, rgba(8,9,10,.97) 0 16%, rgba(8,9,10,.8) 38%, rgba(8,9,10,.16) 70%, transparent 100%),
    radial-gradient(130% 95% at 50% 26%, transparent 42%, rgba(8,9,10,.5) 100%);
}
.bento__sobre{ position:relative; z-index:1; padding:26px; }
.bento__sobre p{ color:var(--grey); }
.bento__c--1 img{ object-position:center 58%; }

/* bloco de acento: é o CTA, o único vermelho do conjunto */
.bento__c--cta{
  justify-content:center;
  background:
    var(--vidro),
    radial-gradient(110% 80% at 15% 0%, rgba(225,14,23,.3), transparent 68%),
    linear-gradient(180deg, #1c1115, var(--panel-2));
  border-color:rgba(225,14,23,.36);
  box-shadow:0 30px 70px -40px rgba(225,14,23,.7);
}
.bento__c--cta::before{ background:linear-gradient(90deg, transparent, var(--red-hi), transparent); }
.bento__c--cta:hover{ border-color:rgba(225,14,23,.6); }
.bento__c--cta h3{ font-size:1.18rem; }
.bento__c--cta .btn{ align-self:flex-start; margin-top:20px; }

/* o desenho do mosaico */
.bento__c--1{ grid-column:1 / 3; grid-row:1 / 3; }   /* foto grande, 2x2 */
.bento__c--2{ grid-column:3 / 4; grid-row:1; }       /* água             */
.bento__c--3{ grid-column:4 / 5; grid-row:1; }       /* sujeira          */
.bento__c--4{ grid-column:3 / 5; grid-row:2; }       /* CTA, largo       */
.bento__c--5{ grid-column:1 / 3; grid-row:3; }       /* manutenção       */
.bento__c--6{ grid-column:3 / 5; grid-row:3; }       /* foto, só imagem  */

.bento__c--5{ justify-content:center; }
/* bloco de imagem pura: sem texto por cima, então a vinheta volta a ser leve */
.bento__c--6 img{ object-position:center 70%; }
.bento__c--6 .slot__grade{
  background:radial-gradient(125% 95% at 50% 45%, transparent 46%, rgba(8,9,10,.62) 100%);
}

/* Abaixo de 1080px as quatro colunas ficam estreitas demais e o texto dos
   blocos pequenos começa a quebrar palavra a palavra. Aqui o mosaico passa
   a duas colunas: foto grande como banner, os dois curtos lado a lado. */
@media (max-width: 1080px){
  .bento{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:minmax(158px, auto); }
  .bento__c--1{ grid-column:1 / 3; grid-row:auto; min-height:300px; }
  .bento__c--2{ grid-column:1 / 2; grid-row:auto; }
  .bento__c--3{ grid-column:2 / 3; grid-row:auto; }
  .bento__c--4{ grid-column:1 / 3; grid-row:auto; }
  .bento__c--5{ grid-column:1 / 3; grid-row:auto; }
  .bento__c--6{ grid-column:1 / 3; grid-row:auto; min-height:240px; }
}

/* processo — trilho vertical que acende conforme desce */
.sec--processo{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.018), transparent); }
.proc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.68fr);
  gap:clamp(32px,5vw,72px); align-items:start;
}
.proc__art{ position:sticky; top:108px; }
.slot--proc{
  aspect-ratio:3/4;
  box-shadow:0 40px 80px -44px rgba(0,0,0,.95);
}
.proc__nota{
  margin-top:20px; font-size:.88rem; color:var(--grey-2);
  padding-left:16px; border-left:1px solid var(--line-2);
}
.rail{ list-style:none; margin:0; padding:0; }
.step{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:clamp(20px,3vw,40px); }
.step__rail{ position:relative; display:flex; justify-content:center; }
.step__rail::before{
  content:""; position:absolute; top:0; bottom:0; width:1px;
  background:var(--line);
}
.step:last-child .step__rail::before{ bottom:auto; height:22px; }
.step__fill{
  position:absolute; top:0; width:1px; height:0;
  background:linear-gradient(180deg, var(--red-hi), var(--red));
  transition:height .9s var(--ease);
}
.step.is-on .step__fill{ height:100%; }
.step:last-child.is-on .step__fill{ height:22px; }
.step__node{
  position:absolute; top:14px;
  width:11px; height:11px; border-radius:50%;
  background:var(--ink); border:1px solid var(--line-2);
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.step.is-on .step__node{
  background:var(--red); border-color:var(--red-hi);
  box-shadow:0 0 0 5px rgba(225,14,23,.16), 0 0 20px rgba(225,14,23,.75);
}
.step__body{ padding-block:2px clamp(34px,5vw,52px); }
.step:last-child .step__body{ padding-bottom:0; }
/* número da etapa em cápsula, como o horário na programação da referência */
.step__n{
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:12px; padding:6px 15px;
  border-radius:var(--pill);
  border:1px solid rgba(225,14,23,.3);
  background:rgba(225,14,23,.08);
  color:var(--red-hi);
  font-size:.76rem; letter-spacing:.16em;
  transition:border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.step.is-on .step__n{
  border-color:rgba(225,14,23,.7);
  background:rgba(225,14,23,.16);
  box-shadow:0 0 24px -6px rgba(225,14,23,.6);
}
.step__body h3{
  margin:0 0 8px; color:var(--white);
  font-size:clamp(1.3rem,1.05rem + 1vw,1.8rem);
  font-variation-settings:"wdth" 106,"wght" 700;
  letter-spacing:-.018em; line-height:1.1;
}
.step__body p{ margin:0; max-width:56ch; }

/* resultado — antes/depois */
.res__head{ margin-bottom:clamp(32px,5vw,56px); max-width:62ch; }
.res__head p{ margin-top:.6em; }

/* Par lado a lado. As duas fotos recebem exatamente o mesmo tratamento
   de cor — a diferença que aparece é a diferença real. */
.cmp{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(12px, 2.2vw, 26px);
}
.cmp__card{ margin:0; }
.cmp__foto{ aspect-ratio:4/5; }
.cmp__foto img{ filter:brightness(.92) contrast(1.06) saturate(1.04); }
/* Aqui a foto é prova, não capa: só vinheta neutra, sem cor por cima. */
.cmp__foto .slot__grade,
.slot--proc .slot__grade,
.gal .slot__grade{
  background:
    linear-gradient(0deg, rgba(8,9,10,.82), rgba(8,9,10,.2) 22%, transparent 44%),
    radial-gradient(120% 88% at 50% 42%, transparent 50%, rgba(8,9,10,.55) 100%);
}
.cmp__card:first-child .cmp__foto img{ object-position:center 46%; }
.cmp__card--depois .cmp__foto img{ object-position:center 40%; }

.cmp__rot{
  position:absolute; z-index:2; top:14px; left:14px;
  padding:7px 15px; border-radius:999px;
  background:rgba(8,9,10,.66); backdrop-filter:blur(8px);
  border:1px solid var(--line-2);
  font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 700;
  color:var(--white);
}
.cmp__card--depois .cmp__rot{
  background:var(--red); border-color:var(--red-hi); color:#fff;
  box-shadow:0 6px 20px -6px rgba(225,14,23,.9);
}
.cmp__card--depois .cmp__foto{
  border-color:rgba(225,14,23,.4);
  box-shadow:0 40px 80px -46px rgba(225,14,23,.85);
}
.cmp__card figcaption{
  padding:18px 2px 0;
  font-size:.93rem; color:var(--grey); line-height:1.45;
}
.cmp__card--depois figcaption{ color:var(--white); font-variation-settings:"wdth" 100,"wght" 500; }

/* ── Esteira de fotos ──────────────────────────────────────
   Celular: carrossel de deslizar, como qualquer galeria.
   Computador: a fileira ganha perspectiva, corre sozinha, reage ao
   mouse e cada card salta para a frente quando você aponta nele.
   ---------------------------------------------------------- */

/* base (celular) — as fotos são 9:16, então a prateleira é vertical e
   sangra até a borda para deixar claro que tem mais foto adiante */
.gal{
  display:flex; gap:12px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  margin-inline:calc(var(--pad) * -1);
  padding:0 var(--pad) 16px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
}
.gal .slot{
  flex:0 0 61%;
  aspect-ratio:9/16;
  scroll-snap-align:center;
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.gal .slot:hover{ transform:translateY(-3px); border-color:var(--line-2); }
/* tira a perna do fotógrafo do canto desta foto */
.gal__ajuste img{ transform:scale(1.14); transform-origin:68% 34%; }

.gal__dica{
  margin:0 0 18px;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 600;
  color:var(--grey-2);
}
/* a instrução muda conforme o aparelho: mouse ou dedo */
.so-toque{ display:none; }
@media (hover: none){
  .so-mouse{ display:none; }
  .so-toque{ display:inline; }
}

@media (prefers-reduced-motion: reduce){
  .gal__dica{ display:none; }
}

@media (min-width: 861px){
  /* A janela recorta só na horizontal: `clip` deixa o eixo vertical
     visível, então o card que salta para a frente não é decepado.
     `hidden` aqui achataria o 3D inteiro. */
  .esteira{
    overflow-x:clip; overflow-y:visible;
    margin-inline:calc(var(--pad) * -1);
    padding-block:38px;
    /* as pontas somem em vez de terminar numa borda reta */
    mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
  .esteira__palco{
    --rx: 9deg;  --ry: -19deg;
    perspective:1250px;
    perspective-origin:50% 45%;
  }
  .gal{
    display:flex; width:max-content;
    gap:clamp(14px,1.6vw,22px);
    overflow:visible; margin-inline:0; padding:0;
    transform-style:preserve-3d;
    transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(-3deg);
    transition:transform .5s var(--ease);
    will-change:transform;
  }
  /* a fita corre; a duração vem do JS para a velocidade não mudar
     com a quantidade de fotos */
  .gal__fita{
    display:flex; gap:inherit;
    animation:correr var(--dur, 46s) linear infinite;
  }
  .esteira:hover .gal__fita{ animation-play-state:paused; }
  /* anda exatamente um conjunto de fotos: aí a emenda fica invisível.
     Porcentagem não serviria porque o gap entre as cópias desalinha. */
  @keyframes correr{ to{ transform:translate3d(calc(var(--passo, 1200px) * -1), 0, 0); } }

  .gal .slot{
    flex:0 0 clamp(190px, 15.5vw, 250px);
    transform-style:preserve-3d;
    transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  }
  /* escadinha de profundidade: a fileira não fica plana como uma régua */
  .gal .slot:nth-child(2n){ transform:translate3d(0, 14px, -30px); }
  .gal .slot:nth-child(3n){ transform:translate3d(0, -10px, 22px); }
  .gal .slot:hover{
    transform:translate3d(0,-14px,130px);
    border-color:rgba(225,14,23,.55);
    box-shadow:0 50px 90px -40px rgba(0,0,0,1), 0 0 70px -18px rgba(225,14,23,.65);
    z-index:2;
  }
}

/* Sem esteira automática para quem desativou animação: vira fileira parada. */
@media (min-width: 861px) and (prefers-reduced-motion: reduce){
  .gal__fita{ animation:none; }
  .gal{ transform:none; }
  .esteira{ mask-image:none; -webkit-mask-image:none; padding-block:0; margin-inline:0; }
}

/* pacotes */
.planos{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(16px,2.5vw,26px); align-items:start;
}
.plano{
  padding:clamp(28px,3.5vw,42px);
  display:flex; flex-direction:column; gap:22px;
  transition:border-color .3s var(--ease);
}
.plano:hover{ border-color:var(--line-2); }
.plano--destaque{
  background:
    var(--vidro),
    radial-gradient(90% 55% at 50% 0%, rgba(225,14,23,.2), transparent 70%),
    linear-gradient(180deg, #1a1114, var(--panel-2));
  border-color:rgba(225,14,23,.34);
  box-shadow:0 40px 90px -40px rgba(225,14,23,.7);
}
.plano--destaque::before{
  background:linear-gradient(90deg, transparent, var(--red-hi), transparent);
  left:8%; right:8%;
}
.plano--destaque:hover{ border-color:rgba(225,14,23,.6); }
.plano__flag{
  position:absolute; top:-11px; left:clamp(28px,3.5vw,42px);
  background:var(--red); color:#fff;
  padding:4px 13px; border-radius:999px;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  font-variation-settings:"wdth" 88,"wght" 700;
  box-shadow:0 6px 20px -6px rgba(225,14,23,.9);
}
.plano__name{
  margin:0 0 10px; color:var(--white);
  font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);
  font-variation-settings:"wdth" 108,"wght" 700;
  letter-spacing:-.02em; line-height:1.1;
}
.plano__desc{ margin:0; font-size:.95rem; }
/* preço num painel próprio, aninhado dentro do card */
.plano__price{
  margin:0; padding:22px 24px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.008));
  font-size:clamp(2.4rem,1.6rem + 3vw,3.4rem);
  font-variation-settings:"wdth" 92,"wght" 800;
  letter-spacing:-.035em; color:var(--white); line-height:1;
}
.plano__price .spec{ margin-top:12px; letter-spacing:.1em; }
.plano--destaque .plano__price{
  color:#fff;
  border-color:rgba(225,14,23,.32);
  background:linear-gradient(160deg, rgba(225,14,23,.16), rgba(225,14,23,.03));
}

/* a lista também vira um sub-painel, como os blocos aninhados da referência */
.plano__list{
  list-style:none; margin:0; padding:22px 24px;
  border-radius:var(--r);
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  display:grid; gap:12px; flex:1;
}
.plano__list li{
  position:relative; padding-left:26px; font-size:.95rem; color:var(--grey);
}
.plano__list li::before{
  content:""; position:absolute; left:0; top:.32em;
  width:15px; height:15px; border-radius:var(--pill);
  border:1px solid rgba(225,14,23,.5);
  background:
    linear-gradient(var(--red), var(--red)) center/6px 1.5px no-repeat,
    rgba(225,14,23,.12);
}
.plano .btn{ width:100%; }

/* objeção + pós-serviço */
.duo{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px,2.5vw,26px); }
.duo__col{ padding:clamp(28px,3.5vw,44px); }
.duo__col .h3{ margin-bottom:.6em; }
.quote{
  margin:22px 0; padding:18px 0 18px 24px;
  border-left:2px solid var(--red);
  font-size:clamp(1.2rem,1rem + 1vw,1.6rem);
  font-variation-settings:"wdth" 104,"wght" 600;
  letter-spacing:-.015em; line-height:1.25; color:var(--white);
}

/* depoimentos */
.sec--depo .h2{ margin-bottom:clamp(32px,5vw,52px); }
/* Os depoimentos são transcrições longas, do jeito que o cliente escreveu.
   Por isso as alturas ficam desiguais: é texto real, não caixa preenchida. */
.depos{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px,1.6vw,18px); align-items:start;
}
.depo{ padding:28px 26px 26px; margin:0; display:flex; flex-direction:column; gap:16px; }
.depo__nota{
  margin:0; font-size:.95rem; letter-spacing:.22em;
  color:var(--red); line-height:1;
}
.depo blockquote{
  margin:0; color:var(--white);
  font-size:1rem; line-height:1.55;
  font-variation-settings:"wdth" 100,"wght" 400; letter-spacing:-.005em;
  text-wrap:pretty;
}
.depo blockquote::before{ content:"“"; color:var(--red); margin-right:1px; }
.depo blockquote::after{ content:"”"; color:var(--red); margin-left:1px; }
.depo figcaption{
  margin-top:auto; padding-top:4px;
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--grey-2); font-variation-settings:"wdth" 86,"wght" 600;
}
.depo figcaption b{
  display:block; margin-bottom:3px;
  font-size:1.02rem; letter-spacing:-.01em; text-transform:none;
  color:var(--white); font-variation-settings:"wdth" 104,"wght" 700;
}

/* faq */
.sec--faq{ border-top:1px solid var(--line); }
.faq{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,80px); align-items:start; }
.faq__head p{ margin-bottom:26px; }
.faq__list{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  list-style:none; cursor:pointer;
  padding:22px 44px 22px 0; position:relative;
  color:var(--white); font-size:clamp(1.02rem,.96rem + .35vw,1.15rem);
  font-variation-settings:"wdth" 102,"wght" 600; letter-spacing:-.01em;
  transition:color .25s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--red-hi); }
.qa summary i{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:14px; height:14px;
}
.qa summary i::before, .qa summary i::after{
  content:""; position:absolute; background:var(--red);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.qa summary i::before{ left:0; right:0; top:6px; height:2px; }
.qa summary i::after{ top:0; bottom:0; left:6px; width:2px; }
.qa[open] summary i::after{ transform:scaleY(0); }
.qa p{ margin:0; padding:0 44px 24px 0; font-size:.98rem; }
.qa[open] > p{ animation:open .4s var(--ease) both; }
@keyframes open{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* CTA final */
.final{
  position:relative; overflow:hidden;
  padding-block:clamp(96px,14vw,180px);
  border-top:1px solid var(--line);
  text-align:center;
}
.final__bloom{
  position:absolute; z-index:0; left:50%; bottom:-45%;
  width:min(1100px,130vw); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle at center, rgba(225,14,23,.26), rgba(225,14,23,.06) 40%, transparent 66%);
}
.final__in{ position:relative; z-index:1; }
.final__in p{ margin-inline:auto; }
.final__title{
  margin:0 0 28px;
  font-size:clamp(2rem, 1rem + 4.4vw, 4.2rem);
  font-variation-settings:"wdth" 114,"wght" 800;
  line-height:.96; letter-spacing:-.03em; color:var(--white);
  text-wrap:balance;
}
.final__lead{ font-size:clamp(1.05rem,.98rem + .6vw,1.3rem); color:var(--white); max-width:52ch; }
.final__lead em{ font-style:normal; color:var(--red-hi); }
.final__punch{
  font-size:clamp(1.5rem,1.1rem + 2vw,2.4rem);
  font-variation-settings:"wdth" 110,"wght" 800;
  letter-spacing:-.025em; color:var(--white);
  margin-block:28px 34px;
}
.final__note{ margin-top:22px; font-size:.88rem; color:var(--grey-2); max-width:46ch; }

/* footer */
.foot{ border-top:1px solid var(--line); padding-block:clamp(56px,8vw,90px) 36px; background:var(--ink-2); }
.foot__brand{ display:flex; align-items:center; gap:18px; padding-bottom:clamp(32px,5vw,48px); border-bottom:1px solid var(--line); }
.foot__claim{ margin:0; font-size:clamp(1.05rem,.95rem + .7vw,1.4rem); color:var(--white); font-variation-settings:"wdth" 104,"wght" 600; letter-spacing:-.015em; max-width:34ch; }
.foot__grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); padding-block:clamp(32px,5vw,48px); }
.foot__txt{ font-size:clamp(1rem,.95rem + .4vw,1.15rem); line-height:1.5; }
.foot__info dl{ margin:0; display:grid; gap:16px; }
.foot__info dt{ margin-bottom:3px; }
.foot__info dd{ margin:0; color:var(--white); font-size:.98rem; }
.foot__info a{ color:var(--red-hi); text-decoration:none; border-bottom:1px solid rgba(255,59,59,.35); cursor:pointer; }
.foot__info a:hover{ border-bottom-color:var(--red-hi); }
.foot__sign{
  padding-block:clamp(30px,4vw,44px);
  border-top:1px solid var(--line);
  font-size:clamp(1.4rem,1rem + 2.2vw,2.6rem);
  font-variation-settings:"wdth" 118,"wght" 800;
  letter-spacing:-.03em; color:var(--white); max-width:none;
}
.foot__legal{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--grey-2);
}

/* CTA fixo mobile */
.fab{
  position:fixed; z-index:55; left:16px; right:16px; bottom:16px;
  display:none; align-items:center; justify-content:center; gap:10px;
  padding:17px 22px; border-radius:999px;
  background:var(--red); color:#fff; text-decoration:none;
  font-size:1rem; font-variation-settings:"wdth" 102,"wght" 700;
  box-shadow:0 14px 36px -10px rgba(225,14,23,.9), inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateY(140%); transition:transform .45s var(--ease);
  cursor:pointer;
}
.fab.is-up{ transform:none; }
.fab__ping{ width:8px; height:8px; border-radius:50%; background:#fff; animation:pulse 2.6s infinite; }

/* ── 5. RESPONSIVO ─────────────────────────────────────── */
@media (max-width: 1020px){
  .hero__in{ grid-template-columns:1fr; padding-bottom:44px; }
  .hero__art{ max-width:560px; margin-top:12px; }
  .slot--hero{ aspect-ratio:16/11; }
  .proc{ grid-template-columns:1fr; }
  .proc__art{ position:static; order:-1; margin-bottom:clamp(28px,4vw,40px); }
  .slot--proc{ aspect-ratio:16/9; }
  .faq{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; }
}

@media (max-width: 860px){
  .nav__links{ display:none; }
  .nav__end .btn{ display:none; }
  .burger{ display:block; }

  .strip__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .strip__item{ padding:20px 0; padding-right:20px; }
  .strip__item:nth-child(2){ border-right:0; padding-right:0; }
  .strip__item--wide{ grid-column:1 / -1; border-top:1px solid var(--line); border-right:0; }

  .lead-2col{ grid-template-columns:1fr; align-items:start; gap:20px; }

  .planos{ grid-template-columns:1fr; }
  .plano--destaque{ order:-1; }
  .duo{ grid-template-columns:1fr; }
  .depos{ grid-template-columns:1fr; }
  .fab{ display:flex; }
  .final, .foot{ padding-bottom:100px; }
}

@media (max-width: 560px){
  .wear{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:1fr; }
  .bento__c--1, .bento__c--2, .bento__c--3,
  .bento__c--4, .bento__c--5, .bento__c--6{ grid-column:1 / 2; }
  .strip__in{ grid-template-columns:1fr; }
  .strip__item{ border-right:0; border-top:1px solid var(--line); padding-right:0; }
  .strip__item:first-child{ border-top:0; }
  .hero__cta{ gap:16px; }
  .hero__cta .btn{ width:100%; }
  .foot__legal{ flex-direction:column; gap:8px; }
}