/*
  drapuente.com, landing (DP-009). Hoja única, sin dependencias externas.

  Identidad tomada del logo de la doctora (Drive, «Dra Puente/00 Brief y referencias»):
  negro, gris de vértebra #4D4D4D (muestreado en el PNG) y rojo #FF0000 (muestreado
  en la vértebra roja del logo). En el avatar el rojo es más oscuro, cerca de #C70706;
  ese es el rojo que se usa para texto y para el relleno de los botones.
  El rojo es solo acento: botón principal, numerales, filetes cortos y la vértebra.
  Las imágenes de fondo (bloques apilados en grafito y rojo) salen de
  «Dra Puente/01 Diseño/elementos-ia_2026-10-28/».

  Contraste WCAG 2.x medido (fórmula de luminancia relativa), 2026-10-28.
  Texto normal pide 4,5:1; texto grande y componentes gráficos piden 3:1.

  Sobre blanco #ffffff
    tinta      #141414  18,42:1  titulares y cuerpo
    gris       #4d4d4d   8,45:1  texto secundario
    rojo osc.  #c70706   6,07:1  etiquetas, numerales, anillo de foco
    rojo logo  #ff0000   4,00:1  NO pasa para texto pequeño: solo en piezas gráficas
                                 (la vértebra), donde pide 3:1
  Sobre el gris más oscuro de la portada #ececec (medido en la imagen, zona del texto
  entre #f0f0f0 y #fcfcfc; se toma el peor caso)
    tinta      #141414  15,59:1
    gris       #4d4d4d   7,16:1
    rojo osc.  #c70706   5,14:1
    blanco sobre botón #c70706: 6,07:1; borde del botón contra #ececec 5,14:1
  Video de la portada (escritorio): se decodificaron los 180 cuadros del WebM y se
  tomó el píxel más oscuro de la zona del texto (12 a 55 % del ancho, 15 a 75 % del
  alto) en todo el bucle: #e7e7e7 (231). El brillo rojo queda en la columna de la
  derecha y no llega a esa zona. Peor caso:
    tinta      #141414  14,90:1
    gris       #4d4d4d   6,84:1
    rojo osc.  #c70706   4,91:1  (etiqueta y borde del botón)
    blanco sobre botón #c70706: 6,07:1 (el botón es opaco, no depende del video)
  Estos valores corresponden a la escena original. El panel blanco semitransparente
  solicitado en DP-015 separa ahora el texto de la imagen también al ampliar la vista.
  Sobre franja #f4f4f4 (Procedimientos)
    tinta      #141414  16,75:1
    gris       #4d4d4d   7,69:1
    rojo osc.  #c70706   5,52:1  numerales y etiqueta
  Botones
    blanco sobre rojo #c70706       6,07:1  reposo (botón principal)
    blanco sobre rojo #9e0505       8,48:1  hover sobre fondo claro
    blanco sobre rojo #ff0000       4,00:1  no se usa con texto
    blanco sobre tinta #141414     18,42:1  botón de la cabecera
    blanco sobre #2b2b2b           14,16:1  hover del botón de la cabecera
  Bloque oscuro «Dónde» (fondo #050609 y la imagen oscura; en la zona del texto la
  imagen mide entre #010103 y #0d1016, se toma #0d1016 como peor caso)
    blanco     #ffffff  19,04:1  titular
    gris claro #b3b3b3   9,08:1  texto secundario
    rojo logo  #ff0000   4,76:1  etiqueta (aquí sí pasa AA)
    borde del botón: #c70706 contra #0d1016 3,14:1 (componente, pide 3:1)
    hover: blanco sobre #e00000 5,04:1
    anillo de foco blanco 19,04:1
  Piezas de apoyo (medido sobre las imágenes exportadas, peor píxel bajo el texto)
    Separador claro, zona del título y la etiqueta: escritorio #e7e7e7, móvil
    #ededed bajo la etiqueta y #c9c9c9 en el borde del arco (solo lo toca el título
    a 320 px). Rojo osc. 4,91:1 (#e7e7e7) y 5,18:1 (#ededed); tinta 11,13:1 en el
    peor caso; gris de los pasos 6,84:1.
    Arco vacío, portada en tableta, zona del texto: #e5e5e5. Tinta 14,62:1, gris
    6,71:1, rojo osc. 4,82:1.
    «Dónde» en móvil, bajo el texto (desde el 97 % de la imagen y luego carbón liso):
    #131313 como máximo. Blanco 18,58:1, gris claro 8,86:1, rojo logo 4,65:1; borde
    del botón 3,06:1 (componente, pide 3:1).
  Filetes #e2e2e2 y #d6d6d6: decorativos, no transmiten información.
*/

