/* =========================================================================
   Cartão Hoje — Design System
   Documentacao viva: design-system.html
   Paleta oficial: laranja #E1926B · carvao #2F2D2A (Guide e logo/)
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* cor */
  --ink:#24221F;
  --ink-2:#2F2D2A;          /* carvao oficial */
  --ink-3:#3D3A36;
  --muted:#5F5B55;      /* base #6B665F do guia, 1 passo mais escuro: AA sobre creme E bege */
  --muted-2:#69645E;    /* AA (4.5:1) sobre creme e bege */
  --cream:#F7F5F2;
  --cream-2:#E7E1D8;
  --white:#fff;
  --coral:#E1926B;          /* LARANJA OFICIAL da marca */
  --coral-ink:#A75D39;      /* laranja escurecido: AA (4.5:1) sobre creme e branco */
  --coral-soft:#EFCFBF;
  --coral-wash:#F7EBE3;
  --green:#2E9E5B;          /* exclusivo do WhatsApp */
  --green-ink:#1F7A45;      /* verde escurecido: AA (4.9:1) sobre creme e branco. So confirmacao de envio */
  --red-ink:#B3261E;        /* erro: AA (6:1) sobre creme e branco */
  --line:rgba(47,45,42,.11);
  --line-2:rgba(47,45,42,.18);
  --line-dark:rgba(255,255,255,.14);

  /* forma */
  --r-xs:10px; --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:40px; --r-full:999px;

  /* sombra (quente, discreta) */
  --sh-1:0 1px 2px rgba(47,45,42,.05);
  --sh-2:0 2px 6px rgba(47,45,42,.05), 0 12px 32px -14px rgba(47,45,42,.18);
  --sh-3:0 4px 12px rgba(47,45,42,.07), 0 30px 60px -22px rgba(47,45,42,.28);

  /* ritmo */
  --shell:1200px;
  --gut:clamp(20px,5vw,40px);
  --sec:clamp(72px,9vw,132px);

  /* escala de espaçamento (base 4px) — usar sempre um destes valores */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:28px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  /* tipografia */
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* movimento: entrada desacelera longa e macia, sem quique */
  --ease-enter:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font:400 1.0625rem/1.65 var(--sans);
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--coral-ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--coral);color:var(--ink)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:var(--s-4) var(--s-6);border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ---------- 3. Layout ---------- */
.shell{width:min(100% - var(--gut)*2, var(--shell));margin-inline:auto}
.shell-wide{width:min(100% - var(--gut)*2, 1360px);margin-inline:auto}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(56px,6vw,88px)}
/* Duas seções seguidas SEM mudança de fundo somavam o padding das duas
   (até 228px de vazio). Com a cor igual não há separador visual, então a
   segunda não repete o respiro: o vão volta a ser o de uma seção. */
.section:not(.dark):not(.tinted)+.section:not(.dark):not(.tinted),
.section:not(.dark):not(.tinted)+.section--tight:not(.dark):not(.tinted),
.section--tight:not(.dark):not(.tinted)+.section:not(.dark):not(.tinted),
.section--tight:not(.dark):not(.tinted)+.section--tight:not(.dark):not(.tinted){padding-top:0}
.dark{background:var(--ink-2);color:#F4F0EA}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .lead,.dark .muted{color:rgba(244,240,234,.72)}
.tinted{background:var(--cream-2)}

.grid{display:grid;--gap:clamp(20px,2.4vw,30px);gap:var(--gap)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
/* .grid--center: centraliza a última linha quando ela fica incompleta */
.grid--center{display:flex;flex-wrap:wrap;justify-content:center;--n:3}
.grid--center>*{flex:0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));min-width:0}
.grid--center.cols-2{--n:2}
.grid--center.cols-4{--n:4}
@media (max-width:960px){.grid--center.cols-3,.grid--center.cols-4{--n:2}}
@media (max-width:620px){.grid--center.cols-2,.grid--center.cols-3,.grid--center.cols-4{--n:1}}

/* ---------- 4. Tipografia utilitária ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 var(--s-5)
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--coral);border-radius:2px}
.dark .eyebrow{color:rgba(244,240,234,.62)}

.display{font-size:clamp(2.7rem,6.4vw,4.6rem);letter-spacing:-.04em;line-height:1}
.h2{font-size:clamp(1.95rem,3.6vw,3rem)}
.h3{font-size:clamp(1.35rem,1.9vw,1.6rem);letter-spacing:-.025em}
.h4{font-size:1.075rem;letter-spacing:-.02em;line-height:1.3}
.lead{font-size:clamp(1.075rem,1.35vw,1.22rem);line-height:1.6;color:var(--muted);max-width:56ch}
h1+.lead,h2+.lead,h3+.lead{margin-top:var(--s-5)}
.muted{color:var(--muted)}
.small{font-size:.9rem;line-height:1.55}
.xs{font-size:.8rem;line-height:1.5}
.sec-head{max-width:62ch;margin-bottom:clamp(40px,4.5vw,64px)}
.sec-head--last{margin-bottom:0}
.mt-l{margin-top:clamp(32px,4vw,48px)}
.mt-m{margin-top:var(--s-6)}

/* ---------- 5. Botões ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);
  padding:var(--s-4) var(--s-7);border:1.5px solid var(--bd);border-radius:var(--r-full);
  background:var(--bg);color:var(--fg);
  font-size:.97rem;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, border-color .18s;
  box-shadow:var(--sh-1);white-space:nowrap
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-2);box-shadow:none}
.btn--ghost:hover{--bd:var(--ink);background:rgba(47,45,42,.03)}
.btn--coral{--bg:var(--coral);--fg:var(--ink)}
.btn--coral:hover{--bg:#EEA580}
.btn--sm{padding:var(--s-3) var(--s-5);font-size:.9rem}
.dark .btn--ghost{--fg:#fff;--bd:var(--line-dark)}
.dark .btn--ghost:hover{--bd:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;
  border-bottom:1.5px solid var(--coral);padding-bottom:3px;transition:gap .18s
}
.link-arrow:hover{gap:var(--s-4)}
.link-in{font-weight:700;border-bottom:1.5px solid var(--coral);transition:color .18s}
.link-in:hover{color:var(--coral-ink)}
.dark .link-in:hover{color:var(--coral)}
.link-arrow svg{width:15px;height:15px}

/* ---------- 6. Header ---------- */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(247,245,242,.82);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s
}
.hdr[data-stuck]{border-bottom-color:var(--line);background:rgba(247,245,242,.95)}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);height:72px}
.brand{display:flex;align-items:center;flex:none}
.brand img,.brand svg{width:85px;height:auto;color:var(--coral)}
/* area de protecao da marca: 1/2 da altura do wordmark em cada lado */
.brand{padding-inline:2px}
.nav{display:flex;gap:clamp(16px,2vw,32px);margin-inline:auto}
.nav a{
  font-size:.94rem;font-weight:600;color:var(--ink-3);padding:8px 2px;position:relative;
  white-space:nowrap;transition:color .18s
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;
  background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.8,.3,1)
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr__cta{display:flex;align-items:center;gap:var(--s-3);flex:none}
.burger{
  display:none;width:44px;height:44px;border:1.5px solid var(--line-2);border-radius:var(--r-full);
  background:transparent;cursor:pointer;align-items:center;justify-content:center
}
.burger i{display:block;width:17px;height:1.8px;background:var(--ink);border-radius:2px;position:relative;transition:background .22s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .22s}
.burger i::before{top:-5.5px}
.burger i::after{top:5.5px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-5.5px) rotate(-45deg)}
/* Com sete itens o menu precisa de ~1030 px de viewport para caber em uma
   linha (mais a barra de rolagem). Abaixo disso os rótulos quebravam em duas
   linhas: o hambúrguer assume antes. */
