/* ==========================================================================
   ATACADO MODAS — landing v2
   Conceito: uma etiqueta de arara em escala real. Cada seção é um trecho
   destacado da mesma folha — nunca uma caixa de 1px.
   Mobile-first: o CSS base é o celular; @media (min-width) sobe.
   ========================================================================== */

/* ---------- 1. tokens: claro ---------- */
:root{
  /* superfícies */
  --paper:#F6F5F2; --paper-2:#EDECE7; --paper-3:#EADFC9;
  --card:#FFFFFF;  --tape:#E7DDBE;
  /* tinta */
  --ink:#14161D; --ink-2:#3A3F4C; --ink-3:#5F6472;
  /* marca */
  --tangerine:#D63A0F; --tangerine-2:#A82B08;
  --indigo:#26355E;
  --kraft:#B08D5B; --kraft-ink:#7A5C2E; --line:#D9D7CE;
  /* laranja de SUPERFÍCIE (botão, cupom, faixa): NÃO inverte com o tema,
     senão o branco por cima cai pra 2.8:1 no escuro */
  --hot-a:#C9420F; --hot-b:#A8330E; --hot-on-denim:#FF8A5B;
  /* banda denim — escura NOS DOIS TEMAS */
  --denim:#1F2C4E; --denim-3:#2E3F6E;
  --denim-hi:rgba(255,255,255,.055); --denim-lo:rgba(0,0,0,.16);
  --on-denim:#EDEAE3; --on-denim-2:rgba(237,234,227,.62);
  /* matéria */
  --grain-o:.55;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .04 0 0 0 .42 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E");
  --sheen:rgba(255,255,255,.62); --sheen-2:rgba(255,255,255,.30);
  --hole:rgba(20,22,29,.14); --hole-hi:rgba(255,255,255,.85);
  --edge-hi:rgba(255,255,255,.75); --edge-lo:rgba(38,53,94,.16);
  --amb-top: radial-gradient(125% 52% at 50% -8%, rgba(255,247,232,.95), rgba(255,247,232,0) 62%);
  --ruled:repeating-linear-gradient(180deg, rgba(38,53,94,.03) 0 1px, transparent 1px 28px);
  --amb-bot: radial-gradient(150% 80% at 50% 112%, rgba(38,53,94,.10), rgba(38,53,94,0) 60%);
  /* sombra */
  --sh-1: 0 1px 2px rgba(20,22,29,.05);
  --sh-2: 0 10px 22px -16px rgba(38,53,94,.45);
  --sh-hot: 0 22px 44px -24px rgba(220,74,24,.75);
  /* foto: no claro a arte entra crua */
  --img-f: none;

  /* tipografia */
  --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-cond: "Avenir Next Condensed", "Roboto Condensed", sans-serif-condensed,
            "Arial Narrow", "Liberation Sans Narrow", "Segoe UI", system-ui, sans-serif;
  --f-serif: Georgia, "Times New Roman", serif;

  --t-mega:   clamp(3.25rem, 15vw, 6.5rem);
  --t-h2:     clamp(1.875rem, 2.02vw + 1.375rem, 3rem);
  --t-h3:     clamp(1.25rem, .34vw + 1.17rem, 1.4rem);
  --t-lead:   clamp(1.1875rem, .6vw + 1.06rem, 1.5rem);
  --t-deck:   clamp(1.0625rem, .84vw + .85rem, 1.25rem);
  --t-body:   clamp(1.0625rem, .2vw + 1rem, 1.125rem);
  --t-sm:.9375rem; --t-cap:.8125rem;
  --t-label:  clamp(.79rem, .1vw + .75rem, .81rem); /* B5: piso 12.64px no mobile */
  --t-stat:   clamp(2.875rem, 5.2vw + 1rem, 4.5rem);
  --t-price:  clamp(3.75rem, 3.9vw + 2.5rem, 5.5rem);

  --tr-mega:-.05em; --tr-h2:-.028em; --tr-h3:-.02em; --tr-body:-.005em;
  --tr-lbl:.19em; --tr-lbl-md:.11em; --tr-num:-.025em;

  --lh-mega:.84; --lh-h2:1.04; --lh-h3:1.16; --lh-body:1.58; --lh-upper:1.12;

  /* espaço */
  --wrap:1040px;
  --gutter:clamp(18px, 5.2vw, 44px);
  /* altura da topbar grudada: 52px de min-height + 1px do filete.
     Token de LAYOUT — mora só aqui, não entra nos 4 blocos de cor. */
  --h-top:53px;
  /* amplitude real: denso é denso, respiro é respiro */
  --pad-s:clamp(24px,3vw,36px);
  --pad-m:clamp(56px,8vw,72px);
  --pad-l:clamp(120px,13vw,150px);
  --r-1:3px;
}

/* ---------- 2. tokens: escuro (sistema) ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0E1017; --paper-2:#161A24; --paper-3:#1D1B18;
    --card:#171B26;  --tape:#2A2519;
    --ink:#F2EFE9; --ink-2:#C3C7D2; --ink-3:#8A90A0;
    --tangerine:#FF6B34; --tangerine-2:#FF854F;
    --indigo:#8EA2D8; --kraft:#C9A87C; --kraft-ink:#D0B183; --line:#262C3A;
    --denim:#131A2C; --denim-3:#1C2743;
    --denim-hi:rgba(255,255,255,.035); --denim-lo:rgba(0,0,0,.25);
    --on-denim:#EDEAE3; --on-denim-2:rgba(237,234,227,.60);
    --grain-o:.42;
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .80 0 0 0 0 .82 0 0 0 0 .90 0 0 0 .30 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E");
    --sheen:rgba(255,255,255,.09); --sheen-2:rgba(255,255,255,.05);
    --hole:rgba(0,0,0,.55); --hole-hi:rgba(255,255,255,.10);
    --edge-hi:rgba(255,255,255,.07); --edge-lo:rgba(0,0,0,.5);
    --amb-top: radial-gradient(125% 52% at 50% -8%, rgba(142,162,216,.10), rgba(142,162,216,0) 62%);
    --ruled:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px);
    --amb-bot: radial-gradient(150% 80% at 50% 112%, rgba(0,0,0,.45), rgba(0,0,0,0) 60%);
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 12px 26px -16px rgba(0,0,0,.7);
    --sh-hot: 0 22px 44px -24px rgba(255,107,52,.45);
    /* foto: sem isto o papel branco da arte vira lampada sobre --paper:#0E1017 */
    --img-f: brightness(.88) contrast(1.03) saturate(.92);
  }
}

