/* ============================================================
   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:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-2xl:44px; --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(2.3125rem,4vw,4.125rem);
  line-height:1.05;
  letter-spacing:-.038em;
  text-wrap:balance;
}
.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)}

.eyebrow{
  font-weight:500;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brown-400);
}

/* ---------- 5. FAIXA SUPERIOR (SEÇÃO 00) ---------- */
.topstrip{
  position:relative;z-index:60;
  height:var(--strip-h);
  display:flex;align-items:center;
  background:var(--grad-brown);
  overflow:hidden;
}
.topstrip__track{
  display:flex;align-items:center;gap:28px;
  white-space:nowrap;
  animation:slide 38s linear infinite;
  will-change:transform;
}
.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 slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .topstrip__track{animation:none;justify-content:center;width:100%}
  .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,.86);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  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('assets/hero-app.webp') 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;
}
.hero__copy{position:relative;z-index:2;max-width:min(46vw,600px)}
.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 */
.phones{
  --pw-hero:clamp(206px,15.5vw,300px);
  --ovl:.17;
  display:flex;align-items:center;justify-content:center;
  width:100%;
}
.phones .phone{--pw:var(--pw-hero)}
.phones__slot{position:relative}
.phones__slot--back{
  z-index:1;
  transform:translateY(-7%) scale(.9);
  transform-origin:right center;
}
.phones__slot--front{
  z-index:2;
  margin-left:calc(var(--pw-hero) * -1 * var(--ovl));
}
.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{font-weight:500;font-size:calc(15 * var(--s));letter-spacing:-.02em}
.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 i{display:block;width:62%;height:100%;border-radius:1px;background:#34C759}

.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;
}
.ui__hero::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.05) 0 8px,transparent 9px),
                   radial-gradient(circle at 70% 65%,rgba(255,255,255,.04) 0 14px,transparent 15px),
                   radial-gradient(circle at 42% 88%,rgba(255,255,255,.04) 0 10px,transparent 11px);
}
.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,#E7CDB4,#B98F6C);
  box-shadow:0 0 0 calc(2 * var(--s)) rgba(255,255,255,.85);
}
.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:var(--grad-brown);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:flex;align-items:center;justify-content:space-between;
  margin-inline:calc(-14 * var(--s));
  padding:calc(9 * var(--s)) calc(14 * 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));width:calc(56 * 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:absolute;left:50%;top:calc(-20 * var(--s));transform:translateX(-50%);
  width:calc(54 * var(--s));height:calc(54 * var(--s));border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:var(--grad-brown);
  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))}

.ui--sim{background:var(--nude-1)}
.ui__navrow{
  display:flex;align-items:flex-start;gap:calc(9 * var(--s));
  padding:calc(6 * var(--s)) calc(2 * var(--s)) calc(13 * var(--s));
}
.ui__back{color:var(--ink);flex:none;margin-top:calc(4 * var(--s))}
.ui__back svg{width:calc(17 * var(--s));height:calc(17 * var(--s))}
.ui__navtext{display:flex;flex-direction:column;min-width:0}
.ui__h1{font-weight:500;font-size:calc(21 * var(--s));line-height:1.12;letter-spacing:-.032em}
.ui__h2{margin-top:calc(3 * var(--s));font-size:calc(12 * var(--s));line-height:1.3;color:var(--muted)}

.ui__simlist{display:flex;flex-direction:column;gap:calc(9 * var(--s))}
.ui__simrow{
  display:flex;align-items:center;gap:calc(11 * var(--s));
  padding:calc(11 * var(--s)) calc(12 * var(--s));
  border-radius:calc(19 * var(--s));
  background:var(--white);
}
.ui__ico--round{border-radius:50%;width:calc(38 * var(--s));height:calc(38 * var(--s))}
.ui__ico--round svg{width:calc(19 * var(--s));height:calc(19 * var(--s))}
.ui__simtext{display:flex;flex-direction:column;min-width:0;flex:1}
.ui__simtitle{
  display:flex;align-items:center;gap:calc(6 * var(--s));flex-wrap:wrap;
  font-weight:500;font-size:calc(14 * var(--s));line-height:1.2;letter-spacing:-.024em;
}
.ui__tag{
  font-style:normal;font-weight:400;
  font-size:calc(10 * var(--s));line-height:1;
  padding:calc(4 * var(--s)) calc(8 * var(--s));
  border-radius:var(--r-pill);
  background:#F3E3C4;color:#8A6A2F;
}
.ui__simdesc{
  margin-top:calc(3 * var(--s));
  font-size:calc(11 * var(--s));line-height:1.32;color:var(--muted);
}