@media (max-width:1080px){
  .nav,.hdr__cta .btn{display:none}
  .burger{display:inline-flex}
  .hdr__in{justify-content:space-between}
}
.mnav{display:none;border-top:1px solid var(--line);background:var(--cream);padding:var(--s-2) var(--gut) var(--s-6)}
.mnav[data-open]{display:block}
.mnav a{display:block;padding:var(--s-4) 0;font-size:1.05rem;font-weight:600;border-bottom:1px solid var(--line)}
.mnav .btn{width:100%;margin-top:var(--s-6)}

/* ---------- 7. Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,6vw,86px) clamp(64px,8vw,110px)}
.hero__arcs{position:absolute;inset:auto auto -6% -12%;width:min(70vw,720px);color:var(--coral);opacity:.2;pointer-events:none}
.hero__glow{
  position:absolute;top:-20%;right:-8%;width:min(58vw,700px);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(225,146,107,.3),rgba(225,146,107,0) 62%)
}
.hero__in{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:940px){.hero__in{grid-template-columns:1fr}}
.hero h1{margin-bottom:var(--s-6)}
.hero .lead{max-width:50ch}
.hero .btn-row{margin-top:var(--s-8)}
.hero__facts{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--line)}
.hero__facts li{display:flex;align-items:center;gap:var(--s-2);font-size:.875rem;font-weight:600;color:var(--muted)}
.hero__facts svg{width:16px;height:16px;color:var(--coral-ink);flex:none}

.hero__art{position:relative;display:flex;justify-content:center;align-items:center;min-height:440px}
.hero__photo{
  width:min(100%,420px);aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-3);transform:rotate(1.2deg)
}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero__card{
  position:absolute;left:-6%;bottom:1%;width:min(42%,182px);
  filter:drop-shadow(0 26px 44px rgba(47,45,42,.34));transform:rotate(-7deg);
  animation:float 7s ease-in-out infinite
}
@keyframes float{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-12px)}}
.hero__chip{
  position:absolute;right:-2%;top:7%;background:var(--white);border-radius:var(--r);
  padding:var(--s-4) var(--s-5);box-shadow:var(--sh-2);display:flex;align-items:center;gap:var(--s-3)
}
.hero__chip strong{display:block;font-size:1.35rem;letter-spacing:-.03em;line-height:1}
.hero__chip span{font-size:.74rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.hero__chip .ic{width:38px;height:38px;border-radius:var(--r-full);background:var(--coral-wash);display:grid;place-items:center;flex:none}
.hero__chip .ic svg{width:19px;height:19px;color:var(--coral-ink)}
@media (max-width:520px){
  .hero__chip{display:none}
  .hero__card{width:46%;left:-2%}
  .hero__art{min-height:0}
}

/* ---------- 8. Faixa de confiança ---------- */
.trust{border-block:1px solid var(--line);padding-block:var(--s-6);background:var(--cream)}
.trust__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-5) var(--s-8)}
.trust__item{display:flex;align-items:center;gap:var(--s-3);font-size:.86rem;font-weight:600;color:var(--muted)}
.trust__item strong{color:var(--ink);font-weight:800}
.trust__item svg{width:17px;height:17px;color:var(--coral-ink);flex:none}

/* ---------- 9. Cards ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px);box-shadow:var(--sh-1);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,border-color .22s
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.card__ic{width:48px;height:48px;border-radius:var(--r-sm);background:var(--coral-wash);display:grid;place-items:center;margin-bottom:var(--s-6)}
.card__ic svg{width:23px;height:23px;color:var(--coral-ink)}
.card h2,.card h3{margin-bottom:var(--s-2)}
.card p{color:var(--muted);font-size:.955rem;line-height:1.6}
.dark .card{background:rgba(255,255,255,.045);border-color:var(--line-dark);box-shadow:none}
.dark .card:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.26)}
.dark .card p{color:rgba(244,240,234,.72)}
.dark .card__ic{background:rgba(225,146,107,.16)}
.dark .card__ic svg{color:var(--coral)}

/* ---------- 10. Passos ---------- */
.steps{counter-reset:s}
.step{position:relative;padding-left:var(--s-16);padding-bottom:var(--s-8)}
.step:last-child{padding-bottom:0}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:-2px;width:42px;height:42px;border-radius:var(--r-full);
  background:var(--ink);color:#fff;display:grid;place-items:center;
  font-size:.92rem;font-weight:800;letter-spacing:0
}
.step:not(:last-child)::after{
  content:"";position:absolute;left:21px;top:48px;bottom:6px;width:1.5px;
  background:linear-gradient(var(--line-2),transparent)
}
.step h3{font-size:1.12rem;margin-bottom:var(--s-2)}
.step p{color:var(--muted);font-size:.95rem}
.dark .step::before{background:var(--coral);color:var(--ink)}
.dark .step p{color:rgba(244,240,234,.72)}
.dark .step:not(:last-child)::after{background:linear-gradient(var(--line-dark),transparent)}

