/* Evoluciona — página de venta. Tokens monocromáticos de la fundación
   (docs/design/design-foundation-2026-09-09.md): blanco, tinta y un solo rojo
   para lo destructivo, que acá no aparece. Sin modo oscuro, por decisión
   cerrada. Estructura de la maqueta «Landing · logo 09». Tipografía del
   sistema: el CSP del vhost bloquea fuentes externas. */

:root {
  color-scheme: light;

  --bg:         #ffffff;
  --bg-sunken:  #f5f6f8;

  --ink:        #16181c;
  --ink-2:      #5b6068;
  --ink-3:      #6b7280;

  --line:       #e3e5e9;
  --line-2:     #d8dbe0;
  --action:     #16181c;
  --action-press: #000000;

  --radius-pill: 980px;
  --radius-card: 16px;
  --measure:     34rem;
  --shell:       70rem;

  --motion-fast: 120ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

a { color: var(--action); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.wrap { width: min(100%, var(--shell)); margin: 0 auto; padding: 0 1.5rem; }
.stack { display: flex; flex-direction: column; gap: 2rem; }
.stack.tight { gap: .75rem; }
.muted { color: var(--ink-2); max-width: var(--measure); }
.fine { color: var(--ink-2); font-size: .875rem; }
.eyebrow {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-2);
}

.skip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  transform: translateY(-120%);
  padding: .75rem 1rem;
  background: var(--action);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-card) 0;
  transition: transform var(--motion-fast) var(--ease);
}
.skip:focus { transform: translateY(0); }

/* --------------------------------------------------------------- encabezado */

.masthead {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.masthead-in {
  width: min(100%, var(--shell));
  margin: 0 auto;
  padding: .25rem 1.5rem;
  min-height: 4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; font-size: .9375rem; }
.nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav .enter { color: var(--ink); font-weight: 600; }

main, .section { scroll-margin-top: 5rem; }
main:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }

/* ----------------------------------------------------------------- portada */

.hero { padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(3rem, 8vw, 5.5rem); }
/* Portada: en teléfono, una columna (texto y luego el ejemplo). Desde 60rem,
   dos columnas centradas una contra la otra en el eje vertical: el texto,
   flexible, y el teléfono a su ancho fijo. */
