/* ═══════════════════════════════════════════════════════════════════
   SINTIA — Estilos holográficos personalizados (v2 · rediseño CRO)
   Complementa Tailwind CDN: efectos que requieren keyframes, blend
   modes y pseudo-elementos que las utilidades no cubren.

   Cambios v2 (según diagnóstico UX / WCAG 2.2):
   · Texto secundario a ≥ 7.5:1 de contraste (--ink).
   · Bordes de campos de formulario a ≥ 3:1 (antes 1.4:1).
   · Tarjetas por región común para pasos y pilares.
   · Plan "Pro" como anomalía visual (escala + badge + CTA saliente).
   · Zonas de CTA aisladas, sin distractores en 80 px a la redonda.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --medic-500: #3b82f6;
  --medic-600: #2563eb;
  --medic-900: #1e3a8a;
  --holo-cyan: #22d3ee;
  --holo-glow: #7dd3fc;
  --ink: #b7c3d4;                /* texto secundario · 10:1 sobre fondo */
  --ink-strong: #e2e8f0;         /* texto principal · 14:1 */
  --field-border: #5b8fc4;       /* bordes de campo · 5.2:1 */
  --panel-bg: rgba(13, 27, 62, 0.55);
  --panel-border: rgba(125, 211, 252, 0.18);
  /* WhatsApp (tema oscuro) */
  --wa-bg: #0b141a;
  --wa-header: #202c33;
  --wa-bubble-in: #202c33;
  --wa-bubble-out: #005c4b;
  --wa-text: #e9edef;
  --wa-time: #8696a0;
  --wa-check: #53bdeb;
}

html { scroll-behavior: smooth; }

body {
  background-color: #0b1533;
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(29, 78, 216, 0.22), transparent 55%),
    radial-gradient(ellipse at 90% 110%, rgba(14, 116, 144, 0.18), transparent 55%);
}

#particle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.content-layer { position: relative; z-index: 10; }

/* ─────────────── Auroras atmosféricas de fondo ─────────────── */
.aurora {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.28;
  mix-blend-mode: screen;
  animation: aurora-drift 24s ease-in-out infinite alternate;
}
.aurora-1 {
  width: 45vw; height: 45vw;
  top: -15%; left: -10%;
  background: radial-gradient(circle, #1d4ed8 0%, transparent 70%);
}
.aurora-2 {
  width: 38vw; height: 38vw;
  bottom: -12%; right: -8%;
  background: radial-gradient(circle, #0e7490 0%, transparent 70%);
  animation-delay: -8s;
}
.aurora-3 {
  width: 30vw; height: 30vw;
  top: 40%; left: 55%;
  background: radial-gradient(circle, #4338ca 0%, transparent 70%);
  opacity: 0.18;
  animation-delay: -16s;
}
@keyframes aurora-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(4vw, -3vh) scale(1.12); }
  100% { transform: translate(-3vw, 4vh) scale(0.95); }
}

/* ─────────────── Header ─────────────── */
.site-header {
  background: rgba(11, 21, 51, 0.8);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(125, 211, 252, 0.12);
}
.nav-link {
  color: var(--ink-strong);
  transition: color 0.25s ease;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--holo-cyan);
  transition: width 0.3s ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { width: 100%; }

/* ─────────────── Tipografía de apoyo ─────────────── */
.eyebrow {
  color: var(--holo-cyan);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

/* Viñetas cortas con palabra clave en negrita (slashed text) */
.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0 0 3rem;
  display: grid;
  gap: 0.9rem;
}

/* Tarjeta del fundador: foto real como ancla visual */
.holo-card.founder-card {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
}
.founder-photo {
  flex-shrink: 0;
  width: 11rem;
  min-height: 13rem;
  object-fit: cover;
  object-position: 50% 18%;
  border-right: 1px solid var(--panel-border);
}
.founder-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 1.75rem;
}
@media (max-width: 480px) {
  .founder-card { flex-direction: column; }
  .founder-photo { width: 100%; height: 15rem; min-height: 0; border-right: 0; border-bottom: 1px solid var(--panel-border); object-position: 50% 22%; }
}