:root {
  --white: #ffffff;
  --mist: #f3f3f3;
  --band: #f4f4f4;
  --ink: #141414;
  --muted: #4d4d4d;
  --red: #c70706;
  --red-deep: #9e0505;
  --red-logo: #ff0000;
  --red-hover-dark: #e00000;
  --line: #e2e2e2;
  --line-band: #d6d6d6;
  --night: #050609;
  --night-text: #b3b3b3;
  --ink-hover: #2b2b2b;

  /* Sin fuentes externas: una sans de sistema con carácter para titulares
     (Avenir Next en Apple, Segoe UI en Windows, Roboto en Android). */
  --display: "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --section: clamp(64px, 9vw, 128px);
  --gutter: clamp(20px, 5vw, 56px);

  /* Sombra larga y suave, con la luz arriba a la izquierda como en las imágenes. */
  --shadow-long: 18px 28px 48px -12px rgba(20, 20, 20, 0.22), 4px 6px 14px -6px rgba(20, 20, 20, 0.12);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

ul, ol { padding: 0; list-style: none; }

svg, img { display: block; }
img { height: auto; }

.wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Accesibilidad ---------- */

.skip {
  position: absolute;
  left: var(--space-md);
  top: -100px;
  z-index: 10;
  padding: var(--space-sm) var(--space-md);
  background: var(--ink);
  color: var(--white);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: var(--space-md); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Etiquetas con la vértebra roja ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
/* La vértebra roja del logo, en pequeño: pieza gráfica, no texto. */
.eyebrow::before {
  content: "";
  flex: none;
  width: 18px;
  height: 9px;
  border-radius: 3px;
  background: var(--red-logo);
}
.eyebrow--dark { color: var(--red-logo); }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 10px;
  background: var(--red);
  color: var(--white);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 22px -12px rgba(158, 5, 5, 0.6);
  transition: background-color 200ms var(--ease-out), transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn__icon { width: 20px; height: 20px; flex: none; }

.btn--sm {
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.9375rem;
  border-radius: 8px;
}
.btn--sm .btn__icon { width: 18px; height: 18px; }

.btn--ink {
  background: var(--ink);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--red-deep); }
  .btn--ink:hover { background: var(--ink-hover); }
}

/* ---------- Cabecera ---------- */

.top {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-xs);
  border-radius: 6px;
}
.brand__visual {
  position: relative;
  display: block;
  line-height: 0;
}
.brand__visual picture { display: block; }
.brand__logo {
  display: block;
  width: auto;
  height: 48px;
  aspect-ratio: 16 / 9;
}
.brand__video {
  position: absolute;
  inset: 0;
  width: 100.0%;
  height: 100.0%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
}
.brand__visual--playing .brand__video { opacity: 1; }
.brand__visual--playing picture { opacity: 0; }

/* ---------- Portada ----------
   Móvil y tableta: gris de estudio en degradé y la foto en un arco.
   Escritorio: la imagen de la columna de bloques ocupa todo el ancho; el texto va en
   el espacio libre de la izquierda y la foto, en arco, se apoya en el piso de la
   escena, delante de la curva. La imagen de fondo solo se descarga en escritorio.
   Bucle de video (variante 4): la misma escena con los bloques ondulando y el rojo
   pulsando. Lo agrega un script corto del HTML solo desde 960 px y sin «reducir
   movimiento»; si no corre, queda esta imagen fija, que es idéntica al primer cuadro. */

