/* =====================================================================
   Imersão de Expansão · base.css (cópia para o Workshop Profissão Marketing: as cores fixas viraram tokens, para o tema trocar tudo)
   Sistema visual das seções internas (derivado de hero-a e hero-c).
   Mobile-first. Breakpoints: 768px e 1024px.
   Fontes (no <head> da página, não aqui):
   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  color-scheme:dark;

  /* fundos */
  --bg:#030D0A; --bg-2:#061A14; --bg-3:#0A2A20; --bg-deep:#020A08;
  --surface:rgba(14,38,30,.55); --surface-2:rgba(20,52,41,.62);
  --line:rgba(110,231,183,.14); --line-2:rgba(110,231,183,.26); --line-3:rgba(110,231,183,.42);

  /* escala esmeralda */
  --e8:#065F46; --e7:#047857; --e6:#059669; --e5:#10B981; --e4:#34D399; --e3:#6EE7B7; --e2:#A7F3D0; --e1:#D1FAE5;
  --glow:rgba(52,211,153,.35);

  /* texto */
  --text:#F2FBF7; --muted:#A7C4B8; --dim:#7FA394; --ink:#022C22;
  --gold:#D9B26F; --no:#F0A9A0;

  /* degradês */
  --grad-btn:linear-gradient(100deg,var(--e3) 0%,var(--e4) 45%,var(--e5) 100%);
  --grad-forte:linear-gradient(100deg,#FFFFFF 0%,var(--e2) 45%,var(--e4) 100%);
  --grad-mono:linear-gradient(180deg,#ECFDF5 0%,#A7F3D0 24%,#34D399 52%,#0E9F6E 72%,#065F46 100%);
  --grad-vidro:linear-gradient(160deg,rgba(22,56,44,.58),rgba(6,20,16,.66));

  /* fontes */
  --sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Instrument Serif","Bodoni Moda",Georgia,serif;

  /* espaço e raios */
  --gut:clamp(16px,4.4vw,56px);
  --maxw:1200px;
  --sec-y:clamp(72px,15vw,136px);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-card:0 24px 60px -24px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.06) inset;
  --ease:cubic-bezier(.2,.7,.2,1);

  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mk-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --mk-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}

/* ---------- 2. RESET LEVE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
strong,b{font-weight:700;color:var(--text)}
:focus-visible{outline:2px solid var(--e2);outline-offset:3px;border-radius:4px}
::selection{background:color-mix(in srgb,var(--e4) 35%,transparent);color:#fff}
.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}

/* ícone do sprite: <svg class="ic"><use href="#i-check"/></svg> */
.ic{display:inline-block;flex:none;width:1.25em;height:1.25em;vertical-align:-.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 3. TIPOGRAFIA ---------- */
.h-sec{font-size:clamp(28px,7.6vw,54px);line-height:1.1;letter-spacing:-.028em;font-weight:300;text-wrap:balance;max-width:22ch}
.h-3{font-size:clamp(19px,4.8vw,23px);line-height:1.25;letter-spacing:-.012em;font-weight:700}
.h-4{font-size:16px;line-height:1.35;font-weight:700}
.t-fino{font-weight:300}
.t-forte{font-weight:800;font-style:italic;letter-spacing:-.03em;padding-right:.08em;
  background:var(--grad-forte);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.t-linha{display:block}
.t-verde{color:var(--e3)}
.lead{font-size:clamp(16.5px,4.3vw,19px);line-height:1.6;color:var(--muted);max-width:60ch;text-wrap:pretty}
.txt{font-size:16px;color:var(--muted)}
.legenda{font-size:13px;line-height:1.45;color:var(--dim)}
.prosa{font-size:clamp(16px,4.2vw,18px);line-height:1.65;color:var(--muted);max-width:62ch}
.prosa>*+*{margin-top:1em}
.prosa em{color:var(--e3);font-weight:600}
.frase-forte{display:block;font-size:clamp(28px,8vw,48px);line-height:1.08;letter-spacing:-.03em;font-weight:800;font-style:italic;
  padding-right:.08em;background:var(--grad-forte);-webkit-background-clip:text;background-clip:text;color:transparent;text-wrap:balance}

.eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 16px;font-size:11px;font-weight:600;font-style:italic;
  letter-spacing:.3em;text-transform:uppercase;color:var(--e3);line-height:1.4}
.eyebrow::before{content:"";flex:none;width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--e4))}
/* rótulo de bloco ("Como cada bloco funciona:", "O seu investimento na Imersão:"…): um só, sem o fio do eyebrow */
.kicker{display:block;font-size:11.5px;font-weight:600;font-style:italic;letter-spacing:.24em;text-transform:uppercase;line-height:1.5;color:var(--e3)}

