/* ==========================================================================
   XHEALTH v2 — "Blanco quirúrgico"
   Hoja de estilos del rediseño. Convive con styles.css (páginas aún no
   migradas): solo la usan las páginas que la enlazan.
   ========================================================================== */

:root {
  --bg: #fbfbfa;
  --ink: #121317;
  --muted: #5b5e66;
  --dim: #9a9ca3;
  --line: #e8e8e4;
  --line-strong: #c9c9c4;
  --wash: #efefec;
  --dark: #000000;   /* bandas oscuras en negro puro (cierre, footer, plataforma) */
  --dark-muted: #a7a9b0;
  --dark-dim: #6b6e76;
  --dark-line: #4a4d55;

  /* Acento de marca: morado suave (elegido sobre el Medical Cyan #1b9aaa del
     manual). --accent para líneas y superficies pequeñas; --accent-ink, más
     oscuro, para texto pequeño; --accent-wash, tinte claro para fondos. */
  --accent: #7b61d1;
  --accent-ink: #5e47b3;
  --accent-glow: rgba(123, 97, 209, 0.55);
  --accent-wash: #e6e2f3;

  /* Tamaño único para todo el texto descriptivo del sitio (párrafos, listas, subtítulos) */
  --copy: clamp(18px, 1.5vw + 1px, 20px);
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 72px;
  --gutter: clamp(20px, 7.5vw, 96px);
  --radius: 24px;

  /* Marca de agua: sube o baja este número para que la X se note más o menos.
     0.030 apenas se intuye · 0.055 se ve claramente · 0.08 ya es protagonista. */
  --wm-opacity: 0.035;
  --wm-opacity-dark: 0.055;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.modal-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 500; hyphens: none; text-wrap: balance; letter-spacing: -0.025em; }
p { text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--bg); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 13px 16px; background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; transition: top 0.2s;
}
.skip-link:focus { top: 14px; }

