/* frontend/landing.saas7a2c3.20260917.css — Sprints SaaS-7A.2B, 7A.2C, 7A.2C.2 y 7A.2C.3
 *
 * Hoja de la landing pública de Agenda Médica by OnLab. Es la ÚNICA hoja del
 * producto que no pertenece a la aplicación clínica: vive en la raíz de
 * /agendamedica/ y no la importa ningún módulo de /app/ ni de /platform/.
 *
 * -------------------------------------------------------------------------
 * LA PALETA, Y POR QUÉ ESTOS TRES COLORES
 * -------------------------------------------------------------------------
 *   Azul profundo   confianza. Es el color del texto fuerte y del pie.
 *   Azul brillante  la acción. Solo los CTA y los focos lo llevan.
 *   Turquesa        salud. Aparece en acentos, nunca en superficies grandes.
 *   Verde           un único uso: confirmar. Si estuviera en todas partes
 *                   dejaría de significar nada.
 *
 * Nada de verde hospital, ni neón, ni degradados estridentes: un producto que
 * guarda expedientes clínicos tiene que parecer sobrio antes que llamativo.
 * El blanco y los grises azulados hacen casi todo el trabajo; el color entra
 * a cuentagotas y siempre significa algo.
 *
 * -------------------------------------------------------------------------
 * SIN JAVASCRIPT, SIN FUENTES REMOTAS, SIN FRAMEWORK
 * -------------------------------------------------------------------------
 * La página no tiene más interacción que sus enlaces. Las fuentes son las del
 * sistema: una fuente remota añade una petición bloqueante y un salto de
 * texto a cambio de un matiz tipográfico que aquí no paga.
 *
 * Responsive por composición, no por saltos: rejillas con auto-fit y anchos
 * en ch/rem. Se comprueba a 375, 390, 768, 1024, 1280 y 1440 px que ninguna
 * caja obligue a desplazar en horizontal.
 */

:root {
  color-scheme: light;

  --azul-900: #10294f;
  --azul-800: #163a76;
  --azul-600: #2563eb;
  --azul-500: #3b82f6;
  --teal-500: #14b8a6;
  --teal-050: #eefbf9;
  --verde-500: #22c55e;

  --tinta: #0f1c2e;
  --tinta-media: #46586f;
  --tinta-suave: #6b7c93;

  --papel: #ffffff;
  --nube: #f6f9fd;
  --nube-honda: #eef3fa;
  --linea: #dde5f0;

  --radio: 14px;
  --radio-xl: 20px;
  --ancho: 1120px;
  --sombra: 0 1px 2px rgba(16, 41, 79, 0.04), 0 8px 24px rgba(16, 41, 79, 0.06);
  --sombra-alta: 0 2px 4px rgba(16, 41, 79, 0.06), 0 16px 40px rgba(16, 41, 79, 0.10);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Ninguna caja puede provocar desplazamiento lateral. */
  overflow-x: hidden;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--tinta); }
h1 { font-size: clamp(1.85rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 3.4vw, 2.15rem); }
h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
p { margin: 0 0 16px; }
.entradilla { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--tinta-media); max-width: 60ch; }

/* =======================================================================
   CABECERA
   ======================================================================= */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  /* Un desenfoque MUY leve: da profundidad al hacer scroll sin convertir la
     barra en un cristal, que es donde el efecto empieza a estorbar. */
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.barra .envoltura {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
  margin-right: auto;
}
.marca .simbolo {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--azul-600), var(--teal-500));
  display: grid;
  place-items: center;
  color: #fff;
}
.marca .simbolo svg { width: 18px; height: 18px; }
.marca .by { color: var(--tinta-suave); font-weight: 600; }

