/*
  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)
  Todo pasa AA sin velo, así que no se agrega.
  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__logo {
  width: auto;
  height: 48px;
}

/* ---------- 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 > * + * { 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__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; }

/* 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; }

/* ---------- 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__grid {
  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 .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); }

/* ---------- 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; padding-bottom: var(--space-2xl); }
  .hero { --photo-w: min(38vw, 340px); }
  .hero h1 { font-size: clamp(2.25rem, 1rem + 3.4vw, 3rem); }
  .hero__figure { justify-self: end; }

  /* La banda oscura con la columna encendida, a la derecha; el texto a la izquierda. */
  .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__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__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. */
    height: max(56.55vw, 560px);
    padding-block: 0 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;
    padding-top: var(--space-2xl);
  }

  .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);
  }
}

/* «Dónde» en móvil: la columna vertical encendida arriba y el texto debajo, sobre
   el carbón liso. La imagen es un recorte 1792x1360 de la pieza 4:5 (alto 75,94vw
   a todo el ancho) y su borde inferior se funde con el fondo de la sección. */
@media (max-width: 719px) {
  .place {
    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; }
}