.hero-grid { --demo-w: 24rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.hero-copy { min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 60rem) {
  .hero { padding: 2.5rem 0 4.5rem; }
  .hero-grid { grid-template-columns: minmax(0, 34rem) var(--demo-w); justify-content: space-between; align-items: center; column-gap: clamp(3rem, 7vw, 7rem); }
  .hero .display { font-size: clamp(2.375rem, 5.1vw, 3.875rem); }
}
.hero-copy .fine { margin-top: -.25rem; }
.display {
  font-size: clamp(2.375rem, 7vw, 3.875rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.04;
  text-wrap: balance;
}
.lead { max-width: var(--measure); color: var(--ink-2); font-size: 1.1875rem; line-height: 1.55; }

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: .75rem 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: #ffffff;
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease);
}
.cta:hover { background: var(--action-press); }
.cta.quiet { background: transparent; color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.cta.quiet:hover { background: var(--bg-sunken); }
.cta.inverse { background: #ffffff; color: var(--ink); align-self: flex-start; }
.cta.inverse:hover { background: var(--bg-sunken); }
.cta-par { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .5rem; }

/* Ejemplo del producto: la pantalla de revisión del borrador de la app (#result
   de web/index.html) dentro de un teléfono discreto. Los valores salen de
   web/styles.css —tokens, medidas de .masthead, h2, .section-name, .draft,
   .draft-field y .pill— copiados aquí y acotados a .demo-app, en em, para que
   la pantalla entera se escale con un solo font-size como una captura. No se
   carga styles.css: contaminaría la página. Si la pantalla real cambia, esto
   se actualiza a mano. */
.demo { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.demo-phone {
  width: min(100%, var(--demo-w));
  padding: .5rem;
  border: 1px solid var(--line-2);
  border-radius: 2.5rem;
  background: var(--bg-sunken);
}
.demo-app {
  --app-bg: #ffffff;
  --app-ink: #151614;
  --app-ink-2: #5c5e59;
  --app-line: #e2e3df;
  --app-line-strong: #868883;
  --app-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  overflow: hidden;
  border-radius: 2rem;
  background: var(--app-bg);
  color: var(--app-ink);
  font-family: var(--app-font);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 0 0 1px var(--line);
}
.demo-mast {
  display: grid;
  min-height: 4em;
  padding: .5em 1.25em 0;
  border-bottom: 1px solid var(--app-line);
}
/* El logo de la app a escala de la demo: la app lo lleva a 1,3125rem (21px). */
.demo-wordmark { flex: none; display: inline-flex; align-items: center; }
.demo-wordmark .marca-logo { --marca-logo: 1.3125em; }
.demo-specialty { min-width: 0; color: var(--app-ink-2); font-size: .875em; }
.demo-specialty > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-section-name { margin: 0 0 .5em; color: var(--app-ink-2); font-size: .875em; }
/* 10,75em de ancho, como la columna de la app en un teléfono: «Evolución de …»
   e «Informe de evaluación de …» se parten en dos líneas con cualquier
   especialidad, así ningún título deja un hueco bajo él. */
.demo-title {
  max-width: 10.75em;
  margin: 0 0 1em;
  font-size: 2em;
  font-weight: 620;
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
}
.demo-draft { margin: 1.5em 0 0; border-top: 1px solid var(--app-line); }
.demo-draft section { padding: 1em 0; border-bottom: 1px solid var(--app-line); }
.demo-draft h3 { margin: 0 0 .5em; font-size: 1em; font-weight: 600; letter-spacing: -.01em; }
.demo-field {
  padding: .5em .75em;
  border: 1px solid var(--app-line-strong);
  border-radius: 8px;
  background: var(--app-bg);
  line-height: 1.6;
}
.demo-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5em;
  margin-top: 1.5em;
  padding: .875em 1.25em;
  border-radius: .875em;
  background: var(--app-ink);
  color: #ffffff;
  font-weight: 600;
  line-height: 1.25;
}


/* Ranuras: el texto visible y sus cuatro versiones ocupan la misma celda, así
   la ranura mide lo que la más larga y la tarjeta no salta al cambiar. */
.demo-slot { display: grid; }
.demo-slot > * { grid-area: 1 / 1; min-width: 0; }
.demo-alt { visibility: hidden; }

/* ------------------------------------------------ las tres pantallas */

/* Apiladas en la misma celda: el teléfono mide lo que la más alta. Se ve la
   del paso en curso (data-paso en .demo) y el cambio es un fundido corto. */
.demo-pantallas { display: grid; }
.demo-screen {
  grid-area: 1 / 1;
  min-width: 0;
  padding: 1.75em 1.25em 1.5em;
  visibility: hidden;
  opacity: 0;
  transition: opacity 240ms var(--ease), visibility 0s linear 240ms;
}
.demo[data-paso="inicio"] .demo-inicio,
.demo[data-paso^="paciente"] .demo-paciente,
.demo[data-paso="dictado"] .demo-dictado,
.demo[data-paso="falta-espera"] .demo-falta-espera,
.demo[data-paso="falta"] .demo-falta,
.demo[data-paso="bitacora"] .demo-bitacora,
.demo[data-paso="respuestas"] .demo-respuestas,
.demo[data-paso="trabajo"] .demo-trabajo,
.demo[data-paso="borrador"] .demo-main,
.demo[data-paso="final"] .demo-final { visibility: visible; opacity: 1; transition: opacity 240ms var(--ease); }

/* Dictado: #interview. La barra de acciones va al pie, como en el teléfono. */
.demo-captura { display: flex; flex-direction: column; padding-bottom: 0; }
.demo-steps { display: flex; justify-content: space-between; color: var(--app-ink-2); font-size: .875em; font-variant-numeric: tabular-nums; }
.demo-captura .demo-section-name { margin-top: .25em; }
/* En el relato la app no muestra pasos ni reloj (setPhase sin número). */
.demo[data-modo="relato"] .demo-dictado .demo-steps { visibility: hidden; }
/* Lo que se va reconociendo: la app no lo muestra en esta pantalla; acá se ve
   bajo la pregunta para contrastar lo dicho con el borrador. */
.demo-oido { display: none; margin: 0 0 1em; color: var(--app-ink); line-height: 1.5; }
.demo[data-modo="relato"] .demo-dictado .demo-oido, .demo-falta .demo-oido { display: block; }
.demo[data-modo="relato"] .demo-dictado .demo-orbe, .demo-falta .demo-orbe { width: 7em; height: 7em; margin: 0 auto .75em; }
.demo.demo-viva[data-paso="dictado"] .demo-dictado .demo-oido .demo-txt,
.demo.demo-viva[data-paso="falta"] .demo-falta .demo-oido { animation: demo-aparece 600ms var(--ease) 500ms both; }

/* La bitácora: #logbook. Las notas aparecen una tras otra (data-notas). */
.demo-bitacora { display: flex; flex-direction: column; padding-top: 1em; padding-bottom: 0; }
.demo-log { flex: 1; display: flex; flex-direction: column; gap: 1.5em; padding: .5em 0 1em; }
.demo-log-empty { margin: auto; max-width: 19em; color: var(--app-ink-2); text-align: center; }
.demo-nota { display: none; }
.demo-nota { flex-direction: column; }
.demo[data-notas="1"] .demo-nota-1,
.demo[data-notas="2"] :is(.demo-nota-1, .demo-nota-2),
.demo[data-notas="3"] :is(.demo-nota-1, .demo-nota-2, .demo-nota-3) { display: flex; animation: demo-aparece 320ms var(--ease) both; }
.demo[data-notas="1"] .demo-log-empty, .demo[data-notas="2"] .demo-log-empty, .demo[data-notas="3"] .demo-log-empty { display: none; }
.demo-note-meta { color: var(--app-ink-2); font-size: .875em; font-variant-numeric: tabular-nums; }
.demo-note-body { line-height: 1.5; }
.demo-note-acts { display: flex; gap: 1em; margin-top: .25em; }
.demo-note-acts span { display: inline-flex; align-items: center; min-height: 3em; color: var(--app-ink); font-size: .875em; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.demo-note-acts .demo-warn { color: #b3261e; }
.demo-log-foot { display: flex; }
.demo-log-foot .demo-link { margin-left: auto; min-height: 2.75em; font-size: .875em; }
.demo-composer { display: flex; align-items: center; gap: .5em; margin: 0 -1.25em; padding: .75em 1.25em; border-top: 1px solid var(--app-line); }
.demo-log-input { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 3.25em; padding: .5em 1em; border: 1px solid var(--app-line-strong); border-radius: 12px; color: var(--app-ink-2); }
.demo-round { flex: none; display: grid; place-items: center; width: 3.25em; height: 3.25em; border-radius: 50%; background: var(--app-ink); color: #ffffff; }
.demo-round svg { width: 1.5em; height: 1.5em; }
.demo-mast-tools { margin-left: auto; display: flex; align-items: center; gap: .125em; flex: none; }
.demo-clock { color: var(--app-ink-2); font-size: .875em; font-variant-numeric: tabular-nums; }
.demo-mast-act { position: relative; display: inline-flex; align-items: center; min-height: 3em; padding: 0 .375em; font-size: .875em; white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; }
.demo-strong { font-weight: 600; }
.demo-question { margin: 0 0 .5em; font-size: 1.75em; font-weight: 620; letter-spacing: -.03em; line-height: 1.18; text-wrap: balance; }
.demo-status { min-height: 1.5em; margin: 0; color: var(--app-ink-2); font-size: .875em; text-align: center; text-wrap: balance; }
.demo-dock {
  display: flex;
  flex-direction: column;
  gap: .25em;
  margin: auto -1.25em 0;
  padding: .75em 1.25em;
  border-top: 1px solid var(--app-line);
}
.demo-dock .demo-pill { margin-top: 0; }
.demo-dock-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; }
/* Como en la app: en las repreguntas «Saltar y escribir» va en su propia fila. */
.demo-dock-row.demo-con-salida { display: flex; flex-wrap: wrap; }
.demo-dock-row.demo-con-salida > .demo-link { flex: 1 1 0; }
.demo-dock-row.demo-con-salida > .demo-salida { flex-basis: 100%; order: -1; }
.demo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3em;
  color: var(--app-ink);
  font-size: .9375em;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.demo-subtle { color: var(--app-ink-2); }

/* El orbe de escucha: en la app lo dibuja app.js en un lienzo (tres capas de
   tinta con el borde ondulado y un halo); acá son tres capas de CSS que laten
   como una voz. Las proporciones son las del lienzo: la capa exterior mide el
   60 % del cuadro y las otras el 86 % y el 72 % de ella. */
.demo-orbe { position: relative; width: 12em; height: 12em; margin: .5em auto; }
.demo-orbe > span { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.demo-halo { width: 100%; height: 100%; background: radial-gradient(closest-side, rgba(21,22,20,.16) 35%, rgba(21,22,20,0)); animation: demo-halo 1.7s ease-in-out infinite; }
.demo-capa { width: 60%; height: 60%; background: rgba(21,22,20,.16); animation: demo-voz 1.7s ease-in-out infinite, demo-onda 2.3s ease-in-out infinite alternate; }
.demo-capa + .demo-capa { width: 51.6%; height: 51.6%; background: rgba(21,22,20,.3); animation-delay: -.2s, -1.1s; animation-duration: 1.7s, 1.9s; }
.demo-capa + .demo-capa + .demo-capa { width: 43.2%; height: 43.2%; background: radial-gradient(circle at 38% 34%, #4a4c47, #151614 70%); animation-delay: -.35s, -.4s; animation-duration: 1.7s, 2.7s; }
@keyframes demo-voz {
  0%, 100% { transform: translate(-50%, -50%) scale(1.04); }
  18% { transform: translate(-50%, -50%) scale(1.22); }
  32% { transform: translate(-50%, -50%) scale(1.1); }
  50% { transform: translate(-50%, -50%) scale(1.3); }
  68% { transform: translate(-50%, -50%) scale(1.08); }
  84% { transform: translate(-50%, -50%) scale(1.18); }
}
@keyframes demo-onda {
  0% { border-radius: 52% 48% 50% 50% / 48% 53% 47% 52%; }
  50% { border-radius: 47% 53% 46% 54% / 54% 47% 53% 46%; }
  100% { border-radius: 51% 49% 54% 46% / 47% 51% 49% 53%; }
}
@keyframes demo-halo { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* Espera: #working, con su barra indeterminada. */
.demo-lead { margin: 0 0 1.5em; color: var(--app-ink-2); font-size: 1.125em; line-height: 1.45; }
.demo-track { height: 4px; margin-top: 2em; overflow: hidden; border-radius: 4px; background: #d4d6d1; }
.demo-track span { display: block; width: 35%; height: 100%; background: var(--app-ink); animation: demo-slide 1.4s ease-in-out infinite; }
@keyframes demo-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(286%); } }
.demo-trabajo-volver { justify-content: flex-start; margin-top: 1.5em; visibility: hidden; }
.demo[data-cancelable="si"] .demo-trabajo-volver { visibility: inherit; }

/* Inicio: #inicio, la lista de pacientes (.rows / .tap de web/styles.css) y
   «Nuevo paciente» en la barra de abajo. */
.demo-inicio, .demo-paciente { display: flex; flex-direction: column; padding-bottom: 0; }
.demo-rows { margin-top: .25em; }
.demo-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75em; min-height: 4em; padding: .875em 0; border-top: 1px solid var(--app-line); }
.demo-row:last-child { border-bottom: 1px solid var(--app-line); }
.demo-tap-text { display: flex; flex-direction: column; gap: .125em; min-width: 0; }
.demo-t { font-size: 1.0625em; font-weight: 600; letter-spacing: -.01em; }
.demo-m { color: var(--app-ink-2); font-size: .875em; font-variant-numeric: tabular-nums; }
.demo-chevron { display: inline-flex; color: var(--app-ink-2); }
.demo-chevron svg { width: 1.25em; height: 1.25em; }
.demo-dock-puerta { display: grid; }
.demo-dock-puerta .demo-pill { grid-area: 1 / 1; }

/* Ficha del paciente: #paciente, con sus dos preguntas de a una (.opt). */
.demo-nombre-fila { display: flex; align-items: center; gap: .25em; }
.demo-nombre-fila .demo-title { margin: 0; }
.demo-icon-btn { display: grid; place-items: center; width: 2.75em; height: 2.75em; color: var(--app-ink-2); }
.demo-icon-btn svg { width: 1.25em; height: 1.25em; }
.demo-meta { margin: .125em 0 0; color: var(--app-ink-2); font-size: .875em; }
.demo-pasos-ficha { display: grid; }
.demo-paso { grid-area: 1 / 1; min-width: 0; }
/* La primera pregunta se ve en el inicio y en su paso; desde la segunda en
   adelante queda la segunda, para que el fundido de salida no la cambie. */
.demo-paso-1 { visibility: hidden; }
.demo[data-paso="inicio"] .demo-paso-1, .demo[data-paso="paciente-1"] .demo-paso-1 { visibility: inherit; }
.demo[data-paso="inicio"] .demo-paso-2, .demo[data-paso="paciente-1"] .demo-paso-2 { visibility: hidden; }
.demo-pregunta { margin: 1.5em 0 0; font-size: 1.25em; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.demo-crumb { display: inline-flex; align-items: center; gap: .375em; min-height: 2.75em; margin: .75em 0 0 -.375em; padding: 0 .75em 0 .375em; color: var(--app-ink-2); font-size: .875em; font-weight: 600; }
.demo-crumb svg { width: 1.375em; height: 1.375em; }
.demo-crumb + .demo-pregunta { margin-top: .25em; }
.demo-opts { display: flex; flex-direction: column; gap: .625em; margin-top: 1em; }
.demo-opt {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 5.25em;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "ic tit marca" "ic pis marca";
  gap: .125em .875em;
  padding: .875em 1em;
  border: 1.5px solid var(--app-line);
  border-radius: 1.25em;
  background: #f4f5f2;
  transition: border-color 120ms var(--ease), background 120ms var(--ease);
}
.demo-opt-icono { grid-area: ic; width: 1.75em; height: 1.75em; color: var(--app-ink-2); }
.demo-opt-titulo { grid-area: tit; font-size: 1.125em; font-weight: 650; line-height: 1.3; letter-spacing: -.015em; }
.demo-opt-pista { grid-area: pis; color: var(--app-ink-2); font-size: .875em; line-height: 1.4; }
.demo-opt-marca { display: block; grid-area: marca; width: 1.625em; height: 1.625em; border: 1.5px solid var(--app-line-strong); border-radius: 50%; background: var(--app-bg) center / .875em no-repeat; }
/* La opción elegida: la del tipo y el modo de la vuelta (data-tipo, data-modo),
   cuando la secuencia ya la marcó (data-marca). */
.demo[data-tipo="tratamiento"]:is([data-marca="tipo"], [data-marca="modo"]) .demo-opt-tratamiento,
.demo[data-tipo="evaluacion"]:is([data-marca="tipo"], [data-marca="modo"]) .demo-opt-evaluacion,
.demo[data-modo="guiado"][data-marca="modo"] .demo-opt-guiado,
.demo[data-modo="relato"][data-marca="modo"] .demo-opt-relato,
.demo[data-modo="bitacora"][data-marca="modo"] .demo-opt-bitacora { border-color: var(--app-ink); background: var(--app-bg); box-shadow: inset 0 0 0 1px var(--app-ink); }
.demo[data-tipo="tratamiento"]:is([data-marca="tipo"], [data-marca="modo"]) .demo-opt-tratamiento .demo-opt-icono,
.demo[data-tipo="evaluacion"]:is([data-marca="tipo"], [data-marca="modo"]) .demo-opt-evaluacion .demo-opt-icono,
.demo[data-modo="guiado"][data-marca="modo"] .demo-opt-guiado .demo-opt-icono,
.demo[data-modo="relato"][data-marca="modo"] .demo-opt-relato .demo-opt-icono,
.demo[data-modo="bitacora"][data-marca="modo"] .demo-opt-bitacora .demo-opt-icono { color: var(--app-ink); }
.demo[data-tipo="tratamiento"]:is([data-marca="tipo"], [data-marca="modo"]) .demo-opt-tratamiento .demo-opt-marca,
.demo[data-tipo="evaluacion"]:is([data-marca="tipo"], [data-marca="modo"]) .demo-opt-evaluacion .demo-opt-marca,
.demo[data-modo="guiado"][data-marca="modo"] .demo-opt-guiado .demo-opt-marca,
.demo[data-modo="relato"][data-marca="modo"] .demo-opt-relato .demo-opt-marca,
.demo[data-modo="bitacora"][data-marca="modo"] .demo-opt-bitacora .demo-opt-marca {
  border-color: var(--app-ink);
  background-color: var(--app-ink);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
/* La barra sigue la pregunta: deshabilitado hasta elegir, como en la app. */
.demo-paciente .demo-dock-puerta .demo-pill { visibility: hidden; }
.demo-elige-tipo, .demo-elige-modo { opacity: .4; }
.demo[data-paso="paciente-1"]:not([data-marca="tipo"]) .demo-elige-tipo,
.demo[data-paso="paciente-1"][data-marca="tipo"] .demo-siguiente,
.demo[data-paso="paciente-2"]:not([data-marca="modo"]) .demo-elige-modo,
.demo[data-paso="paciente-2"][data-marca="modo"] .demo-comenzar,
.demo[data-paso="dictado"] .demo-comenzar,
.demo[data-paso="bitacora"] .demo-comenzar { visibility: inherit; }

/* Un toque: el botón se oscurece como al apretarlo en la app y aparece un punto
   donde se tocó. Sin cursor. */
.demo-pill { position: relative; transition: background 120ms var(--ease), transform 120ms var(--ease); }
.demo[data-toque="siguiente"] .demo-toca-siguiente,
.demo[data-toque="comenzar"] .demo-toca-comenzar,
.demo[data-toque="redactar"] .demo-toca-redactar,
.demo[data-toque="grabar"] .demo-toca-grabar,
.demo[data-toque="terminar-respuesta"] .demo-toca-terminar-respuesta,
.demo[data-toque="aprobar"] .demo-toca-aprobar { background: #000000; transform: scale(.98); }
.demo[data-toque="paciente"] .demo-toca-paciente { background: #f4f5f2; }
.demo[data-toque="paciente"] .demo-toca-paciente::after,
.demo[data-tipo="tratamiento"][data-toque="tipo"] .demo-opt-tratamiento::after,
.demo[data-tipo="evaluacion"][data-toque="tipo"] .demo-opt-evaluacion::after,

.demo[data-toque="siguiente"] .demo-toca-siguiente::after,
.demo[data-modo="guiado"][data-toque="modo"] .demo-opt-guiado::after,
.demo[data-modo="relato"][data-toque="modo"] .demo-opt-relato::after,
.demo[data-modo="bitacora"][data-toque="modo"] .demo-opt-bitacora::after,
.demo[data-toque="grabar"] .demo-toca-grabar::after,
.demo[data-toque="terminar"] .demo-toca-terminar::after,
.demo[data-toque="terminar-respuesta"] .demo-toca-terminar-respuesta::after,
.demo[data-toque="comenzar"] .demo-toca-comenzar::after,
.demo[data-toque="redactar"] .demo-toca-redactar::after,
.demo[data-toque="aprobar"] .demo-toca-aprobar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.75em;
  height: 2.75em;
  margin: -1.375em 0 0 -1.375em;
  border-radius: 50%;
  background: rgba(21, 22, 20, .2);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7);
  animation: demo-toque 300ms var(--ease) both;
}
.demo[data-toque="paciente"] .demo-toca-paciente::after { left: 30%; }
@keyframes demo-toque { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* Lo que escuchó: #review, con la respuesta transcrita en su campo. */
.demo-respuestas, .demo-final { display: flex; flex-direction: column; padding-bottom: 0; }
.demo-answers { margin: 1.5em 0 0; border-top: 1px solid var(--app-line); }
.demo-answer { padding: 1.25em 0; }
.demo-answer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.demo-answer-label { min-width: 0; font-weight: 600; letter-spacing: -.01em; }
.demo-textarea .demo-txt { display: block; }
.demo-answer-state { flex: none; color: var(--app-ink-2); font-size: .875em; }
/* Es un <span>: sin `display: block` el borde se parte en cada renglón y cruza
   el texto (pasó al dejar de ser una ranura, que ya era grid). */
.demo-textarea {
  display: block;
  margin-top: .75em;
  padding: .875em 1em;
  border: 1px solid var(--app-line-strong);
  border-radius: 12px;
  background: var(--app-bg);
  line-height: 1.55;
}

/* La evolución aprobada: #evolucion, con el aviso de guardado y el texto en
   sólo lectura tal como lo arma el servidor (título y texto por sección). */
.demo-ok { margin: 0 0 1em; font-size: .875em; font-weight: 600; }
/* El tipo va dentro del renglón: sin las versiones apiladas, que le darían el ancho
   de la más larga y dejarían un hueco tras «Evaluación». Esta pantalla no es la más
   alta, así que su alto puede variar sin mover el teléfono. */
.demo-slot.demo-tipo-nombre { display: inline; }
.demo-tipo-nombre .demo-alt { display: none; }
.demo-fecha { white-space: nowrap; }
.demo-final .demo-title { margin-bottom: 0; }
.demo-documento { margin: 1.25em 0 0; padding-top: 1em; border-top: 1px solid var(--app-line); color: var(--app-ink-2); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

/* El encabezado tiene dos modos, como en la app: flujo (marca y tipo) en la
   captura y el borrador; hija («‹ Paciente», saldo y cuenta) en la evolución
   guardada. Los dos ocupan la misma celda. */
.demo-mast > div { grid-area: 1 / 1; display: flex; align-items: center; gap: .75em; min-width: 0; }
.demo-mast-raiz, .demo-mast-hija, .demo-mast-bitacora { visibility: hidden; }
.demo[data-paso="bitacora"] .demo-mast-flujo,
.demo[data-paso="inicio"] .demo-mast-flujo,
.demo[data-paso^="paciente"] .demo-mast-flujo,
.demo[data-paso="final"] .demo-mast-flujo { visibility: hidden; }
.demo[data-paso="inicio"] .demo-mast-raiz,
.demo[data-paso^="paciente"] .demo-mast-pacientes,
.demo[data-paso="final"] .demo-mast-ficha,
.demo[data-paso="bitacora"] .demo-mast-bitacora { visibility: visible; }
/* En la bitácora el encabezado lleva reloj, «Ocultar notas» y «Generar evolución»: en el
   ancho de un teléfono no queda lugar para la marca ni el tipo, que la app oculta. */
.demo-mast-bitacora :is(.demo-wordmark, .demo-specialty) { display: none; }
.demo-mast-bitacora { gap: .5em; }
.demo-mast-raiz .demo-saldo { margin-left: auto; }
.demo-back { display: inline-flex; align-items: center; gap: .125em; margin-left: -.25em; color: var(--app-ink); font-weight: 600; letter-spacing: -.01em; }
.demo-back svg { width: 1.5em; height: 1.5em; }
.demo-back span { text-decoration: underline; text-underline-offset: 4px; }
.demo-saldo { display: inline-flex; align-items: center; min-height: 2.75em; margin-left: auto; padding: 0 .875em; border: 1px solid var(--app-line-strong); border-radius: 980px; font-size: .875em; font-weight: 500; font-variant-numeric: tabular-nums; }
.demo-cuenta { display: grid; place-items: center; width: 3em; height: 3em; margin-right: -.5em; }
.demo-cuenta svg { width: 1.5em; height: 1.5em; }

/* Borrador: al llegar, cada sección y el botón aparecen en cascada breve. Sólo
   mientras corre la secuencia (.demo-viva); el borrador estático no se anima. */
.demo.demo-viva[data-paso="borrador"] .demo-draft section,
.demo.demo-viva[data-paso="borrador"] .demo-aprobar { animation: demo-aparece 320ms var(--ease) both; }
.demo.demo-viva[data-paso="borrador"] .demo-draft section:nth-child(1) { animation-delay: 120ms; }
.demo.demo-viva[data-paso="borrador"] .demo-draft section:nth-child(2) { animation-delay: 300ms; }
.demo.demo-viva[data-paso="borrador"] .demo-draft section:nth-child(3) { animation-delay: 480ms; }
.demo.demo-viva[data-paso="borrador"] .demo-aprobar { animation-delay: 680ms; }
.demo.demo-viva[data-paso="respuestas"] .demo-textarea .demo-txt { animation: demo-aparece 420ms var(--ease) 200ms both; }
.demo.demo-viva[data-paso="final"] .demo-ok { animation: demo-aparece 320ms var(--ease) 150ms both; }
@keyframes demo-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* En pausa (mouse o foco sobre el teléfono, o fuera de la vista) se congela todo. */
.demo.demo-pausa *, .demo.demo-pausa *::before { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .demo-screen { transition: none; }
  .demo-orbe > span, .demo-track span, .demo.demo-viva .demo-draft section, .demo.demo-viva .demo-aprobar, .demo.demo-viva .demo-textarea .demo-txt, .demo.demo-viva .demo-ok { animation: none; }
}

.demo figcaption { margin: .75rem .25rem 0; text-align: center; color: var(--ink-2); font-size: .8125rem; }

/* ----------------------------------------------------------------- secciones */

.section { padding: clamp(3.5rem, 9vw, 5.5rem) 0; }
.section.sunken { background: var(--bg-sunken); }
.section h2, .closing h2 {
  font-size: clamp(1.875rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-wrap: balance;
}
.section h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; text-wrap: balance; }
#dolor h2 { max-width: 40rem; }

.versus { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.vs { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: 1.125rem; padding: 2rem; border-radius: var(--radius-card); font-size: 1.0625rem; }
.vs .eyebrow { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.vs-hoy { border: 1px solid var(--line-2); color: var(--ink-2); }
.vs-hoy .eyebrow { color: var(--ink); }
.vs-con { background: var(--ink); color: #ffffff; }
.vs-con .eyebrow { color: #ffffff; }
.vs p { position: relative; padding-left: 1.25rem; }
.vs p::before { content: ""; position: absolute; left: 0; top: .72em; width: .5rem; height: 2px; background: #b8bcc4; }
.vs-con p::before { background: #ffffff; }

/* Cómo funciona: la misma partición que «Formato», «Control clínico» y
   «Preguntas» —título y apertura a la izquierda, filas separadas por una línea
   fina a la derecha, la primera en tinta—. El número va en su propia columna
   para que la secuencia se lea sin pesar más que el título. Los modos del paso
   1 son frases («Nombre: qué haces»), así que van como lista de guiones, la
   misma marca de «Hoy / Con Evoluciona». */
.steps { flex: 2 1 28rem; min-width: 0; display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; padding: 1.5rem 0; border-top: 1px solid var(--line-2); }
.step:first-child { border-top-color: var(--ink); }
.step:last-child { border-bottom: 1px solid var(--line-2); }
.step-num { grid-row: 1 / span 2; font-size: 1.125rem; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.step > :not(.step-num) { grid-column: 2; }
.step h3 { max-width: 30rem; }
.step p { margin-top: .375rem; color: var(--ink-2); max-width: 34rem; }

.split { display: flex; flex-wrap: wrap; gap: 2.5rem 4rem; }
.split-head { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.claims, .faq { flex: 2 1 28rem; min-width: 0; display: flex; flex-direction: column; }
.claim { padding: 1.5rem 0; border-top: 1px solid var(--line-2); }
.claim:first-child { border-top-color: var(--ink); }
.claim:last-child { border-bottom: 1px solid var(--line-2); }
.claim h3 { max-width: 30rem; }
.claim p, .qa p { margin-top: .375rem; color: var(--ink-2); max-width: 34rem; }
.qa { padding: 1.5rem 0; border-top: 1px solid var(--line-2); }
.qa:first-child { border-top-color: var(--ink); }
.qa:last-child { border-bottom: 1px solid var(--line-2); }
.qa h3 { font-size: 1.125rem; max-width: 34rem; }
.qa a { font-weight: 600; }

/* Dos columnas en teléfono y tableta (2×2 con cuatro tarjetas; con un número impar, la
   de regalo ocupa la fila entera) y una sola fila en escritorio, con la de regalo más
   ancha. Funciona con cualquier cantidad de paquetes: landing.js pone los vigentes. */
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.prices > .price-free:nth-last-child(odd) { grid-column: 1 / -1; }
.price { min-width: 0; display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem; border-radius: var(--radius-card); background: var(--bg); border: 1px solid var(--line-2); }
@media (min-width: 60rem) {
  .prices { grid-template-columns: minmax(0, 1.4fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .prices > .price-free:nth-last-child(odd) { grid-column: auto; }
  /* Con cinco tarjetas o más, una sola fila deja los montos sin espacio: tres por fila. */
  .prices:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; }
  .price-amt { font-size: clamp(2rem, 3.2vw, 2.5rem); }
}
.price-tag { font-size: 1rem; font-weight: 700; color: var(--ink-2); }
.price-amt { margin-top: auto; font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.price-free { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.price-free .price-tag { color: rgba(255,255,255,.78); }
.price-note { color: rgba(255,255,255,.8); }

.formato-texto { flex: 2 1 28rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; color: var(--ink); font-size: 1.125rem; line-height: 1.6; }
.formato-texto p { max-width: 34rem; }
.formato-texto p + p { color: var(--ink-2); }

.closing-wrap { padding: 0 0 clamp(3.5rem, 9vw, 5.5rem); }
.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2.25rem, 6vw, 4rem);
  border-radius: 24px;
  background: var(--ink);
  color: #ffffff;
}
.closing-copy { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: .875rem; }
.closing-copy p { color: rgba(255,255,255,.82); font-size: 1.125rem; }
.closing-copy .cta { margin-top: .5rem; }
.closing-mark { flex-shrink: 0; width: clamp(5rem, 18vw, 10rem); height: auto; opacity: .92; }

/* -------------------------------------------------------------------- pie */

.foot { border-top: 1px solid var(--line); padding: 2rem 0 calc(2.5rem + env(safe-area-inset-bottom)); }
.foot-in { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.25rem 2rem; }
.foot .brand { margin-bottom: .375rem; }
.foot p { color: var(--ink-2); font-size: .9375rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; max-width: 34rem; font-size: .875rem; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-2); }
.foot-nav a:hover { color: var(--ink); }

@media (max-width: 40rem) {
  .masthead { position: static; }
  .nav { gap: 0 1.125rem; }
  .cta-par .cta { flex: 1 1 100%; }
}
@media (max-width: 30rem) {
  .wrap, .masthead-in { padding-left: 1.25rem; padding-right: 1.25rem; }
  .vs { padding: 1.5rem; }
  .prices { gap: .75rem; }
  .price { padding: 1.25rem; }
  .price-amt { font-size: 2rem; }
  .closing .cta { align-self: stretch; }
}
@media (max-width: 22rem) {
  .prices { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

/* ------------------------------------------- copia nueva (15 oct) */
.demo-leyenda { margin: 1rem .25rem 0; min-height: 1.5em; text-align: center; color: var(--ink); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.demo-leyenda + figcaption { margin-top: .375rem; }
.steps-nota { flex: 1 1 100%; margin-left: auto; max-width: 36rem; color: var(--ink-2); }
@media (min-width: 60rem) { .steps-nota { flex-basis: auto; width: calc(66.6% - 2.5rem); } }
.especialidades { flex: 2 1 28rem; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.especialidades li { padding: 1.125rem 0; border-bottom: 1px solid var(--line-2); font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.especialidades li:nth-child(odd) { padding-right: 1rem; }
@media (min-width: 48rem) { .especialidades { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .nav .nav-extra { display: none; } }