.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.measure { max-width: 62ch; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 24px; border-radius: 999px;
  font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: #2a2c33; }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-paper { background: var(--bg); color: var(--ink); }
.btn-paper:hover { background: #ffffff; }
.btn-outline-dark { border-color: var(--dark-line); color: var(--bg); }
.btn-outline-dark:hover { border-color: var(--bg); }
.btn .arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.text-link {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 1px solid var(--ink);
}
.text-link .arrow { transition: transform 0.35s var(--ease); }
.text-link:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  padding: 0 clamp(20px, 3.75vw, 48px);
  background: rgba(251, 251, 250, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .logo { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin-left: -6px; }
.site-header .logo img { height: 38px; width: auto; }
.site-header .logo .lockup { display: none; height: 20px; }
.nav-main { display: flex; align-items: center; gap: 26px; justify-self: center; }
.nav-link {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.nav-link[aria-current="page"], .nav-link:hover { border-bottom-color: var(--ink); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.nav-burger { display: none; justify-self: start; width: 44px; height: 44px; margin-left: -10px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-burger span { display: block; width: 22px; height: 1.6px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.2s; }

/* ---------- Nav móvil ---------- */
.mobile-nav-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(18, 19, 23, 0.32);
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s;
}
.mobile-nav-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-nav-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(88vw, 360px);
  background: var(--bg); padding: 24px; display: flex; flex-direction: column; gap: 4px;
  transform: translateX(100%); transition: transform 0.45s var(--ease);
}
.mobile-nav-overlay.is-open .mobile-nav-panel { transform: translateX(0); }
.mobile-nav-close { align-self: flex-end; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); }
.mobile-nav-link { display: block; width: 100%; text-align: left; padding: 14px 0; font-size: 22px; font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-nav-cta { margin-top: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px, 3vw, 36px);
  text-align: center; padding: clamp(48px, 8vw, 96px) var(--gutter) 88px;
}
.hero-logo { width: clamp(230px, 40vw, 520px); }
.hero .hero-slogan { font-size: 14px; }   /* eslogan: 2 px más que las demás etiquetas */
.hero h1 {
  font-size: clamp(38px, 4.9vw, 64px); line-height: 1.04; max-width: none;
  min-height: 1.04em;
}
@media (min-width: 861px) { .hero h1 { white-space: nowrap; } }
.hero h1 .char { opacity: 0; }
.hero h1.is-typing .char { transition: opacity 0.08s linear; }
.hero h1 .char.on { opacity: 1; }
.hero h1 .caret { display: inline-block; width: 2px; height: 0.9em; margin-left: 4px; background: var(--ink); vertical-align: -0.08em; animation: blink 1s steps(2) infinite; }
.hero h1.is-done .caret { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.hero-sub { font-size: var(--copy); color: var(--muted); max-width: 62ch; }   /* mismo tamaño que los párrafos de los encabezados interiores */
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.scroll-hint {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 20px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s, transform 0.25s var(--ease);
}
.scroll-hint .arrow { display: block; flex: none; animation: hint 2.2s var(--ease) infinite; transition: transform 0.25s var(--ease); }
.scroll-hint:hover { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.scroll-hint:hover .arrow { animation: none; transform: translateY(3px); }
.scroll-hint:active { transform: translate(-50%, 2px); }
/* Al hacer clic: la flecha "sale" por abajo y vuelve a entrar por arriba, y la página baja */
.scroll-hint.is-go .arrow { animation: hint-go 0.55s var(--ease) both; }
@keyframes hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes hint-go {
  0% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(14px); opacity: 0; }
  50% { transform: translateY(-12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---------- Servicios (secciones fijas) ---------- */
.svc { position: relative; height: 200vh; border-top: 1px solid var(--line); }
.svc-stage {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center;
  padding: 0 var(--gutter); overflow: hidden;
}
.svc-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; }
.svc-copy h2 { font-size: clamp(32px, 3.75vw, 48px); line-height: 1.06; }
.svc-copy p { font-size: var(--copy); color: var(--muted); max-width: 46ch; }
.svc-visual { position: relative; z-index: 1; }
.svc-num {
  position: absolute; bottom: 40px; z-index: 0; pointer-events: none; user-select: none;
  font-size: clamp(120px, 17vw, 220px); font-weight: 600; line-height: 1; letter-spacing: -0.06em; color: var(--wash);
}
.svc.is-odd .svc-num { left: var(--gutter); }
.svc.is-even .svc-num { right: var(--gutter); }
.svc.is-even .svc-copy { order: 2; }
.svc.is-even .svc-visual { order: 1; }

.frame { position: relative; border-radius: var(--radius); overflow: hidden; }
.frame img { width: 100%; height: min(520px, 62vh); object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter 0.6s var(--ease); }
.frame:hover img { filter: grayscale(0) contrast(1); }
.tag {
  position: absolute; left: 20px; bottom: 20px;
  padding: 8px 12px; border-radius: 999px; background: var(--bg);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.scanline { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--bg); box-shadow: 0 0 14px rgba(251, 251, 250, 0.9); opacity: 0.9; }


.blueprint { height: min(520px, 62vh); border: 1px solid var(--ink); border-radius: var(--radius); background: var(--bg); }
.blueprint svg { width: 100%; height: 100%; }
.blueprint .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; position: absolute; text-transform: uppercase; }
.blueprint .lbl.dim { color: var(--dim); }
.blueprint .draw { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); }
/* Portada · servicio 03: el conjunto hospitalario isométrico va sin caja,
   flotando sobre la página; la vialidad que sale del cuadro se desvanece
   en los bordes en vez de cortarse. */
.blueprint.is-campus { border: 0; background: transparent; border-radius: 0; }
.blueprint.is-campus svg { display: block; overflow: visible; }
/* Marcadores numerados dentro del dibujo (la leyenda va debajo, fuera del dibujo) */
.blueprint .marker circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.3; }
.blueprint .marker circle { stroke-width: 1.5; }
.blueprint .marker text { fill: var(--accent-ink); font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-anchor: middle; dominant-baseline: central; }
.campus-key {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 26px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.campus-key li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.campus-key b { font-weight: 400; color: var(--accent-ink); }
.campus-key .pop { opacity: 0; transition: opacity 0.45s var(--ease); }
.campus-key .pop.on { opacity: 1; }
.svc-visual .campus-key { margin-top: 18px; }
/* Solo el dibujo crece (la columna de texto no cambia): se escala el marco
   sin caja y se deja desbordar sobre el aire de la sección. */
@media (min-width: 861px) {
  .blueprint.is-campus { transform: scale(1.24); transform-origin: 50% 50%; }
  .svc-visual .campus-key { margin-top: 84px; }   /* deja sitio al dibujo escalado */
}
/* Textos del plano: aparecen cuando el progreso pasa su data-at */
.blueprint text { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink); stroke: none; }
.blueprint text.dim { fill: var(--dim); }
.blueprint .pop { opacity: 0; transition: opacity 0.45s var(--ease); }
.blueprint .pop.on { opacity: 1; }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tile { position: relative; border-radius: 18px; overflow: hidden; opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.tile.on { opacity: 1; transform: none; }
.tile img { width: 100%; height: min(250px, 29vh); object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter 0.6s var(--ease); }
.tile:hover img { filter: none; }
.tile .tag { left: 14px; bottom: 14px; padding: 6px 10px; font-size: 10px; }

/* ---------- Cifras ---------- */
.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  padding: clamp(64px, 8vw, 120px) var(--gutter); border-top: 1px solid var(--line);
}
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat-value { font-size: clamp(56px, 7.5vw, 96px); font-weight: 500; line-height: 1; letter-spacing: -0.05em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat-value .sfx { color: var(--dim); }
.stat .eyebrow { font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.stats.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Quiénes somos + cifras (bloque editorial, una columna) ---------- */
.about {
  display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px);
  padding: clamp(72px, 9vw, 128px) var(--gutter); border-top: 1px solid var(--line);
}
.about-copy { display: flex; flex-direction: column; gap: 22px; max-width: 58ch; }
.about-copy h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; }
.about-text { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; letter-spacing: -0.012em; text-wrap: pretty; }
.about-text strong { font-weight: 500; color: var(--ink); }
.about-text span { color: var(--muted); }
.about-stats { display: flex; flex-wrap: wrap; gap: 24px clamp(40px, 6vw, 96px); border-top: 1px solid var(--line-strong); padding-top: 28px; }
.about-stats .stat-value { font-size: clamp(40px, 4vw, 56px); }
.about-stats .stat-value .sfx { color: var(--accent); }
.about-stats .stat-label { font-family: var(--mono); font-size: 14.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }

/* ---------- Cierre ---------- */
.closing {
  position: relative; background: var(--dark); color: var(--bg);
  padding: clamp(80px, 10vw, 128px) var(--gutter) 72px;
  display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center;
}
.closing-logo { width: clamp(200px, 28vw, 360px); }
.closing h2 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; max-width: 24ch; text-wrap: balance; }
.closing p { font-size: var(--copy); color: var(--dark-muted); max-width: 48ch; }
.closing-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.closing .email { font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; }

/* ---------- Footer ----------
   Cuatro columnas sobre el negro del cierre: marca, qué hacemos, dónde
   encontrarnos (mapa en blanco y negro) y contacto; barra legal abajo. */
.site-footer {
  background: var(--dark); color: var(--dark-muted);
  padding: clamp(48px, 6vw, 80px) var(--gutter) 24px; border-top: 1px solid var(--dark-line);
  font-size: 15px; line-height: 1.6;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.25fr 1fr; gap: clamp(28px, 4vw, 56px); }
.footer-brand img { width: 150px; height: auto; display: block; margin-bottom: 18px; }
.footer-brand p { max-width: 34ch; }
.footer-legal { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dark-dim); margin-top: 18px; line-height: 1.9; }
.footer-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.site-footer .eyebrow { color: var(--accent); margin-bottom: 4px; }
.site-footer .footer-sub { margin-top: 14px; }
.site-footer a { color: var(--dark-muted); }
.site-footer a:hover { color: var(--bg); }
.site-footer address { font-style: normal; }
.footer-line { display: inline-flex; align-items: center; gap: 10px; }
.footer-line.is-top { align-items: flex-start; }
.footer-line svg { width: 16px; height: 16px; flex: none; margin-top: 0.15em; color: var(--dark-dim); }
.footer-map { width: 100%; aspect-ratio: 5 / 3; border-radius: 12px; overflow: hidden; border: 1px solid var(--dark-line); background: #1c1d22; }
.footer-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.site-footer .text-link { color: var(--bg); border-bottom-color: var(--accent); min-height: 36px; }
.footer-bar {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 56px); padding-top: 20px; border-top: 1px solid var(--dark-line);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-dim);
}
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 34px; } .footer-bar { flex-direction: column; gap: 6px; } }