/* Pilares de marca: fila horizontal icono + texto (región común) */
.pillar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
}
.pillar-row .pillar-icon {
  flex-shrink: 0;
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.3);
}
.pillar-row h3 { color: #fff; font-weight: 700; font-size: 0.95rem; }
.pillar-row p { color: var(--ink); font-size: 0.85rem; line-height: 1.45; margin-top: 0.15rem; }
.bullet-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-strong);
  line-height: 1.55;
}
.bullet-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 10px; height: 10px;
  border-radius: 9999px;
  background: var(--holo-cyan);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
}
.bullet-list strong { color: #fff; }

/* Franja de confianza del hero: una sola línea */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0;
  color: var(--ink);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.trust-strip span { padding: 0 1.1rem; }
.trust-strip span + span { border-left: 1px solid rgba(125, 211, 252, 0.3); }
@media (max-width: 640px) {
  .trust-strip { flex-direction: column; align-items: center; gap: 0.4rem; }
  .trust-strip span + span { border-left: 0; }
}

/* Zona de CTA aislada: aire mínimo de 80 px sin distractores */
.cta-zone {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  padding: 0.5rem 0;
}

/* ─────────────── Botones ─────────────── */
.btn-holo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border-radius: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 1px solid rgba(147, 197, 253, 0.45);
  box-shadow: 0 4px 20px -4px rgba(37, 99, 235, 0.65);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-align: center;
}
.btn-holo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px -4px rgba(34, 211, 238, 0.55);
  border-color: var(--holo-cyan);
}
.btn-holo:active { transform: translateY(0); }
.btn-holo:focus-visible, .btn-ghost:focus-visible, .nav-link:focus-visible {
  outline: 2px solid var(--holo-cyan);
  outline-offset: 3px;
}

/* Las utilidades de Tailwind v4 viven en @layer y pierden contra estas
   reglas: respetar explícitamente `hidden` y `md:inline-flex` en botones. */
.btn-holo.hidden, .btn-ghost.hidden { display: none; }
@media (min-width: 768px) {
  .btn-holo.md\:inline-flex, .btn-ghost.md\:inline-flex { display: inline-flex; }
}
@media (min-width: 1024px) {
  .btn-holo.lg\:inline-flex, .btn-ghost.lg\:inline-flex { display: inline-flex; }
}

.btn-lg {
  padding: 1rem 2.1rem;
  font-size: 1.05rem;
  border-radius: 1rem;
}

.btn-cta-hero {
  background: linear-gradient(135deg, #06b6d4 0%, #2563eb 55%, #1d4ed8 100%);
  border-color: rgba(165, 243, 252, 0.75);
  box-shadow: 0 0 32px -4px rgba(34, 211, 238, 0.65), 0 8px 24px -6px rgba(37, 99, 235, 0.8);
}
.btn-cta-hero:hover {
  box-shadow: 0 0 42px -2px rgba(34, 211, 238, 0.85), 0 12px 32px -6px rgba(37, 99, 235, 0.9);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border-radius: 0.9rem;
  font-weight: 600;
  color: #e0f2fe;
  background: rgba(30, 58, 138, 0.3);
  border: 1px solid rgba(125, 211, 252, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-align: center;
}
.btn-ghost:hover {
  border-color: var(--holo-cyan);
  color: #fff;
  box-shadow: 0 0 20px -4px rgba(34, 211, 238, 0.5);
  transform: translateY(-2px);
}

/* ─────────────── Tarjetas holográficas ─────────────── */
.holo-card {
  position: relative;
  display: block;
  background: var(--panel-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--panel-border);
  border-radius: 1.25rem;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.08),
    0 20px 50px -15px rgba(2, 8, 30, 0.8),
    inset 0 1px 0 rgba(125, 211, 252, 0.12);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.holo-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.12),
    0 25px 60px -15px rgba(2, 8, 30, 0.9),
    0 0 50px -15px rgba(34, 211, 238, 0.35),
    inset 0 1px 0 rgba(125, 211, 252, 0.15);
}

/* Tarjeta de característica: icono + título en fila + descripción concisa */
.feature-card { padding: 1.45rem 1.6rem; }
.feature-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
}
.feature-card h3 {
  color: #fff;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.3;
  margin: 0;
}
.feature-card p {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.5;
}
.feature-icon {
  flex-shrink: 0;
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 0;
  background-image: linear-gradient(135deg, var(--tw-gradient-from, rgba(34,211,238,0.3)), rgba(37, 99, 235, 0.3));
  border: 1px solid rgba(125, 211, 252, 0.35);
}

/* Tarjeta de paso: número + título + una línea (región común) */
.step-card { padding: 1.75rem; }
.step-card h3 {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 1rem 0 0.5rem;
}
.step-card p {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
}
.step-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: #a5f3fc;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 14px -4px rgba(34, 211, 238, 0.4);
}

/* Panel HUD con esquinas */
.hud-panel {
  position: relative;
  background: rgba(13, 27, 62, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(125, 211, 252, 0.15);
  border-radius: 1rem;
}
.hud-corners::before,
.hud-corners::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--holo-cyan);
  border-style: solid;
  opacity: 0.7;
}
.hud-corners::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
  border-top-left-radius: 0.5rem;
}
.hud-corners::after {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
  border-bottom-right-radius: 0.5rem;
}