/* ---------- 11. Split (texto + imagem) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,76px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
/* quando a coluna vizinha é uma lista longa, centralizar deixa o título
   boiando: alinha no topo e acompanha a rolagem */
.split--top{align-items:start}
@media (min-width:901px){.split--top>:first-child{position:sticky;top:104px}}
.split__art{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:4/3}
.split__art img{width:100%;height:100%;object-fit:cover}

/* imagem de produto recortada (PNG com alfa): sem moldura, sem corte */
.prod-art{position:relative;display:flex;align-items:flex-end;justify-content:center}
.prod-art::before{
  content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:92%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(225,146,107,.3),rgba(225,146,107,0) 66%)
}
.prod-art img{position:relative;width:100%;max-width:480px;height:auto}
.dark .prod-art::before{background:radial-gradient(circle,rgba(225,146,107,.22),rgba(225,146,107,0) 66%)}

/* a arte do iPhone já vem cortada na base: encosta na borda da seção quando
   logo abaixo vem uma faixa de cor, que funciona como "chão" */
.prod-art--bleed-sec{margin-bottom:calc(var(--sec) * -1)}
@media (min-width:901px){.split--flip .split__art{order:-1}}

/* ---------- 12. Parceiros ---------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,5vw,60px);justify-content:center}
.logos a{display:inline-flex;align-items:center;border-radius:var(--r-sm)}
.logos img{height:34px;width:auto;opacity:.9;transition:opacity .2s}
.logos img:hover{opacity:1}
.logos img.tall{height:44px}
.logos img.sq{height:52px}
/* Logos monocromáticos brancos: exibidos sobre chip escuro em fundo claro */
.logos--onlight{gap:16px}
.logos--onlight img{background:var(--ink-2);border-radius:var(--r-sm);padding:var(--s-3) var(--s-4);height:52px;box-sizing:content-box;opacity:.92}

.pcard{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--s-6);color:#fff;isolation:isolate
}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.pcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(24,22,20,.9) 6%,rgba(24,22,20,.42) 46%,rgba(24,22,20,.14))}
.pcard:hover img{transform:scale(1.05)}
.pcard__tag{
  align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.02em;text-transform:none;
  background:var(--coral);color:var(--ink);padding:var(--s-1) var(--s-3);border-radius:var(--r-full);margin-bottom:var(--s-4)
}
.pcard h3{font-size:1.28rem;margin-bottom:var(--s-2);color:#fff}
.pcard p{font-size:.92rem;color:rgba(255,255,255,.82);line-height:1.5}

/* ---------- 13. App ---------- */
.app__art{display:flex;justify-content:center}
.app__art img{width:min(100%,440px);filter:drop-shadow(0 34px 60px rgba(0,0,0,.42))}
.applist li{display:flex;gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--line-dark);align-items:flex-start}
.applist li:last-child{border-bottom:0}
.applist svg{width:20px;height:20px;color:var(--coral);flex:none;margin-top:2px}
.applist strong{display:block;font-weight:700;letter-spacing:-.015em}
.applist span{font-size:.9rem;color:rgba(244,240,234,.68)}
.stores{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}
.stores a{transition:transform .18s,opacity .18s;border-radius:var(--r-xs)}
.stores a:hover{transform:translateY(-2px);opacity:.85}
.stores img{height:46px;width:auto}

/* ---------- 14. FAQ ---------- */
.faq{max-width:860px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-6);
  padding:var(--s-6) var(--s-5);cursor:pointer;list-style:none;
  font-size:1.055rem;font-weight:700;letter-spacing:-.02em;line-height:1.4
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--coral-ink)}
.faq summary .pm{
  flex:none;width:26px;height:26px;border-radius:var(--r-full);border:1.5px solid var(--line-2);
  display:grid;place-items:center;position:relative;margin-top:2px;transition:background .2s,border-color .2s,transform .25s
}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--ink);border-radius:2px;transition:transform .25s}
.faq summary .pm::before{width:11px;height:1.7px}
.faq summary .pm::after{width:1.7px;height:11px}
.faq details[open] summary .pm{background:var(--coral);border-color:var(--coral);transform:rotate(90deg)}
/* o container gira 90°: some com a barra horizontal e sobra a vertical, que a rotação deita em "−" */
.faq details[open] summary .pm::before{transform:scaleX(0)}
.faq__a{padding:0 var(--s-16) var(--s-6) var(--s-5);color:var(--muted);font-size:.985rem;line-height:1.68}
.faq__a p+p,.faq__a ul,.faq__a ol,.faq__a ul+p,.faq__a ol+p{margin-top:var(--s-3)}
.faq__a li{position:relative;padding-left:var(--s-5);margin-bottom:var(--s-2)}
.faq__a li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--coral)}
/* lista numerada: o número entra no lugar do ponto; subitem leva ponto vazado */
.faq__a ol{counter-reset:faq}
.faq__a ol>li{counter-increment:faq;padding-left:var(--s-6)}
.faq__a ol>li::before{content:counter(faq) ".";top:0;left:0;width:auto;height:auto;border-radius:0;background:none;font-weight:700;color:var(--coral-ink)}
.faq__a li li::before{background:none;border:1.5px solid var(--coral)}
/* o rótulo em negrito ("Quitar:", "Importante:") guia a leitura: fica em tinta */
.faq__a strong{color:var(--ink);font-weight:700}
.faq__a a{color:var(--coral-ink);font-weight:600;border-bottom:1px solid var(--coral-soft)}
.faq__group{margin-bottom:clamp(40px,5vw,64px)}
.faq__group h2{font-size:1.5rem;margin-bottom:var(--s-2)}

/* ---------- 15. Atendimento ---------- */
/* numero + legenda formam um par: coladinhos entre si, separados do par seguinte */
.ch__num{font-size:1.42rem;font-weight:800;letter-spacing:-.035em;display:block;margin-top:var(--s-4)}
.ch__num a:hover{color:var(--coral-ink)}
.ch__hint{display:block;font-size:.79rem;color:var(--muted-2);font-weight:600;margin-top:var(--s-1)}
.ch__hint+.ch__num{margin-top:var(--s-5)}
/* no celular o telefone é o alvo principal: a área de toque cresce para ~47px
   sem mexer no layout — o padding é cancelado pela margem negativa */
