/* Generado por scripts/build-servicios.mjs a partir de los módulos de css/. No editar a mano. */
/* ===== css/servicio.css ===== */
/* Páginas interiores: servicios, índice de servicios, legales y 404. Mismo lenguaje que el inicio: sala de imagen. */

/* ---------- Migas de pan ---------- */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-xs);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  white-space: nowrap;
}
.breadcrumbs li + li::before {
  content: "/";
  color: var(--control);
}
.breadcrumbs a {
  text-decoration: underline;
  text-decoration-color: var(--hairline-paper);
}
.breadcrumbs [aria-current] {
  color: var(--ink);
  font-weight: 500;
}
.on-console .breadcrumbs ol {
  color: var(--on-console-soft);
}
.on-console .breadcrumbs li + li::before {
  color: var(--on-console-soft);
}
.on-console .breadcrumbs a {
  text-decoration-color: var(--hairline-console-strong);
}
.on-console .breadcrumbs [aria-current] {
  color: var(--on-console);
}
@media (hover: hover) {
  .breadcrumbs a:hover {
    color: var(--signal-deep);
  }
  .on-console .breadcrumbs a:hover {
    color: var(--signal);
  }
}

/* ---------- Hero del servicio: consola con arcos de ecografía ---------- */
.service-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: calc(var(--header-height) + var(--space-xs)) var(--space-2xl);
  background: var(--console-gradient);
  color: var(--on-console);
}
.service-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: 0.04;
  pointer-events: none;
}
/* Anillos concéntricos desde la esquina superior: la escala de profundidad de un ultrasonido. */
.service-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-radial-gradient(circle at 84% -12%, transparent 0 74px, var(--hairline-console) 74px 75px);
  -webkit-mask-image: linear-gradient(to bottom, var(--console), transparent 88%);
  mask-image: linear-gradient(to bottom, var(--console), transparent 88%);
  pointer-events: none;
}
.service-hero__grid {
  display: grid;
  gap: var(--space-lg);
}
.service-hero__body {
  display: grid;
  gap: var(--space-md);
  justify-items: start;
}
.service-hero__title {
  font-size: var(--text-2xl);
  font-stretch: var(--wdth-display);
  font-weight: 320;
  line-height: var(--leading-tight);
  letter-spacing: -0.034em;
  color: var(--on-console);
  animation: rise 1s var(--ease-out) both;
}
.service-hero .lede {
  color: var(--on-console-soft);
  animation: rise 0.9s var(--ease-out) 0.25s both;
}
.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-xs);
  animation: rise 0.9s var(--ease-out) 0.4s both;
}
.price-card {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-lg);
  border: 1px solid var(--hairline-console-strong);
  border-radius: var(--radius-lg);
  background: var(--glass-console);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  animation: rise 0.9s var(--ease-out) 0.5s both;
}
.price-card dl {
  display: grid;
}
.price-card dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--hairline-console);
  line-height: 1.3;
}
.price-card dt {
  text-wrap: balance;
  color: var(--on-console-soft);
}
.price-card dd {
  flex: none;
  font-weight: 600;
  text-align: right;
  color: var(--on-console);
}
.price-card dt.label + dd {
  font-weight: 400;
}
.price-card .label {
  color: var(--on-console-soft);
}
@media (min-width: 60rem) {
  .service-hero {
    padding-block: calc(var(--header-height) + var(--space-md)) var(--space-3xl);
  }
  .service-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-lg) var(--space-2xl);
    align-items: end;
  }
  .breadcrumbs {
    grid-column: 1 / -1;
  }
  .service-hero--urgent .service-hero__body,
  .service-hero--index .service-hero__body {
    grid-column: 1 / -1;
    max-width: 52rem;
  }
}

