/* ============================================================================
   landing.css — Landing comercial SICOMED (change "landing-comercial")
   Tokens DERIVADOS del tema interno Skote (wwwroot/assets/css/app.min.css),
   ELEVADOS para marketing: mismos colores/tipografía que el panel (continuidad
   landing → login → panel), con radius, sombras y ritmo de sección ampliados.
   Se aplica SOBRE bootstrap vanilla local (wwwroot/lib/bootstrap) — la landing
   NUNCA enlaza app.min.css.
   ========================================================================== */

:root {
  /* Colores Skote */
  --l-primary: #556ee6;
  --l-primary-dark: #4458b8;
  --l-dark: #2a3042;
  --l-success: #34c38f;
  --l-info: #50a5f1;
  --l-warning: #f1b44c;
  --l-danger: #f46a6a;
  --l-heading: #343a40;
  --l-text: #495057;
  --l-muted: #74788d;
  --l-bg-soft: #f8f8fb;
  --l-border: #eff2f7;
  --l-primary-soft: rgba(85, 110, 230, 0.18);
  --l-primary-softer: rgba(85, 110, 230, 0.08);

  /* Fix R3 (WCAG AA, solo fondos SÓLIDOS — NO aplica al gradiente oscuro del hero):
     --l-muted (#74788d) da 4.36:1 sobre blanco y --l-primary (#556ee6) da 4.41:1 sobre
     blanco / 4.16:1 sobre --l-bg-soft (#f8f8fb) — ambos por debajo del mínimo 4.5:1 para
     texto normal. Se agregan variantes de TEXTO más oscuras (no se toca --l-primary en
     usos de fondo/icono/borde grande, donde 3:1 basta o no aplica). Ratios verificados con
     la fórmula de luminancia relativa WCAG (ver reporte de la tarea):
       --l-muted-text  #5f6377 sobre blanco   -> 5.94:1
       --l-primary-text #4257c9 sobre blanco  -> 6.11:1 · sobre --l-bg-soft -> 5.76:1
       --l-primary-dark (ya existente, #4458b8) con texto blanco -> 6.30:1 */
  --l-muted-text: #5f6377;
  --l-primary-text: #4257c9;

  /* Elevaciones marketing (Skote usa .03 — aquí .06 reposo / .12 hover) */
  --l-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.06);
  --l-shadow-lg: 0 1.25rem 2.5rem rgba(18, 38, 63, 0.12);

  /* Radius elevado (Skote base .25rem) */
  --l-radius: 0.5rem;
  --l-radius-lg: 0.75rem;
}

body.landing-body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--l-text);
  background: #fff;
  overflow-x: hidden;
}

/* Fix R1: Bootstrap .container solo trae padding-inline de 0.75rem (12px), pero varias
   secciones de la landing usan filas ".row.g-5" (gutter de 3rem -> margin-inline negativo
   de 1.5rem/24px por lado en la propia .row). En viewports angostos (320-414px) ese margen
   negativo excede el padding del .container y el contenido se sale del viewport, generando
   scroll horizontal real (no solo visual). Se sube el padding-inline del .container en la
   landing para que siempre contenga el gutter más ancho usado (g-5 = 3rem => mitad 1.5rem).
   Esto ataca la causa (contención del gutter) en vez de recortar con overflow-x:hidden. */
.landing-body .container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.landing-body h1, .landing-body h2, .landing-body h3,
.landing-body h4, .landing-body h5, .landing-body h6 {
  color: var(--l-heading);
  font-weight: 600;
}

.landing-body a { transition: color 0.2s ease; }

