/*
  Componentes · Fisios Islas21 (demo)
  ===================================
  Un bloque por componente de diseno/design-system.md. El vocabulario de
  clases es abierto (nombres en español, descriptivos); lo que manda es
  que el resultado se parezca al artboard, no un catálogo cerrado.

  Esta hoja cubre TODOS los componentes del sistema (§2.1-§2.19), no solo
  los que usa `/` (Inicio): las tres páginas siguientes del proyecto
  (landing, ATM, contacto/propuesta) copian esta hoja, así que los bloques
  de anclas/dolencia/reembolso (solo-landing) están aquí aunque
  `index.html` no los use todavía.

  Punto de corte único escritorio/móvil: 960px, fijo en cada @media (no
  hay custom property de breakpoint utilizable dentro de un @media).
  Mobile-first: la base es 360-599px, `@media (min-width: 960px)` trae
  los valores de escritorio (1440) tal como los da design-system.md.

  Requiere tokens.css y base.css cargados antes.
*/

/* =====================================================================
   Utilidades compartidas — no son "un componente" del design-system,
   pero varios componentes repiten el mismo patrón tipográfico o de
   botón; vivir aquí evita siete copias del mismo bloque de reglas.
   ===================================================================== */

.antetitulo {
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  color: var(--color-gris-secundario);
  letter-spacing: var(--interletra-antetitulo-movil);
  font-size: 11.5px;
}

@media (min-width: 960px) {
  .antetitulo {
    letter-spacing: var(--interletra-antetitulo-escritorio);
    font-size: 13px;
  }
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radio-boton);
  font-weight: var(--peso-medio);
  text-decoration: none;
  border: 0;
  transition: background-color .15s cubic-bezier(.32, .72, 0, 1), color .15s cubic-bezier(.32, .72, 0, 1), border-color .15s cubic-bezier(.32, .72, 0, 1);
}

.boton:hover {
  text-decoration: none;
}

.boton--primario {
  background: var(--color-indigo);
  color: var(--color-blanco);
}

.boton--primario:hover {
  background: var(--color-indigo-hover);
  color: var(--color-blanco);
}

.boton--outline {
  background: var(--color-blanco);
  color: var(--color-indigo);
  border: 1.5px solid var(--color-indigo);
}

.boton--outline:hover {
  color: var(--color-indigo-hover);
  border-color: var(--color-indigo-hover);
}

/* Variante "blanco sobre salvia-claro" — botón del bloque de ATM. */
.boton--sobre-salvia {
  background: var(--color-blanco);
  color: var(--color-indigo);
}

.boton--sobre-salvia:hover {
  color: var(--color-indigo-hover);
}

.boton--ancho-completo {
  width: 100%;
}

/* ---------------------------------------------------------------------
   Trío de CTA — llamada + WhatsApp + formulario, en todos los bloques de
   llamada a la acción por orden de Emilio (2026-09-17): «todos los CTA
   tienen que tener: Llamada, Whatsapp y Formulario».

   El de WhatsApp es DUMMY como el flotante (va `inert`, sin href): el
   negocio no tiene el canal dado de alta y mandar a un wa.me muerto
   delante del cliente es peor que no ponerlo. El día que lo abra, entra
   su enlace y el componente no cambia.
   --------------------------------------------------------------------- */

.cta-triple {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}

.cta-triple .boton {
  padding: 13px 20px;
  min-height: 48px;
  font-size: 16px;
  flex: 1 1 auto;
}

/* El de llamar manda: es la única vía que cierra cita hoy. */
.cta-triple .boton--primario {
  flex-basis: 100%;
}

/* Variante compacta: la que va al pie de cada bloque de servicio, donde el
   trío convive con una lista y no puede pesar como el del hero. */
.cta-triple--compacto {
  margin-top: 18px;
  gap: var(--espacio-2);
}

.cta-triple--compacto .boton {
  padding: 11px 15px;
  font-size: 15px;
  gap: 8px;
}

/* Dentro de un bloque de cierre o de contacto el trío necesita su aire:
   antes había un botón suelto con margen propio. */
.cta-final .cta-triple,
.bloque-contacto .cta-triple {
  margin: var(--espacio-6) 0 var(--espacio-5);
}

@media (min-width: 560px) {
  .cta-triple .boton--primario {
    flex-basis: auto;
  }

  .cta-triple .boton {
    flex: 0 1 auto;
  }
}


/* Fila "● L-V de 8:30 a 21:30" — el punto índigo de 8px que acompaña al CTA
   del hero (solo escritorio, ver §2.5). Decía "Abierto ahora" hasta el I4 del
   QA final (2026-09-11): sin JS que lo calcule, mentía fuera de horario,
   fines de semana y en agosto — se sustituyó por el horario, que es
   verdad siempre. */
.punto-abierto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--color-gris-secundario);
}

.punto-abierto::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-indigo);
  display: inline-block;
}

/* Estrellas — SVG en índigo, gap 2-3px según contexto (el color lo trae
   el `currentColor` del propio SVG heredando del contenedor). */
.estrellas {
  display: flex;
  gap: 2px;
  color: var(--color-indigo);
}

/* =====================================================================
   2.1 — Banda de aviso de demo (primer hijo de <body>, fuera de <header>)
   ===================================================================== */

.aviso-demo {
  background: var(--color-carbon-demo);
  color: var(--color-blanco);
  padding: 10px var(--seccion-x-movil);
  font-size: 12.5px;
  line-height: 1.4;
}

.aviso-demo__fuerte {
  font-weight: var(--peso-medio);
}

.aviso-demo__secundario {
  opacity: 1;
}

.aviso-demo__enlace {
  display: none;
}

@media (min-width: 960px) {
  .aviso-demo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px var(--seccion-x-escritorio);
    font-size: 14px;
    line-height: 1.5;
  }

  .aviso-demo__secundario {
    opacity: .82;
  }

  .aviso-demo__enlace {
    display: inline;
    color: var(--color-blanco);
    text-decoration: underline;
    white-space: nowrap;
  }
}

/* =====================================================================
   2.2 — Bloque de cierre del aviso de demo (antes de <footer>, fuera de él)
   ===================================================================== */

.aviso-demo-cierre {
  background: var(--color-carbon-demo);
  color: var(--color-blanco);
  text-align: center;
  padding: 22px var(--seccion-x-movil);
  font-size: 13.5px;
  line-height: 1.5;
}

.aviso-demo-cierre__enlace {
  display: none;
}

@media (min-width: 960px) {
  .aviso-demo-cierre {
    padding: 32px var(--seccion-x-escritorio);
    font-size: 16px;
  }

  .aviso-demo-cierre__enlace {
    display: inline;
    color: var(--color-blanco);
    text-decoration: underline;
    margin-left: 4px;
  }
}

/* =====================================================================
   2.3 / 2.4 — Cabecera (completa en Inicio/Contacto, mínima en la Landing:
   misma estructura, la Landing simplemente no incluye `.cabecera__nav`)
   ===================================================================== */

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--seccion-x-movil);
  border-bottom: 1px solid var(--color-salvia-claro);
}

/* Logotipo real del cliente (lettering propio, monocromo, sin versión
   negativa: nunca sobre fondo saturado ni oscuro — solo sobre blanco/menta
   clarísimo). Sin versión vectorial, así que 210px CSS es el techo de
   nitidez que da el archivo a 420px (2x) que procesó Emilio. */
.cabecera__logo {
  display: inline-flex;
  text-decoration: none;
}

.cabecera__logo img {
  display: block;
  width: 132px;
  height: auto;
}

.cabecera__nav {
  display: none;
}

.cabecera__boton {
  display: none;
}

/* Botón cuadrado de llamar — solo móvil, sustituye a nav + botón de texto. */
.cabecera__boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-indigo);
  color: var(--color-blanco);
  border-radius: var(--radio-boton);
}

.cabecera__boton-icono:hover {
  background: var(--color-indigo-hover);
}

@media (min-width: 960px) {
  .cabecera {
    padding: 20px var(--seccion-x-escritorio);
  }

  .cabecera__logo img {
    width: 210px;
  }

  .cabecera__nav {
    display: flex;
    align-items: center;
    gap: 32px;
    font-size: 15px;
  }

  .cabecera__enlace {
    color: var(--color-tinta);
  }

  .cabecera__enlace:hover {
    color: var(--color-indigo);
  }

  .cabecera__boton {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    font-size: 16px;
    min-height: 48px;
  }

  /* En escritorio manda el botón con el número; el cuadrado de llamar es el
     sustituto de móvil, donde no hay menú. Esta regla se perdió al retirar el
     chip de WhatsApp y dejó los dos botones a la vez. */
  .cabecera__boton-icono {
    display: none;
  }
}

/* =====================================================================
   2.5 — Hero
   ===================================================================== */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-6);
  align-items: center;
  padding: 24px var(--seccion-x-movil) 28px;
}

.hero__antetitulo {
  margin-bottom: 12px;
}

.hero__titulo {
  font-size: 31px;
  font-weight: var(--peso-fuerte);
  line-height: 1.1;
}

.hero__parrafo {
  font-size: 17px;
  line-height: 1.5;
  margin-top: 14px;
  max-width: 34ch;
}

/* Fila de estrellas + "4,9 · 108 opiniones": solo aparece en el hero de
   Inicio en móvil (en escritorio esa cifra vive en la Barra de confianza,
   ver §2.6). */
.hero__valoracion {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-top: 16px;
}

.hero__valoracion .estrellas svg {
  width: 15px;
  height: 15px;
}

.hero__acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-4);
  margin-top: 20px;
}

.hero__cta {
  padding: 16px;
  font-size: 17px;
}

/* "Abierto ahora" — no dibujado en el hero móvil del artboard aprobado. */
.hero__estado {
  display: none;
}

.hero__confianza {
  font-size: 13.5px;
  color: var(--color-gris-secundario);
  margin-top: 12px;
  text-align: center;
}

.hero__figura {
  position: relative;
}

/* Panel decorativo menta con la firma de 100px — SOLO escritorio. En
   móvil la foto va suelta, a ancho completo y sin marco (ver hallazgo
   design-system.md §2.5). */
.hero__figura::before {
  content: none;
}

.hero__foto {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    padding: 76px var(--seccion-x-escritorio) var(--seccion-x-escritorio);
  }

  .hero__antetitulo {
    margin-bottom: 20px;
  }

  .hero__titulo {
    font-size: 58px;
    line-height: var(--lh-ajustado);
  }

  .hero__parrafo {
    font-size: 21px;
    line-height: var(--lh-hero-parrafo);
    margin-top: 26px;
    max-width: 30ch;
  }

  .hero__valoracion {
    display: none;
  }

  .hero__acciones {
    align-items: flex-start;
    gap: var(--espacio-4);
    margin-top: 38px;
  }

  .hero__cta {
    padding: 18px 34px;
    font-size: 18px;
  }

  .hero__estado {
    display: inline-flex;
  }

  .hero__confianza {
    margin-top: 16px;
    text-align: left;
  }

  .hero__figura::before {
    content: "";
    position: absolute;
    inset: -26px -26px 40px 60px;
    background: var(--color-menta);
    border-radius: var(--radio-firma) var(--radio-tarjeta) var(--radio-tarjeta) var(--radio-tarjeta);
    z-index: 0;
  }

  .hero__foto {
    position: relative;
    height: 400px;
    border-radius: var(--radio-firma) var(--radio-tarjeta) var(--radio-tarjeta) var(--radio-tarjeta);
    z-index: 1;
  }
}

/* =====================================================================
   2.6 — Banda de autoridad (Inicio y las dos landings, móvil y escritorio)

   Sustituye a la vieja «barra de confianza» (cuatro datos en fila, solo
   escritorio) por orden de Emilio el 2026-09-17: «la banda de autoridad la
   quiero mucho más visible, parecida a la de jokabide, que se vea la
   puntuación y reviews reales en modo carrusel».

   Dos zonas: el ancla (4,9 / 5 en grande) y la pista de reseñas reales. Las
   tres credenciales que sí merecían sobrevivir de la barra vieja (colegiados,
   registro, sesión de una hora) bajan a una línea al pie de la banda.

   · CERO JS, como todo el sitio: la pista es overflow-x + scroll-snap, así
     que se arrastra con el dedo, con el trackpad y con el teclado. Jokabide
     añade flechas y puntos con su menu.js; aquí no hay script que los pueda
     encender, así que no se dibujan — un mando muerto es peor que ninguno.
     La tarjeta siguiente asoma por el borde y esa es la señal de que hay más.
   · El gris secundario NO se usa sobre salvia claro (3,80:1, falla AA): todo
     el texto de apoyo de la banda va en tinta (5,70:1 medido).
   ===================================================================== */

.autoridad {
  background: var(--color-salvia-claro);
  padding: var(--espacio-8) var(--seccion-x-movil) var(--espacio-7);
}

.autoridad__interior {
  display: grid;
  gap: var(--espacio-6);
  align-items: center;
}

/* --- Zona 1: la nota media, el ancla de la banda --------------------- */

