/* ============================================================================
   CAIXA DE FERRAMENTAS DO EMPRESÁRIO
   Largura total, bandas que sangram até a borda, espaços para imagem.
   Procure por EDITAR (ajustes) e IMG-xx (onde entra imagem).
   ========================================================================== */

:root{
  --ink:#0A0A0B;
  --ink-2:#141518;
  --body:#494C53;
  --muted:#71747B;
  --faint:#9A9CA2;
  --line:#E6E5E1;
  --line-2:#D3D2CE;
  --bg:#FFFFFF;
  --bg-2:#F6F5F2;

  --accent:#F38C23;
  --accent-ink:#9C5406;
  --ok:#1E7A57;
  --no:#B03A2C;

  --f:'Instrument Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* conteúdo ocupa a largura toda, mas nunca passa de 1520px de texto.
     A goteira cresce sozinha em telas largas — é o que permite sangrar
     seções inteiras sem o conteúdo desalinhar. */
  --maxw:1520px;
  --gut:max(clamp(20px,4vw,56px), calc((100vw - var(--maxw)) / 2));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--f);
  font-size:17.5px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%; display:block}
p{margin:0}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.035em; line-height:1.04}

.wrap{width:100%; padding-inline:var(--gut)}
.read{max-width:860px}
section{padding-block:clamp(64px,7vw,116px)}
section[id]{scroll-margin-top:24px}