/* ---------- Urgencia ---------- */
.urgent {
  padding-block: var(--space-xl);
  background: var(--alarm);
  color: var(--paper-raised);
}
.urgent__grid {
  display: grid;
  gap: var(--space-md);
}
.urgent h2 {
  font-size: var(--text-xl);
}
.urgent__body {
  display: grid;
  gap: var(--space-md);
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: 1.5;
}
.urgent__body .bullets {
  display: grid;
  gap: var(--space-xs);
  padding-left: var(--space-lg);
  font-size: var(--text-base);
}
.urgent__body .bullets li::before {
  background: var(--paper-raised);
}
.urgent .cite,
.urgent .cite a {
  color: inherit;
}
.urgent .cite a {
  text-decoration: underline;
}
.urgent .btn--alarm {
  background: var(--paper-raised);
  color: var(--alarm);
  --btn-fill: var(--ink);
}
.urgent :focus-visible {
  outline-color: var(--paper-raised);
}
@media (hover: hover) {
  .urgent .btn--alarm:hover {
    color: var(--paper-raised);
  }
}
@media (min-width: 60rem) {
  .urgent__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-2xl);
  }
}

/* ---------- Índice de la página: barra fija con la sección actual ---------- */
.toc {
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--hairline-paper);
  background: var(--glass-paper-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.toc__details summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  cursor: pointer;
  width: fit-content;
  list-style: none;
}
.toc__details summary::-webkit-details-marker {
  display: none;
}
.toc__details summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--dur-short) var(--ease-out);
}
.toc__details[open] summary::after {
  transform: translateY(20%) rotate(-135deg);
}
.toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-xs);
  font-size: var(--text-sm);
}
.toc__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--space-sm);
  white-space: nowrap;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.toc__list a::after {
  content: "";
  position: absolute;
  inset: auto var(--space-sm) 0.4rem;
  height: 2px;
  background: var(--signal-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-long) var(--ease-out);
}
.toc__list a[aria-current]::after {
  transform: scaleX(1);
}
.toc__list a[aria-current] {
  color: var(--ink);
  font-weight: 600;
}
@media (hover: hover) {
  .toc__list a:hover {
    color: var(--ink);
  }
}
@media (min-width: 60rem) {
  body[data-page="servicio"],
  body[data-page="servicios"] {
    --sticky-extra: 3.75rem;
  }
  .toc {
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-sticky);
    transition: top var(--dur-long) var(--ease-out);
  }
  .site-header[data-hidden="true"] ~ main .toc {
    top: 0;
  }
  .toc__details summary {
    display: none;
  }
  .toc__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .toc__list::-webkit-scrollbar {
    display: none;
  }
}

