/* ============================================================================
   DENTISTA AREQUIPA — Endodoncia Regenerativa  ·  edge-optimized rebuild
   Scrolling down IS healing the tooth.

   Palette (unchanged from v1, tightened):
     abyss   #0c1c22   ground / deepest scrim
     slate   #16323a   below-the-fold surface
     cyan    #35e0e6   rim light, the single "clinical" accent
     ivory   #eef2ee   text
     crimson #e0483a   RESERVED for the ANDAMIO (scaffold) zone only

   Everything the engine animates is driven through custom properties
   (--z, --m, --seq, --cap-o …) so the same rule set works in both the
   vertical desktop HUD and the horizontal mobile HUD without JS branching.
   ========================================================================= */

/* ---------- Faces --------------------------------------------------------
   WORDPRESS PORT. The standalone build shipped its own three faces (Archivo
   display + Plex Sans body + Plex Mono, 44,364 B subset). Inside dentistaarequipa27
   the theme already loads and PRELOADS Manrope + Fira Sans on every page, so
   shipping a second sans pair would mean two stacks on the wire for one page.
   Resolved by splitting the difference along what each face actually does:

     display  -> Manrope   (theme face, already preloaded — brand consistency)
     body     -> Fira Sans (theme face, already loaded)
     mono     -> Plex Mono (KEPT, 5,428 B — the HUD's tabular technical
                 readouts, chips and timecode are the cinematic signature and
                 the theme ships no monospace at all)

   Net: 44,364 B -> 5,428 B of page-specific font payload, one sans stack.
   Archivo/Plex Sans remain in the standalone app; do not re-add them here. */
@font-face { font-family: "Plex Mono"; src: url("../assets/fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --abyss:   #0c1c22;
  --ink:     #061115;
  --slate:   #16323a;
  --slate-2: #1d3c45;
  --slate-3: #234852;
  --cyan:    #35e0e6;
  --cyan-dim: rgba(53, 224, 230, 0.55);
  --cyan-08: rgba(53, 224, 230, 0.08);
  --mint:    #7af0c8;
  --ivory:   #eef2ee;
  --ivory-72: rgba(238, 242, 238, 0.72);
  --ivory-46: rgba(238, 242, 238, 0.46);
  --ivory-28: rgba(238, 242, 238, 0.28);
  --ivory-14: rgba(238, 242, 238, 0.14);
  --ivory-07: rgba(238, 242, 238, 0.07);
  --crimson: #e0483a;
  --crimson-soft: #ff8a78;   /* lifted from #f2705f: it is used as TEXT over film */

  --display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --body: "Fira Sans", system-ui, -apple-system, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* engine-driven */
  --z: 0;      /* zone progress 0..1 (rail spine fill) */
  --m: 0;      /* madurez radicular 0..1 */
  --seq: 0;    /* frame-sequence coverage 0..1 */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gut: clamp(20px, 4.4vw, 64px);
  --maxw: 1180px;
}

/* WORDPRESS PORT. The standalone build reset margin/padding on `*`. Here the
   same document also carries theme-rendered blocks (breadcrumbs, silo nav, the
   booking wizard) whose spacing comes from WP block styles and components.css,
   and a universal reset flattens all of it. `:where()` has ZERO specificity, so
   this still beats the UA sheet (author styles always do) while losing to every
   theme/WP/app rule that sets a margin on purpose — which is exactly the split
   we want. box-sizing stays universal; it is what WP assumes anyway. */
* { box-sizing: border-box; }
:where(h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dd, figure, blockquote, form, fieldset) { margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  background: var(--abyss);
  color: var(--ivory);
  font-family: var(--body);
  /* WORDPRESS PORT. The standalone document inherited the UA default
     `line-height: normal`; dentistaarequipa27's theme.json sets a root line-height of
     1.6, which every HUD element then inherited. Measured at 500px: it pushed
     .hud-phase from top 16px to 36px, so the zone label's box ran from 70-84px
     straight through the phase rail at 66-77px — the "ANDAMIO" caption sat on
     top of the rail's last node. The HUD is a fixed-geometry composition, so
     it needs the metric it was designed against; every below-fold text sets
     its own line-height explicitly and is unaffected. */
  line-height: normal;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* WORDPRESS PORT — neutralise WP's flow-layout spacing on this page.
   WP emits `:root :where(.is-layout-flow) > * { margin-block-start: 1.25rem }`
   (specificity 0,1,0). Inside a CSS grid a margin offsets the item within its
   grid area, so every stat cell but the first sat 20px low and 20px short —
   measured 145px against the first cell's 165px, where the standalone build
   has four equal 139px cells.

   Specificity is matched exactly (`:root` + `:where()` + `*` = 0,1,0) and this
   rule is placed HERE, near the top, on purpose:
     · it is later in the cascade than WP's inline block CSS (measured: WP's
       block styles end at head byte 40,072, this stylesheet loads at 41,611),
       so it beats WP at equal specificity;
     · it is EARLIER than every app rule below, so `.phase-tag { margin-top:
       18px }` and `.cta-facts { margin-top: 30px }` still beat IT.
   Putting the same rule at the end of the file inverted that second half and
   collapsed the app's own spacing. Order is the whole mechanism here. */
:root :where(.intro-inner, .phases-head, .phase-grid, .phase-card, .trust-grid, .cta-inner, .cta-inner > div) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Same rule, different victims. The film's own top-level elements are direct
   children of `.wp-site-blocks`, which is `is-layout-flow` too — so the veil,
   the HUD, the hairline and the stage each picked up a 20px top margin. On a
   POSITION:FIXED element a margin still offsets the box, so the whole HUD was
   pushed 20px down its own viewport: measured #hud at top 20px instead of 0,
   which dropped the zone label (70-82px) onto the phase rail (66-77px) and put
   "ANDAMIO" on top of the rail's last node. Id selectors (1,0,0) beat WP's
   0,1,0 outright; none of these four carry a margin of their own. */
#veil, #progressHairline, #hud, #film-stage { margin-block-start: 0; margin-block-end: 0; }

em { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ======================================================================
   1 · BOOT VEIL
   Not a gate. It exists only to prevent a flash of empty canvas, and it
   lifts the instant the FIRST frame is drawn (~1 image, ~20 KB) rather
   than after a fraction of the sequence.
   ====================================================================== */
#veil {
  position: fixed; inset: 0; z-index: 100; background: var(--abyss);
  display: grid; place-items: center;
  transition: opacity 0.55s ease, visibility 0.55s;
}
#veil img { width: 44px; height: auto; opacity: 0.9; animation: veilpulse 1.6s ease-in-out infinite; }
@keyframes veilpulse { 0%,100% { opacity: 0.28; transform: scale(0.97); } 50% { opacity: 0.9; transform: scale(1); } }
body.ready #veil { opacity: 0; visibility: hidden; pointer-events: none; }

/* ======================================================================
   2 · FILM STAGE + THE ENTRANCE
   ====================================================================== */
#film-stage { position: relative; }
#stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: clip; background: var(--ink);
}
#film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the sequence "resolving": blurred + slightly oversized, snapping sharp */
#film {
  transform: scale(1.075);
  filter: blur(22px) saturate(0.5) contrast(1.2) brightness(0.85);
  opacity: 0;
  transition:
    transform 1.6s var(--ease-out),
    filter 1.3s var(--ease-out),
    opacity 0.7s ease;
}
body.ready #film { transform: scale(1); filter: blur(0) saturate(1) contrast(1) brightness(1); opacity: 1; }
/* the filter layer is dropped entirely once the entrance ends — a live
   filter on a canvas that repaints every rAF is expensive on mobile GPUs */