.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: dot-blink 1.6s ease-in-out infinite;
}
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.avatar-glow { box-shadow: 0 0 18px -4px rgba(34, 211, 238, 0.5); }
.status-pulse { animation: status-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes status-ping {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}

/* ─────────────── Chips holográficos flotantes (Hero) ─────────────── */
.holo-chip {
  background: rgba(13, 27, 62, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 1rem;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 10px 40px -10px rgba(2, 8, 30, 0.65), inset 0 1px 0 rgba(125, 211, 252, 0.08);
}
.float-slow   { animation: float-y 7s ease-in-out infinite; }
.float-slower { animation: float-y 10s ease-in-out infinite reverse; }
@keyframes float-y {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50%      { transform: translateY(-14px) rotate(0.5deg); }
}
.holo-dot {
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: dot-blink 1.6s ease-in-out infinite;
}
.ekg-line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: ekg-draw 3.5s linear infinite;
  filter: drop-shadow(0 0 3px var(--holo-cyan));
}
@keyframes ekg-draw {
  0%   { stroke-dashoffset: 300; }
  70%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -300; }
}
.holo-ring {
  width: 110px; height: 110px;
  border-radius: 9999px;
  border: 1px dashed rgba(125, 211, 252, 0.25);
  animation: ring-spin 30s linear infinite;
}
.holo-ring::after {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: var(--holo-cyan);
  box-shadow: 0 0 10px var(--holo-cyan);
}
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

/* ─────────────── Aparición al hacer scroll ─────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ═══════════════════════════════════════════════════════════════════
   TELÉFONO CON DEMO DE WHATSAPP
   ═══════════════════════════════════════════════════════════════════ */
.phone-frame {
  position: relative;
  width: 340px;
  max-width: 90vw;
  border-radius: 2.6rem;
  padding: 10px;
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 1px solid rgba(125, 211, 252, 0.25);
  box-shadow:
    0 0 0 1px rgba(2, 8, 30, 0.9),
    0 30px 80px -20px rgba(2, 8, 30, 0.95),
    0 0 90px -20px rgba(34, 211, 238, 0.35),
    inset 0 1px 0 rgba(125, 211, 252, 0.15);
}
.phone-notch {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 22px;
  background: #020617;
  border-radius: 9999px;
  z-index: 20;
}
.phone-screen {
  position: relative;
  height: 620px;
  max-height: 72vh;
  border-radius: 2rem;
  overflow: hidden;
  background: var(--wa-bg);
  display: flex;
  flex-direction: column;
}

/* Cabecera estilo WhatsApp */
.wa-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 34px 14px 10px;
  background: var(--wa-header);
  flex-shrink: 0;
}
.wa-avatar {
  width: 38px; height: 38px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #22d3ee, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #04121f;
  font-size: 15px;
  flex-shrink: 0;
}
.wa-name { color: var(--wa-text); font-size: 14.5px; font-weight: 600; line-height: 1.15; }
.wa-status { color: #34d399; font-size: 11.5px; }

/* Fondo del hilo (doodle sutil) */
.wa-thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: var(--wa-bg);
  background-image: radial-gradient(rgba(134, 150, 160, 0.055) 1px, transparent 1.4px);
  background-size: 22px 22px;
  scrollbar-width: none;
}
.wa-thread::-webkit-scrollbar { display: none; }

.wa-day {
  align-self: center;
  background: #1c2730;
  color: var(--wa-time);
  font-size: 10.5px;
  padding: 4px 10px;
  border-radius: 8px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wa-secure {
  align-self: center;
  background: rgba(24, 34, 41, 0.9);
  color: #ffd279;
  font-size: 10px;
  padding: 5px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  text-align: center;
  line-height: 1.4;
  max-width: 85%;
}

/* Burbujas */
.wa-msg {
  position: relative;
  max-width: 84%;
  padding: 7px 10px 6px;
  border-radius: 10px;
  font-size: 13.3px;
  line-height: 1.45;
  color: var(--wa-text);
  white-space: pre-line;
  animation: wa-msg-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
@keyframes wa-msg-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wa-msg.in {
  align-self: flex-start;
  background: var(--wa-bubble-in);
  border-top-left-radius: 2px;
}
.wa-msg.out {
  align-self: flex-end;
  background: var(--wa-bubble-out);
  border-top-right-radius: 2px;
}
.wa-meta {
  float: right;
  margin: 8px 0 -4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--wa-time);
  white-space: nowrap;
}
.wa-check { color: var(--wa-check); font-size: 11px; letter-spacing: -2px; }

/* "escribiendo…" dentro del hilo */
.wa-typing {
  align-self: flex-start;
  background: var(--wa-bubble-in);
  border-radius: 10px;
  border-top-left-radius: 2px;
  padding: 11px 14px;
  display: inline-flex;
  gap: 4px;
  animation: wa-msg-in 0.25s ease both;
}
.wa-typing span {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--wa-time);
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.wa-typing span:nth-child(2) { animation-delay: 0.15s; }
.wa-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* Barra "demo en vivo" sobre el teléfono */
.demo-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(2, 8, 30, 0.7);
  border: 1px solid rgba(125, 211, 252, 0.3);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #cffafe;
}
.rec-dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: #f87171;
  box-shadow: 0 0 8px #f87171;
  animation: dot-blink 1.1s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   FORMULARIO — WCAG 2.2: bordes ≥ 3:1, etiquetas ≥ 7.5:1
   ═══════════════════════════════════════════════════════════════════ */
