/* ============================================================
   Mondare Design System — Tokens & Type
   Aligned with production (mondareestudos.com.br · localhost:5174)
   ============================================================ */

/* ---------- 1. Fonts ---------- */

/* Primary institutional sans — Albert Sans (full family, 9 weights × 2 styles) */
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-Thin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-ThinItalic.ttf") format("truetype");
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-BlackItalic.ttf") format("truetype");
  font-weight: 900; font-style: italic; font-display: swap;
}

/* Secondary handwritten accent — "I Know a Ghost" (institutional manuscrita).
   This is the brand's official handwritten font, shipped in fonts/iknowaghost.ttf.
   Caveat is kept as a *last-resort* fallback only — the real brand font must
   load for slogans and stamps to feel right. */
@font-face {
  font-family: "I Know A Ghost";
  src: url("../fonts/iknowaghost.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Color Tokens ---------- */
/* All values lifted verbatim from the brand manual ("manual-da-marca-mondare.pdf"). */
:root {
  /* Persimmon — primary brand color. PANTONE 171 C */
  --md-coral:        #FF6249;
  --md-coral-hover:  #E84E36;   /* derived darken for interactive states */
  --md-coral-700:    #E84E36;
  --md-coral-200:    #FFBDB0;
  --md-coral-50:     #FFEAE5;

  /* Regent St Blue — supportive accent. PANTONE 290 C */
  --md-blue:         #A5D2E7;
  --md-blue-700:     #5FA5C4;
  --md-blue-50:      #ECF6FB;

  /* Black + greys. PANTONE Black C / 2333 C / Cool Gray 1 C */
  --md-black:        #000000;
  --md-ink:          #000000;   /* manual: there is no ink-soft, body uses black */
  --md-grey-700:     #4D4D4D;   /* derived darken for text-strong */
  --md-grey-500:     #737373;   /* "Dove Gray" — institutional mid grey */
  --md-grey-300:     #BFBFBF;   /* derived intermediate */
  --md-grey-200:     #DFDFDF;   /* "Alto" — institutional light grey */
  --md-grey-100:     #EEEEEE;   /* derived ultra-light */
  --md-paper:        #FFFFFF;   /* manual: no warm paper — always white */
  --md-bg-warm:      #FAFAFA;   /* derived very-soft alternate background */
  --md-bg:           #FFFFFF;
  --md-white:        #FFFFFF;

  /* Rules / dividers */
  --md-rule:         rgba(0, 0, 0, 0.10);
  --md-rule-dark:    rgba(255, 255, 255, 0.14);

  /* Semantic — derived, stay inside the brand palette */
  --md-fg-1:         var(--md-ink);
  --md-fg-2:         var(--md-grey-500);
  --md-fg-3:         var(--md-grey-300);
  --md-fg-on-coral:  #000000;          /* coral panels carry BLACK text — Persimmon + Black is the canonical pair */
  --md-fg-on-dark:   #FFFFFF;

  --md-bg-page:      var(--md-bg);
  --md-bg-elevated:  var(--md-bg);
  --md-bg-muted:     var(--md-bg-warm);
  --md-bg-inverse:   var(--md-black);
  --md-bg-accent:    var(--md-coral);

  --md-border-faint: var(--md-rule);
  --md-border:       var(--md-rule);
  --md-border-strong:var(--md-ink);

  /* Feedback states stay inside the brand palette — no greens, ambers,
     or non-brand reds. Aliases map to brand tokens so component code
     can still read --md-success / --md-danger / etc. */
  --md-success:      var(--md-ink);     /* "done / approved" → solid ink */
  --md-warning:      var(--md-coral);
  --md-danger:       var(--md-coral-hover);
  --md-info:         var(--md-blue-700);

  /* ---------- 3. Type Tokens ---------- */
  --md-font-sans:    "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-font-hand:    "I Know A Ghost", "Caveat", "Patrick Hand", cursive;

  /* Manual p.12: os pesos autorizados são light / regular / medium / bold.
     800 e 900 estão FORA do manual — os @font-face acima existem porque a
     família é licenciada inteira, não porque a marca os autoriza. */
  --md-w-thin:       100;  /* @kind font */
  --md-w-extralight: 200;  /* @kind font */
  --md-w-light:      300;  /* @kind font */
  --md-w-regular:    400;  /* @kind font */
  --md-w-medium:     500;  /* @kind font */
  --md-w-semibold:   600;  /* @kind font */
  --md-w-bold:       700;  /* @kind font */
  --md-w-extrabold:  800;  /* @kind font */
  --md-w-black:      900;  /* @kind font */

  /* Type scale (tight, modular — Swiss/editorial) */
  --md-text-xs:      11px;
  --md-text-sm:      13px;
  --md-text-base:    15px;
  --md-text-md:      17px;
  --md-text-lg:      22px;
  --md-text-xl:      28px;
  --md-text-2xl:     36px;
  --md-text-3xl:     48px;
  --md-text-4xl:     62px;
  --md-text-5xl:     88px;
  --md-text-6xl:     120px;

  --md-lh-tight:     0.99;  /* @kind font */
  --md-lh-snug:      1.05;  /* @kind font */
  --md-lh-normal:    1.4;   /* @kind font */
  --md-lh-relaxed:   1.55;  /* @kind font */

  /* Tracking — display goes wider negative; eyebrows are tracked wide */
  --md-track-display: -0.045em;  /* @kind font */
  --md-track-h2:      -0.035em;  /* @kind font */
  --md-track-h3:      -0.03em;   /* @kind font */
  --md-track-tight:   -0.025em;  /* @kind font */
  --md-track-normal:  0;         /* @kind font */
  --md-track-wide:    0.08em;    /* @kind font */
  --md-track-eyebrow: 0.14em;    /* @kind font */

  /* ---------- 4. Spacing, Radii, Shadows ---------- */
  --md-space-1:  4px;
  --md-space-2:  8px;
  --md-space-3:  12px;
  --md-space-4:  16px;
  --md-space-5:  20px;
  --md-space-6:  24px;
  --md-space-8:  32px;
  --md-space-10: 40px;
  --md-space-12: 48px;
  --md-space-16: 64px;
  --md-space-20: 80px;
  --md-space-24: 96px;
  --md-space-30: 120px;
  --md-space-32: 128px;

  /* Radii — production uses small radii (2–8px). No pills, no circles
     on buttons/chips. Avatars + status dots are the only round shapes. */
  --md-radius-xs:  2px;
  --md-radius-sm:  4px;
  --md-radius-md:  6px;   /* default card radius */
  --md-radius-lg:  8px;   /* plans / hero viz */
  --md-radius-xl:  10px;
  --md-radius-2xl: 14px;
  --md-radius-pill: 999px;

  /* Shadows */
  --md-shadow-xs:  0 1px 2px rgba(10, 10, 10, 0.04);
  --md-shadow-sm:  0 2px 6px rgba(10, 10, 10, 0.06);
  --md-shadow-md:  0 16px 40px rgba(0, 0, 0, 0.06);
  --md-shadow-lg:  0 24px 64px rgba(10, 10, 10, 0.12);
  --md-shadow-coral: 0 8px 22px rgba(255, 98, 73, 0.28);

  /* Motion */
  --md-ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --md-ease-soft:   cubic-bezier(0.2, 0.7, 0.2, 1);     /* @kind other */
  --md-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */
  --md-dur-fast:    120ms;  /* @kind other */
  --md-dur-base:    220ms;  /* @kind other */
  --md-dur-slow:    360ms;  /* @kind other */
  --md-dur-reveal:  850ms;  /* @kind other */

  /* Layout */
  --md-container:        1240px;  /* @kind spacing */
  --md-container-narrow: 920px;   /* @kind spacing */
}

/* ---------- 5. Semantic Type Roles ---------- */

/* Element-level defaults — page can opt in by adding class="md" */

.md {
  font-family: var(--md-font-sans);
  color: var(--md-fg-1);
  background: var(--md-bg-page);
  font-size: var(--md-text-base);
  line-height: var(--md-lh-relaxed);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display leve — manual p.19/22/34/39: manchete grande em light, com ar. */
.md h1, .md .h1 {
  font-family: var(--md-font-sans);
  font-weight: var(--md-w-light);
  font-size: var(--md-text-5xl);
  line-height: var(--md-lh-tight);
  letter-spacing: var(--md-track-display);
  margin: 0;
}
.md h2, .md .h2 {
  font-weight: var(--md-w-light);
  font-size: var(--md-text-3xl);
  line-height: var(--md-lh-snug);
  letter-spacing: var(--md-track-h2);
  margin: 0;
}
.md h2 em, .md .h2 em { font-style: italic; color: var(--md-coral); font-weight: var(--md-w-bold); }
.md h3, .md .h3 {
  font-weight: var(--md-w-bold);
  font-size: var(--md-text-xl);
  line-height: var(--md-lh-snug);
  letter-spacing: var(--md-track-h3);
  margin: 0;
}
.md h4, .md .h4 {
  font-weight: var(--md-w-bold);
  font-size: var(--md-text-lg);
  line-height: 1.22;
  letter-spacing: var(--md-track-tight);
  margin: 0;
}
.md p, .md .body {
  font-size: var(--md-text-base);
  line-height: var(--md-lh-relaxed);
  color: var(--md-fg-2);
  margin: 0;
  text-wrap: pretty;
}
.md small, .md .small {
  font-size: var(--md-text-sm);
  line-height: var(--md-lh-normal);
  color: var(--md-fg-2);
}

/* Eyebrow — short rule + tracked caps */
.md .eyebrow {
  font-weight: var(--md-w-semibold);
  font-size: var(--md-text-xs);
  letter-spacing: var(--md-track-eyebrow);
  text-transform: uppercase;
  color: var(--md-grey-500);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.md .eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: currentColor;
  display: inline-block;
}

/* Wordmark utility */
.md .wordmark {
  font-family: var(--md-font-sans);
  font-weight: var(--md-w-bold);
  letter-spacing: -0.025em;
  color: var(--md-ink);
}
.md .wordmark sup {
  font-size: 0.42em;
  font-weight: 500;
  color: var(--md-grey-500);
  vertical-align: top;
  position: relative;
  top: 0.2em;
  margin-left: 1px;
}

/* Handwritten accent — I Know a Ghost (fonte oficial da marca).
   Usar com parcimônia. A cor não é fixa: coral sobre claro, branco sobre
   coral/preto — o que vale é o contraste (manual p.39). */
.md .hand {
  font-family: var(--md-font-hand);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.05;
  color: var(--md-coral);
}

/* Inverse surface */
.md.inverse, .md .inverse {
  background: var(--md-bg-inverse);
  color: var(--md-fg-on-dark);
}
.md.inverse p, .md .inverse p { color: rgba(255, 255, 255, 0.7); }

/* Selection */
.md ::selection {
  background: var(--md-coral);
  color: #000;
}

/* ============================================================
   components/components.css — estilos globais dos componentes
   promovidos do UI kit (Button · Eyebrow · Badge).
   Importado por styles.css — todo consumidor do DS os recebe.
   ============================================================ */

/* ---- Button ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--md-font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  border-radius: 2px; padding: 14px 22px; border: 1.5px solid transparent;
  transition: transform var(--md-dur-base) ease, background var(--md-dur-base) ease,
              color var(--md-dur-base) ease, border-color var(--md-dur-base) ease;
  white-space: nowrap; text-align: center; text-decoration: none;
}
.btn--lg { padding: 18px 26px; font-size: 13px; }
.btn--sm { padding: 10px 16px; font-size: 11px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }

.btn--primary { background: var(--md-coral); color: #000; }
.btn--primary:hover { background: var(--md-coral-hover); }
.btn--ghost {
  background: transparent; color: var(--md-ink); border-color: transparent;
  letter-spacing: 0.04em; text-transform: none;
}
.btn--ghost:hover { color: var(--md-coral); }
.btn--outline { background: transparent; color: var(--md-ink); border-color: var(--md-ink); }
.btn--outline:hover { background: var(--md-ink); color: #fff; }
.btn--on-dark { background: #fff; color: var(--md-ink); }
.btn--on-dark:hover { background: var(--md-coral); color: #000; }
.btn--on-coral { background: var(--md-ink); color: #fff; }
.btn--on-coral:hover { background: #fff; color: var(--md-ink); }

/* ---- Eyebrow ---- */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--md-grey-500);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--md-font-sans);
}
.eyebrow::before {
  content: ""; width: 22px; height: 1.5px;
  background: currentColor; display: inline-block;
  animation: eyebrowPulse 3.2s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes eyebrowPulse {
  0%, 100% { transform: scaleX(1);    opacity: 1;   }
  50%      { transform: scaleX(1.45); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow::before { animation: none; }
}

/* ---- Badge ---- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--md-radius-sm, 4px);
  font-family: var(--md-font-sans); font-size: 11px; font-weight: 700;
  line-height: 1; letter-spacing: 0.12em; text-transform: uppercase;
}
.badge--coral { background: var(--md-coral); color: #000; }
.badge--ink { background: var(--md-ink); color: #fff; }
.badge--outline { background: transparent; color: var(--md-ink); box-shadow: inset 0 0 0 1.5px var(--md-ink); }
.badge--soft { background: var(--md-coral-200, #FFD9D2); color: var(--md-coral-hover); }

/* ---- BioCalibViz (components/motion) ---- */
.biocalib-viz { width: 100%; max-width: 440px; }
.biocalib-viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.bc__chip rect { fill: var(--md-paper); stroke: var(--md-rule); stroke-width: 1.5; transition: stroke .25s; }
.bc__chip text { fill: var(--md-grey-700); font-family: var(--md-font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }
.bc__chip.is-on rect { stroke: var(--md-coral); stroke-width: 2; }
.bc__chip.is-on text { fill: var(--md-ink); }
.bc__chipdot.bc-coral { fill: var(--md-coral); }
.bc__chipdot.bc-blue { fill: var(--md-blue-700); }
.bc__feed { fill: none; stroke: var(--md-grey-300); stroke-width: 1.5; stroke-dasharray: 4 4; transition: opacity .3s; }
.bc__card { fill: var(--md-paper); stroke: var(--md-rule); stroke-width: 1.5; }
.bc__title { fill: var(--md-ink); font-family: var(--md-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; }
.bc__livedot { fill: var(--md-coral); }
.bc__live { fill: var(--md-coral); font-family: var(--md-font-sans); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; }
.bc__rowlbl { fill: var(--md-grey-500); font-family: var(--md-font-sans); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; }
.bc__track { stroke: var(--md-rule); stroke-width: 2; stroke-linecap: round; }
.bc__fill.bc-coral { fill: var(--md-coral); }
.bc__fill.bc-blue { fill: var(--md-blue-700); }
.bc__knob { fill: #fff; stroke: var(--md-ink); stroke-width: 2.5; }
.bc__pulse { filter: drop-shadow(0 0 5px rgba(255, 98, 73, 0.5)); }
.bc__hand { fill: var(--md-coral); font-family: var(--md-font-hand); font-size: 22px; }
.bc__caption { fill: var(--md-grey-500); font-family: var(--md-font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; }

/* ---- EvolutionJourney (components/motion) ---- */
.ej-panel { background: var(--md-ink); border-radius: 10px; padding: 36px 30px 26px; }
.ej__svg { width: 100%; height: auto; display: block; overflow: visible; }
.ej__track {
  fill: none; stroke: rgba(255,255,255,0.14);
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.ej__fill {
  fill: none; stroke: var(--md-coral);
  stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 9px rgba(255, 98, 73, 0.55));
}
.ej__node {
  fill: var(--md-ink); stroke: rgba(255,255,255,0.32); stroke-width: 2.5;
  transition: fill .35s var(--md-ease-out), stroke .35s var(--md-ease-out);
}
.ej__node.is-on {
  fill: var(--md-coral); stroke: var(--md-coral);
  filter: drop-shadow(0 0 7px rgba(255, 98, 73, 0.6));
}
.ej__node--final.is-on { filter: drop-shadow(0 0 12px rgba(255, 98, 73, 0.85)); }
.ej__halo { fill: rgba(255, 98, 73, 0.28); }
.ej__marker { fill: #fff; stroke: var(--md-coral); stroke-width: 3;
  filter: drop-shadow(0 0 10px rgba(255, 98, 73, 0.95)); }
.ej__label {
  fill: rgba(255,255,255,0.42);
  font-family: var(--md-font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em;
  transition: fill .35s var(--md-ease-out);
}
.ej__label.is-on { fill: #fff; }
.ej__label--final { fill: rgba(255, 98, 73, 0.7); }
.ej__label--final.is-on { fill: var(--md-coral); }
.ej__caption {
  text-align: center; margin: 14px auto 0; min-height: 1.4em;
  font-family: var(--md-font-hand); color: var(--md-coral);
  font-size: clamp(26px, 3vw, 38px); line-height: 1.1; font-weight: 700;
}

/* ---- PlatformViz (components/motion) ---- */
.pz-viz { width: 100%; max-width: 460px; }
.pz-viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.pz__monitor { fill: #fff; stroke: var(--md-ink); stroke-width: 2.5; }
.pz__stand { fill: #fff; stroke: var(--md-ink); stroke-width: 2.5; stroke-linejoin: round; }
.pz__standbase { stroke: var(--md-ink); stroke-width: 2.5; stroke-linecap: round; }
.pz__screen { fill: var(--md-bg-warm, #FAFAFA); stroke: var(--md-rule); stroke-width: 1; }
.pz__title { fill: var(--md-grey-700); font-family: var(--md-font-sans); font-size: 8px; font-weight: 700; letter-spacing: 0.12em; }
.pz__livedot { fill: var(--md-coral); }
.pz__live { fill: var(--md-coral); font-family: var(--md-font-sans); font-size: 7.5px; font-weight: 700; letter-spacing: 0.18em; }
.pz__rule { stroke: var(--md-rule); stroke-width: 1; }
.pz__day { fill: var(--md-grey-500); font-family: var(--md-font-sans); font-size: 7px; font-weight: 700; letter-spacing: 0.1em; }
.pz__grid { stroke: var(--md-rule); stroke-width: 1; opacity: 0.7; }
.pz__block.pz-coral { fill: var(--md-coral); opacity: 0.92; }
.pz__block.pz-blue { fill: var(--md-blue); }
.pz__block.pz-grey { fill: var(--md-grey-300); }
.pz__hi { fill: none; stroke: var(--md-coral); stroke-width: 1.6; stroke-dasharray: 4 3; }
.pz__feed { fill: none; stroke: var(--md-grey-300); stroke-width: 1.5; }
.pz__node { fill: var(--md-paper); stroke: var(--md-rule); stroke-width: 1.5; transition: stroke .25s; }
.pz__node.is-on { stroke: var(--md-coral); stroke-width: 2.2; }
.pz__nodedot.pz-coral { fill: var(--md-coral); }
.pz__nodedot.pz-blue { fill: var(--md-blue-700); }
.pz__nodelbl { fill: var(--md-grey-700); font-family: var(--md-font-sans); font-size: 6.8px; font-weight: 700; letter-spacing: 0.1em; }
.pz__group { fill: var(--md-grey-500); font-family: var(--md-font-sans); font-size: 6.5px; font-weight: 700; letter-spacing: 0.2em; }
.pz__pulse { filter: drop-shadow(0 0 5px rgba(255, 98, 73, 0.5)); }
.pz__caption { fill: var(--md-grey-500); font-family: var(--md-font-sans); font-size: 8.5px; font-weight: 700; letter-spacing: 0.18em; }
.pz__hand { fill: var(--md-grey-700); font-family: var(--md-font-hand); font-size: 17px; }
.pz__hand--big { fill: var(--md-coral); font-size: 26px; }

/* ---- ProcessOrderViz (components/motion) ---- */
.po-viz { width: 100%; }
.po-viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.po__chaos { fill: none; stroke: var(--md-grey-300); stroke-width: 2.5; stroke-linecap: round; }
.po__steps {
  fill: none; stroke: var(--md-coral); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 98, 73, 0.3));
}
.po__feed { stroke: var(--md-grey-300); stroke-width: 1.5; }
.po__chip { fill: var(--md-paper); stroke: var(--md-rule); stroke-width: 1.5; }
.po__chipdot.is-coral { fill: var(--md-coral); }
.po__chipdot.is-blue { fill: var(--md-blue-700); }
.po__chiplbl {
  fill: var(--md-grey-700); font-family: var(--md-font-sans);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
}
.po__check {
  fill: var(--md-paper); stroke: var(--md-grey-300); stroke-width: 2.5;
  transition: fill .3s var(--md-ease-out), stroke .3s var(--md-ease-out);
}
.po__check.is-on {
  fill: var(--md-coral); stroke: var(--md-coral);
  filter: drop-shadow(0 0 6px rgba(255, 98, 73, 0.5));
}
.po__steplbl {
  fill: var(--md-grey-500); font-family: var(--md-font-sans);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
}
.po__pulse { filter: drop-shadow(0 0 7px rgba(255, 98, 73, 0.55)); }
.po__note { font-family: var(--md-font-hand); font-size: 30px; }
.po__note--grey { fill: var(--md-grey-500); }
.po__note--coral { fill: var(--md-coral); }

/* Marketing site — kit.css
   Mirrors the production stylesheet from mondareestudos.com.br.
   Tokens come from ../../colors_and_type.css */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--md-bg);
  color: var(--md-ink);
  font-family: var(--md-font-sans);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--md-coral); color: #000; }
a { color: inherit; text-decoration: none; }
img,
svg { display: block; max-width: 100%; }

/* ---- Layout primitives ---- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 920px;  margin: 0 auto; padding: 0 32px; }
.section { padding: 120px 0; position: relative; }
@media (max-width: 880px) {
  .container,
.container-narrow { padding: 0 24px; }
  .section { padding: 80px 0; }
}

/* #processo's last child is a full-bleed .surface-dark div (the Method
   stepper) that already supplies its own 80px/100px vertical padding in a
   dark background. Without this override, #processo's own 120px (or 80px
   on mobile) bottom padding stacks on top of that in the page's light
   background, producing a large blank light-colored gap directly below the
   dark block before the next section's own top padding even starts. */
#processo { padding-bottom: 0; }

/* ---- Eyebrow ---- */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--md-grey-500);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1.5px;
  background: currentColor; display: inline-block;
}

/* ---- Section head ---- */
.section-head {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px;
  margin-bottom: 72px; align-items: end;
}
.section-head h2 {
  font-size: clamp(36px, 4.6vw, 62px);
  font-weight: 300; line-height: 1.04;
  letter-spacing: -0.035em; max-width: 880px;
  color: var(--md-ink); margin: 0;
}
.section-head h2 em { font-style: italic; color: var(--md-coral); font-weight: 700; }
.section-head .lede {
  font-size: 17px; color: var(--md-grey-500); max-width: 580px;
  margin-top: 18px; line-height: 1.6;
}
@media (max-width: 880px) {
  .section-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; }
}

/* Problem section-head variant — eyebrow + student photo on the left,
heading on the right. Photo fills the column's white space. */
.section-head--withimg { align-items: start; }
.problem-aside { display: flex; flex-direction: column; gap: 20px; }
.problem-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 420px;
}
@media (max-width: 880px) {
  .problem-photo { aspect-ratio: 16 / 10; min-height: 220px; }
}

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--md-font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  border-radius: 2px; padding: 14px 22px; border: 1.5px solid transparent;
  transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
  white-space: nowrap; text-align: center;
}
.btn--lg { padding: 18px 26px; font-size: 13px; }
.btn--sm { padding: 10px 16px; font-size: 11px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }

.btn--primary { background: var(--md-coral); color: #000; }
.btn--primary:hover { background: var(--md-coral-hover); }
.btn--ghost {
  background: transparent; color: var(--md-ink); border-color: transparent;
  letter-spacing: 0.04em; text-transform: none;
}
.btn--ghost:hover { color: var(--md-coral); }
.btn--outline { background: transparent; color: var(--md-ink); border-color: var(--md-ink); }
.btn--outline:hover { background: var(--md-ink); color: #fff; }
.btn--on-dark { background: #fff; color: var(--md-ink); }
.btn--on-dark:hover { background: var(--md-coral); color: #000; }
.btn--on-coral { background: var(--md-ink); color: #fff; }
.btn--on-coral:hover { background: #fff; color: var(--md-ink); }

/* ---- NAV ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--md-rule);
}
.nav__top-banner {
  background: var(--md-ink); color: #fff; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 10px 16px;
}
.nav__top-banner em { font-style: italic; color: var(--md-coral); font-weight: 700; }
.nav__inner {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 40px;
  padding: 16px 32px; max-width: 1240px; margin: 0 auto;
}
.nav__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--md-ink); }
.wordmark { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: var(--md-ink); }
.wordmark sup { font-size: 10px; font-weight: 500; color: var(--md-grey-500); margin-left: 1px; }
.nav__links { display: flex; gap: 30px; justify-content: center; }
.nav__links a {
  font-size: 14px; font-weight: 500; color: var(--md-ink);
  transition: color 0.2s; letter-spacing: -0.005em;
}
.nav__links a:hover { color: var(--md-coral); }
@media (max-width: 980px) {
  .nav__inner { grid-template-columns: auto 1fr; gap: 16px; }
  .nav__links { display: none; }
}

/* ---- HERO ---- */
.hero { padding: 80px 0 120px; position: relative; overflow: hidden; }

/* ---- Cursor trail — coral Mondare squares chasing the pointer ---- */
.cursor-trail {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.cursor-trail__dot {
  position: absolute;
  top: 0; left: 0;
  border-radius: 1px;
  background: var(--md-coral);
  will-change: transform, opacity, width, height;
}
.cursor-trail__rung {
  position: absolute;
  top: 0; left: 0;
  transform-origin: center center;
  background: var(--md-coral);
  will-change: transform, opacity, width;
}
@media (hover: none) { .cursor-trail { display: none; } }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 80px; align-items: center;
}
.hero__copy .eyebrow { margin-bottom: 24px; }
.hero__copy h1 {
  font-size: clamp(46px, 6.6vw, 94px);
  font-weight: 300; line-height: 0.99;
  letter-spacing: -0.045em;
  color: var(--md-ink); margin: 0 0 28px;
}
.hero__copy h1 em { font-style: italic; color: var(--md-coral); font-weight: 700; }
.hero__copy p {
  font-size: 18px; line-height: 1.55; color: var(--md-grey-500);
  max-width: 520px; margin: 0 0 36px; font-weight: 400;
}
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero__sub-note { font-size: 13px; color: var(--md-grey-500); margin-top: 16px; font-style: italic; }
@media (max-width: 880px) {
  .hero { padding: 48px 0 72px; }
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ---- Hero viz — notebook card with continuous motion ---- */
.hero__viz {
  position: relative; background: var(--md-paper);
  border: 1px solid var(--md-rule);
  border-radius: 6px; padding: 28px 28px 36px; aspect-ratio: 1 / 1.04;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  transform: translateY(var(--vy, 0px));
  transition: transform .4s var(--md-ease-out), box-shadow .4s var(--md-ease-out);
}
/* Ruled-paper field + coral margin line — gives the card a lab-sheet identity
   so it reads as a real object instead of blank space. */
.hero__viz::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(var(--md-coral-200) 0 0) 58px 0 / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 33px, var(--md-rule) 33px 34px);
  opacity: 0.45;
}
.hero__viz > * { position: relative; z-index: 1; }
.hero__viz:hover {
  transform: translateY(var(--vy, 0px)) scale(1.015) rotate(-0.4deg);
  box-shadow: 0 30px 72px rgba(0, 0, 0, 0.12);
}
/* ---- Hero viz inner: student EVOLUTION chart ---------------------------- */
.hviz__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hviz__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--md-grey-500); padding-top: 6px;
}
.hviz__badge {
  background: var(--md-coral); color: #000;
  font-size: 22px; font-weight: 700; line-height: 1;
  padding: 9px 13px 10px; border-radius: 4px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  box-shadow: 0 10px 24px rgba(255, 98, 73, 0.28);
}
.hviz__badge small {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.88;
}

.hviz__chart { position: relative; margin: 14px 0 8px; }
.hviz__chart svg { width: 100%; height: auto; display: block; overflow: visible; }

.hviz__axis { stroke: var(--md-rule); stroke-width: 1; }
.hviz__avg {
  fill: none; stroke: var(--md-grey-300); stroke-width: 2;
  stroke-dasharray: 2 5; stroke-linecap: round; stroke-linejoin: round;
}
.hviz__line {
  fill: none; stroke: var(--md-coral); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 5px 9px rgba(255, 98, 73, 0.22));
}
.hviz__pt { fill: #fff; stroke: var(--md-coral); stroke-width: 2; }
.hviz__climber { filter: drop-shadow(0 0 7px rgba(255, 98, 73, 0.7)); }
.hviz__today { fill: var(--md-coral); stroke: #fff; stroke-width: 2; }
.hviz__pulse {
  fill: var(--md-coral); opacity: 0.45;
  transform-box: fill-box; transform-origin: center;
  animation: hvizPulse 2.6s ease-out infinite;
}
@keyframes hvizPulse {
  0%   { transform: scale(0.7); opacity: 0.5; }
  70%  { opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}

.hviz__now {
  position: absolute; top: -6px; right: -2px;
  font-family: var(--md-font-hand); color: var(--md-coral);
  font-size: 24px; line-height: 1; transform: rotate(-5deg);
}
.hviz__wk {
  position: absolute; bottom: -4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--md-grey-300);
}
.hviz__wk--a { left: 2px; }
.hviz__wk--b { right: 2px; }

.hviz__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hviz__legend {
  font-size: 11px; font-weight: 600; color: var(--md-grey-500);
  display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.02em;
}
.hviz__key { width: 15px; height: 3px; border-radius: 2px; display: inline-block; }
.hviz__key--coral { background: var(--md-coral); }
.hviz__key--grey { background: var(--md-grey-300); }
.hviz__sign {
  margin-left: auto; font-family: var(--md-font-hand);
  color: var(--md-coral); font-size: 27px; line-height: 0.9;
  transform: rotate(-3.5deg); transform-origin: right center;
}

/* ---- Surfaces ---- */
.surface-dark { background: var(--md-ink); color: #fff; }
.surface-dark .eyebrow { color: rgba(255, 255, 255, 0.55); }
.surface-dark .section-head h2 { color: #fff; }
.surface-dark .section-head h2 em { color: var(--md-coral); }
.surface-dark .section-head .lede { color: rgba(255, 255, 255, 0.7); }
.surface-coral { background: var(--md-coral); color: #000; }
.surface-warm { background: var(--md-bg-warm); }

/* ---- Problem (3 cards) ---- */
.problem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.problem-card {
  background: var(--md-bg-warm); border: 1px solid var(--md-rule);
  border-radius: 6px; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px; min-height: 240px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.problem-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06); }
.problem-card .ix {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--md-coral); text-transform: uppercase;
}
.problem-card h4 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--md-ink); line-height: 1.22; margin: 0;
}
.problem-card p { font-size: 15.5px; color: var(--md-grey-500); line-height: 1.6; margin: 0; }
@media (max-width: 880px) { .problem-grid { grid-template-columns: 1fr; } }

/* ---- Proof bar (on dark) ---- */
.proofbar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 320px));
  justify-content: center;
  gap: 48px; padding: 48px 0;
}
.proofbar > div {
  display: flex; flex-direction: column; gap: 8px;
  padding-right: 24px; border-right: 1px solid var(--md-rule-dark);
}
.proofbar > div:last-child { border-right: 0; }
.proofbar.proofbar--single { grid-template-columns: minmax(0, 520px); }
.proofbar.proofbar--single > div { border-right: 0; padding-right: 0; align-items: center; text-align: center; gap: 14px; }
.proofbar.proofbar--single .n { font-size: clamp(64px, 9vw, 104px); }
.proofbar.proofbar--single .l { font-size: 17px; max-width: 420px; color: rgba(255, 255, 255, 0.78); }
.proofbar.proofbar--duo { grid-template-columns: repeat(2, minmax(0, 380px)); gap: 72px; padding: 64px 0; }
.proofbar.proofbar--duo > div { align-items: center; text-align: center; gap: 14px; padding-right: 0; }
.proofbar.proofbar--duo .n { font-size: clamp(52px, 6.5vw, 82px); }
.proofbar.proofbar--duo .l { font-size: 16px; max-width: 340px; color: rgba(255, 255, 255, 0.78); }
@media (max-width: 880px) {
  .proofbar.proofbar--duo { grid-template-columns: 1fr; gap: 28px; }
}
.proofbar .n {
  font-size: clamp(40px, 5vw, 60px); font-weight: 300; line-height: 1;
  letter-spacing: -0.04em; color: #fff;
}
.proofbar .l { font-size: 13.5px; color: rgba(255, 255, 255, 0.7); line-height: 1.45; max-width: 260px; }
@media (max-width: 880px) {
  .proofbar { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .proofbar > div { border-right: 0; border-bottom: 1px solid var(--md-rule-dark); padding-bottom: 24px; padding-right: 0; }
  .proofbar > div:last-child { border-bottom: 0; }
}

/* ---- Process head — clean vertical flow: eyebrow → h2 → lede → tags ---- */
.process-head { max-width: 880px; }
.process-head h2 {
  font-size: clamp(36px, 4.6vw, 62px);
  font-weight: 300; line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--md-ink); margin: 20px 0 0;
}
.process-head h2 em { font-style: italic; color: var(--md-coral); font-weight: 700; }
.process-head .lede {
  font-size: 17px; color: var(--md-grey-500); max-width: 640px;
  margin: 18px 0 0; line-height: 1.6;
}

/* ---- Process tags ---- */
.process-tags {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 0;
}
/* As a section divider below the viz: centered row flanked by hairlines */
.process-tags--divider {
  margin: 56px 0 0; justify-content: center; align-items: center;
  gap: 14px;
}
.process-tags--divider::before,
.process-tags--divider::after {
  content: ""; flex: 1 1 0; height: 1px;
  background: var(--md-rule);
}
.process-tags span {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 8px 14px;
  border: 1px solid var(--md-rule); border-radius: 999px;
  color: var(--md-ink); background: #fff;
}
.process-tags > span::before { content: "× "; color: var(--md-coral); font-weight: 700; }

/* ---- Method (4 steps on dark) ---- */
.method {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--md-rule-dark);
}
.method__step {
  padding: 48px 28px 48px 0;
  border-right: 1px solid var(--md-rule-dark);
  display: flex; flex-direction: column; gap: 18px;
}
.method__step:last-child { border-right: 0; }
.method__step:not(:first-child) { padding-left: 28px; }
.method__step .n {
  font-size: 48px; font-weight: 300; line-height: 1;
  color: var(--md-coral); letter-spacing: -0.04em;
}
.method__step h4 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: #fff; line-height: 1.22; margin: 0; }
.method__step p { font-size: 14.5px; color: rgba(255, 255, 255, 0.72); line-height: 1.6; margin: 0; }
@media (max-width: 880px) {
  .method { grid-template-columns: 1fr; border-top: 0; }
  .method__step { border-right: 0; border-bottom: 1px solid var(--md-rule-dark); padding: 32px 0 !important; }
  .method__step:last-child { border-bottom: 0; }
}
.method-banner {
  margin-top: 80px; padding: 32px; text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 4px;
}
.method-banner h3 {
  font-family: var(--md-font-hand);
  font-size: 64px; font-weight: 700; color: var(--md-coral);
  letter-spacing: -0.02em; line-height: 0.95; margin: 0;
  transform: rotate(-1.5deg);
}
.method-banner h3 span {
  display: block; color: #fff; font-size: 13px;
  font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  font-family: var(--md-font-sans); margin-bottom: 14px;
  transform: rotate(1.5deg);
}

/* ---- Pillars (3 ciências) ---- */
.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.pillar {
  background: var(--md-bg-warm); border: 1px solid var(--md-rule);
  border-radius: 6px; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px; min-height: 320px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pillar:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06); }
.pillar__num { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--md-coral); text-transform: uppercase; }
.pillar h3 { font-size: 28px; font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; color: var(--md-ink); margin: 0; }
.pillar p { font-size: 15px; color: var(--md-grey-500); line-height: 1.6; flex: 1; margin: 0; }
.pillar__viz { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pillar__viz span { height: 8px; border-radius: 2px; display: block; }
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr; } }