/* ------------------------------------------------------------------ Botones */
.btn-l-primary {
  /* Fix R3: blanco sobre #556ee6 da 4.41:1 (botón "Prueba gratis" del navbar y CTA
     destacado de planes) -> se usa --l-primary-dark (ya existente, antes solo en
     :hover) como fondo por defecto, 6.30:1 con texto blanco. El estado :hover/:focus
     de abajo queda igual (ya usaba --l-primary-dark). */
  background: var(--l-primary-dark);
  border: 1px solid var(--l-primary-dark);
  color: #fff;
  border-radius: 50rem;
  padding: 0.7rem 1.8rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-l-primary:hover, .btn-l-primary:focus {
  background: var(--l-primary-dark);
  border-color: var(--l-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--l-shadow);
}
.btn-l-outline {
  background: transparent;
  border: 1px solid var(--l-primary);
  /* Fix R3: texto de botón (enlace "Iniciar sesión" navbar, CTA outline de planes),
     #556ee6 sobre blanco da 4.41:1 -> se usa --l-primary-text (6.11:1). El borde se
     deja con --l-primary intacto (borde grande, no exige 4.5:1). */
  color: var(--l-primary-text);
  border-radius: 50rem;
  padding: 0.7rem 1.8rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-l-outline:hover, .btn-l-outline:focus {
  background: var(--l-primary-softer);
  color: var(--l-primary-dark);
}
.btn-l-light {
  background: #fff;
  border: 1px solid #fff;
  /* Fix R3: texto del botón "Quiero mi prueba gratis" del hero, #556ee6 sobre blanco
     da 4.41:1 -> se usa --l-primary-text (6.11:1). */
  color: var(--l-primary-text);
  border-radius: 50rem;
  padding: 0.8rem 2.2rem;
  font-weight: 700;
  transition: all 0.2s ease;
  box-shadow: var(--l-shadow);
}
.btn-l-light:hover, .btn-l-light:focus {
  color: var(--l-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--l-shadow-lg);
}
.btn-l-light-outline {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  border-radius: 50rem;
  padding: 0.75rem 2rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-l-light-outline:hover, .btn-l-light-outline:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ------------------------------------------------------------------- Navbar */
.l-navbar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 12px rgba(18, 38, 63, 0.06);
  padding: 0.85rem 0;
}
.l-navbar .nav-link {
  color: var(--l-text);
  font-weight: 500;
}
.l-navbar .nav-link:hover { color: var(--l-primary); }
/* Fix R5: en el menú colapsado (móvil, <lg) los enlaces de texto (Funcionalidades/
   Precios/FAQ) medían ~20px de alto (solo la altura de línea), por debajo del target
   táctil recomendado de 44px. Se agrega padding vertical SOLO dentro de
   .navbar-collapse para no alterar la métrica ajustada del navbar horizontal en
   desktop (>=lg), donde el link ya tiene suficiente área de click por el layout en
   fila con gap. */
@media (max-width: 991.98px) {
  .l-navbar .navbar-collapse .nav-link {
    display: block;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }
  .l-navbar .navbar-nav .nav-item {
    width: 100%;
  }
}

/* --------------------------------------------------------------------- Hero */
.l-hero {
  background: linear-gradient(135deg, var(--l-dark) 0%, #3b4368 55%, var(--l-primary) 100%);
  position: relative;
  overflow: hidden;
  padding: 10rem 0 6rem;
  color: #fff;
}
.l-hero::before, .l-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.l-hero::before {
  top: -40%; right: -15%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(85, 110, 230, 0.25) 0%, transparent 70%);
}
.l-hero::after {
  bottom: -35%; left: -12%;
  width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(80, 165, 241, 0.15) 0%, transparent 70%);
}
.l-hero .container { position: relative; z-index: 2; }
.l-hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #fff;
}
.l-hero .l-hero-sub {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}
.l-hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50rem;
  padding: 0.45rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}
.l-hero-micro {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Marco de navegador para la captura del producto (con fallback elegante si
   la imagen aún no existe — el coordinador la deja después con Playwright). */
.l-browser-frame {
  background: #fff;
  border-radius: var(--l-radius-lg);
  box-shadow: 0 2rem 4rem rgba(18, 38, 63, 0.35);
  overflow: hidden;
}
.l-browser-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--l-bg-soft);
  border-bottom: 1px solid var(--l-border);
  padding: 0.6rem 0.9rem;
}
.l-browser-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.l-browser-dot.red { background: var(--l-danger); }
.l-browser-dot.yellow { background: var(--l-warning); }
.l-browser-dot.green { background: var(--l-success); }
.l-browser-url {
  flex: 1;
  margin-left: 0.6rem;
  background: #fff;
  border: 1px solid var(--l-border);
  border-radius: 50rem;
  font-size: 0.72rem;
  color: var(--l-muted-text);
  padding: 0.15rem 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l-browser-frame img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}
