/* ══════════════════════════════════════════════════════════════
   MPP · Meus Primeiros Pacientes
   DESIGN SYSTEM RECONECTA (formal): tokens transcritos de
   "Reconecta Design System" (derivado do Anúncios.fig, 2026-08-25).
   Extensões do produto MPP marcadas com [MPP].
   ⚠️ TT Modernoir: arquivos TRIAL: licenciar na TypeType antes do ar.
   ══════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Space+Mono:wght@400;700&display=swap");

@font-face{font-family:"TT Modernoir";src:url("../assets/fonts/TT_Modernoir_Trial_Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"TT Modernoir";src:url("../assets/fonts/TT_Modernoir_Trial_Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"TT Modernoir";src:url("../assets/fonts/TT_Modernoir_Trial_Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"TT Modernoir";src:url("../assets/fonts/TT_Modernoir_Trial_DemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"TT Modernoir";src:url("../assets/fonts/TT_Modernoir_Trial_Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  /* ── paleta oficial (colors.css do DS) ── */
  --cream:#EED9BD;
  --gold:#EECE66;
  --red:#D3111A;
  --oxblood:#6B0F0F;
  --ink:#161616;
  --ink-deep:#0C0B0B;
  --cream-90:rgba(238,217,189,.9);
  --cream-80:rgba(238,217,189,.8);
  --cream-62:rgba(238,217,189,.62);
  --gold-85:rgba(238,206,102,.85);
  --gold-65:rgba(238,206,102,.65);
  --hairline:rgba(255,255,255,.1);

  /* ── [MPP] extensões do produto ── */
  --pix-verde:#22C55E;          /* o dinheiro que caiu (logo, checks, ganhos) */
  --pix-verde-soft:rgba(34,197,94,.13);
  --verde-hl:#8BEFAE;

  /* ── mapeamento pros nomes que as seções usam ── */
  --preto:var(--ink);
  --preto-2:#1E1C19;
  --preto-3:#282419;
  --preto-rodape:var(--ink-deep);
  --bege:var(--cream);
  --bege-2:#F6E9D6;
  --txt:var(--cream);
  --txt-soft:var(--cream-80);
  --txt-mute:var(--cream-62);
  --red-cta:var(--red);
  --red-cta-hover:#B40D14;
  --red-glow:rgba(211,17,26,.10);
  --border-red:rgba(211,17,26,.36);
  --green:var(--pix-verde);
  --green-soft:var(--pix-verde-soft);
  --paper:#F6F1E7;
  --ink-print:#141414;
  --line:var(--hairline);

  /* ── tipografia oficial (fonts.css + typography.css do DS) ── */
  --font-display:"TT Modernoir","Haettenschweiler",Impact,sans-serif;
  --font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --lh-display:.98;
  --track-kicker:.22em;
  --track-headline:.01em;

  --fs-h1:clamp(30px,5.6vw,60px);
  --fs-h2:clamp(25px,4.2vw,44px);
  --fs-h3:clamp(17px,2.2vw,22px);
  --sp-sec:clamp(56px,8vw,92px);
  --maxw:1120px;
  --rd:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--ink);color:var(--txt);
  font-size:16.5px;line-height:1.55;overflow-x:hidden;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,4vw,24px)}
.sec{padding-block:var(--sp-sec)}

/* ── O marca-texto (efeito principal): agora em GOLD oficial ── */
.hl{
  position:relative;display:inline-block;
  padding:0 .18em;z-index:0;color:var(--ink);font-weight:700;
}
.hl::before{
  content:'';position:absolute;inset:.06em -.08em .01em -.08em;
  background:var(--gold);
  transform:skewX(-3deg) rotate(-.6deg);
  border-radius:6px 14px 8px 18px / 18px 6px 14px 10px;
  z-index:-1;
}
.hl--red{color:var(--bege-2)}
.hl--red::before{background:var(--red)}
.hl--win{color:var(--ink)}
.hl--win::before{background:var(--verde-hl)}
.ul{
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-size:100% .18em;background-position:0 94%;
  padding:0 .05em .06em;
}

/* ── Tipografia: display TT Modernoir uppercase (lh .98 do DS) ── */
h1,h2,h3{
  font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;line-height:var(--lh-display);
  letter-spacing:var(--track-headline);
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:600}
/* kicker: Space Mono uppercase gold (three-beat do DS) */
.eyebrow{
  display:inline-block;font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  letter-spacing:var(--track-kicker);text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.eyebrow--cream{color:var(--gold)}
.lead{font-size:clamp(16px,1.9vw,18.5px);color:var(--txt-soft);max-width:64ch;line-height:1.5}
.lead--c{margin-inline:auto}
.whisper{
  display:block;font-family:var(--font-body);font-style:italic;
  font-size:.85rem;color:var(--txt-mute);text-align:center;margin-top:13px;line-height:1.5;
}

/* ── CTA (vermelho da casa; press .85 do DS) ── */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--red);color:#fff;font-weight:700;font-family:var(--font-body);
  font-size:clamp(15px,2vw,17.5px);letter-spacing:.02em;text-transform:uppercase;
  padding:19px 34px;border-radius:100px;border:0;cursor:pointer;
  box-shadow:0 10px 30px rgba(211,17,26,.34);
  transition:transform .12s ease,background .12s ease,opacity .12s ease;
  max-width:100%;text-align:center;line-height:1.25;
}
.cta:hover{background:var(--red-cta-hover);transform:translateY(-2px)}
.cta:active{opacity:.85}
.cta:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

/* ── Faixa institucional ── */
.selo{
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,4.5vw,52px);
  border-top:1px solid var(--line);padding:20px 0 2px;margin-top:24px;
}
.selo b{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:clamp(19px,2.7vw,28px);color:var(--gold);line-height:1}
.selo span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mute)}
.selo div{text-align:center;min-width:100px}

/* ── [MPP] O logo do produto (F3: pill eyebrow + wordmark) ── */
.logo-mpp{display:flex;flex-direction:column;align-items:center;gap:10px;width:fit-content;margin-inline:auto}
.logo-mpp__pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1.6px solid var(--pix-verde);border-radius:100px;padding:6px 16px;
}
.logo-mpp__dot{
  width:14px;height:14px;border-radius:50%;background:var(--pix-verde);
  display:grid;place-items:center;
}
.logo-mpp__dot svg{width:8px;height:8px}
.logo-mpp__pill span{
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--pix-verde);
}
.logo-mpp__nome{
  font-family:var(--font-display);text-transform:uppercase;text-align:center;
  color:var(--cream);line-height:1.04;
}
.logo-mpp__nome i{display:block;font-style:normal;font-weight:500;font-size:.62em;letter-spacing:.12em}
.logo-mpp__nome b{font-weight:700;letter-spacing:.06em}

/* ── motivo REC (Logo Reveal + DS): usado no player ── */
.rec{
  position:absolute;top:14px;left:16px;z-index:2;
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;color:var(--cream-80);
}
.rec::before{
  content:'';width:9px;height:9px;border-radius:50%;background:var(--red);
  box-shadow:0 0 10px 0 rgba(211,17,26,.9);
  animation:recpisca 1.4s steps(2) infinite;
}
@keyframes recpisca{to{opacity:.25}}