.autoridad__cifra {
  display: flex;
  align-items: baseline;
  gap: var(--espacio-2);
  margin: 0 0 var(--espacio-2);
  font-size: 58px;
  line-height: .9;
  font-weight: var(--peso-fuerte);
  color: var(--color-indigo);
}

.autoridad__sobre {
  font-size: 20px;
  font-weight: var(--peso-ligero);
  color: var(--color-tinta);
}

.autoridad__nota .estrellas {
  gap: 3px;
  margin-bottom: var(--espacio-3);
}

.autoridad__nota .estrellas svg {
  width: 21px;
  height: 21px;
}

.autoridad__pie {
  margin: 0 0 var(--espacio-2);
  font-size: 15px;
  line-height: 1.45;
}

/* inline-flex + 24px de alto: es un enlace suelto, no uno dentro de un
   párrafo, así que le toca el objetivo mínimo de WCAG 2.5.8. */
.autoridad__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 15px;
  font-weight: var(--peso-medio);
}

/* --- Zona 2: el carrusel de reseñas ---------------------------------- */

/* Carrusel de verdad y sin una línea de JavaScript: un radio por reseña
   (navegables con las flechas del teclado), la pista se mueve con
   `transform` y los mandos son `<label>`. Antes era overflow + scroll-snap:
   dejaba la tercera tarjeta cortada contra el borde y sin ratón con rueda
   horizontal no había manera de avanzar. Ahora se ve una reseña entera
   cada vez y los botones funcionan en cualquier dispositivo. */

.autoridad__carrusel {
  min-width: 0;
}

.autoridad__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.autoridad__visor {
  overflow: hidden;
  border-radius: var(--radio-tarjeta);
}

.autoridad__pista {
  display: flex;
  align-items: stretch;
  transition: transform .42s cubic-bezier(.25, 1, .5, 1);
}

/* Cada tarjeta mide justo el visor: nunca se ve media reseña. */
.autoridad__tarjeta {
  margin: 0;
  flex: 0 0 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  padding: var(--espacio-6);
  background: var(--color-blanco);
}

.autoridad__tarjeta .estrellas {
  gap: 3px;
}

.autoridad__cita {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

.autoridad__cita p {
  margin: 0;
}

.autoridad__firma {
  margin-top: auto;
  padding-top: var(--espacio-4);
  border-top: 1px solid var(--color-salvia-claro);
  font-size: 15px;
  font-style: normal;
  font-weight: var(--peso-medio);
}

/* --- Mando: puntos y flechas ----------------------------------------- */

.autoridad__mando {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  margin-top: var(--espacio-4);
}

.autoridad__puntos {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

/* El punto se dibuja dentro de un objetivo de 44px, que es lo que se toca. */
.autoridad__punto {
  position: relative;
  width: 24px;
  height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.autoridad__punto::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radio-pildora);
  background: var(--color-salvia);
  transition: width .18s ease, background-color .18s ease;
}

.autoridad__flechas {
  margin-left: auto;
  display: flex;
  gap: var(--espacio-2);
}

.autoridad__flecha {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--color-indigo);
  border-radius: var(--radio-pildora);
  background: var(--color-blanco);
  color: var(--color-indigo);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.autoridad__flecha:hover {
  background: var(--color-indigo);
  color: var(--color-blanco);
}

@media (prefers-reduced-motion: reduce) {
  .autoridad__pista,
  .autoridad__punto::before,
  .autoridad__flecha {
    transition: none;
  }
}

/* Estados del carrusel, uno por reseña */
#res-1:checked ~ .autoridad__visor .autoridad__pista { transform: translateX(-0%); }
#res-1:checked ~ .autoridad__mando .autoridad__flecha--prev-1,
#res-1:checked ~ .autoridad__mando .autoridad__flecha--next-1 { display: inline-flex; }
#res-1:checked ~ .autoridad__mando .autoridad__punto:nth-child(1)::before { width: 26px; background: var(--color-indigo); }
#res-2:checked ~ .autoridad__visor .autoridad__pista { transform: translateX(-100%); }
#res-2:checked ~ .autoridad__mando .autoridad__flecha--prev-2,
#res-2:checked ~ .autoridad__mando .autoridad__flecha--next-2 { display: inline-flex; }
#res-2:checked ~ .autoridad__mando .autoridad__punto:nth-child(2)::before { width: 26px; background: var(--color-indigo); }
#res-3:checked ~ .autoridad__visor .autoridad__pista { transform: translateX(-200%); }
#res-3:checked ~ .autoridad__mando .autoridad__flecha--prev-3,
#res-3:checked ~ .autoridad__mando .autoridad__flecha--next-3 { display: inline-flex; }
#res-3:checked ~ .autoridad__mando .autoridad__punto:nth-child(3)::before { width: 26px; background: var(--color-indigo); }

#res-1:focus-visible ~ .autoridad__mando .autoridad__punto:nth-child(1),
#res-2:focus-visible ~ .autoridad__mando .autoridad__punto:nth-child(2),
#res-3:focus-visible ~ .autoridad__mando .autoridad__punto:nth-child(3) {
  outline: var(--ancho-foco) solid var(--color-foco);
  outline-offset: 2px;
}

/* --- Pie: las credenciales que venían de la barra vieja --------------- */

.autoridad__credenciales {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-6);
  margin-top: var(--espacio-6);
  padding-top: var(--espacio-5);
  border-top: 1px solid var(--color-salvia);
  font-size: 14px;
}

@media (min-width: 960px) {
  .autoridad {
    padding: var(--espacio-10) var(--seccion-x-escritorio);
  }

  .autoridad__interior {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: var(--espacio-9);
  }

  .autoridad__cifra {
    font-size: 80px;
  }

  .autoridad__sobre {
    font-size: 24px;
  }

  .autoridad__nota .estrellas svg {
    width: 25px;
    height: 25px;
  }

  .autoridad__pie {
    font-size: 16px;
  }

  .autoridad__tarjeta {
    padding: 34px 36px;
    gap: var(--espacio-5);
  }

  .autoridad__cita {
    font-size: 21px;
    line-height: 1.5;
    max-width: 52ch;
  }

  .autoridad__credenciales {
    gap: 0;
    font-size: 15px;
  }

  /* Filete separador, no adorno: divide tres datos de la misma fila. */
  .autoridad__credenciales > * + * {
    border-left: 1px solid var(--color-salvia);
    margin-left: var(--espacio-7);
    padding-left: var(--espacio-7);
  }
}

/* =====================================================================
   2.7 — Paso de «Nuestro enfoque» (Cómo trabajamos)
   ===================================================================== */

.enfoque {
  background: var(--color-menta);
  padding: 36px var(--seccion-x-movil);
  border-radius: 0 var(--radio-firma) 0 0;
}

.enfoque__titulo {
  font-size: 26px;
  line-height: 1.22;
}

.enfoque__pasos {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 28px;
}

.enfoque__paso-numero {
  font-size: 12px;
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--interletra-paso);
  color: var(--color-indigo);
}

.enfoque__paso-separador {
  height: 1px;
  background: var(--color-salvia);
  margin: 10px 0 14px;
}

.enfoque__paso-titulo {
  font-size: 19px;
  margin-bottom: 8px;
}

.enfoque__paso-texto {
  max-width: 60ch;
  font-size: 16px;
  margin: 0;
}

@media (min-width: 960px) {
  .enfoque {
    padding: var(--espacio-12) var(--seccion-x-escritorio);
    border-radius: 0;
  }

  .enfoque__titulo {
    font-size: 40px;
    line-height: var(--lh-titular);
    max-width: 20ch;
  }

  .enfoque__pasos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-top: 52px;
  }

  .enfoque__paso-numero {
    font-size: 13px;
  }

  .enfoque__paso-titulo {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .enfoque__paso-texto {
    font-size: 17px;
  }
}

/* Layout compacto de la Landing (2 columnas asimétricas). No lo usa
   Inicio; se deja listo para que la Landing lo consuma sin duplicar CSS. */
@media (min-width: 960px) {
  .enfoque--compacto .contenedor {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 40px;
    align-items: start;
  }

  .enfoque--compacto .enfoque__titulo {
    font-size: 36px;
  }

  .enfoque--compacto .enfoque__pasos {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 0;
  }

  .enfoque--compacto .enfoque__paso-titulo {
    font-size: 18px;
  }

  .enfoque--compacto .enfoque__paso-texto {
    font-size: 15.5px;
  }
}

/* =====================================================================
   2.8 — Índice del dolor
   ===================================================================== */

.indice-dolor {
  padding: 40px var(--seccion-x-movil);
}

.indice-dolor__antetitulo {
  display: none;
}

.indice-dolor__titulo {
  font-size: 26px;
  line-height: 1.22;
}

.indice-dolor__entradilla {
  font-size: 16px;
  margin-top: 12px;
}

.indice-dolor__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.entrada-dolor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px;
  min-height: 48px;
  border: 1px solid var(--color-salvia-claro);
  border-radius: var(--radio-tarjeta);
  color: var(--color-tinta);
  font-size: 16px;
}

.entrada-dolor:hover {
  border-color: var(--color-indigo);
  color: var(--color-tinta);
  text-decoration: none;
}

.entrada-dolor__flecha {
  flex-shrink: 0;
  color: var(--color-indigo);
}

@media (min-width: 960px) {
  .indice-dolor {
    padding: var(--espacio-12) var(--seccion-x-escritorio);
  }

  .indice-dolor__antetitulo {
    display: block;
    margin-bottom: 18px;
  }

  .indice-dolor__titulo {
    font-size: 40px;
    line-height: var(--lh-titular);
  }

  .indice-dolor__entradilla {
    font-size: 19px;
    margin-top: 18px;
    max-width: 52ch;
  }

  .indice-dolor__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 42px;
  }

  .entrada-dolor {
    padding: 24px 28px;
    gap: 20px;
    font-size: 18px;
  }
}

/* =====================================================================
   2.9 — Fila de anclas (solo Landing; se incluye para que la Landing la
   consuma sin duplicar hoja de estilos — Inicio no la usa)
   ===================================================================== */

.fila-anclas {
  border-top: 1px solid var(--color-salvia-claro);
  border-bottom: 1px solid var(--color-salvia-claro);
  padding: 16px var(--seccion-x-movil);
  overflow-x: auto;
}

.fila-anclas__antetitulo {
  margin-bottom: 10px;
}

.fila-anclas__lista {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* I8 QA final (2026-09-11): sin esto, el padding-right del contenedor se
   pierde al final del scroll y la última píldora ("Cómo llegar") toca el
   borde de la pantalla. Espaciador real dentro del contenido desplazable. */
.fila-anclas__lista::after {
  content: "";
  flex: 0 0 var(--seccion-x-movil);
}

.pildora-ancla {
  display: inline-flex;
  align-items: center;
  padding-block: 12px;
  padding-inline: 16px;
  border: 1px solid var(--color-salvia);
  border-radius: var(--radio-pildora);
  color: var(--color-tinta);
  font-size: 14.5px;
}

.pildora-ancla:hover {
  border-color: var(--color-indigo);
  color: var(--color-indigo);
  text-decoration: none;
}

@media (min-width: 960px) {
  .fila-anclas {
    padding: 20px var(--seccion-x-escritorio);
    overflow-x: visible;
  }

  .fila-anclas__antetitulo {
    display: none;
  }

  .fila-anclas__lista {
    flex-wrap: wrap;
    white-space: normal;
  }

  .fila-anclas__lista::after {
    content: none;
  }

  .pildora-ancla {
    font-size: 15px;
  }
}

/* =====================================================================
   2.10 — Sección de dolencia (solo Landing, 2 variantes de fondo; se
   incluye aquí por la misma razón que §2.9)
   ===================================================================== */

.dolencia {
  padding: 34px var(--seccion-x-movil);
  background: var(--color-blanco);
}

.dolencia--menta {
  background: var(--color-menta);
}

.dolencia__interior {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-6);
}

.dolencia__titulo {
  font-size: 24px;
  line-height: 1.22;
  margin-top: 10px;
}

.dolencia__texto {
  font-size: 16px;
  margin-top: 12px;
}

.dolencia__separador {
  height: 1px;
  background: var(--color-salvia-claro);
  margin: 20px 0;
}

/* Enlace de texto dentro de una sección de dolencia: lo usa #hipopresivos de la
   LANDING 1 para mandar a la landing de Pilates e hipopresivos (2026-09-16). */
.dolencia__enlace {
  color: var(--color-indigo);
  font-weight: var(--peso-medio);
}

.dolencia__lista-antetitulo {
  font-size: 13px;
  font-weight: var(--peso-medio);
  margin-bottom: 12px;
}

.dolencia__lista {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.dolencia__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 17px;
}

.dolencia__item svg {
  flex-shrink: 0;
  color: var(--color-indigo);
  margin-top: 3px;
}

.dolencia__telefono {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  margin-top: 18px;
  border-radius: var(--radio-boton);
  background: var(--color-indigo);
  color: var(--color-blanco);
  font-weight: var(--peso-medio);
}

.dolencia__cita {
  border-left: 2px solid var(--color-salvia);
  padding-left: 16px;
  margin-top: 20px;
  font-style: italic;
  font-size: 16px;
}

