/* ==========================================================================
   MAPA NAIL — DESIGN SYSTEM · v1.0
   Liquid Glass (iOS 26) · oliva + coral + lilás
   --------------------------------------------------------------------------
   Kit portátil. Duas formas de usar:
   1) <link rel="stylesheet" href="mapa-nail.css"> numa página nova, ou
   2) copie este arquivo inteiro dentro de uma tag <style> (single-file).

   Fontes (adicione no <head> da página):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap" rel="stylesheet">

   Arquitetura de tokens em 3 camadas:
     PRIMITIVO (valor cru) -> SEMÂNTICO (propósito) -> COMPONENTE (peça).
   Nunca use hex cru em componentes: sempre var(--...).
   ========================================================================== */

:root{
  /* ---------------------------------------------------------------- *
   * 1. PRIMITIVO — a paleta crua da marca (não usar direto na UI)     *
   * ---------------------------------------------------------------- */
  --p-olive:#6f7647;   --p-olive-deep:#4d5430;  --p-moss:#434a29;   /* verde-oliva: a AÇÃO */
  --p-coral:#e3886f;   --p-coral-deep:#d2705a;                      /* coral rosado: quente */
  --p-lilac:#a7a0e2;   --p-lilac-deep:#8079c4;                      /* lilás periwinkle: frio */
  --p-champagne:#bda05c;                                            /* dourado antigo: realce raro */
  --p-rust:#bd5238;                                                 /* ferrugem: SÓ a dor/prejuízo */
  --p-ink:#2b2b20;     --p-ink-soft:#585842;    --p-ink-mute:#6c6a4e;/* texto (oliva quase-preto) */
  --p-cream:#f4f2e6;   --p-cream-cool:#ede9f1;                      /* fundos claros quente/frio */
  --p-white:#ffffff;   --p-black:#15140f;

  /* tints da aurora de fundo (blobs) */
  --p-tint-coral:#f3ad97;  --p-tint-lilac:#c2bbf0;  --p-tint-sage:#cfd4a4;
  --p-tint-cream:#f3efe1;

  /* WhatsApp (só na seção de contato) */
  --p-wa:#1faa59;  --p-wa-deep:#128c50;  --p-wa-bubble:#d9fdd3;  --p-wa-bg:#dcd3c7;

  /* raios, escala e movimento (primitivos) */
  --p-s-1:4px; --p-s-2:8px; --p-s-3:12px; --p-s-4:16px; --p-s-5:24px; --p-s-6:32px; --p-s-7:48px;
  --p-r-lg:30px; --p-r-md:20px; --p-r-sm:14px; --p-r-pill:9999px;
  --p-ease:cubic-bezier(.22,1,.36,1);            /* entradas — desacelera */
  --p-ease-in:cubic-bezier(.4,0,1,1);            /* saídas — acelera */
  --p-ease-liquid:cubic-bezier(.33,1.5,.35,1);   /* mola líquida iOS 26 (overshoot sutil) */
  --p-dur-micro:175ms; --p-dur-fast:260ms; --p-dur-base:420ms; --p-dur-slow:560ms;

  /* ---------------------------------------------------------------- *
   * 2. SEMÂNTICO — o que cada cor SIGNIFICA (use estes na UI)         *
   * ---------------------------------------------------------------- */
  --action:var(--p-olive);            /* ação principal: botões, links, checks, progresso */
  --action-deep:var(--p-olive-deep);  /* fundo de gradiente da ação, realces escuros */
  --accent-warm:var(--p-coral);       --accent-warm-deep:var(--p-coral-deep);   /* destaque quente (bônus, badges) */
  --accent-cool:var(--p-lilac);       --accent-cool-deep:var(--p-lilac-deep);   /* destaque frio (variação de luz) */
  --gold:var(--p-champagne);          /* realce raro premium */
  --pain:var(--p-rust);               /* SÓ para dor/prejuízo/"como é hoje" */

  --text:var(--p-ink);                /* texto principal */
  --text-soft:var(--p-ink-soft);      /* texto secundário (AA sobre vidro claro) */
  --text-mute:var(--p-ink-mute);      /* texto terciário: rótulos, microcopy */
  --on-action:var(--p-white);         /* texto sobre a ação (oliva) */

  --page-bg:#eceadb;                  /* fundo base da página (atrás da aurora) */
  --line:rgba(54,52,32,.12);          /* hairlines/divisores */

  /* Vidro líquido — o material central */
  --glass-blur:34px;                  /* app usa 40px; nav/dock reduzem p/ ~20px */
  --glass-sat:200%;                   /* saturação alta = cores "estouram" atrás (tell do iOS) */
  --glass-border:rgba(255,255,255,.66);
  --glass-hi:rgba(255,255,255,1);     /* fio especular do topo */
  --glass-lo:rgba(54,52,32,.10);      /* sombra interna inferior = espessura */
  --glass-fill-top:rgba(255,255,252,.12);
  --glass-fill-bot:rgba(255,255,251,.045);
  --glass-core:rgba(255,255,252,.24);
  --sheen:rgba(255,255,255,.42);
  --depth-far:rgba(74,70,40,.20);     /* sombra de profundidade (oliva) */
  --rim-rose:rgba(236,158,135,.5);    /* franja cromática coral projetada */
  --rim-lilac:rgba(178,170,228,.5);   /* franja cromática lilás projetada */

  /* Tipografia */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-serif:'Playfair Display',"Didot","Bodoni 72","Hoefler Text",Georgia,"Times New Roman",serif; /* voz emocional */

  /* aliases de escala/raio p/ uso direto */
  --r-lg:var(--p-r-lg); --r-md:var(--p-r-md); --r-sm:var(--p-r-sm); --r-pill:var(--p-r-pill);
  --ease:var(--p-ease); --ease-liquid:var(--p-ease-liquid);
  --max:1120px;                       /* largura de coluna do conteúdo */
}