/* ---------- Modal de contacto ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px;
  background: rgba(18, 19, 23, 0.42);
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal {
  position: relative; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--bg); color: var(--ink); border-radius: 28px; padding: clamp(24px, 4vw, 40px);
  transform: translateY(14px) scale(0.985); transition: transform 0.45s var(--ease);
}
.modal-overlay.is-open .modal { transform: none; }
.modal-close { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); }
.modal-title { font-size: clamp(28px, 3vw, 36px); line-height: 1.1; margin-top: 12px; }
.modal-sub { color: var(--muted); margin-top: 10px; margin-bottom: 28px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; min-height: 44px;
  transition: border-color 0.25s;
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.form-submit { align-self: flex-start; margin-top: 4px; }
.form-status { min-height: 1.5em; font-size: 14px; }
.form-status.ok { color: #1f7a3a; }
.form-status.err { color: #b3261e; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint .arrow, .hero h1 .caret { animation: none; }
  .hero h1 .char { opacity: 1; transition: none; }
  .tile { opacity: 1; transform: none; transition: none; }
  .blueprint .draw { stroke-dashoffset: 0; }
  .blueprint .pop, .campus-key .pop { opacity: 1; transition: none; }
  .btn, .text-link .arrow, .frame img, .tile img { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .svc-copy h2 { font-size: clamp(28px, 4.2vw, 40px); }
}
/* Menú plano de seis enlaces: entre tableta y escritorio chico se compacta
   para no chocar con el botón de contacto. */
@media (max-width: 1300px) and (min-width: 861px) {
  /* el menú toma el espacio sobrante entre logo y acciones, en vez de centrarse a ciegas */
  .nav-main { gap: 14px; }
  .nav-link { font-size: 11.5px; letter-spacing: 0.05em; }
  .header-cta { padding: 12px 16px; font-size: 13px; }
}
@media (max-width: 860px) {
  /* Móvil: logo a la izquierda; a la derecha el botón de contacto y la
     hamburguesa. El menú entra desde la derecha. */
  .site-header { grid-template-columns: 1fr auto auto; column-gap: 10px; }
  .site-header .logo { order: 1; justify-self: start; }
  .site-header .logo img { height: 30px; }
  .nav-main { display: none; }
  .header-actions { order: 2; justify-self: end; }
  .header-cta { padding: 13px 16px; font-size: 13px; min-height: 44px; }
  .site-header .theme-toggle { display: none; }   /* en móvil el interruptor va dentro del menú */
  .mobile-nav-panel .theme-toggle { align-self: flex-start; margin: 14px 0 6px; }
  .nav-burger { order: 3; display: flex; justify-self: end; margin-left: 0; margin-right: -10px; }

  /* La primera pantalla es solo el inicio: ocupa toda la altura visible del
     teléfono (svh = con barras del navegador), la sección 2 aparece al bajar. */
  .hero { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding-top: 40px; padding-bottom: 64px; }
  .hero-logo { width: 200px; }
  .scroll-hint { display: none; }
  /* Etiquetas y pies en mono: menos espaciado para que no partan en tres líneas */
  .eyebrow { letter-spacing: 0.12em; }
  .story-caption { font-size: 10px; letter-spacing: 0.08em; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn { width: 100%; }

  /* Móvil: las secciones siguen fijas y ligadas al scroll (igual que en
     escritorio), en una sola columna: visual arriba, texto abajo. El
     envoltorio es más corto para que el recorrido con el dedo no se haga largo. */
  .svc { height: 170vh; }
  .svc-stage {
    position: sticky; top: var(--header-h);
    height: auto; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
    grid-template-columns: 1fr; gap: 16px; align-items: start; align-content: center;
    padding: 20px var(--gutter) 28px; overflow: hidden;
  }
  .svc.is-even .svc-copy { order: 1; }
  .svc.is-even .svc-visual { order: 2; }
  .svc-visual { order: -1; }
  .svc.is-even .svc-visual { order: -1; }
  .svc-num { display: none; }
  .svc-copy { gap: 12px; }
  .frame img { height: 220px; }
  .blueprint { height: 250px; }
  .blueprint.is-campus { height: auto; aspect-ratio: 560 / 520; max-height: 46svh; }
  .campus-key { grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 10px; }
  .campus-key li { white-space: normal; align-items: flex-start; }
  .svc-visual .campus-key { margin-top: 14px; margin-bottom: 6px; }
  .tile img { height: 120px; }
  .svc .frame.is-scan { max-width: min(100%, 48vh); max-width: min(100%, 48svh); margin: 0 auto; }

  .stats { grid-template-columns: 1fr; gap: 28px; }
  .stats.is-two { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stats.is-two .stat-value { font-size: 44px; }
  .about { gap: 36px; }
  .about-stats { gap: 28px 40px; }
  .about-stats .stat-value { font-size: 44px; }
  .closing-cta { flex-direction: column; width: 100%; }
  .closing-cta .btn { width: 100%; }
  .field-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Páginas interiores
   ========================================================================== */

/* ---------- Hero interior ---------- */
.page-hero {
  position: relative; padding: clamp(56px, 7.5vw, 96px) var(--gutter) clamp(40px, 5vw, 64px);
  display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 28px);
}
.page-hero h1 { font-size: clamp(40px, 5.9vw, 76px); line-height: 1.0; letter-spacing: -0.03em; max-width: 14ch; }
@media (min-width: 861px) { .page-hero h1.two-lines { max-width: none; } }
/* Eden: el encabezado ocupa toda la primera pantalla, con el contenido centrado en vertical */
.page-hero.is-full { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); justify-content: center; box-sizing: border-box; }
.page-hero.is-full .lead { font-size: var(--copy); }
.page-hero .lead strong { font-weight: 600; font-style: italic; color: var(--ink); font-size: calc(1em + 2px); }
/* Eden: logo enorme y debajo el sello "Distribuidor Global", del ancho del logo,
   con las letras espaciadas para llenar la píldora. */
.page-hero h1.brand { max-width: none; width: max-content; align-self: flex-start; justify-self: start; display: flex; flex-direction: column; align-items: stretch; gap: 0.38em; }
.page-hero h1.brand .eden-logo { height: 2.2em; width: auto; align-self: flex-start; }
.page-hero h1.brand .seal {
  font-family: var(--mono); font-size: 0.28em; font-weight: 700; letter-spacing: 0.33em; text-indent: 0.33em;
  text-transform: uppercase; text-align: center; color: var(--accent-ink);
  border: 2px solid var(--accent); border-radius: 999px; padding: 0.55em 0.9em; white-space: nowrap;
}
@media (max-width: 860px) {
  .page-hero h1.brand .eden-logo { height: 1.9em; }
  .page-hero h1.brand .seal { font-size: 0.3em; letter-spacing: 0.26em; text-indent: 0.26em; padding: 0.6em 0.8em; }
}
.page-hero .lead { font-size: var(--copy); color: var(--muted); max-width: 62ch; }
.page-hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
.page-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero.is-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.page-hero.is-split .page-hero-copy { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 28px); }
.page-hero.is-split h1 { font-size: clamp(40px, 5.6vw, 72px); }