/* ---- Editorial coral pull-quote ---- */
.editorial {
  position: relative; padding: 88px 0;
  background: var(--md-coral); color: #000; overflow: hidden;
}
.vol-stamp {
  position: absolute; top: 28px; left: 32px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.7);
}
.editorial__quote {
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 600; line-height: 1.22; letter-spacing: -0.022em;
  color: #fff; margin: 0;
}
.editorial__quote em {
  font-style: italic; font-weight: 600;
  border-bottom: 2px solid rgba(255, 255, 255, 0.45); padding-bottom: 2px;
}
@media (max-width: 880px) { .editorial { padding: 96px 0 64px; } }

/* ---- Relatos dos alunos — trilho horizontal, auto-scroll + arraste manual ----
   assets/js/relatos-rail.js drives movement via scrollLeft (not a CSS
   transform animation) specifically so autoplay and user scrolling/dragging
   share one mechanism instead of fighting each other. overflow-x:auto here
   is what makes touch swipe and trackpad scroll work natively; the JS only
   adds mouse click-drag and the autoplay/pause/loop behavior on top of it. */
.relatos-rail {
  margin-top: 56px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  padding: 4px 0 8px;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.relatos-rail::-webkit-scrollbar { display: none; }
.relatos-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.relatos-rail__track {
  display: flex; align-items: stretch; gap: 20px;
  width: max-content;
}
.relato-print {
  flex-shrink: 0;
  width: 340px; min-height: 300px;
  background: var(--md-white);
  border: 1px solid var(--md-rule);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 20px;
}
.relato-print__mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px;
  line-height: 1;
  color: var(--md-coral);
  margin-bottom: 6px;
}
.relato-print__texto {
  flex: 1;
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-grey-700);
}
.relato-print__nome {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--md-rule);
  font-weight: 600;
  font-size: 13px;
  color: var(--md-ink);
}
@media (max-width: 880px) {
  .relatos-rail { margin-top: 36px; }
  .relato-print { width: 280px; min-height: 300px; padding: 22px 20px 18px; }
}

