/* ============================================================
   SanaMi — sitio público
   Tokens del libro de marca. No agregar colores fuera de aquí.
   ============================================================ */

:root {
  /* Marca */
  --navy: #1A3D49;
  --slate: #587180;
  --teal: #0D8D9C;
  --green: #DAEBAA;
  --cream: #FAFFE9;
  --sun: #FFD980;
  --red: #C8442B;
  --red-bg: #FBE4DF;
  --sun-bg: #FFF6DC;
  --sun-text: #5A3B00;
  --bg: #FFFFFF;
  --soft: #F4F8EC;
  --line: rgba(26, 61, 73, .14);

  /* Derivado: variante de teal con contraste AA para texto pequeño
     sobre blanco (5.5:1). El --teal original mide 3.96:1 y solo se usa
     en bordes, foco, íconos y texto grande. */
  --teal-ink: #0A7480;

  /* Tipografía */
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radios */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  /* Objetivo de clic */
  --tap: 40px;

  /* Alto del encabezado: la portada de marca lo compensa cuando va por debajo. */
  --header-h: 76px;

  /* Sombras: una sola dirección, tinte navy */
  --sh-soft: 0 1px 2px rgba(26, 61, 73, .05), 0 8px 24px rgba(26, 61, 73, .06);
  --sh-medium: 0 2px 4px rgba(26, 61, 73, .06), 0 16px 40px rgba(26, 61, 73, .12);
  --sh-strong: 0 4px 8px rgba(26, 61, 73, .08), 0 24px 64px rgba(26, 61, 73, .18);

  /* Layout */
  --wrap: 1160px;
  --gutter: 24px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { color: var(--navy); font-weight: 700; line-height: 1.2; margin: 0 0 16px; letter-spacing: -.01em; }
h1 { font-size: clamp(40px, 5.9vw, 76px); line-height: 1.01; letter-spacing: -.035em; text-wrap: balance; }
h2 { font-size: clamp(28px, 3.8vw, 44px); letter-spacing: -.028em; text-wrap: balance; }
h3 { font-size: 19px; }
p  { margin: 0 0 16px; max-width: 68ch; }
ul { margin: 0; padding: 0; list-style: none; }

/* El color del enlace sale de una variable para que las bandas oscuras la puedan
   cambiar: `a:hover` resolvía a navy, y sobre navy eso es 1.0:1, invisible. */
a { color: var(--link, var(--teal-ink)); text-underline-offset: 3px; }
a:hover { color: var(--link-hover, var(--navy)); }
.hero-marca, .closing, .pr-band, .assistant, .roles { --link: var(--green); --link-hover: #fff; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Lo que el navegador dibuja por nosotros también es parte del diseño. */
::selection { background: var(--green); color: var(--navy); }
input, textarea, select { caret-color: var(--teal); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 20px;
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
  transition: top .18s ease;
}
.skip:focus { top: 16px; color: #fff; }


/* Quedan siete rótulos con la clase, y ninguno es decorativo: «Módulo adicional»
   avisa que ese módulo se cobra aparte, «Directorio» dice dónde estás. Van sin
   versalitas, sin rayita y sin espaciado (eso era el gesto fechado); el dato se queda. */
.eyebrow { font-size: 14px; font-weight: 500; color: var(--slate); margin: 0 0 10px; }
.hero-marca .eyebrow { color: rgba(250, 255, 233, .72); }

.lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; max-width: 60ch; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  font: inherit; font-size: 15.5px; font-weight: 500; letter-spacing: -.01em;
  border-radius: var(--r-md); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.btn svg { flex: none; }

.btn-primary { background: var(--navy); color: var(--green); }
.btn-primary:hover { background: #14313b; color: var(--green); box-shadow: var(--sh-soft); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-secondary:hover { background: var(--soft); border-color: var(--navy); color: var(--navy); }
.btn-secondary:active { transform: translateY(1px); }

.btn-light { background: var(--green); color: var(--navy); }
.btn-light:hover { background: #e6f2c2; color: var(--navy); box-shadow: var(--sh-soft); }

.btn-ghost-light { background: transparent; color: var(--cream); border-color: rgba(250, 255, 233, .35); }
.btn-ghost-light:hover { background: rgba(250, 255, 233, .1); color: var(--cream); border-color: var(--cream); }

.btn[disabled], .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* La acción secundaria de una portada no es un botón fantasma: es un enlace. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px;
  font-size: 15.5px; font-weight: 500; letter-spacing: -.01em;
  color: var(--navy); text-decoration: none;
}
.link-arrow span { border-bottom: 1.5px solid var(--line); padding-bottom: 2px; }
.link-arrow:hover span { border-bottom-color: currentColor; }
.hero-marca .link-arrow { color: var(--cream); }
.hero-marca .link-arrow span { border-bottom-color: rgba(250, 255, 233, .34); }

.btn-sm { min-height: var(--tap); padding: 0 16px; font-size: 14px; }

/* ---------- Encabezado ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 2px rgba(26, 61, 73, .04); }

/* Sobre la portada de marca el encabezado va por encima del navy y transparente:
   la franja blanca partía la portada en dos. Al hacer scroll vuelve a ser blanco
   (.is-stuck), y con el menú abierto también, porque ahí sí necesita fondo. */
body.hero-oscuro .site-header { position: fixed; left: 0; right: 0; }
body.hero-oscuro .hero-marca { padding-top: calc(var(--header-h) + clamp(48px, 6vw, 88px)); }
body.hero-oscuro .site-header:not(.is-stuck):not(.is-open) {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.hero-oscuro .site-header:not(.is-stuck):not(.is-open) .logo-dark { display: none; }
body.hero-oscuro .site-header:not(.is-stuck):not(.is-open) .logo-light { display: block; }
body.hero-oscuro .site-header:not(.is-stuck):not(.is-open) .nav a { color: rgba(250, 255, 233, .66); }
body.hero-oscuro .site-header:not(.is-stuck):not(.is-open) .nav a:hover { background: rgba(250, 255, 233, .10); color: var(--cream); }
body.hero-oscuro .site-header:not(.is-stuck):not(.is-open) .nav a[aria-current="page"] { color: var(--cream); }
body.hero-oscuro .site-header:not(.is-stuck):not(.is-open) .nav a[aria-current="page"]::after { background: var(--green); }
body.hero-oscuro .site-header:not(.is-stuck):not(.is-open) .btn-secondary { color: var(--cream); border-color: rgba(250, 255, 233, .34); }
body.hero-oscuro .site-header:not(.is-stuck):not(.is-open) .btn-secondary:hover { background: rgba(250, 255, 233, .10); color: var(--cream); border-color: var(--cream); }
body.hero-oscuro .site-header:not(.is-stuck):not(.is-open) .nav-toggle { color: var(--cream); border-color: rgba(250, 255, 233, .34); }
/* El primario es navy sobre blanco; sobre el navy de la portada hay que invertirlo
   o desaparece contra su propio fondo. */
body.hero-oscuro .site-header:not(.is-stuck):not(.is-open) .btn-primary { background: var(--green); color: var(--navy); }
body.hero-oscuro .site-header:not(.is-stuck):not(.is-open) .btn-primary:hover { background: #e6f2c2; }

.logo-light { display: none; }

.header-inner { display: flex; align-items: center; gap: 24px; height: 76px; }

.logo-link { display: inline-flex; align-items: center; height: var(--tap); flex: none; }
@media (max-width: 940px) { .logo-link { height: 44px; } }
.logo-link img { height: 38px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  position: relative;
  display: inline-flex; align-items: center; height: var(--tap); padding: 0 14px;
  font-size: 15px; font-weight: 500; color: var(--navy); text-decoration: none;
  border-radius: var(--r-sm);
}
.nav a:hover { background: var(--soft); color: var(--navy); }
/* Dónde estoy parado: una línea bajo el rótulo. La píldora de fondo competía con
   los botones del encabezado y es el gesto de una década que ya pasó. */
.nav a[aria-current="page"] { color: var(--navy); font-weight: 500; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
  background: var(--teal); border-radius: 2px;
}

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: auto;
  background: transparent; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  color: var(--navy); cursor: pointer;
}
.nav-toggle:hover { background: var(--soft); }
.nav-toggle .ico-close { display: none; }
.site-header.is-open .nav-toggle .ico-menu { display: none; }
.site-header.is-open .nav-toggle .ico-close { display: block; }

/* El encabezado (logo + 4 destinos + dos botones) necesita unos 890px.
   Por debajo de 1000 se pasa al menú de botón, con margen de sobra. */
@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .nav, .header-actions {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter); flex-direction: column; align-items: stretch; gap: 4px;
  }
  .site-header.is-open .nav { display: flex; border-bottom: 0; padding-bottom: 0; }
  .site-header.is-open .header-actions { display: flex; top: auto; position: static; padding: 12px var(--gutter) 20px; box-shadow: var(--sh-soft); }
  .nav a { height: 48px; padding: 0 12px; }
  .header-actions .btn { width: 100%; }
}

/* ---------- Secciones ---------- */
.section { padding: clamp(64px, 8vw, 112px) 0; }
.section-soft { background: var(--soft); }
.section-head { max-width: 660px; margin-bottom: 48px; }
.section-head p { color: var(--slate); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--cream) 0%, #fff 100%);
  padding: clamp(48px, 6vw, 88px) 0 0;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-copy { max-width: 720px; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 32px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { font-size: 14px; color: var(--slate); margin: 16px 0 0; max-width: 58ch; display: flex; align-items: flex-start; gap: 8px; }
.hero-note svg { margin-top: 3px; }
.hero-note svg { color: var(--teal); flex: none; }

/* La portada de marca: la misma banda del directorio —navy con el mosaico de
   SanaMi— en las dos páginas que abren el sitio. El texto sigue a la izquierda
   (acá se lee una promesa, no se busca) y la captura se apoya sobre el navy.
   El 404 se queda en claro: no es una portada, es una salida. */
.hero-marca {
  position: relative; overflow: hidden;
  background: var(--navy);
}
.hero-marca > .wrap { position: relative; z-index: 1; }
/* El mosaico va encima del navy, no debajo: dibujado a un 8 % apenas se
   adivina, y se desvanece hacia la izquierda para que el titular y la bajada
   caigan sobre azul limpio. Repetido y a plena vista competía con el texto. */
.hero-marca::before {
  content: ""; position: absolute; inset: 0;
  background: url(assets/brand/pattern.png) repeat -40px -20px / 460px 345px;
  opacity: .08;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 46%, #000 92%);
  mask-image: linear-gradient(100deg, transparent 0%, transparent 46%, #000 92%);
}
.hero-marca h1 { color: #fff; }
.hero-marca .lead { color: rgba(255, 255, 255, .72); }
.hero-marca .hero-note { color: rgba(255, 255, 255, .66); }
.hero-marca .hero-note svg { color: var(--green); }

.hero-shot {
  margin: clamp(40px, 5vw, 64px) 0 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border: 1px solid var(--line); border-bottom: 0;
  box-shadow: var(--sh-strong);
  overflow: hidden; background: var(--bg);
}
.hero-marca .hero-shot { box-shadow: 0 24px 56px rgba(10, 30, 38, .26); }

/* El corte de la banda: lo que va adentro se apoya un tercio sobre el navy y de
   ahí para abajo sobre el blanco de la página —la captura de la app en las
   portadas, las tarjetas de plan en precios—. El corte es un porcentaje de la
   altura de ese bloque, así que se sostiene solo cuando cambia de tamaño, y el
   blanco sigue hasta el final de la banda (lo recorta su overflow). */
.corte-tercio { position: relative; }
.hero-marca .corte-tercio::before {
  content: ""; position: absolute; z-index: 0;
  top: 33.333%; bottom: -100vh; left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--bg);
}
.hero-marca .corte-tercio > * { position: relative; z-index: 1; }
/* Lo que viene después del corte dentro de la misma banda —la nota de recepción
   y enfermería— también tiene que quedar por encima del blanco, o desaparece. */
.hero-marca .corte-tercio ~ * { position: relative; z-index: 1; }
.hero-shot img { width: 100%; }

/* ---------- Cintillo de valor ---------- */
.strip { border-bottom: 1px solid var(--line); background: var(--bg); }
.strip ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.strip li {
  padding: 28px 24px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.strip li:last-child { border-right: 0; }
.strip b { font-size: 15px; color: var(--navy); font-weight: 600; }
.strip span { font-size: 14px; }
@media (max-width: 860px) {
  .strip ul { grid-template-columns: repeat(2, 1fr); }
  .strip li:nth-child(2n) { border-right: 0; }
  .strip li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .strip ul { grid-template-columns: 1fr; }
  .strip li { border-right: 0; border-bottom: 1px solid var(--line); }
  .strip li:last-child { border-bottom: 0; }
}

/* ---------- Rejilla de tarjetas ---------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.section-soft .card { background: var(--bg); }
.card:hover { border-color: rgba(13, 141, 156, .45); box-shadow: var(--sh-soft); transform: translateY(-2px); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 15px; margin: 0; }

/* Sin azulejo: el cuadrito redondeado con fondo era el disfraz de «tarjeta de
   función», no información. El ícono se queda, que sí ayuda a escanear. */
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;   /* el padre es flex column: sin esto el ícono se estira y se centra */
  margin-bottom: 14px; color: var(--teal);
}
.card-icon svg { width: 26px; height: 26px; }
.section-soft .card-icon { background: var(--cream); }

/* ---------- Roles ---------- */
/* Dejan de ser tarjetas: fuera el fondo, el borde y el relleno, y la fila se
   separa con filete como en el resto del sitio. El azulejo del ícono volvía a
   aparecer acá por una regla más específica que la general; también se va. */
.role { padding: 24px 0; border-top: 1px solid var(--line); }
.role:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.role h3 { font-size: 18.5px; letter-spacing: -.015em; margin: 0 0 6px; }
.role .role-tag { font-size: 13.5px; font-weight: 500; color: var(--teal-ink); display: block; margin-bottom: 8px; }
.role p { color: var(--slate); font-size: 15.5px; line-height: 1.6; margin: 0; }
@media (max-width: 760px) { .role:nth-child(2) { border-top: 1px solid var(--line); padding-top: 24px; } }

/* ---------- Bloque en dos columnas ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.checklist li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.checklist li:last-child { border-bottom: 0; }
.checklist .tick {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-top: 2px;
  border-radius: 50%; background: var(--green); color: var(--navy);
}
.checklist b { display: block; color: var(--navy); font-size: 15px; font-weight: 600; }
.checklist span { font-size: 15px; }

/* ---------- El asistente ---------- */
/* La sección afirmaba que el asistente conoce a tus pacientes y lo probaba con
   viñetas dentro de círculos verdes. Ahora lo prueba enseñándolo: el riel real
   del asistente dentro de un expediente, recortado a una escala en la que se
   lee. Los círculos de check se fueron; separan filetes, igual que la banda de
   costos y el catálogo, así que la página habla un solo idioma. */
.assistant { background: var(--navy); }
.assistant-lay {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(40px, 5vw, 80px); align-items: start;
}
.assistant h2 { color: #fff; margin: 0 0 18px; max-width: 15ch; }
.assistant .lead { color: rgba(255, 255, 255, .70); margin: 0 0 36px; max-width: 52ch; }

.assistant-cap { padding: 18px 0; border-top: 1px solid rgba(250, 255, 233, .15); }
.assistant-cap:first-of-type { border-top: 0; padding-top: 0; }
.assistant-cap b { display: block; color: #fff; font-size: 16.5px; font-weight: 600; margin-bottom: 5px; }
.assistant-cap span { color: rgba(255, 255, 255, .66); font-size: 15px; line-height: 1.6; }

.assistant .hero-cta { margin-top: 34px; }
.assistant .btn-primary { background: var(--green); color: var(--navy); }
.assistant .btn-primary:hover { background: #e6f2c2; color: var(--navy); }
.assistant .btn-secondary { color: var(--cream); border-color: rgba(250, 255, 233, .34); }
.assistant .btn-secondary:hover { background: rgba(250, 255, 233, .1); border-color: var(--cream); color: var(--cream); }

.assistant-shot { margin: 0; }
.assistant-shot img {
  display: block; width: 100%; height: auto;
  /* El mismo radio que trae el panel: así la sombra sigue la esquina y no el rectángulo. */
  border-radius: var(--r-lg);
  box-shadow: 0 3px 8px rgba(8, 26, 33, .28), 0 40px 80px rgba(8, 26, 33, .46);
}

/* En angosto la captura baja debajo del texto, a su ancho natural para que siga legible. */
@media (max-width: 1000px) {
  .assistant-lay { grid-template-columns: minmax(0, 1fr); }
  .assistant-shot { max-width: 396px; }
}

/* ---------- Hecho aquí ---------- */
/* El argumento de esta sección no son cuatro funciones: son cuatro palabras,
   TSE, Hacienda, colones y dólares, español. Un check verde al lado dice
   «función incluida», que es justo lo que también dice la comparativa de
   cualquier sistema de afuera. Acá mandan los términos, a escala y sin
   adornos: ni círculos, ni filetes, solo aire. */
.local h2 { max-width: 18ch; margin: 0 0 20px; }
.local .lead { max-width: 60ch; margin: 0; }
.local-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(48px, 7vw, 104px); row-gap: clamp(40px, 4vw, 56px);
  margin-top: clamp(52px, 6vw, 76px);
}
.local-item b {
  display: block; font-size: clamp(20px, 2.1vw, 25px); font-weight: 600;
  letter-spacing: -.022em; line-height: 1.2; margin-bottom: 10px;
}
.local-item span { display: block; color: var(--slate); font-size: 16px; line-height: 1.62; max-width: 44ch; }
.local-cta { margin-top: clamp(52px, 6vw, 76px); }
@media (max-width: 760px) { .local-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cómo empezar: dos rutas ---------- */
/* Eran tres pasos numerados, y 1-2-3 describía un camino único. Ahora hay dos
   rutas y una secuencia numerada mentiría sobre lo que pasa: el filete con la
   «o» en el medio dice «alternativas» y no «pasos». Encerrar cada opción en una
   caja habría estado justificado acá, porque es una bifurcación y no una lista,
   pero la «o» lo dice más bajo. La promesa de los 15 días baja a una línea
   compartida, porque aplica a las dos. */
.start h2 { max-width: 16ch; margin: 0 0 20px; }
.start .lead { max-width: 56ch; margin: 0 0 clamp(48px, 5vw, 68px); }

.routes { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: clamp(36px, 4vw, 56px); align-items: start; }
.routes-or { position: relative; align-self: stretch; background: var(--line); }
.routes-or span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 26px; padding: 6px 0; text-align: center;
  background: var(--bg); color: var(--slate); font-size: 13px;
}
.route h3 { font-size: clamp(21px, 2.2vw, 26px); letter-spacing: -.022em; line-height: 1.2; margin: 0 0 12px; }
.route p { color: var(--slate); font-size: 16px; line-height: 1.62; margin: 0 0 22px; max-width: 44ch; }
.route .link-arrow { min-height: auto; padding: 0; }

.start-close {
  margin-top: clamp(48px, 5vw, 68px); padding-top: 26px; border-top: 1px solid var(--line);
  color: var(--slate); font-size: 16px; line-height: 1.62; max-width: 64ch;
}
.start-close b { color: var(--navy); font-weight: 600; }

/* Apiladas en angosto: la «o» pasa a ser una línea horizontal entre las dos. */
@media (max-width: 860px) {
  .routes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .routes-or { height: 1px; align-self: auto; margin: 32px 0; }
  .routes-or span { background: var(--bg); }
}

/* ---------- Precios en la home ---------- */
/* Estaba dentro de una tarjeta blanca, que es el contenedor perezoso a escala
   de sección, y los tres precios vivían enterrados en un párrafo de cuatro
   líneas. Quien viene a ver precios no debería leer prosa para sacar datos:
   ahora son una lista, y la lista dice sola que la agenda es la base y que lo
   demás se apila encima, que es como se cobra de verdad. */
.price h2 { max-width: 14ch; margin: 0 0 16px; }
.price .lead { max-width: 52ch; margin: 0 0 clamp(44px, 5vw, 60px); }

.price-list { max-width: 760px; border-top: 1px solid rgba(26, 61, 73, .22); }
.price-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.price-row b { font-size: 18px; font-weight: 600; }
.price-row i { display: block; font-style: normal; color: var(--slate); font-size: 14.5px; margin-top: 3px; }
.price-amount { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.028em; white-space: nowrap; }
.price-amount small { font-size: 14px; font-weight: 500; color: var(--slate); letter-spacing: 0; }

.price-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 5vw, 72px); row-gap: 26px;
  margin-top: clamp(40px, 5vw, 56px); max-width: 860px;
}
.price-item b { display: block; font-size: 16.5px; font-weight: 600; margin-bottom: 5px; }
.price-item span { color: var(--slate); font-size: 15.5px; line-height: 1.6; }

.price-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 5vw, 56px); }
.price-note { color: var(--slate); font-size: 14px; margin: 16px 0 0; }

@media (max-width: 700px) {
  .price-grid { grid-template-columns: minmax(0, 1fr); }
  .price-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---------- Los roles (página de clínicas) ---------- */
/* La banda oscura de esta página. Los permisos por rol son lo que de verdad
   separa a una clínica con equipo de un consultorio solo, así que se lleva el
   peso visual, y de paso el navy vuelve al medio para que ninguna sección
   quede pegada a otra del mismo color. */
.roles { background: var(--navy); }
.roles h2 { color: #fff; max-width: 16ch; margin: 0 0 18px; }
.roles .lead { color: rgba(255, 255, 255, .70); max-width: 58ch; margin: 0; }
.roles-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(48px, 6vw, 88px); margin-top: clamp(44px, 5vw, 64px);
}
.roles-item { padding: 26px 0; border-top: 1px solid rgba(250, 255, 233, .15); }
.roles-item:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.roles-item b { display: block; color: #fff; font-size: 19px; font-weight: 600; letter-spacing: -.012em; margin-bottom: 4px; }
.roles-item i { display: block; font-style: normal; color: var(--green); font-size: 13.5px; font-weight: 500; margin-bottom: 9px; }
.roles-item span { color: rgba(255, 255, 255, .66); font-size: 15.5px; line-height: 1.62; }
@media (max-width: 800px) {
  .roles-grid { grid-template-columns: minmax(0, 1fr); }
  .roles-item:nth-child(2) { border-top: 1px solid rgba(250, 255, 233, .15); padding-top: 26px; }
}

/* ---------- El camino (página de clínicas) ---------- */
/* Acá la secuencia sí carga información: primero la llamada, después la
   configuración, después entra el equipo. Los números se quedan porque el
   orden importa; lo que se va es el círculo oscuro que los envolvía. */
.path { max-width: 880px; margin-top: clamp(40px, 5vw, 56px); border-top: 1px solid rgba(26, 61, 73, .22); }
.path-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.path-num { color: var(--slate); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 3px; }
.path-step b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 7px; }
.path-step span { color: var(--slate); font-size: 16px; line-height: 1.62; }

/* ---------- Pasos ---------- */
.steps { counter-reset: step; display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 56px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: 15px; margin: 0; }

/* ---------- Precios ---------- */
.pricing {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg);
  padding: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 56px); align-items: center;
  box-shadow: var(--sh-soft);
}
@media (max-width: 860px) { .pricing { grid-template-columns: 1fr; } }
.pricing h2 { font-size: clamp(24px, 3vw, 32px); }
.pricing-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- Preguntas ---------- */
.faq { max-width: 880px; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg); margin-bottom: 12px;
  transition: border-color .18s ease;
}
.faq details[open] { border-color: rgba(13, 141, 156, .45); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; min-height: var(--tap);
  font-size: 16px; font-weight: 600; color: var(--navy);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--soft); border-radius: var(--r-md); }