/* ---------- Encabezado de sección ---------- */
.section { padding: clamp(56px, 7vw, 72px) var(--gutter); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }
.section-head { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 5vw, 64px); align-items: end; }
.section-head h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; }
@media (min-width: 1000px) { .section-head h2.one-line { max-width: none; white-space: nowrap; } }
.section-head h2 .light { font-weight: 400; color: var(--muted); }
.section-intro { font-size: var(--copy); color: var(--muted); max-width: 62ch; }
.section-intro.is-lg { font-size: var(--copy); }   /* mismo tamaño que el párrafo del encabezado de Eden */
.section-intro strong { font-weight: 600; color: var(--ink); font-size: calc(1em + 2px); }

/* ---------- Riel de modalidades (Radiología) ---------- */
.rail-wrap { position: relative; height: 220vh; border-top: 1px solid var(--line); }
.rail-stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; gap: 28px; overflow: hidden; padding: 0 0 0 var(--gutter); }
.rail-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-right: var(--gutter); }
.rail-head h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; max-width: 16ch; }
.rail-progress { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rail { display: flex; gap: 14px; will-change: transform; }
.rail .frame { flex: none; width: clamp(220px, 24vw, 300px); }
.rail .frame img { height: clamp(300px, 44vh, 400px); }
.rail-fade { position: absolute; right: 0; top: 0; bottom: 0; width: 140px; background: linear-gradient(90deg, rgba(251, 251, 250, 0) 0%, var(--bg) 100%); pointer-events: none; }

/* ---------- Capacidades (tarjetas con viñetas) ---------- */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.cap { border-top: 1px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.cap .num { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.cap h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.cap .sub { font-size: var(--copy); color: var(--muted); }
.cap ul { margin-top: 6px; padding-left: 18px; list-style: circle; font-size: var(--copy); line-height: 1.55; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }

/* ---------- Plano por fases (Hospitales) ---------- */
.plan { position: relative; width: 100%; height: min(560px, 78vh); border: 1px solid var(--ink); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.plan svg { width: 100%; height: 100%; }
.plan .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; position: absolute; text-transform: uppercase; }
.plan .lbl.dim { color: var(--dim); }
.plan .draw { stroke-dasharray: var(--len, 3000); stroke-dashoffset: var(--len, 3000); }
.plan .badge { position: absolute; right: 20px; bottom: 18px; padding: 7px 11px; border: 1px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--bg); }
.ficha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0 var(--gutter) clamp(56px, 7vw, 72px); }
.ficha > div { border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.ficha .eyebrow { font-size: 10px; letter-spacing: 0.14em; }
.ficha strong { font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.02em; }
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.phase { border-top: 1px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.phase .num { font-size: 40px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--line-strong); transition: color 0.3s; }
.phase:hover .num { color: var(--ink); }
.phase h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.phase p { font-size: var(--copy); line-height: 1.5; color: var(--muted); }

/* ---------- Filas imagen / texto (Tecnología) ---------- */
.rows { padding: 0 var(--gutter); }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; padding: clamp(40px, 4.4vw, 56px) 0; border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row.is-flip .frame { order: 2; }
.row .frame img { height: clamp(240px, 30vw, 380px); }
.row-copy { display: flex; flex-direction: column; gap: 16px; }
.row-copy .num { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.row-copy h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -0.02em; }
.row-copy p { font-size: var(--copy); color: var(--muted); max-width: 46ch; }

/* ---------- Distintivo: distribuidor global de Eden ---------- */
.partner {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
}
.partner .eyebrow { color: var(--muted); }
.partner .mark { font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }

/* Logo oficial de Eden (edenmed.com): SVG en línea que referencia el archivo
   con <use>; el trazo lleva fill=currentColor y hereda el color del texto. */
.eden-logo {
  display: inline-block; width: 2.88em; height: 1em; vertical-align: -0.12em;
  overflow: visible; fill: currentColor; color: inherit; flex: none;
}
h1 .eden-logo, h2 .eden-logo, h3 .eden-logo { font-size: 0.88em; vertical-align: -0.06em; }
/* Logos de producto (edenpacs · edenmanagement · edenintelligence): misma altura, ancho proporcional */
.eden-logo.eden-pacs, .eden-logo.eden-management, .eden-logo.eden-intelligence { height: 1.55em; width: auto; vertical-align: -0.46em; margin: 0 0.1em; }
.btn .eden-logo, .text-link .eden-logo { font-size: 0.95em; }
.nav-link .eden-logo { font-size: 0.92em; vertical-align: -0.1em; }
.mobile-nav-link .eden-logo { font-size: 0.86em; vertical-align: -0.08em; }
.partner .mark.eden-logo { font-size: 15px; height: 15px; width: 43px; position: relative; top: -1px; }

/* ---------- Eden: registro oscuro para todo lo que es plataforma ----------
   Lo que es servicio propio va en claro; lo que es producto distribuido, en
   oscuro. Así se distingue de un vistazo. */
.section.on-dark { background: var(--dark); color: var(--bg); border-top-color: var(--dark); }
.section.on-dark .eyebrow { color: var(--dark-muted); }
.section.on-dark .section-intro { color: var(--dark-muted); }
.on-dark .partner, .choice.is-eden .partner { border-color: var(--dark-line); }
.on-dark .partner .mark, .choice.is-eden .partner .mark { color: var(--bg); }
.on-dark .text-link, .choice.is-eden .text-link { border-bottom-color: var(--bg); }

/* Portada: bloque de plataforma */
.platform {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center;
  padding: clamp(64px, 8vw, 112px) var(--gutter); background: var(--dark); color: var(--bg);
}
.platform-copy { display: flex; flex-direction: column; gap: 20px; }
.platform-copy .eyebrow { color: var(--dark-muted); }
.platform-copy h2 { font-size: clamp(32px, 3.75vw, 48px); line-height: 1.06; max-width: 16ch; }
.platform-copy p { font-size: var(--copy); color: var(--dark-muted); max-width: 48ch; }
.platform-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.platform .partner { border-color: var(--dark-line); }
.platform .partner .mark { color: var(--bg); }
.platform img { width: 100%; height: auto; }

/* Eden: qué hace y qué no hace */
.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
.yesno-col { border: 1px solid var(--dark-line); border-radius: 20px; padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 16px; }
.yesno-col.is-no { border-style: dashed; }
.yesno-col h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; }
.yesno-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.yesno-col li { display: flex; gap: 12px; font-size: var(--copy); line-height: 1.5; color: var(--dark-muted); }
.yesno-col li::before { font-family: var(--mono); color: var(--bg); flex: none; width: 1ch; }
.yesno-col.is-yes li::before { content: "+"; }
.yesno-col.is-no li::before { content: "×"; }
.yesno-note { margin-top: auto; padding-top: 8px; font-size: var(--copy); color: var(--dark-muted); }
.yesno-note a { color: var(--bg); border-bottom: 1px solid var(--dark-line); }
.yesno-note a:hover { border-bottom-color: var(--bg); }

/* Eden: ¿qué necesitas? (servicio / plataforma / ambos) */
.choose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.choice { border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 12px; }
.choice .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.choice h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.choice p { font-size: var(--copy); line-height: 1.55; color: var(--muted); flex: 1; }
.choice.is-eden { background: var(--dark); color: var(--bg); border-color: var(--dark); }
.choice.is-eden p { color: var(--dark-muted); }
.choice.is-eden .num { color: var(--dark-dim); }

/* Radiología: puente hacia la plataforma */
.crossref {
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 5vw, 64px); align-items: start;
  padding: clamp(56px, 7vw, 80px) var(--gutter); border-top: 1px solid var(--line);
}
.crossref-head { display: flex; flex-direction: column; gap: 14px; }
.crossref h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -0.02em; }
.crossref-body { display: flex; flex-direction: column; gap: 18px; }
.crossref-body p { font-size: var(--copy); color: var(--muted); max-width: 56ch; }