/* ---- Tutores grid ---- */
.tutores-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.tutor {
  background: var(--md-bg-warm); border: 1px solid var(--md-rule);
  border-radius: 6px; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 18px; min-height: 280px;
}
.tutor__mark {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--md-coral); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
}
.tutor:nth-child(8n+2) .tutor__mark { background: var(--md-blue);     color: var(--md-ink); }
.tutor:nth-child(8n+3) .tutor__mark { background: var(--md-ink);      color: #fff; }
.tutor:nth-child(8n+4) .tutor__mark { background: var(--md-grey-700); color: #fff; }
.tutor:nth-child(8n+5) .tutor__mark { background: var(--md-coral);    color: #fff; }
.tutor:nth-child(8n+6) .tutor__mark { background: var(--md-blue);     color: var(--md-ink); }
.tutor:nth-child(8n+7) .tutor__mark { background: var(--md-grey-700); color: #fff; }
.tutor:nth-child(8n)   .tutor__mark { background: var(--md-ink);      color: #fff; }
.tutor blockquote {
  font-size: 14px; line-height: 1.55; color: var(--md-grey-700);
  font-weight: 400; flex: 1; font-style: italic; margin: 0;
}
.tutor blockquote::before {
  content: "\201C"; color: var(--md-coral);
  font-size: 24px; font-weight: 700; line-height: 0;
  vertical-align: -6px; margin-right: 2px;
}
.tutor__name { font-size: 15px; font-weight: 700; color: var(--md-ink); letter-spacing: -0.01em; }
.tutor__role {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--md-coral); margin-top: 2px;
}
@media (max-width: 980px) { .tutores-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .tutores-grid { grid-template-columns: 1fr; } }

/* ---- Equipe científica ---- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.scientist {
  background: #fff; border: 1px solid var(--md-rule); border-radius: 6px;
  padding: 40px 32px; display: flex; flex-direction: column; gap: 18px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.scientist:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06); }
.scientist__mark {
  width: 64px; height: 64px; border-radius: 4px;
  background: var(--md-coral); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700;
}
.scientist:nth-child(2) .scientist__mark { background: var(--md-blue); color: var(--md-ink); }
.scientist:nth-child(3) .scientist__mark { background: var(--md-ink);  color: #fff; }
/* Important 8: optional photo upload (membro_N_foto ACF field) renders in the
   same slot as the initials mark, when the client uploads one. */
.scientist__mark--photo { object-fit: cover; background: var(--md-rule); }
.scientist h3 { font-size: 28px; font-weight: 300; letter-spacing: -0.03em; color: var(--md-ink); line-height: 1.1; margin: 0; }
.scientist p { font-size: 14.5px; color: var(--md-grey-500); line-height: 1.65; margin: 0; }
.scientist .role { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--md-coral); text-transform: uppercase; }
@media (max-width: 1080px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) { .team-grid { grid-template-columns: 1fr; } }

/* ---- Planos ---- */
.plans { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.plan {
  background: var(--md-bg-warm); border: 1px solid var(--md-rule);
  border-radius: 8px; padding: 40px 36px;
  display: flex; flex-direction: column; gap: 20px;
}
.plan.is-featured {
  background: var(--md-ink); color: #fff;
  border-color: var(--md-ink); position: relative;
}
.plan.is-featured::before {
  content: ""; position: absolute; inset: 0; border-radius: 8px;
  pointer-events: none;
  background: radial-gradient(ellipse at 100% 0%, rgba(255, 90, 69, 0.20), transparent 55%);
}
.plan .name { font-size: 14px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--md-coral); }
.plan h3 { font-size: 26px; font-weight: 700; line-height: 1.18; letter-spacing: -0.025em; color: var(--md-ink); margin: 0; }
.plan.is-featured h3 { color: #fff; }
.plan .desc { font-size: 15px; line-height: 1.55; color: var(--md-grey-500); margin: 0; }
.plan.is-featured .desc { color: rgba(255, 255, 255, 0.75); }
.plan .sub-list-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--md-coral); margin-top: 12px;
}
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
/* Planos empilhados: a lista corre em duas colunas para o cartão não
   ficar excessivamente alto. */
@media (min-width: 900px) {
  .plan ul { display: block; columns: 2; column-gap: 48px; }
  .plan ul li { break-inside: avoid; margin-bottom: 14px; }
  .plan.is-featured ul { columns: 2; }
}
.plan ul li {
  font-size: 14.5px; color: var(--md-ink);
  padding-left: 26px; position: relative; line-height: 1.5;
}
.plan.is-featured ul li { color: #fff; }
.plan ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 14px; height: 2px; background: var(--md-coral);
}
.plan ul li strong { font-weight: 700; }
.plan .btn { margin-top: 8px; align-self: flex-start; }
.price-note { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--md-grey-500); }
.plan.is-featured .price-note { color: rgba(255, 255, 255, 0.55); }
@media (max-width: 880px) { .plans { grid-template-columns: 1fr; } }

/* ---- FAQ ---- */
.faq-list { border-top: 1px solid var(--md-rule); }
.faq-list details {
  border-bottom: 1px solid var(--md-rule);
  padding: 24px 0; cursor: pointer;
}
.faq-list details summary {
  list-style: none;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 24px; align-items: center;
  font-weight: 700; font-size: 20px; line-height: 1.3;
  color: var(--md-ink); letter-spacing: -0.02em;
}
.faq-list details summary::-webkit-details-marker { display: none; }
.faq-list details summary .q-num { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--md-coral); }
.faq-list details summary .q-toggle {
  width: 30px; height: 30px;
  border: 1.5px solid var(--md-ink); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s, background .3s, color .3s, border-color .3s;
  font-size: 14px; color: var(--md-ink);
}
.faq-list details[open] summary .q-toggle {
  transform: rotate(45deg); background: var(--md-coral);
  border-color: var(--md-coral); color: #000;
}
.faq-list details .a {
  margin: 16px 0 4px 56px; color: var(--md-grey-500);
  font-size: 15.5px; line-height: 1.65; max-width: 820px;
}
@media (max-width: 680px) {
  .faq-list details summary { font-size: 17px; gap: 14px; }
  .faq-list details summary .q-num { display: none; }
  .faq-list details .a { margin-left: 0; }
}