.faq summary .chev { flex: none; color: var(--teal); transition: transform .18s ease; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .answer { padding: 0 20px 20px; }
.faq .answer p { font-size: 15px; margin: 0; }

/* ---------- Cierre + formulario ---------- */
.closing {
  position: relative; overflow: hidden;
  background: var(--navy); color: rgba(250, 255, 233, .82);
}
.closing .wrap { position: relative; z-index: 1; }
.closing .split { align-items: start; }
.closing-copy h2 { color: var(--cream); }
.closing-copy p { color: rgba(250, 255, 233, .82); }
.closing-copy .checklist li { border-bottom-color: rgba(250, 255, 233, .16); }
.closing-copy .checklist b { color: var(--cream); }
.closing-copy .checklist li > span:not(.tick) { color: rgba(250, 255, 233, .82); }

/* Dos caminos también al cerrar: el rápido es un botón y ya, el asistido es el
   formulario de seis campos. La «o» es la misma de «cómo empezar», para que la
   página enseñe la bifurcación una vez y no estrene un recurso nuevo en el
   último bloque. Que la izquierda sea corta y la derecha alta dice cuál cuesta
   menos sin tener que explicarlo. */
.closing-lay {
  display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 500px);
  gap: clamp(36px, 4vw, 60px); align-items: start;
}
.closing-or { position: relative; align-self: stretch; background: rgba(250, 255, 233, .18); }
.closing-or span {
  position: absolute; top: 120px; left: 50%; transform: translate(-50%, -50%);
  width: 26px; padding: 6px 0; text-align: center;
  background: var(--navy); color: rgba(250, 255, 233, .72); font-size: 13px;
}
.closing-copy h2 { max-width: 14ch; margin: 0 0 18px; }
.closing-copy .lead { color: rgba(250, 255, 233, .76); max-width: 40ch; margin: 0 0 30px; }
.closing-copy .btn-primary { background: var(--green); color: var(--navy); min-height: 56px; font-size: 16.5px; }
.closing-copy .btn-primary:hover { background: #e6f2c2; color: var(--navy); }

@media (max-width: 900px) {
  .closing-lay { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .closing-or { height: 1px; align-self: auto; margin: 36px 0; }
  .closing-or span { top: 50%; }
}

/* Las garantías del cierre, sin palomas: el mismo contenido en voz baja. */
.closing-fine { color: rgba(250, 255, 233, .62); font-size: 15px; line-height: 1.6; margin: 24px 0 0; max-width: 46ch; }
.closing-fine b { color: var(--cream); font-weight: 600; }

/* Formulario */
.form-card {
  background: var(--bg); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--sh-medium);
}
.form-card { color: var(--slate); }
.form-card h3 { margin-bottom: 4px; font-size: 21px; color: var(--navy); }
.form-card .form-intro { font-size: 14px; margin-bottom: 24px; color: var(--slate); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 8px;
}
.field label .opt { font-weight: 500; color: var(--slate); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 15px; color: var(--navy);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23587180' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 42px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(26, 61, 73, .3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13, 141, 156, .18);
}
.field ::placeholder { color: #8fa3ad; }

.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.field-error {
  display: none; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--red);
}
.field.has-error .field-error { display: flex; }
.field-error svg { flex: none; }

.form-card .btn { width: 100%; margin-top: 8px; }
.form-card .form-legal { font-size: 12.5px; margin: 16px 0 0; color: var(--slate); }

.form-ok {
  display: none; gap: 12px; align-items: flex-start;
  padding: 16px; border-radius: var(--r-md);
  background: var(--soft); border: 1px solid rgba(13, 141, 156, .35);
  margin-bottom: 20px;
}
.form-ok.is-on { display: flex; }
.form-ok .k { flex: none; color: var(--teal-ink); margin-top: 2px; }
.form-ok b { display: block; color: var(--navy); font-size: 15px; }
.form-ok span { font-size: 14px; color: var(--slate); }

/* ---------- Pie ---------- */
.site-footer { background: var(--bg); border-top: 1px solid var(--line); padding: 56px 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
.footer-top img { height: 36px; width: auto; margin-bottom: 16px; }
.footer-top p { font-size: 14px; max-width: 34ch; }
.footer-top h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; }
.footer-top li { margin-bottom: 0; }
.footer-top li a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: 14px; color: var(--slate); text-decoration: none;
}
@media (max-width: 940px) { .footer-top li a { min-height: 44px; } }
.footer-top li a:hover { color: var(--teal-ink); text-decoration: underline; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.footer-bottom .seal { display: flex; align-items: center; gap: 10px; }
.footer-bottom .seal img { height: 28px; width: auto; }

/* ============================================================
   Página de precios (precios.html)
   Todo va prefijado con .pr- para no chocar con el resto del sitio.
   ============================================================ */

/* ---------- Portada de la página ---------- */
.pr-head { padding: clamp(40px, 5vw, 64px) 0 0; }
.pr-head .lead { margin-bottom: 0; }
.pr-head-inner { max-width: 720px; }

/* Pastilla de encabezado: prueba gratis en precios, precio del módulo en las
   páginas de módulo. Una sola clase para las dos. */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg); color: var(--navy);
  border: 1.5px solid var(--teal); border-radius: 999px;
  padding: 8px 18px 8px 14px; font-size: 14px; font-weight: 600;
  margin: 0 0 20px;
}
.pill svg { color: var(--teal); flex: none; }