body.settled #film { filter: none; transition: none; }
/* release the hero line masks: overflow:hidden clips the h1 text-shadow into
   visible rectangles, and the mask is only needed while the lines slide in */
body.settled #hero h1 .ln { overflow: visible; }

/* one-shot cyan scan sweep across the resolving frame */
#scan {
  position: absolute; left: 0; right: 0; top: 0; height: 34vh; z-index: 4;
  pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(53,224,230,0.06) 68%, rgba(53,224,230,0.42) 99%, transparent);
}
body.ready #scan { animation: scan 1.5s var(--ease-out) 0.15s 1 both; }
@keyframes scan {
  0%   { opacity: 0; transform: translateY(-40vh); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(105vh); }
}

/* atmosphere: rim light, crimson wash, vignette, grain */
.layer { position: absolute; inset: 0; pointer-events: none; }
#rim {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(53,224,230,0.10), transparent 22%),
    linear-gradient(270deg, rgba(53,224,230,0.08), transparent 20%);
  mix-blend-mode: screen; opacity: 0.5;
}
#tintCrimson {
  z-index: 3; opacity: 0;
  background: radial-gradient(ellipse at 50% 58%, rgba(224,72,58,0.26), rgba(224,72,58,0.06) 54%, transparent 74%);
  mix-blend-mode: screen; transition: opacity 0.22s linear;
}
#vignette {
  z-index: 3;
  background: radial-gradient(ellipse at 50% 46%, transparent 46%, rgba(6,17,21,0.72) 100%);
}
#grain {
  z-index: 4; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* scrims: guarantee HUD + caption legibility over any frame */
#scrimTop {
  z-index: 4; bottom: auto; height: 46vh;
  background: linear-gradient(180deg, rgba(6,17,21,0.80), rgba(6,17,21,0.34) 46%, transparent);
}
#scrimBot {
  z-index: 4; top: auto; height: 56vh;
  background: linear-gradient(0deg, rgba(6,17,21,0.90), rgba(6,17,21,0.46) 42%, transparent);
}