/* ---------------------------------------------------------------- *
 * RESET mínimo                                                      *
 * ---------------------------------------------------------------- */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }   /* âncoras não somem sob nav fixo */
html,body{ margin:0; }
body{
  font-family:var(--font-sans); color:var(--text); background:var(--page-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; line-height:1.5;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2.5px solid var(--action); outline-offset:3px; border-radius:6px; }

/* ==========================================================================
   AURORA DE FUNDO  (blobs oliva/coral/lilás com grão suave; pausável)
   HTML: <div class="bg" aria-hidden="true">
           <span class="blob c"></span><span class="blob l"></span><span class="blob s"></span>
         </div>
   ========================================================================== */
.bg{ position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--p-tint-cream), transparent 60%),
    linear-gradient(168deg,#f5f3e8 0%,#efeee4 30%,#ece9f1 60%,#f3ede1 100%); }
.blob{ position:absolute; border-radius:50%; filter:blur(52px); opacity:.6; will-change:transform; }
.blob.c{ width:62vmax;height:62vmax; left:-22vmax; top:-18vmax;
  background:radial-gradient(circle at 32% 32%, var(--p-tint-coral), transparent 68%);
  animation:ds-d1 30s var(--ease) infinite alternate; }
.blob.l{ width:55vmax;height:55vmax; right:-20vmax; top:24vh;
  background:radial-gradient(circle at 60% 40%, var(--p-tint-lilac), transparent 68%);
  animation:ds-d2 36s var(--ease) infinite alternate; }
.blob.s{ width:52vmax;height:52vmax; left:6vw; top:120vh;
  background:radial-gradient(circle at 50% 50%, var(--p-tint-sage), transparent 68%);
  animation:ds-d3 34s var(--ease) infinite alternate; }
@keyframes ds-d1{ to{ transform:translate(7vmax,5vmax) scale(1.08);} }
@keyframes ds-d2{ to{ transform:translate(-6vmax,7vmax) scale(1.06);} }
@keyframes ds-d3{ to{ transform:translate(5vmax,-6vmax) scale(1.1);} }
.bg::after{ content:""; position:absolute; inset:0; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
body.bg-paused .blob{ animation-play-state:paused; }   /* pausar em aba oculta (ver JS no guia) */

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ padding:clamp(40px,9vh,96px) 0; }

/* rótulo (eyebrow) — pequeno, oliva, caixa alta */
.eyebrow{ display:inline-flex; align-items:center; gap:.5em;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--action-deep); }
.eyebrow .pin{ width:15px;height:15px; color:var(--accent-warm-deep); flex:none; }
.eyebrow .n{ font-variant-numeric:tabular-nums; color:var(--accent-warm-deep); }