/* ---------- Secciones del documento ---------- */
.doc-section {
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--rule);
}
.doc-section__grid {
  display: grid;
  gap: var(--space-lg);
}
.doc-section h2 {
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
}
.doc-section__body {
  min-width: 0;
}
.doc-section__body h3 {
  margin-top: var(--space-lg);
  font-size: var(--text-md);
}
.bullets {
  display: grid;
  gap: var(--space-xs);
  padding-left: var(--space-lg);
  list-style: none;
}
.bullets li {
  position: relative;
}
.bullets li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-md));
  top: 0.72em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--signal-deep);
  transform: rotate(45deg);
}
.note {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--paper-sunk);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
.steps {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  counter-reset: paso;
}
.steps::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 1px;
  background: var(--rule);
}
.steps li {
  position: relative;
  display: grid;
  gap: var(--space-2xs);
  padding-left: var(--space-2xl);
  counter-increment: paso;
}
.steps li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--signal-deep);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-stretch: var(--wdth-label);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--signal-deep);
}
.steps h3 {
  margin-top: 0;
}
.doc-section--alarm {
  background: var(--alarm-paper);
  border-bottom-color: var(--alarm);
}
.doc-section--alarm h2 {
  color: var(--alarm);
}
.alarm-list {
  display: grid;
  gap: var(--space-xs);
  padding-left: var(--space-lg);
  list-style: none;
}
.alarm-list li {
  position: relative;
}
.alarm-list li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-md));
  top: 0.72em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--alarm);
  border-radius: var(--radius-pill);
}
.alarm-action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
}
.alarm-action .link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  color: var(--alarm);
  font-weight: 600;
  white-space: nowrap;
}
.doc-scene__outro {
  max-width: var(--measure);
  margin-top: var(--space-xl);
  color: var(--on-console-soft);
}
.price-note {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.price-note .label {
  display: inline;
  margin-right: var(--space-xs);
  font-weight: 600;
  color: var(--ink);
}
.references__list {
  display: grid;
  gap: var(--space-sm);
  padding-left: var(--space-lg);
  list-style: decimal;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.references__list li::marker {
  font-variant-numeric: tabular-nums;
}
.references__list a {
  color: var(--signal-deep);
  overflow-wrap: anywhere;
}
.references__list li:target {
  color: var(--ink);
  background: var(--paper-sunk);
  outline: var(--space-2xs) solid var(--paper-sunk);
}

/* ---------- Servicios relacionados: losas con miniatura ---------- */
.related__list {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.related__link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  min-height: 4.5rem;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--hairline-paper);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  text-decoration: none;
  line-height: 1.3;
  isolation: isolate;
  overflow: hidden;
  transition:
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}
.related__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(16rem circle at var(--mx, 50%) var(--my, 50%), var(--signal-soft), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
.related__thumb {
  width: 4.5rem;
  height: 3.375rem;
  border-radius: var(--radius-sm);
  background: var(--console);
  object-fit: cover;
}
.related__text {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
}
.related__name {
  font-weight: 500;
}
.related__lede {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.related__arrow {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--signal-deep);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-short) var(--ease-out);
}
.related__conditions {
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.related__conditions .label {
  display: inline;
  margin-right: var(--space-xs);
  font-weight: 600;
  color: var(--ink);
}
@media (hover: hover) {
  .related__link:hover {
    border-color: var(--signal-line);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
  }
  .related__link:hover::before {
    opacity: 1;
  }
  .related__link:hover .related__arrow {
    transform: translateX(4px);
  }
}
@media (min-width: 60rem) {
  .doc-section {
    padding-block: var(--space-3xl);
  }
  .doc-section__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-2xl);
    align-items: start;
  }
  .doc-section h2 {
    position: sticky;
    top: calc(var(--header-height) + var(--space-3xl));
  }
}

/* ---------- Índice de servicios (página completa) ---------- */
.services--full .svc-row {
  align-items: start;
}

/* ---------- Legales y 404 ---------- */
.legal {
  padding-block: calc(var(--header-height) + var(--space-xs)) var(--section);
}
.legal__inner {
  display: grid;
  gap: var(--space-lg);
}
.legal__content h1 {
  font-size: var(--text-2xl);
  font-stretch: var(--wdth-display);
  font-weight: 320;
  letter-spacing: -0.034em;
}
.legal__content h2 {
  margin-top: var(--space-xl);
  font-size: var(--text-lg);
}
.legal__content h3 {
  margin-top: var(--space-md);
}
.legal__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.legal__content th,
.legal__content td {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.legal__content th {
  background: var(--paper-sunk);
}
.not-found {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100svh;
  padding-top: calc(var(--header-height) + var(--space-2xl));
}
.not-found h1 {
  font-size: var(--text-2xl);
  font-stretch: var(--wdth-display);
  font-weight: 320;
  letter-spacing: -0.034em;
}
.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}

/* ===== css/scene.css ===== */
/* Escena de imagen: visor (3D o SVG) + pasos en HTML.
 * Sin JS o sin WebGL: lista de pasos, cada uno con su imagen pre-renderizada (data-mode ausente o "fallback").
 * data-mode="scroll": visor fijo con position: sticky y pasos que avanzan con el scroll.
 * data-mode="paged":  movimiento reducido o pausado; visor estático y botones Anterior / Siguiente. */