/* ---------- Tarjetas de plan ---------- */
.pr-plans {
  display: grid; gap: 20px; align-items: stretch;
  grid-template-columns: repeat(4, 1fr);
}
/* El hueco va en el contenedor y no en la grilla: así el corte de la banda mide
   el alto de las tarjetas y no el del aire que tienen encima. */
.pr-plans-base { margin-top: clamp(40px, 5vw, 56px); }
/* Un tercio de las cuatro tarjetas en fila es un tercio de tarjeta; un tercio
   de las cuatro apiladas serían ochocientos píxeles de navy. El tope deja el
   mismo corte —la esquina de la primera tarjeta— en cualquier ancho. */
.hero-marca .pr-plans-base::before { top: min(33.333%, 260px); }
@media (max-width: 1080px) { .pr-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pr-plans { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }

.pr-plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 48px 20px 22px;
}
.pr-plan--featured { border-color: var(--teal); border-width: 1.5px; box-shadow: var(--sh-medium); }

/* Era un listón en versalitas montado sobre el borde de la tarjeta: el gesto de
   toda tabla de precios de 2017. La señal se mantiene (hay que saber cuál es
   el plan recomendado), pero dicha en voz normal y dentro de la tarjeta. */
.pr-badge {
  position: absolute; top: 15px; left: 20px;
  background: rgba(13, 141, 156, .12); color: var(--teal-ink);
  font-size: 13px; font-weight: 600;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}