@media (max-width:700px){
  .ch__num a{display:inline-block;padding-block:var(--s-2);margin-block:calc(var(--s-2) * -1)}
}
.ch--wa .card__ic{background:rgba(46,158,91,.12)}
.ch--wa .card__ic svg{color:var(--green)}

/* ---------- 16. Faixa CTA ---------- */
.cta-band{
  background:radial-gradient(120% 150% at 88% 10%, #4A392B 0%, #332F2A 44%, #232120 100%);
  border-radius:var(--r-xl);padding:clamp(38px,5.5vw,72px);position:relative;overflow:hidden;color:#fff
}
.cta-band__arcs{position:absolute;right:-8%;top:-34%;width:min(54%,470px);color:var(--coral);opacity:.22;pointer-events:none}
.cta-band__in{position:relative;max-width:56ch}
.cta-band h2{color:#fff;margin-bottom:var(--s-4)}
.cta-band p{color:rgba(255,255,255,.78);font-size:1.06rem}
.cta-band .btn-row{margin-top:var(--s-8)}
.cta-band .btn--ghost{--fg:#fff;--bd:rgba(255,255,255,.28)}
.cta-band .btn--ghost:hover{--bd:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}

/* ---------- 17. Documentos / tarifas ---------- */
.docs{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.doc{
  display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);border:1px solid var(--line-2);
  border-radius:var(--r-full);font-size:.88rem;font-weight:600;transition:border-color .2s,background .2s
}
.doc:hover{border-color:var(--ink);background:var(--white)}
.doc svg{width:15px;height:15px;color:var(--muted)}
.dark .doc{border-color:var(--line-dark)}
.dark .doc:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07)}
.dark .doc svg{color:var(--coral)}

/* Lista de documentos com descrição (Transparência) */
.doclist{display:flex;flex-direction:column;gap:var(--s-2);list-style:none}
.doclist a{
  display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-4);
  border:1px solid var(--line-2);border-radius:var(--r-sm);transition:border-color .2s,background .2s
}
.doclist a:hover{border-color:var(--ink);background:var(--white)}
.doclist svg{width:17px;height:17px;color:var(--muted);flex:none;margin-top:2px}
.doclist__txt{display:flex;flex-direction:column;gap:3px}
.doclist__txt strong{font-size:.92rem;font-weight:700;line-height:1.35}
.doclist__txt span{font-size:.8rem;color:var(--muted-2);line-height:1.5}
.dark .doclist a{border-color:var(--line-dark)}
.dark .doclist a:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07)}
.dark .doclist svg{color:var(--coral)}

.price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4);
  padding:var(--s-6) var(--s-7);background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-1)
}
.price b{font-size:1.6rem;letter-spacing:-.035em;font-weight:800}

/* ---------- 18. Footer ---------- */
.ft{background:var(--ink-2);color:rgba(244,240,234,.72);padding-block:clamp(56px,7vw,88px) 34px}
.ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(28px,4vw,56px)}
@media (max-width:900px){.ft__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__grid{grid-template-columns:1fr}}
.ft h4{color:#fff;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:var(--s-5);font-weight:700}
.ft a{color:rgba(244,240,234,.72);transition:color .18s}
.ft a:hover{color:var(--coral)}
.ft li{font-size:.93rem}
/* area de toque: o link ocupa a linha inteira em vez de so o texto */
.ft li a{display:inline-block;padding-block:var(--s-2)}
/* so o logo: o seletor antigo pegava tambem os svg dos icones sociais,
   forcando neles a cor coral e um margin-bottom de 20px */
.ft__brand>img{width:95px;height:auto;margin-bottom:var(--s-5)}
/* Sem chip: as marcas do Instagram, YouTube e Facebook ja tem moldura propria,
   e circulo + moldura dava frame dentro de frame. Area de toque de 44px preservada. */
.ft__soc{display:flex;gap:var(--s-2);margin-top:var(--s-6);margin-left:-10px}
.ft__soc a{
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);
  color:rgba(244,240,234,.62);transition:color .2s
}
.ft__soc a:hover{color:var(--coral)}
.ft__soc svg{width:24px;height:24px}

/* ---------- 18b. Lockup Hoje Pay ---------- */
.lockup{display:flex;align-items:center;width:fit-content}
.lockup img{height:38px;width:auto}
.lockup--lg img{height:clamp(44px,5vw,62px)}
.lockup+h1,.lockup+h2{margin-top:var(--s-5)}
.eyebrow+.lockup{margin-top:calc(var(--s-1) * -1)}
.ft__legal{
  margin-top:clamp(40px,5vw,64px);padding-top:var(--s-6);border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-7);justify-content:space-between;align-items:center;
  font-size:.8rem;color:rgba(244,240,234,.52)
}
.ft__legal p{max-width:78ch}
.ft__co{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}
.ft__co a{display:inline-flex;align-items:center}
.ft__co img{height:34px;width:auto;opacity:.85;transition:opacity .2s}
.ft__co a:hover img{opacity:1}