.scene {
  display: grid;
  gap: var(--space-xl);
}
.scene__stage {
  display: none;
  min-width: 0;
}
.scene[data-scene-type="svg"] .scene__stage,
.scene[data-mode="scroll"] .scene__stage,
.scene[data-mode="paged"] .scene__stage {
  display: grid;
  gap: var(--space-md);
}
.scene__viewport {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--console-2);
  color: var(--on-console);
  box-shadow:
    0 0 0 1px var(--hairline-console-strong),
    0 44px 90px -40px var(--console);
}
/* Viñeta y líneas de exploración: el visor se lee como un monitor de imagen. */
.scene__viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  pointer-events: none;
  background:
    var(--console-vignette),
    repeating-linear-gradient(to bottom, transparent 0 3px, color-mix(in srgb, var(--console) 16%, transparent) 3px 4px);
}
.scene__hud {
  position: absolute;
  left: var(--space-lg);
  top: var(--space-md);
  z-index: calc(var(--z-raised) + 1);
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  pointer-events: none;
}
.scene__hud-n {
  font-size: var(--text-lg);
  font-stretch: var(--wdth-display);
  font-weight: 300;
  line-height: 1;
  color: var(--on-console);
}
.scene__hud-of {
  font-size: var(--text-xs);
  color: var(--on-console-soft);
}
.scene__hud-title {
  margin-left: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--signal);
}
.scene__rail {
  position: absolute;
  right: var(--space-md);
  top: 24%;
  bottom: 24%;
  z-index: calc(var(--z-raised) + 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2px;
  background: var(--hairline-console-strong);
  pointer-events: none;
}
.scene__rail-fill {
  position: absolute;
  inset: 0;
  background: var(--signal);
  transform: scaleY(var(--scene-p, 0));
  transform-origin: top;
  transition: transform var(--dur-short) linear;
}
.scene__rail b {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin-left: -3.5px;
  border: 1px solid var(--on-console-soft);
  border-radius: var(--radius-pill);
  background: var(--console);
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}
.scene__rail b.is-on {
  border-color: var(--signal);
  background: var(--signal);
}
.scene__rail b.is-current {
  transform: scale(1.5);
  box-shadow: 0 0 0 4px var(--signal-soft);
}
/* Esquinas de visor: mismo encuadre para todas las escenas */
.scene__viewport::after {
  content: "";
  position: absolute;
  inset: var(--space-sm);
  z-index: var(--z-raised);
  pointer-events: none;
  --tick: var(--on-console-soft);
  background:
    linear-gradient(var(--tick), var(--tick)) left top / 14px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) left top / 1px 14px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right top / 14px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right top / 1px 14px no-repeat,
    linear-gradient(var(--tick), var(--tick)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right bottom / 1px 14px no-repeat;
  opacity: 0.55;
}
.scene__poster,
.scene__poster img,
.scene__canvas,
.scene__labels,
.scene__viewport > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene__poster img {
  object-fit: cover;
}
.scene__canvas {
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out);
}
.scene.is-live .scene__canvas {
  opacity: 1;
}
.scene.is-live .scene__poster {
  visibility: hidden;
}
.scene__labels {
  pointer-events: none;
  overflow: hidden;
}
.scene-label {
  position: absolute;
  left: 0;
  top: 0;
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-xs);
  font-stretch: var(--wdth-label);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--on-console-soft);
  transition: color var(--dur-short) var(--ease-out);
  will-change: transform;
}
.scene-label.is-active {
  color: var(--on-console);
}
.scene__leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.scene__leaders line {
  stroke: var(--on-console-soft);
  stroke-width: 1;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}
.scene__leaders line.is-active {
  stroke: var(--signal);
  opacity: 1;
}
.scene__leaders circle {
  fill: var(--on-console-soft);
}
.scene__leaders circle.is-active {
  fill: var(--signal);
}