/* ---------- 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}

.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:var(--r-xl);
  padding:clamp(36px,4.4vw,68px) clamp(28px,4vw,64px);
  background:var(--grad-brown);
  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%);
}
.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}
.statement--soft{background:var(--grad-brown-dark)}

/* ---------- 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(5,minmax(0,1fr)) minmax(0,1.3fr);
  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(132px,11vw,160px);
  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: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:32px;height:32px;flex:none;
  display:grid;place-items:center;
  border-radius:10px;
  background:var(--nude-2);color:var(--brown-500);
  font-size:.6875rem;font-weight:500;letter-spacing:.04em;
}
.flow__t{
  font-weight:500;font-size:clamp(.9375rem,1.05vw,1.0625rem);
  letter-spacing:-.018em;line-height:1.25;
}
/* 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);
}
.flow__step--end{
  /* faixa de marrom mais curta: num card pequeno o gradiente cheio manchava */
  background:linear-gradient(145deg,#6B5039 0%,#3A2B20 62%,#2E221A 100%);
  /* borda transparente: mantém o mesmo tamanho dos outros cards e deixa a
     quina arredondada limpa, sem o brilho desigual da borda translúcida */
  border:1px solid transparent;
  color:#fff;
}
.flow__step--end .flow__i{background:rgba(255,255,255,.16);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)}
.flow__step--end .flow__bar{background:rgba(255,255,255,.2)}
.flow__step--end .flow__bar::before{background:#fff}

/* 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 11px;border-radius:var(--r-pill);
  background:var(--nude-2);color:var(--brown-500);
  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;
}
.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)}

/* ---------- 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)}
.ncard__ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--grad-brown);color:#fff;
}
.ncard__ico svg{width:23px;height:23px}
.ncard__t{margin-top:20px;font-weight:500;font-size:clamp(1.125rem,1.3vw,1.3125rem);letter-spacing:-.024em}
.ncard__l{margin-top:14px;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}
.offer{
  margin:clamp(40px,4.5vw,68px) auto 0;
  max-width:640px;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:40px;height:40px;flex:none;
  border-radius:13px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.1);
  color:var(--brown-100);
}
.oitem__ico svg{width:20px;height:20px}
.oitem__t{
  flex:1;
  font-weight:500;font-size:1.0625rem;line-height:1.35;letter-spacing:-.016em;
  color:rgba(250,247,242,.92);
}
.oitem__check{
  width:22px;height:22px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.09);
  color:var(--brown-100);
}
.oitem__check svg{width:12px;height:12px}

/* 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__now{display:inline-flex;align-items:flex-start;gap:8px;color:#fff}
.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}

.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-pill);
  background:linear-gradient(180deg,#FFFFFF 0%,#F2E9DE 100%);
  color:var(--brown-800);
  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,.6) inset,0 12px 34px rgba(0,0,0,.34);
  transition:transform .22s var(--spring-fast),box-shadow .22s var(--spring-fast),filter .22s var(--spring-fast);
  will-change:transform;
}
.cta svg{width:18px;height:18px;flex:none;transition:transform .3s var(--spring)}
.cta:hover{filter:brightness(1.02);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 48px rgba(0,0,0,.42)}
.cta:hover svg{transform:translateX(4px)}
.cta.is-pressed{transform:scale(.975)}
.offer__foot{margin-top:16px;text-align:center;font-size:.875rem;color:rgba(250,247,242,.55)}

/* ---------- 14. RODAPÉ ---------- */
.foot{background:var(--brown-900);color:rgba(250,247,242,.6);padding-block:36px}
.foot__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand--foot .brand__text{color:var(--nude-0)}
.brand--foot .brand__thin{color:rgba(250,247,242,.5)}
.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}