.dolencia__foto {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radio-tarjeta);
}

/* I6 QA final (2026-09-11): la esquina de firma de 100px que pide el artboard
   aprobado (design-system.md §1.6) para tratamiento.jpg en #deportiva; se
   había quedado con el radio de tarjeta genérico de las cuatro esquinas.
   No se aplica a #hipopresivos, que el artboard no lo pide. */
.dolencia__foto--firma {
  border-radius: 8px 100px 8px 8px;
}

@media (min-width: 960px) {
  .dolencia {
    padding: 64px var(--seccion-x-escritorio);
  }

  .dolencia__interior {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: start;
  }

  .dolencia__interior--con-foto {
    align-items: center;
  }

  .dolencia__titulo {
    font-size: 32px;
    line-height: 1.2;
  }

  .dolencia__texto {
    font-size: 18px;
  }

  .dolencia__telefono {
    display: inline-flex;
    min-height: 0;
    background: none;
    color: var(--color-indigo);
    font-weight: var(--peso-medio);
  }

  .dolencia__foto {
    height: 320px;
  }
}

/* =====================================================================
   2.11 — Bloque de reembolso (solo Landing; sin patrón móvil aprobado en
   ningún artboard, ver design-system.md §2.11)
   ===================================================================== */

.reembolso {
  border: 1px solid var(--color-salvia-claro);
  border-radius: var(--radio-tarjeta);
  padding: var(--espacio-6);
}

.reembolso__titulo {
  font-size: 22px;
}

.reembolso__texto {
  font-size: 15.5px;
  margin-top: 12px;
  max-width: 64ch;
}

@media (min-width: 960px) {
  .reembolso {
    padding: 40px 44px;
  }

  .reembolso__titulo {
    font-size: 28px;
  }

  .reembolso__texto {
    font-size: 17.5px;
  }
}

/* =====================================================================
   2.14 — Bloque de ATM (único campo salvia-claro grande, no solo borde)
   ===================================================================== */

.atm {
  background: var(--color-salvia-claro);
  padding: 34px var(--seccion-x-movil);
}

.atm__interior {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}

/* Este antetítulo usa tinta, no el gris-secundario del resto: así está
   en Main.dc.html/HomeMovil.dc.html (única excepción del sistema). */
.atm__antetitulo {
  color: var(--color-tinta);
}

.atm__titulo {
  font-size: 24px;
  line-height: 1.22;
}

.atm__texto {
  font-size: 16px;
  margin-top: 12px;
}

.atm__boton {
  width: 100%;
  padding: 15px;
  font-size: 16px;
}

@media (min-width: 960px) {
  .atm {
    padding: 64px;
  }

  .atm__interior {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 56px;
    align-items: center;
  }

  .atm__titulo {
    font-size: 34px;
    line-height: 1.2;
  }

  .atm__texto {
    font-size: 18px;
    margin-top: 18px;
  }

  .atm__boton {
    width: auto;
    padding: 17px 30px;
    font-size: 17px;
    justify-self: start;
  }
}

/* =====================================================================
   2.12 — Tarjeta de profesional (Equipo)
   ===================================================================== */

.equipo {
  padding: 40px var(--seccion-x-movil);
}

.equipo__antetitulo {
  display: none;
}

.equipo__titulo {
  font-size: 26px;
  line-height: 1.22;
}

.equipo__entradilla {
  font-size: 16px;
  margin-top: 12px;
}

.equipo__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.tarjeta-profesional__foto {
  width: 100%;
  height: 136px;
  object-fit: cover;
  border-radius: var(--radio-tarjeta);
}

.tarjeta-profesional__nombre {
  font-size: 13.5px;
  font-weight: var(--peso-medio);
  margin-top: 8px;
}

.tarjeta-profesional__cargo {
  font-size: 12px;
  color: var(--color-gris-secundario);
}

/* Banda, no nota al margen (Emilio, 2026-09-17: «esto ponlo en una banda,
   centrada y con su fondo»). Es la voz de la clínica, así que se lee de
   frente: fondo propio, ancho completo del bloque y texto centrado. */
.cita-posicionamiento {
  margin: 32px 0 0;
  padding: 36px var(--espacio-6);
  background: var(--color-salvia-claro);
  border-radius: var(--radio-tarjeta);
  text-align: center;
}

.cita-posicionamiento::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: 0 auto 22px;
  background: var(--color-indigo);
}

.cita-posicionamiento__texto {
  max-width: 58ch;
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.6;
  font-style: italic;
  margin-block: 0;
}

@media (min-width: 760px) {
  .cita-posicionamiento {
    padding: 52px var(--espacio-9);
  }

  .cita-posicionamiento__texto {
    font-size: 20px;
    line-height: 1.55;
  }
}

@media (min-width: 960px) {
  .equipo {
    padding: var(--espacio-12) var(--seccion-x-escritorio);
  }

  /* I7 QA final (2026-09-11): en la Landing, "equipo" y "resenas" no están en
     el artboard (se añadieron después por el spec/design-system) y rompían el
     ritmo menta/blanco al final — dos blancos seguidos aquí, dos mentas
     seguidas en resenas→cta-final. Modificador solo de Landing: en Inicio
     "equipo" (blanco) y "resenas" (menta) ya alternan bien y no se tocan. */
  .equipo--menta {
    background: var(--color-menta);
  }

  .equipo__antetitulo {
    display: block;
    margin-bottom: 18px;
  }

  .equipo__titulo {
    font-size: 40px;
    line-height: var(--lh-titular);
  }

  .equipo__entradilla {
    font-size: 19px;
    margin-top: 18px;
    max-width: 56ch;
  }

  .equipo__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 20px;
    margin-top: 44px;
  }

  .tarjeta-profesional__foto {
    height: 190px;
  }

  .tarjeta-profesional__nombre {
    font-size: 15px;
    margin-top: 12px;
  }

  .tarjeta-profesional__cargo {
    font-size: 13px;
  }

  .cita-posicionamiento {
    margin-top: 48px;
    padding: 32px 36px;
  }

  .cita-posicionamiento__texto {
    font-size: 20px;
    line-height: var(--lh-cuerpo);
  }

  }

/* =====================================================================
   2.13 — (libre) La rejilla de reseñas de escritorio vivía aquí. Desde el
   2026-09-17 las tres reseñas reales viven en la banda de autoridad (§2.6),
   en carrusel y también en móvil, por orden de Emilio. Repetirlas dos veces
   en la misma página era la única alternativa, y no es una alternativa.
   ===================================================================== */

/* =====================================================================
   2.14 — Quién dirige las clases + para quién son (solo LANDING Pilates)

   Nacen el 2026-09-17 con la landing «solo Pilates»: el retrato de quien da
   la clase y el bloque de casos que contesta «¿esto es para mí?», que es
   donde se cae la conversión de una clase dirigida.
   ===================================================================== */

.directora {
  background: var(--color-menta);
  padding: var(--espacio-10) var(--seccion-x-movil);
}

.directora__interior {
  display: grid;
  gap: var(--espacio-7);
}

.directora__figura {
  margin: 0;
  max-width: 300px;
}

.directora__foto {
  width: 100%;
  height: auto;
  border-radius: var(--radio-firma) var(--radio-tarjeta) var(--radio-tarjeta) var(--radio-tarjeta);
  display: block;
}

.directora__credencial {
  margin: var(--espacio-3) 0 0;
  font-size: 14px;
  font-weight: var(--peso-medio);
  color: var(--color-indigo);
}

.directora__titulo {
  font-size: 30px;
  margin: 6px 0 var(--espacio-5);
}

.directora__texto {
  margin: 0 0 var(--espacio-4);
  max-width: 60ch;
}

.directora__razones {
  display: grid;
  gap: var(--espacio-4);
  margin-top: var(--espacio-6);
}

.directora__razon {
  background: var(--color-blanco);
  border-radius: var(--radio-tarjeta);
  padding: var(--espacio-5);
}

.directora__razon-titulo {
  margin: 0 0 6px;
  font-weight: var(--peso-fuerte);
  font-size: 16px;
}

.directora__razon-texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.para-quien {
  padding: var(--espacio-10) var(--seccion-x-movil);
}

.para-quien__titulo {
  font-size: 26px;
  line-height: 1.22;
  margin: 6px 0 var(--espacio-7);
  max-width: 24ch;
}

.para-quien__grid {
  display: grid;
  gap: var(--espacio-4);
}

.para-quien__caso {
  border-top: 2px solid var(--color-salvia);
  padding-top: var(--espacio-4);
}

.para-quien__caso-titulo {
  margin: 0 0 6px;
  font-weight: var(--peso-fuerte);
  font-size: 17px;
}

.para-quien__caso-texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

@media (min-width: 960px) {
  .directora {
    padding: var(--espacio-12) var(--seccion-x-escritorio);
  }

  .directora__interior {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--espacio-11);
    align-items: start;
  }

  .directora__titulo {
    font-size: 38px;
  }

  .directora__razones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .para-quien {
    padding: var(--espacio-12) var(--seccion-x-escritorio);
  }

  .para-quien__titulo {
    font-size: 34px;
    max-width: 30ch;
  }

  .para-quien__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-7) var(--espacio-8);
  }
}

/* =====================================================================
   2.14 bis — Mapa de la zona (Emilio, 2026-09-17: «en dónde estamos pon un
   widget de maps con el pin»)

   NO es el iframe de Google: rompería tres invariantes de golpe —cero
   JavaScript, cero recursos externos y "sin iframes", que el gate comprueba—
   y metería del orden de un mega y decenas de peticiones en una web cuyo
   argumento de venta es que carga en dos segundos. Es un mapa autoalojado
   de 98 KB, con el pin encima y enlazado a Google Maps, que hace lo mismo a
   ojos del visitante. Base cartográfica © OpenStreetMap (ODbL), atribuida
   dentro del propio componente.

   Ocupa la columna derecha, en el sitio de la foto de fachada (Emilio,
   2026-09-17: «el widget de maps queda demasiado grande, sustitúyelo […] de
   manera que ocupe la columna derecha»). La imagen se genera con la misma
   proporción que la caja, 13:8, para que la caja no recorte nada: el pin va
   en porcentaje y un `object-fit: cover` lo dejaría fuera de sitio.
   ===================================================================== */

/* El marco existe para colgar la atribución FUERA del enlace: su texto era
   texto visible dentro del <a> y obligaba al nombre accesible del enlace a
   contenerlo, que es lo que cazaba Lighthouse. */
.mapa-marco {
  position: relative;
}

.mapa {
  position: relative;
  display: block;
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) var(--radio-tarjeta) var(--radio-firma);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--color-menta);
}

.mapa__imagen {
  display: block;
  width: 100%;
  height: auto;
}

/* El punto medido al componer la imagen: 50,08 % × 50,15 %. El pin se ancla
   por la punta, de ahí el translate del 100 % en vertical. */
.mapa__pin {
  position: absolute;
  left: 50.08%;
  top: 50.15%;
  transform: translate(-50%, -100%);
  line-height: 0;
  filter: drop-shadow(0 3px 5px rgba(83, 79, 79, .45));
}

.mapa__globo {
  position: absolute;
  left: 50.08%;
  top: calc(50.15% + 10px);
  transform: translateX(-50%);
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 7px 13px;
  border-radius: var(--radio-pildora);
  background: var(--color-blanco);
  box-shadow: 0 2px 8px rgba(83, 79, 79, .22);
  font-size: 14px;
  font-weight: var(--peso-medio);
}

.mapa__accion {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radio-boton);
  background: var(--color-indigo);
  color: var(--color-blanco);
  font-size: 14px;
  font-weight: var(--peso-medio);
}

.mapa:hover .mapa__accion {
  background: var(--color-indigo-hover);
}

/* Atribución obligatoria de la base cartográfica. Va arriba: abajo a la
   izquierda está la esquina de firma de 100 px, que con `overflow:hidden`
   se comía las primeras letras. */
.mapa__credito {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 3px 7px;
  border-radius: var(--radio-boton);
  background: rgba(255, 255, 255, .82);
  font-size: 11px;
  color: var(--color-tinta);
}

.mapa__accion {
  font-size: 13.5px;
  right: 10px;
  bottom: 10px;
  padding: 0 13px;
}

.mapa__globo {
  font-size: 13.5px;
  padding: 6px 11px;
}

/* =====================================================================
   2.15 — Bloque de «dónde estamos» (solo Inicio, solo escritorio)
   ===================================================================== */

/* Desde el 2026-09-17 lleva mapa, y un mapa que desaparece en el móvil es
   un mapa que nadie va a usar: se ve en los dos tamaños. */
.donde-estamos {
  display: block;
  padding: var(--espacio-10) var(--seccion-x-movil);
}

.donde-estamos__interior {
  display: grid;
  gap: var(--espacio-6);
}

