/* ============================================================
   Geist — fontes próprias, servidas do projeto (WOFF2).
   Sem requisição ao Google Fonts: mais rápido e sem dependência externa.
   ============================================================ */
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   PRECIFICA BEAUTY — Landing
   Padrão visual: Apple Design (emilkowalski/skills · apple-design)
   Tipografia: Geist 400 / 500 · Paleta: branco nude + marrom
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Branco nude */
  --nude-0:#FAF7F2;
  --nude-1:#F4EFE7;
  --nude-2:#EDE6DA;
  --nude-3:#E3D9C9;
  --white:#FFFFFF;

  /* Marrom claro → escuro */
  --brown-100:#D9C6B4;
  --brown-200:#C0A68E;
  --brown-300:#A9866A;
  --brown-400:#8A6A4F;
  --brown-500:#6E523C;
  --brown-600:#55402F;
  --brown-700:#3E2D22;
  --brown-800:#2F231B;
  --brown-900:#231A14;

  /* Gradiente marrom claro → marrom escuro */
  --grad-brown:linear-gradient(135deg,#A9866A 0%,#6E523C 42%,#2F231B 100%);
  --grad-brown-dark:linear-gradient(145deg,#4A3628 0%,#2E221A 58%,#221912 100%);
  --grad-line:linear-gradient(90deg,transparent,rgba(110,82,60,.28),transparent);

  --ink:#1B1410;
  --ink-2:#4A3D34;
  --muted:#8A7C71;
  --muted-2:#A3968B;
  --line:rgba(53,38,28,.10);
  --line-2:rgba(53,38,28,.06);

  /* Raios (Apple: contínuos e generosos) */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-pill:999px;

  /* Sombras — leves sobre fundo liso, densas em superfícies grandes */
  --sh-1:0 1px 2px rgba(43,30,22,.04), 0 2px 8px rgba(43,30,22,.04);
  --sh-2:0 2px 6px rgba(43,30,22,.05), 0 12px 28px rgba(43,30,22,.07);
  --sh-3:0 4px 12px rgba(43,30,22,.07), 0 28px 64px rgba(43,30,22,.12);
  --sh-4:0 8px 24px rgba(43,30,22,.10), 0 48px 110px rgba(43,30,22,.20);

  /* Ritmo vertical */
  --sec-y:clamp(64px,6vw,104px);
  --stack:clamp(28px,3.2vw,48px);

  /* Margens laterais — desktop 320px */
  --gutter:320px;

  /* Alturas de chrome (topo organizado) */
  --strip-h:38px;
  --nav-h:74px;

  /* Molas Apple: damping 1.0 / response .4 e .3 */
  --spring:cubic-bezier(.22,.72,.24,1);
  --spring-fast:cubic-bezier(.24,.78,.28,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,ul,ol,li,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
s{text-decoration-thickness:1px}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:"Geist","Geist Placeholder",-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:var(--nude-0);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
  overflow-x:hidden;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 3. GRID / MARGENS ---------- */
.shell{
  width:100%;
  padding-inline:var(--gutter);
  margin-inline:auto;
}
.section{padding-block:var(--sec-y)}

/* ---------- 4. TIPOGRAFIA ----------
   Tracking é específico por tamanho (nunca um valor único). */
.display{
  font-weight:500;
  font-size:clamp(1.9375rem,3.35vw,3.375rem);
  line-height:1.05;
  letter-spacing:-.038em;
  text-wrap:balance;
}
.br-mob{display:none}
.display em{font-style:normal;background:var(--grad-brown);-webkit-background-clip:text;background-clip:text;color:transparent}

.h2{
  font-weight:500;
  font-size:clamp(1.95rem,3.1vw,3.35rem);
  line-height:1.06;
  letter-spacing:-.032em;
  text-wrap:balance;
}
.h2--onDark{color:var(--nude-0)}
.muted-head{color:var(--brown-400)}

.lead{
  font-weight:400;
  font-size:clamp(1.0625rem,1.28vw,1.375rem);
  line-height:1.52;
  letter-spacing:-.011em;
  color:var(--ink-2);
  text-wrap:pretty;
}
.lead--accent{color:var(--brown-500);font-weight:500}
.lead strong{font-weight:500;color:var(--ink)}

/* ---------- 5. FAIXA SUPERIOR (SEÇÃO 00) ---------- */
.topstrip{
  position:relative;z-index:60;
  height:var(--strip-h);
  display:flex;align-items:center;
  background:#2E221A;
  overflow:hidden;
}
.topstrip__track{
  display:flex;align-items:center;
  white-space:nowrap;
  /* desliza exatamente a largura de um grupo: a emenda é invisível */
  animation:desliza var(--dur,38s) linear infinite;
  will-change:transform;
}
.topstrip__grupo{
  display:flex;align-items:center;gap:28px;
  padding-right:28px;   /* mesmo respiro entre um grupo e o seguinte */
  flex:none;
}
.topstrip__item{
  font-size:.7rem;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;
  color:rgba(255,255,255,.94);
}
.topstrip__dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.45);flex:none}
@keyframes desliza{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--grupo,50%)),0,0)}}
@media (prefers-reduced-motion:reduce){
  .topstrip__track{animation:none;justify-content:center;width:100%}
  .topstrip__grupo{padding-right:0}
  .topstrip__item:not(:first-child),.topstrip__dot{display:none}
}

/* ---------- 6. NAV — oculta na primeira seção ----------
   Fica fixa e fora do fluxo: o topo da página começa direto na imagem.
   Só entra quando o scroll passa do hero, já na segunda seção. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(250,247,242,.58);
  backdrop-filter:blur(34px) saturate(190%);
  -webkit-backdrop-filter:blur(34px) saturate(190%);
  border-bottom:1px solid var(--line-2);
  opacity:0;
  transform:translateY(-100%);
  pointer-events:none;
  transition:opacity .38s var(--spring),transform .45s var(--spring);
}
.nav--revelado{opacity:1;transform:none;pointer-events:auto}
.nav__inner{display:flex;align-items:center;justify-content:center}

.brand{display:inline-flex;align-items:center;gap:10px}
.brand__text{font-weight:500;font-size:1rem;letter-spacing:-.022em}
.brand__thin{font-weight:400;color:var(--muted)}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative;
  background:#F6E6DA;
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--grad-line);
}
.hero__grid{width:100%}
/* a imagem já traz os dois aparelhos montados */
.hero__pic{
  display:block;width:100%;
  /* proporção da imagem de desktop (1902x827), para reservar a altura */
  aspect-ratio:1902/827;
  background:url('https://imagedelivery.net/6I5m6pSopKC6qO0WVEbZDw/precifica-hero-app/topo') center/cover no-repeat;
  /* dificulta arrastar e salvar */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}
/* o texto se sobrepõe à imagem, na área vazia da esquerda */
.hero .shell{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;
}
/* os celulares na imagem começam em 51% da largura; o texto para antes
   disso em qualquer resolução, em vez de depender de um limite fixo */
.hero__copy{
  position:relative;z-index:2;
  max-width:min(660px, calc(47vw - var(--gutter)));
}
.logo{
  display:block;
  width:clamp(118px,8.6vw,152px);
  aspect-ratio:704/305;
  background:url('assets/logo.svg') left center/contain no-repeat;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}
.hero__copy>*+*{margin-top:clamp(18px,1.7vw,26px)}
.hero__copy .lead{max-width:34em}

.checks{display:flex;flex-wrap:wrap;gap:10px 12px}
.checks li{
  display:inline-flex;align-items:center;gap:8px;
  height:38px;padding:0 16px 0 12px;
  border-radius:var(--r-pill);
  background:var(--white);
  border:1px solid var(--line);
  font-size:.875rem;font-weight:400;letter-spacing:-.006em;color:var(--ink-2);
}
.checks__ico{
  width:20px;height:20px;flex:none;display:block;
  background:url('assets/check.svg') center/contain no-repeat;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}

.glow{
  position:absolute;inset:8% -6% 4%;
  background:radial-gradient(58% 52% at 50% 42%,rgba(169,134,106,.34),rgba(169,134,106,0) 70%);
  filter:blur(28px);pointer-events:none;
}
.glow--warm{background:radial-gradient(58% 52% at 50% 42%,rgba(216,190,163,.42),rgba(216,190,163,0) 70%)}

/* ---------- 8. MOCKUP DO APP ---------- */
.phone{
  --pw:328px;
  --s:calc(var(--pw)/366);
  width:var(--pw);position:relative;
  transform-style:preserve-3d;
  transition:transform .5s var(--spring);
}
.phone--lg{--pw:352px}