.navegacion { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.navegacion a {
  color: var(--tinta-media);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
}
.navegacion a:hover { color: var(--azul-800); background: var(--nube); }

/* En un teléfono la cabecera es fija: si ocupa tres filas se come un tercio
   de la pantalla durante todo el scroll. Los anclajes son una comodidad de
   escritorio —en móvil el contenido está a un pulgar de distancia— así que
   se retiran y quedan la marca y el acceso, en una sola fila. */
@media (max-width: 700px) {
  .navegacion { display: none; }
  .barra .envoltura { min-height: 58px; flex-wrap: nowrap; }
  .marca { font-size: 0.98rem; }
}
/* Y en los teléfonos estrechos, lo justo para que marca y acceso quepan en
   una sola línea. Por debajo de esto la marca se parte en dos, que sigue
   leyéndose bien. */
@media (max-width: 430px) {
  .marca { font-size: 0.92rem; gap: 8px; }
  .marca .simbolo { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; }
  .marca .simbolo svg { width: 16px; height: 16px; }
  .boton-fantasma { padding: 8px 13px; font-size: 0.92rem; }
  .barra .envoltura { padding-left: 16px; padding-right: 16px; gap: 8px; }
}

/* =======================================================================
   BOTONES
   ======================================================================= */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 11px;
  font-weight: 650;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  max-width: 100%;
  transition: background-color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}
.boton svg { width: 18px; height: 18px; flex: 0 0 18px; }
.boton-primario {
  background: var(--azul-600);
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, .28), 0 8px 20px rgba(37, 99, 235, .22);
}
.boton-primario:hover { background: #1d4ed8; transform: translateY(-1px); }
.boton-secundario { background: var(--papel); color: var(--azul-800); border-color: var(--linea); }
.boton-secundario:hover { border-color: var(--azul-500); background: var(--nube); }
.boton-fantasma { background: transparent; color: var(--azul-800); border-color: var(--linea); padding: 9px 16px; white-space: nowrap; }
.boton-fantasma:hover { background: var(--nube); border-color: var(--azul-500); }
.boton-bloque { width: 100%; }

/* =======================================================================
   SECCIONES
   ======================================================================= */
section { padding: clamp(52px, 7vw, 84px) 0; }
.fondo-nube { background: var(--nube); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }

.encabezado-seccion { max-width: 62ch; }
.sobre-titulo {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal-500);
  margin-bottom: 10px;
}

/* =======================================================================
   HERO
   ======================================================================= */
.hero {
  position: relative;
  padding: clamp(48px, 7vw, 88px) 0 clamp(52px, 7vw, 92px);
  background:
    radial-gradient(900px 460px at 78% -8%, #e8f1ff 0%, rgba(232, 241, 255, 0) 62%),
    radial-gradient(680px 400px at 4% 8%, var(--teal-050) 0%, rgba(238, 251, 249, 0) 60%),
    var(--papel);
  overflow: hidden;
}
.hero-rejilla {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 940px) {
  .hero-rejilla { grid-template-columns: 1.05fr 0.95fr; }
}
.hero h1 { max-width: 15ch; }
.hero .entradilla { margin-bottom: 26px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.micro-beneficios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
}
.micro-beneficios li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--tinta-media);
}
.micro-beneficios svg { width: 17px; height: 17px; color: var(--verde-500); flex: 0 0 17px; }

/* --- Mockup decorativo del hero ---------------------------------------
   Composición abstracta hecha con HTML y CSS. No es una captura: no hay
   ningún dato clínico, ningún nombre y ninguna clínica real. */