/* ======================================================================
   3 · TOP HAIRLINE
   ====================================================================== */
#progressHairline {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70;
  background: linear-gradient(90deg, var(--cyan), var(--mint) 55%, var(--crimson));
  transform-origin: left; transform: scaleX(0);
  box-shadow: 0 0 14px rgba(53,224,230,0.45);
}

/* ======================================================================
   4 · HUD
   ====================================================================== */
#hud {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0; transition: opacity 0.6s ease;
}
#hud > * { opacity: 0; transform: translateY(-8px); transition: opacity 0.8s ease, transform 0.9s var(--ease-out); }
body.ready #hud > * { opacity: 1; transform: none; }
body.ready .hud-brand  { transition-delay: 0.35s; }
body.ready .hud-phase  { transition-delay: 0.45s; }
body.ready .hud-gauge  { transition-delay: 0.60s; transform: none; }
body.ready .hud-status { transition-delay: 0.70s; }
.hud-gauge, .hud-status { transform: translateY(10px); }

/* --- brand, top-left --- */
.hud-brand { position: absolute; top: 24px; left: var(--gut); display: flex; align-items: center; gap: 13px; }
.hud-logo { width: 32px; height: auto; filter: drop-shadow(0 0 12px rgba(53,224,230,0.3)); }
.hud-brand-text { display: flex; flex-direction: column; gap: 5px; padding-left: 13px; border-left: 1px solid var(--ivory-14); }
.hud-brand-name { font-size: 10.5px; letter-spacing: 0.26em; color: var(--ivory); }
.hud-brand-dept { font-size: 8px; letter-spacing: 0.26em; color: var(--ivory-46); }

/* --- phase readout + timeline spine, top-right --- */
.hud-phase { position: absolute; top: 22px; right: var(--gut); text-align: right; }
.hud-phase-count { display: flex; align-items: baseline; justify-content: flex-end; gap: 1px; line-height: 1; }
#hudPhaseNum {
  font-family: var(--display); font-weight: 600; font-size: 40px;
  letter-spacing: -0.03em; color: var(--cyan); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(53,224,230,0.35); transition: color 0.4s ease, text-shadow 0.4s ease;
}
.hud-phase-total { font-size: 13px; letter-spacing: 0.08em; color: var(--ivory-28); }
.hud-phase-zone {
  font-size: 9.5px; letter-spacing: 0.34em; color: var(--cyan);
  margin-top: 7px; transition: opacity 0.35s ease, color 0.4s ease; min-height: 12px;
}
.hud-phase-zone.fading { opacity: 0; }

.hud-rail {
  list-style: none; margin-top: 18px; position: relative;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
  padding-right: 20px;
}
.hud-rail::before {
  content: ""; position: absolute; right: 5px; top: 5px; bottom: 5px;
  width: 1px; background: var(--ivory-14);
}
/* spine fill — a pseudo-element so the <ol> keeps only <li> children */
.hud-rail::after {
  content: ""; position: absolute; right: 5px; top: 5px; width: 1px;
  height: calc(var(--z) * (100% - 10px));
  background: linear-gradient(180deg, var(--cyan), var(--mint));
  box-shadow: 0 0 9px var(--cyan-dim);
}
.hud-rail li {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ivory-28); position: relative; transition: color 0.4s ease;
  white-space: nowrap;
}
.hud-rail li::after {
  content: ""; position: absolute; right: -20px; top: 50%;
  width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  border: 1px solid var(--ivory-14); background: var(--ink);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s var(--ease-out);
}
.hud-rail li::before {
  content: ""; position: absolute; right: -15.5px; top: 50%;
  width: 2px; height: 2px; margin-top: -1px; border-radius: 50%;
  background: transparent; transition: background 0.35s ease, box-shadow 0.35s ease;
}
.hud-rail li.done { color: var(--ivory-46); }
.hud-rail li.done::after { border-color: var(--mint); }
.hud-rail li.done::before { background: var(--mint); }
.hud-rail li.active { color: var(--cyan); }
.hud-rail li.active::after { border-color: var(--cyan); box-shadow: 0 0 12px var(--cyan-dim); transform: scale(1.25); }
.hud-rail li.active::before { background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }

/* the scaffold zone is the only place crimson is allowed */
#hud.crimson #hudPhaseNum { color: var(--crimson-soft); text-shadow: 0 0 30px rgba(224,72,58,0.4); }
#hud.crimson .hud-phase-zone { color: var(--crimson-soft); }
#hud.crimson .hud-rail li.active { color: var(--crimson-soft); }
#hud.crimson .hud-rail li.active::after { border-color: var(--crimson); box-shadow: 0 0 12px rgba(224,72,58,0.6); }
#hud.crimson .hud-rail li.active::before { background: var(--crimson); box-shadow: 0 0 7px var(--crimson); }

