/*
  Opthalmos · styles.css (dirección consultorio)
  Generado por estilos.py, no editar a mano.
  Fuente: vendor/design-system (tokens.json y components/bundle.css, copia de brand/design-system/project
  del repo hq) más la sección "Esta página" de estilos.py, que pisa algunos tokens (papel blanco, oscuro
  petróleo, letra de titulares). Para cambiar algo: edita el sistema en hq y tráelo con
  python3 scripts/sincronizar_diseno.py, o edita PROPIOS en estilos.py y corre python3 estilos.py.
*/

/* ---------- Tokens (tokens.json) ---------- */

/* Tema claro, el predeterminado. */
:root {
  color-scheme: light dark;
  --turquesa: #2bb5b2;
  --turquesa-hondo: #176e6c;
  --turquesa-tenue: #e1f3f2;
  --petroleo: #1e4854;
  --petroleo-hondo: #173a44;
  --on-petroleo: #ffffff;
  --accion: var(--petroleo);
  --accion-presionada: var(--petroleo-hondo);
  --on-accion: var(--on-petroleo);
  --tinta: #14292e;
  --tinta-2: #3f5358;
  --papel: #f8f6f1;
  --superficie: #ffffff;
  --superficie-elevada: #ffffff;
  --linea: #d6dfde;
  --borde-control: #6b7f83;
  --foco: var(--petroleo);
  --aviso: #8a4a00;
  --aviso-tenue: #fcf1df;
  --wa-glifo: #25d366;
  --wa-recuadro: #ffffff;
  --esclerotica: #ffffff;
  --sombra-flotante: 0 4px 16px #0e1c1f3d;
  --font-titular: "Newsreader", Charter, "Iowan Old Style", Georgia, serif;
  --font-texto: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-6: 24px;
  --espacio-8: 32px;
  --espacio-12: 48px;
  --espacio-16: 64px;
  --radio-pequeno: 6px;
  --radio-medio: 8px;
  --radio-completo: 9999px;
  --trazo-motivo: 3px;
  --trazo-anillo: 5px;
  --trazo-filete: 1px;
  --trazo-control: 2px;
  --trazo-foco: 3px;
  --separacion-foco: 2px;
  --toque-minimo: 48px;
  --boton-principal: 60px;
  --recuadro-whatsapp: 44px;
  --anillo-paso: 45px;
  --medida-texto: 40rem;
  --logo-encabezado: 150px;
  --logo-minimo: 130px;
  --simbolo-minimo: 16px;
}

/* Tema oscuro: sigue el ajuste del teléfono. */
@media (prefers-color-scheme: dark) {
  :root {
    --turquesa: #2bb5b2;
    --turquesa-hondo: #5ccfcb;
    --turquesa-tenue: #173034;
    --petroleo: #1e4854;
    --petroleo-hondo: #173a44;
    --on-petroleo: #ffffff;
    --accion: var(--turquesa);
    --accion-presionada: var(--turquesa-hondo);
    --on-accion: var(--papel);
    --tinta: #e9f0ef;
    --tinta-2: #a9bcbd;
    --papel: #0e1c1f;
    --superficie: #14272b;
    --superficie-elevada: #1b3237;
    --linea: #27403f;
    --borde-control: #7f9598;
    --foco: var(--turquesa-hondo);
    --aviso: #f2b866;
    --aviso-tenue: #2b2213;
    --wa-glifo: #25d366;
    --wa-recuadro: #ffffff;
    --esclerotica: #ffffff;
    --sombra-flotante: 0 4px 16px #000000a3;
  }
}

/* ---------- Fuentes (assets/fonts, recortadas al alfabeto latino, licencia OFL 1.1) ---------- */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/atkinson-hyperlegible-next-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/atkinson-hyperlegible-next-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/atkinson-hyperlegible-next-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Opthalmos Titular";
  src: url("assets/fonts/opthalmos-titular-340.woff2") format("woff2");
  font-weight: 340;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Opthalmos Titular";
  src: url("assets/fonts/opthalmos-titular-420.woff2") format("woff2");
  font-weight: 420;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Opthalmos Cifras";
  src: url("assets/fonts/opthalmos-cifras-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: "Opthalmos Cifras";
  src: url("assets/fonts/opthalmos-cifras-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039;
}

/* ---------- Componentes (components/bundle.css, sin cambios) ---------- */

/*
  Opthalmos · componentes de la landing de cita.
  HTML y CSS sin dependencias: cada componente es marcado semántico con clases .op-*.
  Solo var(--token) para color, espacio, radio, trazo, medida y sombra; ningún color literal.
  Los tamaños de letra van en rem y copian los estilos de tokens.json (cuerpo 18 px = 1.125rem)
  para que el botón A+ los agrande; los controles del encabezado van en px para no desbordar a 320 px.
  Móvil primero (375 px); cambios a 768 y 1024 px.
*/

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* A+ (Encabezado): la raíz sube de 16 a 18,67 px y el cuerpo de 18 a 21 px. */
html[data-letra="grande"] { font-size: 116.6667%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--font-texto);
  font-size: 1.125rem;          /* cuerpo */
  line-height: 1.55;
}

img, svg { display: block; max-width: 100%; }

/* Anillo de foco único de la marca: sólido, 3 px, a 2 px del elemento. */
:focus-visible,
[data-muestra="foco"] {
  outline: var(--trazo-foco) solid var(--foco);
  outline-offset: var(--separacion-foco);
}

/* Texto solo para lectores de pantalla. */
.op-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Íconos de Lucide en línea: 24 px, trazo 2 px, color heredado. */
.op-icono {
  flex: none;
  width: var(--espacio-6);
  height: var(--espacio-6);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dato que falta: se ve a propósito para que nadie publique un marcador. */
.op-pendiente {
  padding: 0 var(--espacio-1);
  border: var(--trazo-control) dashed var(--borde-control);
  border-radius: var(--radio-pequeno);
  color: var(--tinta-2);
  font-weight: 400;
  font-style: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.op-nowrap { white-space: nowrap; }

/* Enlace de texto: turquesa hondo, negrita y subrayado, nunca solo por color. */
.op-enlace {
  color: var(--turquesa-hondo);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}
.op-enlace:hover { text-decoration-thickness: var(--trazo-control); }

/* ---------- Estructura de página ---------- */

.op-contenedor {
  width: 100%;
  max-width: calc(var(--medida-texto) * 1.5 + var(--espacio-4) * 2);
  margin-inline: auto;
  padding-inline: var(--espacio-4);
}

.op-seccion {
  padding-block: var(--espacio-12);
  border-top: var(--trazo-filete) solid var(--linea);
  scroll-margin-top: var(--espacio-4);
}

.op-h2 {
  margin: 0 0 var(--espacio-3);
  max-width: var(--medida-texto);
  font-family: var(--font-titular);
  font-weight: 600;
  font-size: 2rem;              /* h2 */
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--tinta);
  text-wrap: balance;
}

/* La primera frase de cada sección: responde la pregunta del h2, completa. */
.op-respuesta {
  margin: 0 0 var(--espacio-6);
  max-width: var(--medida-texto);
  font-size: 1.25rem;           /* cuerpo-grande */
  line-height: 1.5;
  color: var(--tinta);
}

.op-texto {
  margin: 0 0 var(--espacio-4);
  max-width: var(--medida-texto);
}

/* Lista corta de lo que se atiende. */
.op-lista {
  margin: 0;
  padding-left: var(--espacio-6);
  max-width: var(--medida-texto);
}
.op-lista li { padding-block: var(--espacio-1); }
.op-lista li::marker { color: var(--turquesa-hondo); }

@media (min-width: 1024px) {
  .op-seccion { padding-block: var(--espacio-16); }
  .op-h2 { font-size: 2.5rem; }
}

/* ---------- Encabezado ---------- */

.op-encabezado {
  background: var(--papel);
  border-bottom: var(--trazo-filete) solid var(--linea);
}

.op-encabezado__fila {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  width: 100%;
  max-width: calc(var(--medida-texto) * 1.5 + var(--espacio-4) * 2);
  margin-inline: auto;
  padding: var(--espacio-2) var(--espacio-4);
}

.op-encabezado__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-minimo);
  margin-right: auto;
  border-radius: var(--radio-pequeno);
}
.op-encabezado__logo img {
  width: var(--logo-encabezado);
  height: auto;
}