.mockup {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-alta);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.mockup-barra { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.mockup-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--nube-honda); }
.mockup-punto:first-child { background: #ffd4d4; }
.mockup-punto:nth-child(2) { background: #ffeab8; }
.mockup-punto:nth-child(3) { background: #cdeedd; }
.mockup-titulo { margin-left: 6px; font-size: 0.8rem; font-weight: 650; color: var(--tinta-suave); }

.mockup-cuerpo { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 460px) { .mockup-cuerpo { grid-template-columns: 1.25fr 1fr; } }

.mockup-agenda { display: grid; gap: 8px; }
.cita {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: var(--nube);
  border: 1px solid var(--linea);
}
.cita .hora { font-size: 0.72rem; font-weight: 700; color: var(--azul-600); font-variant-numeric: tabular-nums; }
.cita .barras { display: grid; gap: 5px; }
.cita .barra-larga, .cita .barra-corta { height: 7px; border-radius: 4px; background: var(--nube-honda); }
.cita .barra-larga { width: 82%; }
.cita .barra-corta { width: 52%; }
.cita-activa { background: #eff5ff; border-color: #cddffb; }
.cita-activa .barra-larga { background: #cddffb; }
.cita-activa .barra-corta { background: #dfeafd; }

.mockup-lateral { display: grid; gap: 12px; align-content: start; }
.ficha {
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 8px;
  background: var(--papel);
}
.ficha-cabeza { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; color: var(--tinta-media); }
.ficha-cabeza svg { width: 15px; height: 15px; color: var(--teal-500); flex: 0 0 15px; }
.ficha .barra-larga, .ficha .barra-corta { height: 7px; border-radius: 4px; background: var(--nube-honda); }
.ficha .barra-larga { width: 90%; }
.ficha .barra-corta { width: 62%; }
.ficha-sello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f7a45;
  background: #e8f8ee;
  border-radius: 999px;
  padding: 4px 10px;
  justify-self: start;
}
.ficha-sello svg { width: 13px; height: 13px; flex: 0 0 13px; }

/* =======================================================================
   TARJETAS DE CAPACIDADES
   ======================================================================= */
.rejilla-capacidades {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr));
  margin-top: 34px;
}
.capacidad {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 20px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.capacidad:hover { border-color: #c7d8f4; box-shadow: var(--sombra); transform: translateY(-2px); }
.capacidad .icono {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--nube-honda);
  color: var(--azul-600);
  margin-bottom: 13px;
}
.capacidad .icono svg { width: 19px; height: 19px; }
.capacidad h3 { margin-bottom: 5px; }
.capacidad p { margin: 0; color: var(--tinta-media); font-size: 0.93rem; line-height: 1.55; }

/* =======================================================================
   CHIPS DE ESPECIALIDAD
   ======================================================================= */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; padding: 0; list-style: none; }
.chips li {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--azul-800);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 7px 15px;
}

/* =======================================================================
   CONFIANZA
   ======================================================================= */
.rejilla-confianza {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  margin-top: 30px;
}
.confianza {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 13px;
  align-items: start;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 18px;
}
.confianza .icono { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--teal-050); color: var(--teal-500); }
.confianza .icono svg { width: 17px; height: 17px; }
.confianza h3 { font-size: 0.98rem; margin-bottom: 4px; }
.confianza p { margin: 0; font-size: 0.9rem; color: var(--tinta-media); line-height: 1.55; }

/* =======================================================================
   PLANES
   ======================================================================= */
.planes {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 282px), 1fr));
  margin-top: 34px;
  align-items: stretch;
}
.plan {
  position: relative;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-xl);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-destacado {
  border-color: var(--azul-600);
  box-shadow: var(--sombra-alta);
}
.etiqueta {
  position: absolute;
  top: -12px;
  left: 22px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--azul-600);
  border-radius: 999px;
  padding: 5px 12px;
}
.plan h3 { font-size: 1.15rem; margin-bottom: 10px; }
.precio { font-size: 2.05rem; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 0; }
.precio small { font-size: 0.9rem; font-weight: 550; color: var(--tinta-suave); letter-spacing: 0; }
.precio-anual { color: var(--tinta-media); font-size: 0.92rem; font-variant-numeric: tabular-nums; margin: 4px 0 0; }
.plan .para { color: var(--tinta-media); font-size: 0.93rem; margin: 14px 0 20px; line-height: 1.55; }
.plan .boton { margin-top: auto; }

.aviso {
  display: grid;
  gap: 6px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--teal-500);
  border-radius: var(--radio);
  padding: 20px 22px;
  margin-top: 26px;
}
.aviso p { margin: 0; color: var(--tinta-media); font-size: 0.95rem; }
.aviso strong { color: var(--tinta); }

/* =======================================================================
   PASOS
   ======================================================================= */