/* --- madurez radicular gauge, bottom-right --- */
.hud-gauge { position: absolute; bottom: 28px; right: var(--gut); display: flex; align-items: flex-end; gap: 13px; }
.hud-gauge-label span { display: block; }
.hud-gauge-label { font-size: 8px; letter-spacing: 0.24em; color: var(--ivory-46); text-align: right; line-height: 1.7; padding-bottom: 1px; }
.hud-gauge-track {
  width: 7px; height: 132px; position: relative;
  background: var(--ivory-07); border: 1px solid var(--ivory-14);
}
/* quartile ticks */
.hud-gauge-track::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--ivory-14) 0 1px, transparent 1px 25%);
}
.hud-gauge-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--m) * 100%);
  background: linear-gradient(180deg, var(--mint), var(--cyan));
  box-shadow: 0 0 14px var(--cyan-dim);
}
.hud-gauge-fill::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: -1px; height: 2px;
  background: var(--ivory); box-shadow: 0 0 10px var(--cyan); opacity: var(--m);
}
.hud-gauge-pct { font-size: 10px; letter-spacing: 0.06em; color: var(--ivory-72); width: 34px; padding-bottom: 0; }

/* --- sequence + timecode status, bottom-left --- */
.hud-status { position: absolute; bottom: 30px; left: var(--gut); display: flex; flex-direction: column; gap: 9px; }
.hud-tc { font-size: 9px; letter-spacing: 0.24em; color: var(--ivory-46); }
.hud-tc b { font-weight: 400; color: var(--ivory-72); }
.hud-seq { display: flex; align-items: center; gap: 9px; transition: opacity 0.7s ease; }
.hud-seq.loaded { opacity: 0; }
.hud-seq-track { width: 62px; height: 1px; background: var(--ivory-14); position: relative; }
.hud-seq-track i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--seq)); background: var(--cyan); }
.hud-seq-label { font-size: 8px; letter-spacing: 0.22em; color: var(--ivory-28); }

/* ======================================================================
   5 · HERO
   ====================================================================== */
.overlay { position: absolute; inset: 0; pointer-events: none; }
#hero {
  z-index: 8; display: flex; flex-direction: column;
  /* the title crosses the tooth's bright crown; this keeps it readable
     without darkening the whole frame, and fades out with the hero */
  background: radial-gradient(ellipse 74% 54% at 50% 47%, rgba(6,17,21,0.70), rgba(6,17,21,0.40) 60%, transparent 84%);
  align-items: center; justify-content: center; text-align: center;
  padding: 0 var(--gut);
}
.hero-kicker { font-size: 10px; letter-spacing: 0.42em; color: var(--cyan); margin-bottom: 30px; }
.hero-kicker::after { content: ""; display: block; width: 44px; height: 1px; margin: 16px auto 0; background: var(--cyan-dim); }
#hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(40px, 8.4vw, 112px); line-height: 0.94; letter-spacing: -0.032em;
  color: var(--ivory); text-shadow: 0 2px 16px rgba(6,17,21,0.62);
}
#hero h1 .ln { display: block; overflow: hidden; }
#hero h1 .ln > span { display: block; transform: translateY(110%); transition: transform 1.05s var(--ease-out); }
body.ready #hero h1 .ln:nth-child(1) > span { transform: none; transition-delay: 0.18s; }
body.ready #hero h1 .ln:nth-child(2) > span { transform: none; transition-delay: 0.30s; }
#hero h1 em { color: var(--cyan); font-weight: 600; text-shadow: 0 0 56px rgba(53,224,230,0.42); }
.hero-sub {
  margin-top: 28px; max-width: 46ch; font-size: clamp(14.5px, 1.35vw, 16.5px);
  line-height: 1.6; color: var(--ivory-72); text-shadow: 0 1px 10px rgba(6,17,21,0.7);
}
.hero-scroll { margin-top: clamp(30px, 5vh, 48px); font-size: 9px; letter-spacing: 0.38em; color: var(--ivory-46); }
.hero-arrow { display: block; margin-top: 14px; font-size: 15px; color: var(--cyan); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(8px); opacity: 1; } }
.hero-kicker, .hero-sub, .hero-scroll { opacity: 0; transition: opacity 0.9s ease; }
body.ready .hero-kicker { opacity: 1; transition-delay: 0.1s; }
body.ready .hero-sub    { opacity: 1; transition-delay: 0.55s; }
body.ready .hero-scroll { opacity: 1; transition-delay: 0.75s; }

/* ======================================================================
   6 · PINNED PER-ZONE CAPTIONS
   ====================================================================== */