/* Botón A+: borde de control, en px para que no crezca con su propio efecto. */
.op-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--toque-minimo);
  min-height: var(--toque-minimo);
  padding: 0 var(--espacio-2);
  border: var(--trazo-control) solid var(--borde-control);
  border-radius: var(--radio-medio);
  background: none;
  color: var(--tinta);
  font-family: var(--font-texto);
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}
.op-control[aria-pressed="true"] {
  border-color: var(--tinta);
  background: var(--turquesa-tenue);
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Botón corto "Cita": el mismo color de acción que el botón principal. */
.op-cita-corta {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-minimo);
  padding: 0 var(--espacio-4);
  border-radius: var(--radio-medio);
  background: var(--accion);
  color: var(--on-accion);
  font-family: var(--font-texto);
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
}
.op-cita-corta:hover,
.op-cita-corta:active { background: var(--accion-presionada); }

@media (max-width: 359px) {
  .op-encabezado__logo img { width: calc(var(--logo-encabezado) * 0.75); }
}

/* ---------- TituloCita ---------- */

.op-titulo { padding-block: var(--espacio-8) var(--espacio-6); }

.op-titulo__ceja {
  margin: 0 0 var(--espacio-3);
  max-width: var(--medida-texto);
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--tinta-2);
}

.op-titulo__h1 {
  margin: 0 0 var(--espacio-6);
  max-width: var(--medida-texto);
  font-family: var(--font-titular);
  font-weight: 600;
  font-size: 2.5rem;            /* h1 */
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-wrap: balance;
}

/* La línea del logo: sale hacia abajo y corre bajo la frase, en turquesa de 3 px, sin el ojo. */
.op-subrayado {
  position: relative;
  display: inline-block;
  padding-right: var(--espacio-3);
  padding-bottom: var(--espacio-3);
  white-space: nowrap;
}
.op-subrayado::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--trazo-motivo);
  background: var(--turquesa);
}
.op-subrayado::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--trazo-motivo);
  height: var(--espacio-6);
  background: var(--turquesa);
}

.op-titulo__sub {
  margin: 0 0 var(--espacio-8);
  max-width: var(--medida-texto);
  font-size: 1.25rem;           /* cuerpo-grande */
  line-height: 1.5;
  color: var(--tinta);
}

@media (min-width: 768px) {
  .op-titulo { padding-block: var(--espacio-12) var(--espacio-8); }
  .op-titulo__h1 { font-size: 3.5rem; }
}
@media (min-width: 1024px) {
  .op-titulo__h1 { font-size: 4rem; max-width: calc(var(--medida-texto) * 1.25); }
}

/* ---------- BotonWhatsApp ---------- */

.op-cta {
  display: grid;
  justify-items: start;
  gap: var(--espacio-3);
  max-width: var(--medida-texto);
}

.op-boton-wa {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  width: 100%;
  min-height: var(--boton-principal);
  padding: var(--espacio-2) var(--espacio-4) var(--espacio-2) var(--espacio-2);
  border: 0;
  border-radius: var(--radio-medio);
  background: var(--accion);
  color: var(--on-accion);
  font-family: var(--font-texto);
  font-size: 1.25rem;           /* texto-boton */
  line-height: 1.2;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.op-boton-wa:hover,
.op-boton-wa:active,
.op-boton-wa[data-muestra="presionado"] { background: var(--accion-presionada); }

/* Recuadro blanco con el dibujo oficial de WhatsApp: el único lugar del verde. */
.op-wa-recuadro {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--recuadro-whatsapp);
  height: var(--recuadro-whatsapp);
  border-radius: var(--radio-pequeno);
  background: var(--wa-recuadro);
}
.op-wa-glifo {
  width: calc(var(--recuadro-whatsapp) - var(--espacio-4));
  height: calc(var(--recuadro-whatsapp) - var(--espacio-4));
}
.op-wa-glifo path { fill: var(--wa-glifo); }

.op-cta__nota {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

.op-cta__tel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--espacio-2);
  margin: 0;
  color: var(--tinta-2);
}

/* Teléfono tocable: estilo telefono, cifras tabulares, siempre enlace tel:. */
.op-telefono {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  min-height: var(--toque-minimo);
  color: var(--turquesa-hondo);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

/* Variante del cierre: bloque en superficie con la pregunta y el mismo botón. */
.op-cierre {
  display: grid;
  gap: var(--espacio-4);
  max-width: var(--medida-texto);
  padding: var(--espacio-6) var(--espacio-4);
  border: var(--trazo-filete) solid var(--linea);
  border-radius: var(--radio-medio);
  background: var(--superficie);
}
.op-cierre .op-h2,
.op-cierre .op-respuesta { margin: 0; }

@media (min-width: 768px) {
  .op-boton-wa { width: auto; padding-right: var(--espacio-6); }
  .op-cierre { padding: var(--espacio-8); }
}

/* ---------- EstadoAgenda ---------- */

.op-estado {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--toque-minimo);
  margin: 0;
  padding: var(--espacio-2) var(--espacio-3);
  border: var(--trazo-filete) solid var(--linea);
  border-radius: var(--radio-medio);
  background: var(--superficie);
  color: var(--tinta);
  font-size: 1.125rem;          /* horario */
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.op-estado .op-icono { color: var(--tinta-2); }
.op-estado[data-estado="abierto"] .op-icono { color: var(--turquesa-hondo); }
.op-estado__texto { min-width: 0; }
.op-estado__fuerte { font-weight: 700; }

/* ---------- PasosCita ---------- */

.op-pasos {
  display: grid;
  gap: var(--espacio-6);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--medida-texto);
}

