/* ===== fonts.css ===== */
/* Trueday Nutrition Essentials — webfonts
   NOTE: no original brand font binaries were supplied with the Mídias/ source set.
   The families below are the closest Google Fonts matches to the artwork
   (see readme.md → "Font substitutions"). Replace with licensed brand files
   by swapping this @import for local @font-face rules. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..900;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..700&family=Parisienne&family=JetBrains+Mono:wght@400;600&display=swap");


/* ===== colors.css ===== */
/* Trueday Nutrition Essentials — colour system.
   Base ramps first, semantic aliases second. Sampled from the launch artwork
   (rótulos Balance/Pulse, anúncios Calm/Desire, posts de lançamento). */
:root{
  /* ── Ink: the brand lives on near-black ─────────────────────────── */
  --td-black:#07070A;
  --td-ink-900:#0C0C10;
  --td-ink-800:#141418;
  --td-ink-700:#1C1C22;
  --td-ink-600:#26262E;
  --td-ink-500:#33333C;
  --td-ink-400:#4A4A55;
  --td-ink-300:#6A6A76;
  --td-ink-200:#8E8E99;
  --td-ink-100:#B6B6BE;

  /* ── Gold: authority, ritual, metal ─────────────────────────────── */
  --td-gold-50:#FBF3DC;
  --td-gold-100:#F4E3B4;
  --td-gold-200:#E7CE8E;
  --td-gold-300:#D8B872;
  --td-gold-400:#C9A45C;
  --td-gold-500:#B0873F;
  --td-gold-600:#8C6528;
  --td-gold-700:#67491B;
  --td-gold-800:#412D0F;

  /* ── Ivory: the light half of the system ────────────────────────── */
  --td-ivory-50:#FCFAF5;
  --td-ivory-100:#F5F1E8;
  --td-ivory-200:#EBE4D6;
  --td-ivory-300:#DBD1BE;
  --td-ivory-400:#C4B79E;
  --td-white:#FFFFFF;

  /* ── Balance (calma, sono, equilíbrio) ──────────────────────────── */
  --td-blue-100:#D6EDFA;
  --td-blue-200:#9FD6F2;
  --td-blue-300:#5FBBE7;
  --td-blue-400:#2E9FD8;
  --td-blue-500:#1E8FCB;
  --td-blue-600:#136E9F;
  --td-blue-700:#0C4E73;

  /* ── Pulse (libido, energia, vitalidade) ────────────────────────── */
  --td-red-100:#FBD9DE;
  --td-red-200:#F2A0AC;
  --td-red-300:#E4606F;
  --td-red-400:#D42439;
  --td-red-500:#C8102E;
  --td-red-600:#9C0B23;
  --td-red-700:#6B0717;

  /* ── Derived semantics (not sampled from artwork — see readme) ──── */
  --td-success-500:#4E9E6A;
  --td-success-100:#DCEFE3;
  --td-warning-500:#C9A45C;
  --td-danger-500:#C8102E;
  --td-info-500:#1E8FCB;

  /* ══ Semantic aliases ═══════════════════════════════════════════ */
  /* surfaces — dark is the default brand canvas */
  --surface-canvas:var(--td-black);
  --surface-raised:var(--td-ink-800);
  --surface-card:var(--td-ink-900);
  --surface-inset:var(--td-ink-700);
  --surface-canvas-light:var(--td-ivory-100);
  --surface-card-light:var(--td-white);
  --surface-inset-light:var(--td-ivory-200);
  --surface-overlay:rgba(7,7,10,.82);

  /* text on dark */
  --text-title:var(--td-white);
  --text-body:rgba(255,255,255,.80);
  --text-muted:rgba(255,255,255,.56);
  --text-faint:rgba(255,255,255,.34);
  --text-accent:var(--td-gold-400);
  --text-on-gold:var(--td-ink-900);

  /* text on light */
  --text-title-light:var(--td-ink-900);
  --text-body-light:rgba(12,12,16,.76);
  --text-muted-light:rgba(12,12,16,.52);
  --text-accent-light:var(--td-gold-600);

  /* lines */
  --border-hairline:rgba(255,255,255,.10);
  --border-gold:rgba(201,164,92,.42);
  --border-gold-strong:var(--td-gold-500);
  --border-hairline-light:rgba(12,12,16,.10);
  --border-gold-light:rgba(140,101,40,.34);

  /* interactive */
  --action-primary:var(--td-gold-400);
  --action-primary-hover:var(--td-gold-300);
  --action-primary-active:var(--td-gold-500);
  --focus-ring:rgba(201,164,92,.55);

  /* product accents */
  --product-balance:var(--td-blue-500);
  --product-balance-tint:rgba(30,143,203,.14);
  --product-pulse:var(--td-red-500);
  --product-pulse-tint:rgba(200,16,46,.14);
}