.caption { position: absolute; z-index: 9; }
.caption::after {
  content: ""; position: absolute; z-index: -1;
  inset: -30px -140px -34px -30px;
  background: linear-gradient(96deg, rgba(6,17,21,0.80), rgba(6,17,21,0.58) 46%, transparent 88%);
}
.caption {
  left: var(--gut); bottom: clamp(104px, 18vh, 184px);
  width: min(408px, 32vw);   /* >=900px only; must clear the centred tooth (left edge x~498 @1440) */
  opacity: 0; pointer-events: none;
  padding-left: 22px;
}
.caption::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  background: linear-gradient(180deg, var(--cyan), transparent);
  transform: scaleY(var(--cap-s, 0)); transform-origin: top;
}
.caption-idx { font-size: 9.5px; letter-spacing: 0.3em; color: var(--cyan); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.caption-num {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  letter-spacing: 0; color: var(--cyan); font-variant-numeric: tabular-nums;
}
.caption h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(29px, 3.4vw, 46px); line-height: 1.0; letter-spacing: -0.028em;
  color: var(--ivory); text-shadow: 0 2px 18px rgba(6,17,21,0.7); margin-bottom: 15px;
  text-wrap: balance;
}
.caption-cue {
  font-size: clamp(14px, 1.35vw, 16px); line-height: 1.58; color: var(--ivory-72);
  max-width: 42ch; text-shadow: 0 1px 10px rgba(6,17,21,0.75);
}
.caption-chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 7px; }
.caption-chips span {
  font-size: 8px; letter-spacing: 0.2em; color: var(--ivory-72);
  border: 1px solid var(--ivory-14); background: rgba(6,17,21,0.5);
  padding: 6px 10px; backdrop-filter: blur(3px);
}
.caption-crimson::before { background: linear-gradient(180deg, var(--crimson), transparent); }
.caption-crimson .caption-idx, .caption-crimson .caption-num { color: var(--crimson-soft); }
.caption-crimson .caption-chips span { border-color: rgba(224,72,58,0.4); color: var(--crimson-soft); }

/* ======================================================================
   7 · BELOW THE FOLD
   ====================================================================== */
#content { position: relative; z-index: 20; background: var(--slate); }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.eyebrow { font-size: 9.5px; letter-spacing: 0.34em; color: var(--cyan); display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--cyan); flex: none; }

/* --- intro --- */
.intro { padding: clamp(86px, 13vh, 152px) var(--gut) clamp(58px, 9vh, 100px); border-bottom: 1px solid var(--ivory-14); }
.intro-inner { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 60px); }
.intro-eyebrow { grid-column: 1 / -1; margin-bottom: 4px; }
.intro-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(27px, 3.7vw, 46px); line-height: 1.08; letter-spacing: -0.028em;
  color: var(--ivory); text-wrap: balance;
}
.intro-title b { font-weight: 600; color: var(--cyan); }
.intro-lead { font-size: clamp(15.5px, 1.5vw, 17.5px); line-height: 1.68; color: var(--ivory-72); }
@media (min-width: 900px) {
  .intro-inner { grid-template-columns: 1.05fr 1fr; align-items: start; }
  .intro-lead { padding-top: 8px; }
}

/* --- phase cards --- */
.phases { padding: clamp(56px, 8vh, 96px) var(--gut) clamp(20px, 3vh, 34px); }
.phases-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vh, 44px); }
.phases-head h2 { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -0.02em; }
.phase-grid {
  list-style: none; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--ivory-14); border: 1px solid var(--ivory-14);
}
.phase-card {
  background: var(--slate); padding: 26px 22px 24px; position: relative;
  display: flex; flex-direction: column; min-height: 306px;
  transition: background 0.35s ease;
}
.phase-card::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--cyan); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.phase-card:hover { background: var(--slate-2); }
.phase-card:hover::before { transform: scaleX(1); }
.phase-num { font-size: 11px; letter-spacing: 0.16em; color: var(--cyan); padding-bottom: 15px; margin-bottom: 18px; border-bottom: 1px solid var(--ivory-14); }
.phase-card h3 { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.12; letter-spacing: -0.02em; color: var(--ivory); margin-bottom: 11px; }
/* body copy only: .phase-num and .phase-tag are also <p>, and letting them
   take flex:1 makes them absorb leftover height and knock the <h3>s out of
   alignment across the row (measured 21.6px of drift) */
/* WORDPRESS PORT. Was `p:not([class])`. The card body is now an editor block,
   and the moment someone picks a font size in the inspector WP stamps a
   `has-*-font-size` class on it — which silently dropped the rule and let the
   `flex: 1` alignment fix regress. Exclude the two labelled paragraphs by name
   instead of requiring the body to have no class at all. */