.pr-plan h3 { font-size: 19px; margin-bottom: 4px; }
.pr-plan-tag { font-size: 13.5px; font-weight: 500; color: var(--slate); margin: 0 0 20px; }

/* 57px = alto real del precio con la unidad en dos líneas ("USD + IVA / mes").
   Fijarlo hace que las cuatro tarjetas arranquen la lista a la misma altura,
   incluida la de "Precio a la medida", que no lleva unidad. */
.pr-price { display: flex; align-items: baseline; gap: 7px; margin: 0 0 4px; min-height: 57px; }
.pr-price--quote { align-items: center; }
.pr-price-amount {
  font-size: 41px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
.pr-price-quote {
  /* 20/1.25 x 2 líneas = 50px, el mismo alto que el bloque de precio,
     para que las cuatro tarjetas alineen la nota y la lista. */
  font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--navy);
}
.pr-price-unit { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--slate); }
.pr-price-note { font-size: 12.5px; color: var(--slate); margin: 0 0 20px; min-height: 19px; }

.pr-feats { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pr-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.pr-feats svg { flex: none; margin-top: 3px; color: var(--teal); }
.pr-feats b { color: var(--navy); font-weight: 600; }
.pr-feats .pr-muted { color: var(--slate); }

.pr-plan-cta { margin-top: auto; }
.pr-plan-cta .btn { width: 100%; }
.pr-fine {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--slate); margin: 10px 0 0;
}
.pr-fine svg { flex: none; color: var(--teal); }

/* ---------- Banda de usuarios sin costo ---------- */
.pr-band {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--navy); color: var(--cream);
  border-radius: var(--r-lg); padding: 20px 24px; margin-top: 20px;
}
.pr-band-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: rgba(218, 235, 170, .16); color: var(--green);
}
.pr-band-text { flex: 1 1 320px; min-width: 0; }
.pr-band-text b { display: block; color: var(--cream); font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.pr-band-text span { font-size: 13.5px; color: #BCD3D6; }
.pr-band-text .pr-band-note {
  display: block; font-size: 12.5px; line-height: 1.45; color: #A7C1C6;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(188, 211, 214, .22);
  max-width: 56ch;
}
.pr-band-pill {
  flex: none; background: var(--green); color: var(--navy);
  font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 999px; white-space: nowrap;
}

/* ---------- Módulos adicionales (filas, no tarjetas) ---------- */
.pr-addons { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .pr-addons { grid-template-columns: 1fr; } }
.pr-addon {
  display: flex; gap: 16px; align-items: flex-start;
  /* Era border-left de 3px en teal: la pestaña lateral de color es un gesto de
     plantilla. El borde ahora rodea la fila a 1px y sigue distinguiendo los dos
     tipos de módulo, que es lo que de verdad codificaba. */
  background: var(--bg); border: 1px solid rgba(13, 141, 156, .45);
  border-radius: var(--r-md); padding: 18px 20px;
}
.section-soft .pr-addon { background: var(--bg); }
.pr-addon--soft { border-color: var(--line); }
.pr-addon-body { flex: 1 1 auto; min-width: 0; }
.pr-addon-body b { display: block; color: var(--navy); font-size: 15.5px; font-weight: 600; margin-bottom: 3px; }
.pr-addon-body span { font-size: 13.5px; }
.pr-addon-price {
  flex: none; text-align: right; white-space: nowrap;
  font-size: 17px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums;
}
.pr-addon-price small { display: block; font-size: 12px; font-weight: 500; color: var(--slate); }
.pr-addon-price .pr-q { font-size: 13.5px; font-weight: 600; color: var(--slate); }

/* ---------- Tabla comparativa ---------- */
.pr-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); }
.pr-table { border-collapse: collapse; width: 100%; min-width: 900px; }
.pr-table th, .pr-table td { padding: 13px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--line); }
.pr-table thead th {
  background: var(--soft); color: var(--navy);
  font-size: 14px; font-weight: 600;
}
.pr-table thead th:not(:first-child), .pr-table tbody td { text-align: center; width: 15%; }
.pr-table tbody th { font-weight: 500; color: var(--slate); }
.pr-table tbody tr:last-child th, .pr-table tbody tr:last-child td { border-bottom: 0; }
.pr-table .pr-grp th {
  background: var(--cream); color: var(--navy);
  font-size: 13px; font-weight: 700;
}
.pr-yes { color: var(--teal-ink); font-weight: 500; }
.pr-no  { color: var(--slate); }
.pr-chip {
  display: inline-block; background: var(--sun-bg); color: var(--sun-text);
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.pr-chip--soft { background: var(--soft); color: var(--slate); border: 1px solid var(--line); }

.pr-foot { font-size: 13px; color: var(--slate); margin: 28px 0 0; max-width: 62ch; }

@media (prefers-reduced-motion: reduce) { .pr-plan, .btn { transition: none; } }


/* ============================================================
   Tarjetas que llevan a otra página y páginas de módulo
   ============================================================ */

/* La tarjeta entera es clicable: el enlace del título se estira sobre ella.
   Así el destino sigue siendo un enlace real para el teclado y el lector de
   pantalla, y el clic funciona en cualquier punto de la tarjeta. */
.card-link { position: relative; }
.card-link h3 { margin-bottom: 8px; }
.card-link h3 a { color: var(--navy); text-decoration: none; }
.card-link h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.card-link:hover h3 a { color: var(--teal-ink); }
.card-link h3 a:focus-visible::after { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Señal de que se puede entrar: sin esto la tarjeta no se ve clicable. */
.card-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 16px;
  font-size: 13.5px; font-weight: 600; color: var(--teal-ink);
}
.card-more svg { transition: transform .15s ease; }
.card-link:hover .card-more svg { transform: translateX(3px); }

/* ---------- Catálogo de módulos ---------- */
/* Eran seis tarjetas iguales, y cuatro llevaban a una página mientras dos no
   llevaban a ninguna parte: el diseño prometía una puerta donde no la había.
   Acá la agenda abre como lo que es, la base sobre la que se suma el resto, y
   los demás van en filas, donde la ausencia del enlace se lee como un hecho y
   no como un olvido. Se conserva el enlace estirado de .card-link. */
.catalog .section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 60px); }

.catalog-base {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end;
  padding-bottom: 30px; border-bottom: 1px solid rgba(26, 61, 73, .22);
}
.catalog-base h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.028em; margin: 0 0 10px; }
.catalog-base p { margin: 0; color: var(--slate); font-size: 17.5px; line-height: 1.58; max-width: 62ch; }
.catalog-base .card-more { padding-top: 0; font-size: 15px; }

.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.catalog-item { position: relative; padding: 24px 0; border-top: 1px solid var(--line); }
.catalog-item:nth-child(-n+2) { border-top: 0; }
.catalog-item h3 { font-size: 18.5px; letter-spacing: -.015em; margin: 0 0 7px; }
.catalog-item p { margin: 0; color: var(--slate); font-size: 15.5px; line-height: 1.6; }
.catalog-item .card-more { padding-top: 10px; font-size: 14px; }

@media (max-width: 900px) {
  .catalog-base { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  .catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .catalog-item:nth-child(2) { border-top: 1px solid var(--line); }
}

/* ---------- Encabezado de página de módulo ---------- */
/* La portada de cada módulo pasa a la banda de marca, como la home y clínicas:
   entrar a un módulo dejaba de sentirse como la misma casa. El fondo lo pone
   .hero-marca; acá solo queda el aire de abajo y lo que hay que invertir. */
.mod-head { padding: clamp(28px, 4vw, 44px) 0 clamp(56px, 6vw, 84px); }
/* Con captura, la banda termina a un tercio de ella y el resto queda sobre el
   blanco, igual que en la home. Sin captura (facturación) el relleno de abajo
   se queda, o el contenido toca el borde de la sección. */
.mod-head:has(.mod-shot) { padding-bottom: 0; }
.mod-head .crumbs { color: rgba(250, 255, 233, .60); }
.mod-head .crumbs a { color: rgba(250, 255, 233, .84); }
.mod-head .crumbs svg { color: rgba(250, 255, 233, .42); }
.mod-head .crumbs span[aria-current] { color: var(--cream); }
.mod-head h1 { color: #fff; }
.mod-head .lead { color: rgba(255, 255, 255, .72); }
.mod-head .pill { background: transparent; color: var(--cream); border-color: rgba(250, 255, 233, .34); }
.mod-head .pill svg { color: var(--green); }
.mod-head .btn-primary { background: var(--green); color: var(--navy); }
.mod-head .btn-primary:hover { background: #e6f2c2; color: var(--navy); }
.mod-head .btn-secondary { color: var(--cream); border-color: rgba(250, 255, 233, .34); }
.mod-head .btn-secondary:hover { background: rgba(250, 255, 233, .1); border-color: var(--cream); color: var(--cream); }
.mod-head .mod-shot { border-color: rgba(250, 255, 233, .12); box-shadow: 0 3px 8px rgba(8, 26, 33, .26), 0 30px 64px rgba(8, 26, 33, .40); }
.mod-head-inner { max-width: 720px; }
.mod-head .lead { margin-bottom: 28px; }

.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--slate); margin: 0 0 20px; }
.crumbs a { color: var(--teal-ink); text-decoration: none; border-radius: var(--r-sm); }
.crumbs a:hover { text-decoration: underline; }
.crumbs svg { color: #9DB0B8; flex: none; }
.crumbs span[aria-current] { color: var(--navy); font-weight: 600; }

/* Nota al pie de una lista: lo que cuesta aparte, dicho sin esconderlo. */
.aside-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--sun-bg); color: var(--sun-text);
  border-radius: var(--r-md); padding: 14px 16px; margin: 24px 0 0;
  font-size: 13.5px;
}
.aside-note svg { flex: none; margin-top: 2px; }
.aside-note b { font-weight: 600; }

/* Captura dentro de una página de módulo: como la de la portada, pero cerrada
   por los cuatro lados porque aquí no sangra contra la sección siguiente. */