/* cabeçalho de seção centralizado */
.sec-head{ text-align:center; max-width:60ch; margin:0 auto; }
.sec-head .eyebrow{ justify-content:center; }
.sec-head h2{ font-family:var(--font-sans); font-weight:800; font-size:clamp(27px,4.6vw,44px);
  letter-spacing:-.02em; line-height:1.07; margin:14px 0 0; }
.sec-head h2 em{ font-family:var(--font-serif); font-style:italic; font-weight:500; color:var(--action); }
.sec-head .sub{ font-size:clamp(16px,2.1vw,19px); color:var(--text-soft); margin:16px auto 0; max-width:54ch; }

/* ==========================================================================
   TIPOGRAFIA — regra de ouro:
     • Inter (sans) para tudo: títulos, corpo, números.
     • Playfair (serif itálico) SÓ para a "voz emocional": promessa, ênfases (<em>),
       depoimento em destaque, reforço emocional. Nunca para parágrafos longos.
   ========================================================================== */
.h1{ font-family:var(--font-sans); font-weight:800; font-size:clamp(34px,6.6vw,60px);
  line-height:1.04; letter-spacing:-.02em; margin:0; }
.h1 .voz{ font-family:var(--font-serif); font-style:italic; font-weight:500; color:var(--action); }
.h1 .bad{ font-family:var(--font-serif); font-style:italic; font-weight:500; color:var(--pain); }
.promise{ font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:clamp(21px,3.2vw,30px); line-height:1.1; color:var(--action); margin:16px 0 0; }
.lead{ font-size:clamp(16px,2vw,18.5px); color:var(--text-soft); margin:18px 0 0; max-width:44ch; }
.lead.warm{ font-family:var(--font-serif); font-style:italic; font-size:clamp(18px,2.4vw,22px);
  color:var(--text); line-height:1.4; }
.muted{ color:var(--text-soft); }

/* ==========================================================================
   SUPERFÍCIE DE VIDRO  (.glass) — o material central
   Use em qualquer cartão/painel. Variantes de franja: .glass--warm / .glass--cool
   ========================================================================== */
.glass{ position:relative; border-radius:var(--r-lg); isolation:isolate;
  background:radial-gradient(120% 130% at 30% 0%, var(--glass-core) 0%, var(--glass-fill-top) 46%, var(--glass-fill-bot) 100%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-border);
  box-shadow:
    0 1px 1px rgba(54,52,32,.05),
    0 24px 54px -28px var(--depth-far),
    inset 0 1.5px 0 var(--glass-hi),      /* fio especular topo */
    inset 0 -1px 1px var(--glass-lo);     /* sombra interna = espessura */ }
/* brilho (sheen) no topo do vidro */
.glass::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg, var(--sheen) 0%, rgba(255,255,255,0) 26%); }
.glass > *{ position:relative; z-index:1; }
.glass--warm{ box-shadow:0 24px 54px -28px var(--depth-far), 7px 9px 24px -15px var(--rim-rose),
  inset 0 1.5px 0 var(--glass-hi), inset 0 -1px 1px var(--glass-lo); }
.glass--cool{ box-shadow:0 24px 54px -28px var(--depth-far), -7px 9px 24px -15px var(--rim-lilac),
  inset 0 1.5px 0 var(--glass-hi), inset 0 -1px 1px var(--glass-lo); }