.op-paso {
  position: relative;
  display: grid;
  grid-template-columns: var(--anillo-paso) 1fr;
  column-gap: var(--espacio-4);
  align-items: start;
  align-content: start;
}

/* El hilo: de un anillo al siguiente, detrás de ellos. */
.op-paso:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc((var(--anillo-paso) - var(--trazo-motivo)) / 2);
  top: calc(var(--anillo-paso) / 2);
  width: var(--trazo-motivo);
  height: calc(100% + var(--espacio-6));
  background: var(--turquesa);
}

/* Anillo con la proporción de la O del logo. */
.op-paso__anillo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--anillo-paso);
  height: var(--anillo-paso);
  border: var(--trazo-anillo) solid var(--turquesa);
  border-radius: var(--radio-completo);
  background: var(--superficie);
  color: var(--tinta);
  font-size: 1.125rem;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.op-paso--final .op-paso__anillo {
  background: var(--accion);
  color: var(--on-accion);
}

.op-paso__titulo {
  margin: var(--espacio-2) 0 var(--espacio-1);
  font-family: var(--font-texto);
  font-size: 1.25rem;           /* titulo-corto */
  line-height: 1.3;
  font-weight: 700;
  color: var(--tinta);
}
.op-paso__texto {
  margin: 0;
  color: var(--tinta-2);
}

@media (min-width: 768px) {
  .op-pasos {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }
  .op-paso {
    grid-template-columns: 1fr;
    row-gap: var(--espacio-3);
  }
  .op-paso:not(:last-child)::after {
    left: calc(var(--anillo-paso) / 2);
    top: calc((var(--anillo-paso) - var(--trazo-motivo)) / 2);
    width: calc(100% + var(--espacio-6));
    height: var(--trazo-motivo);
  }
  .op-paso__titulo { margin-top: 0; }
}

/* ---------- FichaMedica ---------- */

.op-fichas {
  display: grid;
  gap: var(--espacio-4);
}

.op-ficha {
  display: grid;
  grid-template-columns: calc(var(--espacio-16) * 2) 1fr;
  column-gap: var(--espacio-4);
  align-items: start;
  align-content: start;
  padding: var(--espacio-4);
  border: var(--trazo-filete) solid var(--linea);
  border-radius: var(--radio-medio);
  background: var(--superficie);
}

/* Foto vertical 4:5. Mientras no exista, el marcador dice qué foto va. */
.op-ficha__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-medio);
  object-fit: cover;
  background: var(--turquesa-tenue);
}
.op-ficha__foto--marcador {
  display: grid;
  place-items: center;
  padding: var(--espacio-2);
  color: var(--tinta-2);
  font-size: 1rem;              /* nota: el marcador no se publica */
  line-height: 1.3;
  text-align: center;
}

.op-ficha__cuerpo { min-width: 0; }

.op-ficha__nombre {
  margin: 0 0 var(--espacio-1);
  font-family: var(--font-titular);
  font-weight: 600;
  font-size: 1.5rem;            /* h3 */
  line-height: 1.2;
  color: var(--tinta);
}
.op-ficha__titulo {
  margin: 0 0 var(--espacio-2);
  font-weight: 700;
  color: var(--tinta);
}
.op-ficha__area {
  margin: 0 0 var(--espacio-3);
  color: var(--tinta);
}
.op-ficha__registro {
  margin: 0;
  font-size: 1.125rem;          /* registro */
  line-height: 1.4;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.op-ficha__num { display: block; }

@media (min-width: 768px) {
  .op-fichas { grid-template-columns: repeat(2, 1fr); gap: var(--espacio-6); }
  .op-ficha {
    grid-template-columns: 1fr;
    row-gap: var(--espacio-4);
    padding: var(--espacio-6);
  }
  .op-ficha__nombre { font-size: 1.75rem; }
}
@media (min-width: 1024px) {
  .op-ficha { grid-template-columns: calc(var(--espacio-16) * 3) 1fr; }
}

/* ---------- DatoPractico ---------- */

.op-datos {
  display: grid;
  margin: 0;
  max-width: var(--medida-texto);
  border-top: var(--trazo-filete) solid var(--linea);
}

.op-dato {
  padding-block: var(--espacio-4);
  border-bottom: var(--trazo-filete) solid var(--linea);
}

.op-dato__etiqueta {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  margin: 0 0 var(--espacio-1);
  font-size: 1rem;              /* etiqueta */
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--tinta-2);
}
.op-dato__etiqueta .op-icono { color: var(--turquesa-hondo); }

.op-dato__valor {
  margin: 0;
  padding-left: calc(var(--espacio-6) + var(--espacio-3));
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.op-dato__valor p { margin: 0 0 var(--espacio-1); }
.op-dato__valor p:last-child { margin-bottom: 0; }

/* Horario en filas: día y horas, con cifras tabulares para que se alineen. */
.op-horario {
  display: grid;
  gap: var(--espacio-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.op-horario li {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--espacio-3);
}
.op-horario__dia {
  min-width: 9em;
  font-weight: 700;
}

/* ---------- AvisoSintomas ---------- */

.op-aviso {
  max-width: var(--medida-texto);
  padding: var(--espacio-4);
  border: var(--trazo-control) solid var(--aviso);
  border-radius: var(--radio-medio);
  background: var(--aviso-tenue);
  color: var(--tinta);
  scroll-margin-top: var(--espacio-4);
}

.op-aviso__titulo {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  margin: 0 0 var(--espacio-3);
  font-family: var(--font-titular);
  font-weight: 600;
  font-size: 2rem;              /* h2 */
  line-height: 1.15;
  color: var(--aviso);
}
.op-aviso__titulo .op-icono { margin-top: var(--espacio-1); }

.op-aviso__texto { margin: 0 0 var(--espacio-4); }
.op-aviso__texto strong { font-weight: 700; }

.op-aviso__servicio {
  margin: 0 0 var(--espacio-4);
  color: var(--tinta-2);
}

/* Llamar al servicio de emergencia: contorno ámbar, nunca relleno ámbar. */
.op-boton-llamar {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--toque-minimo);
  padding: var(--espacio-2) var(--espacio-4);
  border: var(--trazo-control) solid var(--aviso);
  border-radius: var(--radio-medio);
  background: var(--superficie);
  color: var(--aviso);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 700;
  text-decoration: none;
}
.op-boton-llamar:hover { text-decoration: underline; }

/* El enlace de la portada que baja al aviso, siempre en el mismo lugar. */
.op-enlace-aviso {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--toque-minimo);
  color: var(--aviso);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}

@media (min-width: 768px) {
  .op-aviso { padding: var(--espacio-6); }
}

/* ---------- PreguntaFrecuente ---------- */

/* Preguntas y respuestas a la vista, en <dl>: nada escondido en desplegables (Google, Bing y las IA citan de aquí). */
.op-preguntas {
  margin: 0;
  max-width: var(--medida-texto);
  border-top: var(--trazo-filete) solid var(--linea);
}