/* ---------- 3. tokens: escuro (escolha explícita) ---------- */
:root[data-theme="dark"]{
  --paper:#0E1017; --paper-2:#161A24; --paper-3:#1D1B18;
  --card:#171B26;  --tape:#2A2519;
  --ink:#F2EFE9; --ink-2:#C3C7D2; --ink-3:#8A90A0;
  --tangerine:#FF6B34; --tangerine-2:#FF854F;
  --indigo:#8EA2D8; --kraft:#C9A87C; --kraft-ink:#D0B183; --line:#262C3A;
  --denim:#131A2C; --denim-3:#1C2743;
  --denim-hi:rgba(255,255,255,.035); --denim-lo:rgba(0,0,0,.25);
  --on-denim:#EDEAE3; --on-denim-2:rgba(237,234,227,.60);
  --grain-o:.42;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .80 0 0 0 0 .82 0 0 0 0 .90 0 0 0 .30 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E");
  --sheen:rgba(255,255,255,.09); --sheen-2:rgba(255,255,255,.05);
  --hole:rgba(0,0,0,.55); --hole-hi:rgba(255,255,255,.10);
  --edge-hi:rgba(255,255,255,.07); --edge-lo:rgba(0,0,0,.5);
  --amb-top: radial-gradient(125% 52% at 50% -8%, rgba(142,162,216,.10), rgba(142,162,216,0) 62%);
  --ruled:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px);
  --amb-bot: radial-gradient(150% 80% at 50% 112%, rgba(0,0,0,.45), rgba(0,0,0,0) 60%);
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 12px 26px -16px rgba(0,0,0,.7);
  --sh-hot: 0 22px 44px -24px rgba(255,107,52,.45);
  /* foto: sem isto o papel branco da arte vira lampada sobre --paper:#0E1017 */
  --img-f: brightness(.88) contrast(1.03) saturate(.92);
}

/* ---------- 4. tokens: claro (escolha explícita) ---------- */
:root[data-theme="light"]{
  --paper:#F6F5F2; --paper-2:#EDECE7; --paper-3:#EADFC9;
  --card:#FFFFFF;  --tape:#E7DDBE;
  --ink:#14161D; --ink-2:#3A3F4C; --ink-3:#5F6472;
  --tangerine:#D63A0F; --tangerine-2:#A82B08;
  --indigo:#26355E; --kraft:#B08D5B; --kraft-ink:#7A5C2E; --line:#D9D7CE;
  --denim:#1F2C4E; --denim-3:#2E3F6E;
  --denim-hi:rgba(255,255,255,.055); --denim-lo:rgba(0,0,0,.16);
  --on-denim:#EDEAE3; --on-denim-2:rgba(237,234,227,.62);
  --grain-o:.55;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .04 0 0 0 .42 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E");
  --sheen:rgba(255,255,255,.62); --sheen-2:rgba(255,255,255,.30);
  --hole:rgba(20,22,29,.14); --hole-hi:rgba(255,255,255,.85);
  --edge-hi:rgba(255,255,255,.75); --edge-lo:rgba(38,53,94,.16);
  --amb-top: radial-gradient(125% 52% at 50% -8%, rgba(255,247,232,.95), rgba(255,247,232,0) 62%);
  --ruled:repeating-linear-gradient(180deg, rgba(38,53,94,.03) 0 1px, transparent 1px 28px);
  --amb-bot: radial-gradient(150% 80% at 50% 112%, rgba(38,53,94,.10), rgba(38,53,94,0) 60%);
  --sh-1: 0 1px 2px rgba(20,22,29,.05);
  --sh-2: 0 10px 22px -16px rgba(38,53,94,.45);
  --sh-hot: 0 22px 44px -24px rgba(220,74,24,.75);
  /* foto: no claro a arte entra crua */
  --img-f: none;
}

/* ---------- 5. base ---------- */
*,*::before,*::after{ box-sizing:border-box }

html{
  background:var(--paper);
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-behavior:smooth; scroll-padding-top:calc(var(--h-top) + 28px);
}
body{
  margin:0; background:none; position:relative; z-index:0; overflow-x:hidden;
  color:var(--ink);
  font-family:var(--f-sans); font-size:var(--t-body);
  line-height:var(--lh-body); letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased;
}
/* espaço da barra de compra fixa: só com JS (sem JS a barra nunca aparece) */
.js body{ padding-bottom:96px }
/* luz ambiente: uma camada global, pintada uma vez, ancorada no viewport */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background: var(--amb-top), var(--amb-bot);
}
/* grão do papel */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grain); background-size:128px 128px; opacity:var(--grain-o);
}
/* ourela de página inteira: o filete do denim promovido à margem esquerda */
.selvedge{
  position:fixed; left:0; top:0; bottom:0; width:4px; z-index:60;
  pointer-events:none; opacity:.5;
  background:linear-gradient(180deg, var(--indigo), var(--tangerine));
}

ul,ol{ list-style:none; margin:0; padding:0 }
h1,h2,h3,p{ margin:0 }
svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

h1,h2{ text-wrap:balance }
h2{ font-size:var(--t-h2); line-height:var(--lh-h2); letter-spacing:var(--tr-h2); font-weight:800 }
h3{ font-size:var(--t-h3); line-height:var(--lh-h3); letter-spacing:var(--tr-h3); font-weight:700 }
p{ text-wrap:pretty; max-width:38ch }

:focus-visible{ outline:2.5px solid var(--tangerine); outline-offset:3px }