/* ---- Final CTA ---- */
.final-cta {
  padding: 140px 0; text-align: center;
  background: var(--md-bg-warm); position: relative;
}
.final-cta .eyebrow { justify-content: center; color: var(--md-grey-500); }
.final-cta h2 {
  font-size: clamp(36px, 5vw, 72px); font-weight: 300;
  line-height: 1.04; letter-spacing: -0.04em;
  color: var(--md-ink); max-width: 900px; margin: 24px auto;
}
.final-cta h2 em { font-style: italic; color: var(--md-coral); font-weight: 700; }
.final-cta p { font-size: 17px; color: var(--md-grey-500); max-width: 600px; margin: 0 auto 36px; line-height: 1.6; }
.final-cta-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }

/* ---- Footer ---- */
.footer { background: var(--md-ink); color: #fff; padding: 80px 0 32px; }
.footer__top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 48px; border-bottom: 1px solid var(--md-rule-dark);
}
.footer__brand { display: flex; flex-direction: column; gap: 18px; }
.footer__brand .stacked { display: flex; align-items: center; gap: 10px; }
.footer__brand .stacked .wm { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.footer__brand .stacked .wm sup { font-size: 10px; color: rgba(255, 255, 255, 0.5); }
.footer__brand p { font-size: 14px; color: rgba(255, 255, 255, 0.7); line-height: 1.65; max-width: 340px; margin: 0; }
.footer__col h5 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--md-coral); margin: 0 0 18px;
}
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.footer__col ul li a {
  font-size: 14px; color: rgba(255, 255, 255, 0.8);
  transition: color .2s;
}
.footer__col ul li a:hover { color: var(--md-coral); }
.footer__bottom {
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 12px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.02em;
}
@media (max-width: 880px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* ---- Reveal animation ---- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--md-ease-out), transform .8s var(--md-ease-out);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* Staggered reveal — the container itself stays put; its direct children
   rise in one after another once the row scrolls into view. */
.reveal-stagger > * {
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s var(--md-ease-out), transform .7s var(--md-ease-out);
  will-change: opacity, transform;
}
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0s;    }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .08s;  }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .16s;  }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .24s;  }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .32s;  }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .40s;  }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .48s;  }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .56s;  }

/* Hero copy is above the fold — visible by default so first paint (and
   static screenshots) never catch it mid-transition. The hero's "alive"
   energy comes from the spectrogram card,
parallax and the underline draw. */
.hero__copy > * { opacity: 1; transform: none; }

/* Animated coral underline under the emphasized word — draws itself in.
   Safe in the frozen-timeline preview: if the keyframe never advances the
   word is simply un-underlined (never invisible). */