/* ---------- 19. Página interna ---------- */
.phero{padding-block:clamp(46px,6vw,78px) clamp(34px,4vw,54px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
/* Em páginas onde o valor está no conteúdo logo abaixo (fale conosco), o
   cabeçalho cede altura: o título ainda abre a página, mas sem empurrar
   telefones e horários para fora da primeira dobra. */
.phero--compact{padding-block:clamp(30px,3.6vw,48px) clamp(22px,2.6vw,32px)}
/* Primeira seção depois do hero: o respiro cheio (até 132px) somava ao
   padding do hero e afundava o conteúdo. Aqui a separação já vem da borda
   do hero, então basta um vão curto. */
.section--flush{padding-top:clamp(26px,3vw,40px)}
.phero__glow{position:absolute;top:-70%;right:-6%;width:min(50vw,560px);aspect-ratio:1;pointer-events:none;background:radial-gradient(circle,rgba(225,146,107,.26),rgba(225,146,107,0) 62%)}
.phero__in{position:relative}
.crumbs ol{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin-bottom:var(--s-5)}
/* área de toque maior no link sem deslocar o texto: a margem negativa
   cancela o padding, então o item mantém a altura original */
.crumbs a{display:inline-block;padding-block:var(--s-2);margin-block:calc(var(--s-2) * -1)}
.crumbs a:hover{color:var(--ink)}
.crumbs li+li::before{content:"/";margin-right:var(--s-2);color:var(--line-2)}

/* ---------- 20. Formulário ---------- */
.field{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-5)}
.field label{font-size:.86rem;font-weight:700;letter-spacing:-.01em}
.field input,.field select,.field textarea{
  font:inherit;font-size:.97rem;padding:var(--s-3) var(--s-4);border:1.5px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--white);color:var(--ink);transition:border-color .18s,box-shadow .18s
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--coral);box-shadow:0 0 0 4px rgba(225,146,107,.22)
}
.field textarea{resize:vertical;min-height:140px}
.field input::placeholder{color:var(--muted-2);opacity:.75}
/* Erro do campo, logo abaixo dele. Vazio, anula o gap do .field e não ocupa
   espaço, mas continua no DOM para o leitor de tela anunciar (aria-live). */
.field__erro{font-size:.82rem;font-weight:600;line-height:1.4;color:var(--red-ink)}
.field__erro:empty{margin-top:calc(var(--s-2) * -1)}
.field input[aria-invalid="true"]{border-color:var(--red-ink)}
/* Prefixo fixo dentro do campo (ex.: +55 no telefone): não é editável e não
   vai no valor; o clique passa para o campo. Sem JS some, porque aí o 55 é digitado. */
.field__grupo{position:relative;display:flex}
.field__grupo input{flex:1;min-width:0;padding-left:calc(var(--s-4) + 2.6em)}
.field__prefixo{position:absolute;left:var(--s-4);top:50%;transform:translateY(-50%);
  font-size:.97rem;font-weight:600;color:var(--muted);pointer-events:none}
.no-js .field__prefixo{display:none}
.no-js .field__grupo input{padding-left:var(--s-4)}
.field .hint{font-size:.78rem;color:var(--muted-2)}
.form-note{font-size:.8rem;color:var(--muted-2);margin-top:var(--s-4);line-height:1.55}
/* Retorno do envio, logo abaixo do botão. Vazio, não ocupa espaço; continua no DOM
   para o leitor de tela anunciar quando o texto chega (role="status"). */
.form-msg,.card .form-msg{margin-top:var(--s-4);font-size:.92rem;font-weight:700;line-height:1.45;color:var(--green-ink)}
.form-msg:empty{margin:0}
.form-msg--erro,.card .form-msg--erro{color:var(--red-ink)}

/* ---------- 21. Reveal ---------- */
.rv{opacity:0;transform:translateY(18px)}
.rv[data-in]{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
@media print{.rv{opacity:1!important;transform:none!important}}
.no-js .rv{opacity:1;transform:none}

/* ---------- 22. Cartões aceitos ---------- */
.banks{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-top:var(--s-6)}
.banks li{
  display:flex;align-items:center;justify-content:center;
  min-height:72px;padding:var(--s-4) var(--s-7);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--sh-1)
}
.banks img{height:26px;width:auto}
.banks img.bb{height:22px}
.banks img.btg{height:40px}
@media (max-width:520px){
  .banks{gap:var(--s-3)}
  .banks li{min-height:64px;padding:var(--s-3) var(--s-5);flex:1 1 100%}
}

/* ---------- 23. Aviso em destaque ---------- */
.note{
  display:flex;gap:var(--s-4);align-items:flex-start;
  padding:var(--s-5) var(--s-6);border:1.5px solid var(--coral-soft);border-radius:var(--r-sm);
  background:var(--coral-wash);font-size:.95rem;line-height:1.55;color:var(--ink)
}
.note svg{width:22px;height:22px;color:var(--coral-ink);flex:none;margin-top:1px}
.dark .note{background:rgba(225,146,107,.12);border-color:rgba(225,146,107,.38);color:rgba(244,240,234,.86)}
.dark .note svg{color:var(--coral)}
.cta-band .note{
  margin-top:var(--s-6);font-size:.95rem;
  background:rgba(225,146,107,.14);border-color:rgba(225,146,107,.4);color:rgba(255,255,255,.86)
}
.cta-band .note svg{color:var(--coral)}
.cta-band .note strong{color:#fff}

/* ---------- 24. Figura dentro do passo ---------- */
.step__fig{margin:var(--s-4) 0 0;max-width:420px}
.step__fig img{
  width:100%;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--white);box-shadow:var(--sh-1)
}
.step__fig figcaption{font-size:.78rem;color:var(--muted-2);margin-top:var(--s-2);line-height:1.5}
.dark .step__fig img{border-color:var(--line-dark)}
.dark .step__fig figcaption{color:rgba(244,240,234,.55)}

/* ---------- 21. Texto legal longo (política de privacidade) ---------- */
.legal{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.legal{grid-template-columns:1fr}}

.legal__toc{position:sticky;top:96px;font-size:.86rem;line-height:1.5}
@media (max-width:900px){
  .legal__toc{position:static;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:var(--s-5)}
}
.legal__toc h2{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s-4)
}
.legal__toc ol{display:flex;flex-direction:column;gap:var(--s-2)}
.legal__toc a{color:var(--muted);transition:color .18s}
.legal__toc a:hover{color:var(--ink)}

.legal__body>*+*{margin-top:var(--s-5)}
.legal__body h2{font-size:1.18rem;margin-top:clamp(40px,4.5vw,58px);scroll-margin-top:96px}
.legal__body>h2:first-child{margin-top:0}
.legal__body h3{font-size:1rem;margin-top:var(--s-8)}
.legal__body p,.legal__body li{color:var(--muted);font-size:.98rem;line-height:1.7}
.legal__body ul,.legal__body ol{display:flex;flex-direction:column;gap:var(--s-3);padding-left:var(--s-6)}
.legal__body ul>li{list-style:disc}
.legal__body ol>li{list-style:decimal}
.legal__body strong{color:var(--ink);font-weight:700}
.legal__body a:not(.btn){font-weight:700;border-bottom:1.5px solid var(--coral)}
.legal__body a:not(.btn):hover{color:var(--coral-ink)}