.field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-strong);
  margin-bottom: 0.45rem;
}
.holo-field {
  width: 100%;
  background: rgba(7, 14, 38, 0.75);
  border: 1.5px solid var(--field-border);
  border-radius: 0.8rem;
  padding: 0.85rem 1rem;
  color: #f8fafc;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.holo-field::placeholder { color: #94a3b8; opacity: 1; }
.holo-field:focus {
  border-color: var(--holo-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2), 0 0 24px -8px rgba(34, 211, 238, 0.4);
}
select.holo-field option { background: #0b1533; color: #f1f5f9; }

/* ═══════════════════════════════════════════════════════════════════
   BOTÓN FLOTANTE (FAB) — inferior derecho
   ═══════════════════════════════════════════════════════════════════ */
.fab-container {
  /* Altura libre sobre el borde inferior. Netlify incrusta su insignia
     "Powered by Netlify" en esa misma esquina, así que el boton se eleva
     para no quedar debajo. En un dominio propio sin insignia, basta con
     devolver esta variable a 24px. */
  --fab-bottom: 24px;

  position: fixed;
  bottom: var(--fab-bottom);
  right: 24px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  /* La caja del contenedor es mucho mas alta y ancha que el boton visible,
     porque reserva sitio a las opciones ocultas. Sin esto se traga el puntero
     sobre el pie de pagina y deja muertos los enlaces de esa esquina. */
  pointer-events: none;
}
.fab-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #22d3ee, #2563eb);
  color: #04121f;
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid rgba(186, 230, 253, 0.5);
  box-shadow: 0 10px 30px -8px rgba(34, 211, 238, 0.6);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}
@media (max-width: 640px) {
  .fab-container { --fab-bottom: 82px; }
  .fab-main { padding: 14px; }
  .fab-label { display: none; }
}
.fab-main:hover { transform: translateY(-3px) scale(1.03); }
.fab-main:active { transform: translateY(0) scale(0.98); }
.fab-main .fab-icon { transition: transform 0.3s ease; }
.fab-container.open .fab-main .fab-icon { transform: rotate(135deg); }

.fab-options {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.fab-container.open .fab-options {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fab-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border-radius: 9999px;
  background: rgba(13, 27, 62, 0.95);
  border: 1px solid rgba(125, 211, 252, 0.3);
  backdrop-filter: blur(12px);
  color: #f1f5f9;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(2, 8, 30, 0.9);
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}
.fab-option:hover {
  border-color: var(--holo-cyan);
  color: #fff;
  transform: translateX(4px);
  box-shadow: 0 0 24px -6px rgba(34, 211, 238, 0.5);
}
.fab-badge {
  width: 30px; height: 30px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.plan-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(147, 197, 253, 0.75);
  margin-bottom: 0.45rem;
}
.plan-card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  position: relative;
}
.plan-name {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}
.plan-ideal {
  color: var(--ink);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
/* Anomalía visual: el plan recomendado es más grande y más brillante */
.plan-featured {
  border-color: rgba(34, 211, 238, 0.6);
  background: rgba(16, 34, 80, 0.7);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.2),
    0 30px 70px -15px rgba(2, 8, 30, 0.95),
    0 0 70px -10px rgba(34, 211, 238, 0.5),
    inset 0 1px 0 rgba(125, 211, 252, 0.25);
}
@media (min-width: 1024px) {
  .plan-featured { transform: scale(1.06); z-index: 1; padding: 2.5rem 2.25rem; }
  .plan-featured:hover { transform: scale(1.06) translateY(-4px); }
}
.plan-featured .plan-name { font-size: 1.85rem; }
.plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 16px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #04121f;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  box-shadow: 0 6px 18px -6px rgba(34, 211, 238, 0.7);
}
.plan-check {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 0.8rem;
}
.plan-check li {
  position: relative;
  padding-left: 1.8rem;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.5;
}
.plan-check li strong { color: #fff; font-weight: 600; }
.plan-check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 19px; height: 19px;
  border-radius: 9999px;
  background: rgba(34, 211, 238, 0.15);
  border: 1px solid rgba(34, 211, 238, 0.45);
  color: #a5f3fc;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-check li.plan-inherit {
  color: #bae6fd;
  font-weight: 600;
}
.plan-check li.plan-inherit::before {
  content: '+';
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════
   PLANES v3 (Plantilla luminosa blanca + Premium resaltado + Banner inferior)
   ═══════════════════════════════════════════════════════════════════ */
.plan-v3-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 2.5px solid #7dd3fc;
  border-radius: 1.5rem;
  padding: 2.1rem 1.75rem 1.15rem;
  position: relative;
  color: #09152f;
  box-shadow:
    0 22px 55px -15px rgba(2, 8, 30, 0.85),
    0 0 32px -6px rgba(56, 189, 248, 0.45);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.plan-v3-card:hover {
  transform: translateY(-5px);
}

/* Plan SintIA Premium (Principal a resaltar: alto contraste luminoso sobre fondo oscuro) */
.plan-v3-premium {
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
  border: 3.5px solid #06b6d4;
  box-shadow:
    0 0 0 2px rgba(103, 232, 249, 0.65),
    0 0 70px -2px rgba(34, 211, 238, 0.85),
    0 30px 70px -12px rgba(2, 8, 30, 0.95);
  z-index: 3;
}
@media (min-width: 768px) {
  .plan-v3-premium {
    transform: translateY(-16px) scale(1.045);
  }
  .plan-v3-premium:hover {
    transform: translateY(-20px) scale(1.045);
  }
}

/* Burbuja MÁS POPULAR centrada exactamente sobre la línea superior del contorno */
.plan-v3-popular {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 5;
  padding: 0.42rem 1.55rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, #0284c7 0%, #06b6d4 50%, #0284c7 100%);
  border: 2px solid #a5f3fc;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 6px 22px -2px rgba(6, 182, 212, 0.85);
}

.plan-v3-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.15rem;
}