/* ---------- Eden: material del socio dentro de los marcos del sitio ----------
   El video y las imágenes de Eden vienen sobre blanco o transparentes: en un
   marco "papel" (wash) con multiply el blanco desaparece y queda solo el
   dispositivo, con la etiqueta mono del sitio en la esquina. */
.frame.is-paper {
  background: var(--wash); aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3vw, 40px);
}
.frame.is-paper video, .frame.is-paper img {
  display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply;
}
.frame.is-paper img { filter: grayscale(1) contrast(1.05); transition: filter 0.6s var(--ease); }
.frame.is-paper:hover img { filter: none; }
.frame.is-paper .scanline { background: var(--ink); box-shadow: none; opacity: 0.35; }
/* Etiqueta del visor: más grande y al ras del borde inferior e izquierdo del video
   (el video es 4:3 como el marco, así que ocupa justo el área interior). */
.frame.is-paper .tag { font-size: 13px; padding: 10px 16px; left: clamp(16px, 3vw, 40px); bottom: calc(clamp(16px, 3vw, 40px) + 84px); }
@media (max-width: 860px) { .frame.is-paper .tag { font-size: 10px; padding: 7px 11px; left: 12px; bottom: 12px; white-space: nowrap; } }
/* Más específico que .frame.is-scan (definido después): si no, el marco
   queda negro y el video en multiply desaparece sobre el negro. */
.frame.is-scan.is-paper { background: var(--wash); aspect-ratio: 4 / 3; }
.frame.is-scan.is-paper video { position: relative; z-index: 0; }

/* Eden: visor solo, centrado, escaneado con el scroll */
.page-hero-side { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; }
.svc.is-solo { height: 180vh; }
.svc.is-solo .svc-stage { grid-template-columns: 1fr; }
/* cabe entero en la ventana: el ancho se limita por la altura disponible */
.svc.is-solo .frame.is-scan { width: 100%; max-width: min(100%, calc((100vh - var(--header-h) - 72px) * 4 / 3)); margin: 0 auto; }
/* Eden: imágenes de los módulos sueltas, sin caja, más grandes. La columna de la
   imagen es más ancha que la del texto y el dispositivo flota sobre el fondo. */
.story.is-loose { grid-template-columns: 1.2fr 0.8fr; }
.stack.is-loose { background: transparent; border-radius: 0; overflow: visible; aspect-ratio: 4 / 3; max-height: calc(100vh - var(--header-h) - 96px); }
.stack.is-loose img { object-fit: contain; object-position: center; mix-blend-mode: multiply; transform: scale(0.88); filter: none; }
.stack.is-loose img.on { transform: scale(0.94); }
/* La imagen de PACS (dispositivos) trae más aire dentro del archivo: va un poco más grande que las otras dos */
.stack.is-loose img:first-of-type { transform: scale(0.96); }
.stack.is-loose img:first-of-type.on { transform: scale(1.03); }   /* antes 1.12: la imagen invadía el hueco y quedaba pegada al texto */
/* Pie de la historia: logotipo del módulo activo en vez de texto */
.story-logos { position: relative; height: 24px; flex: 1; min-width: 0; }
.story-logo { position: absolute; left: 0; top: 0; height: 24px; width: auto; max-width: 100%; opacity: 0; transition: opacity 0.45s var(--ease); }
.story-logo.on { opacity: 1; }

/* ---------- Nosotros ---------- */
.stats.is-cards { padding-top: 0; border-top: 0; }
.stats.is-cards .stat { border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.stats.is-cards .stat-value { font-size: clamp(44px, 5.6vw, 72px); }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); }
.pillar { display: flex; flex-direction: column; gap: 14px; }
.pillar p { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; letter-spacing: -0.01em; }
.values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.value { border-top: 1px solid var(--ink); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.value h3 { font-size: 16px; letter-spacing: -0.005em; }
.value p { font-size: var(--copy); line-height: 1.5; color: var(--muted); }

/* ---------- Responsive interior ---------- */
@media (max-width: 980px) {
  .caps, .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .page-hero.is-split { grid-template-columns: 1fr; }
  .platform, .yesno, .choose, .crossref { grid-template-columns: 1fr; }
  .page-hero-side { width: 100%; align-items: stretch; }
  .svc.is-solo { height: 150vh; }
  .svc.is-solo .frame.is-scan { max-width: min(100%, calc((100svh - var(--header-h) - 96px) * 4 / 3)); }
  .story.is-loose { grid-template-columns: 1fr; }
  .stack.is-loose img.on { transform: none; }
  .platform img { order: -1; }
  .platform-cta { flex-direction: column; }
  .platform-cta .btn { width: 100%; }
  .page-hero-cta { width: 100%; flex-direction: column; }
  .page-hero-cta .btn { width: 100%; }
  .section-head { grid-template-columns: 1fr; gap: 12px; }

  /* Móvil: el riel de modalidades también va ligado al scroll vertical
     (sección fija que desplaza las tarjetas), igual que en escritorio. */
  .rail-wrap { height: 200vh; }
  .rail-stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); overflow: hidden; gap: 20px; padding: 0 0 0 var(--gutter); }
  .rail-head { padding-right: var(--gutter); }
  .rail .frame.is-scan { width: min(78vw, 300px); }

  .caps, .phases { grid-template-columns: 1fr; gap: 28px; }
  .step { grid-template-columns: 56px 1fr; }
  .step ul { grid-column: 2; }
  .step .num { font-size: 28px; }

  .ficha { grid-template-columns: 1fr 1fr; }

  .row, .row.is-flip { grid-template-columns: 1fr; gap: 18px; }
  .row.is-flip .frame { order: -1; }
  .row .frame img { height: 240px; }

  .pillars { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) { .plan .lbl { display: none; } .plan .badge { font-size: 9px; right: 12px; bottom: 12px; } }