.hero__copy h1 em { position: relative; }
.hero__copy h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 0.09em;
  background: var(--md-coral); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  animation: emUnderline 1.1s var(--md-ease-out) 0.5s forwards;
}
@keyframes emUnderline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
.reveal-stagger > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .hero__copy h1 em::after { animation: none; transform: scaleX(1); }
  .hviz__pulse { animation: none; opacity: 0; }
  .hviz__climber { display: none; }
  .spectogram__cluster span { animation: none !important; transform: scaleY(1); opacity: 1; }
}

/* ============================================================
   Brand devices from the manual
   ============================================================ */

/* ---- Vertical bar spectogram (signature graphism) ----
   "Cada barra é um aluno." Every bar SPROUTS from the floor up to its
   (ascending) height,
and the growth wave climbs left→right across the
   strip — reading as students leveling up week after week. The coral
   "peak" of each group flares as the growth front reaches it. */
.spectogram {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0;
  padding: 0 32px;
}
.spectogram__cluster {
  display: flex; align-items: flex-end; gap: 0;
}
.spectogram__cluster span {
  display: block; width: 11px;
  background: var(--md-grey-300);
  border-radius: 1px;
  transform-origin: bottom center;
  transform: scaleY(1);
  will-change: transform, filter;
}
.spectogram__cluster span.c { background: var(--md-coral);     }
.spectogram__cluster span.b { background: var(--md-blue);      }
.spectogram__cluster span.g { background: var(--md-grey-700);  }
.spectogram__cluster span.l { background: var(--md-grey-200);  }

/* On hover,
the whole spectogram lights up — invites interaction */
.brand-strip:hover .spectogram__cluster span {
  animation-duration: 1.8s !important;
}
.brand-strip:hover .spectogram__cluster span.c {
  animation-duration: 1.4s !important;
}

/* Bottom-bleed strip — sits below the hero / between sections */
.brand-strip {
  position: relative;
  padding: 60px 0 0;
  background: var(--md-bg);
  overflow: hidden;
  margin-top: -1px;
  cursor: crosshair;
}
.brand-strip .spectogram { height: 140px; }
.brand-strip--warm { background: var(--md-bg-warm); }
.brand-strip--paper { background: var(--md-paper); }
.brand-strip--dark { background: var(--md-ink); }
.brand-strip--dark .spectogram__cluster span.l { background: rgba(255,255,255,0.18); }
.brand-strip--dark .spectogram__cluster span:not(.c):not(.b):not(.g):not(.l) {
  background: rgba(255,255,255,0.28);
}
/* Optional caption above the spectogram */
.brand-strip__cap {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 32px 18px; max-width: 1240px; margin: 0 auto;
}
.brand-strip__cap .num {
  font-family: var(--md-font-hand); color: var(--md-coral);
  font-size: 56px; line-height: 0.9; transform: rotate(-3deg);
}
.brand-strip__cap .lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--md-grey-500);
  max-width: 380px; line-height: 1.45;
}
.brand-strip--dark .brand-strip__cap .lbl { color: rgba(255,255,255,0.55); }

/* Handwritten "PRÉ-VESTIBULAR & UNIVERSITÁRIO" — the manual's signature
   slogan stamp. Used once on the hero. */
.hand-stamp {
  position: absolute;
  font-family: var(--md-font-hand);
  font-weight: 700;
  color: var(--md-ink);
  line-height: 0.95;
  pointer-events: none;
}

/* VOL. NN coral stamp — strong identity marker (manual poster device) */
.vol-stamp-coral {
  display: inline-block;
  background: var(--md-coral); color: #000;
  padding: 6px 14px 7px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1;
}
.vol-stamp-coral.is-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 14px 7px;
}

/* Editorial quote — boost the Vol. stamp to manual scale */
.editorial .vol-stamp-coral.is-vertical {
  position: absolute;
  top: 0; left: 32px;
  background: var(--md-ink); color: var(--md-coral);
}
/* The rule above is a fixed left offset sized for the desktop gap between
   the section edge and the centered narrow text column. On narrow viewports
   that gap collapses and the stamp lands directly on top of the quote text
   instead. Drop it back into normal flow as a small horizontal badge above
   the quote so it never overlaps — must come after the base rule above
   since both share the same selector specificity and source order decides. */
@media (max-width: 880px) {
  .editorial .vol-stamp-coral.is-vertical {
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
    display: inline-block;
    margin-bottom: 20px;
  }
}

/* ---- Generic state utility ---- */
/* Backs the `.is-hidden` toggle used by modal.js (#diagnostic-modal) and
   whatsapp-fab.js (.whatsapp-fab). Without this rule, elements that start
   with class="is-hidden" in server-rendered markup have no CSS hook at all
   and render fully visible from first paint. */
.is-hidden { display: none !important; }

/* ---- Modal (kept for the diagnostic flow) ---- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 20, 20, 0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff; border-radius: 8px;
  width: 540px; max-width: calc(100vw - 40px);
  padding: 40px; position: relative;
  animation: pop .24s var(--md-ease-out);
}
@keyframes pop {
  from { transform: scale(0.96) translateY(8px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.modal__close {
  position: absolute; top: 22px; right: 22px;
  width: 36px; height: 36px; border-radius: 2px;
  background: var(--md-bg-warm); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--md-ink);
}
.modal__close:hover { background: var(--md-grey-200); }
.modal h3 {
  font-weight: 300; font-size: 28px; letter-spacing: -0.025em;
  line-height: 1.1; margin: 12px 0 8px;
}
.modal .lede { color: var(--md-grey-500); margin: 0 0 24px; font-size: 15px; line-height: 1.55; }
.modal .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.modal label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--md-grey-700);
}
.modal input,
.modal select {
  font-family: inherit; font-size: 14px;
  padding: 12px 14px; border-radius: 2px;
  border: 1.5px solid var(--md-rule);
  background: #fff; color: var(--md-ink); outline: none;
  transition: all 150ms;
}
.modal input:focus,
.modal select:focus {
  border-color: var(--md-coral);
  box-shadow: 0 0 0 3px rgba(255, 90, 69, 0.12);
}
.modal .actions { display: flex; gap: 10px; margin-top: 22px; }

/* ============================================================
   Method stepper (expandable detail panel for the 4 etapas)
   ============================================================ */

.method-stepper {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--md-rule-dark);
  border-bottom: 1px solid var(--md-rule-dark);
  margin-bottom: 0;
}
.method-stepper__tab {
  background: transparent; border: 0; cursor: pointer;
  text-align: left;
  padding: 28px 24px 24px 0;
  border-right: 1px solid var(--md-rule-dark);
  color: #fff;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  transition: background .3s, padding .3s;
  font-family: inherit;
}
.method-stepper__tab:last-child { border-right: 0; }
.method-stepper__tab:not(:first-child) { padding-left: 28px; }
.method-stepper__tab .num {
  font-size: 48px; font-weight: 300; line-height: 1;
  color: var(--md-coral); letter-spacing: -0.04em;
  transition: color .3s;
}
.method-stepper__tab .lbl {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.1;
  margin-top: 8px;
}
.method-stepper__tab .sub {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: -0.005em; margin-top: 2px;
}
.method-stepper__tab::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--md-coral);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .35s var(--md-ease-out);
}
.method-stepper__tab:hover::after { transform: scaleX(0.4); }
.method-stepper__tab.is-open::after { transform: scaleX(1); }
.method-stepper__tab.is-open .num { color: #fff; }
.method-stepper__tab:not(:first-child).is-open { padding-left: 28px; }

/* Expanded detail panel — visible on first render and on every tab
   change. (We don't animate this: the preview iframe's CSS animation
   timeline is frozen,
so a keyframe-based fade-in would render the
   panel permanently invisible after a re-mount.) */
.method-detail {
  padding: 48px 0 32px;
}
/* Only the active step's panel should render — tabs.js toggles `.is-open`
   on click, but the class needs a CSS rule to actually do anything. Without
   this, all 4 panels' full content stacked and displayed simultaneously. */
.method-detail__panel { display: none; }
.method-detail__panel.is-open { display: block; }
.method-detail__head {
  display: grid; grid-template-columns: 120px 1fr;
  gap: 24px; align-items: start;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--md-rule-dark);
  margin-bottom: 32px;
}
.method-detail__num {
  font-family: var(--md-font-hand);
  color: var(--md-coral);
  font-size: 96px; line-height: 0.85;
  transform: rotate(-3deg);
  display: inline-block; transform-origin: left top;
}
.method-detail__head h3 {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 300; line-height: 1.0;
  letter-spacing: -0.035em; color: #fff;
  margin: 0 0 16px;
}
.method-detail__head .lede {
  font-size: 17px; line-height: 1.6;
  color: rgba(255,255,255,0.75);
  max-width: 720px; margin: 0;
}

.method-detail__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px;
  margin-bottom: 32px;
}
.method-bullet {
  border-top: 1.5px solid var(--md-coral);
  padding-top: 14px;
}
.method-bullet__lbl {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--md-coral); display: block; margin-bottom: 8px;
}
.method-bullet p {
  font-size: 14.5px; line-height: 1.55;
  color: rgba(255,255,255,0.75); margin: 0;
}

.method-detail__receives {
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--md-coral);
  padding: 20px 24px;
  display: flex; gap: 20px;
  align-items: baseline;
}
.method-detail__receives .eyebrow {
  color: var(--md-coral);
  font-size: 10px; letter-spacing: 0.16em;
  font-weight: 700; flex-shrink: 0; min-width: 110px;
}
.method-detail__receives .eyebrow::before { display: none; }
.method-detail__receives p {
  font-size: 14.5px; line-height: 1.55;
  color: rgba(255,255,255,0.85); margin: 0;
}

@media (max-width: 880px) {
  .method-stepper { grid-template-columns: 1fr 1fr; }
  .method-stepper__tab { padding: 20px 14px 16px !important; }
  .method-stepper__tab:nth-child(2) { border-right: 0; }
  .method-detail__head { grid-template-columns: 1fr; }
  .method-detail__grid { grid-template-columns: 1fr; }
  .method-detail__receives { flex-direction: column; gap: 8px; }
}

/* ============================================================
   CODE Triad — 3 biological pillars
   ============================================================ */

.triad-intro {
  text-align: center;
  padding: 110px 0 60px;
  background: var(--md-ink); color: #fff;
  position: relative;
}
.triad-intro::after {
  content: ""; position: absolute;
  left: 50%; bottom: 0; transform: translate(-50%, 50%);
  width: 80px; height: 80px; background: var(--md-coral);
  z-index: 2;
}
.triad-intro h2 {
  font-size: clamp(36px, 5vw, 64px); font-weight: 300;
  letter-spacing: -0.04em; line-height: 1.02;
  margin: 18px auto 24px; max-width: 760px;
}
.triad-intro h2 em { color: var(--md-coral); font-style: italic; }
.triad-intro p {
  font-size: 17px; line-height: 1.55;
  color: rgba(255,255,255,0.7);
  max-width: 540px; margin: 0 auto;
}
.triad-intro .eyebrow {
  color: rgba(255,255,255,0.55);
  justify-content: center;
}