.hero {
  position: relative;
  padding-block: clamp(40px, 7vw, 88px) 0;
  background: linear-gradient(180deg, #f6f6f6, var(--white));
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}

.hero__text {
  padding: clamp(20px, 2.5vw, 36px);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(20, 20, 20, 0.06);
}
.hero__text > * + * { margin-top: var(--space-lg); }

.hero h1 {
  max-width: 13em;
  font-size: clamp(2.25rem, 1.45rem + 3.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.lede {
  max-width: 34rem;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.55;
  color: var(--muted);
}

.hero .hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-xl);
}

.hero__actions .btn { max-width: 100.0%; white-space: normal; text-align: center; padding-block: 12px; }

.hero__note {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* La doctora, recortada (WebP con transparencia, sacada del avatar circular).
   El alfa ya trae el degradé inferior: el busto se funde con el fondo, sin corte.
   En móvil y tableta la portada termina en blanco y la sección siguiente no lleva
   filete, así el degradé se funde con ella. En escritorio se apoya en el piso de la
   escena, delante de la curva del arco.
   --photo-w fija el ancho de la figura y de la foto en cada tamaño de pantalla. */
.hero { --photo-w: min(80vw, 340px); }
/* Entre la portada y «Qué atiende» va el script del video: por eso el «+ script +». */
.hero + script + .block { border-top-color: transparent; }

.hero__figure {
  justify-self: center;
  width: var(--photo-w);
}

.hero__photo {
  width: var(--photo-w);
  height: auto;
  /* Sombra proyectada suave, con la luz arriba a la izquierda como en la escena. */
  filter: drop-shadow(16px 22px 26px rgba(20, 20, 20, 0.14));
}

/* Capa del video: detrás del texto y de la foto, sin recibir clics. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  pointer-events: none;
}
.hero__video {
  justify-self: stretch;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  object-position: right bottom;
}
.hero__grid { position: relative; z-index: 1; }

/* ---------- Bloques de contenido ---------- */

.block { padding-block: var(--section); border-top: 1px solid var(--line); }
.block--band { background: var(--band); border-top-color: transparent; }

.block__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.block__head > * + * { margin-top: var(--space-sm); }
.block__head h2 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); }
.block__head--wide { margin-bottom: var(--space-2xl); }

.block__intro {
  max-width: 30rem;
  padding-top: var(--space-xs);
  color: var(--muted);
}

/* Detalle macro de los bloques: decorativo, solo en escritorio. */
.block__art { display: none; }

/* Filas con filete, sin tarjetas. El filete superior lleva un tramo rojo. */
.rows {
  position: relative;
  border-top: 1px solid var(--ink);
}
.rows::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 48px;
  height: 3px;
  background: var(--red);
}

.row {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--line);
}
.block--band .row { border-bottom-color: var(--line-band); }

.row__title {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  line-height: 1.2;
}

.row__text {
  max-width: 34rem;
  color: var(--muted);
}

.rows--numbered { counter-reset: proc; }
.rows--numbered .row {
  counter-increment: proc;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--space-md);
}
.rows--numbered .row::before {
  content: counter(proc, decimal-leading-zero);
  grid-row: 1 / span 2;
  padding-top: 0.5em;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--red);
}
.rows--numbered .row > * { grid-column: 2; }

/* Desplegables de servicios: contenido presente en el HTML, sin JavaScript. */
.row__details { min-width: 0; }
.row__details summary {
  min-height: 44px;
  width: fit-content;
  padding-block: 8px;
  color: var(--red);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.row__details[open] summary { margin-bottom: var(--space-sm); }
.row__details .row__text { margin-bottom: var(--space-sm); }
.row__link { text-underline-offset: 4px; }

/* Pasos */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  align-content: start;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--ink);
}

.step__num {
  grid-row: 1 / span 2;
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--red);
  font-variant-numeric: lining-nums;
}

.step__title { font-size: 1.5rem; line-height: 1.2; }
.step__text { color: var(--muted); max-width: 26rem; }
.step__action {
  grid-column: 2;
  justify-self: start;
  max-width: 100.0%;
  margin-top: var(--space-xs);
  padding: 12px 20px;
  white-space: normal;
  text-align: center;
}