/* ---------- 6. grid de sangria ---------- */
/* a faixa interna tem que dar a MESMA largura de conteúdo do .wrap (que é
   caixa de --wrap COM --gutter de padding), senão header/rodapé e seções
   desalinham 2×gutter acima de ~1128px */
main{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter),1fr)
    [in-start]   minmax(0, calc(var(--wrap) - var(--gutter) * 2)) [in-end]
                 minmax(var(--gutter),1fr) [full-end];
}
main > *          { grid-column:in }
main > .full      { grid-column:full; display:grid; grid-template-columns:inherit }
main > .full > *  { grid-column:in }
main > .full > .bleed{ grid-column:full }

.pad-s{ padding-block:var(--pad-s) }
.pad-m{ padding-block:var(--pad-m) }
.pad-l{ padding-block:var(--pad-l) }

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

/* ---------- 7. separadores ---------- */
/* A. perfuração — trecho destacado da mesma folha */
.perf{ height:clamp(22px,6vw,34px); position:relative }
.perf::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:9px;
  transform:translateY(-50%);
  background:
    radial-gradient(circle 3px at 7px 5px, var(--hole-hi) 96%, transparent 100%) 0 0/16px 9px repeat-x,
    radial-gradient(circle 3px at 7px 4px, var(--hole)    96%, transparent 100%) 0 0/16px 9px repeat-x;
}

/* B. folha serrilhada — a matéria muda */
.sheet{
  background:var(--ruled) var(--paper-2); /* pauta impressa de baixo contraste */
  position:relative; isolation:isolate;
  box-shadow: inset 0 1px 0 var(--edge-hi), 0 -14px 26px -22px var(--edge-lo);
}
/* a folha do índice entrega a vez sem respiro: ferramentas colam nela */
.sheet.pad-l{ padding-bottom:var(--pad-s) }
.sheet::before{
  content:""; position:absolute; left:0; right:0; top:-9px; height:9px;
  pointer-events:none; z-index:1;
  background: radial-gradient(circle 9px at 9px 9px, var(--paper-2) 98%, transparent 100%) 0 0/18px 9px repeat-x;
}
/* grão também na folha de cima, senão ela vira chapada */
.sheet::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grain); background-size:128px 128px; opacity:var(--grain-o);
}
/* quando já houve perfuração, a serrilha vira ruído */
.perf + .sheet::before{ display:none }

/* ---------- 8. banda denim ---------- */
.denim{
  background:var(--denim); color:var(--on-denim);
  position:relative; overflow:hidden; isolation:isolate;
}
.denim::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient( 64deg, var(--denim-hi) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-64deg, var(--denim-lo) 0 1px, transparent 1px 5px),
    radial-gradient(120% 80% at 14% 0%, var(--denim-3), transparent 58%);
}
/* ourela: a linha laranja da barra do jeans */
.denim::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:7px;
  z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.20) 0 2px, transparent 2px),
    repeating-linear-gradient(180deg, var(--tangerine) 0 5px, transparent 5px 13px);
}
.denim h2{ color:var(--on-denim) }

/* ---------- 9. rótulos: sistema ÚNICO, fita crepe ---------- */
.tape{
  display:inline-block; max-width:100%; padding:.45rem 1.5rem; rotate:-1.3deg;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(0,0,0,.06)),
              repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px), var(--tape);
  color:var(--ink); font:700 var(--t-label)/1.3 var(--f-cond);
  letter-spacing:var(--tr-lbl); text-transform:uppercase;
  clip-path:polygon(1.5% 4%, 6% 0, 94% 3%, 99% 0, 100% 95%, 95% 100%, 7% 97%, 2% 100%);
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.22));
}
.tape i{
  font-style:normal; color:var(--kraft-ink); margin-right:.7em;
  font-variant-numeric:tabular-nums lining-nums;
}
.tape--hot{ color:var(--tangerine-2) } /* tangerina em rótulo SÓ na oferta */

.sec-head{ max-width:34rem; margin-bottom:clamp(22px,4vw,38px) }
.sec-head h2{ margin-top:16px }
.sec-head .deck{ margin-top:14px; font-size:var(--t-deck); color:var(--ink-2) }
.denim .sec-head .deck{ color:var(--on-denim-2) }

/* ---------- 10. botão ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background:var(--hot-a); color:#fff;
  font-size:1.06rem; font-weight:700; letter-spacing:-.01em;
  padding:18px 30px; border-radius:var(--r-1);
  box-shadow:0 2px 0 var(--hot-b), var(--sh-hot);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{ background:var(--hot-b); transform:translateY(-2px) }
.btn:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--hot-b) }
.btn__arrow{ font-family:var(--f-cond); font-size:1.2rem; line-height:1 }

.cta-note{
  margin-top:14px; font-size:var(--t-cap); color:var(--ink-3);
  display:flex; flex-wrap:wrap; gap:6px 16px;
}
.cta-note span{ display:inline-flex; align-items:center; gap:7px }
.dot{ width:5px; height:5px; border-radius:50%; background:var(--kraft); flex:none }

/* ---------- 11. topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.topbar__in{ display:flex; align-items:center; gap:10px; min-height:52px }
.brand{
  display:flex; align-items:baseline; gap:0; margin-right:auto; /* logotipo colado; a pill se afasta pelo margin-right:auto daqui */
  font-weight:800; letter-spacing:-.03em; font-size:1.02rem;
}
.brand em{ font-style:normal; color:var(--tangerine-2) }
.brand small{
  display:none; margin-left:10px; font:700 .6rem/1 var(--f-cond);
  text-transform:uppercase; letter-spacing:var(--tr-lbl); color:var(--ink-3);
}
.pill{
  position:relative;
  display:inline-flex; align-items:baseline; gap:1px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-1);
  padding:13px 12px; min-height:40px; color:var(--ink);
  font:700 .74rem/1 var(--f-cond); letter-spacing:.03em;
  font-variant-numeric:tabular-nums lining-nums;
}
.pill::after{ content:""; position:absolute; inset:-2px } /* área de toque >=44px */
.pill b{ font-size:1.2em; font-weight:700 }
.tgl{
  display:grid; place-content:center; width:44px; height:44px;
  border-radius:var(--r-1); color:var(--ink-3);
}
.tgl:hover{ color:var(--ink) }
.tgl svg{ width:18px; height:18px }
.ico-sun,.ico-moon{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round }
.ico-sun{ display:none }
@media (prefers-color-scheme: dark){ .ico-sun{ display:block } .ico-moon{ display:none } }
:root[data-theme="dark"] .ico-sun{ display:block }
:root[data-theme="dark"] .ico-moon{ display:none }
:root[data-theme="light"] .ico-sun{ display:none }
:root[data-theme="light"] .ico-moon{ display:block }

