/* ============================================================
   Stoned Ape — capa para BIC Mini
   Paleta tirada do próprio objeto: preto fosco do PLA, osso,
   e o vermelho do isqueiro como único acento.
   ============================================================ */

:root{
  /* superfícies escuras — pretos quentes, não azulados */
  --void:      #0B0A09;
  --carbon:    #131110;
  --carbon-2:  #1B1714;
  --line:      rgba(237,231,220,.13);
  --line-2:    rgba(237,231,220,.07);

  /* tinta */
  --bone:      #EDE7DC;
  --ash:       #968D80;

  /* acento: o vermelho do BIC */
  --ember:       #E33A21;
  --ember-deep:  #C22E17;  /* fundo de botão, texto branco passa em AA */
  --ember-lite:  #FF6A47;  /* texto pequeno sobre escuro */
  --flame:       #F7A93C;

  /* folha de desenho */
  --sheet:     #E5E0D4;
  --ink:       #16130F;
  --ink-soft:  #5C564B;
  --line-ink:  rgba(22,19,15,.16);

  --wrap: 1240px;
  --pad:  clamp(1.25rem, 4vw, 3rem);
  --hdr-h: 76px;

  --f-display: "Archivo", system-ui, sans-serif;
  --f-body:    "IBM Plex Sans", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--hdr-h) + 24px); }

body{
  margin:0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; height:auto; display:block; }

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

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

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

/* visível só para leitores de tela */
.sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path: inset(50%); white-space:nowrap; border:0;
}

/* ── blocos de texto compartilhados ───────────────────────── */

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

.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-family: var(--f-mono);
  font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color: var(--ember-lite);
  margin:0 0 1.4rem;
}
/* marca diagonal: a mesma textura de pegada da peça */
.eyebrow::before{
  content:""; flex:none; width:22px; height:11px;
  background: repeating-linear-gradient(115deg,
    currentColor 0 1.5px, transparent 1.5px 5px);
}
.eyebrow--dark{ color: var(--ember-deep); }

.head{ max-width: 46ch; margin-bottom: clamp(2.5rem,5vw,4rem); }
.head__h{
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight:800; font-stretch:108%;
  line-height:.98; letter-spacing:-.025em;
  margin:0;
}
.head__p{
  margin:1.5rem 0 0; max-width:52ch;
  color: var(--ash); font-size:1.0625rem;
}

.section{ padding: clamp(5rem, 10vw, 8.5rem) 0; position:relative; }
.section--dark{ background: var(--void); }
.section--sheet{ background: var(--sheet); color: var(--ink); }

/* faixa de textura no topo da folha — a diagonal “dá a volta” na seção */
.section--sheet::before{
  content:""; position:absolute; inset:0 0 auto; height:12px;
  background: repeating-linear-gradient(115deg,
    rgba(22,19,15,.42) 0 1.5px, transparent 1.5px 6px);
}
/* trama larga e discreta no fundo escuro */
.section--hatch::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(115deg,
    rgba(237,231,220,.028) 0 1px, transparent 1px 9px);
}
.section--hatch > .wrap{ position:relative; z-index:1; }

/* ── botões ───────────────────────────────────────────────── */

.btn{
  --bh: 3.15rem;
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--bh); padding-inline:1.6rem;
  font-family: var(--f-mono); font-size:.8rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  border:1px solid transparent; border-radius:2px;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn--sm{ --bh: 2.5rem; padding-inline:1.15rem; font-size:.72rem; }
.btn--lg{ --bh: 3.6rem; padding-inline:2.1rem; }