/* ===== typography.css ===== */
/* Trueday Nutrition Essentials — typography.
   Three voices: geometric sans (authority/UI), didone serif (ritual/editorial),
   script (intimacy/teaser). Headlines are ALL CAPS by default. */
:root{
  --font-sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-serif-display:"Playfair Display","Times New Roman",serif;
  --font-script:"Parisienne",cursive;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --font-wordmark:var(--font-sans);
  --font-heading:var(--font-sans);
  --font-editorial:var(--font-serif-display);
  --font-body:var(--font-sans);

  /* weights */
  --fw-light:300; /* @kind font */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-extrabold:800; /* @kind font */
  --fw-black:900; /* @kind font */

  /* size ramp (px, 1.0 root) */
  --fs-2xs:11px;
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-base:16px;
  --fs-md:18px;
  --fs-lg:21px;
  --fs-xl:26px;
  --fs-2xl:32px;
  --fs-3xl:40px;
  --fs-4xl:52px;
  --fs-5xl:66px;
  --fs-6xl:84px;

  /* line heights */
  --lh-tight:1.02; /* @kind font */
  --lh-display:1.08; /* @kind font */
  --lh-snug:1.22; /* @kind font */
  --lh-body:1.55; /* @kind font */
  --lh-loose:1.7; /* @kind font */

  /* tracking — wide tracking on small caps is a brand signature */
  --ls-display:-0.015em; /* @kind font */
  --ls-heading:0.005em; /* @kind font */
  --ls-body:0; /* @kind font */
  --ls-label:0.16em; /* @kind font */
  --ls-eyebrow:0.28em; /* @kind font */
  --ls-wordmark:0.06em; /* @kind font */
  --ls-tagline:0.34em; /* @kind font */

  /* semantic type roles */
  --type-display:var(--fw-extrabold) var(--fs-4xl)/var(--lh-display) var(--font-heading); /* @kind font */
  --type-editorial:var(--fw-regular) var(--fs-4xl)/var(--lh-display) var(--font-editorial); /* @kind font */
  --type-h1:var(--fw-extrabold) var(--fs-3xl)/var(--lh-display) var(--font-heading); /* @kind font */
  --type-h2:var(--fw-bold) var(--fs-2xl)/var(--lh-snug) var(--font-heading); /* @kind font */
  --type-h3:var(--fw-bold) var(--fs-xl)/var(--lh-snug) var(--font-heading); /* @kind font */
  --type-h4:var(--fw-semibold) var(--fs-md)/var(--lh-snug) var(--font-heading); /* @kind font */
  --type-body-lg:var(--fw-regular) var(--fs-md)/var(--lh-body) var(--font-body); /* @kind font */
  --type-body:var(--fw-regular) var(--fs-base)/var(--lh-body) var(--font-body); /* @kind font */
  --type-body-sm:var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-body); /* @kind font */
  --type-label:var(--fw-semibold) var(--fs-xs)/1.2 var(--font-body); /* @kind font */
  --type-eyebrow:var(--fw-semibold) var(--fs-2xs)/1.2 var(--font-body); /* @kind font */
  --type-script:var(--fw-regular) var(--fs-2xl)/1.3 var(--font-script); /* @kind font */
}