/* cabeçalho de seção */
.sec-head{max-width:780px;margin-bottom:clamp(32px,7vw,56px)}
.sec-head .lead{margin-top:18px}
.sec-head--c{text-align:center;margin-inline:auto}
.sec-head--c .h-sec,.sec-head--c .lead{margin-inline:auto}
.sec-head--c .eyebrow::after{content:"";flex:none;width:22px;height:1px;background:linear-gradient(270deg,transparent,var(--e4))}

/* ---------- 4. LAYOUT ---------- */
.sec{position:relative;isolation:isolate;overflow:hidden;padding-block:var(--sec-y);background:var(--bg)}
.sec>.wrap{position:relative;z-index:1}
.sec--glow{background:
  linear-gradient(180deg,var(--bg) 0%,transparent 12%,transparent 78%,var(--bg) 100%),
  radial-gradient(80% 46% at 50% 8%,color-mix(in srgb,var(--e5) 15%,transparent),transparent 70%),
  radial-gradient(55% 38% at 100% 72%,color-mix(in srgb,var(--e7) 13%,transparent),transparent 70%),
  var(--bg)}
.sec--deep{background:
  radial-gradient(70% 50% at 50% 100%,color-mix(in srgb,var(--e7) 12%,transparent),transparent 70%),
  linear-gradient(180deg,var(--bg),var(--bg-deep) 55%,var(--bg))}
.sec--deep::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  linear-gradient(90deg,transparent 0 12%,color-mix(in srgb,var(--e3) 4%,transparent) 12.2%,transparent 13% 87%,color-mix(in srgb,var(--e3) 4%,transparent) 87.2%,transparent 88%),
  radial-gradient(120% 80% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%)}
.sec--cta{background:
  radial-gradient(60% 50% at 50% 42%,color-mix(in srgb,var(--e5) 24%,transparent),transparent 70%),
  radial-gradient(90% 60% at 50% 110%,color-mix(in srgb,var(--e7) 30%,transparent),transparent 70%),
  linear-gradient(180deg,var(--bg),var(--bg-2) 50%,var(--bg))}
.sec--grain::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:var(--grao)}
.sec--line{border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,var(--line-2),transparent) 1}

.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gut));margin-inline:auto;
  padding-inline:max(var(--gut),env(safe-area-inset-left)) max(var(--gut),env(safe-area-inset-right))}
.wrap--estreito{max-width:calc(780px + 2 * var(--gut))}

.grid-2{display:grid;gap:clamp(32px,6vw,72px);align-items:center}
.grid-cards{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}

/* foto + texto: no mobile fica título → foto → texto; no desktop, foto ao lado */
.split{display:grid;gap:28px;grid-template-areas:"head" "media" "body"}
.split__head{grid-area:head}
.split__head .sec-head,.split__head.sec-head{margin-bottom:0}
.split__media{grid-area:media}
.split__body{grid-area:body}


/* ---------- 5. COMPONENTES ---------- */