@media (min-width:620px){ .brand small{ display:block } }

/* ---------- 12. hero ---------- */
.hero{ padding-block:clamp(28px,6vw,56px) clamp(52px,8vw,84px) }

.tag{
  float:right; width:min(112px,29vw); rotate:-8deg;
  margin:0 calc(var(--gutter) * -.4) 8px 14px;
  filter:drop-shadow(0 14px 22px rgba(38,53,94,.28));
}
/* C5: a fita do hero quebra ao lado do float da etiqueta, nunca escorre por baixo */
.hero__col .tape{ max-width:calc(100% - 146px) }
.h1__pre{
  display:block; font-size:var(--t-lead); font-weight:600;
  color:var(--ink-2); letter-spacing:-.01em; line-height:1.2;
}
.h1__mega{
  display:block; clear:right; margin-top:.05em;
  font-size:var(--t-mega); line-height:var(--lh-mega);
  font-weight:900; letter-spacing:var(--tr-mega);
}
.h1__esc{
  display:block; margin-top:.5em; font-size:var(--t-lead); font-weight:700;
  line-height:1.22; letter-spacing:-.02em; color:var(--ink-2);
}
.h1__esc b{ color:var(--tangerine) }
.hero h1{ margin-top:14px; font-size:inherit; font-weight:400 }
.deck{ margin-top:20px; font-size:var(--t-deck); color:var(--ink-2) }
.hero__cta{ margin-top:28px }

/* specs sem caixa: hierarquia declarada, não desalinho aleatório */
.specs{ display:grid; grid-template-columns:1fr 1fr; gap:22px 18px; margin-top:34px }
.spec{ border-top:1px solid var(--line); padding-top:10px }
.spec b{
  display:block; font:700 var(--t-stat)/.82 var(--f-cond);
  letter-spacing:var(--tr-num); font-variant-numeric:tabular-nums lining-nums; color:var(--ink);
}
.spec b i{ font-style:normal; font-size:.42em; color:var(--tangerine); vertical-align:.62em }
.spec span{
  display:block; margin-top:.4em; font:700 var(--t-label)/var(--lh-upper) var(--f-cond);
  text-transform:uppercase; letter-spacing:var(--tr-lbl); color:var(--ink-3);
}
/* esteira de assuntos: o argumento de volume, com nome-marca em peso */
.reel{
  margin-top:26px; font:400 .9375rem/1.7 var(--f-sans);
  color:var(--ink-3); max-width:36em;
}
.reel b{ color:var(--ink); font-weight:700 }
.reel i{ font-style:normal; color:var(--tangerine); padding:0 .35em }

@media (min-width:620px){
  .specs{ grid-template-columns:repeat(4,1fr) }
}
@media (min-width:900px){
  .hero{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,5vw,64px); align-items:center }
  .hero__col{ grid-column:1; grid-row:1 }
  .tag{
    grid-column:2; grid-row:1; float:none; width:300px; rotate:-4deg; margin:0 auto;
    transform-origin:50% 4%; animation:sway 6.5s ease-in-out infinite;
  }
}
@keyframes sway{ 0%,100%{ rotate:-2.2deg } 50%{ rotate:2.2deg } }

/* hero: a bancada fotografada atrás da etiqueta — só no grid de 2 colunas.
   Foto COLADA (mesmo tratamento das .mat: raio, --edge-hi, --sh-1/2, --img-f),
   não dissolve — a identidade é papel cortado, borda dura e sombra real. */
.bancada{ display:none }
@media (min-width:900px){
  .bancada{
    display:block; grid-column:2; grid-row:1; place-self:center;
    width:min(100% + 40px, 432px);          /* sangra 20px de cada lado da coluna */
    rotate:.9deg; translate:0 64px;         /* contra-rotação sutil à etiqueta; desce pra pilha coroar a etiqueta */
    border-radius:var(--r-1); overflow:hidden;
    box-shadow: inset 0 1px 0 var(--edge-hi), var(--sh-1), var(--sh-2);
  }
  .bancada img{ display:block; width:100%; height:auto; filter:var(--img-f) }
}

/* ---------- 13. faixa-etiqueta (banner) ---------- */
.tape-mask{ overflow:hidden; margin-top:-18px; position:relative; z-index:4 }
.taper{
  width:110%; margin-left:-5%; rotate:-1.6deg; overflow:hidden;
  display:flex;
  background-color:var(--hot-a); /* tinta chapada */
  background-image:var(--grain); background-size:128px 128px; /* cobertura imperfeita */
  color:#fff; padding:14px 0;
  font:700 clamp(.8rem,3vw,1rem)/var(--lh-upper) var(--f-cond);
  text-transform:uppercase; letter-spacing:.14em;
  box-shadow:var(--sh-hot);
}
/* mobile: marquee de UMA linha; desktop: estática, letras cortadas pela borda */
.taper__g{
  display:flex; flex:none; max-width:none; white-space:nowrap;
  animation:taper-slide 28s linear infinite;
}
.taper__g span{ position:relative; padding:0 1.1em }
.taper__g span + span::before{
  content:"·"; position:absolute; left:0; translate:-50% 0; opacity:.55;
}
@keyframes taper-slide{ to{ transform:translateX(-100%) } }
@media (min-width:900px){
  .taper__g{ animation:none }
}