/* Fallback (JS marca .img-missing con onerror; sin JS el alt queda dentro del
   placeholder degradado — nunca un icono roto sobre fondo blanco). */
.l-browser-placeholder {
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(160deg, rgba(85, 110, 230, 0.10) 0%, rgba(42, 48, 66, 0.06) 100%),
    repeating-linear-gradient(0deg, transparent 0 46px, var(--l-border) 46px 47px),
    #fdfdff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--l-muted-text);
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}
.l-browser-frame img.img-missing { display: none; }

/* ---------------------------------------------------------------- Secciones */
.l-section { padding: 96px 0; }
.l-section-soft { background: var(--l-bg-soft); }
.l-section-badge {
  display: inline-block;
  background: var(--l-primary-soft);
  /* Fix R3: eyebrow (texto), #556ee6 da 4.41:1 sobre blanco y 4.16:1 sobre --l-bg-soft
     (secciones .l-section-soft) -> se usa la variante de texto --l-primary-text (6.11:1
     y 5.76:1 respectivamente). */
  color: var(--l-primary-text);
  border-radius: 50rem;
  padding: 0.35rem 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.l-section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.4px;
}

/* ----------------------------------------------------------------- Features */
.l-feature-card {
  background: #fff;
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  padding: 2rem 1.75rem;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--l-shadow);
}
.l-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--l-shadow-lg);
}
.l-feature-icon {
  width: 56px; height: 56px;
  border-radius: var(--l-radius);
  background: var(--l-primary-soft);
  color: var(--l-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.l-feature-icon svg { width: 26px; height: 26px; }
.l-feature-card h5 { font-size: 1.05rem; font-weight: 600; }
.l-feature-card p { color: var(--l-muted-text); font-size: 0.92rem; margin-bottom: 0; }

/* --------------------------------------------------------------- Panel CFDI */
.l-cfdi {
  background: linear-gradient(135deg, var(--l-dark) 0%, #343c58 100%);
  color: rgba(255, 255, 255, 0.85);
}
.l-cfdi h2, .l-cfdi h3 { color: #fff; }
.l-cfdi-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 500;
  color: #fff;
}
.l-cfdi-check svg { color: var(--l-success); flex-shrink: 0; margin-top: 3px; }

/* ------------------------------------------------------------- Próximamente */
.l-soon-card {
  background: #fff;
  border: 1px dashed var(--l-border);
  border-radius: var(--l-radius);
  padding: 1.6rem 1.5rem;
  height: 100%;
  box-shadow: var(--l-shadow);
}
.l-badge-soon {
  display: inline-block;
  background: rgba(241, 180, 76, 0.18);
  /* Fix WCAG AA: #b7791f contra el fondo REAL compuesto (rgba(241,180,76,0.18) sobre
     .l-soon-card blanco = rgb(252,242,223), no blanco puro) da 3.28:1 -- por debajo del
     mínimo 4.5:1 para texto normal. #8a5a10 da 5.32:1 contra ese fondo compuesto (5.91:1
     contra blanco puro). --l-warning (#f1b44c) se mantiene intacto como fondo/acento. */
  color: #8a5a10;
  border-radius: 50rem;
  padding: 0.2rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.l-soon-card h5 { font-size: 1rem; margin-top: 0.7rem; }
.l-soon-card p { color: var(--l-muted-text); font-size: 0.9rem; margin-bottom: 0; }

/* ------------------------------------------------------------------- Planes */
.l-plan-card {
  background: #fff;
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius-lg);
  padding: 2.4rem 2rem;
  height: 100%;
  box-shadow: var(--l-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  /* Los planes tienen distinto número de características (5, 6 y 7), así que la lista
     empujaba el botón a alturas distintas en cada tarjeta. Con la tarjeta como columna
     flex, la lista absorbe el hueco sobrante y el CTA queda anclado abajo: los cuatro
     botones quedan a la misma altura sin fijar alturas a mano. */
  display: flex;
  flex-direction: column;
}
.l-plan-card:hover { transform: translateY(-4px); box-shadow: var(--l-shadow-lg); }
.l-plan-card.destacado { border: 2px solid var(--l-primary); }
.l-plan-destacado-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  /* Fix R3: mismo par blanco-sobre-#556ee6 (4.41:1) que el botón "Prueba gratis" del
     navbar — se usa --l-primary-dark (ya existente) para llegar a 6.30:1. */
  background: var(--l-primary-dark);
  color: #fff;
  border-radius: 50rem;
  padding: 0.25rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
/* El monto y su leyenda iban en un "d-flex align-items-end" (lado a lado). Con leyendas
   largas —las de Clínica y Clínica Plus vienen de Plan.UnidadPrecio, p.ej.
   "al mes · 4 médicos incluidos ($299 c/u)"— el texto envolvía en 3-4 renglones a la
   derecha del número y el sufijo "MXN" se descolgaba debajo. Apilado en columna: el monto
   con su "MXN" en una línea y la leyenda completa en su propio renglón, igual en las
   cuatro tarjetas (la de prueba gratis incluida) independientemente del largo del texto. */
.l-plan-precio-bloque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.l-plan-precio {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--l-heading);
  line-height: 1;
}
.l-plan-unidad {
  color: var(--l-muted-text);
  font-size: 0.9rem;
  /* La leyenda ya no compite por el ancho con el monto: puede envolver con un interlineado
     legible en vez del line-height:1 heredado del bloque del precio. */
  line-height: 1.35;
}
/* flex:1 — es la lista, y no un margin-top:auto en el botón, la que debe crecer: así el
   bloque de características queda pegado al precio en vez de flotar a media tarjeta. */
.l-plan-card ul { list-style: none; padding: 0; margin: 0; flex: 1 1 auto; }
/* Red de seguridad para tarjetas sin <ul> (la de prueba gratis usa otro bloque).
   min-height: los cuatro botones YA quedan anclados abajo, pero "Empezar prueba gratis"
   envuelve en DOS líneas por debajo de ~260px de ancho de tarjeta (reproducible a 1375px
   de viewport: container de 1140px -> tarjetas de 267px) y, al alinearse por el borde
   inferior, asomaba 24px más arriba que los "Contratar" de una línea. Reservando la altura
   de dos líneas siempre, la fila queda alineada en CUALQUIER resolución; el flex centra el
   texto tanto si ocupa una línea como dos. */
.l-plan-card .btn {
  margin-top: auto;
  /* 22.4px de padding vertical (0.7rem x2) + 2px de borde + 2 lineas de 24px
     (16px x line-height 1.5) = 72px, exactamente lo que mide hoy el boton que envuelve. */
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.l-plan-card li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.42rem 0;
  font-size: 0.93rem;
}
.l-plan-card li svg { color: var(--l-success); flex-shrink: 0; margin-top: 3px; }

/* La tarjeta de prueba gratis no es un plan de pago: no lleva precio ni aparece en el
   catálogo. Se distingue con borde punteado y fondo suave para que se lea como una
   entrada distinta, sin competir con la destacada ("Más popular"). */
.l-plan-card-prueba {
  background: var(--l-bg-soft, #f8f9fc);
  border-style: dashed;
}
.l-plan-card-prueba .l-plan-precio { color: var(--l-primary); }

/* Con 4 tarjetas por fila cada columna baja a ~285px y, descontando el padding, quedan
   ~245px útiles. "$2,590 MXN" a 2.6rem no cabe: se compacta todo en este breakpoint.
   El caso peor es Clínica Plus — precio más largo y 7 características. */
@media (min-width: 992px) {
  .l-plan-card { padding: 2.2rem 1.5rem; }
  .l-plan-precio { font-size: 2.1rem; }
  .l-plan-card li { font-size: 0.88rem; }
}

/* Fix WCAG AA: Bootstrap .text-muted (#6c757d) sobre --l-bg-soft (#f8f8fb) da 4.42:1,
   por debajo del mínimo 4.5:1 para texto normal. Se reusa --l-muted-text (#5f6377,
   ya verificado en R3: 5.60:1 sobre --l-bg-soft / 5.94:1 sobre blanco) dentro de la
   landing. Único uso de .text-muted en la landing es Views/Legal/Index.cshtml
   (textos de apoyo en precios/CTA), sin dependencia de diseño en el gris original. */
/* !important necesario: Bootstrap declara .text-muted con !important (utilidad de color),
   así que sin él este override pierde por especificidad y el texto queda en 4.42:1. */
.landing-body .text-muted { color: var(--l-muted-text) !important; }

/* ---------------------------------------------------------------------- FAQ */
.l-faq details {
  background: #fff;
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  box-shadow: var(--l-shadow);
  margin-bottom: 0.9rem;
  padding: 0;
  overflow: hidden;
}
.l-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--l-heading);
  padding: 1.1rem 1.4rem;
  list-style: none;
  position: relative;
  padding-right: 3rem;
}
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after {
  content: '+';
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--l-primary);
  transition: transform 0.2s ease;
}
.l-faq details[open] summary::after { content: '−'; }
.l-faq .l-faq-body {
  padding: 0 1.4rem 1.2rem;
  color: var(--l-muted-text);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------- Registro */
.l-registro-card {
  background: #fff;
  border-radius: var(--l-radius-lg);
  box-shadow: var(--l-shadow-lg);
  padding: 2.5rem 2.25rem;
}
.l-registro-card .form-control, .l-registro-card .form-select {
  border-color: var(--l-border);
  padding: 0.65rem 0.9rem;
  border-radius: var(--l-radius);
}
.l-registro-card .form-control:focus {
  border-color: var(--l-primary);
  box-shadow: 0 0 0 0.2rem var(--l-primary-softer);
}
/* Fix R2: Honeypot — antes se ocultaba con "left:-9999px", lo que lo saca del viewport
   por la DERECHA cuando el elemento hereda dirección/flow normal, ensanchando el documento
   y contribuyendo al scroll horizontal (además de que ya no participa del cálculo de
   overflow del contenedor .container de forma predecible en todos los viewports). Se
   reemplaza por el patrón estándar "visually-hidden" (clip + tamaño 1x1px sin mover el
   elemento fuera de flujo lateral): sigue en el DOM, sigue siendo rellenable por bots,
   pero no es visible para humanos ni aporta ancho al layout. No usar display:none ni
   visibility:hidden (rompen la detección de bots, que dependen de que el campo sea
   "visible" para el motor de renderizado headless pero no para el ojo humano).
   No display:none/visibility:hidden (algunos bots lo detectan). */
.l-hp-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: 0 !important;
  top: 0 !important;
}
/* El "overflow:hidden" del wrapper de arriba solo recorta la PINTURA visual — el <label>
   y el <input> hijos, al no tener ellos mismos el patrón visually-hidden, conservan su
   caja de layout nativa (el <input> renderiza a su ancho intrínseco, ~300px+ en la mayoría
   de motores) y esa caja seguía contando para el ancho real del documento/scroll horizontal
   aun estando visualmente oculta. Se aplica el mismo patrón a los hijos directos para que
   también su caja de layout colapse a 1x1px (siguen siendo focuseables/rellenables por
   bots vía tabindex="-1" + JS, que no depende del tamaño visual). */
.l-hp-field label,
.l-hp-field input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: 0 !important;
  top: 0 !important;
}