.plan-v3-title {
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.12;
  color: #050e26;
  letter-spacing: -0.025em;
  margin-bottom: 0.45rem;
}

.plan-v3-mes {
  display: inline-block;
  padding: 0.2rem 1.15rem;
  border-radius: 9999px;
  background: #cbe8fb;
  color: #13316c;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.plan-v3-mes-premium {
  background: linear-gradient(90deg, #bae6fd, #7dd3fc);
  color: #062152;
}

.plan-v3-price {
  display: inline-block;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.08;
  color: #132a63;
  letter-spacing: -0.03em;
  text-decoration: none;
  margin-bottom: 0.3rem;
  transition: transform 0.2s ease, color 0.2s ease;
}
.plan-v3-price:hover {
  transform: scale(1.03);
  color: #0284c7;
}
.plan-v3-price-premium {
  color: #071f56;
  font-size: 2.9rem;
}

.plan-v3-fee {
  font-size: 0.88rem;
  font-weight: 500;
  color: #334e7b;
  margin: 0;
}

.plan-v3-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.9rem 0.25rem 1.25rem;
  border-top: 1px solid rgba(14, 165, 233, 0.2);
}

/* Texto "Todo lo que incluye la edición..." en tamaño de fuente un poco mayor */
.plan-v3-includes {
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.3;
  color: #07193f;
  margin: 0 0 0.35rem;
}

/* Descripción de cada plan justo debajo */
.plan-v3-desc {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.42;
  color: #274472;
  margin: 0 0 1.1rem;
}

.plan-v3-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.72rem;
}
.plan-v3-list li {
  position: relative;
  padding-left: 1.85rem;
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.38;
  color: #0b1730;
}
.plan-v3-list li::before {
  content: '';
  position: absolute;
  left: 0.1rem;
  top: 0.28em;
  width: 1.05rem;
  height: 0.58rem;
  border-left: 2.8px solid #0b72e7;
  border-bottom: 2.8px solid #0b72e7;
  transform: rotate(-45deg);
}