.btn--ember{ background: var(--ember-deep); color:#fff; }
.btn--ember:hover{ background: var(--ember); }

.btn--ghost{ background:transparent; color: var(--bone); border-color: rgba(237,231,220,.28); }
.btn--ghost:hover{ border-color: var(--bone); background: rgba(237,231,220,.06); }

/* ============================================================
   HEADER + trilha de scroll (o mascote caminha, a fumaça sobe)
   ============================================================ */

.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
  height: var(--hdr-h);
  background: rgba(11,10,9,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.hdr__inner{
  position:relative; z-index:2;
  height: var(--hdr-h);
  max-width: var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:2rem;
}
.hdr__brand{ display:flex; align-items:center; gap:1rem; }
.hdr__logo{ flex:none; line-height:0; }
.hdr__logo img{ width:118px; }
.hdr__mascot{ flex:none; width:88px; height:auto; line-height:0; opacity:.88; }

.hdr__nav{ display:flex; gap:1.9rem; margin-left:auto; }
.hdr__nav a{
  position:relative;
  font-family: var(--f-mono); font-size:.76rem; font-weight:400;
  letter-spacing:.07em; color: var(--ash); text-decoration:none;
  transition: color .2s var(--ease);
}
.hdr__nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px;
  background: var(--ember); transition: right .28s var(--ease);
}
.hdr__nav a:hover{ color: var(--bone); }
.hdr__nav a:hover::after{ right:0; }

.hdr__cta{ flex:none; }

.hdr__burger{
  display:none; flex:none; margin-left:auto;
  width:42px; height:42px; padding:0;
  background:none; border:1px solid var(--line); border-radius:2px;
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hdr__burger span{ display:block; width:17px; height:1.5px; background: var(--bone); transition: transform .25s var(--ease), opacity .25s; }
.hdr__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(3.25px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2){ transform: translateY(-3.25px) rotate(-45deg); }

/* trilha */
.track{
  position:absolute; inset:0; z-index:1;
  pointer-events:none; overflow:hidden;
}
.track__smoke{ position:absolute; inset:0; width:100%; height:100%;left:20px; }
.track__line{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--line-2);
}
.track__fill{
  display:block; height:100%; width:0;
  background: linear-gradient(90deg, var(--ember-deep), var(--ember), var(--flame));
}
.track__ape{
  position:absolute; bottom:1px; left:0;
  width:auto; height:26px;
  transform: translateX(-50%);
  opacity:.9;
  will-change: transform;
}

/* menu mobile */
.mobmenu{
  position:fixed; inset: var(--hdr-h) 0 auto; z-index:99;
  background: rgba(11,10,9,.97);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
  padding: 1rem var(--pad) 2rem;
  display:flex; flex-direction:column;
}
.mobmenu[hidden]{ display:none; }
.mobmenu a{
  padding:.95rem 0; border-bottom:1px solid var(--line-2);
  font-family:var(--f-mono); font-size:.9rem; letter-spacing:.06em;
  color:var(--bone); text-decoration:none;
}
.mobmenu__cta{ color: var(--ember-lite) !important; border-bottom:none !important; }

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  min-height: 100svh;
  padding: calc(var(--hdr-h) + clamp(3rem,7vw,6rem)) 0 clamp(4rem,7vw,6rem);
  display:flex; align-items:center;
  overflow:hidden;
  background:
    radial-gradient(96% 74% at 76% 40%, #1C1613 0%, transparent 60%),
    radial-gradient(64% 56% at 26% 82%, #191512 0%, transparent 66%),
    var(--void);
}

/* o braço entra pela esquerda e alcança o produto.
   pelo fosco do fundo, precisa de bastante ganho para aparecer. */
.hero__arm{
  position:absolute; z-index:1;
  left:-16%; top:10%;
  width:min(112vw, 1600px); max-width:none;
  transform: rotate(-20deg);
  transform-origin: 50% 50%;
  pointer-events:none;
  filter: brightness(1.75) contrast(1.02) saturate(1.18);
}


.hero__grid{
  position:relative; z-index:3;
  display:grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
  gap: clamp(2rem,5vw,4.5rem); align-items:center;
}

.hero__copy{ position:relative; }
/* apaga o braço atrás do texto sem escondê-lo */
.hero__copy::before{
  content:""; position:absolute; z-index:-1;
  inset:-18% -22% -18% -40%;
  background: radial-gradient(62% 58% at 42% 50%, rgba(11,10,9,.94) 0%, rgba(11,10,9,.72) 45%, transparent 78%);
}

.hero__h1{
  font-family: var(--f-display);
  font-size: clamp(2.9rem, 6.3vw, 5.7rem);
  font-weight:900; font-stretch:112%;
  line-height:.87; letter-spacing:-.035em;
  margin:0 0 1.6rem;
  text-wrap: balance;
}
.hero__h1 em{ font-style:normal; color: var(--ember-lite); }

.hero__sub{
  margin:0 0 2.3rem; max-width:44ch;
  color: var(--ash); font-size:clamp(1rem,1.25vw,1.13rem);
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:3rem; }

.hero__facts{
  display:flex; flex-wrap:wrap; gap:0; margin:0; padding:0; list-style:none;
  border-top:1px solid var(--line);
}
.hero__facts li{
  padding:1rem 1.6rem 0 0; margin-right:1.6rem;
  border-right:1px solid var(--line);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.05em;
  color: var(--ash); text-transform:uppercase;
}
.hero__facts li:last-child{ border-right:none; margin-right:0; padding-right:0; }
.hero__facts span{ display:block; color:var(--bone); font-size:1.02rem; letter-spacing:0; margin-bottom:.15rem; }

/* palco do produto */
.hero__stage{
  position:relative; display:flex; justify-content:center;
  transform: translate(var(--px,0), var(--py,0));
}


/* a chama do próprio produto ilumina os dedos que o alcançam.
   fora do palco, para o blend alcançar o braço atrás. */
.hero__glow{
  position:absolute; z-index:2; pointer-events:none;
  right:6%; top:16%; width:min(40vw, 500px); height:60%;
  background: radial-gradient(closest-side,
    rgba(247,169,60,.30) 0%,
    rgba(227,58,33,.17) 40%,
    rgba(227,58,33,0) 74%);
  mix-blend-mode: screen;
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.8; transform:scale(1); } 50%{ opacity:1; transform:scale(1.06); } }

/* largura casada com o produto para as cotas baterem nas bordas */
.hero__float{
  position:relative;
  width: clamp(280px, 76%, 380px);
  animation: float 7s ease-in-out infinite;
  will-change: transform;
  margin-inline: auto;
}

/* no mobile, produto ocupa até 90% da largura, centrali zado */
@media (max-width: 560px) {
  .hero__float{ width: min(340px, 90%); }
}

/* tablet media query */
@media (max-width: 1040px) and (min-width: 560px) {
  /* tablet: mantém layout 2 colunas como desktop, com texto acima do braço */
  .hero__grid{ grid-template-columns: 1.02fr .98fr; gap: 2rem; }
  .hero__stage{ order:0; }
  .hero__float{ width: min(380px, 85%); }
  .hero__arm{ left:-14%; top:18%; width:min(100vw, 1000px); opacity:.75; }
  .dim{ display:block; }
  .dim--v{ top:5%; right:1%; height:90%; }
  .dim--h{ left:18%; right:18%; bottom:-7%; }
}
@keyframes float{ 0%,100%{ transform: translateY(-9px); } 50%{ transform: translateY(9px); } }

.hero__product{
  width:100%;
  filter: drop-shadow(0 42px 60px rgba(0,0,0,.72))
          drop-shadow(0 0 44px rgba(227,58,33,.20));
}

/* cotas técnicas */
.dim{
  position:absolute; opacity:0;
  animation: dimIn .7s var(--ease) forwards;
  font-family: var(--f-mono); font-size:.66rem; letter-spacing:.08em;
  color: var(--ember-lite);
}
.dim i{ display:block; background: rgba(237,231,220,.3); }
.dim b{ font-weight:500; display:block; }
@keyframes dimIn{ to{ opacity:1; } }

.dim--v{ top:5%; right:1%; height:90%; animation-delay:1.1s; display:flex; align-items:center; gap:.45rem; }
.dim--v i{ width:1px; height:100%; }
.dim--v b{ writing-mode: vertical-rl; }

.dim--h{ left:18%; right:18%; bottom:-7%; animation-delay:1.35s; text-align:center; }
.dim--h i{ width:100%; height:1px; margin-bottom:.45rem; }

.hero__scroll{
  position:absolute; z-index:3; left:50%; bottom:1.6rem; transform:translateX(-50%);
  margin:0; font-family:var(--f-mono); font-size:.64rem;
  letter-spacing:.3em; text-transform:uppercase; color: var(--ash);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0); opacity:.5; } 50%{ transform:translate(-50%,7px); opacity:1; } }