/* ---------- 14. dores: balões em saco plástico ---------- */
.lead{ margin-top:16px; font-size:var(--t-deck); color:var(--ink-2) }
.lead::first-letter{
  float:left; font-family:var(--f-serif); font-size:3.1em; line-height:.82;
  padding:.06em .12em 0 0; color:var(--tangerine); font-weight:400;
}
.pains{ display:grid; gap:14px; margin-top:clamp(26px,5vw,38px) }
.pain{
  border-radius:var(--r-1); padding:18px 20px 20px;
  background:var(--card);
  box-shadow: inset 0 1px 0 var(--edge-hi), var(--sh-1), var(--sh-2);
}
/* papel colado de verdade não entorta por igual: duas tortas, três retas */
.pain:nth-child(1){ rotate:-.6deg }
.pain:nth-child(5){ rotate:.8deg }
.pain__q{
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.2rem,4.6vw,1.45rem); line-height:1.28; letter-spacing:-.012em;
  color:var(--ink); text-indent:-.42em; margin-bottom:8px; max-width:none;
}
.pain--big .pain__q{
  font-size:clamp(1.9rem,7.5vw,2.4rem); line-height:1.06; margin-bottom:0;
}
.pain__q::first-letter{ color:var(--tangerine) }
.pain p{ font-size:var(--t-sm); color:var(--ink-3); line-height:1.45 }
@media (min-width:760px){
  .pains{ max-width:600px }
  .pain:nth-child(1){ width:94% }
  .pain:nth-child(2){ width:84%; margin-left:auto }
  .pain:nth-child(3){ width:90% }
  .pain:nth-child(5){ width:88% }
}

/* ---------- 14b. matéria: a foto como objeto colado na folha ----------
   Regra da direção: a foto nunca carrega a mensagem, ela é a superfície. Por isso
   nenhuma tem moldura, legenda ou tipografia assada — o texto mora no HTML, é
   temável e reescrever copy custa zero. O que costura a foto na página é o
   tratamento que a página já dá a TODO retângulo material (.pain, .ticket, .seal):
   raio de 3px e a sombra de papel colado. Foto aqui é objeto, não ilustração.
   As 3 estão abaixo da dobra e são lazy: nenhuma é candidata a LCP. */
.mat{
  /* margin COMPLETA de propósito: <figure> tem `margin:1em 40px` do user-agent e
     o reset acima não zera figure — o mesmo tropeço que já mordeu a .capa. */
  margin:clamp(26px,5vw,38px) 0;
  /* mesma medida de coluna do texto: a foto não pode ser mais larga que o argumento */
  max-width:36rem;
  border-radius:var(--r-1); overflow:hidden;
  box-shadow: inset 0 1px 0 var(--edge-hi), var(--sh-1), var(--sh-2);
}
.mat picture{ display:block }
.mat img{
  display:block; width:100%; height:auto;
  filter:var(--img-f); /* sem isto o papel #F6F5F2 da foto vira lâmpada no escuro */
}
/* o "10" fantasma da cartela nasce em top:-52px e passaria por cima da faixa */
.tools-sec .mat{ margin-bottom:clamp(76px,9vw,84px) }

/* o 5º balão da lista de dores É a mercadoria: mesma caixa, mesma rotação de papel
   colado (.pain:nth-child(5)), só que o papel, dessa vez, é a fotografia. */
.pain--foto{ position:relative; padding:0; overflow:hidden; background:var(--denim) }
.pain--foto picture{ display:block }
.pain--foto img{ display:block; width:100%; height:auto; filter:var(--img-f) }
.pain--foto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* medido no canvas: com o degradê antigo o branco caía a 2,15:1 sobre a tira de
     papel claro da foto. Estes stops põem o pior ponto acima de AA sem afogar o
     terço superior, que é onde o plástico e a emenda da fita fazem a leitura. */
  background:linear-gradient(0deg,
    rgba(9,11,16,.92) 0%, rgba(9,11,16,.82) 32%, rgba(9,11,16,.34) 64%, transparent 88%);
}
/* branco fixo: a foto é escura NOS DOIS TEMAS, como .denim e .ticket */
.pain--foto .pain__q{
  position:absolute; left:20px; right:20px; bottom:16px; z-index:1;
  color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.5);
}
/* a aspa NAO herda o laranja do .pain__q aqui: medido em canvas, #FF8A5B sobre a
   foto sob scrim da 2,02:1 no claro. Sobre fotografia, branco e o unico seguro. */
.pain--foto .pain__q::first-letter{ color:inherit }

/* ---------- 15. volume: 31 capítulos como mancha ---------- */
/* o crop vertical mora no WRAPPER: multicol com max-height joga o resto
   numa 3ª coluna fora da tela em vez de cortar embaixo */
.toc-wrap{
  margin-top:18px; max-width:680px;
  max-height:min(60vh,420px); overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 70%, rgba(0,0,0,.18) 88%, transparent);
          mask-image:linear-gradient(#000 70%, rgba(0,0,0,.18) 88%, transparent);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;  mask-size:100% 100%;
  transition:-webkit-mask-size .75s cubic-bezier(.2,.7,.3,1), mask-size .75s cubic-bezier(.2,.7,.3,1);
}
.toc{
  columns:1; column-gap:20px;
  font:700 .8125rem/2.05 var(--f-cond);
  text-transform:uppercase; letter-spacing:.05em; color:var(--on-denim-2);
}
.toc span{ display:block; break-inside:avoid }
.toc i{ font-style:normal; color:var(--hot-on-denim); margin-right:.5em }
@media (min-width:720px){
  .toc{ columns:2 }
  /* o índice virou bloco centrado (26b); a régua de números acompanha o eixo */
  .volume__over{ text-align:center }
}
.volume__over{
  position:relative; z-index:2; margin-top:-58px; max-width:none;
  font-size:clamp(1.05rem,4.2vw,1.3rem); color:var(--on-denim);
}
.volume__over b{
  display:inline-block; vertical-align:-.06em; color:#fff; font-weight:700;
  font-family:var(--f-cond); font-size:clamp(2.9rem,13vw,4.4rem); line-height:.8;
  letter-spacing:var(--tr-num); font-variant-numeric:tabular-nums lining-nums;
  margin-right:.06em;
}
.volume__over em{ color:var(--hot-on-denim); font-style:normal; padding:0 .25em }