/* ---------- Dónde (banda oscura) ---------- */

.place {
  position: relative;
  background-color: var(--night);
  color: var(--white);
  padding-block: var(--section);
}

.place :focus-visible { outline-color: var(--white); }
.place__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background-image: url("columna-oscura-1920.jpg");
  background-image: image-set(url("columna-oscura-1920.webp") type("image/webp"), url("columna-oscura-1920.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
.place__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 6, 9, 0.92), rgba(5, 6, 9, 0.7) 58%, rgba(5, 6, 9, 0.3));
}
.place__video {
  display: block;
  width: 100.0%;
  height: 100.0%;
  object-fit: cover;
  object-position: right center;
  opacity: 0;
}
.place__video.is-ready { opacity: 1; }

/* En el home el texto comparte escena con la animación; el mapa queda fuera. */
.place:has(.place__scene) {
  display: block;
  padding-block: 0 var(--section);
  background-image: none;
}
.place__intro {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(500px, 42.4vw);
  padding-block: var(--section);
}
.place__intro .place__grid { flex: 1; }
.place:has(.place__scene) > .wrap { padding-top: var(--space-xl); }

.place__motion {
  display: block;
  margin-top: var(--space-md);
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--night-text);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.place__motion[hidden] { display: none; }

.place__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.place__body > * + * { margin-top: var(--space-md); }

.place__title {
  max-width: 16ch;
  font-size: clamp(2.125rem, 1.5rem + 3vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.place__text {
  max-width: 32rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--night-text);
}

.place__map { min-width: 0; }
.place__map-preview,
.place__map-frame {
  width: 100.0%;
  min-height: clamp(280px, 40vw, 440px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
}
.place__map-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  text-align: center;
  background: var(--night);
}
.place__map-title { font-size: 1.5rem; font-weight: 600; }
.place__map-note { max-width: 36rem; color: var(--night-text); }
.place__map-frame { display: block; background: var(--white); }
.place__map-link {
  display: inline-block;
  margin-top: var(--space-md);
  color: var(--white);
  text-underline-offset: 4px;
}
.place__map .btn[hidden] { display: none; }

.place .btn { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset; }

@media (hover: hover) and (pointer: fine) {
  .place .btn:hover { background: var(--red-hover-dark); }
}

/* ---------- Aviso y pie ---------- */

.notice {
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--line);
}
.notice p {
  max-width: 44rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.foot { padding-block: var(--space-xl) var(--space-2xl); }

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
}
.foot__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
}
.foot__mark { width: 9px; height: 22px; flex: none; }
.foot__meta { font-size: 0.875rem; color: var(--muted); }
.foot__credit { flex-basis: 100.0%; font-size: 0.8125rem; color: var(--muted); }
.foot__credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pantallas pequeñas ---------- */

@media (max-width: 359px) {
  .brand__logo { height: 42px; }
  .eyebrow { letter-spacing: 0.1em; }
  .btn--sm { padding: 0 12px; }
  .hero .btn { display: flex; flex: 1 1 auto; padding-inline: 18px; }
}

/* ---------- Tableta ---------- */