/* Pasos */
.scene__steps {
  display: grid;
  gap: var(--space-xl);
  min-width: 0;
}
.scene__step {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline-console);
}
.scene__step-poster {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--console-2);
}
.scene__step-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene__step-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--text-lg);
  font-stretch: var(--wdth-heading);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.scene__step-n {
  flex: none;
  font-size: var(--text-sm);
  font-stretch: var(--wdth-label);
  font-weight: 600;
  color: var(--signal);
}
.scene__step-n::after {
  content: ".";
}
.scene__step-text {
  display: grid;
  gap: var(--space-sm);
  max-width: 52ch;
  color: var(--on-console-soft);
}
.scene__step-text > p:first-child {
  color: var(--on-console);
}
.scene__step-text .bullets {
  display: grid;
  gap: var(--space-2xs);
  padding-left: var(--space-md);
  list-style: none;
}
.scene__step-text .bullets li {
  position: relative;
}
.scene__step-text .bullets li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-md));
  top: 0.72em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--signal);
  transform: rotate(45deg);
}
.scene__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xs);
}
.scene__links ul {
  display: grid;
  margin-top: var(--space-2xs);
}
.scene__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  line-height: 1.25;
  color: var(--on-console);
  text-decoration: underline;
  text-decoration-color: var(--console-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--dur-short) var(--ease-out);
}
.scene__links li:not(:has(a)) {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}
@media (hover: hover) {
  .scene__links a:hover {
    color: var(--signal);
  }
}

/* Controles de pasos */
.scene__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.scene__status {
  flex: 1;
  text-align: center;
}

/* ---------- Modo scroll ---------- */
.scene[data-mode="scroll"] .scene__step-poster,
.scene[data-mode="paged"] .scene__step-poster {
  display: none;
}
.scene[data-mode="scroll"] {
  gap: 0;
}
.scene[data-mode="scroll"] .scene__stage {
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-raised);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-sm) var(--gutter) var(--space-md);
  background: var(--console);
}
.scene[data-mode="scroll"] .scene__viewport {
  aspect-ratio: auto;
  height: 44svh;
  min-height: 15rem;
}
/* El paso en lectura se distingue por opacidad y por el color del título. La atenuación se queda en 0.75:
 * por debajo, el texto de los pasos vecinos deja de cumplir el contraste 4.5:1 sobre la consola. */
.scene[data-mode="scroll"] .scene__step {
  position: relative;
  min-height: 46svh;
  padding-block: var(--space-lg);
  padding-left: var(--space-lg);
  border-top: 0;
  border-left: 1px solid var(--hairline-console);
  opacity: 0.75;
  transition: opacity var(--dur-long) var(--ease-out);
}
.scene[data-mode="scroll"] .scene__step::before {
  content: "";
  position: absolute;
  left: -1px;
  top: var(--space-lg);
  width: 2px;
  height: 0;
  background: var(--signal);
  transition: height var(--dur-long) var(--ease-out);
}
.scene[data-mode="scroll"] .scene__step.is-active::before {
  height: calc(100% - 2 * var(--space-lg));
}
.scene[data-mode="scroll"] .scene__step-title {
  color: var(--on-console-soft);
  transition: color var(--dur-long) var(--ease-out);
}
.scene[data-mode="scroll"] .scene__step.is-active {
  opacity: 1;
}
.scene[data-mode="scroll"] .scene__step.is-active .scene__step-title {
  color: var(--on-console);
}
.scene[data-mode="scroll"] .scene__step:last-child {
  min-height: 34svh;
}

/* ---------- Modo por pasos ---------- */
.scene[data-mode="paged"] .scene__step:not(.is-active) {
  display: none;
}
.scene[data-mode="paged"] .scene__step {
  border-top: 0;
  padding-top: 0;
}