/* 5.1 Botões */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  width:100%;min-height:58px;padding:9px 9px 9px 24px;border:0;border-radius:var(--r);cursor:pointer;text-decoration:none;text-align:left;
  font:800 14px/1.25 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--grad-btn);
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 -2px 0 color-mix(in srgb,var(--ink) 25%,transparent) inset,0 14px 34px -10px color-mix(in srgb,var(--e5) 75%,transparent),0 0 60px -12px color-mix(in srgb,var(--e4) 60%,transparent);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);animation:pulse 3.6s ease-in-out infinite}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 4.8s ease-in-out infinite}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--e1);outline-offset:4px;border-radius:var(--r)}
.btn__ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 92%,transparent);color:var(--e3)}
.btn__ic .ic{width:18px;height:18px;stroke-width:2.4}
.btn .lbl-lg{display:none}
.btn--sm{width:auto;min-height:48px;gap:10px;padding:5px 5px 5px 16px;font-size:12px;letter-spacing:.05em;border-radius:12px;animation:none}
.btn--sm .btn__ic{width:38px;height:38px;border-radius:9px}
.btn--ghost{color:var(--text);background:color-mix(in srgb,var(--bg-3) 50%,transparent);animation:none;
  box-shadow:0 0 0 1px var(--line-2) inset,0 10px 30px -18px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn--ghost::after{display:none}
.btn--ghost .btn__ic{background:color-mix(in srgb,var(--e4) 12%,transparent);color:var(--e3);box-shadow:0 0 0 1px var(--line-2) inset}
.btn--ghost:hover{background:color-mix(in srgb,var(--e5) 16%,transparent);box-shadow:0 0 0 1px var(--e4) inset,0 10px 30px -18px rgba(0,0,0,.8)}

.cta-row{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin-top:clamp(36px,7vw,52px)}
.cta-row--c{align-items:center;text-align:center}
.cta-row__frase{font-family:var(--display);font-style:italic;font-size:clamp(19px,5vw,23px);line-height:1.3;color:var(--e1);letter-spacing:.005em;text-wrap:balance}
.cta-row__frase::before,.cta-row__frase::after{color:var(--e4)}

/* infos do evento (data, local…) */
.infos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.infos li{display:inline-flex;align-items:center;gap:7px;font-size:13px;line-height:1.3;color:var(--muted)}
.infos li .ic{width:16px;height:16px;color:var(--e4)}
.cta-row--c .infos{justify-content:center}

/* 5.2 Chips */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:12px;font-size:13.5px;font-weight:500;line-height:1.35;color:var(--text);
  background:linear-gradient(160deg,rgba(22,56,44,.55),rgba(8,24,19,.55));border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.chip b{color:var(--e4);font-weight:700}
.chip--dot::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--e4);box-shadow:0 0 10px var(--e4)}
.chip--pill{border-radius:var(--r-pill)}

/* 5.3 Card de vidro */
.glass{position:relative;border-radius:var(--r-lg);padding:clamp(22px,5.6vw,30px);background:var(--grad-vidro);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:var(--sh-card);
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.glass::before{content:"";position:absolute;top:-1px;left:16%;right:16%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--e2) 75%,transparent),transparent)}
.glass:hover{border-color:var(--line-2)}
.glass>*+*{margin-top:12px}
.glass p{color:var(--muted);font-size:15.5px;line-height:1.6}
.glass--hi{border-color:var(--line-3);background:linear-gradient(160deg,color-mix(in srgb,var(--bg-3) 62%,transparent),color-mix(in srgb,var(--bg-2) 72%,transparent));
  box-shadow:var(--sh-card),0 0 70px -22px var(--glow)}
.glass--tab{padding-top:84px}
.glass--row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px}
.glass--row>*+*{margin-top:0}
.glass--c{text-align:center}
.glass--c .icon-sq--tab{left:50%;transform:translateX(-50%)}
.glass__rotulo{display:block;font-size:11px;font-weight:600;font-style:italic;letter-spacing:.24em;text-transform:uppercase;color:var(--e3)}
.glass__pergunta{font-style:italic;color:var(--text)!important}
.glass__rodape{margin-top:18px!important;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.glass__rodape b{color:var(--e3)}

/* 5.4 Quadrado de ícone e número */
.icon-sq{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--ink);
  background:linear-gradient(145deg,var(--e2),var(--e5));
  box-shadow:0 0 0 1px rgba(255,255,255,.24) inset,0 8px 22px -8px var(--glow),0 0 26px -6px var(--glow)}
.icon-sq .ic{width:22px;height:22px;stroke-width:2.1}
.icon-sq--sm{width:38px;height:38px;border-radius:10px}
.icon-sq--sm .ic{width:18px;height:18px}
.icon-sq--lg{width:58px;height:58px;border-radius:15px}
.icon-sq--lg .ic{width:28px;height:28px}
.icon-sq--ghost{color:var(--e3);background:color-mix(in srgb,var(--e4) 10%,transparent);box-shadow:0 0 0 1px var(--line-2) inset}
.icon-sq--tab{position:absolute;top:-1px;left:clamp(22px,5.6vw,30px);width:50px;height:56px;border-radius:0 0 13px 13px;margin:0!important}