/* ===== spacing.css ===== */
/* Trueday — spacing & layout. 4px base, generous vertical rhythm:
   the artwork breathes, blocks are separated by air not by boxes. */
:root{
  --sp-0:0; /* @kind spacing */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;
  --sp-20:80px;
  --sp-24:96px;
  --sp-32:128px;

  --gutter:24px;
  --gutter-lg:48px;
  --container-max:1280px; /* @kind spacing */
  --container-narrow:720px; /* @kind spacing */
  --section-y:96px; /* @kind spacing */
  --section-y-sm:56px; /* @kind spacing */

  /* control heights */
  --control-h-sm:34px; /* @kind spacing */
  --control-h-md:44px; /* @kind spacing */
  --control-h-lg:54px; /* @kind spacing */
  --tap-min:44px; /* @kind spacing */
}


/* ===== radii.css ===== */
/* Trueday — corner radii. Restrained: the brand is squared-off and
   pharmaceutical. Only badges/pills go fully round. */
:root{
  --radius-none:0;
  --radius-xs:3px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-pill:999px;

  --radius-control:var(--radius-sm);
  --radius-card:var(--radius-md);
  --radius-badge:var(--radius-pill);
  --radius-plate:var(--radius-xs);
  --radius-modal:var(--radius-lg);

  /* stroke widths */
  --bw-hairline:1px; /* @kind spacing */
  --bw-thick:2px; /* @kind spacing */
}


/* ===== elevation.css ===== */
/* Trueday — elevation. On black, "shadow" reads as a pool of deeper black
   plus a coloured glow. Light surfaces use soft warm shadows. */
:root{
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.7);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.85);
  --shadow-xl:0 40px 100px -30px rgba(0,0,0,.9);

  /* warm shadows for ivory surfaces */
  --shadow-light-sm:0 1px 2px rgba(65,45,15,.10);
  --shadow-light-md:0 10px 28px -12px rgba(65,45,15,.18);
  --shadow-light-lg:0 28px 64px -24px rgba(65,45,15,.24);

  /* glows — used behind bottles, CTAs and the sun mark */
  --glow-gold:0 0 32px rgba(201,164,92,.34);
  --glow-gold-strong:0 0 60px rgba(201,164,92,.5);
  --glow-balance:0 0 48px rgba(30,143,203,.38);
  --glow-pulse:0 0 48px rgba(200,16,46,.4);

  /* inner bevel used on metal plates and gold buttons */
  --inset-metal:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(65,45,15,.5);
  --inset-hairline:inset 0 0 0 1px rgba(255,255,255,.06);
}


/* ===== effects.css ===== */
/* Trueday — metallic effects, gradients, backdrops.
   The metal gradient is the single most recognisable brand device. */