.legal__wrap{overflow-x:auto}
.legal__tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:440px}
.legal__tbl th,.legal__tbl td{text-align:left;vertical-align:top;padding:var(--s-4);border-bottom:1px solid var(--line)}
.legal__tbl th{font-weight:700;color:var(--ink);font-size:.82rem;letter-spacing:.02em}
.legal__tbl td{color:var(--muted);line-height:1.6}

/* Pendência de revisão jurídica — remover as marcações antes de publicar */
.pend{
  display:block;border-left:3px solid var(--coral);background:var(--coral-wash);
  padding:var(--s-4) var(--s-5);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.88rem;line-height:1.6;color:var(--ink-3)
}
.legal__body .pend b{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral-ink);margin-bottom:var(--s-2)
}
.legal__body .pend,.legal__body .pend *{font-size:.88rem}
.legal__body .pend{color:var(--ink-3)}

/* ---------- 25. Baixar o app ---------- */
/* Regra da página: iPhone, Android e o QR cabem juntos na primeira tela.
   Por isso os três dividem UMA linha e os cartões são enxutos — ícone,
   nome do sistema e o badge, nada mais. */
.dlhero{padding-block:clamp(28px,3.2vw,44px) clamp(40px,4.5vw,60px);position:relative;overflow:hidden}
.dlhero__in{position:relative}
.dlhero .lead{max-width:60ch}

.dl{
  display:grid;align-items:stretch;
  grid-template-columns:1fr 1fr 1fr;
  gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(26px,3vw,38px)
}
/* Em tablet o QR não cabe numa terceira coluna legível: desce inteiro,
   deitado, embaixo dos dois cartões. */
@media (max-width:1024px){
  .dl{grid-template-columns:1fr 1fr}
  .dl__qr{grid-column:1/-1}
}
@media (max-width:620px){.dl{grid-template-columns:1fr}}

/* Cartão escuro por dois motivos: destaca a ação contra o creme da página e
   é o único fundo em que os badges oficiais — arte branca — aparecem. Em
   fundo claro o da App Store fica literalmente invisível. */
.dl__card{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--ink-2);color:#F4F0EA;
  border-radius:var(--r-lg);padding:clamp(22px,2.4vw,28px);
  box-shadow:var(--sh-2);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,background .22s
}
.dl__card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);background:var(--ink-3)}
.dl__card:active{transform:translateY(-1px)}
/* o laranja escurecido do foco global desaparece no cartão escuro */
.dl__card:focus-visible{outline-color:var(--coral)}
.dl__os{
  width:48px;height:48px;border-radius:var(--r-sm);background:rgba(225,146,107,.16);
  display:grid;place-items:center;margin-bottom:var(--s-5)
}
.dl__os svg{width:24px;height:24px;color:var(--coral)}
.dl__t{font-size:1.28rem;font-weight:800;letter-spacing:-.03em;line-height:1.2;color:#fff}
.dl__hint{font-size:.88rem;color:rgba(244,240,234,.62);margin:var(--s-2) 0 var(--s-6)}
/* O respiro vem da margem do texto acima, NÃO de padding aqui: com
   box-sizing:border-box o padding sairia de dentro do height e o badge
   encolheria. margin-top:auto só alinha os dois cartões pela base. */
.dl__badge{height:48px;width:auto;margin-top:auto}

/* O terceiro cartão é claro de propósito: os dois escuros são a ação,
   este é a alternativa. */
.dl__qr{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s-4);text-align:center;
  background:var(--cream-2);border-radius:var(--r-lg);
  padding:clamp(18px,2vw,24px)
}
.dl__qr img{width:clamp(112px,10.5vw,138px);height:auto;border-radius:var(--r-xs)}
.dl__qrtxt{display:flex;flex-direction:column;gap:var(--s-2);align-items:center}
.dl__qrt{font-size:.95rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.35}
.dl__url{
  font-size:.8rem;font-weight:700;letter-spacing:-.01em;color:var(--muted-2);
  border-bottom:1.5px solid var(--coral);padding-bottom:2px
}
@media (max-width:1024px){
  .dl__qr{flex-direction:row;text-align:left;justify-content:flex-start;gap:clamp(20px,3vw,32px);padding:clamp(20px,2.4vw,28px)}
  .dl__qr img{width:128px;flex:none}
  .dl__qrtxt{align-items:flex-start}
  .dl__qrt{font-size:1.05rem}
}
/* Precisa vir DEPOIS de .dl__qr{display:flex}: mesma especificidade, quem
   fecha por ultimo ganha. No celular ninguem le o proprio QR na propria tela. */
@media (max-width:620px){.dl__qr{display:none}}

/* Sobreposição de redirecionamento.
   Nasce escondida: só aparece se o script no <head> marcar <html data-redir>,
   e some sozinha se a loja não assumir a tela. O conteúdo embaixo é a página
   inteira, sempre presente no HTML — nunca há tela branca. */
.redir{display:none}
html[data-redir]{overflow:hidden}
html[data-redir] .redir{
  display:flex;position:fixed;inset:0;z-index:200;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--s-6);
  background:var(--cream);text-align:center;padding:var(--gut)
}
.redir__mark{width:56px;height:56px;animation:redir-pulse 1.6s ease-in-out infinite}
.redir__spin{
  width:26px;height:26px;border-radius:50%;
  border:2.5px solid var(--coral-soft);border-top-color:var(--coral-ink);
  animation:redir-spin .7s linear infinite
}
.redir strong{display:block;font-size:1.1rem;font-weight:700;letter-spacing:-.02em}
.redir small{display:block;font-size:.88rem;color:var(--muted);margin-top:var(--s-2)}
.redir__out{font-size:.9rem;color:var(--muted);border-bottom:1.5px solid var(--coral);padding-bottom:3px}
.redir__out:hover{color:var(--ink)}
.redir__ios,.redir__android{display:none}
html[data-os="ios"] .redir__ios{display:inline}
html[data-os="android"] .redir__android{display:inline}
@keyframes redir-spin{to{transform:rotate(360deg)}}
@keyframes redir-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.redir__mark,.redir__spin{animation:none}}
@media print{
  .redir{display:none!important}
  .dl__qr{display:flex!important;background:none;padding:0}
}