.mod-shot {
  margin: clamp(32px, 4vw, 48px) 0 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-medium); overflow: hidden; background: var(--bg);
}
.mod-shot img { width: 100%; display: block; }
.mod-shot figcaption {
  padding: 12px 16px; border-top: 1px solid var(--line);
  background: var(--soft); color: var(--slate); font-size: 13px; max-width: 62ch;
}

/* Aclaración de impuestos bajo un bloque de precios fuera de la página de precios. */
.nota-precio { font-size: 13px; color: var(--slate); margin: 20px 0 0; }

/* Enlace dentro del nombre de un módulo adicional en la página de precios. */
.pr-addon-body b a { color: var(--navy); text-decoration: none; border-bottom: 1.5px solid var(--teal); }
.pr-addon-body b a:hover { color: var(--teal-ink); }

/* ============================================================
   Directorio médico (directorio-medico.html)
   ============================================================ */

/* hidden manda sobre cualquier display de estas reglas */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Búsqueda ---------- */
.dm-demo-note {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 64ch; margin: 0 0 24px;
  background: var(--sun-bg); color: var(--sun-text);
  border-radius: var(--r-md); padding: 12px 16px; font-size: 13.5px; line-height: 1.5;
}
.dm-demo-note svg { flex: none; margin-top: 1px; }

.dm-search { max-width: 720px; margin: 0; }
.dm-search-label {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 8px;
}
.dm-search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 0 12px 0 16px; min-height: 56px; box-shadow: var(--sh-soft);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dm-search-box:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13, 141, 156, .18); }
.dm-search-ico { flex: none; color: var(--teal); }
.dm-search-box input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  font: inherit; font-size: 15px; color: var(--navy); padding: 12px 0;
}
.dm-search-box input::placeholder { color: var(--slate); opacity: 1; }
.dm-search-box input:focus { outline: none; }
.dm-search-box input::-webkit-search-cancel-button { display: none; }

.dm-search-clear {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--slate); cursor: pointer;
}
.dm-search-clear:hover { background: var(--soft); color: var(--navy); }

.dm-kbd {
  flex: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--slate);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; background: var(--soft);
}
@media (max-width: 560px) { .dm-kbd { display: none; } }

.dm-search-hint { font-size: 13px; color: var(--slate); margin: 8px 0 0; }

/* ---------- Estructura ---------- */
.dm-body { padding: 32px 0 clamp(56px, 7vw, 88px); }
.dm-layout { display: grid; grid-template-columns: 284px minmax(0, 1fr); gap: 32px; align-items: start; }

/* ---------- Panel de filtros ---------- */
.dm-filters {
  position: sticky; top: 96px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--sh-soft);
}
.dm-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dm-filters-head h2 { font-size: 17px; margin: 0; }

.dm-link-btn {
  border: 0; background: transparent; padding: 4px; margin: -4px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--teal-ink);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.dm-link-btn:hover { color: var(--navy); }

.dm-field { margin-bottom: 20px; }
.dm-field > label { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.dm-opt { font-weight: 500; color: var(--slate); }
.dm-hint { font-size: 12.5px; color: var(--slate); margin: 8px 0 0; line-height: 1.45; }

.dm-select { position: relative; }
.dm-select select {
  width: 100%; min-height: var(--tap); padding: 0 40px 0 12px;
  font: inherit; font-size: 14px; color: var(--navy);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md);
  appearance: none; cursor: pointer;
}
.dm-select select:hover { border-color: var(--navy); }
.dm-select select:disabled { background: var(--soft); color: var(--slate); cursor: not-allowed; }
.dm-select svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--slate); pointer-events: none; }

.dm-group { border: 0; border-top: 1px solid var(--line); margin: 0 0 20px; padding: 16px 0 0; }
.dm-group--last { margin-bottom: 0; }
.dm-group legend { font-size: 13.5px; font-weight: 600; color: var(--navy); padding: 0; margin-bottom: 8px; }

.dm-radio, .dm-check {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap); padding: 0 8px; margin: 0 -8px;
  font-size: 14px; color: var(--navy); border-radius: var(--r-sm); cursor: pointer;
}
.dm-radio:hover, .dm-check:hover { background: var(--soft); }
.dm-radio input, .dm-check input { flex: none; width: 18px; height: 18px; accent-color: var(--teal); cursor: pointer; }
.dm-check span i, .dm-radio span i { display: block; font-style: normal; font-size: 12px; color: var(--slate); }

/* ---------- Barra de resultados ---------- */
.dm-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.dm-count { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--navy); }
.dm-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dm-sort label { font-size: 13.5px; color: var(--slate); white-space: nowrap; }
.dm-select--sm select { min-height: var(--tap); font-size: 13.5px; padding-right: 36px; }
.dm-filters-toggle { display: none; }

.dm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; }
.dm-chips:empty { margin: 0; }
.dm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 0 12px 0 14px;
  background: var(--soft); border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--navy); cursor: pointer;
}
.dm-chip:hover { background: var(--bg); border-color: var(--navy); }
.dm-chip svg { color: var(--slate); }
.dm-chip:hover svg { color: var(--navy); }

/* ---------- La banda de costos ---------- */
/* Eran tres tarjetas iguales, y tres cajas del mismo tamaño le dicen al lector
   «elegí una». Acá no hay nada que elegir: es una jornada que se tuerce, y lo
   único que tiene que hacer es reconocerse. La banda oscura le da a la sección
   el peso de lo que cuenta, y los filetes separan sin encerrar. */
.costs { background: var(--soft); padding: clamp(80px, 9vw, 124px) 0; }
.costs .section-head { max-width: 780px; margin-bottom: clamp(48px, 6vw, 76px); }
.costs .section-head h2 { max-width: 17ch; }
.costs .section-head p { color: var(--slate); font-size: 18px; line-height: 1.62; }

.costs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.costs-item { padding: 0 34px; border-left: 1px solid var(--line); }
.costs-item:first-child { padding-left: 0; border-left: 0; }
.costs-item:last-child { padding-right: 0; }
.costs-item .card-icon { color: var(--teal); margin-bottom: 20px; }
.costs-item h3 { font-size: 20px; letter-spacing: -.015em; margin: 0 0 11px; }
.costs-item p { color: var(--slate); font-size: 15.5px; line-height: 1.64; margin: 0; }

/* En angosto los filetes pasan de verticales a horizontales y la fila se apila. */
@media (max-width: 900px) {
  .costs-list { grid-template-columns: minmax(0, 1fr); }
  .costs-item {
    padding: 28px 0 0; margin-top: 28px;
    border-left: 0; border-top: 1px solid var(--line);
  }
  .costs-item:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
}

/* ---------- Tarjetas ---------- */
.dm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 20px; }

.dm-card {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--sh-soft);
  transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease;
}
.dm-card:hover { box-shadow: var(--sh-medium); border-color: rgba(26, 61, 73, .22); transform: translateY(-2px); }

.dm-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.dm-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(180deg, #E9F1F3 0%, var(--soft) 100%);
  border: 1px solid var(--line);
  color: var(--navy); font-size: 20px; font-weight: 700; letter-spacing: .02em;
}

.dm-next {
  display: inline-flex; align-items: flex-start; gap: 6px;
  background: var(--soft); border-radius: var(--r-sm); padding: 6px 10px;
  font-size: 13px; font-weight: 600; color: var(--navy); text-align: right;
}
.dm-next svg { flex: none; color: var(--teal); margin-top: 2px; }
.dm-next i { display: block; font-style: normal; font-size: 12px; font-weight: 500; color: #3F5966; text-transform: uppercase; letter-spacing: .06em; }
.dm-next.is-soon { background: var(--green); }
.dm-next.is-soon svg { color: var(--navy); }
.dm-next.is-soon i { color: #41552a; }

.dm-name { font-size: 17px; margin: 0 0 2px; }
.dm-esp { font-size: 13.5px; font-weight: 600; color: var(--teal-ink); margin: 0 0 12px; }
.dm-esp span { font-weight: 500; color: var(--slate); }

.dm-meta { display: grid; gap: 8px; margin: 0 0 14px; font-size: 13px; line-height: 1.45; }
.dm-meta li { display: flex; align-items: flex-start; gap: 8px; color: var(--slate); }
.dm-meta svg { flex: none; margin-top: 1px; color: var(--teal); }
.dm-meta b { color: var(--navy); }

.dm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.dm-tags li {
  font-size: 12px; font-weight: 600; color: var(--slate);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
}
.dm-tags .is-ok { background: var(--soft); color: var(--navy); border-color: rgba(26, 61, 73, .2); }

.dm-card-cta { margin-top: auto; }
.dm-card-cta .btn { width: 100%; }

/* ---------- Sin resultados ---------- */
.dm-empty {
  text-align: center; max-width: 460px; margin: 24px auto 0;
  background: var(--bg); border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 40px 24px;
}
.dm-empty-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--soft); color: var(--teal); margin-bottom: 16px;
}
.dm-empty h3 { font-size: 19px; margin: 0 0 8px; }
.dm-empty p { font-size: 14px; margin: 0 auto 24px; max-width: 46ch; }

/* ---------- Cierre para médicos ---------- */
.dm-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.dm-cta > div:first-child { flex: 1 1 460px; }
.dm-cta h2 { margin-bottom: 8px; }
.dm-cta p { margin: 0; }
.dm-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Reserva de demostración ---------- */
.dm-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.dm-modal[hidden] { display: none; }
.dm-modal-backdrop { position: absolute; inset: 0; background: rgba(26, 61, 73, .45); }
.dm-modal-card {
  position: relative; width: 100%; max-width: 440px;
  background: var(--bg); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-strong);
  max-height: calc(100vh - 48px); overflow: auto;
}
.dm-modal-x {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--slate); cursor: pointer;
}
.dm-modal-x:hover { background: var(--soft); color: var(--navy); }
.dm-modal-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-ink); margin: 0 0 6px; }
.dm-modal-card h2 { font-size: 21px; margin: 0 0 4px; }
.dm-modal-sub { font-size: 13.5px; margin: 0 0 20px; }
.dm-modal-lead { font-size: 14px; font-weight: 600; color: var(--navy); margin: 0 0 12px; }

.dm-modal-fine { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; color: var(--slate); line-height: 1.45; }
.dm-modal-fine svg { flex: none; margin-top: 2px; }