:root{
  /* metallic gold — for fills, plates and text (background-clip:text) */
  --gradient-gold:linear-gradient(103deg,#67491B 0%,#B0873F 14%,#F4E3B4 34%,#E7CE8E 44%,#C9A45C 58%,#8C6528 76%,#E7CE8E 92%,#B0873F 100%); /* @kind color */
  --gradient-gold-flat:linear-gradient(180deg,#E7CE8E 0%,#C9A45C 52%,#8C6528 100%); /* @kind color */
  --gradient-gold-soft:linear-gradient(180deg,rgba(201,164,92,.22),rgba(201,164,92,.04)); /* @kind color */

  /* hairline rules: gold that fades at both ends */
  --gradient-rule-gold:linear-gradient(90deg,rgba(201,164,92,0),rgba(201,164,92,.85) 50%,rgba(201,164,92,0)); /* @kind color */
  --gradient-rule-light:linear-gradient(90deg,rgba(12,12,16,0),rgba(140,101,40,.6) 50%,rgba(12,12,16,0)); /* @kind color */

  /* stage backdrops — radial pools of colour on black, as in the packshots */
  --backdrop-noir:radial-gradient(120% 90% at 50% 0%,#1C1C22 0%,#07070A 62%); /* @kind color */
  --backdrop-balance:radial-gradient(85% 70% at 78% 42%,rgba(30,143,203,.32) 0%,rgba(7,7,10,0) 68%),#07070A; /* @kind color */
  --backdrop-pulse:radial-gradient(85% 70% at 78% 42%,rgba(200,16,46,.34) 0%,rgba(7,7,10,0) 68%),#07070A; /* @kind color */
  --backdrop-duo:radial-gradient(60% 80% at 22% 45%,rgba(30,143,203,.26) 0%,rgba(7,7,10,0) 62%),radial-gradient(60% 80% at 80% 45%,rgba(200,16,46,.28) 0%,rgba(7,7,10,0) 62%),#07070A; /* @kind color */
  --backdrop-ivory:radial-gradient(120% 100% at 12% 0%,#FCFAF5 0%,#EBE4D6 100%); /* @kind color */

  /* protection gradient — laid over photography before text */
  --scrim-left:linear-gradient(90deg,rgba(7,7,10,.94) 0%,rgba(7,7,10,.78) 38%,rgba(7,7,10,0) 72%); /* @kind color */
  --scrim-bottom:linear-gradient(180deg,rgba(7,7,10,0) 40%,rgba(7,7,10,.9) 100%); /* @kind color */
  --scrim-ivory-left:linear-gradient(90deg,rgba(252,250,245,.96) 0%,rgba(252,250,245,.72) 42%,rgba(252,250,245,0) 76%); /* @kind color */

  /* glass / capsule surfaces */
  --glass-dark:rgba(20,20,24,.62); /* @kind color */
  --glass-light:rgba(255,255,255,.7); /* @kind color */
  --blur-glass:blur(18px) saturate(120%); /* @kind other */
  --blur-soft:blur(8px); /* @kind other */

  /* film grain opacity used over large photographic areas */
  --grain-opacity:.05; /* @kind other */
}


/* ===== motion.css ===== */
/* Trueday — motion. Calm, deliberate, never bouncy. Nothing overshoots:
   the brand is a ritual, not a game. */
:root{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:380ms; /* @kind other */
  --dur-reveal:640ms; /* @kind other */
  --dur-shine:2600ms; /* @kind other */

  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --ease-ritual:cubic-bezier(.22,.61,.36,1); /* @kind other */

  --transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard); /* @kind other */
  --transition-lift:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out); /* @kind other */

  --press-scale:.985; /* @kind other */
  --lift-y:-2px; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms; /* @kind other */ --dur-base:0ms; /* @kind other */ --dur-slow:0ms; /* @kind other */ --dur-reveal:0ms; /* @kind other */ --dur-shine:0ms /* @kind other */}
}


/* ===== base.css ===== */
/* Trueday — minimal base layer. Kept intentionally small: consumers get
   defaults for body, links, selection and focus, nothing more. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-canvas);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-title);text-wrap:balance}
p{margin:0;text-wrap:pretty}
img,svg{display:block;max-width:100%}
a{color:var(--td-gold-300);text-decoration:none;border-bottom:1px solid rgba(201,164,92,.34);transition:var(--transition-control)}
a:hover{color:var(--td-gold-100);border-bottom-color:var(--td-gold-200)}
a:active{color:var(--td-gold-400)}
::selection{background:rgba(201,164,92,.32);color:#fff}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.td-on-light{background:var(--surface-canvas-light);color:var(--text-body-light)}
.td-on-light h1,.td-on-light h2,.td-on-light h3,.td-on-light h4{color:var(--text-title-light)}
.td-on-light a{color:var(--td-gold-600);border-bottom-color:var(--border-gold-light)}
.td-on-light a:hover{color:var(--td-gold-500)}


/* ===== site.css ===== */
/* TRUEDAY — layout da casca estatica.
   Usa SOMENTE tokens do design system: nenhuma cor ou medida literal nasce
   aqui. Os componentes espelhados do DS React estao anotados com a origem. */

.td-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
body { background: var(--td-black); color: var(--text-body); font-family: var(--font-body); }
img { max-width: 100%; height: auto; }
em { font-style: italic; background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Icon.jsx: o anel "proof seal" (glifo a 52%) ---------- */
.td-icone-anel { display: grid; place-items: center; flex: none; color: var(--td-gold-400); border: 1px solid var(--td-gold-400); border-radius: var(--radius-pill, 999px); }

/* ---------- Logo.jsx: wordmark TRUE + DAY ---------- */
.td-wordmark { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; }
.td-wordmark-tipo { font: var(--fw-extrabold) 22px/1 var(--font-sans, var(--font-body)); letter-spacing: var(--ls-wordmark); color: var(--td-white); white-space: nowrap; }
.td-wordmark-tipo span { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.td-wordmark-tag { font: var(--fw-medium) 7px/1 var(--font-sans, var(--font-body)); letter-spacing: var(--ls-tagline); text-indent: var(--ls-tagline); color: rgba(255,255,255,.72); white-space: nowrap; }
.td-wordmark-rodape .td-wordmark-tipo { font-size: 18px; }

/* ---------- Badge.jsx (tom "gold") ---------- */
.td-badge { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border-radius: var(--radius-pill, 999px); font: var(--fw-bold) var(--fs-xs)/1 var(--font-body); letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; }
.td-badge-ouro { background: rgba(201,164,92,.12); color: var(--td-gold-200); border: 1px solid var(--border-gold); }

/* ---------- header ---------- */
.td-header { border-bottom: 1px solid var(--border-hairline); background: var(--td-black); }
.td-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-top: var(--sp-4); padding-bottom: var(--sp-4); flex-wrap: wrap; }
.td-nav { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.td-nav a { color: var(--text-muted); text-decoration: none; font: var(--type-eyebrow); letter-spacing: var(--ls-label); text-transform: uppercase; }
.td-nav a:hover, .td-nav a:focus-visible { color: var(--td-gold-400); }

/* ---------- hero ---------- */
.td-hero { position: relative; overflow: hidden; background: var(--td-black); }
.td-hero-photo { position: absolute; inset: 0 0 0 auto; width: min(56%, 720px); background-image: url("/img/photo-roberta-hero.png"); background-size: cover; background-position: center 18%; }
.td-hero::after { content: ""; position: absolute; inset: 0; background: var(--scrim-left); pointer-events: none; }
.td-hero-inner { position: relative; z-index: 1; padding-top: var(--sp-16); padding-bottom: var(--sp-20); min-height: 620px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.td-hero-inner > * { max-width: 560px; }
.td-sol { margin-bottom: var(--sp-4); }
.td-eyebrow { font: var(--type-eyebrow); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--td-gold-400); margin: 0 0 var(--sp-3); }
.td-eyebrow-centro { text-align: center; }
.td-hero h1 { margin: 0 0 var(--sp-4); font: var(--fw-regular) var(--fs-4xl)/1.04 var(--font-serif-display); color: var(--td-white); letter-spacing: -0.005em; }
.td-hero h1 em { font-weight: var(--fw-bold); }
.td-lead { font: var(--type-body-lg); color: var(--text-body); margin: 0 0 var(--sp-5); }
.td-rule { height: 1px; width: 240px; margin: var(--sp-5) 0; background: var(--gradient-gold); border: 0; }
.td-rule-center { margin-left: auto; margin-right: auto; width: 180px; }
.td-microcopy { display: inline-flex; align-items: center; gap: 8px; font: var(--type-eyebrow); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); margin: var(--sp-3) 0 0; }
.td-microcopy svg { color: var(--td-gold-500); }
.td-microcopy-centro { justify-content: center; width: 100%; }

/* ---------- Button.jsx ---------- */
.td-cta-wrap { margin: var(--sp-4) 0 0; }
.td-cta-center { text-align: center; }
.td-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); background: var(--gradient-gold); color: var(--td-black); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); font-size: var(--fs-sm); text-decoration: none; padding: var(--sp-4) var(--sp-6); border-radius: var(--radius-pill, 999px); box-shadow: var(--inset-metal, none); transition: transform var(--dur-fast, .15s) var(--ease-standard, ease); }
.td-btn:hover, .td-btn:focus-visible { transform: translateY(-1px); }