.glass--pad{ padding:clamp(22px,3vw,32px); }

/* ==========================================================================
   BOTÕES  (.btn + variante)
   HTML: <a class="btn btn-primary" href="#">Quero o Mapa Nail</a>
   ========================================================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-sans); font-weight:700; font-size:16px; line-height:1; cursor:pointer;
  border:0; border-radius:var(--r-pill); padding:17px 28px; text-decoration:none;
  touch-action:manipulation;   /* remove atraso de 300ms no toque */
  transition:transform .25s var(--ease-liquid), box-shadow .25s var(--ease), filter .2s; }
.btn:active{ transform:scale(.97); }
.btn svg{ width:19px; height:19px; flex:none; }
.btn-primary{ color:var(--on-action); background:linear-gradient(150deg,var(--action),var(--action-deep));
  box-shadow:0 10px 24px -8px rgba(77,84,48,.6), inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 -2px 6px -2px rgba(0,0,0,.18); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(77,84,48,.7), inset 0 1.5px 0 rgba(255,255,255,.4); }
.btn-ghost{ color:var(--action-deep); background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 6px 16px -10px var(--depth-far); }
.btn-ghost:hover{ background:rgba(255,255,255,.72); transform:translateY(-2px); }
.btn-wa{ color:#fff; background:linear-gradient(150deg,var(--p-wa),var(--p-wa-deep));
  box-shadow:0 10px 24px -8px rgba(18,140,80,.55), inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 -2px 6px -2px rgba(0,0,0,.16); }
.btn-wa:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(18,140,80,.65), inset 0 1.5px 0 rgba(255,255,255,.4); }