/* ----------------------------------------------- Páginas legales (Privacy/Terms) */
.l-page-header {
  background: linear-gradient(135deg, var(--l-dark) 0%, #3b4368 55%, var(--l-primary) 100%);
  padding: 9rem 0 6rem;
  color: #fff;
}
.l-page-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #fff;
}
/* Badge sobre el banner OSCURO (l-page-header): la variante clara de .l-section-badge
   (morado sobre morado) no contrasta ahi. Se le da el tratamiento del hero: fondo
   translucido blanco + texto blanco, legible sobre oscuro. Aplica a CUALQUIER
   l-section-badge dentro de un l-page-header (Buscar y futuras paginas internas). */
.l-page-header .l-section-badge {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.l-content-card {
  background: #fff;
  border-radius: var(--l-radius-lg);
  box-shadow: var(--l-shadow-lg);
  padding: 3rem;
  margin-top: -3rem;
  position: relative;
  z-index: 10;
  margin-bottom: 4rem;
}
.l-content-card h4 {
  color: var(--l-heading);
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--l-border);
}
.l-content-card ul { padding-left: 1.25rem; }
.l-content-card li { margin-bottom: 0.5rem; color: var(--l-text); line-height: 1.7; }
.l-content-card p { color: var(--l-text); line-height: 1.8; }
/* Fix R3: enlaces de cuerpo de texto en Aviso de Privacidad/Términos, mismo par
   #556ee6 sobre blanco (4.41:1) -> --l-primary-text (6.11:1). */