/* ---------- faixa de autoridade ---------- */
.td-autoridade { background: var(--td-ink-900); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); padding: var(--sp-10) 0; }
.td-stats { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.td-stats li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); }
.td-stats strong { font: var(--fw-extrabold) var(--fs-xl, 24px)/1.1 var(--font-body); color: var(--td-white); letter-spacing: var(--ls-heading); text-transform: uppercase; }
.td-stats span { font: var(--type-body-sm); color: var(--text-muted); }

/* ---------- secoes ---------- */
.td-section { padding: var(--sp-16) 0; }
.td-section-alt { background: var(--td-ink-900); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.td-section h1, .td-section h2 { margin: 0 0 var(--sp-3); font: var(--fw-extrabold) var(--fs-2xl)/1.12 var(--font-body); letter-spacing: var(--ls-heading); text-transform: uppercase; color: var(--text-title); }
.td-body { font: var(--type-body-lg); color: var(--text-body); margin: 0 0 var(--sp-6); max-width: 520px; }
.td-body-wide { max-width: 640px; }
.td-two-col { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-12); align-items: start; }

/* ---------- BenefitItem.jsx ---------- */
.td-benefits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.td-benefits li, .td-proof-grid li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.td-benefits strong, .td-proof-grid strong { display: block; color: var(--td-white); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-label); margin-bottom: 4px; }
.td-benefits span, .td-proof-grid span { font: var(--type-body-sm); color: var(--text-muted); }