@media (prefers-reduced-motion:reduce){
  .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{backdrop-filter:none;-webkit-backdrop-filter:none}
  .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}
}

/* ---- 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:none;-webkit-backdrop-filter:none;
    background:#FCF2EB;
  }
  .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 */
  .offer{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:linear-gradient(165deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.045) 100%);
    border-color:rgba(255,255,255,.15);
  }
  .oitem{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.11)}
  .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}
  .hero__copy .lead{max-width:none}
  .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('assets/hero-app-mobile.webp');
    background-position:center bottom;
  }
  .phone{--pw:320px}
  .phone--lg{--pw:340px}
  .phones{--pw-hero:min(300px,34vw)}

  .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:118px}
  .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:24px;--r-xl:28px;--r-2xl:32px;
  }

  body{font-size:16px}

  .hero{padding-top:28px}
  .hero__grid{gap:40px}
  .hero__copy>*+*{margin-top:16px}
  .display{font-size:clamp(1.9375rem,8.3vw,2.5rem);line-height:1.08;letter-spacing:-.03em}
  .h2{font-size:clamp(1.75rem,7.4vw,2.25rem);line-height:1.1;letter-spacing:-.028em}
  /* no celular o título corre como parágrafo, sem quebra forçada */
  .quebra{display:none}
  .lead{font-size:1.0625rem;line-height:1.55;letter-spacing:-.008em}
  .eyebrow{font-size:.6875rem;letter-spacing:.14em}

  .checks{gap:8px}
  .checks li{height:36px;font-size:.8125rem;padding:0 14px 0 10px}


  .phone{--pw:min(300px,84vw)}
  .phone--lg{--pw:min(310px,86vw)}
  .phones{--pw-hero:min(212px,52vw);--ovl:.30}
  .phones__slot--back{transform:translateY(-5%) scale(.9)}

  .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:var(--r-xl)}
  .statement p{font-size:1.1875rem;line-height:1.32}

  .flow{--gap:22px;grid-template-columns:1fr;gap:var(--gap);margin-top:32px}
  .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}
  .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 1fr;
    gap:8px;margin-top:32px;
    align-items:stretch;justify-items:stretch;
  }
  .showcase__phone{grid-column:1/-1;order:1;margin-bottom:18px;justify-self:center}
  /* as duas listas somem como caixa: os itens entram direto na grade */
  .orbit{display:contents}
  .orbit__item{
    order:2;
    justify-content:center;text-align:center;
    white-space:normal;line-height:1.25;
    padding:11px 12px;font-size:.8125rem;gap:8px;
  }
  /* o sétimo item fecha a última linha inteira */
  .orbit--right .orbit__item:last-child{grid-column:1/-1}

  .grid6{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .ncard{padding:22px}
  .ncard__ico{width:42px;height:42px;border-radius:13px}

  .section--oferta .h2{max-width:none}
  .offer{margin-top:32px;padding:22px 16px}
  .offer__list{gap:8px;margin-top:22px}
  .oitem{padding:12px 14px;gap:13px}
  .oitem__ico{width:36px;height:36px;border-radius:12px}
  .oitem__ico svg{width:18px;height:18px}
  .oitem__t{font-size:.9375rem}
  .oitem__check{width:19px;height:19px}
  .oitem__check svg{width:10px;height:10px}
  .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{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---- Mobile pequeno (<380px) ---- */
@media (max-width:379.98px){
  .display{font-size:1.8125rem}
  .h2{font-size:1.625rem}
  .phone{--pw:min(272px,82vw)}
  .phones{--pw-hero:min(212px,52vw)}
  .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);
}