/* ---------- 26. iPlace Hoje ---------- */
/* Foto do hero com o selo "21x" por cima: reaproveita o .hero__chip da home,
   que precisa de um pai posicionado. */
.ph-art{position:relative}
.ph-art .hero__chip{top:auto;right:auto;left:-5%;bottom:9%}
@media (max-width:900px){.ph-art .hero__chip{left:var(--s-4);bottom:var(--s-4)}}

/* Plano 21x + parcela final: barra empilhada de parte-do-todo (o valor do
   produto). Dois blocos sólidos separados por um vão de 2 px, com a divisão
   no meio da faixa de 70% a 90% — o eixo embaixo marca essa faixa. As cores
   são dois degraus do mesmo laranja, do claro para o escuro, porque as 21
   parcelas vêm antes da final (par validado como rampa ordinal: mesmo matiz,
   ΔL visível, 2,46:1 sobre o branco). Identidade nunca só pela cor: cada
   bloco tem rótulo e amostra. Barra e eixo são desenho (aria-hidden); quem
   lê é a legenda. No desktop ela fica alinhada a cada bloco; abaixo de
   900 px vira lista embaixo do eixo, e a barra mantém a proporção real.
   Usado em /iplace-hoje/ e /hoje-pay/, cada um com o próprio texto: mudou a
   marcação em um, muda no outro. */
.plan{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,44px);box-shadow:var(--sh-1);
  --split:80%;--pa:var(--coral);--pb:var(--coral-ink)
}
.plan__chart{display:grid;grid-template-areas:"legend" "bar" "axis"}
.plan__legend,.plan__bar{display:grid;grid-template-columns:var(--split) minmax(0,1fr);column-gap:2px}
.plan__legend{grid-area:legend;margin-bottom:var(--s-4)}
.plan__k{font-size:.92rem;line-height:1.45;color:var(--muted);padding-right:var(--s-4)}
.plan__k strong{
  display:flex;align-items:flex-start;gap:var(--s-2);margin-bottom:var(--s-1);color:var(--ink);
  font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:800;letter-spacing:-.03em;line-height:1.15
}
/* amostra centrada na PRIMEIRA linha (1.15em = altura da linha): rótulo que
   quebra em duas ("De 70% a 90% do valor do produto" no celular) não a
   deixa boiando entre as linhas */
.plan__k strong::before{content:"";flex:none;width:12px;height:12px;margin-top:calc((1.15em - 12px) / 2);border-radius:3px;background:var(--pa)}
.plan__k--b strong::before{background:var(--pb)}
/* quadrado na linha de base (0%), 4 px de raio só na ponta */
.plan__bar{grid-area:bar;height:24px}
.plan__a{background:var(--pa)}
.plan__b{background:var(--pb);border-radius:0 4px 4px 0}
.plan__axis{grid-area:axis;position:relative;height:34px;margin-top:var(--s-2);border-top:1px solid var(--line-2)}
.plan__axis span{
  position:absolute;top:12px;left:var(--x);transform:translateX(-50%);
  font-size:.78rem;font-weight:600;line-height:1;color:var(--muted-2);font-variant-numeric:tabular-nums
}
.plan__axis span::before{content:"";position:absolute;left:50%;top:-12px;width:1px;height:6px;background:var(--line-2)}
.plan__axis .plan__t0{transform:none}
.plan__axis .plan__t0::before{left:0}
.plan__axis .plan__t100{transform:translateX(-100%)}
.plan__axis .plan__t100::before{left:auto;right:0}
/* a faixa em que a divisão pode cair: trecho mais grosso do eixo */
.plan__axis::before{content:"";position:absolute;left:70%;width:20%;top:-2px;height:3px;border-radius:2px;background:var(--ink-3)}
.plan__legal{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);font-size:.8rem;color:var(--muted-2)}
@media (max-width:900px){
  .plan__chart{grid-template-areas:"bar" "axis" "legend"}
  .plan__legend{grid-template-columns:1fr;row-gap:var(--s-4);margin:var(--s-5) 0 0}
  .plan__k strong{font-size:1.2rem}
}
/* no celular os rótulos de 90% e 100% encostariam: ficam só os da faixa */
@media (max-width:620px){.plan__axis .plan__t0,.plan__axis .plan__t100{display:none}}

/* "Exclusivo: hoje". O wordmark fica no tamanho mínimo de tela (72 px) ou
   acima, e o vão até o texto cobre a área de proteção de meia altura. */
.excl{
  display:flex;align-items:center;gap:var(--s-6);margin:0 0 var(--s-8);
  font-size:clamp(1.2rem,1.7vw,1.45rem);font-weight:800;letter-spacing:-.025em;color:#fff
}
.excl img{width:80px;height:auto;flex:none}
.note__t{display:block;margin-bottom:var(--s-1)}

/* QR ao lado dos selos das lojas. Some no celular pelo mesmo motivo do
   .dl__qr: ninguém lê o próprio QR na própria tela. */
.qrcard{display:flex;align-items:center;gap:clamp(20px,3vw,36px)}
.qrcard .eyebrow{margin-bottom:var(--s-3)}
.qrcard p:not(.eyebrow){color:#fff;font-size:1.02rem;font-weight:600;line-height:1.5;letter-spacing:-.01em}
.qrcard img{width:clamp(132px,12vw,160px);height:auto;flex:none;border-radius:var(--r-xs)}
@media (max-width:620px){.qrcard{display:none}}

/* Vitrine de categorias: atalhos para o site da iPlace. Mesma conta do
   .grid--center, com a última linha incompleta centralizada. No celular cada
   atalho vira uma linha: ícone, nome e seta. */
.prods{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-4);--n:5}
.prods>li{flex:0 0 calc((100% - (var(--n) - 1) * var(--s-4)) / var(--n));min-width:0}
@media (max-width:960px){.prods{--n:3}}
@media (max-width:620px){.prods{--n:1;gap:var(--s-3)}}
.prod{
  display:flex;flex-direction:column;gap:var(--s-8);height:100%;padding:var(--s-6);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,border-color .22s
}
.prod:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.prod__ic{width:52px;height:52px;border-radius:var(--r-sm);background:var(--coral-wash);display:grid;place-items:center;flex:none}
.prod__ic svg{width:26px;height:26px;color:var(--coral-ink)}
.prod__t{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);font-size:1.075rem;font-weight:800;letter-spacing:-.02em}
.prod__t svg{width:17px;height:17px;flex:none;color:var(--coral-ink);transition:transform .18s}
.prod:hover .prod__t svg{transform:translateX(3px)}
@media (max-width:620px){
  .prod{flex-direction:row;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-5) var(--s-3) var(--s-3);border-radius:var(--r)}
  .prod__ic{width:44px;height:44px}
  .prod__t{flex:1}
}