@media (min-width: 960px) {
  .donde-estamos {
    display: block;
    padding: var(--espacio-12) var(--seccion-x-escritorio);
  }

  .donde-estamos__interior {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: center;
  }

  .donde-estamos__antetitulo {
    margin-bottom: 18px;
  }

  .donde-estamos__titulo {
    font-size: 34px;
    line-height: 1.2;
  }

  .donde-estamos__texto {
    font-size: 19px;
    margin-top: 14px;
  }

  .donde-estamos__separador {
    height: 1px;
    background: var(--color-salvia-claro);
    margin: 28px 0;
  }

  .donde-estamos__horario {
    font-size: 17px;
    margin: 0 0 6px;
  }

  .donde-estamos__telefonos {
    font-size: 17px;
    margin: 0;
  }

  .donde-estamos__enlace {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 28px;
    font-size: 17px;
    font-weight: var(--peso-medio);
  }

  .donde-estamos__foto {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: var(--radio-tarjeta) var(--radio-tarjeta) var(--radio-tarjeta) var(--radio-firma);
  }
}

/* =====================================================================
   2.16 — Banda de CTA final
   ===================================================================== */

.cta-final {
  background: var(--color-menta);
  padding: 38px var(--seccion-x-movil);
}

.cta-final__titulo {
  font-size: 26px;
}

.cta-final__texto {
  font-size: 16px;
  margin-top: 12px;
}

.cta-final__boton {
  width: 100%;
  padding: 17px;
  font-size: 18px;
  margin-top: 22px;
}

.cta-final__nota {
  font-size: 13.5px;
  color: var(--color-gris-secundario);
  margin-top: 12px;
  text-align: center;
}

.cta-final__formulario {
  display: none;
}

@media (min-width: 960px) {
  .cta-final {
    padding: var(--espacio-12) var(--seccion-x-escritorio);
  }

  .cta-final__interior {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
  }

  .cta-final__titulo {
    font-size: 40px;
    line-height: var(--lh-titular);
  }

  .cta-final__texto {
    font-size: 19px;
    margin-top: 20px;
  }

  .cta-final__boton {
    width: auto;
    padding: 20px 38px;
    font-size: 20px;
    margin-top: 32px;
  }

  .cta-final__nota {
    margin-top: 18px;
    text-align: left;
  }

  .cta-final__formulario {
    display: block;
  }
}

/* NAP completo dentro de #contacto en la Landing (no lo usa Inicio). */
.cta-final__nap {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-salvia-claro);
  font-size: 15px;
  color: var(--color-gris-secundario);
}

/* =====================================================================
   2.17 — Formulario inerte
   ===================================================================== */

.tarjeta-formulario {
  background: var(--color-blanco);
  border-radius: var(--radio-tarjeta);
  padding: 24px;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.formulario__etiqueta {
  display: block;
  font-size: 14px;
  font-weight: var(--peso-medio);
  margin-bottom: 7px;
}

.formulario__campo {
  width: 100%;
  border: 1px solid var(--color-salvia-claro);
  border-radius: var(--radio-boton);
  padding: 13px 15px;
  font-size: 16px;
  color: var(--color-tinta);
  font-family: inherit;
  background: var(--color-blanco);
}

.formulario__campo::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

textarea.formulario__campo {
  min-height: 74px;
  resize: none;
}

.formulario__casilla {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
}

.formulario__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex-shrink: 0;
  border: 1px solid var(--color-salvia);
  border-radius: var(--radio-checkbox);
  background: var(--color-blanco);
}

.formulario__checkbox:checked {
  background: var(--color-indigo);
  border-color: var(--color-indigo);
}

.formulario__boton {
  width: 100%;
  padding: 16px;
  font-size: 17px;
  text-align: center;
}

@media (min-width: 960px) {
  .tarjeta-formulario {
    padding: 36px;
  }
}

/* =====================================================================
   2.18 — Pie
   ===================================================================== */

.pie {
  background: var(--color-blanco);
  border-top: 1px solid var(--color-salvia-claro);
  padding: 28px var(--seccion-x-movil) 32px;
  font-size: 13.5px;
  color: var(--color-gris-secundario);
}

.pie__marca {
  color: var(--color-tinta);
  font-weight: var(--peso-medio);
  margin-bottom: 6px;
}

.pie__enlaces {
  margin-top: 12px;
  /* Desde 2026-09-16 hay más de un enlace (entró la segunda landing): sin
     separación se leían como uno solo. */
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

@media (min-width: 960px) {
  .pie {
    padding: 44px var(--seccion-x-escritorio);
    font-size: 15px;
  }

  .pie__interior {
    display: flex;
    justify-content: space-between;
    gap: 40px;
  }

  .pie__marca {
    margin-bottom: 8px;
  }

  .pie__enlaces {
    margin-top: 0;
    justify-content: flex-end;
    text-align: right;
  }
}

/* =====================================================================
   2.19 — Barra fija inferior móvil (dos acciones: Llamar / Pedir cita —
   sin WhatsApp, no es un canal que el negocio tenga)
   ===================================================================== */

.barra-fija-movil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--color-blanco);
  border-top: 1px solid var(--color-salvia-claro);
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  display: grid;
  /* Tres acciones desde el 2026-09-17 (llamada, WhatsApp y formulario). El
     hueco de llamar sigue siendo el mayor: es la única que cierra cita hoy. */
  grid-template-columns: 1.15fr 1fr .85fr;
  gap: 8px;
  box-shadow: var(--sombra-barra-fija);
}

.barra-fija-movil__llamar,
.barra-fija-movil__whatsapp,
.barra-fija-movil__cita {
  min-height: 48px;
  font-size: 15px;
  gap: 7px;
  padding-inline: 6px;
}

.barra-fija-movil__whatsapp svg,
.barra-fija-movil__llamar svg {
  flex: none;
}

@media (min-width: 960px) {
  .barra-fija-movil {
    display: none;
  }
}

@media (min-width: 960px) {
  .whatsapp-flotante {
    display: flex;
    bottom: 24px;
  }
}


/* =====================================================================
   2.20 — Botón flotante de WhatsApp (DUMMY · Emilio 2026-09-16)
   El informe de /propuesta/ dice que el canal que le falta es WhatsApp y que
   casi toda la plaza lleva el botón verde; esto lo enseña en pantalla en vez
   de solo contarlo. Es una maqueta: el elemento va `inert`, no enlaza a
   ningún wa.me y no abre nada (ver hechos.yaml §WhatsApp).
   Convive con la barra fija de móvil: flota POR ENCIMA de ella, nunca la tapa.
   ===================================================================== */

/* Desde el 2026-09-17 la barra fija de móvil ya lleva su propio botón de
   WhatsApp, así que el flotante solo sale donde esa barra no existe: dos
   WhatsApp a veinte píxeles uno del otro no son dos oportunidades. */
.whatsapp-flotante {
  display: none;
  position: fixed;
  right: 16px;
  /* La barra fija mide 48px de botón + 20px de padding: el flotante arranca
     por encima de ese borde, y respeta el área segura del iPhone. */
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 41;
  width: 56px;
  height: 56px;
  border-radius: var(--radio-pildora);
  background: var(--color-whatsapp);
  border: 2px solid var(--color-whatsapp-borde);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(83, 79, 79, .28);
}

.whatsapp-flotante svg {
  display: block;
  width: 30px;
  height: 30px;
  color: var(--color-blanco);
}

@media (min-width: 960px) {
  /* En escritorio no hay barra fija, así que baja a su sitio de siempre. */
  .whatsapp-flotante {
    right: 28px;
    bottom: 28px;
    width: 60px;
    height: 60px;
  }

  .whatsapp-flotante svg {
    width: 32px;
    height: 32px;
  }
}

/* =====================================================================
   3 — Añadidos Tareas 11-12: Landing (/fisioterapeuta-tres-cantos/) y
   Contacto (/contacto/). Solo lo que esos bloques necesitan y que no
   estaba ya cubierto por 2.1-2.19; todo lo demás (fila de anclas,
   dolencia, reembolso, enfoque--compacto, cta-final__nap) ya vivía
   arriba desde que se escribió esta hoja y se reutiliza tal cual.
   ===================================================================== */

/* -- 3.1 Hero de la Landing: mismo componente que 2.5, pero cada hero
   lleva su propio tamaño de H1/párrafo/foto (ver design-system.md
   §1.1 y §2.5: "cada hero lleva el suyo", no es un error de copia). */

.hero--landing {
  padding: 22px var(--seccion-x-movil) 26px;
}

/* En LandingMovil.dc.html el hero no lleva foto en absoluto (a diferencia
   de Inicio móvil, que sí muestra la de recepción suelta bajo el hero,
   ver design-system.md §2.5): se oculta la figura y solo reaparece a
   partir de escritorio. */
.hero--landing .hero__figura {
  display: none;
}

@media (min-width: 960px) {
  .hero--landing .hero__figura {
    display: block;
  }
}

.hero--landing .hero__titulo {
  font-size: 32px;
  line-height: 1.08;
}

.hero--landing .hero__parrafo {
  font-size: 16.5px;
}

@media (min-width: 960px) {
  .hero--landing {
    padding: 70px var(--seccion-x-escritorio) 56px;
  }

  .hero--landing .hero__titulo {
    font-size: 56px;
    line-height: 1.07;
  }

  .hero--landing .hero__figura::before {
    inset: -24px -24px 36px 54px;
  }

  .hero--landing .hero__foto {
    height: 380px;
  }
}

/* Línea de estrellas + "4,9 con 108 opiniones en Google · 6 números de
   colegiado · Clínica inscrita C59859": la Landing la muestra también en
   escritorio (Inicio no, ahí esa cifra vive en la Barra de confianza
   aparte, 2.6). Oculta en móvil: en móvil usa el .hero__valoracion
   normal, sin modificador, con el texto corto. */
.hero__valoracion--landing {
  display: none;
}

@media (min-width: 960px) {
  .hero__valoracion--landing {
    display: flex;
    font-size: 15px;
    margin-top: 22px;
  }
}

/* La línea de horario bajo el CTA ("L-V de 8:30 a 21:30 · Abierto
   ahora") solo existe en el hero móvil de la Landing: en escritorio ese
   hueco lo ocupa la línea de valoración de arriba. */
@media (min-width: 960px) {
  .hero__confianza--landing {
    display: none;
  }
}

/* Ritmo un poco más apretado entre pasos en la versión compacta de
   "Cómo trabajamos" de la Landing (20px móvil / 28px escritorio, la
   escritorio ya estaba definida en 2.7). */
.enfoque--compacto .enfoque__pasos {
  gap: 20px;
}

/* El separador de la sección de dolencia (entre el párrafo y la lista)
   es un recurso solo-móvil: en escritorio las dos columnas van una al
   lado de otra y no hace falta línea divisoria entre ellas. */
@media (min-width: 960px) {
  .dolencia__separador {
    display: none;
  }
}

/* El enlace "Cómo llegar" (2.15) solo tenía estilo dentro de la media
   query de escritorio porque en Inicio su contenedor ya está oculto en
   móvil. La Landing y Contacto lo reutilizan también visible en móvil
   (dentro de `.cta-final__nap` y de `.donde-estamos--contacto`), así
   que necesita una base fuera de esa media query — no afecta a Inicio
   porque allí sigue sin pintarse en ese ancho. */
@media (max-width: 959px) {
  .donde-estamos__enlace {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    font-size: 16px;
    font-weight: var(--peso-medio);
  }
}

/* `.cta-final__nap` fija su propio color gris-secundario sobre TODO su
   contenido (más específico que el `a { color: indigo }` global de
   base.css), así que sin esto el enlace "Cómo llegar" saldría en gris
   en vez de índigo. No se detectó antes porque Inicio nunca llegó a
   usar esta clase. */
.cta-final__nap a {
  color: var(--color-indigo);
}

.cta-final__nap a:hover {
  color: var(--color-indigo-hover);
}

/* -- 3.2 Envoltorio de sección blanca para el bloque de Reembolso: en
   2.11 solo se definió la caja (`.reembolso`), no la sección que la
   contiene a ancho completo — aquí no existía ese envoltorio porque
   Inicio no lleva este bloque. */
/* El zigzag menta-blanco once veces seguidas es metrónomo, no ritmo: este campo
   de salvia claro lo parte justo a mitad de la landing. */
.reembolso-seccion {
  background: var(--color-salvia-claro);
  padding: 34px var(--seccion-x-movil);
}

@media (min-width: 960px) {
  .reembolso-seccion {
    padding: var(--espacio-11) var(--seccion-x-escritorio);
  }
}

/* -- 3.3 Utilidad de separador fino — usada por el bloque de datos de
   Contacto (3.5); es el mismo filete de 1px salvia-claro que ya se
   repite con nombres propios en dolencia/donde-estamos/cta-final__nap,
   pero ninguno de esos vive en Contacto, así que se nombra en genérico
   para no forzar una relación con un componente que no es. */
.separador {
  height: 1px;
  background: var(--color-salvia-claro);
  margin: 20px 0;
}

@media (min-width: 960px) {
  .separador {
    margin: 28px 0;
  }
}

/* -- 3.4 Hero corto de Contacto: no existe en Inicio (su hero siempre
   lleva foto, CTA y valoración) — es un bloque nuevo, solo antetítulo +
   H1 + entradilla, sin grid de dos columnas. */