/* Dois aparelhos: Home na frente, Nova simulação atrás */
.phone__frame{
  border-radius:calc(58 * var(--s));
  padding:calc(12 * var(--s));
  background:linear-gradient(160deg,#4B3928 0%,#241A14 42%,#3B2C20 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}
.phone__screen{
  position:relative;
  border-radius:calc(47 * var(--s));
  overflow:hidden;
  background:var(--nude-1);
  aspect-ratio:9/19.2;
}
.phone__screen::after{
  content:"";position:absolute;inset:0;border-radius:calc(47 * var(--s));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  pointer-events:none;
}

.ui{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:calc(14 * var(--s)) calc(14 * var(--s)) 0;
  background:var(--nude-1);
  font-size:calc(13 * var(--s));
}
.ui__status{display:flex;align-items:center;justify-content:space-between;padding:calc(6 * var(--s)) calc(6 * var(--s)) calc(12 * var(--s))}
.ui__time{
  display:inline-flex;align-items:center;gap:calc(5 * var(--s));
  font-weight:500;font-size:calc(15 * var(--s));letter-spacing:-.02em;
}
.ui__sino{width:calc(13 * var(--s));height:calc(13 * var(--s));flex:none}
/* os quatro pontinhos ao lado do wi-fi */
.ui__pontos{
  width:calc(14 * var(--s));height:calc(3 * var(--s));
  background:radial-gradient(circle,currentColor 42%,transparent 44%) 0 0/calc(3.8 * var(--s)) 100% repeat-x;
  opacity:.5;
}
.ui__statusicons{display:flex;align-items:center;gap:calc(6 * var(--s));color:var(--ink)}
.ui__statusicons svg{width:calc(15 * var(--s));height:calc(15 * var(--s))}
.ui__batt{width:calc(22 * var(--s));height:calc(11 * var(--s));border-radius:calc(3 * var(--s));border:1px solid rgba(27,20,16,.35);padding:1px}
.ui__batt{position:relative}
.ui__batt i{display:block;width:80%;height:100%;border-radius:1px;background:#34C759}
/* raio de carregando */
.ui__batt b{
  position:absolute;left:calc(6 * var(--s));top:50%;transform:translateY(-50%);
  width:calc(5 * var(--s));height:calc(8 * var(--s));
  background:#0E2A14;
  clip-path:polygon(60% 0,0 58%,40% 58%,40% 100%,100% 42%,60% 42%);
}

.ui__hero{
  position:relative;border-radius:calc(26 * var(--s));
  padding:calc(16 * var(--s));
  background:
    radial-gradient(120% 90% at 88% 8%,rgba(255,255,255,.07),transparent 60%),
    linear-gradient(150deg,#3A2A1E 0%,#211812 100%);
  color:#fff;overflow:hidden;
}
/* padrão de linhas concêntricas, como no app; as bolhas anteriores
   apareciam como círculos cinza soltos sobre o card */
.ui__hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-radial-gradient(circle at 78% 22%,rgba(255,255,255,.028) 0 1px,transparent 1px 24px),
    repeating-radial-gradient(circle at 16% 94%,rgba(255,255,255,.022) 0 1px,transparent 1px 30px);
}
.ui__heroTop{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ui__hi{font-weight:500;font-size:calc(18 * var(--s));letter-spacing:-.028em}
.ui__avatar{
  width:calc(38 * var(--s));height:calc(38 * var(--s));flex:none;border-radius:50%;
  background:linear-gradient(150deg,#F0D9C4,#C79A74);
  box-shadow:0 0 0 calc(2.5 * var(--s)) #fff;
}
.ui__pill{
  position:relative;display:inline-block;margin-top:calc(12 * var(--s));
  padding:calc(5 * var(--s)) calc(11 * var(--s));border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);
  font-size:calc(11.5 * var(--s));letter-spacing:-.008em;color:rgba(255,255,255,.92);
}
.ui__value{position:relative;margin-top:calc(6 * var(--s));font-weight:500;font-size:calc(38 * var(--s));line-height:1.05;letter-spacing:-.045em}
.ui__heroFoot{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:calc(6 * var(--s))}
.ui__meta{font-size:calc(11 * var(--s));color:rgba(255,255,255,.5)}
.ui__arrow{width:calc(30 * var(--s));height:calc(30 * var(--s));flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.13);color:#fff}
.ui__arrow svg{width:calc(15 * var(--s));height:calc(15 * var(--s))}

.ui__chips{display:flex;gap:calc(7 * var(--s));margin-top:calc(11 * var(--s));padding:calc(7 * var(--s));border-radius:calc(17 * var(--s));background:var(--nude-2);overflow:hidden}
.ui__chip{flex:none;padding:calc(7 * var(--s)) calc(11 * var(--s));border-radius:var(--r-pill);background:var(--nude-3);font-size:calc(11.5 * var(--s));color:var(--ink-2);white-space:nowrap}
.ui__chip b{font-weight:500;color:var(--ink)}

.ui__duo{display:grid;grid-template-columns:1fr 1fr;gap:calc(9 * var(--s));margin-top:calc(11 * var(--s))}
.ui__card{background:var(--white);border-radius:calc(17 * var(--s));padding:calc(12 * var(--s))}
.ui__ico{
  width:calc(34 * var(--s));height:calc(34 * var(--s));border-radius:calc(11 * var(--s));
  display:grid;place-items:center;background:#3A2A20;color:#fff;
}
.ui__ico svg{width:calc(17 * var(--s));height:calc(17 * var(--s))}
.ui__cardTitle{margin-top:calc(11 * var(--s));font-weight:500;font-size:calc(13 * var(--s));letter-spacing:-.02em}
.ui__cardSub{margin-top:calc(2 * var(--s));font-size:calc(11.5 * var(--s));color:var(--muted)}

.ui__row{display:flex;align-items:center;gap:calc(11 * var(--s));margin-top:calc(9 * var(--s));padding:calc(11 * var(--s));border-radius:calc(17 * var(--s));background:var(--white)}
.ui__rowText{display:flex;flex-direction:column;gap:calc(1 * var(--s));min-width:0;flex:1}
.ui__rowText i{font-style:normal;font-size:calc(11.5 * var(--s));color:var(--muted)}
.ui__rowText b{font-weight:500;font-size:calc(14 * var(--s));letter-spacing:-.022em}
.ui__chev{color:var(--muted-2);flex:none}
.ui__chev svg{width:calc(15 * var(--s));height:calc(15 * var(--s))}

.ui__tabs{
  position:relative;margin-top:auto;min-height:calc(58 * var(--s));
  display:grid;grid-template-columns:repeat(5,1fr);
  align-items:center;justify-items:center;
  margin-inline:calc(-14 * var(--s));
  padding:calc(9 * var(--s)) calc(8 * var(--s)) calc(18 * var(--s));
  background:rgba(250,247,242,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(53,38,28,.06);
}
.ui__tab{display:flex;flex-direction:column;align-items:center;gap:calc(3 * var(--s));color:var(--muted-2)}
.ui__tab svg{width:calc(19 * var(--s));height:calc(19 * var(--s))}
.ui__tab i{font-style:normal;font-size:calc(9.5 * var(--s));letter-spacing:-.005em}
.ui__tab.is-on{color:var(--ink)}
.ui__tab.is-on i{font-weight:500}
.ui__fab{
  position:relative;transform:translateY(calc(-14 * var(--s)));
  width:calc(54 * var(--s));height:calc(54 * var(--s));border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:#3A2A20;
  box-shadow:0 0 0 calc(4 * var(--s)) var(--nude-1);
}
.ui__fab svg{width:calc(22 * var(--s));height:calc(22 * var(--s))}

/* ---------- Carrossel de telas do app ---------- */
.ui--tela{opacity:0;visibility:hidden;transition:opacity .55s var(--spring)}
.ui--tela.is-ativa{opacity:1;visibility:visible}
.ui__batt i.ui__battCheia{width:82%;background:var(--ink)}

/* botões */
.ui__btnPreto,.ui__btnBranco{
  display:inline-flex;align-items:center;justify-content:center;
  gap:calc(7 * var(--s));align-self:center;
  height:calc(40 * var(--s));padding:0 calc(20 * var(--s));
  border-radius:var(--r-pill);
  font-weight:500;font-size:calc(14 * var(--s));letter-spacing:-.02em;
}
.ui__btnPreto{background:#14100D;color:#fff;margin-top:calc(12 * var(--s))}
.ui__btnBranco{
  background:var(--white);color:var(--ink);
  align-self:stretch;margin-top:calc(14 * var(--s));
  border-radius:calc(16 * var(--s));height:calc(46 * var(--s));
}
.ui__btnPreto svg,.ui__btnBranco svg{width:calc(15 * var(--s));height:calc(15 * var(--s))}

/* títulos das telas internas */
.ui__titulo{
  margin-top:calc(14 * var(--s));text-align:center;
  font-weight:500;font-size:calc(25 * var(--s));line-height:1.1;letter-spacing:-.035em;
}
.ui__titulo--solto{margin-top:calc(22 * var(--s))}
.ui__sub{
  margin-top:calc(5 * var(--s));text-align:center;
  font-size:calc(12 * var(--s));line-height:1.35;color:var(--muted);
}

/* filtros */
.ui__filtros{display:flex;gap:calc(7 * var(--s));margin-top:calc(13 * var(--s));overflow:hidden}
.ui__filtro{
  flex:none;padding:calc(8 * var(--s)) calc(13 * var(--s));
  border-radius:var(--r-pill);background:var(--white);
  border:1px solid var(--line-2);
  font-size:calc(12 * var(--s));color:var(--ink-2);white-space:nowrap;
}
.ui__filtro.is-on{background:#14100D;color:#fff;border-color:#14100D;font-weight:500}

/* lista de serviços */
.ui__servicos{display:flex;flex-direction:column;gap:calc(9 * var(--s));margin-top:calc(11 * var(--s))}
.ui__servico{
  display:flex;align-items:center;gap:calc(10 * var(--s));
  padding:calc(11 * var(--s)) calc(12 * var(--s));
  border-radius:calc(16 * var(--s));background:var(--white);
}
.ui__icoRedondo{
  width:calc(36 * var(--s));height:calc(36 * var(--s));flex:none;border-radius:50%;
  display:grid;place-items:center;background:#3A2A20;color:#fff;
}
.ui__icoRedondo svg{width:calc(17 * var(--s));height:calc(17 * var(--s))}
.ui__icoQuad{
  width:calc(34 * var(--s));height:calc(34 * var(--s));flex:none;
  border-radius:calc(11 * var(--s));
  display:grid;place-items:center;background:#3A2A20;color:#fff;
}
.ui__icoQuad svg{width:calc(16 * var(--s));height:calc(16 * var(--s))}
.ui__servicoTxt{display:flex;flex-direction:column;gap:calc(2 * var(--s));flex:1;min-width:0}
.ui__servicoTxt b{font-weight:500;font-size:calc(13.5 * var(--s));letter-spacing:-.022em}
.ui__servicoTxt i{
  display:flex;align-items:center;gap:calc(4 * var(--s));
  font-style:normal;font-size:calc(11 * var(--s));color:var(--muted);
}
.ui__servicoTxt i svg{width:calc(11 * var(--s));height:calc(11 * var(--s))}
.ui__servicoPreco{font-weight:500;font-size:calc(13.5 * var(--s));letter-spacing:-.024em;white-space:nowrap}
.ui__kebab{
  width:calc(14 * var(--s));height:calc(14 * var(--s));flex:none;
  background:radial-gradient(circle,var(--muted-2) 40%,transparent 42%) center/calc(3 * var(--s)) calc(11 * var(--s)) no-repeat;
  background-image:radial-gradient(circle at 50% 18%,var(--muted-2) 22%,transparent 24%),
                   radial-gradient(circle at 50% 50%,var(--muted-2) 22%,transparent 24%),
                   radial-gradient(circle at 50% 82%,var(--muted-2) 22%,transparent 24%);
}

/* menu flutuante do botão central */
.ui__popover{
  margin-top:auto;margin-inline:calc(14 * var(--s));
  margin-bottom:calc(6 * var(--s));
  background:var(--white);border-radius:calc(18 * var(--s));
  padding:calc(8 * var(--s));
  display:flex;flex-direction:column;gap:calc(2 * var(--s));
}
.ui__popLinha{display:flex;align-items:center;gap:calc(10 * var(--s));padding:calc(7 * var(--s))}
.ui__popTxt{display:flex;flex-direction:column;gap:calc(1 * var(--s));min-width:0}
.ui__popTxt b{font-weight:500;font-size:calc(13 * var(--s));letter-spacing:-.022em}
.ui__popTxt i{font-style:normal;font-size:calc(11 * var(--s));color:var(--muted)}

/* estado vazio */
.ui__vazio{
  margin-top:calc(12 * var(--s));
  border:1px dashed rgba(53,38,28,.18);
  border-radius:calc(18 * var(--s));
  background:var(--white);
  padding:calc(26 * var(--s)) calc(18 * var(--s));
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:calc(8 * var(--s));
}
.ui__vazio svg{width:calc(28 * var(--s));height:calc(28 * var(--s));color:var(--muted-2)}
.ui__vazio b{font-weight:500;font-size:calc(13.5 * var(--s));letter-spacing:-.022em}
.ui__vazio i{font-style:normal;font-size:calc(11.5 * var(--s));line-height:1.4;color:var(--muted)}

/* tela de menu */
.ui__perfil{
  display:flex;align-items:center;gap:calc(11 * var(--s));
  margin-top:calc(10 * var(--s));padding:calc(12 * var(--s));
  background:var(--white);border-radius:calc(16 * var(--s));
}
.ui__avatarG{
  width:calc(46 * var(--s));height:calc(46 * var(--s));flex:none;border-radius:50%;
  background:linear-gradient(150deg,#F0D9C4,#C79A74);
  box-shadow:0 0 0 calc(3 * var(--s)) #fff, 0 0 0 calc(4 * var(--s)) var(--line-2);
}
.ui__perfilTxt{display:flex;flex-direction:column;gap:calc(1 * var(--s));flex:1;min-width:0}
.ui__perfilTxt b{font-weight:500;font-size:calc(15 * var(--s));letter-spacing:-.026em}
.ui__perfilTxt i{font-style:normal;font-size:calc(11 * var(--s));color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui__rotulo{
  margin:calc(15 * var(--s)) 0 calc(7 * var(--s)) calc(3 * var(--s));
  font-size:calc(9.5 * var(--s));letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);
}
.ui__grupo{background:var(--white);border-radius:calc(16 * var(--s));overflow:hidden}
.ui__linha{display:flex;align-items:center;gap:calc(11 * var(--s));padding:calc(11 * var(--s)) calc(12 * var(--s))}
.ui__grupo .ui__linha + .ui__linha{border-top:1px solid var(--line-2)}
.ui__linhaTxt{display:flex;flex-direction:column;gap:calc(1 * var(--s));flex:1;min-width:0}
.ui__linhaTxt b{font-weight:500;font-size:calc(13.5 * var(--s));letter-spacing:-.022em}
.ui__linhaTxt i{font-style:normal;font-size:calc(11 * var(--s));color:var(--muted)}
.ui__sair{
  display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--s));
  margin-top:calc(14 * var(--s));padding:calc(14 * var(--s));
  background:var(--white);border-radius:calc(16 * var(--s));
  font-weight:500;font-size:calc(13.5 * var(--s));letter-spacing:-.022em;color:#D6382C;
}
.ui__sair svg{width:calc(16 * var(--s));height:calc(16 * var(--s))}

/* ---------- 9. SEÇÃO 02 — PROBLEMA ---------- */
.section--problema{background:var(--nude-0)}
.section--problema .sec__head{
  text-align:center;
  display:grid;justify-items:center;
}
.section--problema .sec__lead{justify-items:center}
.sec__head{max-width:100%}
.sec__head .h2+.sec__lead{margin-top:clamp(20px,2vw,30px)}
.sec__lead{max-width:74ch;display:grid;gap:14px}
.sec__lead p{font-size:clamp(1rem,1.15vw,1.1875rem);line-height:1.6;letter-spacing:-.008em;color:var(--ink-2)}

.sec__head--center{text-align:center;display:grid;justify-items:center;gap:clamp(16px,1.6vw,22px)}
.sec__head--center .lead{max-width:50ch}
/* o cabeçalho centralizado já separa por gap: sem margem dupla aqui */
.sec__head--center .h2+.sec__lead{margin-top:0}

.cards3{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.5vw,22px);
  margin-top:clamp(40px,4.5vw,72px);
}
.qcard{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,2.2vw,34px);
  transition:transform .4s var(--spring);
}
.qcard:hover{transform:translateY(-4px)}
.qcard__num{
  display:inline-grid;place-items:center;
  width:34px;height:34px;border-radius:var(--r-xs);
  background:var(--nude-2);color:var(--brown-500);
  font-size:.75rem;font-weight:500;letter-spacing:.02em;
}
.qcard__quote{
  margin-top:20px;
  font-weight:500;font-size:clamp(1.125rem,1.35vw,1.375rem);
  line-height:1.28;letter-spacing:-.024em;color:var(--ink);
}
.qcard__answer{
  margin-top:12px;padding-top:14px;
  border-top:1px solid var(--line-2);
  font-size:.9375rem;line-height:1.55;color:var(--muted);letter-spacing:-.004em;
}

.statement{
  margin-top:clamp(40px,4.5vw,72px);
  border-radius:5px;
  padding:clamp(36px,4.4vw,68px) clamp(28px,4vw,64px);
  background:var(--grad-brown-dark);
  color:#fff;
  text-align:center;
  position:relative;overflow:hidden;
}
.statement::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 120% at 88% -10%,rgba(255,255,255,.14),transparent 62%);
}
/* quadradinho em cada uma das quatro pontas */
.statement::after{
  --q:7px;
  content:"";position:absolute;inset:12px;pointer-events:none;
  background:
    linear-gradient(#fff,#fff) left  top    /var(--q) var(--q) no-repeat,
    linear-gradient(#fff,#fff) right top    /var(--q) var(--q) no-repeat,
    linear-gradient(#fff,#fff) left  bottom /var(--q) var(--q) no-repeat,
    linear-gradient(#fff,#fff) right bottom /var(--q) var(--q) no-repeat;
}
.statement p{
  position:relative;
  font-weight:400;font-size:clamp(1.25rem,2.1vw,2rem);
  line-height:1.28;letter-spacing:-.028em;
  color:rgba(255,255,255,.82);
  text-wrap:balance;
}
.statement em{font-style:normal;font-weight:500;color:#fff}

/* ---------- 10. SEÇÃO 03 — FLUXO ---------- */
.section--fluxo{background:var(--nude-1);border-block:1px solid var(--line-2)}
.section--fluxo .sec__head{
  max-width:none;text-align:center;
  display:grid;justify-items:center;gap:clamp(14px,1.4vw,20px);
}
.section--fluxo .sec__head .h2{max-width:35ch}
.section--fluxo .sec__head .lead{max-width:42ch}

/* Trilha das etapas — os números somam até o preço ideal */
.flow{
  --gap:clamp(10px,.9vw,14px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
  margin-top:clamp(40px,4.5vw,68px);
}
.flow__step{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  min-height:clamp(112px,8.9vw,130px);
  padding:clamp(16px,1.5vw,22px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:transform .4s var(--spring);
}
.flow__step:hover{transform:translateY(-3px)}

/* seta ligando uma etapa à seguinte, centrada no vão */
.flow__step:nth-child(3n)::after{display:none}
.flow__step:not(:last-child)::after{
  content:"";position:absolute;z-index:1;
  top:50%;right:calc(var(--gap) / -2 - 3px);
  width:6px;height:6px;
  border-top:1.5px solid var(--brown-200);
  border-right:1.5px solid var(--brown-200);
  transform:translateY(-50%) rotate(45deg);
}
.flow__i{
  width:clamp(30px,2.5vw,34px);height:clamp(30px,2.5vw,34px);flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--brown-800);color:#fff;
  font-size:clamp(.8125rem,.95vw,.9375rem);font-weight:500;letter-spacing:0;
}
.flow__topo{display:flex;align-items:center;gap:10px}
.flow__t{
  font-weight:500;font-size:clamp(.9375rem,1.05vw,1.0625rem);
  letter-spacing:-.018em;line-height:1.25;
}
/* valor de exemplo em cada etapa */
.flow__v{
  display:flex;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:7px;
  margin-top:-4px;
  font-weight:500;font-size:clamp(1.0625rem,1.35vw,1.375rem);
  letter-spacing:-.028em;color:var(--brown-600);
}
.flow__v i{
  font-style:normal;font-weight:400;
  font-size:.75rem;letter-spacing:-.004em;color:var(--muted);
}
.flow__step--end .flow__v{color:var(--ink);font-size:clamp(1.25rem,1.7vw,1.625rem)}
/* barra de acúmulo: cresce de 01 a 05 */
.flow__bar{
  margin-top:auto;align-self:stretch;
  position:relative;height:3px;border-radius:2px;
  background:var(--nude-2);overflow:hidden;
}
.flow__bar::before{
  content:"";position:absolute;inset:0 auto 0 0;
  width:var(--fill);border-radius:2px;
  background:var(--grad-brown);
}
/* o último bloco segue claro como os demais; o que o distingue é o
   ícone de seta e a barra completa */
.flow__step--end .flow__i{background:var(--brown-800);color:#fff}
.flow__step--end .flow__i svg{width:16px;height:16px}
.flow__step--end .flow__t{font-size:clamp(1rem,1.15vw,1.1875rem)}

/* Exemplos */
.notes{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,1.5vw,22px);
  margin-top:clamp(16px,1.5vw,22px);
}
.note{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(20px,1.9vw,28px);
  transition:transform .4s var(--spring);
}
.note:hover{transform:translateY(-3px)}
.note__tag{
  display:inline-block;margin-bottom:12px;
  padding:5px 10px;border-radius:5px;
  background:transparent;color:var(--brown-600);
  border:1px solid var(--brown-600);
  font-size:.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.note p{
  font-size:clamp(.9375rem,1.05vw,1.0625rem);
  line-height:1.55;letter-spacing:-.008em;color:var(--ink-2);
}
.note b{font-weight:500;color:var(--brown-600)}

/* Fecho */
.kicker{
  margin-top:clamp(32px,3.4vw,52px);
  padding-top:clamp(24px,2.4vw,34px);
  border-top:1px solid var(--line);
  font-weight:500;font-size:clamp(1.1875rem,1.9vw,1.75rem);
  line-height:1.28;letter-spacing:-.028em;color:var(--brown-600);
  text-align:center;text-wrap:balance;
}

/* ---------- 11. SEÇÃO 04 — PRODUTO ---------- */
.section--produto{
  background:linear-gradient(180deg,var(--nude-0) 0%,var(--nude-2) 100%);
  overflow:hidden;
  /* fecha rente à esteira, que vem logo abaixo */
  padding-bottom:clamp(14px,1.6vw,24px);
}
.quotebig{font-weight:500;color:var(--brown-600);letter-spacing:-.02em}
.section--produto .sec__head--center .lead{max-width:62ch}
.section--nichos .sec__head--center .lead{max-width:72ch}

.showcase{
  margin-top:clamp(24px,2.4vw,40px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(20px,3vw,56px);
  align-items:center;
}
.showcase__phone{position:relative;display:flex;justify-content:center}
.orbit{display:grid;gap:clamp(10px,1vw,16px)}
.orbit--left{justify-items:end}
.orbit--right{justify-items:start}
.orbit__item{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.8);
  font-weight:500;font-size:clamp(.875rem,1vw,1rem);letter-spacing:-.014em;color:var(--brown-700);
  white-space:nowrap;
  transition:transform .4s var(--spring);
}
.orbit__item::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--grad-brown);
}
.orbit__item:hover{transform:translateY(-2px)}
.orbit--left .orbit__item:nth-child(1),
.orbit--left .orbit__item:nth-child(3){transform:translateX(-34px)}
.orbit--right .orbit__item:nth-child(1),
.orbit--right .orbit__item:nth-child(4){transform:translateX(34px)}
.orbit--left .orbit__item:nth-child(1):hover,
.orbit--left .orbit__item:nth-child(3):hover{transform:translateX(-34px) translateY(-2px)}
.orbit--right .orbit__item:nth-child(1):hover,
.orbit--right .orbit__item:nth-child(4):hover{transform:translateX(34px) translateY(-2px)}

/* ---------- Esteira de benefícios ----------
   Três filas horizontais que deslizam para os lados conforme o scroll.
   Continua a cor em que a seção anterior termina. */
.esteira{
  background:var(--nude-2);
  padding-block:clamp(16px,1.8vw,26px);
  overflow:hidden;
}
.esteira__pista{
  display:flex;flex-direction:column;
  gap:clamp(10px,1vw,14px);
}
.esteira__fila{
  display:flex;align-items:center;
  gap:clamp(10px,1vw,14px);
  width:max-content;
  /* sobra à esquerda: mesmo deslocando para a direita, nunca abre vazio */
  margin-left:-320px;
  will-change:transform;
}
/* deslocamento vindo do scroll; filas alternam o sentido */
.esteira__fila--1{transform:translate3d(calc(var(--desloc,0) * -170px),0,0)}
.esteira__fila--2{transform:translate3d(calc(var(--desloc,0) * 200px - 90px),0,0)}
.esteira__fila--3{transform:translate3d(calc(var(--desloc,0) * -150px - 40px),0,0)}

.pilula{
  display:inline-flex;align-items:center;gap:8px;
  flex:none;
  height:40px;padding:0 16px 0 12px;
  border-radius:var(--r-pill);
  /* bem apagadas: a esteira é pano de fundo, não pode competir com o resto */
  background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.55);
  font-size:.875rem;letter-spacing:-.006em;
  color:rgba(74,61,52,.55);
  white-space:nowrap;
}
.pilula__ico{
  width:18px;height:18px;flex:none;opacity:.4;
  background:url('assets/check.svg') center/contain no-repeat;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}

@media (max-width:767.98px){
  .esteira{padding-block:16px}
  .esteira__pista{gap:8px}
  .esteira__fila{gap:8px}
  .pilula{height:36px;padding:0 13px 0 10px;font-size:.8125rem;gap:7px}
  .pilula__ico{width:16px;height:16px}
}

@media (prefers-reduced-motion:reduce){
  .esteira__fila{transform:none !important}
}

/* ---------- 12. SEÇÃO 05 — NICHOS ---------- */
.section--nichos{background:var(--nude-0)}
.grid6{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.5vw,22px);
  margin-top:clamp(40px,4.5vw,68px);
}
.ncard{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,2.2vw,34px);
  transition:transform .4s var(--spring);
}
.ncard:hover{transform:translateY(-4px)}
/* ícone solto, sem caixa em volta */
.ncard__ico{
  width:28px;height:28px;
  color:var(--brown-500);
  margin-bottom:16px;
  transition:color .6s var(--spring);
}
.ncard__t{font-weight:500;font-size:clamp(1.125rem,1.3vw,1.3125rem);letter-spacing:-.024em}
.ncard__l{margin-top:18px;display:grid;gap:7px}
.ncard__l li{
  position:relative;padding-left:16px;
  font-size:.9375rem;line-height:1.5;color:var(--muted);letter-spacing:-.004em;
}
.ncard__l li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--brown-100);
}

/* ---------- 13. SEÇÃO 06 — OFERTA ---------- */
.section--oferta{
  background:
    radial-gradient(80% 60% at 50% 0%,rgba(169,134,106,.22),transparent 70%),
    linear-gradient(165deg,#3A2B20 0%,#231A14 55%,#2F231B 100%);
  color:var(--nude-0);
}
.section--oferta .h2{
  max-width:38ch;margin-inline:auto;
  /* um degrau menor e com peso mais leve que os outros títulos */
  font-weight:450;
  font-size:clamp(1.6875rem,2.75vw,2.9rem);
}
.offer{
  margin:clamp(40px,4.5vw,68px) auto 0;
  max-width:576px;width:100%;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-2xl);
  padding:clamp(28px,3.4vw,52px);
}
.offer__head{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.offer__name{font-weight:500;font-size:clamp(1.625rem,2.6vw,2.25rem);letter-spacing:-.032em;color:#fff}
.offer__sub{font-size:.9375rem;letter-spacing:-.006em;color:rgba(250,247,242,.55)}

/* Lista: um item por linha, cada um no seu bloco */
.offer__list{
  margin-top:clamp(26px,3vw,38px);
  display:grid;grid-template-columns:1fr;gap:10px;
}
.oitem{
  display:flex;align-items:center;gap:16px;
  padding:14px 18px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  transition:background .35s var(--spring);
}
.oitem:hover{background:rgba(255,255,255,.075)}
.oitem__ico{
  width:24px;height:24px;flex:none;
  display:grid;place-items:center;
  background:none;border:0;
  color:var(--brown-100);
}
.oitem__ico svg{width:22px;height:22px}
.oitem__t{
  flex:1;
  font-weight:500;font-size:1.0625rem;line-height:1.35;letter-spacing:-.016em;
  color:rgba(250,247,242,.92);
}

/* Preço: sem painel, direto sobre o bloco */
.offer__price{
  margin-top:clamp(26px,3vw,40px);
  padding-block:clamp(4px,1vw,10px);
  text-align:center;
}
.offer__de{
  font-size:clamp(.75rem,.9vw,.875rem);font-weight:400;
  letter-spacing:.01em;color:rgba(250,247,242,.55);
  margin-bottom:clamp(6px,.7vw,10px);
}
.offer__de s{text-decoration:line-through;text-decoration-thickness:1px;text-underline-offset:2px}
.offer__now{display:inline-flex;align-items:flex-start;gap:8px;color:#fff;text-align:left}
.offer__cur{font-weight:400;font-size:clamp(1.75rem,3vw,2.75rem);margin-top:.44em;letter-spacing:-.03em}
.offer__num{font-weight:500;font-size:clamp(5rem,10vw,8.5rem);line-height:.88;letter-spacing:-.055em}
/* o número e o sufixo formam uma coluna: o texto fica colado
   embaixo, alinhado pela direita — ou seja, sob os centavos */
.offer__val{display:flex;flex-direction:column;align-items:flex-end}
.offer__vitalicio{
  margin-top:.06em;margin-right:.04em;
  font-size:clamp(.75rem,.85vw,.875rem);font-weight:400;
  line-height:1.1;letter-spacing:-.006em;color:rgba(250,247,242,.72);
  white-space:nowrap;
}

.cta{
  margin-top:clamp(24px,2.6vw,32px);
  width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:64px;padding:0 28px;
  border-radius:var(--r-md);
  background:linear-gradient(100deg,#43D17F 0%,#22A85D 48%,#0D6B39 100%);
  color:#fff;
  font-weight:500;font-size:clamp(.9375rem,1.15vw,1.0625rem);letter-spacing:-.018em;
  text-align:center;
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,
             0 -1px 0 rgba(0,0,0,.22) inset,
             0 12px 34px rgba(9,74,40,.46);
  transition:transform .22s var(--spring-fast),box-shadow .22s var(--spring-fast),filter .22s var(--spring-fast);
  will-change:transform;
}
.cta:hover{filter:brightness(1.05);
  box-shadow:0 1px 0 rgba(255,255,255,.38) inset,
             0 -1px 0 rgba(0,0,0,.22) inset,
             0 18px 48px rgba(9,74,40,.55)}
.cta.is-pressed{transform:scale(.975)}
/* as duas garantias curtas dividem a mesma linha */
.offer__rodape{
  margin-top:16px;
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:8px 18px;
}
.offer__foot{text-align:center;font-size:.875rem;color:rgba(250,247,242,.55)}
.offer__seg{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:.875rem;color:rgba(250,247,242,.55);
}
.offer__seg-ico{width:17px;height:17px;flex:none;display:block}
.offer__seg-ico svg{width:17px;height:17px;display:block}

/* ---------- 14. RODAPÉ ---------- */
.foot{background:var(--brown-900);color:rgba(250,247,242,.6);padding-block:36px}
.foot__inner{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}
.logo--foot{
  width:clamp(88px,6.4vw,104px);
  background-image:url('assets/logo-light.svg');
  background-position:center;
}
.foot__copy{font-size:.8125rem;letter-spacing:-.004em}

/* ---------- 15. REVEAL (mola damping 1.0 / response .4) ---------- */
.js .reveal{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .62s var(--spring),transform .62s var(--spring);
}
/* a camada só existe enquanto o elemento está de fato animando */
.js .reveal.is-animating{will-change:opacity,transform}
.js .reveal[data-reveal="scale"]{transform:translate3d(0,26px,0) scale(.982)}
.js .reveal.is-in{opacity:1;transform:none}
/* a trilha acompanha o reveal, mas sem deslocar: senão soma com o dos cards */
.js .flow.reveal{transform:none}

/* ── quem criou: retrato ao lado do texto ──────────────────── */
.section--autora{background:var(--nude-0);border-bottom:1px solid var(--line-2)}
.autora{
  display:grid;
  grid-template-columns:minmax(0,0.78fr) minmax(0,1fr);
  gap:clamp(30px,4vw,60px);
  /* as duas colunas esticam: a altura da linha vem do texto e a foto a acompanha */
  align-items:stretch;
  max-width:1060px;margin-inline:auto;
}
.autora__foto{margin:0;display:flex}
.autora__texto{display:flex;flex-direction:column;justify-content:center}
.autora__img{
  display:block;width:100%;
  /* sem proporção fixa: preenche a altura da linha, recortando pelo centro alto
     para manter rosto e ombros sempre visíveis */
  height:100%;min-height:clamp(340px,26vw,420px);
  border-radius:var(--r-lg);
  background:url('https://imagedelivery.net/6I5m6pSopKC6qO0WVEbZDw/precifica-biteti/retrato') 50% 16%/cover no-repeat;
  background-color:var(--nude-2);
  /* dificulta arrastar e salvar */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}
.autora__selo-ico{width:13px;height:13px;flex:0 0 auto;color:var(--brown-400)}
.autora__selo{
  display:inline-flex;align-items:center;gap:7px;
  align-self:flex-start;   /* não estica na coluna flex */
  width:fit-content;
  height:28px;padding:0 12px;
  border-radius:8px;
  background:var(--white);
  border:1px solid var(--line);
  font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brown-500);
  margin-bottom:clamp(14px,1.4vw,20px);
}

.section--autora .h2{margin-bottom:clamp(18px,1.9vw,26px)}
.autora__corpo{display:grid;gap:clamp(14px,1.3vw,18px);max-width:56ch}
.autora__corpo p{
  font-size:clamp(1rem,1.1vw,1.125rem);line-height:1.62;
  letter-spacing:-.008em;color:var(--ink-2);
}
.autora__corpo strong{font-weight:500;color:var(--brown-600)}
.autora__corpo em{font-style:italic;color:var(--brown-600)}

/* ── resultados: carrossel contínuo, de ponta a ponta ─────── */
.section--resultados{background:var(--nude-1);border-block:1px solid var(--line-2)}
.resultados-carrossel{
  --card-w:clamp(290px,22vw,360px);
  --card-gap:clamp(14px,1.4vw,22px);
  margin-top:clamp(40px,4.5vw,68px);
  overflow:hidden;
  /* as pontas somem suavemente em vez de cortar seco */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.resultados{
  display:flex;width:max-content;
  margin:0;padding:6px 0;list-style:none;
}
/* o espaçamento fica dentro de cada card (e não em gap) para que
   metade da trilha seja exatamente uma volta: o laço não dá salto */
.resultado{
  flex:0 0 auto;width:var(--card-w);
  margin-right:var(--card-gap);
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:clamp(20px,1.7vw,24px);
  padding:10px;
  box-shadow:0 1px 2px rgba(53,38,28,.04),0 8px 24px -12px rgba(53,38,28,.12);
}
.resultado__img{
  display:block;width:100%;
  aspect-ratio:660/760;
  border-radius:14px;
  border:1px solid var(--line-2);
  background-color:var(--nude-0);
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  /* dificulta arrastar e salvar */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}
.resultado__info{display:grid;gap:8px;padding:14px 6px 6px;flex:1;align-content:start}
.resultado__topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.875rem;color:var(--muted)}
.resultado__topo strong{font-weight:500;color:var(--ink);font-size:1rem}
.resultado__topo span::first-letter{text-transform:uppercase}
.resultado__valor{font-size:1.25rem;font-weight:500;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.resultado__valor span{font-size:.875rem;font-weight:400;letter-spacing:0;color:var(--muted)}
.resultado__hist{font-size:.8125rem;line-height:1.5;color:var(--ink-2);padding-bottom:4px;border-bottom:1px solid var(--line-2)}
.resultado__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.resultado__tag{
  font-size:.75rem;font-weight:500;padding:5px 10px;border-radius:999px;
  background:var(--nude-1);color:var(--brown-600);
}
.resultado__tag--lucro{background:#E6F4EA;color:#1E6B34}

/* a trilha só anda com JS (ele duplica os cards para o laço) */
.resultados.is-laco{animation:resultados-laco var(--laco-dur,60s) linear infinite}
.resultados-carrossel.is-parado .resultados{animation-play-state:paused}
@media (hover:hover){
  .resultados-carrossel:hover .resultados{animation-play-state:paused}
}
@keyframes resultados-laco{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
/* sem movimento automático: vira uma faixa que se arrasta à mão */
@media (prefers-reduced-motion:reduce){
  .resultados-carrossel{overflow-x:auto;-webkit-mask-image:none;mask-image:none;padding-inline:var(--gutter)}
  .resultados.is-laco{animation:none}
}

/* ── provas ao pé do texto da autora ──────────────────────── */
.provas{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1vw,14px);
  margin-top:clamp(20px,2vw,28px);
}
.prova{
  display:flex;align-items:center;gap:11px;
  padding:clamp(12px,1.1vw,15px) clamp(13px,1.2vw,16px);
  border-radius:var(--r-md);
  background:var(--white);
  border:1px solid var(--line);
}
.prova__ico{width:22px;height:22px;flex:none;display:block;color:var(--brown-500)}
.prova__ico svg{width:22px;height:22px;display:block}
.prova__txt{
  font-size:clamp(.8125rem,.92vw,.9375rem);line-height:1.35;
  letter-spacing:-.008em;color:var(--ink-2);
}
.prova__txt strong{font-weight:500;color:var(--brown-600)}

/* ── aulas: um quadro só, as telas trocam por dissolução ──── */
.section--aulas{background:var(--nude-1);border-block:1px solid var(--line-2)}
.aula{
  margin-top:clamp(40px,4.5vw,68px);
  max-width:min(100%, 1020px);
  margin-inline:auto;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#0E0E0E;
}
.aula__quadro{
  position:relative;
  width:100%;
  aspect-ratio:1600/934;
}
.aula__tela{
  position:absolute;inset:0;
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  opacity:0;visibility:hidden;
  transition:opacity .62s var(--spring);
  /* dificulta arrastar e salvar */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}
.aula__tela.is-ativa{opacity:1;visibility:visible}
/* a primeira tela vem do CSS para aparecer mesmo sem JS;
   no celular pede uma variante menor, que basta para a largura de lá */
.aula__tela--primeira{background-image:url('https://imagedelivery.net/6I5m6pSopKC6qO0WVEbZDw/precifica-aula-01/cartao')}
@media (min-width:768px){
  .aula__tela--primeira{background-image:url('https://imagedelivery.net/6I5m6pSopKC6qO0WVEbZDw/precifica-aula-01/topo')}
}

.aula__barra{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(13px,1.3vw,17px) clamp(15px,1.5vw,20px);
  border-top:1px solid #00000015;
  background:var(--white);
}
.aula__info{display:grid;gap:3px;min-width:0}
.aula__modulo{
  font-size:.6875rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brown-400);
}
.aula__titulo{
  font-size:clamp(.9375rem,1.05vw,1.0625rem);font-weight:500;
  letter-spacing:-.016em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aula__pontos{display:flex;align-items:center;gap:6px;flex:none}
.aula__ponto{
  width:6px;height:6px;border-radius:50%;
  background:var(--brown-100);
  transition:background-color .45s var(--spring),transform .45s var(--spring);
}
.aula__ponto.is-ativa{background:var(--brown-600);transform:scale(1.35)}

/* ── selo de garantia ─────────────────────────────────────── */
.garantia{
  display:flex;align-items:flex-start;gap:13px;
  margin-top:clamp(18px,2vw,24px);
  padding:clamp(15px,1.5vw,19px) clamp(15px,1.6vw,20px);
  border-radius:var(--r-md);
  background:var(--brown-900);
  border:0;
}
.garantia__ico{
  width:28px;height:28px;flex:none;display:block;color:#fff;
}
.garantia__ico svg{width:28px;height:28px;display:block}
.garantia__corpo{display:flex;flex-direction:column;gap:5px;min-width:0}
.garantia__t{
  font-weight:500;font-size:clamp(.9375rem,1.1vw,1.0625rem);
  letter-spacing:-.018em;color:#fff;
}
.garantia__p{
  font-size:clamp(.8125rem,.95vw,.875rem);line-height:1.5;
  letter-spacing:-.006em;color:rgba(250,247,242,.72);
}

/* ── faixa de urgência dentro do bloco de oferta ───────────── */
.urgente{
  /* margem no topo, sangria total nas laterais e no pé do bloco */
  margin-top:clamp(18px,2vw,26px);
  margin-inline:calc(-1 * clamp(28px,3.4vw,52px));
  margin-bottom:calc(-1 * clamp(28px,3.4vw,52px));
  height:38px;
  display:flex;align-items:center;
  background:#FFD60A;
  border-radius:0 0 calc(var(--r-2xl) - 1px) calc(var(--r-2xl) - 1px);
  overflow:hidden;
}
.urgente--topo{
  margin-top:calc(-1 * clamp(28px,3.4vw,52px));
  margin-bottom:clamp(18px,2vw,26px);
  border-radius:calc(var(--r-2xl) - 1px) calc(var(--r-2xl) - 1px) 0 0;
}
.urgente__track{
  display:flex;align-items:center;
  white-space:nowrap;
  will-change:transform;
}
/* só começa a deslizar depois que a largura do grupo foi medida:
   assim não existe um quadro em branco antes do laço fechar */
.urgente__track.pronta{animation:desliza var(--dur,26s) linear infinite}
.urgente__grupo{display:flex;align-items:center;gap:14px;padding-right:14px;flex:none}
.urgente__txt{
  font-size:.6875rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:#2F231B;
}
.urgente__txt b{font-weight:800;letter-spacing:.07em}
.urgente__pt{width:4px;height:4px;border-radius:50%;background:rgba(47,35,27,.45);flex:none}

/* ── notificação de prova social (formato iOS) ─────────────── */
.notif{
  position:fixed;left:50%;z-index:60;
  top:calc(env(safe-area-inset-top, 0px) + clamp(14px, 1.6vw, 22px));
  width:min(clamp(348px, 27vw, 412px), calc(100vw - 2.9em));
  transform:translate(-50%, -150%);
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;
  border-radius:22px;
  background:rgba(250,247,242,.66);
  -webkit-backdrop-filter:blur(38px) saturate(190%);
  backdrop-filter:blur(38px) saturate(190%);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 14px 38px rgba(47,35,27,.15), 0 1px 0 rgba(255,255,255,.55) inset;
  opacity:0;pointer-events:none;
  transition:opacity .42s var(--spring), transform .6s var(--spring), top .45s var(--spring);
}
.notif--visivel{opacity:1;transform:translate(-50%, 0)}
/* desce abaixo da navbar quando ela está à mostra */
body:has(.nav--revelado) .notif{top:calc(env(safe-area-inset-top, 0px) + clamp(72px, 5.4vw, 86px))}

.notif__app{
  width:40px;height:40px;flex:none;
  display:grid;place-items:center;
  border-radius:11px;
  background:var(--grad-brown);
  color:#fff;
}
.notif__logo{
  display:block;width:27px;aspect-ratio:704/305;
  background:url('assets/logo-light.svg') center/contain no-repeat;
  -webkit-user-select:none;user-select:none;pointer-events:none;
}
.notif__corpo{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.notif__topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.notif__app-nome{
  font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brown-500);
}
.notif__hora{font-size:.6875rem;font-weight:400;letter-spacing:-.004em;color:var(--muted)}
.notif__txt{
  font-size:.9375rem;font-weight:400;line-height:1.3;letter-spacing:-.012em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.notif__txt b{font-weight:500}

/* ── pílula fixa "Continue rolando" ───────────────────────── */
.rolar{
  position:fixed;left:50%;z-index:45;
  bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 2vw, 28px));
  transform:translate(-50%, 14px);
  display:inline-flex;align-items:center;gap:8px;
  height:38px;padding:0 16px 0 13px;
  border-radius:var(--r-pill);
  background:rgba(250,247,242,.6);
  -webkit-backdrop-filter:blur(34px) saturate(190%);
  backdrop-filter:blur(34px) saturate(190%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
  font-size:.875rem;font-weight:400;letter-spacing:-.006em;color:var(--ink-2);
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .38s var(--spring), transform .45s var(--spring);
}
.rolar--visivel{opacity:1;transform:translate(-50%, 0)}
.rolar__seta{
  width:16px;height:16px;flex:none;display:block;color:var(--brown-500);
  animation:rolarSeta 2.2s var(--spring) infinite;
}
.rolar__seta svg{width:16px;height:16px;display:block}
@keyframes rolarSeta{
  0%,62%,100%{transform:translateY(0);opacity:1}
  30%{transform:translateY(3px);opacity:.55}
}

@media (prefers-reduced-motion:reduce){
  .notif{transition:opacity .25s ease;transform:translate(-50%,0)}
  .rolar{transition:opacity .25s ease;transform:translate(-50%,0)}
  .rolar--visivel{transform:translate(-50%,0)}
  .rolar__seta{animation:none}
  .nav{transition:opacity .25s ease;transform:none}
  .js .reveal{transition:opacity .25s ease;transform:none!important}
  .phone{transition:none}
  *{scroll-behavior:auto}
}
@media (prefers-reduced-transparency:reduce){
  .nav,.orbit__item,.offer,.ui__tabs,.rolar,.notif{backdrop-filter:none;-webkit-backdrop-filter:none}
  .notif{background:var(--nude-0)}
  .rolar{background:var(--nude-0)}
  .nav{background:var(--nude-0)}
  .orbit__item{background:var(--white)}
  .offer{background:rgba(255,255,255,.1)}
}

/* ============================================================
   16. RESPONSIVO — margens laterais por dispositivo
   Desktop grande 320px · Notebook · Tablet · Mobile 1.45em
   ============================================================ */

/* ---- Desktop grande (≥1680px): 320px de margem ---- */
@media (min-width:1680px){
  :root{--gutter:320px}
}

/* ---- Desktop (1440–1679px) ---- */
@media (min-width:1440px) and (max-width:1679.98px){
  :root{--gutter:clamp(180px,18vw,320px)}
}

/* ---- Notebook (1200–1439px) ---- */
@media (min-width:1200px) and (max-width:1439.98px){
  :root{--gutter:clamp(96px,10vw,150px);--nav-h:70px}
  .phone{--pw:300px}
  .phone--lg{--pw:320px}
}

/* ---- Notebook pequeno (1024–1199px) ---- */
@media (min-width:1024px) and (max-width:1199.98px){
  :root{--gutter:72px;--nav-h:68px}
  .phone{--pw:280px}
  .phone--lg{--pw:300px}
  .hero__grid{gap:40px}
  .showcase{gap:20px}
  .orbit__item{padding:12px 16px;font-size:.8125rem}
}

/* ---- Desktop: menos respiro entre o texto de apoio e os blocos ---- */
@media (min-width:1024px){
  .cards3,
  .flow,
  .grid6{margin-top:clamp(24px,2.2vw,38px)}

  /* todos os títulos de seção num corpo só, menor que o do topo
     (o título do hero usa .display e continua como está) */
  .h2{font-size:clamp(1.75rem,2.7vw,2.9rem)}
}

/* ---- Tablet (768–1023px) ---- */
@media (max-width:1023.98px){
  :root{--gutter:48px;--nav-h:68px;--sec-y:clamp(64px,8vw,104px)}

  /* desfoque em superfície fixa custa caro no celular e engasga o scroll */
  .nav{
    backdrop-filter:blur(34px) saturate(190%);
    -webkit-backdrop-filter:blur(34px) saturate(190%);
    background:rgba(252,242,235,.58);
  }
  .orbit__item{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:var(--white);border-color:var(--line);
  }
  /* sem o desfoque, o fundo translúcido sumia: devolve corpo ao bloco */
  /* sem o desfoque, o branco puxava para o cinza. Estes valores são o
     resultado exato do backdrop-filter do desktop (saturate 160% + branco 5,5%),
     para a cor ficar idêntica nos dois. */
  .offer{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:linear-gradient(165deg,#4C3525 0%,#33261D 100%);
    border-color:rgba(255,255,255,.12);
  }
  .ui__tabs{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--nude-1)}

  .hero{
    display:flex;flex-direction:column;
    padding-top:clamp(32px,5vw,56px);padding-bottom:0;
    /* mesma cor do topo da imagem, para não haver emenda visível */
    background:#FCF2EB;
  }
  .hero::after{display:none}
  .hero .shell{position:static;order:1;display:block}
  .hero__grid{width:auto}
  .hero__copy{max-width:none;text-align:center}
  .hero__copy .lead{max-width:none}
  /* logo, título, texto e pílulas centralizados no celular */
  .logo{margin-inline:auto;width:132px}
  .logo--foot{width:92px}
  .checks{justify-content:center}
  .hero__pic{
    order:2;
    margin-top:clamp(20px,3vw,28px);
    /* recorte a partir da base: os aparelhos começam em 41% da imagem,
       então 39/50 deixa só um respiro de creme acima deles */
    aspect-ratio:39/50;
    background-image:url('https://imagedelivery.net/6I5m6pSopKC6qO0WVEbZDw/precifica-hero-app-mobile/topoCelular');
    background-position:center bottom;
  }
  .phone{--pw:320px}
  .phone--lg{--pw:340px}

  .cards3{grid-template-columns:1fr 1fr}
  .cards3 .qcard:last-child{grid-column:1/-1}

  .section--fluxo .sec__head{max-width:none}
  .flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .flow__step{min-height:104px}
  .flow__step:not(:last-child)::after{display:none}
  .notes{grid-template-columns:1fr 1fr;gap:16px}

  .showcase{grid-template-columns:1fr;justify-items:center;gap:32px}
  .orbit{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .orbit--left{order:2}
  .orbit--right{order:3}
  .orbit .orbit__item,
  .orbit .orbit__item:nth-child(n){margin:0;transform:none;flex:0 0 auto}
  .orbit .orbit__item:hover,
  .orbit .orbit__item:nth-child(n):hover{transform:translateY(-2px)}
  .showcase__phone{order:1}

  .grid6{grid-template-columns:1fr 1fr}
}

/* ---- Tablet retrato (600–860px) ---- */
@media (max-width:860px){
  :root{--gutter:40px}
  .orbit{gap:9px}
}

/* ---- Mobile (<768px): margem 1.45em dos dois lados ---- */
@media (max-width:767.98px){
  :root{
    --gutter:1.45em;
    --strip-h:34px;
    --nav-h:62px;
    --sec-y:clamp(56px,14vw,80px);
    --r-lg:14px;--r-xl:16px;--r-2xl:18px;
  }

  body{font-size:16px}

  .hero{padding-top:28px}
  .hero__grid{gap:40px}
  .hero__copy>*+*{margin-top:16px}
  .display{
    font-size:clamp(1.6875rem,7.1vw,2.125rem);line-height:1.12;letter-spacing:-.026em;
    /* sem balancear: as linhas usam a largura toda em vez de encolher */
    text-wrap:pretty;
  }
  .h2{font-size:clamp(1.5rem,6.3vw,1.9375rem);line-height:1.12;letter-spacing:-.024em}
  /* no celular o título corre como parágrafo, sem quebra forçada */
  .quebra{display:none}
  /* "atendimento." sozinho na última linha, em qualquer largura de celular */
  .br-mob{display:inline}
  .lead{font-size:1.0625rem;line-height:1.55;letter-spacing:-.008em}

  .checks{gap:8px}
  .checks li{height:36px;font-size:.8125rem;padding:0 14px 0 10px}
  .notif{padding:12px 13px;gap:11px;border-radius:20px}
  .notif__app{width:37px;height:37px;border-radius:10px}
  .notif__logo{width:25px}
  .notif__txt{font-size:.875rem}
  body:has(.nav--revelado) .notif{top:calc(env(safe-area-inset-top, 0px) + 70px)}
  .rolar{height:36px;font-size:.8125rem;padding:0 14px 0 11px;gap:7px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 18px)}
  .rolar__seta,.rolar__seta svg{width:15px;height:15px}

  .phone{--pw:min(300px,84vw)}
  .phone--lg{--pw:min(310px,86vw)}

  .cards3{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .cards3 .qcard:last-child{grid-column:auto}
  .qcard{padding:22px}
  .qcard__quote{font-size:1.125rem}

  .statement{margin-top:32px;padding:32px 22px;border-radius:5px}
  .statement::after{--q:6px;inset:10px}
  .statement p{font-size:1.1875rem;line-height:1.32}

  /* trilha vertical à esquerda, com bolinha e traço ligando cada bloco */
  .flow{
    --gap:22px;--dot-y:6.5px;--trilho-x:5.5px;
    grid-template-columns:1fr;gap:var(--gap);margin-top:32px;
    position:relative;padding-left:19px;
  }
  .flow::before,
  .flow::after{
    content:"";position:absolute;left:var(--trilho-x);width:2px;
    top:var(--trilho-topo,0);
  }
  .flow::before{height:var(--trilho-altura,0);background:var(--brown-100)}
  /* parte preenchida, que cresce conforme o scroll */
  .flow::after{
    height:calc(var(--trilho-altura,0px) * var(--preenchido,0));
    background:var(--brown-700);
  }
  .flow__step::before{
    content:"";position:absolute;z-index:1;
    left:-19px;top:calc(var(--dot-y) - 6.5px);
    width:13px;height:13px;border-radius:50%;box-sizing:border-box;
    /* anel maior e mais claro, com um ponto escuro menor no centro */
    border:1px solid var(--brown-200);
    background:
      radial-gradient(circle 3px at center,var(--brown-700) 99%,transparent 100%),
      var(--nude-2);
    transition:background-color .3s var(--spring),border-color .3s var(--spring);
  }
  /* ao ser ultrapassada pelo preenchimento, a bolinha assume a cor da linha */
  .flow__step.trilha-passou::before{
    border-color:var(--brown-700);
    background:var(--brown-700);
  }
  /* a última bolinha fecha no rodapé do bloco final */
  .flow__step--end::before{top:auto;bottom:0}
  /* a trilha substitui as setas entre os cards */
  .flow__step:not(:last-child)::after{display:none}
  .flow__step{
    flex-direction:column;align-items:flex-start;gap:12px;
    min-height:0;padding:16px 18px;
  }
  .flow__step:not(:last-child)::after{
    top:auto;bottom:calc(var(--gap) / -2 - 4px);
    right:auto;left:50%;
    width:8px;height:8px;
    border-color:var(--brown-300);
    transform:translateX(-50%) rotate(135deg);
  }
  .flow__i{width:30px;height:30px}
  .flow__step--end{padding:16px 18px;justify-content:flex-start;margin-bottom:clamp(18px,4vw,26px)}
  /* quando a linha chega ao fim, o último bloco vira marrom e assim fica;
     só volta ao claro se o scroll subir e a linha recuar */
  .flow__step,
  .flow__step .flow__t,
  .flow__step .flow__v{transition:background-color .5s var(--spring),border-color .5s var(--spring),color .5s var(--spring)}
  .flow__step--end.trilha-passou{background:var(--grad-brown-dark);border-color:transparent}
  .flow__step--end.trilha-passou .flow__t{color:#fff}
  .flow__step--end.trilha-passou .flow__v{color:#fff}
  .flow__step--end.trilha-passou .flow__v i{color:rgba(250,247,242,.7)}
  .flow__step--end.trilha-passou .flow__i{background:rgba(255,255,255,.18);color:#fff}
  .flow__step--end.trilha-passou .flow__bar{background:rgba(255,255,255,.22)}
  .flow__step--end.trilha-passou .flow__bar::before{background:#fff}
  .notes{grid-template-columns:1fr;gap:12px;margin-top:12px}
  .note{padding:20px}
  .kicker{font-size:1.25rem;margin-top:28px;padding-top:22px}

  .showcase{
    display:grid;grid-template-columns:1fr;
    gap:0;margin-top:32px;
    align-items:stretch;justify-items:stretch;
  }
  /* no celular a lista vem acima do aparelho */
  .showcase__phone{grid-column:1/-1;order:2;margin-top:24px;justify-self:center}
  /* as duas listas somem como caixa: os itens entram direto na grade */
  .orbit{display:contents}
  /* uma função por linha: ponto, texto sem fundo e um filete embaixo */
  .orbit__item{
    order:1;
    width:90%;justify-self:center;
    justify-content:flex-start;text-align:left;
    white-space:normal;line-height:1.3;
    padding:13px 0;font-size:.875rem;gap:10px;
    background:none;
    border:0;border-bottom:1px solid rgba(53,38,28,.14);
    border-radius:0;
    color:var(--ink);
    font-weight:400;
  }
  .orbit--right .orbit__item:last-child{border-bottom:0}
  .orbit__item::before{background:var(--brown-900);width:5px;height:5px}

  .grid6{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .ncard{padding:22px}

  .section--oferta .h2{max-width:none;font-size:clamp(1.5rem,6.4vw,1.9375rem)}
  .offer{margin-top:32px;padding:22px 16px}
  .urgente{
    margin-top:18px;margin-inline:-16px;margin-bottom:-22px;
    height:34px;
  }
  .urgente--topo{margin-top:-22px;margin-bottom:18px}
  .autora{grid-template-columns:1fr;gap:26px}
  /* no celular a foto vem depois do texto e ocupa a largura inteira */
  .autora__foto{display:block;order:2}
  .autora__texto{order:1}
  .autora__img{
    border-radius:var(--r-md);
    max-width:none;margin-inline:0;
    aspect-ratio:1122/1402;height:auto;min-height:0;
    background-position:50% 12%;
  }
  .autora__texto{text-align:left}
  .autora__corpo p{font-size:1rem;line-height:1.6}
  .resultados-carrossel{--card-w:74vw;--card-gap:12px;margin-top:30px}
  .resultado{border-radius:20px}
  .provas{grid-template-columns:1fr;gap:9px;margin-top:20px}
  .prova{padding:12px 13px;gap:10px}
  .prova__txt{font-size:.875rem}
  .aula{margin-top:32px;border-radius:var(--r-md)}
  .aula__barra{padding:11px 13px;gap:12px}
  .aula__titulo{font-size:.875rem}
  .aula__modulo{font-size:.625rem}
  .aula__ponto{width:5px;height:5px;gap:5px}
  .garantia{gap:11px;padding:14px 14px;margin-top:18px}
  .garantia__ico,.garantia__ico svg{width:24px;height:24px}
  .urgente__txt{font-size:.625rem;letter-spacing:.08em}
  .offer__list{gap:8px;margin-top:22px}
  .oitem{padding:12px 14px;gap:13px}
  .oitem__ico{width:21px;height:21px}
  .oitem__ico svg{width:20px;height:20px}
  .oitem__t{font-size:.9375rem}
  .offer__price{margin-top:26px;padding-block:2px}
  .offer__num{font-size:5.5rem}
  .offer__cur{font-size:1.75rem}
  .cta{min-height:60px;padding:0 20px;font-size:.9375rem;line-height:1.25}
  .cta span{display:block}

  .foot{padding-block:28px}
  .foot__inner{gap:10px}

  /* destaque percorrendo os cards conforme o scroll */
  /* tudo que muda de cor acompanha a mesma transição: entra, troca e sai suave */
  /* cor sólida, e não gradiente: só assim a troca acontece de forma
     gradual em vez de saltar de um estado para o outro */
  /* os cards também são elementos de reveal, e aquela regra tem prioridade
     maior; por isso a transição de cor precisa ser declarada junto dela */
  .js .ncard.reveal{
    transition:
      opacity .62s var(--spring),
      transform .62s var(--spring),
      background-color .6s var(--spring),
      border-color .6s var(--spring);
  }
  .ncard{transition:background-color .6s var(--spring),border-color .6s var(--spring)}
  .ncard__t,
  .ncard__l li{transition:color .6s var(--spring)}
  .ncard__l li::before{transition:background-color .6s var(--spring)}
  .ncard.is-destaque{background-color:#31241B;border-color:transparent}
  .ncard.is-destaque .ncard__t{color:#fff}
  .ncard.is-destaque .ncard__ico{color:#fff}
  .ncard.is-destaque .ncard__l li{color:rgba(250,247,242,.8)}
  .ncard.is-destaque .ncard__l li::before{background:rgba(255,255,255,.45)}
}

/* ---- Mobile pequeno (<380px) ---- */
@media (max-width:379.98px){
  .display{font-size:1.5625rem}
  .h2{font-size:1.625rem}
  .phone{--pw:min(272px,82vw)}
  .offer__num{font-size:4.5rem}
}

/* ---- Foco visível ---- */
:where(a,button):focus-visible{
  outline:2px solid var(--brown-400);
  outline-offset:3px;
  border-radius:var(--r-pill);
}