/* ---------- Estudios médicos: nunca recortados ----------
   Los escaneos tienen fondo negro; en un marco cuadrado con object-fit:
   contain se ven completos y el sobrante queda negro sobre negro. */
.frame.is-scan { background: #000; aspect-ratio: 1 / 1; }
.frame.is-scan img { width: 100%; height: 100%; object-fit: contain; }
/* Portada: la línea de escaneo va dejando color a su paso. Debajo queda la
   imagen en blanco y negro; encima, la misma imagen a color recortada hasta
   --line (la altura de la línea, que escribe el efecto "scan" con el scroll).
   Aquí manda el scroll, no el cursor. El riel de la página interior conserva
   su color al pasar el cursor. */
.svc .frame.is-scan img { filter: grayscale(1) contrast(1.08); transition: none; }
.svc .frame.is-scan img.is-color {
  position: absolute; inset: 0; filter: none;
  clip-path: inset(0 0 calc(100% - var(--line, 0%)) 0);
}
.svc .frame.is-scan { max-width: min(100%, 62vh); margin-left: auto; }
.svc.is-even .frame.is-scan { margin-left: 0; margin-right: auto; }
.rail .frame.is-scan { width: clamp(240px, 26vw, 320px); }
.rail .frame.is-scan img { height: auto; aspect-ratio: 1 / 1; }
@media (max-width: 860px) {
  .svc .frame.is-scan { max-width: 100%; }
  .rail .frame.is-scan { width: min(78vw, 300px); }
}

/* ==========================================================================
   Historias con scroll (páginas interiores)
   Un visual fijo a la izquierda que cambia conforme se leen los pasos de
   la derecha. [data-story] lleva data-active = índice del paso visible.
   ========================================================================== */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); padding: 0 var(--gutter); border-top: 1px solid var(--line); }
.story-visual { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
/* Al final de cada historia se deja aire extra para poder seguir bajando con el último paso a la vista y el visual aún fijo. */
.story-items { display: flex; flex-direction: column; padding: clamp(48px, 8vh, 96px) 0 calc(clamp(48px, 8vh, 96px) + 28vh); }
.story-item { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 32px 0; border-top: 1px solid var(--line); opacity: 0.38; transition: opacity 0.45s var(--ease); }
.story-item.is-active { opacity: 1; }
.story-item .num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--dim); }
.story-item h3, .story-item h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -0.02em; }
.story-item .sub { font-size: var(--copy); color: var(--muted); max-width: 46ch; }
.story-item .sub.is-lg { font-size: var(--copy); }   /* Eden: módulos al tamaño del párrafo del encabezado */
.story-item .sub strong { font-weight: 600; color: var(--ink); font-size: calc(1em + 2px); }
.story-item ul { padding-left: 18px; list-style: circle; font-size: var(--copy); line-height: 1.6; color: var(--muted); display: flex; flex-direction: column; gap: 4px; max-width: 46ch; }
.story-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); font-variant-numeric: tabular-nums; }
.story-caption strong { color: var(--ink); font-weight: 400; }
.story-dots { display: flex; gap: 8px; }
.story-dots i { width: 22px; height: 2px; background: var(--line-strong); transition: background 0.35s; }
.story-dots i.on { background: var(--ink); }

/* --- Hospitales: el plano se construye por capas --- */
.plan-story .layer { opacity: 0; transition: opacity 0.7s var(--ease); }
.plan-story .layer.on { opacity: 1; }
.plan-story .layer .draw { stroke-dasharray: var(--len, 3000); stroke-dashoffset: var(--len, 3000); transition: stroke-dashoffset 1.1s var(--ease); }
.plan-story .layer.on .draw { stroke-dashoffset: 0; }
.plan-story .layer.is-walls rect { transition: stroke-width 0.6s var(--ease), fill 0.6s var(--ease); }
.plan-story .layer.is-walls.on rect { stroke-width: 3; fill: rgba(18, 19, 23, 0.03); }
.plan-story .lbl { opacity: 0; transition: opacity 0.5s; }
.plan-story .lbl.on { opacity: 1; }
.plan-story .badge { opacity: 0; transform: translateY(6px) rotate(-4deg); transition: opacity 0.4s, transform 0.5s var(--ease); }
.plan-story .badge.on { opacity: 1; transform: none; }
/* Radiología: recorrido del estudio (tomógrafo → nube → radiólogo → informe),
   objetos isométricos generados con tools/gen-flujo-radiologia.py. Se traza
   con el scroll y con inercia (v2.js, scrollStories → flow). */