/* ---------- Adaptaciones ---------- */
@media (max-width: 900px) {
  .dm-layout { grid-template-columns: 1fr; gap: 16px; }
  .dm-filters { position: static; display: none; order: -1; }
  .dm-filters.is-open { display: block; }
  .dm-filters-toggle { display: inline-flex; }
  .dm-sort { margin-left: 0; width: 100%; }
  .dm-sort .dm-select { flex: 1 1 auto; }
}
@media (max-width: 520px) {
  .dm-grid { grid-template-columns: 1fr; }
  .dm-radio, .dm-check { min-height: 44px; }
  .dm-search-box { min-height: 52px; }
}

/* ---------- Especialidad: campo con búsqueda (combobox) ---------- */
.dm-combo { position: relative; }
.dm-combo input {
  width: 100%; min-height: var(--tap); padding: 0 56px 0 36px;
  font: inherit; font-size: 14px; color: var(--navy);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md);
}
.dm-combo input::placeholder { color: var(--slate); }
.dm-combo input:hover { border-color: var(--navy); }
.dm-combo input:disabled { background: var(--soft); color: var(--slate); cursor: not-allowed; }
.dm-combo input:disabled::placeholder { color: var(--slate); }
.dm-combo:has(input:disabled) .dm-combo-ico,
.dm-combo:has(input:disabled) .dm-combo-chev { color: var(--slate); opacity: .6; }
.dm-combo input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13, 141, 156, .18); }
.dm-combo input:focus-visible { outline: none; }

.dm-combo-ico { position: absolute; left: 11px; top: 11px; color: var(--teal); pointer-events: none; }
.dm-combo-chev { position: absolute; right: 11px; top: 11px; color: var(--slate); pointer-events: none; }
.dm-combo-x {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--slate); cursor: pointer;
}
.dm-combo-x:hover { background: var(--soft); color: var(--navy); }

.dm-combo-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 264px; overflow-y: auto; padding: 6px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-strong);
}
.dm-combo-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: var(--tap); padding: 6px 10px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--navy); cursor: pointer; line-height: 1.35;
}
.dm-combo-list li:hover, .dm-combo-list li.is-active { background: var(--soft); }
.dm-combo-list li[aria-selected="true"] { font-weight: 600; box-shadow: inset 2px 0 0 var(--teal); }
.dm-combo-list li i { font-style: normal; font-size: 12.5px; color: var(--slate); flex: none; }
.dm-combo-vacio {
  display: block; padding: 12px 10px; font-size: 13px; color: var(--slate); cursor: default;
}
.dm-combo-vacio:hover { background: transparent; }


/* ---------- Reserva por pasos ---------- */
.dm-modal-card.is-ancho { max-width: 760px; }

.dm-modal-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dm-pasos {
  margin: 0 auto 0 0; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--teal-ink);
}
.dm-modal-top .dm-modal-x { position: static; flex: none; }

.dm-volver {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 0 14px;
  background: transparent; border: 1.5px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--navy); cursor: pointer;
}
.dm-volver:hover { background: var(--soft); border-color: var(--navy); }

.dm-modal-card h2 { font-size: 21px; margin: 0 0 4px; outline: none; }
.dm-modal-sub { font-size: 13.5px; margin: 0 0 20px; }
.dm-modal-sub:empty { margin: 0; }
.dm-paso { margin-bottom: 20px; }

/* Paso 1: servicios */
.dm-servicios { display: grid; gap: 10px; }
.dm-servicio {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; text-align: left;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md);
  font: inherit; color: var(--navy); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.dm-servicio:hover { border-color: var(--navy); background: var(--soft); box-shadow: var(--sh-soft); }
.dm-servicio-txt b { display: block; font-size: 15px; font-weight: 600; }
.dm-servicio-txt i { display: block; font-style: normal; font-size: 13px; color: var(--slate); margin-top: 2px; }
.dm-servicio-meta { flex: none; font-size: 13.5px; font-weight: 600; color: var(--teal-ink); text-align: right; }

/* Paso 2: calendario */
.dm-cal-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.dm-cal-mes { flex: 1 1 auto; margin: 0; text-align: center; font-size: 15px; font-weight: 700; color: var(--navy); }
.dm-cal-nav, .dm-hoy {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); height: var(--tap); padding: 0 14px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--navy); cursor: pointer;
}
.dm-cal-nav { padding: 0; }
.dm-cal-nav:hover, .dm-hoy:hover { background: var(--soft); border-color: var(--navy); }
.dm-cal-nav:disabled { opacity: .4; cursor: not-allowed; background: var(--soft); }

.dm-cal-cols { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; align-items: start; }

.dm-cal-encabezado, .dm-cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dm-cal-encabezado span { text-align: center; font-size: 12px; font-weight: 600; color: var(--slate); padding-bottom: 6px; }

.dm-dia {
  position: relative; aspect-ratio: 1; min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid transparent; border-radius: 50%;
  font: inherit; font-size: 14px; color: var(--slate); cursor: default;
}
.dm-dia[aria-disabled="true"] { color: #8C9FA8; }
.dm-dia.is-libre { color: var(--navy); font-weight: 600; border-color: var(--teal); cursor: pointer; }
.dm-dia.is-libre:hover { background: var(--soft); }
.dm-dia.is-sel { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.dm-punto { position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--teal); }
.dm-dia.is-sel .dm-punto { background: var(--green); }
.dm-dia-hueco { aspect-ratio: 1; }

.dm-cal-leyenda { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 12.5px; color: var(--slate); }
.dm-cal-leyenda .dm-punto { position: static; flex: none; }

.dm-horas { border-left: 1px solid var(--line); padding-left: 24px; min-height: 180px; }
.dm-horas-vacio { font-size: 13.5px; color: var(--slate); margin: 0; }
.dm-horas-titulo { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0 0 2px; }
.dm-horas-sub { font-size: 12.5px; color: var(--slate); margin: 0 0 12px; }
.dm-horas-grid { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
.dm-hora {
  min-height: 44px; padding: 0 12px;
  background: var(--bg); border: 1.5px solid var(--teal); border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--teal-ink); cursor: pointer;
}
.dm-hora:hover { background: var(--navy); border-color: var(--navy); color: var(--cream); }

/* Pasos 3 y 4: resumen y formulario */
.dm-resumen { background: var(--soft); border-radius: var(--r-md); padding: 16px; margin-bottom: 20px; }
.dm-resumen p { margin: 0; }
.dm-resumen-fecha { font-size: 14px; color: var(--slate); }
.dm-resumen-hora { font-size: 19px; color: var(--navy); margin-top: 2px !important; }
.dm-resumen-hora b { font-weight: 700; }
.dm-resumen-sv { font-size: 14px; font-weight: 600; color: var(--navy); margin-top: 6px !important; }
.dm-resumen-med { font-size: 13px; color: var(--slate); margin-top: 2px !important; }

#dm-form .field:last-of-type { margin-bottom: 20px; }
.dm-confirmar { width: 100%; }
.dm-legal { font-size: 12.5px; color: var(--slate); margin: 12px 0 0; text-align: center; }

.dm-listo { text-align: center; }
.dm-listo-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--green); color: var(--navy); margin-bottom: 16px;
}
.dm-listo .dm-resumen { text-align: left; }
.dm-listo-texto { font-size: 13.5px; margin: 0 auto 20px; max-width: 46ch; }

@media (max-width: 720px) {
  .dm-cal-cols { grid-template-columns: 1fr; gap: 20px; }
  .dm-horas { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; min-height: 0; }
  .dm-horas-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .dm-servicio { flex-direction: column; align-items: flex-start; gap: 6px; }
  .dm-servicio-meta { text-align: left; }
  .dm-modal { padding: 12px; }
  .dm-modal-card { padding: 20px; max-height: calc(100vh - 24px); }
}

/* ---------- Página que no existe (404) ---------- */
.e404 { padding: clamp(56px, 8vw, 112px) 0 clamp(64px, 9vw, 120px); }
.e404 .wrap { max-width: 720px; }
.e404-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.e404-links a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 14.5px; font-weight: 500; }

/* Objetivos de 44 px en móvil y botones que pueden partir en dos líneas.
   Va al final: estas reglas tienen que ganarle por orden a las de arriba. */
@media (max-width: 520px) {
  /* un botón con texto largo y white-space:nowrap empujaba la página 3 px
     hacia los lados en el inicio; en pantalla angosta se deja partir */
  .btn { white-space: normal; text-align: center; padding: 10px 20px; line-height: 1.35; }
  .btn-sm { min-height: 44px; }
  /* la ventana de reserva: cada control llega a 44 px en pantalla de teléfono */
  .dm-modal-card { padding: 16px; }
  .dm-volver, .dm-modal-x, .dm-cal-nav, .dm-hoy { min-height: 44px; min-width: 44px; }
  .dm-cal-dias, .dm-cal-encabezado { gap: 2px; }
  .dm-dia { min-height: 44px; }
  .dm-select select, .dm-combo input, .dm-combo-list li { min-height: 44px; }
  .dm-combo-ico, .dm-combo-chev { top: 13px; }
}

/* ============================================================
   Directorio: cabecera propia
   El directorio es para pacientes, no para médicos que evalúan comprar
   SanaMi. Así que no lleva «Precios» ni «Solicitar demostración»: lleva
   sus dos listas y una salida discreta al sitio comercial para el médico
   que llegue por error.
   ============================================================ */
.dm-header .nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }
.dm-soy-medico {
  font-size: 13.5px;
  color: var(--slate);
  white-space: nowrap;
}
.dm-soy-medico:hover { color: var(--teal-ink); }