/* ---------- 27. Entrada do hero ---------- */
/* O hero de cada página entra em sequência ao carregar: os textos sobem de
   um desfoque leve até ficarem nítidos, um de cada vez, e a arte chega logo
   atrás. É só CSS — roda antes do JS, não depende dele e não pisca.
   - As keyframes só têm `from`, com fill `backwards`: terminada a entrada,
     vale o estilo normal do elemento (hover, transform próprio, flutuação).
   - Movimento com `translate`/`scale`/`rotate` avulsos, nunca `transform`:
     eles somam com o transform que o elemento já tem (foto a 1,2°, cartão
     a −7° flutuando), em vez de substituí-lo.
   - A foto do LCP começa a aparecer em 0,1 s: a entrada quase não atrasa a
     métrica.
   - Ordem pela posição no HTML (nth-child), com 90 ms entre um item e o
     próximo. Página sem .hero/.phero/.dlhero entra com `.enter` no bloco.
   Quem pede menos movimento vê tudo parado, já no lugar. */
@keyframes in-rise{from{opacity:0;translate:0 var(--rise,22px);filter:blur(var(--blur,8px))}}
@keyframes in-soft{from{opacity:0;translate:0 var(--rise,32px)}}
@keyframes in-zoom{from{scale:var(--zoom,1.14)}}
@keyframes in-glow{from{opacity:0;scale:.6}}
@keyframes in-bar{from{scale:0 1}}
@keyframes in-pop{from{opacity:0;translate:0 16px;scale:.9;filter:blur(4px)}}
@keyframes in-card{from{opacity:0;translate:-28px 64px;rotate:-9deg}}
/* com pathLength="1" no path, o traço inteiro mede 1 */
@keyframes in-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}

@media (prefers-reduced-motion:no-preference){
  /* início de cada sequência; o texto do .split espera a trilha */
  :is(.hero__in>:first-child,.phero__in,.dlhero__in,.enter){--t0:.06s;--step:.09s}
  .phero__in .split>:first-child{--t0:.15s}
  .dl{--t0:.42s;--step:.1s}

  :is(.hero__in>:first-child,.phero__in,.phero__in .split>:first-child,.dlhero__in,.dl,.enter)>*{--k:0}
  :is(.hero__in>:first-child,.phero__in,.phero__in .split>:first-child,.dlhero__in,.dl,.enter)>:nth-child(2){--k:1}
  :is(.hero__in>:first-child,.phero__in,.phero__in .split>:first-child,.dlhero__in,.dl,.enter)>:nth-child(3){--k:2}
  :is(.hero__in>:first-child,.phero__in,.phero__in .split>:first-child,.dlhero__in,.dl,.enter)>:nth-child(4){--k:3}
  :is(.hero__in>:first-child,.phero__in,.phero__in .split>:first-child,.dlhero__in,.dl,.enter)>:nth-child(5){--k:4}
  :is(.hero__in>:first-child,.phero__in,.phero__in .split>:first-child,.dlhero__in,.dl,.enter)>:nth-child(6){--k:5}
  :is(.hero__in>:first-child,.phero__in,.phero__in .split>:first-child,.dlhero__in,.dl,.enter)>:nth-child(n+7){--k:6}

  /* textos: trilha, sobretítulo, título, lead, botões, fatos */
  :is(.hero__in>:first-child,.phero__in .split>:first-child,.enter)>*,
  :is(.phero__in,.dlhero__in)>:not(.split,.dl),
  .dl>*{
    animation:in-rise 1.1s var(--ease-enter) backwards;
    animation-delay:calc(var(--t0) + var(--k) * var(--step))
  }
  /* o traço do sobretítulo se estende depois que o texto chega */
  :is(.hero,.phero,.dlhero,.enter) .eyebrow::before{
    transform-origin:left;
    animation:in-bar .9s var(--ease-enter) backwards;
    animation-delay:calc(var(--t0) + var(--k) * var(--step) + .3s)
  }
  /* "O amanhã começa… hoje": a palavra da marca chega uma batida depois */
  .hero h1 span{
    display:inline-block;--rise:.3em;
    animation:in-rise 1.1s var(--ease-enter) backwards;
    animation-delay:calc(var(--t0) + var(--k) * var(--step) + .34s)
  }

  /* fundo: brilho abre devagar, arcos se desenham de baixo para cima */
  :is(.hero__glow,.phero__glow){animation:in-glow 2.4s var(--ease-enter) backwards}
  .hero__arcs path{animation:in-draw 2.2s var(--ease-enter) .2s backwards}
  .hero__arcs path:nth-child(2){animation-delay:.32s}
  .hero__arcs path:nth-child(3){animation-delay:.44s}
  .hero__arcs path:nth-child(4){animation-delay:.56s}

  /* foto: a moldura sobe e a imagem assenta de um zoom leve */
  :is(.hero__photo,.ph-art .split__art){animation:in-soft 1.3s var(--ease-enter) .1s backwards}
  :is(.hero__photo,.ph-art .split__art) img{animation:in-zoom 2.2s var(--ease-enter) .1s backwards}
  /* produto recortado: sobe sobre o próprio brilho */
  .phero .prod-art::before{animation:in-glow 2s var(--ease-enter) .15s backwards}
  .phero .prod-art img{--rise:44px;animation:in-soft 1.4s var(--ease-enter) .25s backwards}

  /* cartão gira até −7° enquanto sobe; a flutuação continua por cima */
  .hero__card{animation:in-card 1.4s var(--ease-enter) .5s backwards,float 7s ease-in-out infinite}
  :is(.hero,.phero) .hero__chip{animation:in-pop 1s var(--ease-enter) .78s backwards}
}