/* ---------- Ilustraciones SVG ---------- */
.scene__viewport > svg {
  fill: none;
  stroke: var(--on-console-soft);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scene__viewport > svg {
  stroke-width: 2.5;
}
.scene__viewport > svg text {
  fill: var(--on-console-soft);
  stroke: none;
  font-family: var(--font-system);
  font-size: 28px;
  font-stretch: var(--wdth-label);
  font-weight: 500;
}
.scene__viewport > svg .is-solid {
  fill: var(--console-2);
}
.scene__viewport > svg .is-thick {
  stroke-width: 6;
}
.scene__viewport > svg [data-step] {
  opacity: 0.28;
  transition: opacity var(--dur-long) var(--ease-out);
}
.scene__viewport > svg [data-step].is-on,
.scene:not([data-mode]) .scene__viewport > svg [data-step],
.scene[data-mode="fallback"] .scene__viewport > svg [data-step] {
  opacity: 1;
}
.scene__viewport > svg .is-signal {
  stroke: var(--signal);
}
.scene__viewport > svg .is-signal-fill {
  fill: var(--tint-signal);
  stroke: var(--signal);
}
.scene__viewport > svg .is-tool {
  stroke: var(--copper-light);
}
.scene__viewport > svg .is-tool-fill {
  fill: var(--copper-light);
  stroke: none;
}
.scene__viewport > svg .is-soft {
  stroke: var(--console-rule);
}
.scene__viewport > svg text.is-signal-text {
  fill: var(--signal);
}
.scene__viewport > svg text.is-tool-text {
  fill: var(--copper-light);
}

@media (min-width: 60rem) {
  .scene[data-mode="scroll"] {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-2xl);
    align-items: start;
  }
  .scene[data-mode="scroll"] .scene__stage {
    top: calc(var(--header-height) + var(--sticky-extra) + var(--space-lg));
    margin-inline: 0;
    padding: 0;
    background: none;
  }
  .scene[data-mode="scroll"] .scene__viewport {
    height: calc(100svh - var(--header-height) - var(--sticky-extra) - 2 * var(--space-lg));
    max-height: 46rem;
  }
  .scene[data-mode="scroll"] .scene__step {
    min-height: 68svh;
    align-content: center;
    padding-left: var(--space-xl);
  }
  .scene[data-mode="scroll"] .scene__step::before {
    top: 20%;
  }
  .scene[data-mode="scroll"] .scene__step.is-active::before {
    height: 60%;
  }
  .scene[data-mode="scroll"] .scene__step:last-child {
    min-height: 68svh;
  }
  .scene[data-mode="paged"],
  .scene:not([data-mode])[data-scene-type="svg"],
  .scene[data-mode="fallback"][data-scene-type="svg"] {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-2xl);
    align-items: start;
  }
  .scene:not([data-mode])[data-scene-type="three"] .scene__steps,
  .scene[data-mode="fallback"][data-scene-type="three"] .scene__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-2xl);
  }
}