.l-content-card a { color: var(--l-primary-text); }
/* Un enlace que es BOTÓN dentro de la tarjeta (p.ej. "Continuar" de confirmar cita, change
   "portal-confirmar-cita") NO debe heredar el color de enlace de arriba (mismo tono que el fondo
   del botón -> texto invisible): conserva el color propio de su variante. Mismo criterio que
   .l-content-card a.l-buscar-cta más abajo. La especificidad (0,2,0) gana a .l-content-card a. */
.l-content-card a.btn-l-primary { color: #fff; }
.l-content-card a.btn-l-outline { color: var(--l-primary-text); }
@media (max-width: 768px) {
  .l-content-card { padding: 1.75rem 1.25rem; }
}

/* ------------------------------------------------------------------- Footer */
.l-footer {
  background: var(--l-dark);
  color: rgba(255, 255, 255, 0.65);
  padding: 56px 0 28px;
}
.l-footer h6 {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 1rem;
}
.l-footer a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  /* Fix R5: enlaces del footer medían ~20px de alto (solo line-height), por debajo
     del target táctil recomendado de 44px. display:block + padding vertical amplía
     el área de toque sin cambiar el ritmo visual (los <li> ya traen mb-2). */
  display: inline-block;
  padding: 0.55rem 0;
}
.l-footer a:hover { color: #fff; }
.l-footer hr { border-color: rgba(255, 255, 255, 0.12); opacity: 1; }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 768px) {
  .l-section { padding: 64px 0; }
  .l-hero { padding: 7.5rem 0 4rem; }
  .l-registro-card { padding: 1.75rem 1.25rem; }
}