.num-badge{display:inline-grid;place-items:center;flex:none;width:46px;height:46px;border-radius:12px;
  font:800 22px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);background:linear-gradient(145deg,var(--e2),var(--e5));
  box-shadow:0 0 0 1px rgba(255,255,255,.24) inset,0 8px 22px -8px var(--glow)}
.num-badge--ghost{color:var(--e3);background:color-mix(in srgb,var(--e4) 8%,transparent);box-shadow:0 0 0 1px var(--line-2) inset}
.num-badge--nao{color:var(--no);background:rgba(240,169,160,.10);box-shadow:0 0 0 1px rgba(240,169,160,.35) inset}
.num-badge .ic{width:22px;height:22px;stroke-width:2.6}

/* 5.5 Toast (cartão flutuante) */
.toast{display:inline-flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:16px;max-width:300px;
  background:linear-gradient(160deg,rgba(26,62,49,.78),rgba(8,26,20,.74));border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.08) inset,0 0 30px color-mix(in srgb,var(--e4) 10%,transparent)}
.toast__ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--ink);
  background:linear-gradient(145deg,var(--e3),var(--e5));box-shadow:0 0 18px -4px var(--glow)}
.toast__ic .ic{width:18px;height:18px;stroke-width:2.4}
.toast__t{display:block;font-size:13.5px;font-weight:700;line-height:1.2;color:var(--text)}
.toast__s{display:block;margin-top:2px;font-size:11.5px;line-height:1.3;color:var(--muted)}
.toast__s b{color:var(--e3)}
.toast--flutua{animation:float 8s ease-in-out infinite}

/* 5.6 Faixa corrida */
.marquee{position:relative;z-index:2;overflow:hidden;border-block:1px solid var(--line-2);
  background:linear-gradient(90deg,var(--bg-2),var(--bg-3) 50%,var(--bg-2));box-shadow:0 0 40px -10px color-mix(in srgb,var(--e5) 35%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marquee__grp{display:flex;align-items:center;flex:none}
.marquee__it{display:inline-flex;align-items:center;gap:22px;padding:15px 11px;font-size:15px;font-weight:800;font-style:italic;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.marquee__it:nth-child(even){color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--e3) 75%,transparent)}
.marquee__it .ic{width:14px;height:14px;color:var(--e4)}
.marquee--claro{background:linear-gradient(90deg,var(--e6),var(--e4) 50%,var(--e6));border-color:color-mix(in srgb,var(--e2) 60%,transparent)}
.marquee--claro .marquee__it,.marquee--claro .marquee__it:nth-child(even){color:var(--ink);-webkit-text-stroke:0;font-style:normal;letter-spacing:.2em;font-size:13px}
.marquee--claro .marquee__it .ic{color:var(--ink);opacity:.7}

/* 5.7 Foto com moldura de luz */
.foto{position:relative;isolation:isolate;overflow:hidden;margin:0;border-radius:var(--r-xl);background:var(--bg-2);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 90px -30px color-mix(in srgb,var(--e4) 45%,transparent)}
.foto img{width:100%;height:100%;aspect-ratio:var(--ar,4/5);object-fit:cover;object-position:var(--pos,50% 50%);filter:saturate(.92) contrast(1.05)}
.foto::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--bg) 62%,transparent) 100%),linear-gradient(135deg,color-mix(in srgb,var(--e3) 10%,transparent),transparent 40%)}
.foto::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--e2) 80%,transparent),color-mix(in srgb,var(--e3) 12%,transparent) 35%,color-mix(in srgb,var(--e3) 6%,transparent) 65%,color-mix(in srgb,var(--e3) 55%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* uma luz só para fotos de origens diferentes: baixa, com vinheta, sem véu verde chapado.
   Ajuste por foto no style: --sat (saturação) e --exp (exposição). O esmeralda fica só no aro (::after) e no brilho externo. */
.foto--grade img{filter:saturate(var(--sat,.88)) brightness(var(--exp,.86)) contrast(1.08)}
.foto--grade::before{background:
  radial-gradient(120% 90% at 50% 40%,transparent 50%,color-mix(in srgb,var(--bg) 55%,transparent)),
  linear-gradient(180deg,transparent 50%,color-mix(in srgb,var(--bg) 70%,transparent));mix-blend-mode:normal}
.foto__legenda{position:absolute;left:16px;right:16px;bottom:14px;z-index:3;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--text)}
.foto__legenda::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--e4);box-shadow:0 0 10px var(--e4)}
/* toasts posicionados sobre a foto: use dentro de .foto-box */
.foto-box{position:relative}
.foto-box>.toast{position:absolute;z-index:4}
.foto-box>.toast--a{left:-6px;top:10%}
.foto-box>.toast--b{right:-6px;bottom:12%}