.phase-card > p:not(.phase-num):not(.phase-tag) { font-size: 13.5px; line-height: 1.6; color: var(--ivory-72); flex: 1; }
.phase-tag { margin-top: 18px; font-size: 8px; letter-spacing: 0.18em; line-height: 1.7; color: var(--ivory-46); }
.phase-card-crimson::before { background: var(--crimson); transform: scaleX(1); }
.phase-card-crimson .phase-num,
.phase-card-crimson .phase-tag { color: var(--crimson-soft); }

/* --- stat strip --- */
.trust { padding: clamp(34px, 5vh, 56px) var(--gut) clamp(56px, 8vh, 96px); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ivory-14); border: 1px solid var(--ivory-14); }
.trust-grid > div { background: var(--slate); padding: 34px 18px 30px; text-align: center; position: relative; }
.trust-grid > div::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 2px; background: var(--cyan-dim); }
.trust-num { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.2vw, 42px); line-height: 1; color: var(--cyan); margin-bottom: 13px; letter-spacing: -0.03em; }
.trust-key { font-size: 8px; letter-spacing: 0.18em; color: var(--ivory-46); line-height: 1.75; }

/* --- CTA --- */
.cta { padding: clamp(76px, 12vh, 136px) var(--gut) clamp(46px, 6vh, 72px); background: var(--abyss); border-top: 1px solid var(--ivory-14); }
.cta-inner { display: grid; grid-template-columns: 1fr; gap: clamp(38px, 5vw, 72px); align-items: start; }
.cta-title {
  font-family: var(--display); font-weight: 700; margin-top: 24px;
  font-size: clamp(28px, 4.1vw, 48px); line-height: 1.04; letter-spacing: -0.032em;
  color: var(--ivory); margin-bottom: 20px; text-wrap: balance;
}
.cta-lead { font-size: 16px; line-height: 1.62; color: var(--ivory-72); max-width: 46ch; }
.cta-facts { list-style: none; margin-top: 30px; display: flex; flex-direction: column; gap: 11px; }
.cta-facts li { font-size: 8.5px; letter-spacing: 0.2em; color: var(--ivory-46); display: flex; align-items: center; gap: 11px; }
.cta-facts li::before { content: ""; width: 5px; height: 5px; flex: none; background: var(--cyan); }

.cta-panel { border: 1px solid var(--ivory-14); background: var(--slate); padding: clamp(24px, 3vw, 36px); }
.cta-panel-head { font-size: 8.5px; letter-spacing: 0.24em; color: var(--ivory-46); padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--ivory-14); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
#citaForm label { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory-46); }
.form-full { margin-bottom: 22px; }
#citaForm input, #citaForm select {
  font-family: var(--body); font-size: 15px; letter-spacing: 0; text-transform: none;
  color: var(--ivory); background: rgba(238,242,238,0.045);
  border: 1px solid var(--ivory-14); padding: 14px 15px; border-radius: 0; outline: none;
  transition: border-color 0.25s, background 0.25s;
  width: 100%;
}
#citaForm input::placeholder { color: var(--ivory-28); }
#citaForm input:focus, #citaForm select:focus { border-color: var(--cyan); background: var(--cyan-08); }
#citaForm select { color: var(--ivory-72); appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
#citaForm option { background: var(--slate); color: var(--ivory); }

#citaBtn {
  width: 100%; margin-top: 4px; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: 0.005em;
  color: var(--abyss); background: var(--cyan);
  border: 1px solid var(--cyan); padding: 17px 20px;
  transition: box-shadow 0.25s, transform 0.12s, background 0.25s;
}
#citaBtn:hover { box-shadow: 0 0 34px var(--cyan-dim); background: var(--mint); border-color: var(--mint); }
#citaBtn:active { transform: translateY(1px); }
#citaBtn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.form-note { margin-top: 20px; font-size: 8.5px; letter-spacing: 0.16em; line-height: 2; color: var(--ivory-46); }
.form-note.confirmed { color: var(--cyan); }

.cta-foot {
  max-width: var(--maxw); margin: clamp(56px, 8vh, 88px) auto 0; padding-top: 22px;
  border-top: 1px solid var(--ivory-14);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 8px; letter-spacing: 0.2em; color: var(--ivory-46);
}
@media (min-width: 900px) { .cta-inner { grid-template-columns: 1fr 1fr; } }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ======================================================================
   8 · RESPONSIVE
   Mobile HUD is a different composition, not a hidden desktop one:
   horizontal spine under the brand row, horizontal gauge pinned to the
   bottom edge, and the caption stacked directly above it. Nothing sits
   over the vertical middle of the frame, where the tooth lives.
   ====================================================================== */