/* Contacto era la única página sin un campo de color grande: 88,6 % de blanco
   medido el 2026-09-17, y al llegar desde cualquier otra parecía de otra web. */
.hero-corto {
  background: var(--color-menta);
  padding: 28px var(--seccion-x-movil) 8px;
}

.hero-corto__antetitulo {
  margin-bottom: 12px;
}

.hero-corto__titulo {
  font-size: 28px;
  font-weight: var(--peso-medio);
  line-height: var(--lh-titular);
}

.hero-corto__texto {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 12px;
  max-width: 62ch;
}

@media (min-width: 960px) {
  .hero-corto {
    padding: var(--espacio-11) var(--seccion-x-escritorio) 12px;
  }

  .hero-corto__titulo {
    font-size: 40px;
  }

  .hero-corto__texto {
    font-size: 19px;
    margin-top: 18px;
  }
}

/* -- 3.5 Bloque de contacto a dos columnas (datos + formulario). El
   grid reutiliza literalmente `.cta-final__interior` (mismo patrón de
   dos columnas a 64px de separación); aquí solo se define el
   envoltorio de sección y la columna de datos, que no existe en
   ninguna página ya construida. */
.bloque-contacto {
  padding: 40px var(--seccion-x-movil);
  background: var(--color-blanco);
}

.bloque-contacto__telefono {
  width: 100%;
  padding: 17px;
  font-size: 18px;
}

.bloque-contacto__fila {
  margin-top: 24px;
}

.bloque-contacto__valor {
  font-size: 16px;
  margin-top: 4px;
}

.bloque-contacto__enlace {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: var(--peso-medio);
}

@media (min-width: 960px) {
  .bloque-contacto {
    padding: var(--espacio-12) var(--seccion-x-escritorio);
  }

  .bloque-contacto__telefono {
    width: auto;
    padding: 18px 34px;
    font-size: 18px;
  }

  .bloque-contacto__fila {
    margin-top: 28px;
  }

  .bloque-contacto__valor {
    font-size: 17px;
  }

  .bloque-contacto__enlace {
    font-size: 17px;
  }
}

/* -- 3.6 Nota corta antes del aviso melocotón, dentro de la tarjeta de
   formulario de Contacto (Inicio y Landing solo llevan el aviso; aquí
   se añade una frase de contexto propia, ver contenido/contacto.md §4). */
.tarjeta-formulario__nota {
  font-size: 15px;
  color: var(--color-gris-secundario);
  margin: 0 0 18px;
}

/* -- 3.7 "Dónde estamos" visible también en móvil: en Inicio esta
   sección es solo-escritorio (2.15) porque el resto de la info ya
   aparece antes; en Contacto es contenido propio de la página y tiene
   que verse en los dos anchos. */
.donde-estamos--contacto {
  display: block;
  padding: 40px var(--seccion-x-movil);
}

.donde-estamos--contacto .donde-estamos__interior {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.donde-estamos--contacto .donde-estamos__titulo {
  font-size: 26px;
  line-height: 1.22;
}

.donde-estamos--contacto .donde-estamos__foto {
  height: 220px;
}

@media (min-width: 960px) {
  .donde-estamos--contacto {
    padding: var(--espacio-12) var(--seccion-x-escritorio);
  }

  .donde-estamos--contacto .donde-estamos__interior {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: center;
  }

  .donde-estamos--contacto .donde-estamos__titulo {
    font-size: 34px;
    line-height: 1.2;
  }

  .donde-estamos--contacto .donde-estamos__foto {
    height: 320px;
  }
}

/* =====================================================================
   4 — Añadidos de la LANDING 2 (/pilates-tres-cantos/,
   2026-09-16). Solo lo que esa página necesita y no estaba ya cubierto:
   el bloque de bonos (único sitio del sitio con cifras de precio, porque
   es el único servicio con tarifa publicada) y el acordeón de preguntas.
   Todo lo demás —hero, fila de anclas, enfoque, dolencia, equipo,
   reseñas, CTA final, pie— se reutiliza tal cual.
   ===================================================================== */

/* -- 4.1 Variante de «enfoque» sobre blanco. El componente nace en menta
   (§2.7) y en esta página hay dos bloques de pasos: el segundo tiene que
   alternar para que el ritmo de fondos no encadene dos mentas. */
.enfoque--blanco {
  background: var(--color-blanco);
}

/* El bloque de pasos nace con tres columnas (§2.7). «Cómo es una clase» tiene
   cuatro, y con la rejilla de tres el cuarto se quedaba solo en una fila. */
@media (min-width: 960px) {
  .enfoque--cuatro .enfoque__pasos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }
}

/* -- 4.2 Bonos */

.bonos {
  /* Mismo motivo que el reembolso en la landing 1, y de paso el bloque de
     precios deja de confundirse con las secciones de alrededor. */
  background: var(--color-salvia-claro);
  padding: 40px var(--seccion-x-movil);
}

.bonos .antetitulo {
  color: var(--color-tinta);
}

.bonos__titulo {
  font-size: 26px;
  line-height: var(--lh-titular);
  letter-spacing: var(--interletra-titulares);
  margin: 6px 0 10px;
}

.bonos__entradilla {
  /* sobre salvia claro el gris secundario da 3,80:1 */
  color: var(--color-tinta);
  margin: 0 0 24px;
}

.bonos__grid {
  display: grid;
  gap: 14px;
}

.tarjeta-bono {
  position: relative;
  background: var(--color-blanco);
  border-radius: var(--radio-tarjeta);
  padding: 24px;
  /* El borde no es decorativo: sobre menta, una tarjeta blanca sin contorno
     se difumina por los bordes en pantallas de poco contraste. */
  border: 1px solid var(--color-salvia-claro);
}

/* La tarjeta que su propia tabla marca «AHORRA». Se distingue por borde e
   indicador, no por fondo saturado: el índigo es de la acción (§1.2). */
.tarjeta-bono--destacada {
  border: 2px solid var(--color-indigo);
}

.tarjeta-bono__etiqueta {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: var(--radio-pildora);
  background: var(--color-indigo);
  color: var(--color-blanco);       /* 9,55:1 — el único par con blanco permitido */
  font-size: 13px;
  font-weight: var(--peso-medio);
  letter-spacing: .04em;
}

.tarjeta-bono__modalidad {
  font-size: 18px;
  font-weight: var(--peso-medio);
  margin: 0;
}

.tarjeta-bono__detalle {
  color: var(--color-gris-secundario);
  font-size: 15px;
  margin: 4px 0 18px;
}

.tarjeta-bono__precio {
  font-size: 40px;
  font-weight: var(--peso-fuerte);
  line-height: 1.1;
  letter-spacing: var(--interletra-titulares);
  margin: 0;
}

.tarjeta-bono__sesiones {
  font-size: 15px;
  color: var(--color-gris-secundario);
  margin: 4px 0 0;
}

.bonos__nota {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--color-tinta);
}

.bonos__nota a {
  color: var(--color-indigo);
  font-weight: var(--peso-medio);
}

/* -- 4.3 Preguntas frecuentes (<details> nativo, cero JavaScript) */

.faq {
  padding: 40px var(--seccion-x-movil);
  background: var(--color-menta);
}

.faq__titulo {
  font-size: 26px;
  line-height: var(--lh-titular);
  letter-spacing: var(--interletra-titulares);
  margin: 6px 0 22px;
}

.faq__lista {
  display: grid;
  gap: 0;
  max-width: 820px;
}

.faq__item {
  border-block-end: 1px solid var(--color-salvia-claro);
}

.faq__item:first-child {
  border-block-start: 1px solid var(--color-salvia-claro);
}

.faq__pregunta {
  /* list-style: none + ::-webkit-details-marker para que el triángulo por
     defecto no pelee con el indicador propio en Safari. */
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 17px;
  font-weight: var(--peso-medio);
  min-height: 48px;          /* objetivo táctil */
}

.faq__pregunta::-webkit-details-marker {
  display: none;
}

/* El indicador es un «+» que gira a «×» al abrir: dibujado con dos barras,
   sin fuente de iconos y sin SVG que mantener. */
.faq__pregunta::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--color-indigo), var(--color-indigo)) center/14px 2px no-repeat,
    linear-gradient(var(--color-indigo), var(--color-indigo)) center/2px 14px no-repeat;
  transition: transform .18s cubic-bezier(.32, .72, 0, 1);
}

.faq__item[open] .faq__pregunta::after {
  transform: rotate(45deg);
}

.faq__respuesta {
  max-width: 64ch;
  margin: 0 0 20px;
  padding-inline-end: 30px;
  color: var(--color-tinta);
}

.faq__respuesta a {
  color: var(--color-indigo);
  font-weight: var(--peso-medio);
}

@media (prefers-reduced-motion: reduce) {
  .faq__pregunta::after {
    transition: none;
  }
}

@media (min-width: 960px) {
  .bonos {
    padding: 72px var(--seccion-x-escritorio);
  }

  .bonos__titulo {
    font-size: 34px;
  }

  .bonos__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
  }

  .tarjeta-bono {
    padding: 30px;
  }

  .faq {
    padding: 72px var(--seccion-x-escritorio);
  }

  .faq__titulo {
    font-size: 34px;
  }

  .faq__pregunta {
    font-size: 19px;
    padding: 22px 0;
  }
}


/* =====================================================================

/* =====================================================================
   5 — /propuesta/ v4 (2026-09-17)

   Mezcla pedida por Emilio: hero, potencial, velocidad, bloques de precio y
   preguntas vienen del lienzo de Claude Design; los pasos de «qué haremos» y
   el cierre son los de la versión construida aquí; el recorrido usa el
   timeline central de Claude Design con los textos de aquí; y el dial toma su
   forma —pista, ticks, dos tarjetas de resultado— conservando el melocotón.

   Portado a clases y a la Poppins autoalojada: el lienzo venía con estilos en
   línea y con Google Fonts, y aquí no entra ni un recurso externo.
   Sin pie: la banda de cierre es lo último de la página.
   ===================================================================== */

body.pagina-propuesta {
  background: var(--color-blanco);
}

/* -- 5.0 Piezas compartidas ----------------------------------------- */

.eyebrow {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: var(--peso-medio);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-gris-secundario);
}

.titular-seccion {
  font-size: clamp(30px, 5vw, 54px);
  font-weight: var(--peso-fuerte);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}

.entrada-seccion {
  margin: 20px 0 0;
  max-width: 60ch;
  font-size: clamp(15.5px, 1.7vw, 18px);
  line-height: 1.6;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.acciones .boton {
  min-height: 48px;
  padding: 13px 20px;
  font-size: 15px;
}

/* Tarjeta blanca de contenido: la usa el panel de datos y el de velocidad. */
.panel {
  margin-top: clamp(30px, 4vw, 48px);
  background: var(--color-blanco);
  border-radius: var(--radio-tarjeta);
  padding: clamp(22px, 3.5vw, 40px);
}

/* -- 5.1 Hero ------------------------------------------------------- */

.ph {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 9vw, 132px) var(--seccion-x-movil) clamp(48px, 7vw, 104px);
}

/* Dos manchas con el radio de firma del cliente, detrás del titular. */
.ph__forma {
  position: absolute;
  border-radius: var(--radio-firma);
  z-index: 0;
}

.ph__forma--menta {
  inset-inline-end: -180px;
  top: -220px;
  width: 560px;
  height: 560px;
  background: var(--color-menta);
}

.ph__forma--melocoton {
  inset-inline-start: -90px;
  bottom: -140px;
  width: 260px;
  height: 260px;
  background: var(--color-melocoton);
  opacity: .5;
}

.ph__interior {
  position: relative;
  z-index: 1;
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
}

.ph__titulo {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(42px, 9.5vw, 104px);
  font-weight: var(--peso-fuerte);
  line-height: .98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.ph__regla {
  display: block;
  width: 88px;
  height: 4px;
  background: var(--color-indigo);
  margin: clamp(28px, 4vw, 44px) 0 clamp(24px, 3vw, 32px);
}

.ph__entrada {
  margin: 0;
  max-width: 640px;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: var(--peso-ligero);
  line-height: 1.5;
  text-wrap: pretty;
}

/* -- 5.2 El potencial en tu zona ------------------------------------ */

.zona {
  background: var(--color-menta);
  padding: clamp(52px, 7vw, 104px) var(--seccion-x-movil);
}

.panel__dos {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  align-items: end;
}

/* El waffle: 66 cuadrados de 10 búsquedas, más 4 huecos para que la rejilla
   de diez columnas cierre por arriba. */
.waffle {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(3px, .5vw, 5px);
  max-width: 300px;
}

.waffle__hueco {
  aspect-ratio: 1;
}

.waffle__celda {
  aspect-ratio: 1;
  border-radius: 2px;
}

.waffle__celda--pilates      { background: var(--color-tinta); }
.waffle__celda--masaje       { background: var(--color-melocoton); }
.waffle__celda--hipopresivos { background: var(--color-salvia-claro); }
.waffle__celda--drenaje      { background: var(--color-salvia); }
.waffle__celda--ancla        { background: var(--color-indigo); }

.waffle__pie {
  margin: 12px 0 0;
  max-width: 300px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-gris-secundario);
}