.pasos {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr));
  margin-top: 34px;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.pasos li {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 22px;
}
.pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--azul-800);
  color: #fff;
  font-weight: 750;
  font-size: 0.95rem;
  margin-bottom: 13px;
}
.pasos h3 { margin-bottom: 5px; }
.pasos p { margin: 0; color: var(--tinta-media); font-size: 0.93rem; line-height: 1.55; }

/* =======================================================================
   CIERRE
   ======================================================================= */
.cierre {
  background: linear-gradient(155deg, var(--azul-900) 0%, var(--azul-800) 58%, #1c4f86 100%);
  color: #e8f0fb;
  text-align: center;
}
.cierre h2 { color: #fff; max-width: 22ch; margin-left: auto; margin-right: auto; }
.cierre .entradilla { color: #c4d5ee; margin: 0 auto 26px; }
.cierre .acciones { justify-content: center; }
.cierre .boton-secundario { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38); }
.cierre .boton-secundario:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

/* =======================================================================
   PIE
   ======================================================================= */
.pie { background: var(--tinta); color: #a9b8cc; padding: 40px 0 34px; font-size: 0.92rem; }
.pie-rejilla { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.pie a { color: #fff; }
.pie .marca-pie { color: #fff; font-weight: 700; font-size: 1rem; display: block; margin-bottom: 8px; }
.pie p { margin: 0 0 8px; }
.pie .contacto { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pie .boton-whatsapp-pie {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #1f8a4c;
  color: #fff;
  border-radius: 10px;
  padding: 11px 18px;
  font-weight: 650;
  text-decoration: none;
}
.pie .boton-whatsapp-pie:hover { background: #197a42; }
.pie .boton-whatsapp-pie svg { width: 18px; height: 18px; flex: 0 0 18px; }
.pie .secundario { color: #8b9db5; font-size: 0.88rem; }
.pie .secundario a { color: #c3d2e6; }
.pie .legal { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); color: #8b9db5; font-size: 0.86rem; }

/* =======================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   =======================================================================
   Vive SOLO en esta página: es un elemento de index.html y esta hoja no la
   importa ningún módulo de la aplicación, así que no puede aparecer dentro
   de /app/, /platform/, /auth/ ni /registro-paciente/. */
.whatsapp-flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Área táctil holgada en cualquier tamaño. */
  min-width: 56px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 999px;
  background: #1f8a4c;
  color: #fff;
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(15, 92, 52, .32), 0 2px 6px rgba(15, 92, 52, .24);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.whatsapp-flotante svg { width: 26px; height: 26px; flex: 0 0 26px; }
.whatsapp-flotante:hover { background: #197a42; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 92, 52, .38); }

/* En móvil se reduce a un círculo: el texto competiría con el contenido y
   taparía los CTA de las tarjetas. */
@media (max-width: 640px) {
  .whatsapp-flotante { padding: 0; width: 56px; justify-content: center; right: 14px; bottom: 14px; }
  .whatsapp-flotante .etiqueta-flotante { display: none; }
}

/* Y el pie reserva sitio para que el botón nunca se coma su última línea. */
.pie { padding-bottom: 88px; }
@media (min-width: 641px) { .pie { padding-bottom: 44px; } }

/* =======================================================================
   ACCESIBILIDAD
   ======================================================================= */
a:focus-visible, .boton:focus-visible, .whatsapp-flotante:focus-visible {
  outline: 3px solid var(--azul-600);
  outline-offset: 3px;
  border-radius: 11px;
}
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .boton:hover, .capacidad:hover, .whatsapp-flotante:hover { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* =======================================================================
   CONÓCELA POR DENTRO — Sprint SaaS-7A.2C
   =======================================================================
   Tres huecos para las capturas del producto: una grande arriba (la agenda,
   que es lo que un consultorio reconoce de inmediato) y dos debajo.

   Hoy llevan MARCADORES, no imágenes. Las capturas definitivas todavía no
   existen —hay que sanitizarlas antes— y fabricar una interfaz falsa para
   rellenar el hueco sería enseñar un producto que no es el que se vende.

   El marcador ocupa exactamente el sitio que ocupará la imagen, así que
   sustituirlo es cambiar un <div> por un <img> dentro de la misma <figure>,
   sin tocar una línea de esta hoja. */

.showcases {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 34px;
}
/* La agenda ocupa el ancho completo; expediente y receta comparten fila.
   En móvil se apilan los tres, que es el orden en que se leen. */
@media (min-width: 760px) {
  .showcases { grid-template-columns: 1fr 1fr; }
  .product-shot--agenda { grid-column: 1 / -1; }
}

.product-shot {
  margin: 0;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* El marco: una barra superior discreta que sugiere «esto es la aplicación»
   sin imitar un navegador concreto. */
.product-shot-marco {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--linea);
  background: var(--nube);
}
.product-shot-punto { width: 9px; height: 9px; border-radius: 50%; background: #e2e8f2; }
.product-shot-punto:first-child { background: #ffd4d4; }
.product-shot-punto:nth-child(2) { background: #ffeab8; }
.product-shot-punto:nth-child(3) { background: #cdeedd; }
.product-shot-ruta {
  margin-left: 6px;
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--tinta-suave);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: -0.01em;
}

/* La superficie del marcador. Mantiene una proporción estable para que el
   layout no salte el día que entren las imágenes. */
.product-shot-placeholder {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 34px 20px;
  min-height: 190px;
  background:
    radial-gradient(520px 240px at 50% 0%, var(--nube) 0%, rgba(246, 249, 253, 0) 70%),
    repeating-linear-gradient(135deg, #fbfdff 0 12px, #f4f8fd 12px 24px);
  text-align: center;
}
.product-shot--agenda .product-shot-placeholder { min-height: 260px; }

.product-shot-icono {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--papel);
  border: 1px solid var(--linea);
  color: var(--azul-600);
}
.product-shot-icono svg { width: 21px; height: 21px; }
.product-shot-vista { font-weight: 700; font-size: 0.98rem; color: var(--tinta); }
.product-shot-pendiente {
  font-size: 0.82rem;
  color: var(--tinta-suave);
  max-width: 34ch;
  margin: 0;
}

/* Cuando lleguen las capturas: <img> dentro de la misma figure, en el sitio
   del marcador. Estas reglas ya la esperan. */
.product-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.product-shot figcaption {
  padding: 18px 20px 20px;
  border-top: 1px solid var(--linea);
}
.product-shot figcaption h3 { margin-bottom: 5px; }
.product-shot figcaption p { margin: 0; color: var(--tinta-media); font-size: 0.93rem; line-height: 1.55; }

/* La aclaración clínica es secundaria: se lee si se busca, no compite. */
.aclaracion {
  margin-top: 28px;
  font-size: 0.89rem;
  color: var(--tinta-suave);
  max-width: 68ch;
}


/* =======================================================================
   IMPLEMENTACIÓN A TU MEDIDA — Sprint SaaS-7A.2C.2
   =======================================================================
   Dos bloques grandes, no cuatro tarjetas: configuración y migración son dos
   argumentos comerciales con peso propio, y trocearlos los convertiría en
   viñetas. En móvil se apilan en el orden en que se leen.
   ======================================================================= */
.implementacion {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin-top: 34px;
}
/* El corte va a 860 px y no a 760 como la vitrina: aquí cada columna lleva
   párrafo largo, chips y una ruta de cuatro etapas, y por debajo de eso la
   línea se queda en cinco o seis palabras. */
@media (min-width: 860px) {
  .implementacion { grid-template-columns: 1fr 1fr; }
}

.bloque-impl {
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra);
  padding: clamp(22px, 3vw, 32px);
}
.bloque-impl-cabecera {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}
.bloque-impl-icono {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--teal-050);
  border: 1px solid var(--linea);
  color: var(--azul-600);
}
.bloque-impl-icono svg { width: 20px; height: 20px; }
.bloque-impl-etiqueta {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal-500);
  line-height: 1.35;
}
.bloque-impl h3 { font-size: 1.2rem; margin-bottom: 10px; }
.bloque-impl > p { color: var(--tinta-media); margin-bottom: 18px; }

/* Los chips de configuración son los mismos de especialidad, con menos aire
   arriba: aquí van pegados al párrafo que los explica. */
.chips-configuracion { margin-top: 2px; margin-bottom: 20px; }

/* La frase que se queda. Hasta SaaS-7A.2C.2 llevaba `margin-top: auto` para
   anclarla al fondo del bloque; eso igualaba las dos frases de altura, sí,
   pero abría un hueco de casi doscientos píxeles entre los chips y la frase
   de la tarjeta de configuración, y esa tarjeta se leía como si le faltara
   algo. Ahora va justo después de lo que remata, y el equilibrio entre las
   dos columnas lo da el contenido —el flujo de tres etapas—, no un margen. */
.bloque-impl-destacado {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radio);
  background: var(--nube);
  border-left: 3px solid var(--teal-500);
  color: var(--azul-800);
  font-weight: 650;
  line-height: 1.5;
}

/* El alcance real de una migración depende del sistema de origen. Se dice,
   y se dice en segundo plano: es una precisión, no una advertencia. */
.nota-alcance {
  margin: 12px 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* -----------------------------------------------------------------------
   LA RUTA DE MIGRACIÓN — cuatro etapas
   -----------------------------------------------------------------------
   Vertical SIEMPRE, también en escritorio. La columna mide 532 px a 1280 px:
   cuatro etapas en fila darían ~120 px por caja y «Migración acompañada»
   caería en tres líneas. En vertical cada etapa se lee de un vistazo y la
   línea que las une hace de flecha.
   ----------------------------------------------------------------------- */
.ruta-migracion {
  position: relative;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
/* La línea vive detrás de los iconos, que son opacos: así se ve el trazo
   entre etapa y etapa sin dibujar un segmento por hueco. */
.ruta-migracion::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: var(--linea);
}
.ruta-migracion li {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.ruta-icono {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--papel);
  border: 1px solid var(--linea);
  color: var(--azul-600);
}
.ruta-icono svg { width: 18px; height: 18px; }
/* La última etapa es la llegada: es la única que se pinta. */
.ruta-migracion li:last-child .ruta-icono {
  background: var(--azul-600);
  border-color: var(--azul-600);
  color: #fff;
}
.ruta-nombre {
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--azul-800);
  line-height: 1.4;
}
.ruta-migracion li:last-child .ruta-nombre { color: var(--azul-900); }


/* =======================================================================
   FLUJO DE CONFIGURACIÓN — Hotfix SaaS-7A.2C.3
   =======================================================================
   Hermano de la ruta de migración, no gemelo. La ruta de migración lleva
   nodos redondos unidos por una línea continua y termina en azul; este lleva
   nodos cuadrados unidos por una línea de puntos y termina en turquesa. Se
   leen como pareja sin que uno parezca una copia del otro, que es justo lo
   que pasaría si compartieran forma y color.
   ======================================================================= */
.flujo-config {
  position: relative;
  /* El ritmo del flujo se calibró midiendo: con 20px arriba y 6px por etapa,
     la tarjeta de configuración se quedaba 61px por debajo de la de
     migración. Con estos valores la diferencia baja a poco más de treinta,
     que a la altura de una tarjeta de 671px ya no se lee como hueco. */
  margin: 26px 0 4px;
  padding: 0;
  list-style: none;
}
.flujo-config::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 24px;
  bottom: 24px;
  width: 0;
  border-left: 1px dashed var(--linea);
}
.flujo-config li {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.flujo-config-icono {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--papel);
  border: 1px solid var(--linea);
  color: var(--azul-600);
}
.flujo-config-icono svg { width: 17px; height: 17px; }
/* La última etapa es el resultado: se marca, pero en turquesa, para no
   repetir el azul con el que termina la ruta de migración. */
.flujo-config li:last-child .flujo-config-icono {
  background: var(--teal-050);
  border-color: var(--teal-500);
  color: var(--teal-500);
}
.flujo-config-nombre {
  font-weight: 650;
  font-size: 0.92rem;
  color: var(--azul-800);
  line-height: 1.4;
}