.op-pregunta {
  padding-block: var(--espacio-4);
  border-bottom: var(--trazo-filete) solid var(--linea);
}

.op-pregunta__titulo {
  margin: 0 0 var(--espacio-2);
  font-size: 1.25rem;           /* titulo-corto */
  line-height: 1.3;
  font-weight: 700;
  color: var(--tinta);
}

.op-pregunta__respuesta { margin: 0; }
.op-pregunta__respuesta p { margin: 0 0 var(--espacio-3); }
.op-pregunta__respuesta p:last-child { margin-bottom: 0; }

/* ---------- Pie ---------- */

.op-pie {
  padding-block: var(--espacio-8) var(--espacio-12);
  border-top: var(--trazo-filete) solid var(--linea);
  background: var(--superficie);
  color: var(--tinta-2);
}

.op-pie__logo {
  width: var(--logo-minimo);
  height: auto;
  margin-bottom: var(--espacio-6);
}

.op-pie__bloque {
  margin: 0 0 var(--espacio-4);
  max-width: var(--medida-texto);
  font-style: normal;
  line-height: 1.5;
}
.op-pie__nombre { color: var(--tinta); font-weight: 700; }
.op-pie__registro { font-variant-numeric: tabular-nums; }
.op-pie__revision { color: var(--tinta); }
.op-pie__legal {
  margin: var(--espacio-6) 0 0;
  padding-top: var(--espacio-4);
  max-width: var(--medida-texto);
  border-top: var(--trazo-filete) solid var(--linea);
  font-size: 1rem;              /* nota */
  line-height: 1.45;
}

/* ---------- BarraFijaMovil ---------- */

.op-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding:
    var(--espacio-2)
    max(var(--espacio-4), env(safe-area-inset-right))
    calc(var(--espacio-2) + env(safe-area-inset-bottom))
    max(var(--espacio-4), env(safe-area-inset-left));
  border-top: var(--trazo-filete) solid var(--linea);
  background: var(--superficie-elevada);
  box-shadow: var(--sombra-flotante);
  transition: opacity 180ms ease, visibility 0s linear 0s;
}
.op-barra[data-oculta="true"] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.op-barra .op-boton-wa { width: 100%; }

/* Con la barra, el final de la página y lo enfocado nunca quedan debajo de ella (WCAG 2.4.11). */
@media (max-width: 767px) {
  html:has(.op-barra) {
    scroll-padding-bottom: calc(var(--boton-principal) + var(--espacio-2) * 2 + var(--espacio-4) + env(safe-area-inset-bottom));
  }
  body:has(.op-barra) {
    padding-bottom: calc(var(--boton-principal) + var(--espacio-2) * 2 + env(safe-area-inset-bottom));
  }
  /* Con Pie, el espacio va dentro del pie para que su fondo llegue al borde. */
  body:has(.op-barra):has(.op-pie) { padding-bottom: 0; }
  body:has(.op-barra) .op-pie {
    padding-bottom: calc(var(--espacio-12) + var(--boton-principal) + var(--espacio-2) * 2 + env(safe-area-inset-bottom));
  }
}
@media (min-width: 768px) {
  .op-barra { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .op-barra,
  .op-barra[data-oculta="true"] { transition: none; }
}

/* ---------- PortadaReel (Instagram, fuera de la landing) ---------- */

/* Lienzo real de 1080 x 1920; el marco lo muestra a escala. */
.op-reel-marco {
  position: relative;
  width: calc(1080px / 4);
  height: calc(1920px / 4);
  overflow: hidden;
  border: var(--trazo-filete) solid var(--linea);
  border-radius: var(--radio-medio);
}
.op-reel {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 1080px;
  height: 1920px;
  padding: calc(var(--espacio-16) * 4) calc(var(--espacio-16) * 1.5);
  transform: scale(0.25);
  transform-origin: 0 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--font-texto);
}
.op-reel__logo { width: calc(var(--logo-encabezado) * 3); height: auto; }
.op-reel__ceja {
  margin: auto 0 calc(var(--espacio-8) * 1.5);
  font-size: 54px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--tinta-2);
}
.op-reel__titular {
  margin: 0 0 calc(var(--espacio-16) * 1.5);
  font-family: var(--font-titular);
  font-weight: 600;
  font-size: 136px;             /* display a escala de lienzo */
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.op-reel__titular .op-subrayado {
  padding-right: calc(var(--espacio-3) * 3);
  padding-bottom: calc(var(--espacio-3) * 3);
}
.op-reel__titular .op-subrayado::after { height: calc(var(--trazo-motivo) * 4); }
.op-reel__titular .op-subrayado::before {
  width: calc(var(--trazo-motivo) * 4);
  height: calc(var(--espacio-6) * 3);
}
.op-reel__firma {
  margin: 0 0 auto;
  font-size: 54px;
  line-height: 1.3;
  color: var(--tinta);
}
.op-reel__firma strong { display: block; font-weight: 700; }
.op-reel__nota {
  margin: 0;
  font-size: 44px;
  line-height: 1.35;
  color: var(--tinta-2);
}

/* Guías de Instagram: la franja 3:4 que muestra la cuadrícula del perfil. */
.op-reel__guia {
  position: absolute;
  left: 0;
  right: 0;
  top: 240px;
  height: 1440px;
  border-block: calc(var(--trazo-control) * 4) dashed var(--borde-control);
  pointer-events: none;
}

/* ---------- Muestras (solo para las fichas del sistema de diseño) ---------- */

.op-muestra {
  display: grid;
  gap: var(--espacio-6);
  padding: var(--espacio-4);
}
.op-muestra--fila {
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--espacio-16) * 4.5), 1fr));
  align-items: start;
}
.op-muestra__estado {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-2);
  align-content: start;
}
.op-muestra__rotulo {
  margin: 0;
  font-size: 1rem;              /* etiqueta */
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--tinta-2);
}
.op-muestra__telefono {
  position: relative;
  width: calc(var(--espacio-16) * 5.875);
  max-width: 100%;
  overflow: hidden;
  border: var(--trazo-filete) solid var(--borde-control);
  border-radius: var(--radio-medio);
  background: var(--papel);
}
.op-muestra__telefono .op-barra { position: absolute; display: block; }
.op-muestra__tema {
  padding: var(--espacio-4);
  border-radius: var(--radio-medio);
  background: var(--papel);
  color: var(--tinta);
}
.op-muestra__telefono--estrecho { width: calc(var(--espacio-16) * 5); }
.op-muestra__desplazable {
  height: calc(var(--espacio-16) * 8);
  overflow-y: auto;
}

/* ---------- Esta página (PROPIOS de estilos.py) ---------- */

/* ======================================================================================================
   Base (igual que antes): páginas de texto y reglas generales.
   ====================================================================================================== */

/* El atributo hidden gana siempre: sin esto, .op-control { display: inline-flex } de bundle.css deja a la vista el
   botón A+ cuando no carga script.js (revisión de accesibilidad 2026-09-29). */
[hidden] { display: none !important; }