/* ---------- Clínicas ---------- */
.dm-cl-wrap { padding-bottom: 72px; }
.dm-cl-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 10px;
}
.dm-cl-tools .dm-search { flex: 1 1 340px; }
.dm-cl-grid { margin-top: 18px; }
/* La clínica no tiene iniciales: lleva su símbolo. */
.dm-avatar.is-clinic {
  display: grid;
  place-items: center;
  background: var(--soft, #F4F8EC);
  color: var(--navy);
}

@media (max-width: 720px) {
  .dm-soy-medico { display: none; }
  .dm-cl-tools { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Directorio: la ficha de un médico
   Una sola decisión ocupa la página —si sirve y cuándo se puede ir—, así que
   la identidad y la reserva comparten la primera pantalla, y el botón vuelve
   al final para no obligar a subir después de leer.
   ============================================================ */
.dr-migas {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-top: 26px; font-size: 13.5px; color: var(--slate);
}
.dr-migas a { color: var(--teal-ink); }
.dr-migas b { color: var(--navy); font-weight: 600; }

.dr-head { padding: 18px 0 30px; border-bottom: 1px solid var(--line, #E6EBE4); }
.dr-head-in {
  display: grid; gap: 28px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}
.dr-id { display: flex; gap: 18px; align-items: flex-start; }
.dr-avatar {
  flex: none; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: var(--green, #DAEBAA);
  font-weight: 700; font-size: 25px; letter-spacing: .5px;
}
.dr-avatar.is-sm { width: 38px; height: 38px; font-size: 13px; }
.dr-head h1 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.12; margin: 2px 0 6px; }
.dr-esp { color: var(--teal-ink); font-weight: 600; margin-bottom: 12px; }
.dr-esp span { color: var(--slate); font-weight: 400; }
.dr-credenciales {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--slate);
}
.dr-credenciales li { display: inline-flex; gap: 6px; align-items: center; }
.dr-credenciales b { color: var(--navy); }
.dr-credenciales .is-ok { color: var(--teal-ink); }

/* La tarjeta de reserva: lo que hace falta para decidir, y nada más. */
.dr-reservar {
  background: var(--bg, #fff); border: 1px solid var(--line, #E6EBE4);
  border-radius: 18px; padding: 20px; box-shadow: 0 10px 30px rgba(26, 61, 73, .07);
}
.dr-next {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--soft, #F4F8EC); border-radius: 12px; padding: 11px 13px; margin-bottom: 14px;
}
.dr-next.is-soon { background: var(--green, #DAEBAA); }
.dr-next i { display: block; font-style: normal; font-size: 12px; color: var(--slate); }
.dr-next b { color: var(--navy); font-size: 15px; }
.dr-precio { font-size: 14.5px; color: var(--slate); margin-bottom: 14px; }
.dr-precio b { color: var(--navy); font-size: 19px; }
.dr-reservar .btn { width: 100%; justify-content: center; }
.dr-seguros { font-size: 13px; color: var(--slate); margin-top: 10px; text-align: center; }

.dr-cuerpo {
  /* padding-block, no el atajo: .wrap pone el margen lateral y un
     `padding: 34px 0` se lo comería, dejando el texto pegado al borde. */
  display: grid; gap: 32px; padding-block: 34px 10px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}
.dr-bloque { margin-bottom: 30px; }
.dr-bloque h2 { font-size: 19px; margin-bottom: 6px; }
.dr-sub, .dr-nota { font-size: 14px; color: var(--slate); }
.dr-sub { margin-bottom: 14px; }
.dr-nota { margin-top: 12px; }
.dr-motivos { margin: 0; }

.dr-horarios, .dr-modalidad, .dr-otros { list-style: none; padding: 0; margin: 0; }
.dr-horarios li, .dr-modalidad li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 0; border-bottom: 1px solid var(--line, #E6EBE4);
}
.dr-horarios li:last-child, .dr-modalidad li:last-child { border-bottom: 0; }
.dr-horarios b, .dr-modalidad b { display: block; color: var(--navy); }
.dr-horarios span, .dr-modalidad span { font-size: 14px; color: var(--slate); }

.dr-sede {
  background: var(--soft, #F4F8EC); border-radius: 18px; padding: 20px; margin: 0;
}
.dr-sede h2 { font-size: 16px; }
.dr-sede-nombre { display: flex; gap: 8px; align-items: center; margin: 10px 0 2px; }
.dr-sede-dir { font-size: 14px; color: var(--slate); margin-bottom: 12px; }
.dr-enlace { font-size: 14px; font-weight: 500; color: var(--teal-ink); }
.dr-otros-t {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--slate); margin: 20px 0 8px;
}
.dr-otros a { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
.dr-otros b { display: block; color: var(--navy); font-size: 14.5px; font-weight: 600; }
.dr-otros i { font-style: normal; font-size: 13px; color: var(--slate); }

.dr-cierre { background: var(--navy); color: #fff; text-align: center; padding: 44px 0; margin-top: 30px; }
.dr-cierre h2 { color: #fff; font-size: 23px; margin-bottom: 6px; }
.dr-cierre p { color: rgba(255, 255, 255, .78); margin-bottom: 18px; }

.dr-404 { padding: 80px 0; text-align: center; }

@media (max-width: 900px) {
  .dr-head-in, .dr-cuerpo { grid-template-columns: 1fr; }
  /* En angosto la reserva va primero: es la razón de estar acá. */
  .dr-reservar { order: -1; }
  .dr-avatar { width: 60px; height: 60px; font-size: 20px; }
}

/* El nombre en la tarjeta lleva a la ficha, pero primero es un título: hereda
   el color del encabezado y solo se subraya cuando el cursor lo toca. */
.dm-name a { color: inherit; text-decoration: none; }
.dm-name a:hover,
.dm-name a:focus-visible { color: var(--teal-ink); text-decoration: underline; }

/* ---------- Ficha: álbum de fotos ----------
   Una grande arriba y la tira debajo. El armazón es el mismo con fotos y sin
   ellas, para que la ficha no cambie de forma el día que el médico las suba. */
.dr-foto-grande {
  margin: 0 0 10px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--soft, #F4F8EC);
  aspect-ratio: 3 / 2;
}
.dr-foto-grande img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dr-foto-vacia {
  width: 100%; height: 100%;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  text-align: center; padding: 20px; color: var(--slate);
  border: 1.5px dashed rgba(26, 61, 73, .18); border-radius: 16px;
}
.dr-foto-vacia b { display: block; color: var(--navy); }
.dr-foto-vacia span { font-size: 14px; }

.dr-tira {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  list-style: none; padding: 0; margin: 0;
}
.dr-miniatura {
  display: block; width: 100%; aspect-ratio: 1; padding: 0;
  border: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--soft, #F4F8EC);
  outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color .15s ease, opacity .15s ease;
  opacity: .78;
}
.dr-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-miniatura:hover { opacity: 1; }
.dr-miniatura.is-on { opacity: 1; outline-color: var(--teal, #0D8D9C); }
.dr-miniatura:focus-visible { outline-color: var(--navy); }
/* Los huecos reservados no son botones: no se pueden tocar. */
.dr-miniatura.is-vacia {
  cursor: default; opacity: 1;
  border: 1.5px dashed rgba(26, 61, 73, .16); background: transparent;
}

@media (max-width: 560px) {
  .dr-tira { grid-template-columns: repeat(4, 1fr); }
  .dr-tira li:nth-child(5) { display: none; }
}

/* El círculo con retrato: la foto llena el círculo y se recorta al centro, en
   vez de las iniciales. El fondo navy se queda para el rato en que carga. */
.dm-avatar.tiene-foto,
.dr-avatar.tiene-foto { overflow: hidden; padding: 0; }
.dm-avatar.tiene-foto img,
.dr-avatar.tiene-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
  /* Sesgado hacia arriba: en un plano entero la cara está en el tercio
     superior, y un recorte al centro deja el círculo lleno de torso. */
  object-position: 50% 18%;
}

/* El álbum va a todo el ancho, entre la identidad y el resto de la ficha: es
   lo primero que un paciente mira después de saber con quién se va a atender.
   Fuera de la columna, la foto grande puede ser más ancha que alta. */
/* El álbum acompaña a la identidad, en su misma columna y a su ancho: al lado
   de la tarjeta de reserva, no cruzando por debajo. La línea de la cabecera lo
   cierra junto con el resto de la presentación. */
.dr-presenta { min-width: 0; }
.dr-album { padding-block: 18px 4px; margin-bottom: 0; max-width: 460px; }
.dr-album h2 { font-size: 16px; }
.dr-album .dr-sub { font-size: 13.5px; margin-bottom: 10px; }
.dr-album .dr-foto-grande { aspect-ratio: 16 / 10; border-radius: 12px; margin-bottom: 8px; }
.dr-album .dr-tira { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dr-album .dr-miniatura { border-radius: 9px; }
@media (max-width: 900px) {
  .dr-album .dr-foto-grande { aspect-ratio: 3 / 2; }
  .dr-album .dr-tira { grid-template-columns: repeat(4, 1fr); }
}

/* Segunda puerta al perfil, además del nombre: quien todavía no decide si
   reservar necesita algo más suave que el botón. Dice a dónde va —«Ver perfil
   de Dra. Melissa»—, para que fuera de contexto (un lector de pantalla
   recorriendo enlaces) no sea otro «Ver perfil» sin dueño. */
.dm-ver-perfil {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--teal-ink);
}
.dm-ver-perfil:hover,
.dm-ver-perfil:focus-visible { text-decoration: underline; }

/* ============================================================
   Directorio: portada
   La banda lleva el mosaico de la marca, el mismo del ingreso a la app, en vez
   del azul genérico de cualquier directorio. El buscador flota encima porque es
   lo único que se hace en esta pantalla.
   ============================================================ */
.dm-hero {
  position: relative; overflow: hidden;
  background: var(--navy);
  padding: clamp(46px, 6vw, 84px) 0 clamp(52px, 6vw, 88px);
  text-align: center;
}
/* El mosaico apenas se adivina y se abre hacia las orillas: acá el texto va
   centrado, así que el centro de la banda se deja en azul limpio. */
.dm-hero::before {
  content: ""; position: absolute; inset: 0;
  background: url(assets/brand/pattern.png) repeat -40px -20px / 460px 345px;
  opacity: .08;
  -webkit-mask-image: radial-gradient(120% 130% at 50% 45%, transparent 38%, #000 88%);
  mask-image: radial-gradient(120% 130% at 50% 45%, transparent 38%, #000 88%);
}
.dm-hero-in { position: relative; }
.dm-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green); margin-bottom: 14px;
}
.dm-hero-eyebrow::before,
.dm-hero-eyebrow::after {
  content: ""; width: 26px; height: 2px; background: var(--green); opacity: .6; border-radius: 2px;
}
.dm-hero h1 {
  color: #fff; font-size: clamp(30px, 4.6vw, 46px); max-width: 18ch; margin: 0 auto 14px;
  text-wrap: balance;
}
.dm-hero-lead {
  color: rgba(255, 255, 255, .84); font-size: clamp(15px, 1.6vw, 17px);
  max-width: 60ch; margin: 0 auto 30px; line-height: 1.55;
}

/* El buscador de la portada: una sola caja, con el botón adentro. */
.dm-search--hero { max-width: 820px; margin: 0 auto; }
.dm-search--hero .dm-search-box {
  border-color: transparent; min-height: 66px; padding: 8px 8px 8px 20px;
  box-shadow: 0 18px 44px rgba(10, 30, 38, .28);
}
.dm-search--hero .dm-search-box input { font-size: 16px; }
.dm-search-go { flex: none; height: 50px; padding-inline: 22px; }
.dm-search--hero .dm-search-hint {
  color: rgba(255, 255, 255, .72); margin-top: 12px; text-align: center;
}
@media (max-width: 620px) {
  .dm-search--hero .dm-search-box { flex-wrap: wrap; padding: 12px; min-height: 0; }
  .dm-search-go { width: 100%; }
  .dm-kbd { display: none; }
}

/* ---------- Especialidades ----------
   Sin ícono: la misma estrella repetida catorce veces no distingue una
   especialidad de otra, y no hay una ilustración por cada una. Lo que sí
   informa —cuántos médicos y cuándo tienen campo— es texto. */
.dm-esp-sec { padding: clamp(36px, 4.5vw, 60px) 0 8px; }
.dm-esp-titulo { text-align: center; margin-bottom: 6px; }
.dm-esp-sub { text-align: center; color: var(--slate); margin-bottom: 26px; }
.dm-esp-grid {
  display: grid; gap: 14px; list-style: none; padding: 0; margin: 0 0 28px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.dm-espec {
  width: 100%; height: 100%; display: block; text-align: left; cursor: pointer;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  border-left: 3px solid var(--green);
}
.dm-espec:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--sh-soft); }
.dm-espec:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dm-espec b { display: block; color: var(--navy); font-size: 15px; line-height: 1.3; margin-bottom: 4px; }
.dm-espec span { display: block; font-size: 13px; color: var(--slate); }
.dm-espec i {
  display: block; font-style: normal; font-size: 12.5px; font-weight: 500;
  color: var(--teal-ink); margin-top: 6px;
}
.dm-esp-sec .dm-demo-note { margin-inline: auto; }

/* Doctores y Clínicas llevan la misma banda de marca que la portada, pero más
   baja: debajo empiezan los resultados, y una banda entera los empujaría fuera
   de la primera pantalla. */
.dm-hero--corto { padding: clamp(32px, 3.6vw, 52px) 0 clamp(34px, 3.8vw, 54px); }
.dm-hero--corto h1 { font-size: clamp(26px, 3.4vw, 38px); max-width: 22ch; }
.dm-hero--corto .dm-hero-lead { margin-bottom: 24px; }

/* El aviso de demostración sale de la banda: adentro competía con el buscador. */
.dm-demo-suelta { margin: 22px auto 0; }

/* ---------- Armar el plan a la medida ----------
   Las tarjetas son la etiqueta entera: el clic cae en cualquier parte y no solo
   en la casilla de 16 px. La cuenta se queda pegada al desplazarse, porque lo
   que se está mirando al marcar módulos es justamente el total. */
.pr-armar-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px; align-items: start;
}
.pr-mods fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }

.pr-mod {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px;
  align-items: start; cursor: pointer;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pr-mod:hover { border-color: var(--teal); }
.pr-mod:has(input:checked) { border-color: var(--teal); background: var(--soft); box-shadow: var(--sh-soft); }
.pr-mod:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }

.pr-mod input {
  width: 22px; height: 22px; margin: 1px 0 0; flex: none;
  accent-color: var(--teal-ink); cursor: pointer;
}
.pr-mod.is-base { cursor: default; background: var(--soft); border-style: dashed; }
.pr-mod.is-base input { cursor: default; }

.pr-mod-cuerpo { display: block; }
.pr-mod-cuerpo b { display: block; color: var(--navy); font-size: 15.5px; margin-bottom: 2px; }
.pr-mod-cuerpo span { display: block; font-size: 14px; line-height: 1.5; }
.pr-mod-cuerpo .pr-mod-nota { color: var(--teal-ink); font-size: 13px; margin-top: 6px; }

.pr-mod-precio {
  display: block; text-align: right; color: var(--navy);
  font-size: 19px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pr-mod-precio small { display: block; font-size: 12px; font-weight: 500; color: var(--slate); white-space: normal; max-width: 12ch; margin-left: auto; }
.pr-mod-precio--texto { font-size: 14px; font-weight: 600; color: var(--slate); }

/* ---------- La cuenta ---------- */
.pr-cuenta {
  position: sticky; top: 92px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-medium); padding: 22px;
}
.pr-cuenta h3 { font-size: 17px; margin-bottom: 16px; }

.pr-medicos { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pr-medicos > label { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.pr-stepper { display: flex; align-items: center; gap: 8px; }
.pr-stepper button {
  width: var(--tap); height: var(--tap); flex: none;
  background: var(--bg); color: var(--navy);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pr-stepper button:hover { border-color: var(--teal); background: var(--soft); }
.pr-stepper button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pr-stepper input {
  width: 72px; height: var(--tap); text-align: center;
  font: inherit; font-weight: 600; color: var(--navy);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--bg);
}
.pr-stepper input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.pr-medicos-nota { font-size: 12.5px; color: var(--slate); margin: 8px 0 0; }

.pr-lineas { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.pr-lineas li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.pr-lineas b { color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-lineas i { font-style: normal; font-weight: 500; font-size: 12px; color: var(--slate); }

.pr-total {
  display: grid; gap: 2px; margin: 0;
  padding-top: 16px; border-top: 1.5px solid var(--navy);
}
.pr-total-rotulo { font-size: 14px; font-weight: 600; color: var(--slate); }
.pr-total-monto { font-size: 34px; font-weight: 700; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pr-total-desde { font-size: 15px; font-weight: 500; color: var(--slate); }
.pr-total-unidad { font-size: 13px; color: var(--slate); }
.pr-total-nota { font-size: 12.5px; color: var(--slate); margin: 10px 0 0; }

.pr-cuenta-cta { margin-top: 18px; display: grid; gap: 8px; }
.pr-cuenta-cta .btn { width: 100%; }

@media (max-width: 900px) {
  .pr-armar-layout { grid-template-columns: 1fr; }
  .pr-cuenta { position: static; }
}
@media (max-width: 520px) {
  .pr-mod { grid-template-columns: auto minmax(0, 1fr); }
  .pr-mod-precio { grid-column: 2; text-align: left; font-size: 17px; }
  .pr-mod-precio small { margin-left: 0; max-width: none; }
}

/* ---------- Portada de una clínica ----------
   La foto es del lugar, así que va arriba y a todo lo ancho de la tarjeta. Las
   clínicas que no mandaron foto abren con su monograma sobre el patrón de la
   marca: es honesto —no finge ser una foto— y distingue una de otra, que es
   más de lo que hace el mismo ícono repetido doce veces. */
.dm-card--clinica { padding-top: 0; overflow: hidden; }
/* La foto sale del acolchado de la tarjeta para tocar los bordes */
.dm-portada-enlace { display: block; margin: 0 -20px; text-decoration: none; }
.dm-portada {
  display: block; aspect-ratio: 16 / 9; background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.dm-portada img { width: 100%; height: 100%; object-fit: cover; }
.dm-portada.es-marca {
  position: relative; display: grid; place-items: center;
  background: var(--navy) url(assets/brand/pattern.png) repeat -30px -15px / 300px 225px;
}
.dm-portada.es-marca b {
  position: relative; color: var(--green); font-size: 38px; font-weight: 700; letter-spacing: .04em;
}
.dm-portada.es-marca::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26, 61, 73, .88), rgba(26, 61, 73, .94));
}
.dm-card--clinica .dm-card-top { padding-top: 16px; }

/* En la ficha, el mismo cuadro donde el médico lleva su retrato */
.dr-avatar.cl-marca { overflow: hidden; }
.dr-avatar.cl-marca img { width: 100%; height: 100%; object-fit: cover; }
.dr-avatar.cl-marca.es-marca { background: var(--navy); color: var(--green); }
.dr-avatar.cl-marca.es-marca b { font-weight: 700; }

/* Los médicos de la clínica: la misma tarjeta de la lista, en dos columnas */
.cl-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 18px; }
.dr-motivos a { color: inherit; text-decoration: none; }
.dr-motivos li:has(a):hover { border-color: var(--teal); }

/* ---------- Sucursales de una clínica ----------
   Con varias sucursales, lo primero que se pregunta quien entra no es con quién
   se atiende sino a cuál puede ir. Por eso el filtro va pegado a la lista de
   médicos y no escondido en un panel; con una sola sucursal no se dibuja. */
.cl-filtro { border: 0; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cl-filtro legend { float: left; width: 100%; font-size: 13px; font-weight: 600; color: var(--slate); margin-bottom: 8px; }

.cl-suc { cursor: pointer; }
.cl-suc input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.cl-suc span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 16px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--navy);
  transition: border-color .15s ease, background .15s ease;
}
.cl-suc span i {
  font-style: normal; font-size: 12.5px; font-weight: 600;
  color: var(--slate); font-variant-numeric: tabular-nums;
}
.cl-suc:hover span { border-color: var(--teal); }
.cl-suc.is-on span { background: var(--navy); border-color: var(--navy); color: #fff; }
.cl-suc.is-on span i { color: var(--green); }
.cl-suc input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }

.cl-conteo { font-size: 13.5px; color: var(--slate); margin: 12px 0 0; }

.cl-sucursales { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.cl-sucursales li { display: flex; gap: 10px; align-items: flex-start; }
.cl-sucursales svg { flex: none; color: var(--teal); margin-top: 2px; }
.cl-sucursales b { display: block; color: var(--navy); font-size: 14.5px; }
.cl-sucursales span { display: block; font-size: 13px; color: var(--slate); }