.leyenda {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leyenda__fila {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-block-end: 1px solid var(--color-menta);
}

.leyenda__fila:first-child {
  padding-top: 0;
}

.leyenda__marca {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  transform: translateY(1px);
}

.leyenda__marca--pilates      { background: var(--color-tinta); }
.leyenda__marca--masaje       { background: var(--color-melocoton); }
.leyenda__marca--hipopresivos { background: var(--color-salvia-claro); }
.leyenda__marca--drenaje      { background: var(--color-salvia); }
.leyenda__marca--ancla        { background: var(--color-indigo); }

.leyenda__termino {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(13.5px, 1.5vw, 15.5px);
  line-height: 1.35;
}

.leyenda__cifra {
  flex: none;
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.leyenda__fila--ancla .leyenda__termino {
  font-weight: var(--peso-medio);
}

.leyenda__fila--ancla .leyenda__cifra {
  color: var(--color-indigo);
}

.panel__total {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: clamp(24px, 3vw, 32px);
  border-block-start: 1px solid var(--color-salvia-claro);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px clamp(12px, 1.6vw, 18px);
}

.total__cifra {
  margin: 0;
  font-size: clamp(64px, 11vw, 132px);
  font-weight: var(--peso-fuerte);
  line-height: .78;
  letter-spacing: -0.05em;
  color: var(--color-indigo);
  font-variant-numeric: tabular-nums;
}

.total__texto {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: var(--peso-medio);
  line-height: 1.3;
}

.total__nota {
  margin: 0;
  margin-inline-start: auto;
  max-width: 26ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-gris-secundario);
}

/* El bloque de oportunidad es el único campo oscuro de la página. */
.oportunidad {
  margin-top: 20px;
  background: var(--color-tinta);
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) var(--radio-firma) var(--radio-tarjeta);
  padding: clamp(24px, 3.5vw, 44px);
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  align-items: center;
}

.oportunidad__eyebrow {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: var(--peso-medio);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-melocoton);
}

.oportunidad__titulo {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: var(--peso-fuerte);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-blanco);
}

.casillas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(7px, 1vw, 10px);
  max-width: 340px;
}

.casilla {
  aspect-ratio: 1;
  border: 1.5px solid var(--color-salvia);
  border-radius: 4px;
}

.casilla--llena {
  background: var(--color-melocoton);
  border-color: var(--color-melocoton);
}

.casillas__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--color-blanco);
}

.casillas__marca {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--color-salvia);
  border-radius: 2px;
  margin-inline-end: 8px;
}

.casillas__marca--llena {
  background: var(--color-melocoton);
  border-color: var(--color-melocoton);
}

/* -- 5.3 El recorrido: hilo central con los textos alternados -------- */

.presencia {
  padding: clamp(52px, 7vw, 104px) var(--seccion-x-movil);
}

.hilo {
  list-style: none;
  margin: clamp(40px, 5.5vw, 76px) 0 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 56px);
}

/* El raíl y su relleno. En móvil va pegado a la izquierda; en escritorio, al
   centro. El relleno avanza con el scroll y, sin soporte, se ve entero. */
.hilo::before,
.hilo::after {
  content: "";
  position: absolute;
  inset-block: clamp(26px, 3vw, 44px);
  inset-inline-start: 21px;
  width: 6px;
  border-radius: 6px;
  /* Al fondo: como `::after` va después de los <li> en orden de pintado, sin
     esto el relleno se dibujaba ENCIMA y partía los números por la mitad. */
  z-index: 0;
}

.hilo::before {
  background: var(--color-salvia-claro);
}

.hilo::after {
  background: var(--color-indigo);
  transform-origin: top;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hilo::after {
      animation: rellenar linear both;
      animation-timeline: view(block);
      animation-range: cover 6% cover 64%;
    }

    /* El texto asoma conforme se avanza. */
    .hilo__texto {
      animation: asomar linear both;
      animation-timeline: view(block);
      animation-range: entry 25% entry 90%;
    }

    /* Y el círculo se enciende cuando el hilo llega a su altura. Sin soporte
       o con movimiento reducido, los tres se ven ya rellenos: el estado base
       de .hilo__nudo es el encendido y esto solo adelanta el `from`. */
    .hilo__nudo {
      animation: encender linear both;
      animation-timeline: view(block);
      animation-range: entry 45% entry 95%;
    }
  }
}

@keyframes rellenar {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes asomar {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes encender {
  from {
    background-color: var(--color-blanco);
    color: var(--color-indigo);
  }
  to {
    background-color: var(--color-indigo);
    color: var(--color-blanco);
  }
}

.hilo__paso {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.4vw, 32px);
  align-items: start;
}

.hilo__nudo {
  order: -1;
  margin-block-start: clamp(0px, .4vw, 6px);
  position: relative;      /* sin esto el z-index no aplica y el raíl tapa el número */
  z-index: 1;
  width: clamp(48px, 6vw, 88px);
  height: clamp(48px, 6vw, 88px);
  border-radius: 50%;
  background: var(--color-indigo);
  color: var(--color-blanco);
  border: 6px solid var(--color-blanco);
  /* Anillo interior: mientras el círculo está sin rellenar, es lo único que
     lo separa del fondo blanco de la página. */
  box-shadow: inset 0 0 0 3px var(--color-indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(19px, 2.8vw, 36px);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hilo__texto {
  position: relative;
  z-index: 1;
  min-width: 0;
  background: var(--color-blanco);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hilo__titulo {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: var(--peso-fuerte);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hilo__cuerpo {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

/* -- 5.4 Qué haremos ------------------------------------------------ */

.haremos {
  background: var(--color-menta);
  padding: clamp(52px, 7vw, 104px) var(--seccion-x-movil);
}

.pasos {
  list-style: none;
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: 0;
}

.paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 26px 0;
  border-block-start: 1px solid var(--color-salvia);
}

.paso:last-child {
  border-block-end: 1px solid var(--color-salvia);
}

.paso__numero {
  margin: 0;
  font-size: clamp(30px, 8vw, 46px);
  font-weight: var(--peso-fuerte);
  line-height: .9;
  letter-spacing: -0.03em;
  color: var(--color-indigo);
  font-variant-numeric: tabular-nums;
}

.paso__titulo {
  margin: 0 0 8px;
  font-size: clamp(20px, 4.4vw, 27px);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.paso__texto {
  margin: 0;
  max-width: 56ch;
}

/* -- 5.5 Velocidad --------------------------------------------------- */

.velocidad__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: baseline;
  justify-content: space-between;
}

.velocidad__titulo {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: var(--peso-fuerte);
  letter-spacing: -0.02em;
}

.velocidad__metodo {
  margin: 0;
  font-size: 13px;
  color: var(--color-gris-secundario);
}

.velocidad__anillos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin: clamp(28px, 3.5vw, 44px) 0;
}

.anillo {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

/* El disco es un conic-gradient con un círculo blanco encima: más robusto que
   enmascararlo, y deja el número por delante sin recortarse. */
.anillo__disco {
  position: relative;
  width: clamp(150px, 20vw, 212px);
  height: clamp(150px, 20vw, 212px);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.anillo__disco::before {
  content: "";
  position: absolute;
  inset: clamp(16px, 2.2vw, 24px);
  border-radius: 50%;
  background: var(--color-blanco);
}

.anillo__disco--malo {
  background: conic-gradient(var(--color-alerta) calc(var(--v) * 1%), var(--color-salvia-claro) 0);
}

.anillo__disco--bueno {
  background: conic-gradient(var(--color-indigo) calc(var(--v) * 1%), var(--color-salvia-claro) 0);
}

.anillo__centro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.anillo__cifra {
  font-size: clamp(42px, 5.4vw, 62px);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.anillo__cifra--malo  { color: var(--color-alerta); }
.anillo__cifra--bueno { color: var(--color-indigo); }

.anillo__de {
  font-size: 11px;
  font-weight: var(--peso-medio);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gris-secundario);
}

.anillo__pie {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.anillo__nombre {
  font-size: clamp(16px, 1.9vw, 20px);
  font-weight: var(--peso-fuerte);
}

.velocidad__cierre {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  padding-top: clamp(20px, 2.6vw, 30px);
  border-block-start: 1px solid var(--color-menta);
}

.velocidad__frase {
  margin: 0;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.6;
}

.velocidad__invita {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: var(--peso-medio);
}

/* -- 5.6 Inversión --------------------------------------------------- */

.inversion {
  padding: clamp(52px, 7vw, 104px) var(--seccion-x-movil);
}

.dos-pagos {
  margin-top: clamp(30px, 4vw, 48px);
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  align-items: start;
}

.pago {
  border-radius: var(--radio-tarjeta);
  padding: clamp(24px, 3.2vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
}

.pago--servicio {
  background: var(--color-indigo);
  color: var(--color-blanco);
}

.pago--ads {
  background: var(--color-menta);
  border-radius: var(--radio-tarjeta) var(--radio-firma) var(--radio-tarjeta) var(--radio-tarjeta);
}

.pago__etiqueta {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: var(--peso-medio);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-gris-secundario);
}

.pago--servicio .pago__etiqueta {
  color: var(--color-blanco);
}

.pago__quien {
  margin: 0;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: var(--peso-medio);
}

.pago__precio {
  margin: 0;
  font-size: clamp(44px, 6vw, 64px);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  letter-spacing: -0.035em;
}

.pago__precio--ads {
  font-size: clamp(34px, 5vw, 50px);
  color: var(--color-indigo);
}

.pago__desde,
.pago__periodo {
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: var(--peso-ligero);
  letter-spacing: 0;
  color: var(--color-gris-secundario);
}

.pago--servicio .pago__periodo {
  color: var(--color-blanco);
}

.incluye {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid rgba(255, 255, 255, .45);
}

.incluye li {
  padding: 13px 0;
  font-size: 15.5px;
  line-height: 1.45;
  border-block-end: 1px solid rgba(255, 255, 255, .45);
}

.incluye li:last-child {
  border-block-end: 0;
}

.pago__detalle {
  margin: 0;
  font-size: clamp(15.5px, 1.7vw, 17px);
  line-height: 1.6;
}

.pago__clave {
  margin: 0;
  background: var(--color-blanco);
  border-radius: var(--radio-tarjeta);
  padding: 18px 20px;
  font-size: clamp(15.5px, 1.7vw, 17px);
  font-weight: var(--peso-medio);
  line-height: 1.5;
}

.pago__pildora {
  margin: 0;
  align-self: flex-start;
  background: var(--color-melocoton);
  border-radius: var(--radio-pildora);
  padding: 6px 13px;
  font-size: 12px;
  font-weight: var(--peso-medio);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* -- 5.7 El dial: forma del lienzo, melocotón de aquí ---------------- */

.dial {
  background: var(--color-melocoton);
  border-radius: var(--radio-firma) var(--radio-tarjeta) var(--radio-tarjeta) var(--radio-tarjeta);
  padding: clamp(24px, 3.4vw, 44px);
}

.dial__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}

.dial__eyebrow {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: var(--peso-medio);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.dial__titulo {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: var(--peso-fuerte);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.dial__ayuda {
  margin: 0;
  font-size: 14px;
  font-weight: var(--peso-medio);
}

/* --- El carril: esto es lo que se arrastra -------------------------- */

/* --- El dial: un range nativo vestido -------------------------------- */

.dial__range {
  --dial-pct: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

/* La pista, con el relleno hasta donde esté el tirador. Se pinta con un
   degradado de dos paradas duras porque un range no admite un hijo. */
.dial__range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: var(--radio-pildora);
  background: linear-gradient(to right,
    var(--color-indigo) var(--dial-pct), var(--color-blanco) var(--dial-pct));
}

.dial__range::-moz-range-track {
  height: 10px;
  border-radius: var(--radio-pildora);
  background: var(--color-blanco);
}

.dial__range::-moz-range-progress {
  height: 10px;
  border-radius: var(--radio-pildora);
  background: var(--color-indigo);
}

.dial__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -8px;                 /* centra el tirador sobre la pista */
  border-radius: var(--radio-pildora);
  background: var(--color-indigo);
  border: 4px solid var(--color-blanco);
  box-shadow: 0 2px 6px rgba(83, 79, 79, .3);
}

.dial__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: var(--radio-pildora);
  background: var(--color-indigo);
  border: 4px solid var(--color-blanco);
  box-shadow: 0 2px 6px rgba(83, 79, 79, .3);
}

.dial__range:focus-visible {
  outline: var(--ancho-foco) solid var(--color-foco);
  outline-offset: 6px;
  border-radius: var(--radio-pildora);
}

.dial__importe {
  display: block;
  font-size: clamp(44px, 7vw, 82px);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-indigo);
  font-variant-numeric: tabular-nums;
}

.dial__periodo {
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: var(--peso-ligero);
  letter-spacing: 0;
  color: var(--color-tinta);
}

/* Cada marca va donde de verdad para el tirador, no en el centro de un
   octavo: un range mueve el thumb entre thumbW/2 y el ancho menos thumbW/2,
   así que la rejilla de ocho columnas dejaba el 150 y el 500 desfasados 43 px
   hacia dentro. Medido en el navegador antes de tocarlo. */
.dial__escala {
  position: relative;
  height: 20px;
  margin-top: 10px;
  margin-bottom: clamp(22px, 3vw, 32px);
  font-size: 13px;
  font-weight: var(--peso-ligero);
  font-variant-numeric: tabular-nums;
}

.dial__escala span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.dial__escala span:nth-child(1) { left: calc(13px + 0.000000 * (100% - 26px)); }
.dial__escala span:nth-child(2) { left: calc(13px + 0.142857 * (100% - 26px)); }
.dial__escala span:nth-child(3) { left: calc(13px + 0.285714 * (100% - 26px)); }
.dial__escala span:nth-child(4) { left: calc(13px + 0.428571 * (100% - 26px)); }
.dial__escala span:nth-child(5) { left: calc(13px + 0.571429 * (100% - 26px)); }
.dial__escala span:nth-child(6) { left: calc(13px + 0.714286 * (100% - 26px)); }
.dial__escala span:nth-child(7) { left: calc(13px + 0.857143 * (100% - 26px)); }
.dial__escala span:nth-child(8) { left: calc(13px + 1.000000 * (100% - 26px)); }

.dial__resultados {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.dial__tarjeta {
  background: var(--color-blanco);
  border-radius: var(--radio-tarjeta);
  padding: clamp(16px, 2vw, 24px);
}

.dial__rotulo {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: var(--peso-medio);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.dial__cifra {
  margin: 0 0 10px;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-indigo);
  font-variant-numeric: tabular-nums;
}

.dial__nota {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.dial__pie {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  /* A 13,5 px el desfase entre el ch de CSS y la letra media de Poppins es mayor:
     58ch declarados son unos 73 caracteres por línea. */
  max-width: 58ch;
}

/* -- 5.8 Preguntas y cierre ------------------------------------------ */

.preguntas {
  background: var(--color-menta);
  padding: clamp(52px, 7vw, 104px) var(--seccion-x-movil);
}

.preguntas .faq__lista {
  margin-top: clamp(30px, 4vw, 48px);
  max-width: 820px;
}

.preguntas .faq__item {
  border-block-end-color: var(--color-salvia-claro);
}

.preguntas .faq__item:first-child {
  border-block-start-color: var(--color-salvia-claro);
}

.cierre {
  background: var(--color-indigo);
  color: var(--color-blanco);
  padding: clamp(56px, 8vw, 120px) var(--seccion-x-movil);
}

.cierre__titulo {
  color: var(--color-blanco);
  margin: 0 0 18px;
  font-size: clamp(34px, 8vw, 62px);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  letter-spacing: -0.03em;
}

.cierre__texto {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}

.cierre__firma {
  margin: 28px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .78);
  max-width: 52ch;
}

.boton--sobre-indigo {
  background: var(--color-blanco);
  color: var(--color-indigo);
}

.boton--whatsapp {
  background: var(--color-whatsapp);
  border: 2px solid var(--color-whatsapp-borde);
  color: #0B3D2C;                 /* 6,16:1 sobre el verde de marca */
}

.boton--whatsapp svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  /* El carril se sigue arrastrando; lo que se apaga es el desplazamiento
     suave que el navegador pone al llegar por teclado. */
  }

@media (min-width: 760px) {
  .zona,
  .presencia,
  .haremos,
  .inversion,
  .preguntas,
  .cierre,
  .ph {
    padding-inline: var(--seccion-x-escritorio);
  }

  /* El hilo se va al centro y los textos se alternan a cada lado. */
  .hilo::before,
  .hilo::after {
    inset-inline-start: calc(50% - 3px);
  }

  .hilo__paso {
    grid-template-columns: 1fr auto 1fr;
    /* Centrado, no `start`: con los textos alternados a cada lado, un círculo
       pegado al borde de arriba se lee como desalineado de su propio texto —
       que es justo lo que pasaba con el 2. */
    align-items: center;
  }

  /* Fila explícita para los dos. Sin esto, en los pasos pares el texto ocupa
     la columna 3 y la autocolocación —que no retrocede— mandaba el círculo a
     una SEGUNDA fila: el paso medía el doble y el número quedaba descolgado
     de su propio texto. Era lo del «2 no está alineado». */
  .hilo__texto,
  .hilo__nudo {
    grid-row: 1;
  }

  .hilo__paso:nth-child(odd) .hilo__texto {
    grid-column: 1;
    text-align: right;
    align-items: flex-end;
    padding-inline-end: clamp(12px, 1.4vw, 18px);
  }

  .hilo__paso:nth-child(even) .hilo__texto {
    grid-column: 3;
    padding-inline-start: clamp(12px, 1.4vw, 18px);
  }

  .hilo__nudo {
    order: 0;
    grid-column: 2;
    justify-self: center;
    /* con align-items:center el margen de arriba descentraba el círculo */
    margin-block-start: 0;
  }

  .velocidad__cierre {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
  }

  .paso {
    grid-template-columns: 120px 1fr;
    gap: 40px;
    padding: 34px 0;
  }
}

/* Estados del dial: cada radio enseña su importe, sus dos cifras, mueve el
   progreso y marca su tick. */
  height: 13px;
  background: var(--color-indigo);
}
  font-weight: var(--peso-fuerte);
}
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
}
  height: 13px;
  background: var(--color-indigo);
}
  font-weight: var(--peso-fuerte);
}
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
}
  height: 13px;
  background: var(--color-indigo);
}
  font-weight: var(--peso-fuerte);
}
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
}
  height: 13px;
  background: var(--color-indigo);
}
  font-weight: var(--peso-fuerte);
}
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
}
  height: 13px;
  background: var(--color-indigo);
}
  font-weight: var(--peso-fuerte);
}
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
}
  height: 13px;
  background: var(--color-indigo);
}
  font-weight: var(--peso-fuerte);
}
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
}
  height: 13px;
  background: var(--color-indigo);
}
  font-weight: var(--peso-fuerte);
}
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
}
  height: 13px;
  background: var(--color-indigo);
}
  font-weight: var(--peso-fuerte);
}
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
}