/* Dato pendiente de la versión de revisión (texto en línea, no se parte si es corto). */
.op-pendiente { white-space: nowrap; }
.op-pendiente--largo { white-space: normal; }

/* Todo lo que se toca mide toque-minimo (README del sistema). */
.op-pie nav .op-enlace,
.op-pie address .op-enlace,
.op-legal__volver .op-enlace,
.op-texto > .op-enlace:only-child {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-minimo);
}

/* Colores forzados (alto contraste de Windows). */
@media (forced-colors: active) {
  .op-boton-wa,
  .op-cita-corta { border: 2px solid ButtonText; }
  .cc-paso::before, .cc-pasos__lista::before, .cc-pasos__lista::after { background: CanvasText; }
}

/* Dato de datos.json que llega en minúscula y encabeza una fila. */
.op-capital::first-letter { text-transform: uppercase; }
.op-capital:has(.op-pendiente)::first-letter { text-transform: none; }

/* Enlace sin destino todavía (dato pendiente en la versión de revisión): no parece tocable. */
a:not([href]) { cursor: default; }

.op-pie__legal + .op-pie__legal {
  margin-top: var(--espacio-3);
  padding-top: 0;
  border-top: 0;
}

/* Páginas de texto: aviso de privacidad y 404. */
.op-legal { padding-block: var(--espacio-8) var(--espacio-12); }
.op-legal .op-h2 {
  margin-top: var(--espacio-8);
  font-size: 1.5rem;
  line-height: 1.2;
}
.op-legal .op-h2:first-child { margin-top: 0; }
.op-legal__volver { margin: var(--espacio-8) 0 0; }
@media (min-width: 1024px) {
  .op-legal { padding-block: var(--espacio-12) var(--espacio-16); }
  .op-legal .op-h2 { font-size: 1.75rem; }
}

/* ======================================================================================================
   Dirección C, "consultorio" (2026-09-30).
   Calma clínica: blanco luminoso, retícula de 12 columnas, filetes de 1 px, titulares grandes y ligeros, fotos con
   marco amplio y pie de foto, y el turquesa solo en el logo, la línea que une los pasos y la tabla del horario.
   ====================================================================================================== */

/* ---------- Tokens de la dirección (pisan unos pocos del sistema) ---------- */
:root {
  --papel: #ffffff;
  --superficie: #ffffff;
  --superficie-elevada: #ffffff;
  --linea: #dde5e5;
  --font-titular: "Opthalmos Titular", "Iowan Old Style", Georgia, serif;
  --font-texto: "Opthalmos Cifras", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --cc-fondo-2: #f1f5f5;        /* gris clínico: marco de las fotos y banda de datos prácticos */
  --cc-regla: #aebdbe;          /* marcas de la escala del horario (decorativas) */
  --cc-banda: #1e4854;          /* petróleo del cierre */
  --cc-on-banda: #ffffff;
  --cc-on-banda-2: #d5e5e4;     /* 8,3:1 sobre el petróleo */
  --cc-boton-banda: #ffffff;
  --cc-on-boton-banda: #1e4854;
  --cc-boton-banda-presionado: #e1f3f2;
  --cc-radio: 4px;
  --cc-max: 80rem;              /* 1280 px de contenido */
  --cc-margen: 1rem;
  --cc-hueco: 1.5rem;
}
@media (min-width: 768px) {
  :root { --cc-margen: 2rem; --cc-hueco: 2rem; }
}
@media (min-width: 1200px) {
  :root { --cc-margen: 3rem; }
}

/* Oscuro con identidad: petróleo hondo de la marca, no casi negro; el botón pasa a blanco con texto petróleo. */
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0f2b33;
    --superficie: #0f2b33;
    --superficie-elevada: #15363f;
    --linea: #2b4d56;
    --tinta: #eef4f3;
    --tinta-2: #b6cacb;
    --turquesa-hondo: #72d8d4;
    --turquesa-tenue: #1b4450;
    --accion: #eef4f3;
    --accion-presionada: #cfe3e2;
    --on-accion: #173a44;
    --foco: #72d8d4;
    --borde-control: #8aa3a6;
    --aviso: #f2c07a;
    --aviso-tenue: #2c2a1f;
    --cc-fondo-2: #133640;
    --cc-regla: #4b6f78;
    --cc-banda: #1e4854;
    --cc-on-banda-2: #d5e5e4;
  }
}

/* ---------- Base de la página ---------- */
body.cc { background: var(--papel); font-variant-numeric: lining-nums; }
.cc abbr[title] { text-decoration: none; }
.cc h1, .cc h2, .cc h3 { font-kerning: normal; }

.cc-contenedor {
  width: 100%;
  max-width: calc(var(--cc-max) + var(--cc-margen) * 2);
  margin-inline: auto;
  padding-inline: var(--cc-margen);
}

.cc-saltar {
  position: absolute;
  left: var(--cc-margen);
  top: -6rem;
  z-index: 30;
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--cc-radio);
  background: var(--accion);
  color: var(--on-accion);
  font-weight: 700;
  text-decoration: none;
}
.cc-saltar:focus { top: var(--espacio-2); }

.cc-enlace {
  color: var(--turquesa-hondo);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}
.cc-enlace:hover { text-decoration-thickness: var(--trazo-control); }
.cc-enlace--toque { display: inline-flex; align-items: center; min-height: var(--toque-minimo); }

/* Datos pendientes de la versión de revisión: el renglón que los lleva no se ve (script.js los lista al final).
   En la nota legal no se oculta nada: el dato queda marcado con un subrayado de puntos. */
[data-falta]:not([data-falta-visible]):has(.op-pendiente, a[data-pendiente]) { display: none !important; }
[data-falta-visible] .op-pendiente {
  padding: 0;
  border: 0;
  border-bottom: 1px dotted currentColor;
  border-radius: 0;
  white-space: normal;
}

/* ---------- Encabezado (todas las páginas) ---------- */
.op-encabezado { background: var(--papel); }
.op-encabezado__fila {
  max-width: calc(var(--cc-max) + var(--cc-margen) * 2);
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--cc-margen);
}
.op-control,
.op-cita-corta { border-radius: var(--cc-radio); }
.cc-descriptor { display: none; }
@media (min-width: 900px) {
  .cc .op-encabezado__logo { margin-right: var(--espacio-4); }
  .cc-descriptor {
    display: block;
    margin: 0 auto 0 0;
    padding: var(--espacio-1) 0 var(--espacio-1) var(--espacio-4);
    border-left: var(--trazo-filete) solid var(--linea);
    color: var(--tinta-2);
    font-size: 1rem;
    line-height: 1.3;
  }
}

/* ---------- Titulares de las páginas de texto (privacidad y 404): los pesos que existen de Opthalmos Titular,
   sin negrita sintética ---------- */
.op-titulo__h1 { font-weight: 340; letter-spacing: -0.02em; }
.op-h2 { font-weight: 420; }

/* ---------- Botón de WhatsApp (todas las páginas) ---------- */
.op-boton-wa { border-radius: var(--cc-radio); }
.op-wa-recuadro { border-radius: 3px; }