/* recorte com fundo transparente + halo (como no hero) */
.recorte{position:relative;isolation:isolate;display:grid;justify-items:center;align-items:end;margin:0}
.recorte::before{content:"";position:absolute;left:50%;top:4%;z-index:-1;width:118%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--e4) 42%,transparent),color-mix(in srgb,var(--e5) 16%,transparent) 55%,transparent 100%);animation:breathe 7s ease-in-out infinite}
.recorte::after{content:"";position:absolute;left:50%;top:2%;z-index:-1;width:96%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  border:1px solid color-mix(in srgb,var(--e3) 26%,transparent);box-shadow:0 0 40px color-mix(in srgb,var(--e4) 16%,transparent),inset 0 0 40px color-mix(in srgb,var(--e4) 10%,transparent);
  -webkit-mask:linear-gradient(180deg,#000 30%,transparent 72%);mask:linear-gradient(180deg,#000 30%,transparent 72%)}
.recorte img{width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.5) 76%,transparent 94%);mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.5) 76%,transparent 94%);
  /* mesma família de cor das fotos (.foto--grade) + luz de recorte verde */
  filter:saturate(.85) brightness(.94) contrast(1.04) drop-shadow(0 0 1px color-mix(in srgb,var(--e3) 50%,transparent)) drop-shadow(-14px 0 30px color-mix(in srgb,var(--e5) 18%,transparent))}

/* 5.8 Listas com marcador */
.lista-check,.lista-nao{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lista-check li,.lista-nao li{position:relative;padding-left:40px;min-height:28px;line-height:1.55;color:var(--muted)}
.lista-check li::before,.lista-nao li::before{content:"";position:absolute;left:0;top:-.05em;width:28px;height:28px;border-radius:8px;
  background:color-mix(in srgb,var(--e4) 12%,transparent);box-shadow:0 0 0 1px var(--line-2) inset}
.lista-check li::after,.lista-nao li::after{content:"";position:absolute;left:7px;top:calc(-.05em + 7px);width:14px;height:14px;background:var(--e3);
  -webkit-mask:var(--mk-check) center/contain no-repeat;mask:var(--mk-check) center/contain no-repeat}
.lista-nao li::before{background:rgba(240,169,160,.08);box-shadow:0 0 0 1px rgba(240,169,160,.32) inset}
.lista-nao li::after{background:var(--no);-webkit-mask-image:var(--mk-x);mask-image:var(--mk-x)}

/* 5.9 FAQ */
.faq{display:grid;gap:12px}
.faq details{border-radius:var(--r-lg);background:var(--grad-vidro);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.faq details[open]{border-color:var(--line-2);box-shadow:0 0 50px -24px var(--glow)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;
  padding:14px 14px 14px 20px;border-radius:inherit;font-weight:700;font-size:16px;line-height:1.35;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:36px;height:36px;border-radius:10px;
  background:linear-gradient(var(--e3),var(--e3)) center/14px 2px no-repeat,linear-gradient(var(--e3),var(--e3)) center/2px 14px no-repeat,color-mix(in srgb,var(--e4) 10%,transparent);
  box-shadow:0 0 0 1px var(--line-2) inset;transition:transform .3s var(--ease),background-color .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover::after{background-color:color-mix(in srgb,var(--e4) 20%,transparent)}
.faq__r{padding:0 20px 22px;color:var(--muted);font-size:15.5px;line-height:1.65}
.faq__r>*+*{margin-top:.8em}

/* 5.10 Barra fixa de CTA (mobile) */
.barra-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 84%,transparent),color-mix(in srgb,var(--bg) 95%,transparent));border-top:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 -20px 40px -20px rgba(0,0,0,.85);transition:transform .35s var(--ease)}
.barra-cta[hidden]{display:none}
.barra-cta.is-off{transform:translateY(110%)}
.barra-cta__info{min-width:0;font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap}
.barra-cta .btn--sm{flex:none;white-space:nowrap;letter-spacing:.02em}
.barra-cta__info b{display:block;font-size:15px;color:var(--text)}
body.tem-barra{padding-bottom:calc(72px + env(safe-area-inset-bottom))}