/* =====================================================================
   5.9 — Servicios Extra de /propuesta/

   Rediseñada desde cero el 2026-09-17 con la skill frontend-design. El plan
   y su revisión contra el default están en diseno/plan-extras-2026-09-17.md.

   El principio del que sale todo: la demostración ES el argumento. Jorge no
   se convence leyendo lo que hace un sistema de citas, se convence tocando
   uno. Así que manda el aparato y el texto es una nota al margen.

   Lo que se quitó de la versión anterior, y por qué:
   · Una pastilla de precio por bloque. Los tres cuestan lo mismo: repetirlo
     tres veces es ruido. El precio sube al titular de la sección.
   · Un fondo de color distinto por bloque. No codificaba nada —no hay orden
     ni jerarquía entre los tres— y era decoración disfrazada de estructura.
     Ahora los tres descansan sobre la misma superficie.
   · Tres siluetas iguales. Cada aparato toma la forma de su trabajo: la
     agenda se ojea y es ancha; el cobro y el chat son columnas, como un
     datáfono y un móvil.
   · Etiquetas en versalitas, que son uno de los tells más comunes.

   Escala: 15 / 17 / 22 / 30 / 44, razón ≈1,33. Contraste medido: tinta sobre
   menta 6,92:1, tinta sobre blanco 8,08:1, blanco sobre índigo 9,55:1.
   ===================================================================== */

.extras {
  padding: clamp(56px, 8vw, 116px) var(--seccion-x-movil) clamp(44px, 5vw, 76px);
  border-top: 1px solid var(--color-salvia-claro);
}

.extras__portada {
  margin-bottom: clamp(30px, 4vw, 52px);
}

/* El titular de la sección lleva el precio dentro, así que es más largo que
   los demás y necesita más caja: con las 20ch del sistema se partía en
   cuatro líneas de dos palabras. */
.extras__portada .titular-seccion {
  max-width: 22ch;
}

.extras__portada .entrada-seccion {
  max-width: 62ch;
}

/* El mostrador: la superficie única sobre la que descansan los tres. */
.extras__mostrador {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(14px, 1.8vw, 22px);
  background: var(--color-menta);
  border-radius: var(--radio-firma) var(--radio-tarjeta) var(--radio-tarjeta) var(--radio-tarjeta);
}

/* Una ancha arriba, dos columnas debajo: es lo que pide el contenido, no una
   rejilla decidida de antemano. */
@media (min-width: 1000px) {
  .extras__mostrador {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aparato--ancho {
    grid-column: 1 / -1;
  }
}

.aparato {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.6vw, 34px);
  background: var(--color-blanco);
  border-radius: var(--radio-tarjeta);
}

.aparato__ficha {
  margin-bottom: clamp(18px, 2.2vw, 26px);
}

.aparato__nombre {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: var(--peso-fuerte);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.aparato__texto {
  margin: 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
}

.aparato__pantalla {
  flex: 1;
}

.aparato__pie {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.55;
  max-width: 68ch;
}

@media (min-width: 1000px) {
  /* En la ancha, la ficha se pone al lado del titular y deja el ancho entero
     para el calendario, que es lo que hay que ver. */
  .aparato--ancho .aparato__ficha {
    display: grid;
    grid-template-columns: minmax(0, 24ch) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px);
    align-items: baseline;
  }

  .aparato--ancho .aparato__nombre {
    margin-bottom: 0;
  }
}

/* --- El aparato de las citas ----------------------------------------- */

.agenda__radio,
.cobro__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

@media (min-width: 900px) {
  .agenda__cuerpo {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: clamp(26px, 3vw, 44px);
    align-items: start;
  }
}

.agenda__mes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-4);
}

.agenda__mes-nombre {
  margin: 0;
  font-size: 17px;
  font-weight: var(--peso-fuerte);
}

.agenda__mes-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--color-salvia-claro);
  border-radius: var(--radio-pildora);
  color: var(--color-indigo);
  font-size: 17px;
  line-height: 1;
}

.agenda__mes,
.agenda__semana,
.agenda__rejilla {
  max-width: 440px;
}

.agenda__semana,
.agenda__rejilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.agenda__semana {
  margin-bottom: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: var(--peso-medio);
}

.agenda__celda {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 40px;
  border-radius: var(--radio-tarjeta);
  font-size: 15px;
  font-weight: var(--peso-medio);
  border: 1.5px solid transparent;
}

.agenda__dia {
  border-color: var(--color-salvia-claro);
  cursor: pointer;
  transition: background-color .18s cubic-bezier(.32, .72, 0, 1),
              border-color .18s cubic-bezier(.32, .72, 0, 1),
              color .18s cubic-bezier(.32, .72, 0, 1);
}

.agenda__dia:hover {
  border-color: var(--color-indigo);
}

.agenda__celda--apagada {
  color: var(--color-tinta);
  opacity: .38;
}

.agenda__celda--vacia {
  min-height: 0;
}

.agenda__eco {
  display: none;
  font-weight: var(--peso-medio);
}

.agenda__panel {
  margin-top: 22px;
  border-top: 1px solid var(--color-salvia-claro);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .agenda__panel {
    margin-top: 0;
    border-top: 0;
    border-inline-start: 1px solid var(--color-salvia-claro);
    padding-top: 0;
    padding-inline-start: clamp(26px, 3vw, 44px);
    align-self: stretch;
  }
}

.agenda__panel-titulo {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: var(--peso-medio);
}

.agenda__horas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agenda__hora {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--color-salvia-claro);
  border-radius: var(--radio-pildora);
  font-size: 15px;
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: background-color .18s cubic-bezier(.32, .72, 0, 1),
              border-color .18s cubic-bezier(.32, .72, 0, 1),
              color .18s cubic-bezier(.32, .72, 0, 1);
}

.agenda__hora--ocupada {
  cursor: default;
  color: var(--color-tinta);
  background: var(--color-menta);
  border-color: var(--color-menta);
  text-decoration: line-through;
  opacity: .65;
}

.agenda__ok {
  display: none;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--color-menta);
  border-radius: var(--radio-tarjeta);
  font-size: 15px;
  line-height: 1.5;
}

.agenda__ok svg {
  flex: none;
  margin-top: 3px;
  color: var(--color-indigo);
}

.agenda__reservar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: auto;
  border-radius: var(--radio-boton);
  background: var(--color-indigo);
  color: var(--color-blanco);
  font-weight: var(--peso-medio);
  font-size: 17px;
}

.agenda__ok + .agenda__reservar {
  margin-top: 14px;
}

@media (min-width: 900px) {
  .agenda__reservar {
    margin-top: 20px;
  }
}

/* --- El aparato del cobro -------------------------------------------- */

.cobro__rotulo {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: var(--peso-medio);
}

.cobro__opcion {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1.5px solid var(--color-salvia-claro);
  border-radius: var(--radio-tarjeta);
  cursor: pointer;
  transition: border-color .18s cubic-bezier(.32, .72, 0, 1),
              background-color .18s cubic-bezier(.32, .72, 0, 1);
}