@media (max-width: 1080px) { .phase-card { min-height: 0; } }
@media (max-width: 900px)  { .phase-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 899.98px) {
  :root { --gut: 20px; }

  .hud-brand { top: 18px; }
  .hud-brand-text { display: none; }
  .hud-phase { top: 16px; }
  #hudPhaseNum { font-size: 30px; }
  .hud-phase-zone { font-size: 8.5px; letter-spacing: 0.26em; margin-top: 4px; }

  /* spine goes horizontal, full width, under the brand row */
  .hud-rail {
    position: fixed; top: 66px; left: var(--gut); right: var(--gut);
    flex-direction: row; justify-content: space-between; align-items: center;
    gap: 0; margin: 0; padding: 0 0 0 0; height: 11px;
  }
  .hud-rail::before { right: 5px; left: 5px; top: 5px; bottom: auto; width: auto; height: 1px; }
  .hud-rail::after {
    right: auto; left: 5px; top: 5px; width: calc(var(--z) * (100% - 10px)); height: 1px;
    background: linear-gradient(90deg, var(--cyan), var(--mint));
  }
  .hud-rail li { font-size: 0; letter-spacing: 0; width: 11px; height: 11px; }
  .hud-rail li::after { right: 0; top: 0; margin-top: 0; }
  .hud-rail li::before { right: 4.5px; top: 4.5px; margin-top: 0; }

  /* gauge goes horizontal, pinned to the bottom edge */
  .hud-gauge {
    left: var(--gut); right: var(--gut); bottom: 18px;
    align-items: center; gap: 11px;
  }
  .hud-gauge-label { font-size: 7.5px; letter-spacing: 0.2em; line-height: 1.2; text-align: left; padding: 0; }
  .hud-gauge-label span { display: inline; }
  .hud-gauge-track { flex: 1; width: auto; height: 5px; }
  .hud-gauge-track::after { background: repeating-linear-gradient(90deg, var(--ivory-14) 0 1px, transparent 1px 25%); }
  .hud-gauge-fill { top: 0; bottom: 0; right: auto; height: auto; width: calc(var(--m) * 100%);
    background: linear-gradient(90deg, var(--cyan), var(--mint)); }
  .hud-gauge-fill::after { left: auto; right: -1px; top: -2px; bottom: -2px; height: auto; width: 2px; }
  .hud-gauge-pct { width: 30px; text-align: right; font-size: 9px; }

  .hud-status { bottom: 44px; left: var(--gut); }
  .hud-tc { font-size: 8px; }

  /* caption: full width, above the gauge, never beside the tooth */
  .caption { left: var(--gut); right: var(--gut); width: auto; bottom: 74px; padding-left: 16px; }
  .caption::after {
    inset: -26px calc(-1 * var(--gut) - 4px) -30px calc(-1 * var(--gut));
    /* must cover the WHOLE caption block: the eyebrow sits at its top edge,
       where a gradient that has already faded leaves 8px mono text on bare film */
    background: linear-gradient(0deg, rgba(6,17,21,0.95), rgba(6,17,21,0.88) 72%, rgba(6,17,21,0.60) 93%, transparent);
  }
  .caption h2 { font-size: clamp(26px, 8vw, 36px); }
  .caption-cue { font-size: 14px; max-width: none; }
  .caption-chips { margin-top: 14px; }

  #scrimBot { height: 66vh; background: linear-gradient(0deg, rgba(6,17,21,0.95), rgba(6,17,21,0.6) 34%, transparent); }
  #scrimTop { height: 34vh; }

  #hero { background: radial-gradient(ellipse 108% 44% at 50% 46%, rgba(6,17,21,0.88), rgba(6,17,21,0.58) 62%, transparent 88%); }
  .hero-kicker { font-size: 9px; letter-spacing: 0.32em; margin-bottom: 22px; }
  .hero-sub { max-width: 34ch; }

  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .cta-foot { flex-direction: column; gap: 8px; }
}

@media (max-width: 430px) {
  .phase-grid { grid-template-columns: 1fr; }
  .hud-status { display: none; }   /* keep the lower-left clear on small phones */
}

/* ======================================================================
   9 · REDUCED MOTION
   One poster frame per zone, no scrub interpolation (the engine holds
   segments[z]); every decorative animation and the entrance are off.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  #film { transform: none !important; filter: none !important; }
  #scan { display: none; }
  #hero h1 .ln > span { transform: none !important; }
  #hud > *, .hero-kicker, .hero-sub, .hero-scroll { opacity: 1 !important; transform: none !important; }
  #veil img { animation: none; opacity: 0.9; }
}

/* ======================================================================
   12 · WORDPRESS PORT
   Rules that exist only because the below-fold sections are now editor
   blocks rather than hand-written HTML. Nothing here changes the design;
   it re-establishes what the standalone document got for free.
   ====================================================================== */

/* The wizard is the page's real CTA, inside the cinematic panel. booking.css
   is written against the theme's light-first surfaces; the panel is already
   dark, so only the panel's own inner spacing needs re-stating. */
.cta-panel .dt-wizard { margin-block-start: 0; }