/* ---------- tipografia ---------- */
.t1{font-size:clamp(44px,6.4vw,104px); letter-spacing:-.045em; line-height:.99; font-weight:600}
.t2{font-size:clamp(33px,4.4vw,72px); letter-spacing:-.042em; line-height:1.04; font-weight:600}
.t3{font-size:clamp(23px,2.4vw,34px); letter-spacing:-.03em; line-height:1.16; font-weight:600}
.p{font-size:clamp(17px,1.5vw,20px); line-height:1.62; color:var(--body); max-width:52ch}
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:clamp(16px,2vw,24px); display:block;
}
.dark{background:var(--ink); color:#fff}
.dark .eyebrow{color:#7C8089}
.dark .p{color:#AAAEB6}
.soft{background:var(--bg-2)}

/* ============================================================================
   SEÇÕES CENTRALIZADAS (da "O que tem na caixa" para baixo)
   Só os cabeçalhos e os blocos curtos são centralizados. Linhas de lista e
   respostas longas continuam alinhadas à esquerda: texto corrido centralizado
   obriga o olho a procurar o começo de cada linha e cansa — o efeito piora
   justamente no celular, onde as linhas são curtas e quebram mais.
   ========================================================================== */
/* seletores permissivos: alguns cabeçalhos ficam dentro de .read ou .offer-txt,
   não como filhos diretos de .wrap */
.mid .eyebrow{text-align:center}
.mid h2{text-align:center; margin-inline:auto}
.mid > .wrap > .p{text-align:center; margin-inline:auto}

/* grupos da lista de ferramentas */
.groups{display:grid; gap:clamp(30px,3.6vw,54px); margin-top:clamp(28px,3.2vw,46px)}
.grp-t{
  display:flex; align-items:center; gap:clamp(12px,1.6vw,20px); margin-bottom:2px;
  font-size:12.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent-ink);
}
.grp-t::before,.grp-t::after{content:''; flex:1; height:1px; background:var(--line)}
.grp-t span{flex:none}
.dark .grp-t{color:var(--accent)}
.dark .grp-t::before,.dark .grp-t::after{background:rgba(255,255,255,.14)}
.mid .steps .step{text-align:center}
.mid .step p{margin-inline:auto}
.mid .col h3{text-align:center}
.mid .faq{text-align:left}
.mid .read{margin-inline:auto}
/* os cartões ficam alinhados à esquerda por dentro: a grade em si já está
   centrada na página, e centralizar nome e descrição dentro de cada cartão
   tiraria o eixo de leitura */
.mid .card{text-align:left}
/* rodapé centralizado */
.foot{text-align:center}
.foot .logo{justify-content:center}
.foot p{margin-inline:auto}
.foot nav{justify-items:center}
.seals{justify-content:center}
.legal{text-align:center}
.legal p{margin-inline:auto; max-width:78ch}

/* ---------- botão ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-size:16.5px; font-weight:600; letter-spacing:-.012em;
  padding:17px 30px; border-radius:10px; border:0; cursor:pointer; text-decoration:none;
  background:var(--accent); color:#141414;
  transition:background .18s ease, transform .18s cubic-bezier(.22,1,.36,1);
}
.btn:hover{background:#FF9C36; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:21px 38px; font-size:clamp(16.5px,1.5vw,18.5px)}
/* selo de caixa encaixado no canto superior direito do botão */
.btn-box{position:relative; overflow:visible}
.btn-box .cx{
  position:absolute; top:0; right:0; transform:translate(38%,-38%);
  width:44px; height:44px; padding:10px; border-radius:50%;
  background:var(--ink); color:var(--accent); border:3px solid var(--ink);
  will-change:transform;
  animation:cxIdle 5.5s cubic-bezier(.36,.07,.28,.99) infinite;
}
/* O deslocamento precisa ser repetido em todo quadro: `transform` é uma
   propriedade só, e a animação substituiria o posicionamento do canto.
   O movimento acontece no primeiro terço e o resto do ciclo fica parado —
   é o que faz parecer um tremor ocasional em vez de agitação contínua. */
@keyframes cxIdle{
  0%      { transform:translate(38%,-38%) rotate(0deg)    scale(1) }
  5%      { transform:translate(38%,-38%) rotate(-3.5deg) scale(1.06) }
  10%     { transform:translate(38%,-38%) rotate(2.5deg)  scale(1.03) }
  15%     { transform:translate(38%,-38%) rotate(-2deg)   scale(1.05) }
  20%     { transform:translate(38%,-38%) rotate(1deg)    scale(1.02) }
  26%     { transform:translate(38%,-38%) rotate(0deg)    scale(1) }
  100%    { transform:translate(38%,-38%) rotate(0deg)    scale(1) }
}
.btn-box:hover .cx{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){ .btn-box .cx{animation:none} }
@media(max-width:600px){ .btn-box .cx{width:38px; height:38px; padding:8px} }
.btn-line{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-line:hover{background:var(--bg-2)}
.dark .btn-line,.hero .btn-line{color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.dark .btn-line:hover,.hero .btn-line:hover{background:rgba(255,255,255,.08)}

/* ---------- botão de venda: gradiente verde → azul piscina, com pulso ----------
   Vem depois de `.btn` de propósito: as duas regras têm o mesmo peso, então
   quem estiver embaixo é que vale. Nada de tamanho aqui — padding e corpo de
   letra continuam vindo de `.btn-lg`, inclusive a regra de celular que estica
   o botão de ponta a ponta. Isto aqui só troca a cor e põe o movimento. */
.btn-pulse{
  flex-direction:column; color:#fff;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(90deg,#16a34a,#22c55e,#06b6d4,#22c55e,#16a34a);
  background-size:300% 100%;
  animation:btnPulseGradiente 6s ease-in-out infinite,
            btnPulseBrilho 2s ease-in-out infinite;
}
/* No hover fica só o gradiente, e mais rápido. Não é enfeite: enquanto o
   `btnPulseBrilho` roda, ele é dono do `transform` — animação ganha de
   declaração normal na cascata — e o `translateY` de baixo não sairia do
   lugar. Tirando o pulso da lista, o transform volta a ser nosso. */
.btn-pulse:hover{
  background:linear-gradient(90deg,#16a34a,#22c55e,#06b6d4,#22c55e,#16a34a);
  background-size:300% 100%;
  animation:btnPulseGradiente 3s ease-in-out infinite;
  transform:translateY(-3px);
  box-shadow:0 0 0 8px rgba(6,182,212,.16), 0 12px 26px rgba(6,182,212,.32);
}
/* segunda linha dentro do botão, se um dia entrar
   (ex.: "Acesso imediato · Garantia de 7 dias") */
.btn-pulse small{display:block; font-size:13px; font-weight:600; opacity:.92; margin-top:3px}
@keyframes btnPulseGradiente{
  0%   { background-position:0% 50% }
  50%  { background-position:100% 50% }
  100% { background-position:0% 50% }
}
@keyframes btnPulseBrilho{
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,.55), 0 8px 20px rgba(6,182,212,.25); transform:scale(1) }
  70%  { box-shadow:0 0 0 14px rgba(6,182,212,0), 0 8px 20px rgba(6,182,212,.25); transform:scale(1.025) }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0),  0 8px 20px rgba(6,182,212,.25); transform:scale(1) }
}
/* quem pediu menos movimento fica com o gradiente parado no meio, não sem cor */
@media(prefers-reduced-motion:reduce){
  .btn-pulse,.btn-pulse:hover{animation:none; background-position:50% 50%}
}

.note{font-size:14px; color:var(--muted); display:inline-flex; align-items:center; gap:8px}
.note svg{width:14px; height:14px}
.dark .note,.hero .note{color:#7C8089}

/* ============================================================================
   ESPAÇO PARA IMAGEM
   Cada bloco .slot é um lugar reservado. Quando tiver a arte, troque o
   conteúdo interno por:  <img src="assets/img-XX.jpg" alt="">
   ========================================================================== */
.slot{position:relative; overflow:hidden; background:var(--bg-2); display:grid; place-items:center}
.slot.dk{background:var(--ink-2)}
.slot > img{width:100%; height:100%; object-fit:cover}
/* para PNG/WebP recortado: mostra a arte inteira em vez de cortar, e deixa o
   fundo da seção aparecer atrás */
.slot.fit{background:transparent; padding:clamp(18px,2.6vw,52px)}
.slot.fit > img{object-fit:contain}
/* A moldura tracejada de placeholder e o rótulo saíram: todas as imagens
   definitivas já estão no lugar. Eles dependiam de `:has()` para sumir quando
   a foto entrava, e em navegador sem suporte (Safari até 15.3, Chrome até 104)
   a moldura aparecia por cima da foto. */

/* ---------- cabeçalho ---------- */
/* rola junto com a página: não fica fixa no topo */
.nav{position:relative; z-index:80; background:var(--ink); border-bottom:1px solid transparent}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:74px; gap:24px}
.logo{display:flex; align-items:center; gap:13px; text-decoration:none; min-width:0}
.logo img{height:30px; width:auto}
.logo i{width:1px; height:20px; background:rgba(255,255,255,.24); flex:none}
.logo span{font-size:14.5px; font-weight:600; color:#fff; letter-spacing:-.02em; white-space:nowrap}
.links{display:none; align-items:center; gap:36px}
@media(min-width:1040px){ .links{display:flex} }
.links a{font-size:15px; font-weight:500; color:rgba(255,255,255,.62); text-decoration:none; transition:color .18s}
.links a:hover{color:#fff}
.nav .btn{padding:11px 20px; font-size:14.5px; border-radius:8px; background:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.nav .btn:hover{background:rgba(255,255,255,.09); transform:none}
@media(max-width:760px){ .logo i,.logo span{display:none} }

/* ============================ HERO ============================ */
/* padding-block:0 porque o hero controla o próprio espaçamento por dentro —
   sem isso ele herda o de `section` e sobra uma faixa preta embaixo */
.hero{position:relative; background:var(--ink); color:#fff; overflow:hidden; padding-block:0}
.hero h1{font-size:clamp(40px,5vw,84px); letter-spacing:-.042em; line-height:1.0}
.hero-grid{display:grid; grid-template-columns:1fr; align-items:stretch}
@media(min-width:1000px){ .hero-grid{grid-template-columns:1fr 1fr} }
.hero-txt{
  position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-start;
  /* sem navbar, o hero precisa do respiro que a barra dava */
  padding:clamp(44px,5vw,88px) var(--gut) clamp(44px,4.6vw,80px);
}
@media(min-width:1000px){ .hero-txt{padding-right:clamp(40px,4vw,72px)} }
.hero h1 span{color:var(--accent)}
.hero .p{margin-top:clamp(22px,2.4vw,30px); max-width:44ch; color:#AFB3BB}
.hero .p b{color:#fff; font-weight:600}
.hero-act{display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; margin-top:clamp(16px,1.8vw,24px)}

/* preço ao lado do botão — sem moldura, sem fita, sem selo. A presença vem do
   tamanho do número. */
.hero-price{display:grid; gap:2px}
.hero-price .tag{
  color:var(--accent); font-weight:600; font-size:12.5px; letter-spacing:.11em; text-transform:uppercase;
}
.hero-price .num{display:flex; align-items:baseline; gap:7px; line-height:1; margin-top:2px}
.hero-price .num i{font-style:normal; font-size:clamp(15px,1.3vw,18px); font-weight:600; color:#A2A6AE}
.hero-price .num b{font-size:clamp(32px,2.9vw,44px); font-weight:600; letter-spacing:-.045em}
.hero-price .num s{font-size:14.5px; color:#767B83; margin-left:4px}
.hero-price .note{font-size:14px; color:#A2A6AE; margin-top:3px}
/* IMG-01 — arte do hero, sangra até a borda direita */
.hero-art{position:relative; min-height:clamp(300px,54vw,720px)}
@media(min-width:1000px){ .hero-art{min-height:auto} }
/* Agora é uma foto com fundo, não um recorte: ela preenche a coluna inteira.
   O degradê da esquerda derrete a borda no preto, senão fica um corte reto
   no meio da tela. */
.hero-art::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--ink) 0%, rgba(10,10,11,.6) 13%, transparent 40%);
}
/* A foto é vertical. Em fluxo normal ela definia a altura da seção e esticava o
   hero. Absoluta, ela para de contar para a altura: quem manda é o texto, e a
   imagem preenche o que sobrar. Ancorada embaixo, o corte cai no topo e os
   papéis e as mãos ficam. */
.hero-art > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 100%}
/* A coluna cresceu com o bloco de preço e o `cover` passou a mostrar mais do
   topo da foto. O zoom ancorado embaixo devolve o enquadramento anterior. */
@media(min-width:1000px){
  .hero-art > img{transform:scale(1.12) translateY(5%); transform-origin:50% 100%}
}

/* No celular ela deixa de ser coluna e vira bloco próprio. Como a foto é
   vertical, o bloco também precisa ser — numa tira horizontal o `cover`
   descartaria quase tudo. */
@media(max-width:999px){
  /* Altura em `vw` puro, de propósito. A foto é `position:absolute` e não
     sustenta altura nenhuma, então quem segura a caixa em pé é esta linha —
     e ela não pode depender de `aspect-ratio`, `min()` nem `clamp()`, que são
     CSS recente. Se qualquer um deles faltar, a caixa colapsa para zero e a
     foto do hero some. `83vw` dá a mesma proporção 6/5 de antes. */
  .hero-art{min-height:0; height:83vw; max-height:420px}
  /* fade nas duas pontas: a foto emenda com o título em cima e com o
     subtítulo embaixo, sem corte reto */
  .hero-art::before{
    background:
      linear-gradient(180deg, var(--ink) 0%, rgba(10,10,11,.92) 9%, rgba(10,10,11,.5) 22%, transparent 46%),
      linear-gradient(0deg,   var(--ink) 0%, rgba(10,10,11,.94) 11%, rgba(10,10,11,.55) 25%, transparent 50%);
  }
  /* quanto mais perto de 100%, mais a foto sobe dentro do quadro */
  .hero-art > img{object-position:50% 97%}

  /* No celular a foto entra logo depois do título. `display:contents` dissolve
     a coluna de texto e joga eyebrow, h1, parágrafo e botões direto no grid,
     onde a ordem pode ser reorganizada em volta da imagem. */
  .hero-txt{display:contents}
  .hero-grid{padding-block:clamp(16px,4vw,28px) clamp(40px,8vw,76px)}
  .hero-txt > *{padding-inline:var(--gut)}
  .hero-txt > .eyebrow{order:1}
  .hero-txt > h1{order:2}
  .hero-art{order:3; margin-top:clamp(26px,6vw,38px)}
  /* margem negativa: o texto sobe por cima da faixa já escurecida pelo fade.
     z-index porque o degradê da foto é ::before e pintaria por cima. */
  .hero-txt > .p{order:4; position:relative; z-index:2; margin-top:clamp(-52px,-8vw,-22px)}
  .hero-txt > .hero-act{order:5; position:relative; z-index:2; margin-top:clamp(10px,2.4vw,16px)}
}
/* faixa de fatos, largura total */
.strip{border-top:1px solid rgba(255,255,255,.12); position:relative; z-index:2; background:var(--ink)}
/* Régua de três rótulos, sem ícone e sem frase de apoio. Antes eram três
   blocos altos que comiam meia tela do celular logo depois do hero; o mesmo
   corte serve no desktop, onde a faixa passa a ser uma linha de respiro entre
   o hero e o resto em vez de um terceiro bloco de conteúdo. */
.strip-in{display:grid; grid-template-columns:repeat(3,1fr)}
.strip-in div{
  padding:clamp(15px,1.7vw,26px) 8px;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.strip-in div + div{border-left:1px solid rgba(255,255,255,.09)}
.strip b{
  display:block; font-weight:600; line-height:1.25; letter-spacing:-.02em;
  font-size:clamp(11.5px,3.4vw,19px);
}

/* ============================ DUO (metade / metade sangrando) ============ */
.duo{display:grid; grid-template-columns:1fr; align-items:stretch}
@media(min-width:960px){ .duo{grid-template-columns:1fr 1fr} }
.duo-txt{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(52px,6vw,110px) var(--gut);
}
@media(min-width:960px){
  .duo-txt{padding-inline:clamp(40px,4.4vw,88px)}
  .duo > .duo-txt:first-child{padding-left:var(--gut)}
  .duo > .duo-txt:last-child{padding-right:var(--gut)}
}
.duo-img{min-height:clamp(280px,46vw,620px)}
/* Empilhado, a foto da executiva cai logo abaixo da banda do empresário: duas
   fotos grandes seguidas, meia tela cada, antes de a pessoa chegar ao que
   importa. Some no celular; no desktop as duas dividem a linha e não custam
   rolagem nenhuma. */
@media(max-width:959px){ #curso .duo-img{display:none} }
/* credenciais da Rose: 3 colunas no desktop, 1 no celular */
.creds{display:grid; grid-template-columns:1fr; gap:18px 28px; margin-top:clamp(26px,3vw,38px); padding-top:clamp(22px,2.6vw,30px); border-top:1px solid var(--line)}
@media(min-width:520px){ .creds{grid-template-columns:repeat(3,1fr); gap:20px} }
.creds b{display:block; font-size:clamp(21px,2vw,26px); font-weight:600; letter-spacing:-.03em; margin-bottom:2px}
.creds span{font-size:14.5px; color:var(--muted); line-height:1.35}
/* fade em cima, embaixo e na direita: a foto derrete no preto da seção em vez
   de terminar em corte reto. */
.duo-img.dk::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(10,10,11,.55) 9%, transparent 28%),
    linear-gradient(0deg,   var(--ink) 0%, rgba(10,10,11,.55) 9%, transparent 28%),
    linear-gradient(270deg, var(--ink) 0%, rgba(10,10,11,.6) 10%, transparent 34%);
}
/* recorte sem fundo: a seção clara aparece atrás e ela fica apoiada na base */
.rose{background:transparent}
.rose > img{object-fit:contain; object-position:50% 100%}
@media(min-width:960px){ .duo-img{min-height:auto} }

/* ============================ RUMINAÇÕES ============================
   Duas colunas: o título fica parado à esquerda enquanto as frases passam
   à direita. Deixa de ser uma lista empilhada e vira uma leitura. */
.rum{display:grid; grid-template-columns:1fr; gap:clamp(28px,3.4vw,48px)}
@media(min-width:1000px){
  .rum{grid-template-columns:.82fr 1.18fr; gap:clamp(48px,6vw,120px)}
  .rum-head{position:sticky; top:120px; align-self:start}
}
.said{display:grid}
.said div{
  padding:clamp(22px,2.6vw,38px) 0; border-top:1px solid var(--line);
  font-size:clamp(21px,2.3vw,34px); font-weight:500; letter-spacing:-.03em; line-height:1.3;
  color:var(--body);
}
.said div:first-child{border-top:0; padding-top:0}
@media(min-width:1000px){ .said div:first-child{padding-top:6px} }
.said div b{font-weight:600; color:var(--ink)}
.said .end{
  border-top:1px solid var(--line); padding-top:clamp(22px,2.6vw,34px);
  font-size:clamp(17px,1.5vw,20px); color:var(--muted); font-weight:400; letter-spacing:0; line-height:1.6;
}
.said .end b{color:var(--ink); font-weight:600}

/* ============================ BANDA LARGA (IMG-02) ============================
   A altura vem da própria imagem: ela aparece inteira, sem corte. */
.band{position:relative; background:var(--ink)}
.band > img{width:100%; height:auto; object-fit:unset}
/* fade embaixo: a foto derrete no preto em vez de terminar em corte reto */
.band::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, var(--ink) 0%, rgba(10,10,11,.6) 9%, transparent 28%);
}
/* a frase fica no topo da faixa; o véu desce de cima para baixo */
.band-txt{
  position:absolute; inset:0 0 auto 0; z-index:2;
  padding:clamp(32px,5vw,64px) var(--gut) clamp(48px,7vw,110px);
  background:linear-gradient(180deg, rgba(10,10,11,.92), rgba(10,10,11,.55) 52%, transparent);
  color:#fff;
}
/* No celular a imagem inteira vira uma tira baixa demais para caber texto por
   cima. Aí a frase desce para baixo dela, em vez de espremer. */
@media(max-width:760px){
  .band-txt{position:static; order:-1; background:var(--ink); padding-block:clamp(26px,6vw,40px)}
}
.band-txt p{font-size:clamp(21px,2.6vw,38px); font-weight:600; letter-spacing:-.035em; line-height:1.14; max-width:24ch}
.band-txt .sub{
  margin-top:clamp(14px,1.6vw,22px); font-size:clamp(16px,1.35vw,19px); font-weight:400;
  letter-spacing:0; line-height:1.6; color:#B0B4BC; max-width:38ch;
}
.band-txt .sub b{color:#fff; font-weight:600}

/* ============================ LISTA DE FERRAMENTAS ============================ */
/* Eram 13 linhas idênticas empilhadas: o olho percorria tudo com o mesmo peso
   e cansava antes do fim. Em cartões cada ferramenta vira uma unidade
   fechada, dá para bater o olho e parar só no que interessa.
   `minmax(240px,330px)` com `justify-content:center`: grupos de 2 e de 6 itens
   ficam centrados em vez de esticar o cartão ou deixar buraco na direita. */
/* Folhas de uma pasta física, todas abertas. Cheguei a montar isto com abas,
   mas numa página de venda esconder conteúdo atrás de clique trabalha contra:
   o que convence é ver o volume do que se leva. Então o recorte por categoria
   virou só linguagem visual — a divisória colorida saindo pela lateral. */
/* largura contida: esticada até 1520px, o nome ficava num canto da folha e o
   formato no outro, com um vazio no meio que o olho tinha de atravessar linha
   após linha. É o que cansava. */
.sheets{
  display:grid; gap:clamp(16px,1.8vw,26px); margin-top:clamp(26px,3vw,44px);
  text-align:left; max-width:1020px; margin-inline:auto; width:100%;
}
/* Cada folha puxa a cor da sua categoria: fundo tingido de leve, lombada
   colorida à esquerda e os ícones de pasta no mesmo tom. Todas brancas, o
   bloco lia como uma corrida só de 13 linhas; com cor, cada trecho tem
   começo e fim visíveis. O tingimento fica em 5% de propósito — o suficiente
   para separar, longe de comprometer a leitura do texto escuro. */
.sheet{
  position:relative; background:var(--tint,var(--bg));
  border:1px solid var(--line); border-left:5px solid var(--divi,#F38C23);
  border-radius:16px;
  padding:clamp(22px,2.4vw,34px) clamp(18px,2.2vw,40px);
  box-shadow:0 1px 2px rgba(10,10,11,.03), 0 14px 34px rgba(10,10,11,.045);
}
/* as divisórias internas escurecem junto com o fundo, senão somem */
.sheet .row{border-bottom-color:rgba(10,10,11,.09)}
/* a divisória sai para fora da folha, como a aba de papel de uma pasta.
   Some abaixo de 1080px: fora do desktop largo ela invadiria a margem. */
.divi{display:none}
@media(min-width:1080px){
  .divi{
    display:block; position:absolute; top:30px; right:-1px; transform:translateX(100%);
    writing-mode:vertical-rl; background:var(--divi,#F38C23); color:#141414;
    font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    padding:14px 11px; border-radius:0 10px 10px 0;
  }
  .divi.on-dark{color:#fff}
}
/* título da categoria entre duas linhas, como no cabeçalho da folha */
.sheet-t{
  display:flex; align-items:center; gap:16px; margin:0 0 6px;
  font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--divi,#F38C23);
}
.sheet-t::before,.sheet-t::after{content:''; flex:1; height:1px; background:var(--line)}
.sheet-t span{flex:none}

.sheets-cta{display:grid; justify-items:center; gap:14px; margin-top:clamp(30px,3.6vw,48px)}
.sheets-cta .note{margin:0}
@media(max-width:640px){ .sheets-cta .btn{width:100%} }

/* Emenda entre o CTA e os bônus. Depois de um botão de compra a pessoa lê a
   página como encerrada; isto avisa que ainda vem coisa. O movimento é curto e
   lento de propósito — o objetivo é ser notado de canto de olho, não competir
   com o botão que está logo acima. */
/* o padding de baixo da própria seção é zerado logo abaixo: sem isso a folga
   até o bloco de bônus era a soma dos dois e a seta ficava longe do que ela
   está apontando */
#conteudo{padding-bottom:0}
.more{
  display:grid; justify-items:center; gap:8px;
  padding:clamp(30px,3.8vw,50px) var(--gut) clamp(16px,2vw,26px);
  color:var(--accent);
}
.more span{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.more svg{width:26px; height:26px; animation:maisDesce 2.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes maisDesce{
  0%, 70%, 100% { transform:translateY(0);   opacity:.5 }
  35%           { transform:translateY(8px); opacity:1  }
}
/* quem pediu menos movimento no sistema recebe a seta parada, não sem seta */
@media(prefers-reduced-motion:reduce){ .more svg{animation:none; opacity:.85} }

/* empilhado: ícone na primeira coluna, o resto na segunda */
.row{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 13px;
  padding:clamp(14px,1.4vw,17px) 0; border-bottom:1px solid var(--line);
}
.row h4, .row p, .row em{grid-column:2}
.row svg{grid-row:1 / span 3}
/* Nome, descrição e formato em colunas, cada ferramenta numa linha só. Antes o
   nome e a descrição empilhavam e cada item ocupava duas alturas — o dobro de
   rolagem para a mesma informação. */
@media(min-width:820px){
  .row{grid-template-columns:auto 208px minmax(0,1fr) 148px; gap:20px; align-items:baseline}
  .row svg{grid-row:auto; align-self:center}
  .row h4{grid-column:2}
  .row p{grid-column:3}
  .row em{grid-column:4; text-align:right}
}
.sheet .row:last-child{border-bottom:0}
.row svg{width:21px; height:21px; color:var(--divi,var(--accent)); margin-top:1px}
.row h4{margin:0 0 3px; font-size:clamp(16.5px,1.35vw,18.5px); font-weight:600; letter-spacing:-.024em; line-height:1.25}
.row p{margin:0; font-size:15.5px; color:var(--body); line-height:1.5}
.row em{
  font-style:normal; font-size:11.5px; font-weight:600; color:var(--muted);
  letter-spacing:.07em; text-transform:uppercase;
}
.row em.x{color:var(--ok)}
@media(max-width:759px){ .row em{grid-column:2; margin-top:5px} }

/* ============================ BÔNUS ============================ */
/* A faixa do rodapé das capas é exatamente #0A0A0B, a mesma cor de `--ink`:
   sobre o fundo padrão da seção escura ela sumia e cada capa parecia cortada
   ao meio, com o nome flutuando solto. Aqui o fundo sobe alguns pontos para a
   capa inteira ter contorno. */
.bonus-bg{background:#15161A}
/* "bônus" em laranja com um traço por baixo. É `::after` posicionado abaixo da
   linha de base, não `text-decoration`: assim o traço tem espessura e canto
   próprios e não encosta no circunflexo. Nada de `z-index:-1` — isso jogaria
   o traço para trás do próprio fundo da seção e ele sumiria. */
/* Ícone da seção, no lugar do rótulo de texto que saiu daqui. O `width` e o
   `height` no HTML reservam o espaço enquanto o PNG carrega, senão o título
   pula quando ele chega. */
.gift{
  display:block; margin:0 auto clamp(14px,1.6vw,22px);
  width:clamp(82px,10vw,132px); height:auto;
  /* o brilho vive no filtro, junto com a sombra: assim ele acompanha o
     recorte da caixa em vez de virar um halo retangular */
  animation:giftFlutua 3.6s ease-in-out infinite;
}
@keyframes giftFlutua{
  0%,100%{
    transform:translateY(0) rotate(0deg);
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)) drop-shadow(0 0 0 rgba(243,140,35,0));
  }
  30%{
    transform:translateY(-6px) rotate(-2deg);
    filter:drop-shadow(0 14px 20px rgba(0,0,0,.3)) drop-shadow(0 0 14px rgba(243,140,35,.5));
  }
  60%{
    transform:translateY(-2px) rotate(1.5deg);
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.32)) drop-shadow(0 0 6px rgba(243,140,35,.22));
  }
}
@media(prefers-reduced-motion:reduce){
  .gift{animation:none; filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
}
.hl{position:relative; color:var(--accent); white-space:nowrap}
.hl::after{
  content:''; position:absolute; left:0; right:0; bottom:-.09em; height:.075em;
  background:var(--accent); opacity:.5; border-radius:3px;
}
.bpack{margin-top:clamp(30px,3.6vw,52px)}
.bpack + .bpack{
  margin-top:clamp(34px,4vw,60px);
  padding-top:clamp(34px,4vw,60px);
  border-top:1px solid rgba(255,255,255,.1);
}
/* nome e selo na mesma linha quando cabem; no estreito o selo desce sozinho */
.bpack-hd{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px}
.bpack-hd h3{margin:0; font-size:clamp(21px,2.1vw,29px); letter-spacing:-.032em}
.bprice{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(30,122,87,.18); color:#5FD3A4; border:1px solid rgba(95,211,164,.28);
  padding:7px 14px; border-radius:100px;
}
.bprice s{color:#8D9299; font-weight:500; letter-spacing:0; text-transform:none}
.bdesc{
  margin:clamp(12px,1.3vw,16px) auto 0; max-width:52ch;
  font-size:clamp(15.5px,1.4vw,17px); color:#AEB2BA; line-height:1.6;
}

/* Flex e não grid: com colunas de grade fixas, a pasta de 5 capas ocupava as
   5 primeiras de 9 e ficava encostada na esquerda. No flex a linha tem só a
   largura das capas que existem, e `justify-content` centra de verdade.
   A largura da capa é fixa para ela não esticar e virar cartaz. */
/* a largura máxima segura 5 capas por linha: sem ela as 9 do segundo bônus
   entravam quase todas numa fileira só e sobrava uma solta embaixo */
.bonus-grid{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(10px,1.1vw,16px); margin:clamp(20px,2.2vw,30px) auto 0;
  max-width:790px;
}
/* as próprias <img> são os itens flex, então a largura vem daqui. Nada de
   `width:100%` no img: isso valeria 100% da linha inteira. */
.bonus-grid > *{flex:0 0 auto; width:clamp(92px,27vw,138px)}
.bonus-grid img{display:block; height:auto}
/* espaço da capa que ainda falta. `min-height` além do `aspect-ratio` porque
   numa linha só de vazios não há imagem que segure a altura — e em navegador
   antigo o aspect-ratio nem existe. */
.bonus-soon{
  display:grid; place-items:center; text-align:center; padding:10px;
  aspect-ratio:360/654; min-height:clamp(165px,49vw,250px);
  border:1px dashed rgba(255,255,255,.2); border-radius:12px;
  font-size:11.5px; font-weight:600; letter-spacing:.05em;
  color:#7C818A; line-height:1.35;
}
/* ============================ PASSOS ============================ */
.steps{display:grid; gap:0; grid-template-columns:1fr; margin-top:clamp(30px,3.4vw,48px); border-top:1px solid var(--line)}
@media(min-width:880px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{padding:clamp(28px,3vw,44px) 0; border-bottom:1px solid var(--line)}
@media(min-width:880px){
  .step{padding:clamp(30px,3vw,46px) clamp(28px,2.6vw,44px); border-bottom:0; border-left:1px solid var(--line)}
  .step:first-child{padding-left:0; border-left:0}
  .step:last-child{padding-right:0}
}
.step b{display:block; font-size:clamp(42px,4.2vw,58px); font-weight:600; letter-spacing:-.05em; line-height:1; color:var(--line-2); margin-bottom:14px}
.step h3{font-size:21px; letter-spacing:-.03em; margin-bottom:8px}
.step p{font-size:16.8px; color:var(--body); line-height:1.6; max-width:36ch}

/* ============================ DEPOIMENTOS ============================ */
.quotes{display:grid; gap:clamp(30px,3.2vw,56px); grid-template-columns:1fr; margin-top:clamp(30px,3.4vw,48px)}
@media(min-width:900px){ .quotes{grid-template-columns:repeat(3,1fr)} }
.quote{display:flex; flex-direction:column}
.quote p{font-size:clamp(18px,1.6vw,22px); letter-spacing:-.024em; line-height:1.45; font-weight:500; margin-bottom:20px}
.quote footer{margin-top:auto; font-size:15px; color:var(--muted); padding-top:16px; border-top:1px solid var(--line)}
.quote footer b{display:block; color:var(--ink); font-weight:600; margin-bottom:2px}
.tbd{color:var(--muted); font-weight:400; font-style:italic}

/* ============================ OFERTA ============================ */
/* oferta: foto de um lado, preço do outro */
/* o par imagem + preço não usa a largura toda do wrap: encostado nas bordas
   ele se espalha demais e o olho tem de atravessar a tela entre a arte e o
   botão. Preso a 1120px e centrado, os dois ficam no mesmo campo de visão. */
.offer-duo{display:grid; grid-template-columns:1fr; gap:clamp(30px,3.6vw,60px); align-items:center; margin-top:clamp(30px,3.4vw,48px); max-width:1120px; margin-inline:auto; width:100%}
/* a foto ganha mais espaço que o preço: ela é o que prova o produto.
   O tamanho vem da coluna, não de `scale` — ampliar por transform jogaria a
   imagem para fora do bloco e o degradê cairia no meio das folhas. */
@media(min-width:920px){ .offer-duo{grid-template-columns:1.12fr .88fr; gap:clamp(20px,2.2vw,40px)} }
/* PNG recortado: nada de fundo nem de canto arredondado, senão aparece a
   moldura do bloco atrás da transparência */
.offer-art.slot{position:relative; aspect-ratio:11/10; border-radius:0; background:transparent; overflow:visible}
/* sobe um pouco a arte para ela não encostar no cartão de preço */
.offer-art > img{object-fit:contain; width:100%; height:100%; transform:translateY(-4%)}
/* O mockup é uma composição fechada: a caixa termina numa base reta e as capas
   já vêm inteiras. Sem máscara de fade aqui — ela comeria o pé da caixa e a
   ponta das capas. O recorte em alpha já funde a arte com o fundo escuro. */
/* Empilhado, o quadro tem quase a mesma proporção da arte (1,1 contra 1,091),
   então `contain` deixa menos de 2px de folga lateral e a caixa encosta na
   borda da tela. Estreitar o quadro devolve o respiro. */
@media(max-width:919px){
  .offer-art.slot{width:92%; margin-inline:auto}
  .offer-art > img{transform:translate(1.2%,-2%)}
}
/* min-width:0 nas colunas: por padrão um item de grid não encolhe abaixo do
   próprio min-content, e basta um filho pedir largura para a coluna inteira
   passar da tela */
.offer-duo > *{min-width:0}
.offer-side{display:grid; gap:clamp(24px,2.6vw,34px); justify-items:center; min-width:0}
.offer{display:grid; grid-template-columns:1fr; align-items:stretch}
@media(min-width:1000px){ .offer{grid-template-columns:1.05fr .95fr} }
.offer-txt{display:flex; flex-direction:column; justify-content:center; padding:clamp(52px,6vw,112px) var(--gut)}
@media(min-width:1000px){ .offer-txt{padding-right:clamp(40px,4vw,80px)} }
.inc{list-style:none; margin:clamp(24px,2.6vw,34px) 0 0; padding:0; display:grid; gap:13px}
.inc li{display:flex; gap:13px; font-size:17px; color:#AEB2BA; line-height:1.5; text-align:left}
.mid .inc{justify-items:start; max-width:34ch; margin-inline:auto}
.inc svg{width:17px; height:17px; flex:none; margin-top:4px; color:var(--accent)}
.inc b{color:#fff; font-weight:600}
.offer-buy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(44px,5vw,96px) var(--gut); background:#0F1013;
  border-top:1px solid rgba(255,255,255,.1);
}
@media(min-width:1000px){ .offer-buy{border-top:0; border-left:1px solid rgba(255,255,255,.1); padding-left:clamp(40px,4vw,80px)} }
/* cartão de preço: moldura hairline, valor grande e o resto discreto em volta */
.price{
  display:grid; gap:16px; justify-items:center; text-align:center;
  max-width:420px; margin-inline:auto; width:100%;
  padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,32px);
  border:1px solid rgba(255,255,255,.14); border-radius:20px;
  background:rgba(255,255,255,.035);
}
.price .was{
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#7C8089; border:1px solid rgba(255,255,255,.13); padding:6px 13px; border-radius:100px;
}
.price .per{padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.12); width:100%}
.price .was{font-size:14.5px; color:#7C8089}
.price .amt{display:flex; align-items:flex-start; gap:7px; line-height:.9}
.price .amt i{font-style:normal; font-size:clamp(21px,1.9vw,28px); font-weight:500; margin-top:.32em; color:#A2A6AE}
.price .amt b{font-size:clamp(64px,7vw,108px); font-weight:600; letter-spacing:-.05em}
.price .per{font-size:16px; color:#A2A6AE; margin-top:-4px}
.price .per b{color:#fff; font-weight:600}
.price .btn{width:100%}
.brands{display:flex; flex-wrap:wrap; gap:5px 8px; align-items:center}
.brands img{height:24px; width:auto; opacity:.9}
.brands img.h{height:13px}
.brands i{width:1px; height:14px; background:rgba(255,255,255,.2)}

.warranty{display:grid; gap:18px; grid-template-columns:1fr; margin-top:clamp(28px,3vw,40px); padding-top:clamp(26px,3vw,34px); border-top:1px solid var(--line)}
/* garantia centralizada: ícone em cima, texto embaixo, tudo no eixo */
.warranty{justify-items:center; text-align:center}
.warranty p{margin-inline:auto}
.warranty svg{margin-top:0}
.warranty svg{width:32px; height:32px; color:var(--accent); flex:none; margin-top:2px}
.warranty h3{font-size:clamp(20px,2vw,26px); letter-spacing:-.03em; margin-bottom:8px}
.warranty p{font-size:16.8px; color:var(--body); line-height:1.6; max-width:58ch}

/* ============================ SERVE / NÃO SERVE ============================ */
.fit{display:grid; gap:clamp(30px,3.4vw,64px); grid-template-columns:1fr; margin-top:clamp(30px,3.4vw,48px)}
@media(min-width:880px){ .fit{grid-template-columns:1fr 1fr} }
.col{border:1px solid var(--line); border-radius:18px; padding:clamp(24px,2.6vw,36px); background:var(--bg)}
.col.b{background:transparent}
.col h3{
  display:inline-flex; align-items:center; gap:9px; margin:0 auto 14px;
  font-size:12.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  padding:8px 15px; border-radius:100px;
}
.col.a h3{background:#E7F4EE; border:1px solid #C9E5D8}
.col.b h3{background:#FBEBE9; border:1px solid #F2D3CE}
.col ul{list-style:none; margin:0; padding:0}
.col li{display:flex; gap:13px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16.5px; line-height:1.5; text-align:left}
.col li:last-child{border-bottom:0}
.col li i{font-style:normal; flex:none; font-size:15px}
.col.a h3,.col.a li i{color:var(--ok)}
.col.b h3,.col.b li i{color:var(--no)}
.col.b li{color:var(--body)}

/* ============================ FAQ ============================ */
.faq{margin-top:clamp(26px,3vw,40px); border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{
  list-style:none; cursor:pointer; position:relative; padding:clamp(20px,2.2vw,26px) 48px clamp(20px,2.2vw,26px) 0;
  font-size:clamp(18px,1.7vw,23px); font-weight:600; letter-spacing:-.028em; line-height:1.3;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after,.q summary::before{
  content:''; position:absolute; right:10px; top:calc(50% - 1px); width:14px; height:2px; background:var(--muted);
}
.q summary::before{transform:rotate(90deg); transition:transform .22s ease, opacity .22s ease}
.q[open] summary::before{transform:rotate(0); opacity:0}
.q .a{padding:0 48px 26px 0; font-size:17px; color:var(--body); line-height:1.68; max-width:70ch}
.q .a p + p{margin-top:11px}
.q .a b{color:var(--ink); font-weight:600}

/* ============================ FECHO DA PÁGINA ============================ */
/* PNG recortado, sem moldura nem fundo: a transparência já encaixa a arte na
   cor da seção. Largura contida para ela não virar uma faixa esticada em
   monitor grande. */
.final-art{margin:clamp(34px,4.4vw,60px) auto 0; max-width:920px; width:100%}
.final-art img{display:block; width:100%; height:auto}
@media(max-width:640px){ .final-art{margin-top:clamp(28px,7vw,40px)} }

/* ============================ RODAPÉ ============================ */
.foot{background:var(--ink); color:#8E9299; padding-block:clamp(48px,5.5vw,80px) 34px; font-size:15.5px}
/* coluna única e centrada: os links do rodapé saíram, e a grade de duas
   colunas deixava o texto encostado na esquerda */
.foot-top{display:grid; gap:34px; grid-template-columns:1fr; justify-items:center; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.1)}
.foot .logo{margin-bottom:16px}
.foot p{line-height:1.6; max-width:52ch}
.foot nav{display:grid; gap:11px; align-content:start}
.foot nav a{color:#B0B4BB; text-decoration:none}
.foot nav a:hover{color:var(--accent)}
.seals{display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding-top:26px}
.seals img{height:26px; width:auto; opacity:.5; filter:grayscale(1) brightness(2.4)}
.seals img.h{height:16px}
.legal{margin-top:24px; font-size:13.8px; line-height:1.7; color:#797D84; display:grid; gap:12px}
.legal b{color:#8E9299; font-weight:600}

/* ============================ ENTRADA ============================ */
/* ============================================================================
   AJUSTES DE CELULAR
   A maior parte do tráfego é mobile. Aqui só o que precisa mudar de verdade:
   respiro menor, alvos de toque maiores e nada de texto espremido.
   ========================================================================== */
@media(max-width:640px){
  section{padding-block:clamp(48px,11vw,72px)}
  .t1{font-size:clamp(36px,9.2vw,52px); line-height:1.03}
  .t2{font-size:clamp(28px,7.6vw,40px); line-height:1.08}
  .p{font-size:17px}

  /* botão ocupa a linha toda: alvo de toque confortável e fim de linha previsível */
  .btn-lg{width:100%; padding-inline:20px}
  .hero-act{width:100%}
  .price .btn{width:100%}

  /* No celular o botão vai de ponta a ponta: se o selo transbordar para a
     direita, ele é cortado pela borda da tela. Fica todo dentro do quadro. */
  .btn-box .cx{width:34px; height:34px; padding:7px; right:12px; transform:translate(0,-45%)}
  @keyframes cxIdle{
    0%,26%,100%{ transform:translate(0,-45%) rotate(0deg) scale(1) }
    5%  { transform:translate(0,-45%) rotate(-3.5deg) scale(1.06) }
    10% { transform:translate(0,-45%) rotate(2.5deg)  scale(1.03) }
    15% { transform:translate(0,-45%) rotate(-2deg)   scale(1.05) }
  }

  /* linhas da lista: nome, descrição e formato empilham com respiro */

  /* nada de rolagem lateral por causa de tabela de preço ou selos */
  .brands{gap:6px}
  .brands img{height:21px}
  .creds{gap:14px}
  .warranty svg{width:28px; height:28px}

  /* FAQ: alvo de toque maior no resumo */
  .q summary{padding-block:20px}

  /* ---- tudo centralizado no celular ----
     Na coluna estreita as linhas já são curtas, então o texto centralizado
     não obriga o olho a caçar o começo da linha como no desktop. */
  .hero-txt, .hero-txt > *{text-align:center}
  .hero h1, .hero .p{margin-inline:auto}
  .hero-act{justify-content:center}
  .hero-price{justify-items:center}
  .hero-price .num{justify-content:center}

  /* "O que fica voltando" e o fecho "Nenhuma dessas é urgente..." */
  .rum-head{text-align:center}
  .rum-head h2{margin-inline:auto}
  .said div{text-align:center}
  .said .end{text-align:center; margin-inline:auto}

  .duo-txt{text-align:center; align-items:center}
  .duo-txt .p, .duo-txt h2{margin-inline:auto}
  /* a lista inteira vira um bloco centrado, mas as três linhas continuam
     alinhadas entre si — centralizar item a item deixaria cada visto num
     ponto diferente e a coluna sairia torta */
  /* `fit-content`, não `max-content`: max-content pede a largura da frase
     inteira sem quebra e, num grid `1fr` (que tem min-width:auto), a coluna
     obedece e estoura a tela. fit-content para no espaço disponível. */
  .inc{width:fit-content; max-width:100%; margin-inline:auto; min-width:0}
  .inc li{text-align:left}
  .creds{text-align:center}

  .grp-t{justify-content:center}

  /* "Leia antes de comprar": rótulo centrado e a lista como bloco centrado,
     para os ✓ e ✕ ficarem numa coluna só em vez de dançar linha a linha */
  .col{text-align:center}
  .col h3{margin-inline:auto}
  .mid .col li, .col li{justify-content:center; text-align:center}
  .col li i{flex:none}

  .band-txt{text-align:center}
  .band-txt p, .band-txt .sub{margin-inline:auto}

  .q summary{padding-right:36px; text-align:center}
  .q summary::after,.q summary::before{right:2px}
  .q .a{padding-right:0; text-align:center; margin-inline:auto}

  .foot p, .legal p{margin-inline:auto}
  .seals{justify-content:center}

  /* ---- Rose no celular: título, foto, depois o texto ----
     display:contents dissolve a coluna para que a foto possa entrar no meio
     dela; por isso o respiro lateral volta item a item nos filhos. */
  #rose .duo-txt{display:contents}
  #rose .duo-txt > *{padding-inline:var(--gut)}
  #rose .duo-txt > .eyebrow{order:1; padding-top:clamp(52px,11vw,72px)}
  #rose .duo-txt > h2{order:2; margin-bottom:0}
  /* a foto é 3:4 em pé. Num quadro deitado ela era cortada na altura do peito;
     em 4:5 cabe da cabeça à cintura, e o recorte sobra só nos pés. */
  #rose .duo-img{order:3; margin-block:clamp(24px,6vw,34px); min-height:0; aspect-ratio:4/5}
  #rose .duo-img > img{object-position:50% 12%}
  #rose .duo-txt > .p{order:4}
  #rose .duo-txt > .p + .p{margin-top:16px}
  #rose .duo-txt > .creds{order:5; margin-bottom:clamp(52px,11vw,72px)}
}
/* telas bem estreitas (iPhone SE e similares) */
@media(max-width:380px){
  .t1{font-size:33px}
  .price .amt b{font-size:48px}
}

.anim .rv{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1)}
.anim .rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .anim .rv{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

/* ---------- barra fixa de compra ---------- */
/* Escondida enquanto o topo está na tela; o script põe .on quando ele sai.
   Some com visibility além do deslocamento para o botão não receber foco
   de teclado enquanto está fora da tela. */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:12px var(--gut) calc(14px + env(safe-area-inset-bottom));
  background:rgba(10,10,11,.92); border-top:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transform:translateY(100%); visibility:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1), visibility 0s linear .35s;
}
.buybar.on{transform:none; visibility:visible; transition:transform .35s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){ .buybar,.buybar.on{transition:none} }
.buybar .btn{width:min(100%,460px)}
/* preço de/por acima do botão, no mesmo selo da oferta */
.buybar .was{
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#7C8089; border:1px solid rgba(255,255,255,.13); padding:5px 13px; border-radius:100px;
}
/* com a barra na tela, o rodapé ganha a altura dela embaixo para o fim da
   página não ficar escondido atrás do botão */
.com-barra .foot{padding-bottom:calc(34px + 150px + env(safe-area-inset-bottom))}