/* Respeto a usuarios con animaciones reducidas */
@media (prefers-reduced-motion: reduce) {
  .landing-body * { transition: none !important; }
}

/* ------------------------------------------------- Botón flotante de WhatsApp */
/* Contacto de marketing presente en todas las páginas del layout de la landing.
   Es un <a> puro: sin JS, sin dependencias externas, el SVG va inline en la vista.

   POSICIÓN — abajo a la derecha, la convención establecida para este patrón (el
   usuario ya lo busca ahí). Se descarta abajo-izquierda porque en móvil compite con
   el gesto de "atrás" del navegador, y arriba-derecha porque ahí vive el navbar
   fixed-top con "Iniciar sesión" / "Prueba gratis": son los CTA primarios y no deben
   quedar tapados. La esquina inferior derecha es la única zona de la landing que no
   contiene ningún control.

   Z-INDEX 1020 — por encima de todo el contenido de la página (el máximo propio de
   este archivo es el z-index:10 de .l-content-card), pero por DEBAJO de la escala de
   Bootstrap que empieza en el navbar fixed-top (1030) y sigue con backdrop/modal
   (1050/1055) y tooltips (1080). Así el botón nunca se superpone al menú desplegado
   en móvil ni a un modal: cede el paso a cualquier capa que exija atención. */