/* ===== css/assistant.css ===== */
/* Preconsulta: solo capa visual. El <dialog> nativo aporta el foco contenido y la tecla Escape. */
.preconsultation {
  --intake-height: 100dvh;
  --intake-offset: 0px;
  width: min(60rem, calc(100% - 2 * var(--space-xl)));
  max-width: 60rem;
  height: min(46rem, calc(100dvh - 2 * var(--space-xl)));
  max-height: calc(100dvh - 2 * var(--space-xl));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: var(--shadow-dialog);
  overflow: hidden;
}
.preconsultation[open] {
  display: flex;
  flex-direction: column;
  animation: intake-panel var(--dur-long) var(--ease-out);
}
.preconsultation::backdrop {
  background: var(--scrim);
}
.preconsultation__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-shrink: 0;
  min-height: 3.25rem;
  padding: 0 var(--space-sm) 0 var(--space-lg);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-sm);
  font-weight: 600;
}
.preconsultation__header .text-button {
  padding-inline: var(--space-sm);
  text-decoration: none;
}
.preconsultation__body {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  flex: 1;
  min-height: 0;
}
.preconsultation__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg);
  background: var(--console);
  color: var(--on-console);
  overflow: hidden;
}
.preconsultation__kicker {
  font-size: var(--text-xs);
  font-stretch: var(--wdth-label);
  font-weight: 500;
  color: var(--on-console-soft);
}
.preconsultation__statement {
  font-family: var(--font-voice);
  font-style: italic;
  font-weight: 380;
  font-size: var(--text-xl);
  line-height: 1.2;
}
.preconsultation__monogram {
  display: none;
}
.preconsultation__doctor {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 600;
}
.preconsultation__specialty {
  font-size: var(--text-xs);
  color: var(--on-console-soft);
}
.preconsultation__privacy {
  padding-top: var(--space-md);
  border-top: 1px solid var(--console-rule);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--on-console-soft);
}
.preconsultation__surface {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.preconsultation__progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
  flex-shrink: 0;
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-xs);
  font-stretch: var(--wdth-label);
  color: var(--ink-soft);
}
.preconsultation__progress > span {
  padding-top: var(--space-xs);
  border-top: 2px solid var(--rule);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preconsultation__progress > span::before {
  content: none;
}
.preconsultation__progress [aria-current] {
  color: var(--ink);
  font-weight: 600;
  border-top-color: var(--signal-deep);
}
.preconsultation__content {
  flex: 1;
  min-height: 0;
  padding: var(--space-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.preconsultation h2 {
  margin-bottom: var(--space-lg);
  font-size: var(--text-xl);
  font-stretch: var(--wdth-heading);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.preconsultation h2:focus {
  outline: 0;
}
.preconsultation__content > p {
  margin-bottom: var(--space-md);
  max-width: 54ch;
}
.preconsultation__content .eyebrow {
  margin-bottom: var(--space-xs);
  font-size: var(--text-xs);
  font-stretch: var(--wdth-label);
  font-weight: 500;
  color: var(--ink-soft);
}
.preconsultation__content .preconsultation__note {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
.preconsultation__options {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.preconsultation__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 3.5rem;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--control);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  font-size: var(--text-base);
  text-align: left;
  line-height: 1.3;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out);
}
.preconsultation__option::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--control);
  border-radius: var(--radius-pill);
}
.preconsultation__option:active {
  background: var(--paper-sunk);
}
.preconsultation__option[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper-raised);
  opacity: 1;
}
.preconsultation__option[aria-pressed="true"]::before {
  border-color: var(--signal);
  background: var(--signal);
  box-shadow: inset 0 0 0 3px var(--ink);
}
.preconsultation__option[aria-pressed="true"]:focus-visible {
  outline-color: var(--signal-deep);
}
.preconsultation__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--rule);
  background: var(--paper-raised);
}
.consent-text {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: var(--space-sm);
}
.preconsultation form > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--signal-deep);
}
.check-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-block: var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.5;
  cursor: pointer;
}
.check-field input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--ink);
}
.input-field {
  display: block;
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
}
.input-field input,
.preconsultation textarea {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  margin-top: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  outline: 3px solid transparent;
  outline-offset: 1px;
  background: var(--paper-raised);
  font-size: 1rem;
  font-weight: 400;
}
.input-field input:focus-visible,
.preconsultation textarea:focus-visible {
  outline-color: var(--focus);
  border-color: var(--ink);
}
.input-field input[aria-invalid="true"] {
  border-color: var(--alarm);
  background: var(--alarm-paper);
}
.preconsultation textarea {
  margin-bottom: var(--space-md);
  resize: vertical;
}
.preconsultation__guardian,
.preconsultation__notice {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--alarm);
  border-radius: var(--radius-md);
  background: var(--alarm-paper);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.preconsultation__guardian {
  border-color: var(--copper-deep);
  background: var(--paper-sunk);
}
.preconsultation__summary {
  margin-block: var(--space-lg);
  border-top: 1px solid var(--ink);
}
.preconsultation__summary > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.preconsultation__summary dt {
  color: var(--ink-soft);
}
.preconsultation__summary dd {
  overflow-wrap: anywhere;
  font-weight: 500;
}
.preconsultation__send {
  display: flex;
  width: 100%;
  margin-bottom: var(--space-xs);
}
.preconsultation__patient {
  font-weight: 600;
}
.preconsultation .form__error {
  margin-top: var(--space-xs);
}
.preconsultation__content.is-advancing > h2 {
  opacity: 0.5;
  transition: opacity var(--dur-micro) var(--ease-in);
}
@keyframes intake-panel {
  from {
    opacity: 0;
    transform: translateY(var(--space-xs)) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Invitación: superficie no modal, no roba el foco ni bloquea la página. */
.intake-invitation {
  position: fixed;
  left: var(--space-md);
  right: var(--space-md);
  bottom: calc(var(--dock-height) + var(--space-lg) + env(safe-area-inset-bottom));
  z-index: var(--z-invitation);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  animation: intake-panel var(--dur-long) var(--ease-out);
}
.intake-invitation__rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 0 var(--space-2xs) 0 var(--space-md);
  background: var(--console);
  color: var(--on-console);
  font-size: var(--text-xs);
  font-stretch: var(--wdth-label);
  font-weight: 500;
}
.intake-invitation__close {
  width: 2.75rem;
  height: 2.75rem;
  font-size: var(--text-lg);
  line-height: 1;
  color: inherit;
}
.intake-invitation__rail :focus-visible {
  outline-color: var(--focus-console);
  outline-offset: -3px;
}
.intake-invitation__body {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
}
.intake-invitation__index {
  display: none;
}
.intake-invitation h2 {
  font-size: var(--text-lg);
  font-stretch: var(--wdth-heading);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.012em;
}
.intake-invitation h2 em {
  font-family: var(--font-voice);
  font-style: italic;
  font-weight: 380;
  color: var(--copper-deep);
}
.intake-invitation p {
  font-size: var(--text-sm);
  line-height: 1.5;
}
.intake-invitation .intake-invitation__note {
  font-size: var(--text-xs);
  color: var(--ink-soft);
}
.intake-invitation__actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xs);
}
@media (hover: hover) {
  .preconsultation__option:hover {
    border-color: var(--ink);
    background: var(--paper-sunk);
  }
  .preconsultation__option[aria-pressed="true"]:hover {
    background: var(--ink);
  }
}
@media (min-width: 60rem) {
  .intake-invitation {
    left: var(--space-lg);
    right: auto;
    bottom: var(--space-lg);
    width: 23rem;
  }
}
@media (max-width: 47.99rem) {
  .preconsultation {
    top: var(--intake-offset);
    left: 0;
    width: 100%;
    max-width: 100%;
    height: var(--intake-height);
    max-height: var(--intake-height);
    margin: 0;
    border-radius: 0;
  }
  .preconsultation__header {
    padding-top: env(safe-area-inset-top);
    padding-left: var(--space-md);
  }
  .preconsultation__body {
    display: block;
    flex: 1;
    min-height: 0;
  }
  .preconsultation__identity {
    display: none;
  }
  .preconsultation__surface {
    height: 100%;
  }
  .preconsultation__progress {
    padding: var(--space-sm) var(--space-md);
  }
  .preconsultation__content {
    padding: var(--space-lg) var(--space-md) calc(var(--space-lg) + env(safe-area-inset-bottom));
    scrollbar-gutter: auto;
  }
  .preconsultation__footer {
    position: sticky;
    bottom: calc(-1 * (var(--space-lg) + env(safe-area-inset-bottom)));
    padding-bottom: calc(var(--space-xs) + env(safe-area-inset-bottom));
  }
}