/* "Motivo de consulta" — the standalone stub form's five options, kept as a
   pre-wizard choice. booking.js folds the value into the appointment note. */
.cta-motivo { margin-top: 34px; display: flex; flex-direction: column; gap: 9px; max-width: 46ch; }
.cta-motivo__label { font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory-46); }
.cta-motivo__select {
  font-family: var(--body); font-size: 15px; color: var(--ivory);
  background: var(--slate); border: 1px solid var(--ivory-28);
  padding: 13px 14px; width: 100%; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.cta-motivo__select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cta-motivo__note { font-size: 8px; letter-spacing: 0.16em; line-height: 1.7; color: var(--ivory-46); }

/* Breadcrumbs + silo nav close the page back into the /endodoncia/ pillar.
   They are theme components; this only seats them on the film's ground. */
.dt-endo-regen__chrome {
  position: relative; z-index: 20;
  background: var(--abyss); border-top: 1px solid var(--ivory-14);
  padding: clamp(30px, 5vh, 52px) var(--gut) clamp(40px, 6vh, 64px);
}

/* ======================================================================
   13 · SITE HEADER, RESTORED (2026-08-15)
   .dt-header (assets/css/base.css) is `position: sticky; z-index: 50`, and
   #hud above is `position: fixed; inset: 0; z-index: 60` — a viewport
   overlay, not tied to #film-stage's place in the document. A sticky header
   would permanently occupy the same y:0..header-height corner #hud's brand
   and phase readouts render into. Two changes, scoped to this template only
   via the dt-endo-regen body class:
     · the header goes non-sticky — it renders once, in flow, above the film,
       and scrolls fully out of view after ~1 header-height, same as any
       ordinary block. It never re-pins.
     · #hud's `top` (only — not the rest of its `inset: 0`) is pushed down by
       that same header height, so its children (all `position: absolute`
       relative to #hud) clear the header's box instead of drawing under it.
   Header heights below are MEASURED off the rendered page (not guessed):
   desktop wraps to one row, mobile (<=899.98px) wraps to two. */
body.dt-endo-regen .dt-header { position: static; }

/* RE-MEASURED 2026-08-16 after the design-system alignment retuned the
   header's type scale and spacing. Every value below is the header's rendered
   height at that width + 1px, read off getBoundingClientRect() — never guessed.

     width      header height     #hud top
     >=900          190.66          192
     800-899        190.66          192
     640-799        273.72 (@640)   275     (660-780 measure 233.66)
     581-639        273.72          275
     391-580        230.72          232
     360-390        257.72          259
     <=359          305.72          307

   The height is NON-MONOTONIC because nav ref:3 + ref:37 + the actions group
   wrap at different widths — so a single "mobile" value cannot work. The two
   values this block used to carry (198 / 268) were fitted to 1440 and 390 only
   and were already WRONG at 600-640, where a 273.72px header overlapped a HUD
   pinned at 268px. Bands below are mutually exclusive; re-measure this table if
   the header's nav or actions change. */
body.dt-endo-regen #hud { top: 192px; }

/* .hud-rail switches to `position: fixed` with a top of its own (not a child
   offset from #hud) in the mobile block above, so every mobile band must push
   it directly: 66px (its own design offset) + that band's #hud top. */
@media (max-width: 899.98px) {
  body.dt-endo-regen #hud      { top: 192px; }
  body.dt-endo-regen .hud-rail { top: 258px; }
}
@media (max-width: 799.98px) and (min-width: 581px) {
  body.dt-endo-regen #hud      { top: 275px; }
  body.dt-endo-regen .hud-rail { top: 341px; }
}
@media (max-width: 580.98px) and (min-width: 391px) {
  body.dt-endo-regen #hud      { top: 232px; }
  body.dt-endo-regen .hud-rail { top: 298px; }
}
@media (max-width: 390.98px) and (min-width: 360px) {
  body.dt-endo-regen #hud      { top: 259px; }
  body.dt-endo-regen .hud-rail { top: 325px; }
}
@media (max-width: 359.98px) {
  body.dt-endo-regen #hud      { top: 307px; }
  body.dt-endo-regen .hud-rail { top: 373px; }
}

/* `body { color: var(--ivory) }` above (section 1) is correct for the film
   and the dark below-fold sections, which have no light variant. It is NOT
   correct for the restored header/footer, which DO respond to the toggle —
   verified live: toggling to light flipped the footer's background to white
   but left nav links and the copyright line at #EEF2EE (ivory), i.e.
   near-invisible light-on-white text. Two classes beats the bare `body`
   selector regardless of stylesheet load order, so this wins in both
   themes without touching the film/content rule it coexists with. */
body.dt-endo-regen .dt-header,
body.dt-endo-regen .dt-footer {
  color: var(--dt-text);
}