.flow { position: relative; width: 100%; height: auto; aspect-ratio: 820 / 710; max-height: calc(100vh - var(--header-h) - 150px); }
.flow svg { width: 100%; height: 100%; display: block; color: var(--ink); overflow: visible; }
.flow svg text { font-family: var(--mono); font-size: 22px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--muted); stroke: none; }
.flow .draw { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); }
.flow .route { stroke-width: 1.1; stroke-opacity: 0.45; }
.flow .stream circle { fill: var(--accent); }
.flow .pop { opacity: 0; transition: opacity 0.35s var(--ease); }
.flow .pop.on { opacity: 1; }
.flow .rl { opacity: 0; stroke-width: 1.4; stroke-opacity: 0.6; }
.flow .rl.vis { opacity: 1; }
.flow .orbit-dot { opacity: 0; transition: opacity 0.4s; }
.flow .orbit-dot.on { opacity: 1; }
.flow .pulse { fill: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.flow .pulse.on { animation: flow-pulse 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.flow .pulse.p2.on { animation-delay: 1.3s; }
@keyframes flow-pulse { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
@media (max-width: 860px) {
  .flow { height: min(300px, 36vh) !important; height: min(300px, 36svh) !important; aspect-ratio: auto; }
  .flow svg text { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow .draw { stroke-dashoffset: 0 !important; }
  .flow .pop, .flow .rl, .flow .orbit-dot { opacity: 1; }
  .flow .pulse.on { animation: none; }
}

/* Hospitales: el mismo conjunto isométrico de la portada, por fases. */
.plan.is-campus { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.plan.is-campus svg { display: block; overflow: visible; }
.plan-story .plan.is-campus .layer { opacity: 1; transition: none; }
.plan-story .plan.is-campus .layer .draw, .plan-story .plan.is-campus .layer.on .draw { stroke-dashoffset: var(--len, 3000); transition: none; }
.plan-story .plan.is-campus .layer.is-markers { opacity: 0; transition: opacity 0.5s var(--ease) 0.15s; }
.plan-story .plan.is-campus .layer.is-markers.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .plan-story .plan.is-campus .layer .draw { stroke-dashoffset: 0 !important; } .plan-story .plan.is-campus .layer.is-markers { opacity: 1; } }
.plan .marker circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; }
.plan .marker text { font-family: var(--mono); fill: var(--accent-ink); font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-anchor: middle; dominant-baseline: central; stroke: none; }
.plan-key { justify-content: center; font-size: 11px; }
@media (max-width: 860px) { .plan-key { display: none; } }

/* --- Tecnología: pila de imágenes con fundido --- */
.stack { position: relative; aspect-ratio: 4 / 3; max-height: calc(100vh - var(--header-h) - 120px); border-radius: var(--radius); overflow: hidden; background: var(--wash); }
.stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); filter: grayscale(1) contrast(1.08); transition: opacity 0.7s var(--ease), transform 1.2s var(--ease), filter 0.6s var(--ease); }
.stack img.on { opacity: 1; transform: none; }
.stack:hover img.on { filter: none; }
.stack .tag { opacity: 0; transition: opacity 0.4s; }
.stack .tag.on { opacity: 1; }

@media (max-width: 860px) {
  /* Móvil: el visual se queda pegado arriba (bajo el header) y los pasos
     pasan por debajo; sigue cambiando con el scroll como en escritorio. */
  .story { grid-template-columns: 1fr; gap: 0; }
  .story-visual {
    position: sticky; top: var(--header-h); z-index: 2; height: auto;
    padding: 14px 0 10px; gap: 10px; background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .story-items { padding: 8px 0 calc(40px + 18vh); }
  .story-item { min-height: 44vh; padding: 24px 0; }
  .stack, .stack.is-loose { aspect-ratio: 4 / 3; max-height: 34vh; max-height: 34svh; }
  .plan { height: min(300px, 36vh) !important; height: min(300px, 36svh) !important; }
  .brand-mark { height: min(240px, 32vh); height: min(240px, 32svh); }
  .story-visual .blueprint { height: min(300px, 36vh) !important; height: min(300px, 36svh) !important; }
  .story-visual > svg { max-height: 36vh; max-height: 36svh; }
}
@media (prefers-reduced-motion: reduce) {
  .story-item { opacity: 1; }
  .plan-story .layer, .plan-story .lbl, .plan-story .badge, .stack img.on { transition: none; }
}


/* --- Nosotros: la marca se llena de tinta paso a paso --- */
.brand-mark { position: relative; display: grid; place-items: center; height: min(420px, 50vh); }
.brand-mark img { width: min(300px, 44vw); height: auto; grid-area: 1 / 1; }
.brand-mark .ghost { opacity: 0.1; }
.brand-mark .fill {
  -webkit-clip-path: inset(var(--empty, 100%) 0 0 0);
  clip-path: inset(var(--empty, 100%) 0 0 0);
  transition: -webkit-clip-path 1s var(--ease), clip-path 1s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .brand-mark .fill { transition: none; } }

/* ==========================================================================
   Marca de agua — la X como textura de fondo
   Sangrada por el borde (nunca centrada y completa: eso lee como "otro logo").
   Decorativa: siempre aria-hidden y sin capturar el puntero.
   ========================================================================== */
.wm {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  width: auto; height: var(--wm-size, 90vh); max-width: none;
  /* nunca más alta que su sección: mejor pequeña y entera que grande y cortada */
  max-height: 84%;
  opacity: var(--wm-opacity);
}
/* Siempre ENTERA: este isotipo (chevron + dos triángulos) no aguanta el
   recorte — cortado deja de leerse como X y parece un error. */
.wm-whole { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.wm-side { right: 6%; top: 50%; transform: translateY(-50%); }
.on-dark .wm { opacity: var(--wm-opacity-dark); }

/* El contenido siempre por encima de la marca de agua */
.hero > *:not(.wm), .stats > *:not(.wm), .about > *:not(.wm), .closing > *:not(.wm), .page-hero > *:not(.wm) { position: relative; z-index: 1; }
.hero, .stats, .about, .closing, .page-hero { position: relative; overflow: clip; }
.hero > .scroll-hint { position: absolute; }

@media (max-width: 860px) {
  .wm { height: var(--wm-size-mobile, 44vh); }
  .wm-side { right: 50%; transform: translate(50%, -50%); }
}

/* ---------- Preloader ----------
   Se muestra completo la primera vez que se entra al sitio en la sesión; en
   las páginas siguientes se retira de inmediato con un fundido corto. */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity 0.55s var(--ease), visibility 0s linear 0.55s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader.is-quick { transition-duration: 0.25s; transition-delay: 0s, 0.25s; }
body.is-loading { overflow: hidden; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.preloader-mark { width: 52px; height: 58px; display: block; animation: pre-pulse 1.6s var(--ease) infinite; }
.preloader-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.preloader-bar { position: relative; width: 150px; height: 2px; border-radius: 2px; background: var(--accent-wash); overflow: hidden; }
.preloader-bar i {
  position: absolute; top: 0; left: 0; height: 100%; width: 40%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: pre-slide 1.15s ease-in-out infinite;
}
.preloader-text { font-family: var(--mono); font-size: 11px; line-height: 1; letter-spacing: 0.34em; text-transform: uppercase; color: var(--dim); padding-left: 0.34em; }
@keyframes pre-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes pre-slide { 0% { left: -45%; } 100% { left: 105%; } }
@media (prefers-reduced-motion: reduce) { .preloader-mark, .preloader-bar i { animation: none; } .preloader { transition: none; } }

/* ---------- Acento de marca ----------
   Un solo color, poco y en detalles: líneas, progreso, subrayados y sufijos.
   Botones, títulos y fondos siguen en blanco y negro (regla del 10 % del manual). */
:focus-visible { outline-color: var(--accent); }
.on-dark :focus-visible { outline-color: var(--accent); }
.nav-link[aria-current="page"], .nav-link:hover { border-bottom-color: var(--accent); }
.text-link:hover { border-bottom-color: var(--accent); }
.text-link:hover .arrow { color: var(--accent-ink); }
.hero h1 .caret { background: var(--accent); }
.scanline { background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); opacity: 1; }
.frame.is-paper .scanline { background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); opacity: 0.9; }
.stat-value .sfx { color: var(--accent-ink); }
.step.on .num { color: var(--accent-ink); }
.story-dots i.on { background: var(--accent); }
.story-item.is-active .num { color: var(--accent-ink); }
.rail-progress { color: var(--accent-ink); }
.partner, .on-dark .partner, .platform .partner { border-color: var(--accent); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.yesno-col.is-yes li::before { color: var(--accent); }

/* Nivel "medio": el acento en etiquetas, numeración, subrayados fijos,
   píldoras y el botón secundario. Botones principales, cifras, títulos y
   fondos siguen en blanco y negro. */
.eyebrow { color: var(--accent-ink); }
.partner .eyebrow { color: var(--accent-ink); }
.text-link { border-bottom-color: var(--accent); }
.text-link .arrow { color: var(--accent-ink); }
.tag { color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.svc-num { color: var(--accent-wash); }
.cap .num, .choice .num, .story-item .num, .row-copy .num, .step .num { color: var(--accent-ink); }
.btn-ghost { border-color: var(--accent); color: var(--accent-ink); }
.btn-ghost:hover { border-color: var(--accent-ink); }
.cap { border-top-color: var(--accent); }
.story-dots i { background: var(--accent-wash); }
.story-dots i.on { background: var(--accent); }
.stat-value .sfx { color: var(--accent); }

/* Las etiquetas mono siempre pequeñas, aunque estén dentro de bloques cuyo
   párrafo es más grande (.svc-copy p, .platform-copy p, .row-copy p). */
p.eyebrow { font-size: 12px; line-height: 1.6; }
@media (max-width: 860px) { p.eyebrow { font-size: 11px; } p.eyebrow.hero-slogan { font-size: 13px; } }

/* ---------- Modo claro / oscuro ----------
   El interruptor (sol / luna) guarda la elección; sin elección se sigue al
   sistema. En oscuro cambian los tokens; los bloques que ya eran oscuros
   (cierre, footer, plataforma, "Eden es el sistema") recuperan sus tokens
   claros para seguir leyéndose igual. */
.theme-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 999px; }
.theme-toggle span { width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dim); transition: background 0.3s, color 0.3s; }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .sun-i.on { background: rgba(255, 176, 58, 0.2); color: #e09415; }
.theme-toggle .moon-i.on { background: var(--accent-wash); color: var(--accent-ink); }
.mobile-nav-panel .theme-toggle { display: inline-flex; }

[data-theme="dark"] {
  color-scheme: dark;
  /* Negro puro de fondo y también en las bandas (cierre, footer, plataforma);
     las separa una línea fina. */
  --bg: #000000; --ink: #f4f4f1; --muted: #a7a9b0; --dim: #6b6e76;
  --line: #1f2126; --line-strong: #34363d; --wash: #121317;
  --dark: #000000; --dark-line: #2a2d34;
  /* Morado más luminoso sobre negro puro */
  --accent: #b39bff; --accent-ink: #c9b8ff; --accent-glow: rgba(179, 155, 255, 0.7); --accent-wash: #3f357e;
}
[data-theme="dark"] :is(.closing, .site-footer, .platform, .section.on-dark, .choice.is-eden) { --bg: #fbfbfa; --ink: #121317; --wash: #efefec; --line: #e8e8e4; }
/* Con página y bandas en el mismo negro, una línea fina marca dónde empieza cada banda */
[data-theme="dark"] :is(.closing, .platform, .section.on-dark) { border-top: 1px solid var(--dark-line); }
[data-theme="dark"] .site-header { background: rgba(0, 0, 0, 0.86); }
[data-theme="dark"] .btn-ink:hover { background: #e2e2de; }
[data-theme="dark"] .rail-fade { background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--bg) 70%); }
/* Los marcos negros de las tomografías necesitan un borde fino sobre negro puro */
[data-theme="dark"] .frame.is-scan { box-shadow: 0 0 0 1px var(--line-strong); }
[data-theme="dark"] .plan-story .layer.is-walls.on rect { fill: rgba(244, 244, 241, 0.05); }
/* Logos y marcas de agua negras se invierten a blanco */
[data-theme="dark"] :is(.site-header .logo img, .hero-logo, .wm, .preloader-mark img, .brand-mark img, .story-logo) { filter: invert(1); }
/* Material de Eden: el video (fondo blanco) va sobre una tarjeta marfil; las imágenes son transparentes */
[data-theme="dark"] .frame.is-paper { background: #f4f1ec; }
[data-theme="dark"] .frame.is-paper .scanline { background: #121317; }
[data-theme="dark"] .frame.is-paper .tag { background: #fbfbfa; }
[data-theme="dark"] .stack.is-loose img { mix-blend-mode: normal; }
/* Dibujos a línea toman el color del texto */
.blueprint svg, .plan svg { color: var(--ink); }

/* ---------- Aviso de privacidad ---------- */
.legal-body { max-width: 72ch; display: flex; flex-direction: column; gap: 14px; }
.legal-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.legal-body h2 { font-size: clamp(20px, 2vw, 24px); line-height: 1.2; margin-top: 18px; }
.legal-body p { font-size: 16px; line-height: 1.65; color: var(--muted); }
.legal-body a { color: var(--accent-ink); border-bottom: 1px solid var(--accent); }
.form-legal { font-size: 13px; color: var(--muted); margin-top: 10px; }
.form-legal a { color: var(--accent-ink); border-bottom: 1px solid var(--accent); }
.footer-bar a { color: var(--dark-muted); }
.footer-bar a:hover { color: var(--bg); }