/* ============================================================
   BENEFÍCIOS
   ============================================================ */

.benefits{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.ben{ padding: clamp(2rem,3.4vw,3rem) clamp(1.5rem,2.6vw,2.6rem); border-right:1px solid var(--line); }
.ben:first-child{ padding-left:0; }
.ben:last-child{ border-right:none; padding-right:0; }

.ben__tag{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--ember-lite); margin:0 0 1.5rem;
}
.ben__h{
  font-family:var(--f-display); font-size:clamp(1.3rem,2vw,1.7rem);
  font-weight:700; font-stretch:104%; line-height:1.1; letter-spacing:-.02em;
  margin:0 0 .9rem;
}
.ben__p{ margin:0; color: var(--ash); font-size:.99rem; }

/* ============================================================
   FICHA TÉCNICA
   ============================================================ */

.spec{
  margin:0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: clamp(2rem,5vw,4.5rem);
}
.spec__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:1.05rem 0; border-bottom:1px solid var(--line-ink);
}
.spec dt{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color: var(--ink-soft); flex:none;
}
.spec dd{ margin:0; text-align:right; font-weight:500; font-size:.98rem; }

/* ============================================================
   COMO FUNCIONA — sequência real, por isso é numerada
   ============================================================ */

.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,3vw,3rem);
  counter-reset: none;
}
.step{ border-top:2px solid var(--ember-deep); padding-top:1.5rem; }
.step__n{
  font-family:var(--f-mono); font-size:.95rem; font-weight:600;
  letter-spacing:.1em; color: var(--ember-lite); margin:0 0 1.5rem;
}
.step__h{
  font-family:var(--f-display); font-size:clamp(1.2rem,1.8vw,1.5rem);
  font-weight:700; font-stretch:104%; letter-spacing:-.018em;
  margin:0 0 .7rem;
}
.step__p{ margin:0; color:var(--ash); font-size:.97rem; }