/* ---------- 16. polos: trilho de canhotos de ticket ---------- */
.polos-sec{ position:relative }
.polos-sec .sec-head{ position:relative; z-index:1 }
.rail{
  display:flex; gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  /* o trilho é bleed (largura total): o recuo tem que ser o da faixa interna,
     não o gutter, senão o primeiro canhoto nasce colado na borda da tela
     enquanto o cabeçalho da seção fica lá no meio */
  padding-inline:        max(var(--gutter), (100% - (var(--wrap) - var(--gutter) * 2)) / 2);
  scroll-padding-inline: max(var(--gutter), (100% - (var(--wrap) - var(--gutter) * 2)) / 2);
  padding-block:4px 10px; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none }
.rail > *{ scroll-snap-align:start; flex:0 0 auto }
/* canhoto: o entalhe lateral do .ticket, em escala menor; larguras variam por polo */
.stub{
  position:relative; width:var(--w, min(70vw,290px));
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.18));
}
.polo{
  --notch:9px; position:relative; height:100%; background:var(--card);
  padding:20px 30px 22px 18px;
  display:grid; align-content:start; gap:6px;
  -webkit-mask:
     radial-gradient(var(--notch) at 0 50%,    transparent 98%, #000) left  / 51% 100% no-repeat,
     radial-gradient(var(--notch) at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask:
     radial-gradient(var(--notch) at 0 50%,    transparent 98%, #000) left  / 51% 100% no-repeat,
     radial-gradient(var(--notch) at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.polo__n{
  font:700 2.6rem/.8 var(--f-cond); letter-spacing:var(--tr-num);
  color:transparent; -webkit-text-stroke:1.2px var(--indigo); opacity:.5;
  font-variant-numeric:tabular-nums lining-nums;
}
.polo__uf{
  position:absolute; right:-7px; top:12px; z-index:2; writing-mode:vertical-rl;
  font:700 1.05rem/1 var(--f-cond); letter-spacing:.3em; color:var(--kraft-ink);
}
.polo h3{ margin-top:2px }
.polo p{ font-size:var(--t-sm); color:var(--ink-2); line-height:1.42; max-width:none }
.polo small{
  display:block; margin-top:4px; font:400 .8125rem/1.4 var(--f-sans); color:var(--ink-3);
}
.rail-hint{
  margin-top:14px; font:400 .8125rem/1.4 var(--f-sans); color:var(--ink-3);
}

/* ---------- 17. dez partes: índice tipográfico, sem caixa ---------- */
.idx-list{ margin-top:6px }
.idx{
  display:grid; grid-template-columns:clamp(3.2rem,9vw,4.8rem) 1fr; gap:0 12px;
  padding-block:20px; border-top:1px solid var(--line); align-items:start;
}
.idx--big{ padding-block:32px }
.idx__n{
  font:700 clamp(3rem,13vw,4.4rem)/.72 var(--f-cond);
  letter-spacing:-.05em; margin-left:-.08em;
  color:transparent; -webkit-text-stroke:1.4px var(--indigo); opacity:.6;
  font-variant-numeric:tabular-nums lining-nums;
}
/* dialeto único de numeral: parte grande = sólido pesado; resto = contorno */
.idx--big .idx__n{ -webkit-text-stroke:0; color:var(--indigo); opacity:1 }
.idx__b{ margin-left:-20px }
.idx__bar{ height:3px; background:var(--line); margin:10px 0 10px; max-width:280px }
.idx__bar::after{ content:""; display:block; height:100%; width:var(--w); background:var(--tangerine) }
.idx__pg{
  display:block; font:400 .8125rem/1.4 var(--f-sans); color:var(--kraft-ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.idx ul{ display:none }
.idx--big ul{ display:grid; gap:7px; margin-top:12px }
.idx li{
  font-size:var(--t-sm); line-height:1.42; color:var(--ink-2);
  padding-left:15px; position:relative;
}
.idx li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:6px; height:1.5px; background:var(--tangerine);
}
.idx li.star{ color:var(--ink); font-weight:600 }
.idx li.star::before{ width:6px; height:6px; top:.48em; border-radius:50% }
@media (min-width:820px){
  .idx{ grid-template-columns:5rem 1fr }
  .idx__b{ margin-left:0; max-width:46rem }
}

/* ---------- 18. ferramentas: cartela densa (cola na folha do índice) ---------- */
.tools-sec{ padding-top:0 }
.tools-sec .sec-head{ position:relative; z-index:2 }
.tools{ display:grid; grid-template-columns:1fr; gap:0; position:relative; isolation:isolate }
.tools::before{
  content:"10" / ""; position:absolute; right:calc(var(--gutter) * -.4); top:-52px; z-index:-1;
  font:700 9rem/.7 var(--f-cond); letter-spacing:var(--tr-num);
  color:transparent; -webkit-text-stroke:1.6px var(--tangerine); opacity:.32;
  pointer-events:none;
}
.tool{ border-top:1px solid var(--line); padding:12px 0 14px }
.tool b{
  display:block; font:700 .82rem/1.25 var(--f-cond);
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink);
}
.tool span{
  display:block; font-size:var(--t-sm); color:var(--ink-3);
  line-height:1.4; margin-top:4px;
}
/* mobile: 5 primeiras abertas + 5 atrás do botão; desktop: as 10 em grade.
   Estrutura PLANA de propósito: a versão anterior usava <details> com
   display:contents e o Chrome real ignorava o contents — as 5 ferramentas
   ficavam presas empilhadas numa coluna só, com buraco na grade. Os 10 itens
   são filhos diretos da grade; o recolhimento é só display por classe. */
.js .tool--x{ display:none }
.js .tools.aberta .tool--x{ display:block }
.tools-mais{
  display:none; width:100%; text-align:left; background:none; border:0;
  border-top:1px solid var(--line); cursor:pointer;
  padding:14px 0; font:700 .82rem/1.25 var(--f-cond);
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink);
}
.js .tools-mais{ display:block }
.js .tools.aberta + .tools-mais{ display:none }
@media (min-width:720px){
  .tools{ grid-template-columns:repeat(3,1fr); column-gap:24px }
  .tool{ padding:16px 0 18px }
  .js .tool--x{ display:block }
  .js .tools-mais{ display:none }
}

/* ---------- 19. para quem é / não é: assimétrico ---------- */
.yes{ background:var(--paper-3); border-left:4px solid var(--tangerine); padding:24px 22px }
.yes h3{ margin-bottom:14px }
.yes ul{ display:grid; gap:11px }
.yes li{ font-size:1.02rem; color:var(--ink-2); padding-left:26px; position:relative }
.yes li::before{
  content:""; position:absolute; left:3px; top:.42em; width:11px; height:6px;
  border-left:2.4px solid var(--tangerine); border-bottom:2.4px solid var(--tangerine);
  rotate:-45deg;
}
.no{
  background:none; padding:20px 0 0; margin:22px 0 0 auto; max-width:26em;
  border-top:1px solid var(--line); opacity:.8;
}
.no h3{
  font:700 .9375rem/1.3 var(--f-sans); margin-bottom:12px;
}
@media (min-width:760px){
  .fit{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,48px); align-items:start }
  .no{ margin:0; padding-top:20px }
}
.no ul{ display:grid; gap:9px }
.no li{ font-size:.88rem; color:var(--ink-2); padding-left:18px; position:relative }
.no li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:11px; height:2px; background:var(--ink-3);
}

/* ---------- 20. oferta: cupom picotado ---------- */
#oferta{ position:relative; isolation:isolate; overflow-x:clip } /* clipa a rotação do ticket sem impedir o furo vertical (A17) */
#oferta::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* brilho do laranja de superfície — fixo por design, como --hot-a */
  background: radial-gradient(72% 50% at 88% -6%, rgba(220,74,24,.13), transparent 62%);
}
.anchor-note{ border-left:3px solid var(--kraft); padding:4px 0 4px 18px; margin-top:24px }
.anchor-note p{ font-size:1.06rem; line-height:1.5; color:var(--ink-2) }

.offer-price{ position:relative; z-index:2; margin-top:clamp(34px,7vw,54px) }
/* sombra do laranja de superfície — fixo por design, como --hot-a */
.ticket-wrap{ filter:drop-shadow(0 26px 40px rgba(220,74,24,.34)) }
.ticket{
  --notch:14px; position:relative; color:#fff; padding:44px 22px 26px; rotate:-1.1deg;
  margin-inline:calc(var(--gutter) * -.45);
  background:linear-gradient(158deg, var(--hot-a), var(--hot-b));
  -webkit-mask:
     radial-gradient(var(--notch) at 0 46%,    transparent 98%, #000) left  / 51% 100% no-repeat,
     radial-gradient(var(--notch) at 100% 46%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask:
     radial-gradient(var(--notch) at 0 46%,    transparent 98%, #000) left  / 51% 100% no-repeat,
     radial-gradient(var(--notch) at 100% 46%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.ticket::before{
  content:""; position:absolute; top:15px; left:50%; translate:-50% 0;
  width:26px; height:26px; border-radius:50%; background:var(--paper);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.32);
}
.ticket__lbl{
  display:block; font:700 var(--t-label)/var(--lh-upper) var(--f-cond);
  text-transform:uppercase; letter-spacing:var(--tr-lbl); color:rgba(255,255,255,.85);
}
.price{ display:flex; align-items:baseline; gap:.14em; margin-top:10px }
.price .cur{
  font:700 .3em/1 var(--f-cond); letter-spacing:.04em;
  align-self:flex-start; margin-top:.22em; opacity:.85;
}
.price .int{
  font-family:var(--f-cond); font-weight:700;
  font-size:var(--t-price); line-height:.84; letter-spacing:-.03em; /* preço de etiqueta: condensado pesado */
}
.price .cts{ font-family:var(--f-cond); font-weight:700; font-size:.44em; letter-spacing:-.01em }
.price .once{
  font:600 .8125rem/1.1 var(--f-sans); align-self:flex-end;
  padding-bottom:.3em; margin-left:.5em; opacity:.92;
}
.paylist{ display:grid; gap:10px; margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.25) }
.paylist li{
  font-size:var(--t-sm); color:rgba(255,255,255,.92);
  display:flex; gap:10px; align-items:flex-start; line-height:1.4;
}
.paylist li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:#fff; margin-top:.6em; flex:none;
}
.ticket .btn{ width:100%; margin-top:24px; background:#fff; color:var(--hot-b); box-shadow:0 3px 0 rgba(0,0,0,.18) }
.ticket .btn:hover{ background:#F6F1E9; color:var(--hot-b) }
.ticket .btn:active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.18) }
.ticket .cta-note{ color:rgba(255,255,255,.92) }
.ticket .dot{ background:#fff }
.ticket :focus-visible{ outline-color:#fff }
.barcode{
  height:30px; opacity:.5; margin-top:22px; color:#fff;
  background:repeating-linear-gradient(90deg,
    currentColor 0 2px, transparent 2px 5px,  currentColor 5px 6px,   transparent 6px 10px,
    currentColor 10px 13px, transparent 13px 15px, currentColor 15px 16px, transparent 16px 21px);
}
/* garantia: carimbo retangular sobreposto à borda do ticket */
.seal{
  position:absolute; right:-4px; bottom:-26px; z-index:3; rotate:-3deg;
  padding:10px 16px 11px; text-align:center;
  background:var(--paper); color:var(--indigo);
  border:2px solid var(--indigo); border-radius:var(--r-1);
  box-shadow:var(--sh-2);
}
.seal b{
  display:block; font:700 .8125rem/1.2 var(--f-cond);
  text-transform:uppercase; letter-spacing:.12em; color:var(--indigo);
}
.seal span{
  display:block; margin-top:2px; font:400 .75rem/1.2 var(--f-sans); color:var(--ink-2);
}
.warranty{ margin-top:52px; font-size:var(--t-sm); color:var(--ink-3); max-width:34em }
@media (min-width:900px){
  .offer{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,64px); align-items:start }
  .ticket{ margin-inline:0; padding:48px 34px 30px }
  /* A17: o cupom fura a borda superior da seção em ~24px */
  .offer-price{ margin-top:calc(-1 * var(--pad-l) - 24px) }
  .seal{ right:-14px }
}

/* ---------- 21. faq: só filetes ---------- */
.faq{ max-width:780px }
.faq details{ border-top:1px solid var(--line) }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 2px; font-weight:700; font-size:1rem;
  display:flex; justify-content:space-between; align-items:center; gap:18px; letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+" / ""; font-family:var(--f-cond); font-weight:700; font-size:1.5rem; color:var(--tangerine);
  line-height:1; flex:none; transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details p{ padding:0 2px 20px; color:var(--ink-2); font-size:var(--t-sm); max-width:62ch }

/* ---------- 22. fechamento: o verso da etiqueta (kraft) ---------- */
.closing{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--paper-3); color:var(--ink);
}
.closing::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grain); background-size:128px 128px; opacity:var(--grain-o);
}
/* marca d'água: o volume carimbado no verso, recortado pela borda de cima */
.closing::after{
  content:"+400" / ""; position:absolute; z-index:-2; pointer-events:none;
  top:-.36em; right:-.05em; font:700 38vw/.8 var(--f-cond); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:2px var(--kraft-ink); opacity:.2;
  font-variant-numeric:tabular-nums lining-nums;
}
.closing__in{ max-width:32rem }
.closing h2{ margin-top:16px }
.closing p{ margin-top:16px; color:var(--ink-2) }
.closing .btn{ margin-top:28px }

/* ---------- 23. footer ---------- */
footer{ border-top:1px solid var(--line); padding-block:30px 40px; font-size:var(--t-cap); color:var(--ink-3) }
/* :not(.foot) — este flex é do rodapé de 2 linhas da v2. O rodapé real do site
   é o .foot (grade de 3 colunas + barra); pegá-lo aqui encolhia .foot__grid
   para 753px e .foot__bar para 626px dentro de um .wrap de 952px */
footer:not(.foot) .wrap{ display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; align-items:baseline }
footer b{ color:var(--ink-2); font-weight:700 }

/* ---------- 24. barra de compra fixa (mobile) ---------- */
.buybar{
  position:fixed; inset:auto 0 0 0; z-index:50;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  background:var(--card); border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -16px rgba(0,0,0,.4);
  padding:10px var(--gutter) 22px; /* 22px fixos: env() é no-op sem viewport-fit */
  translate:0 110%; visibility:hidden;
  transition:translate .28s ease, visibility 0s linear .3s;
}
.buybar.show{ translate:0 0; visibility:visible; transition:translate .28s ease }
.buybar__p b{
  display:block; font:700 1.2rem/1 var(--f-cond);
  letter-spacing:var(--tr-num); font-variant-numeric:tabular-nums lining-nums; color:var(--ink);
}
.buybar__p span{
  display:block; margin-top:3px; font:700 .75rem/1 var(--f-cond);
  text-transform:uppercase; letter-spacing:var(--tr-lbl); color:var(--ink-3);
}
.buybar .btn{ padding:13px 20px; font-size:.95rem; box-shadow:0 2px 0 var(--hot-b) }
.buybar .btn:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--hot-b) }
@media (min-width:900px){
  .buybar{ display:none }
  .js body{ padding-bottom:0 }
}