.l-whatsapp-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1020;

  /* 56px: cómodamente por encima del mínimo táctil de 48x48px exigido. El área de
     toque es el <a> completo, no el glifo, que es más chico y va centrado. */
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Verde de WhatsApp: aquí el reconocimiento de marca vale más que la paleta propia, y
     evita que se confunda con un CTA de SICOMED. El resto de tokens (sombra, transición)
     sí son los del sistema de diseño.

     Se usa el verde OSCURO de la marca (#128c7e, el de la barra de la app) y no el claro
     (#25d366) por contraste, mismo criterio que el Fix R3 de arriba. Ratios calculados con
     la fórmula de luminancia relativa WCAG; el mínimo aplicable es 3:1, que WCAG 2.1
     (1.4.11 "Non-text Contrast") exige tanto al glifo contra su botón como al botón contra
     el fondo de la página:

                        glifo blanco   vs blanco   vs --l-bg-soft   vs footer (#2a3042)
       #25d366 (claro)      1.98 ✗       1.98 ✗        1.87 ✗            6.62 ✓
       #128c7e (oscuro)     4.14 ✓       4.14 ✓        3.90 ✓            3.17 ✓

     El claro fallaba en los tres fondos donde de hecho se ve el botón durante casi todo el
     scroll; el footer oscuro es el único tramo donde iba sobrado. El oscuro es el único que
     cumple en los cuatro a la vez — y sigue siendo verde WhatsApp, así que no se pierde el
     reconocimiento. */
  background: #128c7e;
  color: #fff;
  border-radius: 50%;
  box-shadow: var(--l-shadow-lg);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
/* El hover oscurece a #0f7268 (glifo 5.79:1). Sobre el footer oscuro ese tono baja a
   2.27:1 contra el fondo, por debajo del 3:1 — es aceptable porque el hover es un estado
   transitorio, con el puntero ya encima del botón: quien lo ve sabe dónde está. El 3:1 de
   1.4.11 se cumple en el estado EN REPOSO, que es el que localiza el control. */
.l-whatsapp-fab:hover,
.l-whatsapp-fab:focus-visible {
  background: #0f7268;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 1rem 2rem rgba(18, 140, 126, 0.4);
}
/* Foco visible propio: el botón es redondo y va sobre fondos variables (blanco, gris
   suave y el footer oscuro), así que se usa un anillo de doble capa — halo blanco +
   borde verde — que mantiene el contraste sobre cualquiera de los tres. */
.l-whatsapp-fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0f7268;
}
.l-whatsapp-fab__icon {
  width: 30px;
  height: 30px;
  display: block;
}

@media (max-width: 768px) {
  /* En móvil se acerca un poco a la esquina para recuperar ancho útil, pero se mantiene
     el tamaño de 56px: reducirlo comprometería el área táctil, que es justo donde más
     importa. La landing no tiene barra inferior fija ni banner de cookies con los que
     pudiera solaparse; el elemento más bajo es el footer, que hace scroll por debajo.
     La separación de 1rem deja además holgura sobre el área del gesto de inicio en iOS. */
  .l-whatsapp-fab {
    right: 1rem;
    bottom: 1rem;
  }
}

/* ============================ BUSCADOR (ficha #7) ============================ */
/* La tarjeta ya usa .l-content-card (blanca, montada sobre el l-page-header). */
.l-buscar-form .input-group-text { color: var(--l-muted); }
.l-buscar-form .form-control:focus,
.l-buscar-form .input-group:focus-within .input-group-text { box-shadow: none; }
.l-buscar-form .input-group { box-shadow: var(--l-shadow); border-radius: var(--l-radius); }
.l-buscar-form .input-group > .input-group-text:first-child { border-top-left-radius: var(--l-radius); border-bottom-left-radius: var(--l-radius); }
.l-buscar-form .input-group > .btn:last-child { border-top-right-radius: var(--l-radius); border-bottom-right-radius: var(--l-radius); }

.l-buscar-resultados { display: flex; flex-direction: column; gap: 0.75rem; }

.l-buscar-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  background: #fff;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.l-buscar-item:hover { box-shadow: var(--l-shadow); transform: translateY(-2px); border-color: var(--l-primary-soft); }

.l-buscar-avatar {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
  color: var(--l-primary-dark);
  background: var(--l-primary-soft);
}
.l-buscar-info { flex: 1 1 auto; min-width: 0; }
.l-buscar-nombre { font-weight: 600; color: var(--l-heading); font-size: 1.02rem; }
.l-buscar-especialidad { color: var(--l-primary); font-size: 0.9rem; font-weight: 500; }
.l-buscar-consultorio { color: var(--l-muted-text); font-size: 0.85rem; margin-top: 2px; }
.l-buscar-cta, .l-content-card a.l-buscar-cta { flex: 0 0 auto; padding: 0.5rem 1.4rem; white-space: nowrap; line-height: 1.4; font-size: 0.9rem; display: inline-flex; align-items: center; color: #fff !important; }

.l-buscar-vacio, .l-buscar-hint { color: var(--l-muted-text); }

@media (max-width: 575.98px) {
  .l-buscar-item { flex-wrap: wrap; }
  .l-buscar-cta { width: 100%; margin-top: 0.5rem; }
  .l-content-card.l-buscar-card { padding: 1.5rem; }
}

/* ============================================================================
   Portal · selector de horarios date-first (change "portal-huecos-date-first")
   Tira semanal navegable + chips de día; las horas del día elegido se muestran
   en su panel. Reusa los tokens del design system (--l-*).
   ============================================================================ */
.l-huecos-nav {
    min-width: 40px;
    padding: 0.35rem 0.7rem;
    line-height: 1;
    font-size: 1.1rem;
}
.l-huecos-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
}
.l-huecos-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.25rem 0.6rem;
    border: 1px solid var(--l-border);
    border-radius: var(--l-radius);
    background: #fff;
    color: var(--l-heading);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}
.l-huecos-dia:hover {
    border-color: var(--l-primary-soft);
    box-shadow: var(--l-shadow);
}
.l-huecos-dia-dow {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--l-muted-text);
    letter-spacing: 0.5px;
}
.l-huecos-dia-num {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
}
.l-huecos-dia-punto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--l-success);
    margin-top: 0.1rem;
}
/* Día seleccionado: fondo primario, texto blanco. */
.l-huecos-dia-sel {
    background: var(--l-primary-dark);
    border-color: var(--l-primary-dark);
    color: #fff;
}
.l-huecos-dia-sel .l-huecos-dia-dow { color: rgba(255,255,255,0.8); }
.l-huecos-dia-sel .l-huecos-dia-punto { background: #fff; }
/* Día sin disponibilidad: atenuado, no clicable. */
.l-huecos-dia-off {
    background: var(--l-bg-soft);
    color: var(--l-muted);
    cursor: default;
    opacity: 0.55;
}
.l-huecos-dia-off:hover { border-color: var(--l-border); box-shadow: none; }
.l-huecos-dia:disabled { pointer-events: none; }

@media (max-width: 575.98px) {
    .l-huecos-dia { padding: 0.4rem 0.1rem 0.5rem; }
    .l-huecos-dia-num { font-size: 0.95rem; }
    .l-huecos-dia-dow { font-size: 0.65rem; }
}

/* Grilla de horas del día elegido: columnas regulares para que TODOS los chips
   queden alineados vertical y horizontalmente (antes con flex-wrap se escalonaban). */
.l-huecos-horas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 0.5rem;
}
/* Cada hora es ahora un enlace <a class="btn l-huecos-hora"> (antes un <form> con el .btn
   dentro, change "portal-confirmar-cita"): el propio chip es el .btn y ocupa el 100% de su
   celda de la grilla para que todos queden alineados. */