/* 5.11 Apoios: destaque, ficha, números monumentais, preço, divisor */
.destaque{position:relative;padding:22px 22px 22px 26px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(90deg,color-mix(in srgb,var(--e5) 13%,transparent),color-mix(in srgb,var(--e5) 2%,transparent) 70%)}
.destaque::before{content:"";position:absolute;left:-1px;top:18px;bottom:18px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--e2),var(--e5));box-shadow:0 0 16px var(--e4)}
.destaque p{color:var(--muted)}

.ficha{list-style:none;margin:0;padding:0}
.ficha li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.ficha li:first-child{border-top:0;padding-top:0}
.ficha__k{display:block;font-size:11px;font-weight:600;font-style:italic;letter-spacing:.22em;text-transform:uppercase;color:var(--e3)}
.ficha__v{display:block;margin-top:2px;font-weight:600;color:var(--text);line-height:1.45}

.stats{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
.stats>li{position:relative;padding:0 4px}
.stats>li+li::before{content:"";position:absolute;left:0;top:12%;bottom:8%;width:1px;background:linear-gradient(180deg,transparent,var(--line-2),transparent)}
.stat__n{display:block;font-family:var(--display);font-weight:400;font-size:clamp(72px,22vw,150px);line-height:.95;
  background:var(--grad-mono);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px color-mix(in srgb,var(--e4) 25%,transparent));transform:scaleY(1.15);transform-origin:50% 100%}
.stat__l{display:block;margin-top:10px;font-size:11px;font-weight:600;font-style:italic;letter-spacing:.26em;text-transform:uppercase;color:var(--e3)}

.preco{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.preco__valor{font-family:var(--display);font-weight:400;font-size:clamp(72px,20vw,120px);line-height:1;letter-spacing:-.01em;
  background:var(--grad-mono);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--e4) 25%,transparent))}
.preco__moeda{font-family:var(--sans);font-size:.24em;font-weight:700;vertical-align:1.6em;margin-right:.25em;letter-spacing:.04em}
.preco__nota{font-size:13.5px;color:var(--muted)}
.preco--destaque .preco__valor{line-height:.95;color:transparent;filter:drop-shadow(0 0 40px color-mix(in srgb,var(--e4) 40%,transparent))}
.preco--destaque .preco__moeda{font-size:.2em;vertical-align:2.2em}