/* CTA inline + microcopy (usar nas seções de reforço) */
.cta-inline{ margin-top:26px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.cta-inline .micro{ font-size:13.5px; color:var(--text-mute); display:flex; align-items:center; gap:7px; }
.cta-inline .micro svg{ width:15px;height:15px; color:var(--action); flex:none; }

/* ==========================================================================
   LISTAS COM CHECK  (.ticks)  — desejo (oliva) vs dor (.ticks.pains, coral)
   HTML: <ul class="ticks"><li><span class="tk"><svg><use href="#check"/></svg></span>Texto</li></ul>
   ========================================================================== */
.ticks{ margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
.ticks li{ list-style:none; display:flex; align-items:flex-start; gap:12px; font-size:15.5px; color:var(--text); font-weight:600; }
.ticks .tk{ width:23px;height:23px; flex:none; margin-top:1px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg,var(--action),var(--action-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.ticks .tk svg{ width:13px;height:13px; }
.ticks.pains .tk{ background:linear-gradient(150deg,var(--accent-warm),var(--accent-warm-deep)); } /* marcador da dor */

/* ==========================================================================
   COMPARAÇÃO  (.compare)  — "Como é hoje" (dor) vs "Com o Mapa Nail" (desejo)
   ========================================================================== */
.compare{ margin-top:clamp(28px,5vh,52px); display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.compare .col{ position:relative; padding:clamp(22px,3vw,32px); border-radius:var(--r-lg); }
.compare .now{ background:radial-gradient(140% 120% at 24% 0%, rgba(255,255,255,.42), rgba(255,255,255,.22));
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42), 0 14px 30px -24px var(--depth-far); }
.compare .new{ background:radial-gradient(140% 120% at 24% 0%, rgba(238,242,222,.7), rgba(224,231,201,.44));
  -webkit-backdrop-filter:blur(22px) saturate(185%); backdrop-filter:blur(22px) saturate(185%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 18px 36px -24px var(--depth-far); }
@media (max-width:640px){ .compare{ grid-template-columns:1fr; } }

/* ==========================================================================
   SEÇÃO ALTERNADA texto + mockup  (.parada / .parada-grid; .rev inverte lados)
   ========================================================================== */
.parada{ padding:clamp(40px,9vh,96px) 0; }
.parada-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,6vw,72px); align-items:center; }
.parada.rev .parada-grid{ direction:rtl; }
.parada.rev .parada-grid > *{ direction:ltr; }
@media (max-width:820px){ .parada-grid,.hero-grid{ grid-template-columns:1fr !important; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; padding:clamp(28px,7vh,72px) 0 clamp(40px,8vh,88px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,56px); align-items:center; }
.scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:5px; margin:clamp(30px,5vh,46px) 0 0;
  font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); }
.scroll-cue svg{ width:22px;height:22px; color:var(--action); animation:ds-bob 1.9s var(--ease) infinite; }
@keyframes ds-bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ==========================================================================
   MOCKUP DE iPHONE 3D  (.device > .phone)
   HTML:
     <div class="device" style="--pool:#f3ad97;--rim:#e3886f;--ry:-11deg;">
       <span class="lightpool"></span>
       <div class="phone">
         <span class="island"></span>
         <div class="screen"><img src="print.jpg" alt=""></div>
         <span class="glare"></span>
       </div>
       <span class="stamp">Exemplo no app</span>
     </div>
   Vars por seção: --pool/--rim (cor da luz: coral, lilás #c2bbf0/#a7a0e2, sage #cfd4a4/#9aa55f),
   --ry (tilt Y), --rim-x (deslocamento da franja).
   ========================================================================== */
.device{ position:relative; display:flex; justify-content:center; perspective:1700px; }
.lightpool{ position:absolute; width:118%; height:80%; left:-9%; top:12%; z-index:0; filter:blur(46px);
  border-radius:50%; opacity:.7; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, var(--pool,var(--p-tint-coral)), transparent 66%); }
.phone{ --w:clamp(230px,72vw,320px);
  position:relative; z-index:1; width:var(--w); aspect-ratio:739/1600;
  border-radius:calc(var(--w) * .155); padding:calc(var(--w) * .03);
  background:linear-gradient(150deg,#43423b 0%,#23231e 22%,#15140f 55%,#2c2b25 100%);
  transform-style:preserve-3d;
  transform:perspective(1700px) rotateY(var(--ry,-11deg)) rotateX(4deg) rotateZ(var(--rz,-1deg));
  box-shadow:0 2px 2px rgba(0,0,0,.3), 0 30px 50px -22px rgba(40,38,22,.5), 0 60px 90px -50px var(--depth-far),
    var(--rim-x,7px) 14px 40px -22px var(--rim,var(--accent-warm)),
    inset 0 1px 1px rgba(255,255,255,.4), inset 0 0 0 1.5px rgba(255,255,255,.08); }
.phone .screen{ position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:calc(var(--w) * .125); background:#edefe1; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.5); }
.phone .screen img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.phone .island{ position:absolute; z-index:3; top:calc(var(--w) * .052); left:50%; transform:translateX(-50%);
  width:calc(var(--w) * .3); height:calc(var(--w) * .082); background:#000; border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.phone .glare{ position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(128deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 17%, transparent 40%, transparent 90%, rgba(255,255,255,.1) 100%); }
.device .stamp{ position:absolute; z-index:4; bottom:6%; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute);
  background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:5px 11px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); white-space:nowrap; }
/* cena fotográfica atrás do celular (vira "foto de produto") */
.device.scene{ padding:clamp(26px,5vw,56px) clamp(18px,4.5vw,46px); border-radius:32px;
  background-image:var(--scene); background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 28px 66px -34px var(--depth-far); }
.device.scene .lightpool{ display:none; }

/* cartão de foto lifestyle (substitui o celular em seções humanas) */
.photo{ position:relative; z-index:1; width:clamp(250px,76vw,360px); aspect-ratio:3/4; margin:0;
  border-radius:30px; overflow:hidden; background:#edefe1;
  box-shadow:0 30px 50px -22px rgba(40,38,22,.5), 0 60px 90px -50px var(--depth-far),
    var(--rim-x,7px) 14px 40px -22px var(--rim,var(--accent-warm)),
    inset 0 0 0 1px rgba(255,255,255,.5), inset 0 1px 0 rgba(255,255,255,.6); }
.photo img{ width:100%; height:100%; object-fit:cover; }
.photo .glare{ position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(128deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 18%, transparent 42%, transparent 92%, rgba(255,255,255,.12) 100%); }

/* chip flutuante de dado (sobre o mockup do hero) */
.float-chip{ position:absolute; z-index:5; display:flex; flex-direction:column; gap:1px; padding:11px 15px;
  border-radius:16px; font-weight:700; background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.4), 0 14px 30px -14px var(--depth-far); }
.float-chip .k{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); }
.float-chip .v{ font-size:19px; font-variant-numeric:tabular-nums; color:var(--action-deep); }
.float-chip.warm .v{ color:var(--accent-warm-deep); }

/* ==========================================================================
   PROVA / CONFIANÇA
   ========================================================================== */
.trust-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0; padding:0; }
.trust-row li{ list-style:none; display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:var(--text-soft);
  padding:11px 18px; border-radius:var(--r-pill); background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.66), 0 6px 16px -12px var(--depth-far); }