/* ---------- Card.jsx (variante premium) ---------- */
.td-card { background: var(--td-ink-900); border: 1px solid var(--border-gold, var(--border-hairline)); border-radius: var(--radius-lg, 16px); padding: var(--sp-8); box-shadow: var(--elev-2, none); }
.td-card-head { display: flex; align-items: center; gap: var(--sp-3); margin: 0; }
.td-card-head-txt strong { display: block; color: var(--td-white); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-label); }
.td-card-head-txt > span { display: block; margin-top: 4px; font: var(--type-body-sm); color: var(--text-muted); }
.td-check { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.td-check li { display: flex; align-items: flex-start; gap: var(--sp-3); font: var(--type-body); color: var(--text-body); }
.td-check svg { color: var(--td-gold-400); flex: none; margin-top: 2px; }

/* ---------- fases ---------- */
.td-phases { list-style: none; padding: 0; margin: var(--sp-8) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.td-phases li { background: var(--td-black); border: 1px solid var(--border-hairline); border-radius: var(--radius-md, 12px); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.td-phase-range { font: var(--type-eyebrow); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--td-gold-400); }
.td-phases h3 { margin: 0; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--td-white); }
.td-phases p { margin: 0; font: var(--type-body-sm); color: var(--text-muted); }

/* ---------- faixa de prova ---------- */
.td-proof { background: var(--td-ink-900); border-top: 1px solid var(--border-hairline); padding: var(--sp-10) 0; }
.td-proof-grid { list-style: none; padding: 0; margin: 0 0 var(--sp-8); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }

/* ---------- rodape ---------- */
.td-footer { background: var(--td-black); padding: var(--sp-12) 0 var(--sp-8); }
.td-footer .td-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.td-legal { font: var(--fw-semibold) var(--fs-2xs)/1.9 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); max-width: 640px; margin: 0; text-align: center; }
.td-back { margin: var(--sp-4) 0 0; }
.td-back a { color: var(--text-muted); font: var(--type-eyebrow); letter-spacing: var(--ls-label); text-transform: uppercase; text-decoration: none; }
.td-back a:hover, .td-back a:focus-visible { color: var(--td-gold-400); }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .td-two-col { grid-template-columns: 1fr; gap: var(--sp-8); }
  .td-benefits, .td-proof-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  /* .td-stats fica em 3 colunas ate 640: sao 3 itens curtos, e num grid de 2
     o terceiro fica orfao numa linha sozinha. */
  .td-stats { gap: var(--sp-5); }
  .td-phases { grid-template-columns: 1fr 1fr; }
  .td-hero-photo { inset: 0 0 auto 0; width: 100%; height: 32vh; background-position: center 24%; }
  .td-hero-inner { padding-top: 36vh; padding-bottom: var(--sp-12); min-height: 0; }
  .td-hero h1 { font-size: 30px; line-height: 1.08; }
  .td-nav { display: none; }
}
@media (max-width: 480px) {
  .td-benefits, .td-proof-grid, .td-phases { grid-template-columns: 1fr; }
  .td-stats { grid-template-columns: 1fr; }
  .td-hero h1 { font-size: 24px; line-height: 1.12; }
}
@media (prefers-reduced-motion: reduce) { .td-btn { transition: none; } }