/* Banner inferior de cada tarjeta (plantilla turquesa/azul con desborde lateral) */
.plan-v3-promo {
  margin-top: auto;
  width: calc(100% + 2.7rem);
  margin-left: -1.35rem;
  margin-right: -1.35rem;
  padding: 0.95rem 1rem;
  border-radius: 0.95rem;
  background: linear-gradient(90deg, #1ef1f9 0%, #2ac7f6 52%, #2899f5 100%);
  box-shadow: 0 10px 24px -6px rgba(14, 165, 233, 0.55);
  text-align: center;
  text-decoration: none;
  color: #06183d;
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.plan-v3-promo:hover {
  transform: scale(1.02);
  box-shadow: 0 14px 30px -6px rgba(14, 165, 233, 0.75);
}
.plan-v3-promo-premium {
  background: linear-gradient(90deg, #14f1ff 0%, #1fc8f8 50%, #1d8cf8 100%);
  box-shadow: 0 12px 28px -5px rgba(6, 182, 212, 0.7);
}

.plan-v3-promo-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: #081c45;
  margin: 0 0 0.15rem;
}
.plan-v3-promo-top strong {
  font-weight: 800;
  color: #04102b;
}
.plan-v3-gift-svg {
  width: 1.05rem;
  height: 1.05rem;
  color: #0b72e7;
  flex-shrink: 0;
}
.plan-v3-promo-main {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.18;
  color: #04102b;
  letter-spacing: -0.015em;
  margin: 0 0 0.15rem;
}
.plan-v3-promo-sub {
  font-size: 0.8rem;
  font-weight: 500;
  color: #0b2252;
  margin: 0;
}

/* Tarjeta compacta de paso para Preconsulta (alta claridad visual) */
.pre-step-card {
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(13, 27, 62, 0.75);
  border: 1px solid rgba(125, 211, 252, 0.3);
}
.pre-step-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.65rem;
}
.pre-step-card h3 {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.06rem;
  line-height: 1.25;
  margin: 0;
}
.pre-step-card p {
  color: #dbeafe;
  font-size: 0.93rem;
  line-height: 1.48;
  margin: 0;
}

#preconsulta .doc-card {
  background: linear-gradient(165deg, rgba(12, 26, 62, 0.96) 0%, rgba(7, 16, 40, 0.96) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.48);
  border-radius: 1.25rem;
  padding: 1.6rem 1.7rem;
  box-shadow:
    0 25px 60px -15px rgba(2, 8, 30, 0.92),
    0 0 35px -10px rgba(34, 211, 238, 0.32),
    inset 0 1px 0 rgba(165, 243, 252, 0.22);
}
#preconsulta .doc-head {
  padding-bottom: 0.95rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid rgba(125, 211, 252, 0.22);
}
#preconsulta .doc-row {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(125, 211, 252, 0.12);
  font-size: 0.95rem;
  color: #f1f5f9;
  font-weight: 600;
}
#preconsulta .doc-foot {
  margin-top: 0.75rem;
  padding: 0.8rem 1rem;
  border-radius: 0.85rem;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.3);
  font-size: 0.86rem;
  color: #e2e8f0;
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════
   CÓMO FUNCIONA v2 (De la activación a tu agente funcionando)
   ═══════════════════════════════════════════════════════════════════ */
.como-title-grad {
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 36%, #3be8ff 64%, #2088ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.como-v2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.15rem 1.45rem 2rem;
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 15% 10%, rgba(59, 130, 246, 0.22), transparent 50%),
    radial-gradient(circle at 85% 90%, rgba(37, 99, 235, 0.18), transparent 50%),
    linear-gradient(165deg, rgba(13, 27, 62, 0.78) 0%, rgba(11, 21, 51, 0.88) 100%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1.5px solid rgba(96, 165, 250, 0.45);
  box-shadow:
    0 22px 50px -15px rgba(2, 8, 30, 0.9),
    0 0 26px -8px rgba(37, 99, 235, 0.35),
    inset 0 1px 0 rgba(147, 197, 253, 0.22);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.como-v2-card:hover {
  transform: translateY(-5px);
  border-color: rgba(56, 189, 248, 0.75);
  box-shadow:
    0 26px 60px -15px rgba(2, 8, 30, 0.95),
    0 0 38px -6px rgba(59, 130, 246, 0.5),
    inset 0 1px 0 rgba(147, 197, 253, 0.3);
}

.como-v2-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.como-svg-cyan  { filter: drop-shadow(0 0 12px rgba(34, 242, 255, 0.8)); }
.como-svg-brain { filter: drop-shadow(0 0 12px rgba(192, 88, 255, 0.7)); }
.como-svg-mint  { filter: drop-shadow(0 0 12px rgba(34, 245, 184, 0.75)); }
.como-svg-blue  { filter: drop-shadow(0 0 12px rgba(56, 182, 255, 0.8)); }

.como-v2-title {
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.22;
  margin: 0 0 0.9rem;
  letter-spacing: -0.015em;
}

.como-v2-desc {
  color: #9cb8d9;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.como-v2-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.6rem;
  border-radius: 0.9rem;
  background: linear-gradient(180deg, #1e88f7 0%, #1565d8 100%);
  border: 1.5px solid #60a5fa;
  color: #ffffff;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow:
    0 0 32px -4px rgba(30, 136, 247, 0.75),
    0 12px 26px -8px rgba(2, 8, 30, 0.85);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.como-v2-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 42px -2px rgba(56, 189, 248, 0.9),
    0 16px 32px -8px rgba(2, 8, 30, 0.9);
}

/* ═══════════════════════════════════════════════════════════════════
   SOLICITAR DEMOSTRACIÓN (Optimizado para Clarity Score y CTAs)
   ═══════════════════════════════════════════════════════════════════ */
.demo-form-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.2), transparent 55%),
    linear-gradient(165deg, rgba(13, 27, 62, 0.88) 0%, rgba(11, 21, 51, 0.94) 100%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1.5px solid rgba(96, 165, 250, 0.5);
  border-radius: 1.5rem;
  padding: 2rem 1.75rem 2.15rem;
  box-shadow:
    0 28px 65px -15px rgba(2, 8, 30, 0.95),
    0 0 38px -10px rgba(37, 99, 235, 0.4),
    inset 0 1px 0 rgba(147, 197, 253, 0.25);
}
@media (min-width: 1024px) {
  .demo-form-card {
    padding: 2.35rem 2.75rem 2.5rem;
  }
}