/* ---------- 25. performance ---------- */
.faq-sec{ content-visibility:auto; contain-intrinsic-size:auto 760px }

/* ---------- 26. reveal: 3 momentos só ---------- */
/* .rv é apenas o gancho de observação; o efeito mora no modificador.
   O estado inicial só existe sob .js: sem script, nada nasce invisível. */
.js .rvm .toc-wrap{ -webkit-mask-size:100% 24%; mask-size:100% 24% }
.js .rvm.in .toc-wrap{ -webkit-mask-size:100% 100%; mask-size:100% 100% }

.js .rvg .idx{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
  transition-delay:calc((var(--i) - 1) * 40ms);
}
.js .rvg.in .idx{ opacity:1; transform:none }

.js .rvt .ticket{
  opacity:0; rotate:-3deg;
  transition:opacity .5s ease, rotate .5s cubic-bezier(.2,.7,.3,1);
}
.js .rvt.in .ticket{ opacity:1; rotate:-1.1deg }

/* ---------- 26b. centralização dos blocos estreitos ----------
   Pedido do Jeff (30/07, olhando o site no ar): "textos, imagens etc têm que ficar
   mais centralizados, tão jogados meio pra esquerda". A composição pendurava tudo
   na margem esquerda (leitura da ourela); num monitor largo isso deixava 400-600px
   vazios à direita. O rag interno dos balões continua — só o eixo muda pro centro.
   margin-inline vem DEPOIS das regras originais de propósito: vence o margin: X 0. */
.sec-head, .pains, .mat, .toc-wrap, .closing__in, .faq { margin-inline: auto; }

/* ---------- 27. movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .tag{ animation:none }
  .tape, .taper, .ticket, .pain, .seal{ rotate:none }
  /* especificidade igual à das regras que rotacionam, e vem depois: nunca quebra ao entrar card novo */
  .pains .pain{ rotate:none }
  .taper__g{ animation:none; flex:1 1 auto; white-space:normal; flex-wrap:wrap; justify-content:center; gap:2px 0 }
  .taper__g[aria-hidden="true"]{ display:none }
  .js .rvm .toc-wrap, .js .rvm.in .toc-wrap{ -webkit-mask-size:100% 100%; mask-size:100% 100%; transition:none }
  .js .rvg .idx, .js .rvg.in .idx{ opacity:1; transform:none; transition:none }
  .js .rvt .ticket, .js .rvt.in .ticket{ opacity:1; rotate:none; transition:none }
  .buybar{ transition:none }
  .btn{ transition:none }
  .faq summary::after{ transition:none }
}