/* ---------- area de audios (TB-A1) ---------- */
.td-rituais { list-style: none; padding: 0; margin: var(--sp-8) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.td-ritual { background: var(--td-ink-900); border: 1px solid var(--border-hairline); border-radius: var(--radius-md, 12px); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.td-ritual-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin: 0; flex-wrap: wrap; }
.td-ritual-n { font: var(--fw-bold) var(--fs-sm)/1.2 var(--font-body); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--td-white); }
.td-ritual-meta { font: var(--type-body-sm); color: var(--text-muted); }
.td-player { width: 100%; height: 40px; }
/* Os pendentes ficam visiveis e legiveis — a grade inteira e a promessa do
   programa. Apagados, nao escondidos. */
.td-ritual-espera { border-style: dashed; opacity: .68; }
.td-ritual-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: var(--type-eyebrow); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); }
.td-ritual-status svg { color: var(--td-gold-500); }

@media (max-width: 900px) { .td-rituais { grid-template-columns: 1fr; } }

/* Tema e frase do ritual — vindos da transcricao real, na voz da Roberta. */
.td-ritual-tema { color: var(--td-gold-400); font-weight: var(--fw-bold); }
.td-ritual-frase { margin: 0; padding-left: var(--sp-4); border-left: 2px solid var(--td-gold-500); font: italic var(--type-body); color: var(--text-body); }

/* ---------- documento legal (politica, termos) ---------- */
.td-doc { padding: var(--sp-12) 0 var(--sp-16); }
.td-doc .td-wrap { max-width: 760px; }
.td-doc h1 { margin: 0 0 var(--sp-3); font: var(--fw-regular) var(--fs-3xl, 34px)/1.1 var(--font-serif-display); color: var(--td-white); }
.td-doc h2 { margin: var(--sp-10) 0 var(--sp-3); font: var(--fw-extrabold) var(--fs-lg, 18px)/1.2 var(--font-body); letter-spacing: var(--ls-heading); text-transform: uppercase; color: var(--text-title); }
.td-doc p, .td-doc li { font: var(--type-body); color: var(--text-body); }
.td-doc p { margin: 0 0 var(--sp-4); }
.td-doc ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.td-doc a { color: var(--td-gold-400); }
.td-doc-meta { font: var(--type-eyebrow); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-8) !important; }

/* Captura (ADR-P-007). O formulario e um iframe do GHL em registro
   TRANSPARENTE: ele nao tem fundo proprio, herda este. Se esta secao deixar de
   ser escura, o texto do formulario fica ilegivel — e isso NAO aparece no
   widget nu, so aqui. Medido em 06/09. */
.td-captura .td-form-embed { max-width: 560px; margin: var(--sp-8) auto 0; }
.td-captura .td-form-embed iframe { display: block; width: 100%; border: 0; background: transparent; }