#solicitar-demo .holo-field {
  background: rgba(15, 31, 71, 0.85);
  border: 1.5px solid rgba(125, 211, 252, 0.42);
  border-radius: 0.85rem;
  padding: 0.78rem 1rem;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
}
#solicitar-demo .holo-field::placeholder {
  color: #cbd5e1;
}

.demo-cta-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 0.85rem;
  padding-top: 0.65rem;
}
@media (min-width: 640px) {
  .demo-cta-bar {
    grid-template-columns: 1.15fr 1fr;
    gap: 1.1rem;
  }
}

.demo-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.6rem;
  border-radius: 0.95rem;
  background: linear-gradient(90deg, #1ef1f9 0%, #2ac7f6 50%, #2088ff 100%);
  border: 2px solid #a5f3fc;
  color: #04102b;
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow:
    0 0 36px -2px rgba(34, 211, 238, 0.8),
    0 12px 24px -6px rgba(2, 8, 30, 0.85);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.demo-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 46px 0 rgba(34, 211, 238, 0.95),
    0 16px 30px -6px rgba(2, 8, 30, 0.9);
}

.demo-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  border-radius: 0.95rem;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border: 2px solid #93c5fd;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow:
    0 0 30px -4px rgba(59, 130, 246, 0.7),
    0 12px 24px -6px rgba(2, 8, 30, 0.85);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.demo-btn-secondary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 40px -2px rgba(96, 165, 250, 0.9),
    0 16px 30px -6px rgba(2, 8, 30, 0.9);
}

/* ═══════════════════════════════════════════════════════════════════
   HERO: Logotipo oficial fluido + Lema resaltado "De médicos, para médicos"
   ═══════════════════════════════════════════════════════════════════ */
.hero-logo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1.15rem;
  max-width: 28rem;
}
.hero-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -15% -10%;
  background: radial-gradient(ellipse at 50% 50%, rgba(34, 211, 238, 0.22) 0%, rgba(37, 99, 235, 0.14) 45%, transparent 72%);
  filter: blur(22px);
  pointer-events: none;
  z-index: 0;
}
.hero-brand-logo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 25.5rem;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 28px rgba(6, 182, 212, 0.35));
}