/* ============================================================
   DECISÕES DE PROJETO
   ============================================================ */

.decs{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background: var(--line); border:1px solid var(--line); }
.dec{ background: var(--carbon); padding: clamp(1.75rem,3vw,2.6rem); }
/* o card largo vira duas colunas: a etiqueta ganha ar e o texto
   mantém a mesma medida de leitura dos outros */
.dec--wide{
  grid-column: span 2;
  display:grid; grid-template-columns: 190px 1fr;
  gap: clamp(1rem,3vw,2.5rem); align-items:start;
}
.dec--wide .dec__tag{ margin-bottom:0; padding-top:.2rem; }
.dec__tag{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color: var(--ember-lite); margin:0 0 1.1rem;
}
.dec__p{ margin:0; color: var(--bone); font-size:1rem; max-width:62ch; }

/* ============================================================
   MATERIAL E COR
   ============================================================ */

.mat{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem,6vw,5rem); align-items:center; }
.mat__p{ margin:1.4rem 0 0; color: var(--ink-soft); max-width:46ch; }
.mat__copy .head__h{ margin-bottom:.5rem; }

/* ── seletor de cor ───────────────────────────────────────── */

.picker{ display:flex; flex-wrap:wrap; gap:1.15rem; margin-top:2.4rem; }