/* ---------- Titulares ---------- */
.cc-h1 {
  margin: 0;
  font-family: var(--font-titular);
  font-weight: 340;
  font-size: 2.75rem;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--tinta);
  text-wrap: balance;
}
.cc-h2 {
  margin: 0;
  font-family: var(--font-titular);
  font-weight: 420;
  font-size: 2.125rem;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--tinta);
  text-wrap: balance;
}
.cc-h3 {
  margin: 0 0 var(--espacio-6);
  font-family: var(--font-titular);
  font-weight: 420;
  font-size: 1.75rem;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--tinta);
  text-wrap: balance;
}
.cc-rotulo {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--tinta-2);
}
.cc-entrada {
  margin: var(--espacio-4) 0 0;
  max-width: 32rem;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--tinta-2);
}
@media (min-width: 768px) {
  .cc-h1 { font-size: 4rem; }
}
@media (min-width: 1024px) {
  .cc-h2 { font-size: 2.75rem; font-weight: 340; letter-spacing: -0.02em; }
  .cc-h3 { font-size: 2rem; }
}
@media (min-width: 1200px) {
  .cc-h1 { line-height: 1; letter-spacing: -0.028em; }
}

/* ---------- Secciones: un filete de 1 px a lo ancho de la retícula abre cada una ---------- */
.cc-seccion { padding-block: 0 2.5rem; scroll-margin-top: var(--espacio-4); }
.cc-seccion > .cc-contenedor { position: relative; padding-top: 2.5rem; }
.cc-seccion > .cc-contenedor::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--cc-margen);
  right: var(--cc-margen);
  border-top: var(--trazo-filete) solid var(--linea);
}
.cc-cabeza { margin-bottom: var(--espacio-8); }
@media (min-width: 1024px) {
  .cc-seccion { padding-bottom: 5.5rem; }
  .cc-seccion > .cc-contenedor { padding-top: 5.5rem; }
  .cc-cabeza {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--cc-hueco);
    align-items: end;
    margin-bottom: var(--espacio-12);
  }
  .cc-cabeza > .cc-h2 { grid-column: 1 / span 6; }
  .cc-cabeza > .cc-entrada { grid-column: 8 / span 5; margin: 0; }
  .cc-cabeza--columna { display: block; margin-bottom: 0; }
  .cc-cabeza--columna > .cc-entrada { margin-top: var(--espacio-6); }
}

/* ---------- Portada: la cita a la izquierda; a la derecha, las médicas en un marco gris que llega al borde ---------- */
.cc-portada { padding-top: var(--espacio-6); overflow-x: clip; }
.cc-portada__reticula { display: grid; row-gap: 0; }

.cc-estado {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  margin: 0 0 var(--espacio-4);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--tinta);
}
.cc-estado::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--turquesa);
}
.cc-portada__sub {
  margin: var(--espacio-4) 0 var(--espacio-6);
  max-width: 26rem;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--tinta-2);
}
.cc-cta {
  display: grid;
  justify-items: start;
  gap: var(--espacio-2);
  max-width: 25rem;
}
.cc-cta .op-boton-wa { width: 100%; margin-bottom: var(--espacio-1); }
.cc-cta__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--espacio-2);
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--tinta-2);
}
.cc-cta__nota .op-telefono { font-size: 1.125rem; }
.cc-portada__aviso { margin: var(--espacio-2) 0 var(--espacio-6); }
.cc-enlace-aviso {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-minimo);
  color: var(--aviso);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}

/* Las médicas: un marco gris amplio con las dos fotos a la misma escala; nombre, área y registro alineados entre
   las dos (subgrid), como pies de foto. */
.cc-medicas {
  position: relative;
  margin-inline: calc(var(--cc-margen) * -1);
  padding: var(--espacio-6) var(--cc-margen) var(--espacio-8);
  background: var(--cc-fondo-2);
  scroll-margin-top: var(--espacio-4);
}
.cc-medicas__par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  column-gap: var(--espacio-3);
  margin-top: var(--espacio-4);
}
.cc-medica {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  min-width: 0;
  scroll-margin-top: var(--espacio-4);
}
.cc-medica__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  background: var(--linea);
}
.cc-medica__nombre {
  margin: var(--espacio-4) 0 var(--espacio-2);
  font-family: var(--font-titular);
  font-weight: 420;
  font-size: 1.375rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-wrap: balance;
}
.cc-medica__area { margin: 0; font-size: 1.125rem; line-height: 1.45; color: var(--tinta); }
.cc-medica__registro {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--espacio-3);
  align-self: start;
  margin: var(--espacio-3) 0 0;
  padding-top: var(--espacio-2);
  border-top: var(--trazo-filete) solid var(--cc-regla);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.cc-medica__registro abbr { text-decoration: none; }

@media (min-width: 768px) {
  .cc-medicas { padding: var(--espacio-8) var(--cc-margen) var(--espacio-12); }
  .cc-medicas__par { column-gap: var(--espacio-8); margin-top: var(--espacio-6); }
  .cc-medica__nombre { font-size: 1.75rem; margin-top: var(--espacio-6); }
}
@media (min-width: 1024px) {
  .cc-portada { padding-top: 0; }
  .cc-portada__reticula {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--cc-hueco);
    align-items: stretch;
  }
  .cc-portada__texto { grid-column: 1 / span 6; padding-block: 4rem var(--espacio-8); }
  .cc-h1 { margin-top: var(--espacio-2); }
  .cc-portada__sub { margin: var(--espacio-6) 0 var(--espacio-8); }
  /* El marco gris sale de la columna 7 y llega al borde derecho de la ventana. */
  .cc-medicas {
    grid-column: 7 / -1;
    margin: 0;
    padding: 4rem 0 var(--espacio-12) 2.5rem;
    background: none;
  }
  .cc-medicas::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 -100vw 0 0;
    background: var(--cc-fondo-2);
  }
  .cc-medicas { isolation: isolate; }
}
@media (min-width: 1200px) {
  .cc-portada__texto { grid-column: 1 / span 5; }
  .cc-medicas { grid-column: 6 / -1; padding-left: 3rem; }
  .cc-h1 { font-size: 5rem; line-height: 1.02; }
}
@media (min-width: 1400px) {
  .cc-h1 { font-size: 5.5rem; }
}
/* Con A+ el titular crece con la raíz; en la columna de escritorio se contiene para que "oftalmológico" no pase
   al hueco de la retícula. */
@media (min-width: 1200px) {
  html[data-letra="grande"] .cc-h1 { font-size: 4.25rem; }
}