.cobro__marca {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-indigo);
  background: var(--color-blanco);
  transition: border-width .14s cubic-bezier(.32, .72, 0, 1);
}

.cobro__opcion-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cobro__opcion-nombre {
  font-weight: var(--peso-medio);
  font-size: 16px;
}

.cobro__opcion-detalle {
  font-size: 14px;
  line-height: 1.4;
}

.cobro__opcion-precio {
  margin-left: auto;
  flex: none;
  font-size: 17px;
  font-weight: var(--peso-fuerte);
}

.cobro__resumen {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--color-salvia-claro);
}

.cobro__total-rotulo {
  margin: 0;
  font-size: 17px;
  font-weight: var(--peso-medio);
}

.cobro__total {
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  color: var(--color-indigo);
}

.cobro__v {
  display: none;
}

.cobro__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 18px;
  border-radius: var(--radio-boton);
  background: var(--color-indigo);
  color: var(--color-blanco);
  font-weight: var(--peso-medio);
  font-size: 17px;
  cursor: pointer;
  transition: background-color .18s cubic-bezier(.32, .72, 0, 1);
}

.cobro__boton:hover {
  background: var(--color-indigo-hover);
}

.cobro__tarjeta {
  display: none;
  margin-top: 18px;
  padding: clamp(16px, 2.4vw, 22px);
  background: var(--color-menta);
  border-radius: var(--radio-tarjeta);
}

.cobro__tarjeta-aviso {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: var(--peso-medio);
}

.cobro__campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 120px;
  padding: 11px 14px;
  background: var(--color-blanco);
  border-radius: var(--radio-boton);
  margin-bottom: 10px;
}

.cobro__campo-fila {
  display: flex;
  gap: 10px;
}

.cobro__campo-rotulo {
  font-size: 14px;
}

.cobro__campo-valor {
  font-size: 17px;
  font-weight: var(--peso-medio);
  letter-spacing: .04em;
}

.cobro__tarjeta-total {
  margin: 14px 0 0;
  font-size: 15px;
}

.cobro__tarjeta-total .cobro__v {
  font-weight: var(--peso-fuerte);
}

.cobro__cerrar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  font-size: 15px;
  font-weight: var(--peso-medio);
  color: var(--color-indigo);
  text-decoration: underline;
  cursor: pointer;
}

#cobro-abrir:checked ~ .cobro__cuerpo .cobro__boton {
  display: none;
}

#cobro-abrir:checked ~ .cobro__cuerpo .cobro__tarjeta {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .agenda__dia,
  .agenda__hora,
  .cobro__opcion,
  .cobro__marca,
  .cobro__boton {
    transition: none;
  }
}

/* --- Botón de pago de la pasarela de mentira ------------------------- */

/* Emilio, 2026-09-17: «quiero que aparezca un botón de pagar de forma
   segura, que no haga nada pero se vea». Va `inert`: se ve y no lleva a
   ninguna parte, como el resto de la demostración. */
.cobro__pagar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  margin-top: 6px;
  border-radius: var(--radio-boton);
  background: var(--color-indigo);
  color: var(--color-blanco);
  font-weight: var(--peso-medio);
  font-size: 16px;
}

/* --- Conversación de WhatsApp del chatbot ---------------------------- */

.chat {
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  background: var(--color-blanco);
}

.chat__cabecera {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: 13px 16px;
  background: var(--color-whatsapp-borde);
  color: var(--color-blanco);
}

.chat__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radio-pildora);
  background: var(--color-blanco);
  color: var(--color-whatsapp-borde);
}

.chat__nombre {
  margin: 0;
  font-weight: var(--peso-medio);
  font-size: 16px;
}

.chat__estado {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .88);
}

.chat__hilo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 14px 22px;
  background: #F2EDE6;                 /* el papel del chat, no un token del sistema */
}

.chat__dia {
  align-self: center;
  margin: 8px 0;
  padding: 4px 12px;
  border-radius: var(--radio-pildora);
  background: rgba(255, 255, 255, .92);
  font-size: 12.5px;
  font-weight: var(--peso-medio);
}

.chat__linea {
  display: flex;
}

.chat__linea--yo {
  justify-content: flex-end;
}

.chat__burbuja {
  max-width: min(78%, 460px);
  padding: 9px 12px 6px;
  border-radius: 12px;
  background: var(--color-blanco);
  box-shadow: 0 1px 1px rgba(83, 79, 79, .16);
}

/* Verde clarito de WhatsApp para lo que escribe el paciente. Medido: la
   tinta del sistema saca 7,4:1 encima. */
.chat__linea--yo .chat__burbuja {
  background: #DCF8C6;
  border-bottom-right-radius: 3px;
}

.chat__linea--ellos .chat__burbuja {
  border-bottom-left-radius: 3px;
}

.chat__burbuja p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.chat__hora {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--color-gris-secundario);
}

.chat__visto {
  color: #34B7F1;
}

@media (min-width: 760px) {
  .chat__hilo {
    padding: 24px 20px 28px;
  }

  .chat__burbuja p {
    font-size: 16px;
  }
}

/* --- Estados generados (día, hora y servicio) ------------------------- */

#d-1:checked ~ .agenda__cuerpo .agenda__dia[for="d-1"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-1:checked ~ .agenda__cuerpo .agenda__eco--d1 { display: inline; }
#d-1:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-1"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-2:checked ~ .agenda__cuerpo .agenda__dia[for="d-2"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-2:checked ~ .agenda__cuerpo .agenda__eco--d2 { display: inline; }
#d-2:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-2"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-6:checked ~ .agenda__cuerpo .agenda__dia[for="d-6"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-6:checked ~ .agenda__cuerpo .agenda__eco--d6 { display: inline; }
#d-6:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-6"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-7:checked ~ .agenda__cuerpo .agenda__dia[for="d-7"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-7:checked ~ .agenda__cuerpo .agenda__eco--d7 { display: inline; }
#d-7:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-7"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-8:checked ~ .agenda__cuerpo .agenda__dia[for="d-8"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-8:checked ~ .agenda__cuerpo .agenda__eco--d8 { display: inline; }
#d-8:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-8"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-9:checked ~ .agenda__cuerpo .agenda__dia[for="d-9"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-9:checked ~ .agenda__cuerpo .agenda__eco--d9 { display: inline; }
#d-9:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-9"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-12:checked ~ .agenda__cuerpo .agenda__dia[for="d-12"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-12:checked ~ .agenda__cuerpo .agenda__eco--d12 { display: inline; }
#d-12:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-12"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-13:checked ~ .agenda__cuerpo .agenda__dia[for="d-13"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-13:checked ~ .agenda__cuerpo .agenda__eco--d13 { display: inline; }
#d-13:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-13"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-15:checked ~ .agenda__cuerpo .agenda__dia[for="d-15"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-15:checked ~ .agenda__cuerpo .agenda__eco--d15 { display: inline; }
#d-15:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-15"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-16:checked ~ .agenda__cuerpo .agenda__dia[for="d-16"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-16:checked ~ .agenda__cuerpo .agenda__eco--d16 { display: inline; }
#d-16:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-16"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-19:checked ~ .agenda__cuerpo .agenda__dia[for="d-19"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-19:checked ~ .agenda__cuerpo .agenda__eco--d19 { display: inline; }
#d-19:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-19"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-20:checked ~ .agenda__cuerpo .agenda__dia[for="d-20"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-20:checked ~ .agenda__cuerpo .agenda__eco--d20 { display: inline; }
#d-20:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-20"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-21:checked ~ .agenda__cuerpo .agenda__dia[for="d-21"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-21:checked ~ .agenda__cuerpo .agenda__eco--d21 { display: inline; }
#d-21:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-21"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-23:checked ~ .agenda__cuerpo .agenda__dia[for="d-23"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-23:checked ~ .agenda__cuerpo .agenda__eco--d23 { display: inline; }
#d-23:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-23"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-26:checked ~ .agenda__cuerpo .agenda__dia[for="d-26"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-26:checked ~ .agenda__cuerpo .agenda__eco--d26 { display: inline; }
#d-26:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-26"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-27:checked ~ .agenda__cuerpo .agenda__dia[for="d-27"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-27:checked ~ .agenda__cuerpo .agenda__eco--d27 { display: inline; }
#d-27:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-27"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-28:checked ~ .agenda__cuerpo .agenda__dia[for="d-28"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-28:checked ~ .agenda__cuerpo .agenda__eco--d28 { display: inline; }
#d-28:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-28"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#d-30:checked ~ .agenda__cuerpo .agenda__dia[for="d-30"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#d-30:checked ~ .agenda__cuerpo .agenda__eco--d30 { display: inline; }
#d-30:focus-visible ~ .agenda__cuerpo .agenda__dia[for="d-30"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#h-0900:checked ~ .agenda__cuerpo .agenda__hora[for="h-0900"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#h-0900:checked ~ .agenda__cuerpo .agenda__eco--h0900 { display: inline; }
#h-0900:checked ~ .agenda__cuerpo .agenda__ok { display: flex; }
#h-0900:focus-visible ~ .agenda__cuerpo .agenda__hora[for="h-0900"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#h-1030:checked ~ .agenda__cuerpo .agenda__hora[for="h-1030"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#h-1030:checked ~ .agenda__cuerpo .agenda__eco--h1030 { display: inline; }
#h-1030:checked ~ .agenda__cuerpo .agenda__ok { display: flex; }
#h-1030:focus-visible ~ .agenda__cuerpo .agenda__hora[for="h-1030"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#h-1200:checked ~ .agenda__cuerpo .agenda__hora[for="h-1200"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#h-1200:checked ~ .agenda__cuerpo .agenda__eco--h1200 { display: inline; }
#h-1200:checked ~ .agenda__cuerpo .agenda__ok { display: flex; }
#h-1200:focus-visible ~ .agenda__cuerpo .agenda__hora[for="h-1200"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#h-1730:checked ~ .agenda__cuerpo .agenda__hora[for="h-1730"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#h-1730:checked ~ .agenda__cuerpo .agenda__eco--h1730 { display: inline; }
#h-1730:checked ~ .agenda__cuerpo .agenda__ok { display: flex; }
#h-1730:focus-visible ~ .agenda__cuerpo .agenda__hora[for="h-1730"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }
#h-1900:checked ~ .agenda__cuerpo .agenda__hora[for="h-1900"] { background: var(--color-indigo); color: var(--color-blanco); border-color: var(--color-indigo); }
#h-1900:checked ~ .agenda__cuerpo .agenda__eco--h1900 { display: inline; }
#h-1900:checked ~ .agenda__cuerpo .agenda__ok { display: flex; }
#h-1900:focus-visible ~ .agenda__cuerpo .agenda__hora[for="h-1900"] { outline: var(--ancho-foco) solid var(--color-foco); outline-offset: 2px; }

#c1:checked ~ .cobro__cuerpo .cobro__opcion[for="c1"] { border-color: var(--color-indigo); background: var(--color-blanco); }
#c1:checked ~ .cobro__cuerpo .cobro__opcion[for="c1"] .cobro__marca { border-width: 7px; }
#c1:checked ~ .cobro__cuerpo .cobro__v--c1 { display: inline; }
#c2:checked ~ .cobro__cuerpo .cobro__opcion[for="c2"] { border-color: var(--color-indigo); background: var(--color-blanco); }
#c2:checked ~ .cobro__cuerpo .cobro__opcion[for="c2"] .cobro__marca { border-width: 7px; }
#c2:checked ~ .cobro__cuerpo .cobro__v--c2 { display: inline; }
#c3:checked ~ .cobro__cuerpo .cobro__opcion[for="c3"] { border-color: var(--color-indigo); background: var(--color-blanco); }
#c3:checked ~ .cobro__cuerpo .cobro__opcion[for="c3"] .cobro__marca { border-width: 7px; }
#c3:checked ~ .cobro__cuerpo .cobro__v--c3 { display: inline; }
#c4:checked ~ .cobro__cuerpo .cobro__opcion[for="c4"] { border-color: var(--color-indigo); background: var(--color-blanco); }
#c4:checked ~ .cobro__cuerpo .cobro__opcion[for="c4"] .cobro__marca { border-width: 7px; }
#c4:checked ~ .cobro__cuerpo .cobro__v--c4 { display: inline; }

/* --- Foco de teclado, control a control --- */
#c1:focus-visible ~ .cobro__cuerpo .cobro__opcion[for="c1"],
#c2:focus-visible ~ .cobro__cuerpo .cobro__opcion[for="c2"],
#c3:focus-visible ~ .cobro__cuerpo .cobro__opcion[for="c3"],
#c4:focus-visible ~ .cobro__cuerpo .cobro__opcion[for="c4"],
#cobro-abrir:focus-visible ~ .cobro__cuerpo .cobro__boton,
#cobro-abrir:focus-visible ~ .cobro__cuerpo .cobro__cerrar {
  outline: var(--ancho-foco) solid var(--color-foco);
  outline-offset: var(--desfase-foco);
}