.hero-medic-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.65rem 1.65rem;
  margin-bottom: 1.5rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgba(14, 42, 98, 0.92) 0%, rgba(20, 62, 138, 0.92) 50%, rgba(14, 42, 98, 0.92) 100%);
  border: 2px solid rgba(34, 211, 238, 0.75);
  box-shadow:
    0 0 28px -4px rgba(34, 211, 238, 0.55),
    inset 0 1px 0 rgba(165, 243, 252, 0.35);
  color: #ffffff;
  font-size: clamp(0.88rem, 1.6vw, 1.08rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ─────────────── Mockup simplificado de historia clínica ───────── */
.doc-card {
  background: rgba(9, 17, 43, 0.85);
  border: 1px solid rgba(125, 211, 252, 0.25);
  border-radius: 1.1rem;
  padding: 1.6rem 1.7rem;
  box-shadow: 0 25px 60px -15px rgba(2, 8, 30, 0.9), inset 0 1px 0 rgba(125, 211, 252, 0.15);
}
.doc-head {
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(125, 211, 252, 0.18);
}
.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(125, 211, 252, 0.1);
  font-size: 0.95rem;
  color: var(--ink-strong);
  font-weight: 500;
}
.doc-foot {
  padding-top: 1rem;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.5;
}
.doc-chip-ok, .doc-chip-pend {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.doc-chip-ok   { color: #a7f3d0; background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(16, 185, 129, 0.45); }
.doc-chip-pend { color: #fde68a; background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.4); }

/* ─────────────── Scroll fino global ─────────────── */
.chat-scroll { scrollbar-width: thin; scrollbar-color: rgba(59, 130, 246, 0.4) transparent; }
.chat-scroll::-webkit-scrollbar { width: 5px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.5), rgba(34, 211, 238, 0.4));
  border-radius: 9999px;
}

/* ─────────────── Accesibilidad: movimiento reducido ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .aurora, .fab-main, .rec-dot, .pulse-dot { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   GESTIÓN DE CLAVES — modal de cambio, recuperación y reinicio
   Compartido por el acceso, el panel del cliente y el panel maestro.
   ═══════════════════════════════════════════════════════════════════ */

/* Aviso de modo demostración: visible, no decorativo. Debe leerse antes
   de que nadie confíe en este acceso como si fuera una barrera real. */
.demo-flag {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border-radius: 0.8rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fde68a;
  font-size: 0.8rem;
  line-height: 1.5;
}
.demo-flag::before {
  content: '!';
  flex-shrink: 0;
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.1rem;
  border-radius: 9999px;
  background: rgba(245, 158, 11, 0.25);
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fde68a;
  font-weight: 800;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Modal ── */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 5rem 1.25rem 2rem;
  overflow-y: auto;
  background: rgba(2, 8, 30, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.auth-modal.open { display: flex; }
.auth-card {
  width: 100%;
  max-width: 30rem;
  background: rgba(11, 21, 51, 0.97);
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 1.1rem;
  box-shadow: 0 30px 80px -20px rgba(2, 8, 30, 0.95);
  padding: 1.75rem;
}
.auth-card h2 {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
}
.auth-card .auth-sub {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-top: 0.4rem;
}
.auth-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.auth-close {
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(125, 211, 252, 0.3);
  background: transparent;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.auth-close:hover { color: #fff; border-color: var(--holo-cyan); }
.auth-form { display: grid; gap: 1.1rem; }
.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.35rem;
}
.auth-actions .btn-holo, .auth-actions .btn-ghost { flex: 1 1 auto; }

/* ── Mensajes de resultado ── */
.auth-msg {
  border-radius: 0.7rem;
  padding: 0.8rem 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
}
.auth-msg[hidden] { display: none; }
.auth-msg.err { color: #fecdd3; background: rgba(244, 63, 94, 0.12); border: 1px solid rgba(244, 63, 94, 0.4); }
.auth-msg.ok  { color: #a7f3d0; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.4); }

/* ── Caja de código o clave generada ── */
.code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.8rem;
  background: rgba(34, 211, 238, 0.08);
  border: 1px dashed rgba(34, 211, 238, 0.5);
}
.code-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #a5f3fc;
  user-select: all;
}
.code-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

/* Requisitos de la clave, junto al campo */
.pw-hint {
  font-size: 0.76rem;
  color: var(--ink);
  margin-top: 0.4rem;
  line-height: 1.45;
}

/* Barra que obliga a cambiar la clave tras un reinicio del administrador */
.force-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.9rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fde68a;
  font-size: 0.88rem;
  line-height: 1.5;
}
.force-bar strong { color: #fff; }
.force-bar .btn-holo { margin-left: auto; }

/* Enlace discreto bajo el formulario de acceso */
.link-quiet {
  background: none;
  border: 0;
  padding: 0;
  color: #bae6fd;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-quiet:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   PUNTOS SINTIA — barra de redención de la mensualidad
   ═══════════════════════════════════════════════════════════════════ */
.puntos-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.puntos-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.9rem;
  font-weight: 700;
  color: #a5f3fc;
  font-variant-numeric: tabular-nums;
}
.puntos-meta { color: var(--ink); font-size: 0.9rem; }
.puntos-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.puntos-pct.full { color: #6ee7b7; }

.puntos-bar {
  height: 14px;
  border-radius: 9999px;
  background: rgba(11, 21, 51, 0.9);
  border: 1px solid rgba(125, 211, 252, 0.3);
  overflow: hidden;
}
.puntos-bar > span {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #2563eb, #22d3ee);
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.puntos-bar.full > span { background: linear-gradient(90deg, #059669, #34d399); }
.puntos-bar.full { border-color: rgba(52, 211, 153, 0.6); }

.puntos-falta {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.55;
}
.puntos-falta strong { color: #fff; }

.puntos-win {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
  padding: 0.95rem 1.1rem;
  border-radius: 0.8rem;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.45);
}
.puntos-win strong { color: #6ee7b7; font-size: 0.92rem; line-height: 1.45; }
.puntos-win span { color: var(--ink-strong); font-size: 0.84rem; line-height: 1.5; }

/* Desglose de dónde salen los puntos */
.puntos-desglose {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(125, 211, 252, 0.15);
}
.puntos-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.86rem;
  color: var(--ink-strong);
}
.puntos-linea b {
  font-family: 'JetBrains Mono', monospace;
  color: #a5f3fc;
  font-variant-numeric: tabular-nums;
}
.puntos-linea small { display: block; color: var(--ink); font-size: 0.76rem; margin-top: 0.1rem; }

/* Aviso de meta cumplida, arriba del panel del cliente */
.win-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.15rem;
  margin-bottom: 1.5rem;
  border-radius: 0.9rem;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #a7f3d0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.win-bar strong { color: #fff; }
.win-bar .win-actions { margin-left: auto; display: flex; gap: 0.6rem; }