/* ---------- Cómo pedir la cita: tres pasos unidos por la línea del logo, que sube al final ---------- */
.cc-pasos__lista {
  position: relative;
  display: grid;
  gap: var(--espacio-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cc-paso {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: var(--espacio-4);
  align-items: start;
}
.cc-paso__num {
  grid-row: 1 / span 2;
  font-family: var(--font-titular);
  font-weight: 340;
  font-size: 3rem;
  line-height: 0.9;
  color: var(--tinta);
  font-variant-numeric: lining-nums tabular-nums;
}
.cc-paso__titulo {
  margin: 0 0 var(--espacio-2);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--tinta);
}
.cc-paso__texto { margin: 0; max-width: 24rem; }
/* Celular: la línea baja por la izquierda, de un número al siguiente. */
.cc-paso:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(1.25rem - 1.5px);
  top: 3.25rem;
  bottom: calc(var(--espacio-8) * -1 + var(--espacio-2));
  width: var(--trazo-motivo);
  background: var(--turquesa);
}
@media (min-width: 900px) {
  .cc-pasos__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--cc-hueco);
    padding-top: 7rem;
  }
  .cc-paso { display: block; padding-right: var(--espacio-8); }
  .cc-paso__num {
    position: absolute;
    top: -7rem;
    left: 0;
    font-size: 4.5rem;
  }
  .cc-paso:not(:last-child)::before { content: none; }
  /* Escritorio: la línea corre bajo los tres números y sube en el extremo derecho, como en el logo. */
  .cc-pasos__lista::before {
    content: "";
    position: absolute;
    top: 5rem;
    left: 0;
    right: 0;
    height: var(--trazo-motivo);
    background: var(--turquesa);
  }
  .cc-pasos__lista::after {
    content: "";
    position: absolute;
    top: 3.75rem;
    right: 0;
    width: var(--trazo-motivo);
    height: calc(1.25rem + var(--trazo-motivo));
    background: var(--turquesa);
  }
}

/* ---------- Qué atendemos: título, lista medida y una foto de equipo con su pie ---------- */
.cc-atendemos__reticula { display: grid; gap: var(--espacio-8); }
.cc-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--trazo-filete) solid var(--linea);
}
.cc-lista li {
  padding: var(--espacio-3) 0;
  border-bottom: var(--trazo-filete) solid var(--linea);
}
.cc-lista--compacta { border-top: 0; }
.cc-lista--compacta li { position: relative; padding: var(--espacio-1) 0 var(--espacio-1) 1.25rem; border-bottom: 0; }
.cc-lista--compacta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--espacio-1) + 0.6em);
  width: 0.375rem;
  height: 0.375rem;
  background: var(--tinta-2);
}
.cc-figura { margin: 0; max-width: 11rem; }
@media (min-width: 600px) and (max-width: 1023px) { .cc-figura { max-width: 13rem; } }
.cc-figura__foto {
  display: block;
  width: 100%;
  height: auto;
  padding: var(--espacio-4);
  background: var(--cc-fondo-2);
  box-sizing: border-box;
}
.cc-figura__pie {
  margin-top: var(--espacio-3);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--tinta-2);
}
.cc-figura__titulo { display: block; color: var(--tinta); font-weight: 700; }
@media (min-width: 1024px) {
  .cc-atendemos__reticula { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cc-hueco); }
  .cc-atendemos__reticula > .cc-cabeza { grid-column: 1 / span 4; }
  .cc-atendemos__reticula > .cc-lista { grid-column: 5 / span 5; align-self: start; }
  .cc-atendemos__reticula > .cc-figura { grid-column: 10 / span 3; justify-self: end; width: 100%; max-width: 15rem; }
}

/* ---------- Datos prácticos: banda gris, tres columnas separadas por filetes verticales ---------- */
.cc-practico { padding-block: 2.5rem; background: var(--cc-fondo-2); }
.cc-practico__reticula { display: grid; row-gap: 2.5rem; }
.cc-bloque { min-width: 0; scroll-margin-top: var(--espacio-4); }
.cc-bloque + .cc-bloque { padding-top: 2.5rem; border-top: var(--trazo-filete) solid var(--linea); }
.cc-bloque__texto { margin: 0 0 var(--espacio-3); max-width: 30rem; }
@media (min-width: 900px) {
  .cc-practico { padding-block: 5rem; }
  .cc-practico__reticula { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
  .cc-bloque { padding-inline: var(--cc-hueco); }
  .cc-bloque:first-child { padding-left: 0; }
  .cc-bloque:last-child { padding-right: 0; }
  .cc-bloque + .cc-bloque { padding-top: 0; border-top: 0; border-left: var(--trazo-filete) solid var(--linea); }
  .cc-bloque > .cc-h3 { min-height: 2.24em; }
}
/* Los títulos de la banda son preguntas con las palabras que se buscan (SEO-GEO.md 2.1), más largas que los rótulos
   de la propuesta: entre 900 y 1279 px "¿Dónde queda el consultorio en Valencia, Carabobo?" ocupa tres líneas, y con
   dos de alto mínimo el texto de su bloque quedaba una línea más abajo que el de los otros dos (portado el 2026-10-01). */
@media (min-width: 900px) and (max-width: 1279px) {
  .cc-bloque > .cc-h3 { min-height: 3.36em; }
}

/* Placa del consultorio: el número de la puerta, como en la torre. */
.cc-placa {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: var(--espacio-4);
  margin: 0 0 var(--espacio-6);
  padding-block: var(--espacio-3) var(--espacio-4);
  border-top: var(--trazo-control) solid var(--tinta);
  border-bottom: var(--trazo-filete) solid var(--tinta);
}
.cc-placa__numero {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-titular);
  font-weight: 340;
  font-size: 5rem;
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--tinta);
  font-variant-numeric: lining-nums;
}
.cc-placa__torre,
.cc-placa__rotulo { grid-column: 2; font-size: 1rem; line-height: 1.3; font-weight: 700; }
.cc-placa__torre { grid-row: 1; color: var(--tinta); }
.cc-placa__rotulo { grid-row: 2; color: var(--tinta-2); font-weight: 400; }