.chip{
  position:relative;
  width:42px; height:42px; padding:0;
  border:none; border-radius:50%; cursor:pointer;
  background: var(--sw);
  /* o anel interno destaca as cores claras contra a folha */
  box-shadow: inset 0 -5px 12px rgba(0,0,0,.32),
              inset 0 0 0 1px rgba(22,19,15,.22),
              0 2px 8px rgba(22,19,15,.16);
  transition: transform .22s var(--ease);
}
.chip:hover{ transform: translateY(-3px); }
.chip:active{ transform: translateY(-1px); }

/* anel de seleção, na própria cor da tampa */
.chip::after{
  content:""; position:absolute; inset:-6px;
  border:2px solid var(--sw); border-radius:50%;
  opacity:0; transform: scale(.8);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.chip.is-on::after{ opacity:1; transform: scale(1); }
.chip.is-on{ transform: translateY(-3px); }

/* ── visor: a peça fica travada, só a cor troca ───────────── */

.viewer{ margin:0; max-width:380px; margin-inline:auto; width:100%; }

.viewer__frame{
  position:relative; aspect-ratio: 640/960;
  border-radius:14px; overflow:hidden;
  box-shadow: 0 1px 0 0 rgba(22,19,15,.12),
              0 30px 60px -24px rgba(22,19,15,.5),
              0 18px 70px -30px var(--pick, transparent);
  transition: box-shadow .55s var(--ease);
}
.viewer__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform: scale(1.035);
  transition: opacity .42s var(--ease), transform .62s var(--ease);
}
.viewer__img.is-on{ opacity:1; transform: scale(1); }

.viewer__cap{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-top:1.15rem;
}
.viewer__name{
  font-family: var(--f-display);
  font-size:1.5rem; font-weight:800; font-stretch:106%;
  letter-spacing:-.02em; color: var(--ink);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.viewer__name.is-swap{ opacity:0; transform: translateY(7px); }
.viewer__meta{
  font-family: var(--f-mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft);
}

/* ============================================================
   FAQ
   ============================================================ */

.faq{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  list-style:none; cursor:pointer;
  padding:1.5rem 3rem 1.5rem 0; position:relative;
  font-family:var(--f-display); font-size:clamp(1.02rem,1.5vw,1.22rem);
  font-weight:600; font-stretch:104%; letter-spacing:-.012em;
  transition: color .2s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color: var(--ember-lite); }
.qa summary::after{
  content:""; position:absolute; right:.3rem; top:50%; width:13px; height:13px;
  background:
    linear-gradient(var(--ember-lite),var(--ember-lite)) center/13px 1.5px no-repeat,
    linear-gradient(var(--ember-lite),var(--ember-lite)) center/1.5px 13px no-repeat;
  transform: translateY(-50%); transition: transform .28s var(--ease);
}
.qa[open] summary::after{
  background: linear-gradient(var(--ember-lite),var(--ember-lite)) center/13px 1.5px no-repeat;
  transform: translateY(-50%) rotate(180deg);
}
.qa__body{ padding:0 3rem 1.7rem 0; color: var(--ash); }
.qa__body p{ margin:0 0 .9rem; max-width:64ch; }
.qa__body p:last-child{ margin-bottom:0; }

/* ============================================================
   FECHAMENTO
   ============================================================ */

.closer{
  background:
    radial-gradient(90% 120% at 82% 55%, rgba(227,58,33,.16) 0%, transparent 60%),
    var(--carbon-2);
  border-top:1px solid var(--line);
  overflow:hidden;
}
.closer__grid{ display:grid; grid-template-columns: 1fr; gap:3rem; align-items:center; }
.closer__h{
  font-family:var(--f-display);
  font-size: clamp(2.4rem,6vw,4.6rem);
  font-weight:900; font-stretch:110%; line-height:.9; letter-spacing:-.035em;
  margin:0 0 1.3rem;
}
.closer__p{ margin:0 0 2.2rem; color: var(--ash); max-width:38ch; font-size:1.08rem; }
.closer__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:1.5rem; }
.closer__note{
  margin:0; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color: var(--ash);
}