@media (min-width: 720px) {
  .hero__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-xl);
    align-items: center;
  }
  .hero__grid { align-items: end; }
  .hero__text { align-self: center; }
  .hero { --photo-w: min(38vw, 340px); }
  .hero h1 { font-size: clamp(2.25rem, 1rem + 3.4vw, 3rem); }
  .hero__figure { justify-self: end; }

  .place {
    background-image: url("columna-oscura-1920.jpg");
    background-image: image-set(url("columna-oscura-1920.webp") type("image/webp"), url("columna-oscura-1920.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    min-height: calc(100vw / 2.36);
    display: flex;
    align-items: center;
  }
  .place__scene::after {
    background: linear-gradient(90deg, rgba(5, 6, 9, 0.9), rgba(5, 6, 9, 0.58) 55%, rgba(5, 6, 9, 0.04) 80%);
  }
  .place__grid { flex: 1; }
  .place__body,
  .place__cta { max-width: 52%; }
}

@media (min-width: 768px) {
  .brand__logo { height: 60px; }
  .top__inner { min-height: 88px; }

  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
  .step { grid-template-columns: minmax(0, 1fr); }
  .step__action { grid-column: 1; }
  .step__num { grid-row: auto; font-size: 3rem; margin-bottom: var(--space-sm); }
}

/* ---------- Escritorio: escena a todo el ancho ---------- */

@media (min-width: 960px) {
  .hero {
    /* La escena mide 2688x1520. Con esta proporción el piso queda al 82 % del alto
       y la columna de bloques entre el 81 y el 93 % del ancho. */
    /* Alto con la proporción de la escena y un mínimo de 560 px. No se usa
       aspect-ratio + min-height: Chrome convierte ese mínimo en un ancho mínimo
       (990 px) y entre 960 y 990 px la portada desbordaba en horizontal. */
    min-height: max(56.55vw, 560px);
    padding-block: var(--space-xl) 10.2%;
    background-color: #f2f2f2;
    background-image: url("portada-columna-1920.jpg");
    background-image: image-set(url("portada-columna-1920.webp") type("image/webp"), url("portada-columna-1920.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
    display: grid;
  }

  .hero__grid {
    max-width: none;
    margin: 0;
    padding-left: max(var(--gutter), calc(50% - 600px + var(--gutter)));
    padding-right: 19%;
    grid-template-columns: minmax(0, 1fr) var(--photo-w);
    column-gap: 3%;
    align-items: end;
  }

  .hero__text { align-self: center; }

  .hero h1 { font-size: clamp(2.5rem, 0.9rem + 3vw, 3.75rem); }

  .hero { --photo-w: min(31vw, 460px); }
  /* El tramo que se desvanece baja un poco del piso: el busto «sale» de la escena. */
  .hero__figure { justify-self: end; margin-bottom: -4%; }
  .hero + script + .block { border-top-color: var(--line); }

  .block__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-3xl);
    align-items: start;
  }
  .block__head { position: sticky; top: var(--space-xl); }

  .block__art {
    display: block;
    width: min(28vw, 360px);
    margin-top: var(--space-2xl);
    border-radius: 20px;
    box-shadow: var(--shadow-long);
  }
}

/* ---------- Piezas de apoyo (Higgsfield, 2026-10-28) ----------
   Todas son fondos CSS dentro de una media query: el navegador solo las pide
   donde la regla aplica. */

/* Separador claro antes de «Cómo se agenda»: tres bloques sueltos a la derecha y
   el lado izquierdo vacío, donde cae el título. Se funde con el blanco hacia abajo. */
.block[aria-labelledby="agendar"] {
  background-color: var(--white);
  background-repeat: no-repeat;
  background-position: center top;
  /* La franja mide 21:9 (2688x1152): a todo el ancho, su alto es 42,86vw. El velo
     blanco es un poco más alto que la imagen para que su borde inferior no se note. */
  background-size: auto 44vw, auto 42.86vw;
}
@media (max-width: 767px) {
  .block[aria-labelledby="agendar"] {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #ffffff 92%), url("separador-claro-800.jpg");
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #ffffff 92%), image-set(url("separador-claro-800.webp") type("image/webp"), url("separador-claro-800.jpg") type("image/jpeg"));
  }
}
@media (min-width: 768px) {
  .block[aria-labelledby="agendar"] {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #ffffff 92%), url("separador-claro-1920.jpg");
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #ffffff 92%), image-set(url("separador-claro-1920.webp") type("image/webp"), url("separador-claro-1920.jpg") type("image/jpeg"));
    /* Los bloques ocupan del 26 al 71 % del alto de la franja: los pasos empiezan
       más abajo para que la tercera columna no quede sobre ellos. */
    padding-top: max(var(--section), 23vw);
  }
}

/* Las páginas interiores conservan su composición móvil anterior. */
@media (max-width: 719px) {
  .place:not(:has(.place__scene)) {
    background-image: linear-gradient(180deg, rgba(5, 6, 9, 0) 86%, var(--night)), url("donde-vertical-960.jpg");
    background-image: linear-gradient(180deg, rgba(5, 6, 9, 0) 86%, var(--night)), image-set(url("donde-vertical-960.webp") type("image/webp"), url("donde-vertical-960.jpg") type("image/jpeg"));
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 75.94vw;
    /* El último bloque termina al 85 % de la imagen: el texto empieza más abajo. */
    padding-top: calc(75.94vw * 0.97);
  }
}

/* Portada en tableta (720 a 959 px): la escena del arco sin bloques, para que la
   foto quede delante de la curva como en escritorio sin chocar con la columna.
   Abajo se funde con el blanco de «Qué atiende». */
@media (min-width: 720px) and (max-width: 959px) {
  .hero {
    background-color: #f4f4f4;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #ffffff), url("portada-arco-1600.jpg");
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #ffffff), image-set(url("portada-arco-1600.webp") type("image/webp"), url("portada-arco-1600.jpg") type("image/jpeg"));
    background-repeat: no-repeat;
    background-position: center, right bottom;
    background-size: auto, cover;
  }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__media { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .btn:active { transform: none; }
}

/* ---------- Páginas de tema (DP-010) ---------- */

.article { padding-block: var(--space-2xl) var(--section); }
.article__wrap { max-width: 52rem; }
.article__wrap > * + * { margin-top: var(--space-md); }
.article h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); margin-top: var(--space-sm); }
.crumbs { font-size: 0.875rem; color: var(--muted); }
.crumbs a { color: inherit; }
.article__cta { margin-top: var(--space-lg); }
.prose { margin-top: var(--space-2xl); }
.prose__sec { padding-top: var(--space-xl); margin-top: var(--space-xl); border-top: 1px solid var(--line); }
.prose h2, .faq h2, .related h2 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); margin-bottom: var(--space-sm); }
.prose p + p, .prose p + ul, .prose p + ol, .prose ul + p { margin-top: var(--space-sm); }
.prose p, .list li { max-width: 44rem; }
.list { list-style: disc; padding-left: 1.25rem; display: grid; gap: var(--space-xs); }
.list--num { list-style: decimal; }
.prose a, .related a { color: var(--red); text-underline-offset: 3px; }
.faq { margin-top: var(--space-3xl); }
.faq__item { border-top: 1px solid var(--line); padding-block: var(--space-md); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { cursor: pointer; font-weight: 600; font-family: var(--display); }
.faq__item p { margin-top: var(--space-sm); max-width: 44rem; color: var(--muted); }
.related { margin-top: var(--space-3xl); }
.article__art { margin-top: var(--space-xl); border-radius: 16px; overflow: hidden; background: var(--mist); }
.article__art { display: grid; }
.article__art img { width: auto; justify-self: stretch; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.row__title a { color: inherit; text-decoration: none; }
.row__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.row__title a:focus-visible { text-decoration: underline; }


/* Banner de consentimiento (consentimiento.js). Aceptar y Rechazar pesan lo mismo.
   Contraste: tinta #141414 sobre blanco 18,4:1; borde del botón tinta sobre blanco 18,4:1. */
.cc {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 50;
  max-width: 44rem;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  padding: 16px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line-band);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.cc[hidden] { display: none; }
.cc p { margin: 0; }
.cc__titulo { font-weight: 700; margin-bottom: 4px !important; }
.cc a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.cc__acciones { display: flex; gap: 10px; }
.cc__btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
}
.cc__btn:focus-visible, .cc__link:focus-visible, .cc a:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (hover: hover) { .cc__btn:hover { background: var(--ink); color: var(--white); } }
@media (min-width: 720px) {
  .cc { grid-template-columns: 1fr auto; align-items: center; left: 50%; right: auto; width: calc(100vw - 48px); transform: translateX(-50%); }
  .cc__btn { flex: 0 0 auto; min-width: 8rem; }
}
.cc__link {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.foot__privacy a { color: inherit; }