.trust-row svg{ width:17px;height:17px; color:var(--action); flex:none; }

/* depoimento (cartão de vidro). Marque fictícios com <span class="ex-badge">Exemplo</span> */
.tcard{ position:relative; padding:24px; border-radius:var(--r-lg); display:flex; flex-direction:column; gap:14px;
  background:radial-gradient(140% 120% at 24% 0%, rgba(255,255,255,.5), rgba(255,255,255,.26));
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 18px 36px -26px var(--depth-far); }
.ex-badge{ align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-warm-deep); background:rgba(255,255,255,.7); padding:4px 9px; border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); }

/* ==========================================================================
   OFERTA / PREÇO
   ========================================================================== */
.badge-launch{ display:inline-flex; align-items:center; gap:.4em; font-size:11px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; padding:7px 15px; border-radius:var(--r-pill);
  background:linear-gradient(150deg,var(--accent-warm),var(--accent-warm-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.price-was{ font-size:18px; color:var(--text-mute); text-decoration:line-through; }
.price-now{ font-family:var(--font-sans); font-weight:800; font-size:clamp(44px,8vw,64px);
  letter-spacing:-.03em; color:var(--action-deep); line-height:1; font-variant-numeric:tabular-nums; }
.price-inst{ font-size:16px; color:var(--text-soft); font-weight:600; }

/* ==========================================================================
   FAQ  (<details>/<summary> em vidro)
   ========================================================================== */
.faq-item{ border-radius:var(--r-md); overflow:hidden; background:rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }
.faq-item + .faq-item{ margin-top:12px; }
.faq-item summary{ cursor:pointer; list-style:none; padding:18px 22px; font-weight:700; font-size:16.5px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ width:18px;height:18px; color:var(--action); flex:none; transition:transform .3s var(--ease); }
.faq-item[open] summary .chev{ transform:rotate(180deg); }
.faq-item .a{ padding:0 22px 20px; color:var(--text-soft); font-size:15.5px; line-height:1.55; }

/* ==========================================================================
   MOTION — reveal ao rolar (ver JS no guia). Fallback: <noscript> mostra tudo.
   ========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity,transform; }
[data-reveal].in{ opacity:1; transform:none; }

/* ==========================================================================
   ACESSIBILIDADE — respeitar preferências do sistema
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}
@media (prefers-reduced-transparency:reduce){
  .glass,.compare .col,.tcard,.faq-item,.trust-row li,.btn-ghost,.float-chip{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(248,247,239,.96) !important; }
}
/* fallback para navegadores sem backdrop-filter */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass,.tcard,.faq-item,.trust-row li{ background:rgba(248,247,239,.94); }
}
/* contraste um pouco maior em telas pequenas (texto sobre vidro) */
@media (max-width:640px){ :root{ --text-soft:#3f3f2c; --text-mute:#5f5d44; } }