/* ============================================================
   RODAPÉ
   ============================================================ */

.foot{ background: var(--void); border-top:1px solid var(--line); padding: 4rem 0 3rem; position:relative; overflow:hidden; }
.foot__inner{ display:grid; gap:1.9rem; justify-items:start; position:relative; z-index:2; }
.foot__ape{ position:absolute; right:-80px; bottom:-60px; width:clamp(280px, 35vw, 520px); z-index:1; }
.foot__logo{ width:200px; opacity:.92; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.6rem; }
.foot__nav a{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.07em;
  color:var(--ash); text-decoration:none; transition:color .2s var(--ease);
}
.foot__nav a:hover{ color:var(--bone); }
.foot__legal{
  margin:0; max-width:62ch; font-size:.78rem; line-height:1.62; color:#6E675C;
}
.foot__copy{
  margin:0; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.08em; color:#6E675C;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1040px){
  .hero__grid{ grid-template-columns:1fr; gap:3rem; }
  .hero__stage{ order:-1; }
  .hero__float{ width:min(250px,58%); }
  .hero__arm{ left:-14%;  top:5%; width:min(120vw,900px); opacity:.6; }
  .hero__copy::before{ inset:-14% -30%; }
  .benefits{ grid-template-columns:1fr; }
  .ben{ border-right:none; border-bottom:1px solid var(--line); padding-inline:0; }
  .ben:last-child{ border-bottom:none; }
  .steps{ grid-template-columns:1fr; }
  .mat{ grid-template-columns:1fr; }
  .closer__grid{ grid-template-columns:1fr; }
  .hero__product{
    margin-left:80%;
    width:100%;
    filter: drop-shadow(0 42px 60px rgba(0,0,0,.72))
            drop-shadow(0 0 44px rgba(227,58,33,.20));
  }
}

@media (max-width: 860px){
  .hdr__nav, .hdr__cta{ display:none; }
  .hero__grid{ grid-template-columns:1fr; gap:3rem; }
  .hero__stage{ order:-1; }
  .hero__float{ width:min(250px,58%); }
  .hero__arm{ left:-14%; top:5%; width:min(120vw,900px); opacity:.6; }
  .hero__float{ width:min(250px,58%); }
  .hdr__burger{ display:flex; }
  .spec{ grid-template-columns:1fr; }
  .dim{ display:none; }
  .hero__scroll{ display:none; }
  .decs{ grid-template-columns:1fr; }
  .dec--wide{ grid-column: span 1; }
  .hero__product{
    margin-left:80%;
    width:100%;
    filter: drop-shadow(0 42px 60px rgba(0,0,0,.72))
            drop-shadow(0 0 44px rgba(227,58,33,.20));
  }
}

@media (max-width: 560px){
  body{ font-size:1rem; }
  .hero__arm{ left: -24%;  top:15%; width:min(120vw,900px); opacity:.6; }
  .hero__facts li{ padding-right:1rem; margin-right:1rem; }
  /* as sete cores cabem numa fileira só, com folga para o anel */
  .chip{ width:38px; height:38px; }
  .picker{ gap:.75rem; }
  .qa summary{ padding-right:2.4rem; }
  .qa__body{ padding-right:0; }
  .hero__product{
    margin-left:50%;
    width:100%;
    filter: drop-shadow(0 42px 60px rgba(0,0,0,.72))
            drop-shadow(0 0 44px rgba(227,58,33,.20));
  }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .dim{ opacity:1; }
  .track__smoke{ display:none; }
}