.triad {
  display: grid; grid-template-columns: minmax(0, 440px) 104px minmax(0, 440px);
  justify-content: center;
  gap: 8px;
  padding: 80px 0 100px;
  background: var(--md-bg-warm);
}
.triad__pillar {
  background: var(--md-white);
  padding: 40px 32px 32px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform .35s var(--md-ease-out);
}
.triad__pillar:hover { transform: translateY(-4px); }
.triad__pillar::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--md-coral);
}
.triad__pillar .roman {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--md-coral); margin-bottom: 18px;
}
.triad__pillar h3 {
  font-size: 32px; font-weight: 300;
  letter-spacing: -0.035em; line-height: 1.0;
  margin: 0 0 6px;
}
.triad__pillar .arch {
  font-family: var(--md-font-hand);
  font-size: 36px; color: var(--md-coral);
  transform: rotate(-2deg); display: inline-block;
  margin-bottom: 18px; line-height: 0.9;
}
.triad__pillar p {
  font-size: 15px; line-height: 1.6;
  color: var(--md-grey-500); margin: 0 0 18px;
}
.triad__pillar ul {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.triad__pillar ul li {
  font-size: 13.5px; line-height: 1.5;
  color: var(--md-ink); position: relative;
  padding-left: 18px;
}
.triad__pillar ul li::before {
  content: ""; position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 2px; background: var(--md-coral);
}
.triad__pillar .footer-quote {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--md-rule);
  font-style: italic;
  font-size: 13px; line-height: 1.55;
  color: var(--md-grey-500);
}

.triad__seam {
  display: flex; align-items: center; justify-content: center;
}
.triad__seam img { width: 76px; height: auto; opacity: 0.85; }
@media (max-width: 880px) {
  .triad { grid-template-columns: 1fr; padding: 48px 0 72px; }
  .triad__seam { padding: 8px 0; }
  .triad__seam img { width: 60px; }
}

/* ============================================================ */

/* ---- Image plate — hover scrubs through the brand wallpapers ---- */
.image-plate {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: 6px;
  background: var(--md-paper);
}
.image-plate img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--md-ease-out), opacity .8s;
  transform: scale(1.04);
}
.image-plate:hover img { transform: scale(1.10); }
.image-plate__cap {
  position: absolute; left: 22px; bottom: 22px;
  color: #fff; font-weight: 300; letter-spacing: -0.02em;
  font-size: 28px; line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
  max-width: 70%;
}
.image-plate__cap em { color: var(--md-coral); font-style: italic; }
.image-plate__stamp {
  position: absolute; top: 20px; right: 20px;
  background: var(--md-coral); color: #000;
  padding: 8px 12px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* ---- Manifesto — alternating image + copy strip ---- */
.manifesto {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
  padding: 0;
}
.manifesto.reverse { grid-template-columns: 1fr 1fr; }
.manifesto.reverse .manifesto__copy { order: 2; }
.manifesto__plate {
  position: relative; overflow: hidden; border-radius: 4px;
  aspect-ratio: 4 / 5;
}
.manifesto__plate img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 6s linear;
}
.manifesto__plate.in img { transform: scale(1.08); }
.manifesto__plate .stamp {
  position: absolute; left: 22px; top: 22px;
  background: var(--md-coral); color: #000;
  padding: 8px 14px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.manifesto__copy h3 {
  font-size: clamp(32px, 4vw, 54px); font-weight: 300;
  letter-spacing: -0.04em; line-height: 1.0;
  margin: 18px 0 22px; color: var(--md-ink);
}
.manifesto__copy h3 em { color: var(--md-coral); font-style: italic; }
.manifesto__copy p {
  font-size: 16px; line-height: 1.65; color: var(--md-grey-500);
  margin: 0 0 18px; max-width: 480px;
}
.manifesto__hand {
  font-family: var(--md-font-hand);
  color: var(--md-coral); font-size: 36px;
  display: inline-block; transform: rotate(-2deg);
  margin-top: 8px;
}
@media (max-width: 880px) {
  .manifesto,
.manifesto.reverse { grid-template-columns: 1fr; gap: 28px; padding: 0; }
  .manifesto.reverse .manifesto__copy { order: 0; }
}

/* ---- Live counter row ---- */
.counter-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--md-rule);
  border-bottom: 1px solid var(--md-rule);
}
.counter {
  padding: 36px 32px;
  border-right: 1px solid var(--md-rule);
  position: relative;
  cursor: default;
  transition: background .3s;
}
.counter:last-child { border-right: 0; }
.counter:hover { background: var(--md-bg-warm); }
.counter .num {
  font-size: clamp(40px, 4.5vw, 56px); font-weight: 300;
  letter-spacing: -0.04em; line-height: 1;
  color: var(--md-ink); font-variant-numeric: tabular-nums;
}
.counter .num em { color: var(--md-coral); font-style: normal; }
.counter .lbl {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--md-grey-500);
  margin-top: 10px;
}
@media (max-width: 880px) {
  .counter-row { grid-template-columns: 1fr 1fr; }
  .counter:nth-child(odd) { border-right: 1px solid var(--md-rule); }
  .counter:nth-child(2n) { border-right: 0; }
  .counter:nth-child(-n+2) { border-bottom: 1px solid var(--md-rule); }
}

/* ---- Floating WhatsApp CTA ---- */
.whatsapp-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  background: var(--md-coral); color: #000;
  padding: 14px 22px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 16px 40px rgba(255, 98, 73, 0.35);
  animation: fabIn 0.6s var(--md-ease-out) 1.2s backwards;
  transition: transform .25s var(--md-ease-out), box-shadow .25s;
}
.whatsapp-fab::before {
  content: ""; width: 8px; height: 8px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  animation: pulseRing 2s infinite;
}
.whatsapp-fab:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 24px 60px rgba(255, 98, 73, 0.45);
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0.6); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0); }
}
@keyframes fabIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .whatsapp-fab span { display: none; }
  .whatsapp-fab { padding: 14px; }
}

/* ---- Pillars get a richer hover state ---- */
.pillar { position: relative; }
.pillar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--md-coral);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--md-ease-out);
}
.pillar:hover::after { transform: scaleX(1); }
.pillar__viz span { transition: transform .4s var(--md-ease-out); }
.pillar:hover .pillar__viz span { transform: translateX(6px); }
.pillar:hover .pillar__viz span:nth-child(2n) { transform: translateX(-4px); }

/* ---- Tutor cards: hover lifts and tints ---- */
.tutor { transition: transform .35s var(--md-ease-out), background .35s, border-color .35s; }
.tutor:hover {
  transform: translateY(-4px);
  background: #fff;
  border-color: var(--md-ink);
}
.tutor__mark { transition: transform .35s var(--md-ease-out); }
.tutor:hover .tutor__mark { transform: rotate(-6deg) scale(1.05); }

/* ---- Scientist cards animate the mark ---- */
.scientist__mark { transition: transform .35s var(--md-ease-out); }
.scientist:hover .scientist__mark { transform: rotate(-4deg) scale(1.06); }

/* ============================================================
   Ambient background graphism — brand spectogram as scenery.
   Marquee + clusters + dot-grid + eyebrow pulse + plan lift.
   ============================================================ */

/* Marquee strip of horizontal bars that scrolls right → left forever */
.marquee-bars {
  position: relative;
  height: 56px;
  overflow: hidden;
  border-top: 1px solid var(--md-rule);
  border-bottom: 1px solid var(--md-rule);
  background: var(--md-bg);
}
.marquee-bars::before,
.marquee-bars::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 80px; z-index: 2; pointer-events: none;
}
.marquee-bars::before { left: 0;
  background: linear-gradient(90deg, var(--md-bg), transparent); }
.marquee-bars::after { right: 0;
  background: linear-gradient(270deg, var(--md-bg), transparent); }
.marquee-bars--dark { border-color: var(--md-rule-dark); background: var(--md-ink); }
.marquee-bars--dark::before { background: linear-gradient(90deg, var(--md-ink), transparent); }
.marquee-bars--dark::after { background: linear-gradient(270deg, var(--md-ink), transparent); }

.marquee-bars__track {
  display: flex; gap: 14px; align-items: center;
  height: 100%; padding: 0 14px;
  animation: marqueeSlide 36s linear infinite;
  width: max-content;
}
.marquee-bars__seg {
  display: inline-flex; align-items: center; gap: 14px;
}
.marquee-bars__bar {
  display: inline-block;
  height: 14px; border-radius: 2px;
  flex-shrink: 0;
}
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Floating bg graphism — clusters of vertical bars in low opacity */
.ambient-bars {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
  z-index: 0;
}
.ambient-bars__cluster {
  position: absolute;
  display: flex; align-items: flex-end; gap: 6px;
  opacity: 0.07;
  animation: ambientDrift 22s ease-in-out infinite;
}
.ambient-bars__cluster span {
  display: block; width: 10px; border-radius: 2px;
  background: var(--md-ink);
  transform-origin: bottom center;
  animation: ambientPulse 6s ease-in-out infinite;
}
.ambient-bars__cluster span.c { background: var(--md-coral); opacity: 1; }
.ambient-bars__cluster.dark span { background: rgba(255,255,255,0.7); }
.ambient-bars--dark .ambient-bars__cluster { opacity: 0.10; }

@keyframes ambientDrift {
  0%, 100% { transform: translate(0, 0)         rotate(-2deg); }
  50%      { transform: translate(24px, -12px)  rotate(2deg);  }
}
@keyframes ambientPulse {
  0%, 100% { transform: scaleY(1);    }
  50%      { transform: scaleY(1.18); }
}

/* Subtle dot-grid background */
.dot-grid {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(0,0,0,0.10) 1px, transparent 1.5px);
  background-size: 28px 28px;
  background-position: 0 0;
  animation: dotGridDrift 32s linear infinite;
  opacity: 0.55;
}
.dot-grid--dark {
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.5px);
}
@keyframes dotGridDrift {
  from { background-position: 0 0; }
  to   { background-position: 28px 28px; }
}

/* Make sure section content sits above ambient layers */
.section > .container,
.section > .container-narrow {
  position: relative; z-index: 1;
}
.hero { position: relative; }
.hero > .container { position: relative; z-index: 1; }

/* Coral pulse on the eyebrow's leading bar */
.eyebrow::before {
  animation: eyebrowPulse 3.2s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes eyebrowPulse {
  0%, 100% { transform: scaleX(1);    opacity: 1;   }
  50%      { transform: scaleX(1.45); opacity: 0.7; }
}

/* Pricing plans lift harder on hover */
.plan { transition: transform .4s var(--md-ease-out), box-shadow .4s var(--md-ease-out); }
.plan:hover { transform: translateY(-6px); box-shadow: 0 24px 64px rgba(0,0,0,0.08); }
.plan.is-featured:hover { box-shadow: 0 24px 64px rgba(255,98,73,0.32); }

/* ---- Manifesto plate: graphism variant ---- */
.manifesto__plate--graphism {
  background: var(--md-paper);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px 24px;
  border: 1px solid var(--md-rule);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.07), 0 2px 8px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}
.manifesto__plate--graphism img {
  width: 100%; height: 100%; object-fit: contain;
  transform: rotate(-2deg) scale(1);
  transition: transform 6s linear;
}
.manifesto__plate--graphism.in img { transform: rotate(0deg) scale(1.06); }