.l-huecos-hora {
    margin: 0;
    width: 100%;
    padding: 0.45rem 0.4rem;
    text-align: center;
}
@media (max-width: 575.98px) {
    .l-huecos-horas { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.4rem; }
    /* Portal en móvil: el banner l-page-header (padding 9rem/6rem) empujaba la tarjeta demasiado abajo.
       Se reduce el alto vertical en pantallas angostas (no afecta desktop). */
    .l-page-header { padding: 6.5rem 0 3rem; }
}

/* ============================================================================
   Portal · cabecera y footer propios (change "portal-chrome")
   Cabecera transparente montada sobre el banner l-page-header (logo blanco);
   footer sencillo. Reusa los tokens del design system.
   ============================================================================ */


/* El portal ocupa toda la altura para que el footer quede abajo aunque el
   contenido sea corto (tarjetas de login/código). Los hijos directos van a
   width:100% para que el flex-column no les rompa el ancho (si no, .container
   se encoge y el contenido se va a la izquierda). */
.l-portal-body { display: flex; flex-direction: column; min-height: 100vh; }
.l-portal-body > .l-page-header,
.l-portal-body > section,
.l-portal-body > .l-footer { width: 100%; }
.l-portal-body > section { flex: 1 0 auto; }
.l-portal-body > .l-footer { margin-top: auto; }