.cc-dato-tecnico {
  margin: var(--espacio-4) 0 0;
  font-size: 1rem;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.cc-dato-tecnico__rotulo { font-weight: 700; color: var(--tinta); margin-right: var(--espacio-2); }

/* Tabla de referencia de la semana (la arma script.js; decorativa). */
.cc-semana { margin: var(--espacio-6) 0 var(--espacio-6); }
.cc-semana__escala {
  display: block;
  position: relative;
  height: 2.75rem;
  margin-left: 3rem;
  border-bottom: var(--trazo-filete) solid var(--cc-regla);
}
.cc-semana__marca {
  position: absolute;
  bottom: 0;
  width: var(--trazo-filete);
  height: 0.375rem;
  background: var(--cc-regla);
}
.cc-semana__marca--fuerte { height: 0.75rem; background: var(--tinta-2); }
.cc-semana__hora {
  position: absolute;
  top: 0;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--tinta-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cc-semana__hora--fin { transform: translateX(-100%); }
.cc-semana__fila {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  height: 2rem;
}
.cc-semana__dia { font-size: 1rem; line-height: 1; color: var(--tinta-2); }
.cc-semana__fila--atiende .cc-semana__dia { color: var(--tinta); font-weight: 700; }
.cc-semana__pista { position: relative; height: 100%; border-bottom: var(--trazo-filete) solid var(--linea); }
.cc-semana__barra {
  position: absolute;
  top: calc(50% - 0.25rem);
  left: calc(var(--desde) * 100%);
  width: calc(var(--largo) * 100%);
  height: 0.5rem;
  background: var(--turquesa);
}
.cc-semana__nota {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1;
  color: var(--tinta-2);
}

/* ---------- Aviso de síntomas: sobrio, con un filete ámbar de 3 px; completo y a la vista ---------- */
.cc-aviso { padding-block: 2.5rem; scroll-margin-top: var(--espacio-4); }
.cc-aviso__reticula { display: grid; row-gap: var(--espacio-4); }
.cc-aviso__reticula::before {
  content: "";
  grid-column: 1 / -1;
  border-top: var(--trazo-motivo) solid var(--aviso);
  margin-bottom: var(--espacio-2);
}
.cc-aviso__titulo {
  margin: 0;
  font-family: var(--font-titular);
  font-weight: 420;
  font-size: 1.875rem;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--aviso);
  text-wrap: balance;
}
.cc-aviso__texto { margin: 0; max-width: 46rem; font-size: 1.25rem; line-height: 1.5; }
.cc-aviso__texto strong { font-weight: 700; }
.cc-aviso__servicio { margin: var(--espacio-3) 0 0; color: var(--tinta-2); }
@media (min-width: 1024px) {
  .cc-aviso { padding-block: 4rem; }
  .cc-aviso__reticula { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cc-hueco); }
  .cc-aviso__titulo { grid-column: 1 / span 4; font-size: 2.25rem; }
  .cc-aviso__cuerpo { grid-column: 5 / -1; }
}

/* ---------- Preguntas frecuentes: dl.faq con dt y dd sin clases (test_faq.py) ---------- */
.cc-preguntas__reticula { display: grid; gap: var(--espacio-8); }
.op-revision {
  margin: var(--espacio-6) 0 0;
  max-width: 22rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--tinta-2);
}
.faq { margin: 0; }
.faq > div { padding: var(--espacio-4) 0 var(--espacio-6); border-top: var(--trazo-filete) solid var(--linea); border-bottom: 0; }
.faq dt {
  margin: 0 0 var(--espacio-2);
  font-family: var(--font-titular);
  font-weight: 420;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--tinta);
}
.faq dd { margin: 0; max-width: 34rem; }
@media (min-width: 768px) {
  .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cc-hueco); }
}
@media (min-width: 1024px) {
  .cc-preguntas__reticula { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cc-hueco); }
  .cc-preguntas__reticula > .cc-cabeza { grid-column: 1 / span 4; }
  .cc-preguntas__reticula > .faq { grid-column: 5 / -1; column-gap: var(--espacio-12); }
  .faq dt { font-size: 1.5rem; }
}

/* ---------- Cierre: banda petróleo con el símbolo grande ---------- */
.cc-cierre {
  padding-block: var(--espacio-12);
  background: var(--cc-banda);
  color: var(--cc-on-banda);
  scroll-margin-top: var(--espacio-4);
}
.cc-cierre__reticula { display: grid; gap: var(--espacio-6); align-items: center; }
.cc-cierre__simbolo { width: 4.5rem; height: auto; }
.cc-cierre .cc-h2 { color: var(--cc-on-banda); }
.cc-cierre__respuesta { margin: var(--espacio-4) 0 0; max-width: 32rem; font-size: 1.25rem; line-height: 1.5; color: var(--cc-on-banda-2); }
.cc-cierre .op-boton-wa { background: var(--cc-boton-banda); color: var(--cc-on-boton-banda); }
.cc-cierre .op-boton-wa:hover,
.cc-cierre .op-boton-wa:active { background: var(--cc-boton-banda-presionado); }
.cc-cierre .cc-cta__nota { color: var(--cc-on-banda-2); }
.cc-cierre .op-telefono { color: var(--cc-on-banda); }
.cc-cierre :focus-visible { outline-color: var(--cc-on-banda); }
@media (min-width: 1024px) {
  .cc-cierre { padding-block: 5.5rem; }
  .cc-cierre__reticula { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cc-hueco); align-items: center; }
  .cc-cierre__simbolo { grid-column: 1 / span 2; width: 8.5rem; }
  .cc-cierre__texto { grid-column: 3 / span 6; }
  .cc-cta--cierre { grid-column: 9 / -1; justify-self: end; width: 100%; }
}

/* ---------- Pie ---------- */
.cc-pie { padding-block: var(--espacio-12); border-top: 0; background: var(--papel); font-size: 1rem; }
.cc-pie__reticula { display: grid; row-gap: var(--espacio-6); }
.cc-pie .op-pie__logo { width: var(--logo-encabezado); margin: 0; }
.cc-pie__bloque { margin: 0; font-style: normal; line-height: 1.5; color: var(--tinta-2); }
.cc-renglon { display: block; }
.cc-pie .op-pie__registro { margin: 0 0 var(--espacio-3); }
.cc-pie .op-pie__revision { margin: 0; color: var(--tinta-2); }
.cc-pie__indice ul { margin: 0; padding: 0; list-style: none; }
.cc-pie__indice .op-enlace { min-height: 2.5rem; }
.cc-pie__legal { padding-top: var(--espacio-6); border-top: var(--trazo-filete) solid var(--linea); }
.cc-pie .op-pie__legal { margin: 0; padding: 0; border: 0; max-width: 46rem; }
.cc-pie .op-pie__legal + .op-pie__legal { margin-top: var(--espacio-3); }
@media (min-width: 900px) {
  .cc-pie { padding-block: 4rem; }
  .cc-pie__reticula { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cc-hueco); row-gap: var(--espacio-8); }
  .cc-pie__marca { grid-column: 1 / span 3; }
  .cc-pie address { grid-column: 4 / span 3; }
  .cc-pie__reticula > .cc-pie__bloque:nth-of-type(2) { grid-column: 7 / span 3; }
  .cc-pie__indice { grid-column: 10 / span 3; }
  .cc-pie__legal { grid-column: 4 / span 7; }
}

/* ---------- Barra fija del celular ---------- */
.op-barra { background: var(--papel); }

/* ---------- Nota de revisión (solo si faltan datos; la agrega script.js al final, fuera del diseño) ---------- */
.cc-nota-revision {
  padding: var(--espacio-6) 0;
  border-top: var(--trazo-filete) dashed var(--cc-regla);
  background: var(--cc-fondo-2);
  color: var(--tinta-2);
  font-size: 1rem;
  line-height: 1.5;
}
.cc-nota-revision p { margin: 0; max-width: 52rem; }
.cc-nota-revision strong { color: var(--tinta); }

/* ---------- Oscuro: las fotos, de pared blanca, bajan un poco de exposición para no encandilar ---------- */
@media (prefers-color-scheme: dark) {
  .cc-medica__foto,
  .cc-figura__foto { filter: brightness(0.9); }
}

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}