/* ---- Platform viz — "um plano vivo" (espelha a UI real) ---- */
.platform-viz { width: 100%; height: 100%; }
.platform-viz svg { width: 100%; height: 100%; display: block; overflow: visible; }
.platform-viz text { font-family: var(--md-font-sans); }
.pv__win { fill: #fff; stroke: var(--md-rule); stroke-width: 1.5; }
.pv__winrule { stroke: var(--md-rule); stroke-width: 1.5; }
.pv__logo { fill: var(--md-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.pv__sec { fill: var(--md-grey-400, #B5B5B5); font-size: 7px; font-weight: 700; letter-spacing: 0.18em; }
.pv__nav { fill: var(--md-grey-500); font-size: 8.5px; font-weight: 600; }
.pv__nav--on { fill: #fff; font-weight: 700; }
.pv__active { fill: var(--md-ink); }
.pv__tag { fill: var(--md-coral); font-size: 5.5px; font-weight: 700; letter-spacing: 0.14em; }
.pv__badge { fill: var(--md-coral); }
.pv__badgetxt { fill: #fff; font-size: 7px; font-weight: 700; }
.pv__banner { fill: var(--md-ink); }
.pv__bannersym { fill: var(--md-coral); }
.pv__bannersym-star { fill: #fff; font-size: 11px; }
.pv__bannert1 { fill: #fff; font-size: 9px; font-weight: 700; }
.pv__hand { fill: var(--md-coral); font-family: var(--md-font-hand); font-size: 14px; }
.pv__label { fill: var(--md-grey-500); font-size: 8px; font-weight: 700; letter-spacing: 0.16em; }
.pv__card { fill: #fff; stroke: var(--md-rule); stroke-width: 1.5; }
.pv__taskicon { fill: rgba(255, 98, 73, 0.18); stroke: var(--md-coral); stroke-width: 1.2; }
.pv__tasktitle { fill: var(--md-ink); font-size: 9.5px; font-weight: 700; }
.pv__tasksub { fill: var(--md-grey-500); font-size: 7px; font-weight: 700; letter-spacing: 0.08em; }
.pv__progresslbl { fill: var(--md-grey-500); font-size: 7px; font-weight: 700; letter-spacing: 0.14em; }
.pv__pct { fill: var(--md-coral); font-size: 9px; font-weight: 700; }
.pv__barbg { fill: var(--md-grey-200, #E8E8E8); }
.pv__barfill { fill: var(--md-coral); }
.pv__cta { fill: var(--md-coral); }
.pv__ctatxt { fill: #fff; font-size: 7px; font-weight: 700; letter-spacing: 0.12em; }
.pv__dark { fill: var(--md-ink); }
.pv__darkt1 { fill: #fff; font-size: 8.5px; font-weight: 700; }
.pv__darkt2 { fill: rgba(255,255,255,0.6); font-size: 6.5px; font-weight: 700; letter-spacing: 0.08em; }
.pv__pill { fill: var(--md-coral); }
.pv__pilltxt { fill: #fff; font-size: 7px; font-weight: 700; }
.pv__hi { fill: none; stroke: var(--md-coral); stroke-width: 2; }
.pv__row { fill: #fff; stroke: var(--md-rule); stroke-width: 1.2; }
.pv__box { fill: #fff; stroke: var(--md-grey-300); stroke-width: 1.5; }
.pv__box.is-checked { fill: rgba(255, 98, 73, 0.85); stroke: var(--md-coral); }
.pv__tick { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv__rowtitle { fill: var(--md-ink); font-size: 8.5px; font-weight: 700; }
.pv__rowtitle.is-done { fill: var(--md-grey-400, #B5B5B5); }
.pv__strike { stroke: var(--md-grey-400, #B5B5B5); stroke-width: 1.2; }
.pv__rowsub { fill: var(--md-grey-500); font-size: 6.5px; font-weight: 700; letter-spacing: 0.06em; }
.pv__rowtime { fill: var(--md-grey-500); font-size: 7.5px; font-weight: 700; }
.pv__livedot { fill: var(--md-coral); }
.pv__live { fill: var(--md-coral); font-size: 8px; font-weight: 700; letter-spacing: 0.18em; }
.pv__foot { fill: var(--md-grey-500); font-size: 7px; font-weight: 700; letter-spacing: 0.14em; }
.pv__pulse { fill: var(--md-coral); filter: drop-shadow(0 0 6px rgba(255, 98, 73, 0.5)); }
.pv__status { fill: var(--md-grey-500); font-size: 7.5px; font-weight: 700; letter-spacing: 0.12em; }
.pv__status.is-done { fill: var(--md-coral); }
.pv__res { fill: var(--md-coral); }
.pv__restxt { fill: #fff; font-size: 8px; font-weight: 700; letter-spacing: 0.08em; }
.pv__conn { fill: none; stroke: var(--md-coral); stroke-width: 2; stroke-linecap: round; }
.pv__insrow { fill: rgba(255, 98, 73, 0.07); stroke: var(--md-coral); stroke-width: 1.6; }
.pv__instag { fill: var(--md-coral); }
.pv__instagtxt { fill: #fff; font-size: 6.8px; font-weight: 700; letter-spacing: 0.1em; }
.pv__card.is-on { stroke: var(--md-coral); }
.pv__cardval { fill: var(--md-grey-500); font-size: 7px; font-weight: 700; letter-spacing: 0.1em; }
.pv__cardbig { fill: var(--md-coral); font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.pv__feedline { fill: none; stroke: var(--md-grey-300); stroke-width: 1.5; }
.pv__ring { fill: none; stroke: var(--md-coral); stroke-width: 1.5; }
.pv__symg path { fill: var(--md-coral); }
.pv__cal { fill: var(--md-grey-400, #B5B5B5); font-size: 7.5px; font-weight: 700; letter-spacing: 0.16em; transition: fill .3s; }
.pv__cal.is-on { fill: var(--md-ink); }

/* ---- Platform viz v4 — computador central alimentado por fontes ---- */
.pz__monitor { fill: #fff; stroke: var(--md-ink); stroke-width: 2.5; }
.pz__stand { fill: #fff; stroke: var(--md-ink); stroke-width: 2.5; stroke-linejoin: round; }
.pz__standbase { stroke: var(--md-ink); stroke-width: 2.5; stroke-linecap: round; }
.pz__screen { fill: var(--md-bg-warm, #FAFAFA); stroke: var(--md-rule); stroke-width: 1; }
.pz__title { fill: var(--md-grey-700); font-family: var(--md-font-sans); font-size: 8px; font-weight: 700; letter-spacing: 0.12em; }
.pz__livedot { fill: var(--md-coral); }
.pz__live { fill: var(--md-coral); font-family: var(--md-font-sans); font-size: 7.5px; font-weight: 700; letter-spacing: 0.18em; }
.pz__rule { stroke: var(--md-rule); stroke-width: 1; }
.pz__day { fill: var(--md-grey-500); font-family: var(--md-font-sans); font-size: 7px; font-weight: 700; letter-spacing: 0.1em; }
.pz__grid { stroke: var(--md-rule); stroke-width: 1; opacity: 0.7; }
.pz__block.pz-coral { fill: var(--md-coral); opacity: 0.92; }
.pz__block.pz-blue { fill: var(--md-blue); }
.pz__block.pz-grey { fill: var(--md-grey-300); }
.pz__hi { fill: none; stroke: var(--md-coral); stroke-width: 1.6; stroke-dasharray: 4 3; }
.pz__feed { fill: none; stroke: var(--md-grey-300); stroke-width: 1.5; }
.pz__node { fill: var(--md-paper); stroke: var(--md-rule); stroke-width: 1.5; transition: stroke .25s; }
.pz__node.is-on { stroke: var(--md-coral); stroke-width: 2.2; }
.pz__nodedot.pz-coral { fill: var(--md-coral); }
.pz__nodedot.pz-blue { fill: var(--md-blue-700); }
.pz__nodelbl { fill: var(--md-grey-700); font-family: var(--md-font-sans); font-size: 6.8px; font-weight: 700; letter-spacing: 0.1em; }
.pz__group { fill: var(--md-grey-500); font-family: var(--md-font-sans); font-size: 6.5px; font-weight: 700; letter-spacing: 0.2em; }
.pz__pulse { filter: drop-shadow(0 0 5px rgba(255, 98, 73, 0.5)); }
.pz__caption { fill: var(--md-grey-500); font-family: var(--md-font-sans); font-size: 8.5px; font-weight: 700; letter-spacing: 0.18em; }
.pz__hand { fill: var(--md-grey-700); font-family: var(--md-font-hand); font-size: 17px; }
.pz__hand--big { fill: var(--md-coral); font-size: 26px; }

/* ---- BioCalib viz — painel de calibração (Pilares) ---- */
.pillars-aside { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.biocalib-viz { width: 100%; max-width: 440px; }
.biocalib-viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.bc__chip rect { fill: var(--md-paper); stroke: var(--md-rule); stroke-width: 1.5; transition: stroke .25s; }
.bc__chip text { fill: var(--md-grey-700); font-family: var(--md-font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }
.bc__chip.is-on rect { stroke: var(--md-coral); stroke-width: 2; }
.bc__chip.is-on text { fill: var(--md-ink); }
.bc__chipdot.bc-coral { fill: var(--md-coral); }
.bc__chipdot.bc-blue { fill: var(--md-blue-700); }
.bc__feed { fill: none; stroke: var(--md-grey-300); stroke-width: 1.5; stroke-dasharray: 4 4; transition: opacity .3s; }
.bc__card { fill: var(--md-paper); stroke: var(--md-rule); stroke-width: 1.5; }
.bc__title { fill: var(--md-ink); font-family: var(--md-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; }
.bc__livedot { fill: var(--md-coral); }
.bc__live { fill: var(--md-coral); font-family: var(--md-font-sans); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; }
.bc__rowlbl { fill: var(--md-grey-500); font-family: var(--md-font-sans); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; }
.bc__track { stroke: var(--md-rule); stroke-width: 2; stroke-linecap: round; }
.bc__fill.bc-coral { fill: var(--md-coral); }
.bc__fill.bc-blue { fill: var(--md-blue-700); }
.bc__knob { fill: #fff; stroke: var(--md-ink); stroke-width: 2.5; }
.bc__pulse { filter: drop-shadow(0 0 5px rgba(255, 98, 73, 0.5)); }
.bc__hand { fill: var(--md-coral); font-family: var(--md-font-hand); font-size: 22px; }
.bc__caption { fill: var(--md-grey-500); font-family: var(--md-font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; }
.pv__spark { fill: none; stroke: var(--md-coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv__sparkfill { fill: rgba(255, 98, 73, 0.10); }
.pv__sparkdot { fill: var(--md-coral); }

/* ---- Pillar with branded SVG icon ---- */
.pillar--icon { gap: 14px; }
.pillar--icon .pillar__icon {
  width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  transition: transform .4s var(--md-ease-out);
}
.pillar--icon:hover .pillar__icon { transform: rotate(-4deg) scale(1.04); }
.pillar--icon .pillar__icon img { width: 100%; height: auto; }
.pillar--icon .pillar__icon svg { max-width: 100%; max-height: 100%; display: block; }
.pillar--icon .pillar__viz { display: none; }
@keyframes booksSway {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.2deg);  }
}

/* ---- Nutrition strip ---- */
.nutri-strip {
  background: var(--md-bg-warm);
  padding: 96px 0 72px;
  position: relative;
}
.nutri-strip__inner {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 80px; align-items: center;
}
.nutri-strip__viz {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
.nutri-strip__viz img {
  width: 80%; height: auto;
  animation: nutriRotate 60s linear infinite;
  transform-origin: center center;
  filter: drop-shadow(0 16px 40px rgba(255, 98, 73, 0.18));
}
@keyframes nutriRotate {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
.nutri-strip h3 {
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 300; letter-spacing: -0.04em;
  line-height: 1.02; margin: 18px 0 24px;
  color: var(--md-ink);
}
.nutri-strip h3 em { color: var(--md-coral); font-style: italic; }
.nutri-strip p {
  font-size: 16px; line-height: 1.65;
  color: var(--md-grey-500); margin: 0 0 18px;
  max-width: 540px;
}
.nutri-strip__list {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: flex; flex-direction: column; gap: 12px;
}
.nutri-strip__list li {
  font-size: 14.5px; line-height: 1.55;
  color: var(--md-ink); padding-left: 22px;
  position: relative;
}
.nutri-strip__list li::before {
  content: ""; position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 2px; background: var(--md-coral);
}
@media (max-width: 880px) {
  .nutri-strip__inner { grid-template-columns: 1fr; gap: 40px; padding: 0; }
  .nutri-strip { padding: 64px 0; }
}

/* ============================================================
   Hero backdrop — pinstripes + books graphism + orbiting squares
   ============================================================ */

.hero-backdrop {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
  z-index: 0;
}

/* Vertical pinstripe field — 14 thin lines at irregular intervals */
.hero-backdrop__pins {
  position: absolute; inset: 0;
  opacity: 0.5;
}
.hero-backdrop__pins span {
  position: absolute;
  top: -10%; height: 120%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0,
    rgba(0,0,0,0.08) 18%,
    rgba(0,0,0,0.08) 82%,
    transparent 100%);
  left: calc((var(--i) * 7%) + 2%);
  transform: translateY(0);
  animation: pinDrift 14s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.7s);
}
.hero-backdrop__pins span:nth-child(7n+3) {
  background: linear-gradient(to bottom,
    transparent 0,
    rgba(255, 98, 73, 0.22) 18%,
    rgba(255, 98, 73, 0.22) 82%,
    transparent 100%);
  width: 2px;
}
@keyframes pinDrift {
  0%, 100% { transform: translateY(-12px); }
  50%      { transform: translateY(12px);  }
}

/* Large books graphism — drifts slowly in the corner */
.hero-backdrop__books {
  position: absolute;
  top: -10%;
  right: -8%;
  width: 540px; height: 540px;
  opacity: 0.10;
  animation: booksDrift 24s ease-in-out infinite;
}
.hero-backdrop__books img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 48px rgba(0,0,0,0.06));
}
@keyframes booksDrift {
  0%, 100% { transform: rotate(-3deg) translate(0, 0)    scale(1);    }
  50%      { transform: rotate(3deg)  translate(-18px, 14px) scale(1.04); }
}
@media (max-width: 980px) {
  .hero-backdrop__books { width: 360px; height: 360px; opacity: 0.07; }
}

/* Orbiting coral / blue / grey squares */
.hero-backdrop__squares {
  position: absolute; inset: 0;
}
.hero-backdrop__sq {
  position: absolute;
  border-radius: 2px;
  animation-name: sqOrbit;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  opacity: 0.85;
}
.hero-backdrop__sq.tone-c { background: var(--md-coral); }
.hero-backdrop__sq.tone-b { background: var(--md-blue);  }
.hero-backdrop__sq.tone-g { background: var(--md-grey-300); }
@keyframes sqOrbit {
  0%   { transform: translate(0, 0)        rotate(0deg)  scale(0.85); opacity: 0.4; }
  25%  { transform: translate(18px, -10px) rotate(45deg) scale(1.05); opacity: 0.95; }
  50%  { transform: translate(8px, 14px)   rotate(90deg) scale(0.9);  opacity: 0.7;  }
  75%  { transform: translate(-12px, 4px)  rotate(135deg) scale(1.0); opacity: 0.85; }
  100% { transform: translate(0, 0)        rotate(180deg) scale(0.85); opacity: 0.4; }
}

/* A single thick coral diagonal that drifts across very slowly */
.hero-backdrop__sweep {
  position: absolute;
  top: 60%; left: -200px;
  width: 360px; height: 6px;
  background: var(--md-coral);
  opacity: 0.10;
  transform: rotate(-12deg);
  animation: sweepDrift 18s linear infinite;
}
@keyframes sweepDrift {
  from { transform: rotate(-12deg) translateX(0);    }
  to   { transform: rotate(-12deg) translateX(140vw); }
}

/* ============================================================
   Word marquee — horizontal scrolling band of brand keywords.
   ============================================================ */

.word-marquee {
  position: relative;
  background: var(--md-bg);
  border-top: 1px solid var(--md-rule);
  border-bottom: 1px solid var(--md-rule);
  overflow: hidden;
  padding: 18px 0;
}
.word-marquee--dark {
  background: var(--md-ink);
  border-color: var(--md-rule-dark);
}
.word-marquee::before,
.word-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 120px; z-index: 2; pointer-events: none;
}
.word-marquee::before { left: 0;
  background: linear-gradient(90deg,  var(--md-bg), transparent); }
.word-marquee::after { right: 0;
  background: linear-gradient(270deg, var(--md-bg), transparent); }
.word-marquee--dark::before { background: linear-gradient(90deg,  var(--md-ink), transparent); }
.word-marquee--dark::after { background: linear-gradient(270deg, var(--md-ink), transparent); }

.word-marquee__track {
  display: flex; align-items: center; gap: 38px;
  width: max-content;
  animation: wordMarqueeScroll 42s linear infinite;
  padding: 0 20px;
}
.word-marquee__track span {
  display: inline-flex; align-items: center; gap: 38px;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--md-grey-500);
  white-space: nowrap;
}
.word-marquee--dark .word-marquee__track span { color: rgba(255,255,255,0.6); }
.word-marquee__track span.is-coral { color: var(--md-coral); }
.word-marquee__track span em {
  font-style: normal;
  color: var(--md-coral);
}
@keyframes wordMarqueeScroll {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   Evolução do aluno — the signature journey piece (dark)
   ============================================================ */
.evolution {
  background: var(--md-ink); color: #fff;
  padding: 92px 0 104px; position: relative; overflow: hidden;
}
.evolution__head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.evolution__head .eyebrow { justify-content: center; color: rgba(255,255,255,0.55); }
.evolution__head .eyebrow::before { background: var(--md-coral); }
.evolution__head h2 {
  color: #fff; margin: 14px 0 16px;
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 300;
  letter-spacing: -0.02em; line-height: 1.05;
}
.evolution__head h2 em { font-style: italic; color: var(--md-coral); font-weight: 700; }
.evolution__head .lede {
  color: rgba(255,255,255,0.72); font-size: 17px; line-height: 1.6; margin: 0;
}

.evolution__stage { position: relative; max-width: 1080px; margin: 0 auto; }
.ej__svg { width: 100%; height: auto; display: block; overflow: visible; }

.ej__track {
  fill: none; stroke: rgba(255,255,255,0.14);
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.ej__fill {
  fill: none; stroke: var(--md-coral);
  stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 9px rgba(255, 98, 73, 0.55));
}
.ej__node {
  fill: var(--md-ink); stroke: rgba(255,255,255,0.32); stroke-width: 2.5;
  transition: fill .35s var(--md-ease-out), stroke .35s var(--md-ease-out);
}
.ej__node.is-on {
  fill: var(--md-coral); stroke: var(--md-coral);
  filter: drop-shadow(0 0 7px rgba(255, 98, 73, 0.6));
}
.ej__node--final.is-on { filter: drop-shadow(0 0 12px rgba(255, 98, 73, 0.85)); }
.ej__halo { fill: rgba(255, 98, 73, 0.28); }
.ej__marker { fill: #fff; stroke: var(--md-coral); stroke-width: 3;
  filter: drop-shadow(0 0 10px rgba(255, 98, 73, 0.95)); }

.ej__label {
  fill: rgba(255,255,255,0.42);
  font-family: var(--md-font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: fill .35s var(--md-ease-out);
}
.ej__label.is-on { fill: #fff; }
.ej__label--final { fill: rgba(255, 98, 73, 0.7); }
.ej__label--final.is-on { fill: var(--md-coral); }

.ej__caption {
  text-align: center; margin: 14px auto 0; min-height: 1.4em;
  font-family: var(--md-font-hand); color: var(--md-coral);
  font-size: clamp(26px, 3vw, 38px); line-height: 1.1; font-weight: 700;
}

@media (max-width: 720px) {
  .ej__label { font-size: 18px; }
  .evolution { padding: 64px 0 76px; }
}

/* ---- Manifesto "cada hora tem um destino" viz ---- */
.destiny { position: relative; width: 100%; height: 100%; }.destiny svg { width: 100%; height: 100%; display: block; overflow: visible; }
.destiny__path { fill: none; stroke: rgba(0, 0, 0, 0.12); stroke-width: 1.5; }
.destiny__hour { fill: #fff; stroke: var(--md-grey-300); stroke-width: 2; }
.destiny__hourlbl {
  fill: var(--md-grey-500); font-family: var(--md-font-sans);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
}
.destiny__pulse { fill: var(--md-coral); filter: drop-shadow(0 0 5px rgba(255, 98, 73, 0.6)); }
.destiny__ring { fill: none; stroke: var(--md-coral); stroke-width: 2; }
.destiny__mark { transform-box: fill-box; transform-origin: center; }
.destiny__mark path { fill: var(--md-coral); }
.destiny__dest {
  fill: var(--md-grey-500); font-family: var(--md-font-sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
}

/* ---- Effort × Avanço viz (Problem section) ---- */
.effort-gap {
  display: block; width: 100%; aspect-ratio: 4 / 5; min-height: 420px;
  background: var(--md-paper);
  border: 1px solid var(--md-rule); border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.07), 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 18px 10px 6px; box-sizing: border-box;
  overflow: hidden;
}
.effort-gap svg { width: 100%; height: 100%; display: block; }
.eg__clockface { fill: none; stroke: var(--md-ink); stroke-width: 2.5; }
.eg__hand { stroke: var(--md-ink); stroke-width: 2.5; stroke-linecap: round; }
.eg__hand--min { stroke: var(--md-coral); }
.eg__clockpin { fill: var(--md-ink); }
.eg__tally { stroke: var(--md-grey-700); stroke-width: 2.5; stroke-linecap: round; }
.eg__tally--cross { stroke: var(--md-coral); }
.eg__small {
  fill: var(--md-grey-500); font-family: var(--md-font-sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
}
.eg__axis { stroke: var(--md-grey-300); stroke-width: 1.5; }
.eg__line { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.eg__line--coral { stroke: var(--md-coral); filter: drop-shadow(0 0 6px rgba(255, 98, 73, 0.35)); }
.eg__line--blue { stroke: var(--md-blue-700); }
.eg__dot--coral { fill: var(--md-coral); }
.eg__dot--blue { fill: var(--md-blue-700); }
.eg__gap { fill: rgba(255, 98, 73, 0.07); stroke: none; }
.eg__lbl { font-family: var(--md-font-sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; }
.eg__lbl--coral { fill: var(--md-coral); }
.eg__lbl--blue { fill: var(--md-blue-700); }
.eg__gaparrow { stroke: var(--md-grey-500); stroke-width: 1.5; stroke-dasharray: 4 4; }
.eg__gaphead { fill: var(--md-grey-500); }
.eg__hand-note {
  fill: var(--md-coral); font-family: var(--md-font-hand);
  font-size: 30px;
}

/* ---- Processo: tentativa e erro → processo estruturado ---- */
.process-order { margin-top: 40px; }
.process-order svg { width: 100%; height: auto; display: block; overflow: visible; }
.po__chaos { fill: none; stroke: var(--md-grey-300); stroke-width: 2.5; stroke-linecap: round; }
.po__steps {
  fill: none; stroke: var(--md-coral); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 98, 73, 0.3));
}
.po__feed { stroke: var(--md-grey-300); stroke-width: 1.5; }
.po__chip { fill: var(--md-paper); stroke: var(--md-rule); stroke-width: 1.5; }
.po__chipdot.is-coral { fill: var(--md-coral); }
.po__chipdot.is-blue { fill: var(--md-blue-700); }
.po__chiplbl {
  fill: var(--md-grey-700); font-family: var(--md-font-sans);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
}
.po__check {
  fill: var(--md-paper); stroke: var(--md-grey-300); stroke-width: 2.5;
  transition: fill .3s var(--md-ease-out), stroke .3s var(--md-ease-out);
}
.po__check.is-on {
  fill: var(--md-coral); stroke: var(--md-coral);
  filter: drop-shadow(0 0 6px rgba(255, 98, 73, 0.5));
}
.po__steplbl {
  fill: var(--md-grey-500); font-family: var(--md-font-sans);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
}
.po__pulse { filter: drop-shadow(0 0 7px rgba(255, 98, 73, 0.55)); }
.po__note { font-family: var(--md-font-hand); font-size: 30px; }
.po__note--grey { fill: var(--md-grey-500); }
.po__note--coral { fill: var(--md-coral); }
@media (max-width: 720px) {
  .po__chiplbl { font-size: 16px; }
  .po__steplbl { font-size: 16px; }
}

/* ---- Direct edit overrides (preserve manual tweaks) ---- */