.assinatura{font-family:var(--display);font-style:italic;font-size:30px;line-height:1.1;color:var(--e2)}
.divisor{height:1px;border:0;margin:clamp(40px,8vw,64px) 0;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* 5.12 Versus (1 vs 2, pessoa no meio) */
.versus{display:grid;gap:16px;align-items:center}
.versus__pessoa{width:min(270px,72%);margin:0 auto -64px;position:relative;z-index:0}
.versus__lados{display:grid;gap:16px;position:relative;z-index:1}
.versus__lado{position:relative;z-index:1}
.versus__lado .num-badge{margin-bottom:6px}

/* 5.13 Conta passo a passo (engenharia reversa da meta) */
.conta{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.conta li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:10px 0;border-top:1px dashed var(--line-2);font-size:15px;line-height:1.45;color:var(--muted)}
.conta li:first-child{border-top:0;padding-top:0}
.conta strong{margin-left:auto;color:var(--e2);font-weight:800;white-space:nowrap}
.conta li:last-child strong{color:transparent;background:var(--grad-forte);-webkit-background-clip:text;background-clip:text;font-size:1.12em}

/* 5.14 Marcador de pendência: só para rascunho e para o _guia.html. Nas páginas finais o build.py recusa
   o marcador à vista: a pendência fica num comentário TODO(juvenal) e o texto à vista fica neutro ou sai. */
.todo{display:inline-block;padding:1px 8px;border-radius:6px;border:1px dashed rgba(217,178,111,.55);background:rgba(217,178,111,.07);
  color:var(--gold);font-size:.82em;font-weight:600;font-style:normal;line-height:1.5;letter-spacing:.02em;vertical-align:.08em;white-space:nowrap}

/* ---------- 6. ANIMAÇÕES (sutis) ---------- */
@keyframes pulse{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 -2px 0 color-mix(in srgb,var(--ink) 25%,transparent) inset,0 14px 34px -10px color-mix(in srgb,var(--e5) 75%,transparent),0 0 50px -14px color-mix(in srgb,var(--e4) 50%,transparent)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 -2px 0 color-mix(in srgb,var(--ink) 25%,transparent) inset,0 14px 40px -8px color-mix(in srgb,var(--e5) 90%,transparent),0 0 80px -8px color-mix(in srgb,var(--e4) 70%,transparent)}}
@keyframes shine{0%,62%{left:-60%}88%,100%{left:130%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- 7. ≥ 768 ---------- */
@media (min-width:768px){
  body{font-size:17px}
  .eyebrow{font-size:12px;letter-spacing:.34em}
  .txt{font-size:17px}
  .btn{width:auto;padding-left:28px;font-size:14.5px}
  .btn .lbl-lg{display:inline}
  .btn .lbl-sm{display:none}
  .cta-row{align-items:flex-start}
  .cta-row--c{align-items:center}
  .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .glass p{font-size:16px}
  .marquee__it{font-size:17px;padding:18px 14px}
  .faq summary{font-size:17px;padding:16px 16px 16px 24px}
  .faq__r{padding:0 24px 24px}
  .versus__pessoa{width:min(300px,50%)}
  .versus__lados{display:grid;grid-template-columns:1fr 1fr;gap:20px}
}

/* ---------- 8. ≥ 1024 ---------- */
@media (min-width:1024px){
  .sec-head--c-desk{text-align:center;margin-inline:auto}
  .sec-head--c-desk .h-sec,.sec-head--c-desk .lead{margin-inline:auto}
  .sec-head--c-desk .eyebrow::after{content:"";flex:none;width:22px;height:1px;background:linear-gradient(270deg,transparent,var(--e4))}
  .glass--row{display:block}
  .glass--row>*+*{margin-top:12px}
  .grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .grid-2--rev>:first-child{order:2}
  .grid-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr;column-gap:clamp(48px,6vw,96px);row-gap:24px;
    grid-template-areas:"media head" "media body";align-items:center}
  .split__head{align-self:end}
  .split__body{align-self:start}
  .split--rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"head media" "body media"}
  .foto-box>.toast--a{left:-36px}
  .foto-box>.toast--b{right:-36px}
  .toast{padding:11px 18px 11px 11px}
  .barra-cta{display:none}
  body.tem-barra{padding-bottom:0}
  /* versus: lado 1 · pessoa · lado 2 */
  .versus{grid-template-columns:minmax(0,1fr) minmax(280px,380px) minmax(0,1fr);gap:0}
  .versus__lados{display:contents}
  .versus__pessoa{grid-column:2;grid-row:1;width:100%;margin:0}
  .versus__lado:first-child{grid-column:1;grid-row:1;margin-right:-40px;text-align:right}
  .versus__lado:first-child .num-badge{margin-left:auto}
  .versus__lado:last-child{grid-column:3;grid-row:1;margin-left:-40px}
}

/* ---------- 9. ACESSIBILIDADE ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .marquee__track{transform:none}
}
@media (forced-colors:active){
  .t-forte,.frase-forte,.stat__n,.preco__valor{color:CanvasText;background:none}
  .btn{border:2px solid ButtonText}
}

/* ---------- 10. UTILITÁRIOS (ganham dos componentes) ---------- */
.mt-0{margin-top:0!important}.mt-3{margin-top:12px!important}.mt-4{margin-top:16px!important}.mt-5{margin-top:24px!important}.mt-6{margin-top:32px!important}.mt-7{margin-top:48px!important}
.centro{text-align:center!important}
.mx-auto{margin-inline:auto!important}