/* =====================================================================================
   Página de presentación (Landing.razor): estructura de secciones y las demostraciones
   animadas. Los estilos base del landing (héroe, botones, tarjetas, pasos, CTA, footer)
   siguen en app.css; aquí va todo lo nuevo. Cada demo es un ciclo de keyframes en CSS
   puro: sin librerías, sin imágenes, y se pausa en reduced-motion.
   ===================================================================================== */


/* El landing es una página de día: siempre clara, aunque el navegador o la persona tengan el
   modo oscuro. Sus tarjetas y demos llevan fondos fijos claros, así que la tinta debe ser
   oscura pase lo que pase. Se redeclaran aquí los tokens claros. */
.landing {
  color: var(--color-text); /* el color se resuelve aquí, no en body, para que en oscuro siga siendo tinta */
  color-scheme: light;
  --color-bg: #eaf0f8;
  --color-surface: #ffffff;
  --color-surface-2: #f4f7fb;
  --color-border: #dbe3ee;
  --color-border-strong: #8a9bb5;
  --color-text: #000000;
  --color-text-muted: #333333;
  --color-text-soft: #5c5c5c;
  --color-primary: #1e3a8a;
  --color-primary-dark: #162c6b;
  --color-primary-light: #dfe6f8;
  --color-primary-ring: rgba(30, 58, 138, .3);
  --color-primary-2: #1e3a8a;
  --grad-primary: #1e3a8a;
  --color-accent: #ffc02e;
  --color-accent-2: #17a34a;
  --sidebar-grad: #1e3a8a;
  --sidebar-texto: rgba(255, 255, 255, .88);
  --sidebar-borde: rgba(255, 255, 255, .2);
  --color-success: #17a34a;
  --color-success-bg: #dcfae4;
  --color-warning: #e07b00;
  --color-warning-bg: #ffeecc;
  --color-danger: #e5342b;
  --color-danger-bg: #ffe2e0;
  --color-info: #162c6b;
  --color-info-bg: #dfe6f8;
  --sec-mi: #1e3a8a;
  --sec-mi-bg: #dfe6f8;
  --sec-trabajo: #0e8a6a;
  --sec-trabajo-bg: #d7f4ec;
  --sec-clientes: #17a34a;
  --sec-clientes-bg: #dcfae4;
  --sec-rrhh: #e06a00;
  --sec-rrhh-bg: #ffe8d1;
  --sec-supervision: #0a9aad;
  --sec-supervision-bg: #d6f6fa;
  --sec-org: #6b7f96;
  --sec-org-bg: #e6eef6;
  --sec-plataforma: #7c5cd6;
  --sec-plataforma-bg: #eae2ff;
  --nota: #fff2c2;
  --nota-tinta: #8a5a00;
  --nota-borde: #ffdf85;
  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --elev-1: 0 2px 4px rgba(22, 56, 79, .06), 0 2px 8px rgba(22, 56, 79, .05);
  --elev-2: 0 4px 10px rgba(22, 56, 79, .07), 0 10px 22px rgba(22, 56, 79, .08);
  --elev-3: 0 8px 18px rgba(22, 56, 79, .09), 0 18px 40px rgba(22, 56, 79, .11);
  --elev-4: 0 14px 32px rgba(22, 56, 79, .16), 0 36px 70px rgba(22, 56, 79, .18);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --transicion: var(--dur-2) var(--ease-out);
  --sidebar-width: 264px;
  --topbar-height: 64px;
  --nav-inferior: 64px;
  --font: "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  /* Títulos: el corte Display de Segoe UI Variable (Windows 11) es más compacto y actual que Segoe UI clásica. */
  --font-titulo: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* ---------- Estructura ---------- */

/* clip (no hidden): recorta lo que asoma por los lados sin crear un contenedor de scroll. */
.landing { overflow-x: clip; }

.landing-links { display: flex; gap: 1.4rem; }
.landing-links a { color: #c3d0f0; font-weight: 600; font-size: .95rem; text-decoration: none; transition: color .2s; }
.landing-links a:hover { color: #fff; }

.landing-hero-doble {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 3rem;
  align-items: center;
  text-align: left;
  min-height: auto;
  /* El fondo oscuro va de borde a borde; el contenido se centra en 1180 px con el relleno. */
  max-width: none;
  padding: 8rem max(2rem, calc((100% - 1180px) / 2)) 7rem;
}
.landing-hero-doble .login-olas { left: -50vw; right: -50vw; }
.landing-hero-texto { max-width: none; }
.landing-etiqueta {
  display: inline-block; margin-bottom: 1.2rem;
  background: rgba(124, 155, 255, .18); color: #c3d0f0;
  border: 1px solid rgba(124, 155, 255, .35);
  border-radius: 999px; padding: .35rem 1rem; font-size: .85rem; font-weight: 600;
}
.landing-acciones-izq { justify-content: flex-start; }
.landing-chips-izq { justify-content: flex-start; }

.landing-kicker { color: #e07b00;
  display: inline-block; margin-bottom: .8rem;
  color: var(--color-primary); font-weight: 700; letter-spacing: .2px; font-size: .95rem;
}
.landing-kicker-claro { color: #b8c8f2; }

.landing-bloque {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}
.landing-bloque-invertido .landing-bloque-texto { order: 2; }
.landing-bloque-invertido .landing-bloque-demo { order: 1; }
.landing-bloque h2 { text-align: left; font-size: 1.9rem; margin-bottom: 1rem; }
.landing-bloque p { color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.7; }
.landing-lista { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-direction: column; gap: .6rem; }
.landing-lista li { color: var(--color-text); line-height: 1.5; padding-left: .2rem; }
.landing-bloque-demo { display: flex; align-items: center; justify-content: center; min-height: 320px; position: relative; }

.landing-centrado { text-align: center; max-width: 820px; margin: 0 auto 2.5rem; }
.landing-centrado h2 { margin-bottom: 1rem; }
.landing-parrafo { color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.7; }

.landing-oscuro { background: #1580cc; }
.landing-oscuro h2, .landing-oscuro .landing-lista li { color: #fff; }
.landing-oscuro p { color: #cbd7f0; }

.landing-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Cuatro pasos en una fila también en pantallas medianas (evita el paso 4 huérfano). */
.landing-pasos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.landing-mini-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem; margin-top: 2.5rem;
}
.landing-mini {
  background: var(--color-surface); border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem; box-shadow: var(--elev-1);
  display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: start;
  transition: transform .25s, box-shadow .25s;
}
.landing-mini:hover { transform: translateY(-4px); box-shadow: var(--elev-3); }
.landing-mini i { font-style: normal; font-size: 1.5rem; grid-row: span 2; }
.landing-mini b { display: block; margin-bottom: .2rem; }
.landing-mini span { color: var(--color-text-muted); font-size: .92rem; line-height: 1.5; }

.landing-func-anim .landing-func-icono { transition: transform .35s cubic-bezier(.2, .8, .2, 1); display: inline-block; }
.landing-func-anim:hover .landing-func-icono { transform: scale(1.25) rotate(-8deg); }

kbd { background: #eef1f7; border: 1px solid #cfd5e3; border-bottom-width: 2px; border-radius: 5px; padding: .05rem .4rem; font-family: inherit; font-size: .9em; }

/* Revelado al hacer scroll: solo cuando JS está activo (landing-js), para que sin JS todo se vea. */
.landing-js .revelar { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.landing-js .revelar.visible { opacity: 1; transform: none; }

/* ---------- Cinta de módulos ---------- */

.landing-cinta { background: #162c6b; overflow: hidden; padding: .9rem 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.landing-cinta-pista { display: flex; gap: 2.5rem; width: max-content; animation: cinta 40s linear infinite; }
.landing-cinta-pista span { color: #fff; font-weight: 600; white-space: nowrap; font-size: .95rem; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Demo héroe: la tarea que se trabaja sola (ciclo 10 s) ---------- */

.landing-hero-demo { position: relative; z-index: 1; animation: aparecer .9s .2s cubic-bezier(.2, .8, .2, 1) both; }
.demo-tarea {
  background: #fff; border-radius: var(--radius); padding: 1.4rem 1.5rem;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
  animation: flotar 6s ease-in-out infinite;
}
@keyframes flotar { 50% { transform: translateY(-8px); } }
.demo-tarea-cab { display: flex; gap: .5rem; font-size: .8rem; font-weight: 600; margin-bottom: .6rem; }
.demo-prioridad { background: #fde7e7; color: #b42318; border-radius: 999px; padding: .15rem .6rem; }
.demo-etiqueta { background: var(--color-primary-light); color: var(--color-primary-dark); border-radius: 999px; padding: .15rem .6rem; }
.demo-hora { margin-left: auto; color: var(--color-text-muted); }
.demo-tarea h4 { margin: 0 0 .9rem; font-size: 1.15rem; }
.demo-pasos { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .55rem; }
.demo-paso { display: flex; align-items: center; gap: .6rem; color: var(--color-text-muted); animation: 10s infinite; }
.demo-check { width: 18px; height: 18px; border: 2px solid #b8c8f2; border-radius: 5px; flex-shrink: 0; color: transparent; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; animation: 10s infinite; }
.demo-check::after { content: '✓'; }
.demo-paso-1 { animation-name: paso-1; } .demo-paso-1 .demo-check { animation-name: check-1; }
@keyframes paso-1 { 0%, 12% { color: var(--color-text-muted); text-decoration: none; } 14%, 90% { color: var(--color-text); text-decoration: line-through; text-decoration-color: #5cc0ff; } 94%, 100% { color: var(--color-text-muted); text-decoration: none; } }
@keyframes check-1 { 0%, 12% { background: transparent; border-color: #b8c8f2; color: transparent; transform: scale(1); } 13% { transform: scale(1.3); } 14%, 90% { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: scale(1); } 94%, 100% { background: transparent; border-color: #b8c8f2; color: transparent; } }
.demo-paso-2 { animation-name: paso-2; } .demo-paso-2 .demo-check { animation-name: check-2; }
@keyframes paso-2 { 0%, 24% { color: var(--color-text-muted); text-decoration: none; } 26%, 90% { color: var(--color-text); text-decoration: line-through; text-decoration-color: #5cc0ff; } 94%, 100% { color: var(--color-text-muted); text-decoration: none; } }
@keyframes check-2 { 0%, 24% { background: transparent; border-color: #b8c8f2; color: transparent; transform: scale(1); } 25% { transform: scale(1.3); } 26%, 90% { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: scale(1); } 94%, 100% { background: transparent; border-color: #b8c8f2; color: transparent; } }
.demo-paso-3 { animation-name: paso-3; } .demo-paso-3 .demo-check { animation-name: check-3; }
@keyframes paso-3 { 0%, 36% { color: var(--color-text-muted); text-decoration: none; } 38%, 90% { color: var(--color-text); text-decoration: line-through; text-decoration-color: #5cc0ff; } 94%, 100% { color: var(--color-text-muted); text-decoration: none; } }
@keyframes check-3 { 0%, 36% { background: transparent; border-color: #b8c8f2; color: transparent; transform: scale(1); } 37% { transform: scale(1.3); } 38%, 90% { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: scale(1); } 94%, 100% { background: transparent; border-color: #b8c8f2; color: transparent; } }
.demo-paso-4 { animation-name: paso-4; } .demo-paso-4 .demo-check { animation-name: check-4; }
@keyframes paso-4 { 0%, 48% { color: var(--color-text-muted); text-decoration: none; } 50%, 90% { color: var(--color-text); text-decoration: line-through; text-decoration-color: #5cc0ff; } 94%, 100% { color: var(--color-text-muted); text-decoration: none; } }
@keyframes check-4 { 0%, 48% { background: transparent; border-color: #b8c8f2; color: transparent; transform: scale(1); } 49% { transform: scale(1.3); } 50%, 90% { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: scale(1); } 94%, 100% { background: transparent; border-color: #b8c8f2; color: transparent; } }
.demo-barra { height: 8px; background: #eef1f7; border-radius: 999px; overflow: hidden; }
.demo-barra-relleno { height: 100%; width: 0; background: var(--color-primary); border-radius: 999px; animation: barra-hero 10s infinite; }
@keyframes barra-hero { 0%, 12% { width: 0; } 14% { width: 25%; } 26% { width: 50%; } 38% { width: 75%; } 50%, 90% { width: 100%; } 94%, 100% { width: 0; } }
.demo-estado { margin-top: .8rem; font-size: .9rem; font-weight: 600; color: #067647; opacity: 0; animation: estado-hero 10s infinite; }
@keyframes estado-hero { 0%, 50% { opacity: 0; transform: translateY(6px); } 55%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.demo-toast {
  position: absolute; right: -1rem; top: -2.2rem;
  background: #fff; border-radius: var(--radius-sm); padding: .7rem .9rem;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35); display: flex; gap: .6rem; align-items: center;
  max-width: 300px; opacity: 0; animation: toast-hero 10s infinite;
}
.demo-toast span { font-size: 1.3rem; }
.demo-toast strong { display: block; font-size: .9rem; }
.demo-toast small { color: var(--color-text-muted); font-size: .8rem; line-height: 1.3; }
@keyframes toast-hero { 0%, 66% { opacity: 0; transform: translateX(40px); } 70%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateX(40px); } }
.demo-evidencia {
  position: absolute; left: -1.5rem; bottom: -1.2rem;
  background: #fff; border-radius: var(--radius-sm); padding: .5rem .8rem; font-size: .85rem; font-weight: 600;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35); opacity: 0; animation: evidencia-hero 10s infinite;
}
@keyframes evidencia-hero { 0%, 26% { opacity: 0; transform: translateY(20px) scale(.9); } 30%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- Demo Mi día ---------- */

.landing-bloque-demo:has(.demo-kpis) { flex-direction: column; }
.demo-kpis, .demo-lista { width: 100%; max-width: 420px; }
.demo-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: .9rem; }
.demo-kpi { background: var(--tinte-kpi, #dfe6f8); border-radius: 16px; padding: .8rem .5rem; text-align: center; }
.demo-kpis > *:nth-child(4n+1) { --tinte-kpi: #ffe2e0; }
.demo-kpis > *:nth-child(4n+2) { --tinte-kpi: #dfe6f8; }
.demo-kpis > *:nth-child(4n+3) { --tinte-kpi: #dcfae4; }
.demo-kpis > *:nth-child(4n+4) { --tinte-kpi: #ffeecc; }
.demo-kpi b { display: block; font-size: 1.6rem; line-height: 1.1; }
.demo-kpi span { font-size: .75rem; color: var(--color-text-muted); font-weight: 600; }
.demo-kpi-rojo { border-top-color: #d92d20; }
.demo-kpi-verde { border-top-color: #12b76a; }
.demo-kpi-ambar { border-top-color: #f79009; }
.demo-lista { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius-sm); box-shadow: var(--elev-1); overflow: hidden; }
.demo-fila { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid #eef1f7; font-size: .92rem; font-weight: 600; animation: fila-entra 8s infinite; }
.demo-fila em { margin-left: auto; font-style: normal; color: var(--color-text-muted); font-weight: 500; font-size: .8rem; }
.demo-fila-1 { animation-delay: 0s; } .demo-fila-2 { animation-delay: .25s; } .demo-fila-3 { animation-delay: .5s; } .demo-fila-4 { animation-delay: .75s; }
@keyframes fila-entra { 0% { opacity: 0; transform: translateX(-16px); } 8%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
.demo-punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.demo-punto.rojo { background: #d92d20; box-shadow: 0 0 0 0 rgba(217, 45, 32, .5); animation: pulso-rojo 1.6s infinite; }
.demo-punto.azul { background: var(--color-primary); }
.demo-punto.verde { background: #12b76a; }
@keyframes pulso-rojo { to { box-shadow: 0 0 0 8px rgba(217, 45, 32, 0); } }

/* ---------- Demo plantillas → calendario (ciclo 7 s) ---------- */

.demo-generador { display: flex; align-items: center; gap: 1rem; }
.demo-plantilla { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius-sm); padding: 1rem 1.1rem; box-shadow: var(--elev-2); width: 180px; animation: flotar 5s ease-in-out infinite; }
.demo-plantilla-icono { font-size: 1.6rem; display: block; margin-bottom: .3rem; }
.demo-plantilla strong { display: block; font-size: .95rem; }
.demo-plantilla small { color: var(--color-text-muted); font-size: .75rem; line-height: 1.4; display: block; margin-top: .3rem; }
.demo-flecha { font-size: 1.6rem; color: var(--color-primary); animation: flecha-pulso 1.4s ease-in-out infinite; }
.demo-flecha-abajo { text-align: center; animation-name: flecha-pulso-y; }
@keyframes flecha-pulso { 50% { transform: translateX(6px); } }
@keyframes flecha-pulso-y { 50% { transform: translateY(6px); } }
.demo-mes { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius-sm); padding: .8rem; box-shadow: var(--elev-2); width: 250px; }
.demo-mes-cab, .demo-mes-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.demo-mes-cab span { text-align: center; font-size: .7rem; color: var(--color-text-muted); font-weight: 700; }
.demo-mes-dias span { position: relative; text-align: center; font-size: .75rem; padding: .35rem 0 .7rem; border-radius: 6px; }
.demo-mes-dias span.domingo { color: #8fb4cc; }
.demo-mes-dias span.feriado { background: #fde7e7; color: #b42318; font-weight: 700; }
.demo-mes-punto { position: absolute; left: 50%; bottom: 4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--color-primary); opacity: 0; transform: scale(0); }
.demo-mes-dias span:not(.domingo):not(.feriado) .demo-mes-punto { animation: punto-mes 7s infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes punto-mes { 0%, 2% { opacity: 0; transform: scale(0); } 6%, 80% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(0); } }
.demo-mes-pie { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .7rem; color: var(--color-text-muted); }
.demo-leyenda { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.demo-leyenda.azul { background: var(--color-primary); } .demo-leyenda.roja { background: #d92d20; margin-left: .4rem; }

/* ---------- Demo ciclo de vida (ciclo 12 s) ---------- */

.demo-ciclo { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin: 1rem auto 0; max-width: 960px; padding: 1.5rem 0; }
.demo-ciclo-linea { position: absolute; left: 10%; right: 10%; top: 2.75rem; height: 4px; background: #dfe4f0; border-radius: 999px; overflow: hidden; }
.demo-ciclo-avance { height: 100%; width: 0; background: var(--color-primary); animation: ciclo-avance 12s infinite; }
@keyframes ciclo-avance { 0% { width: 0; } 20% { width: 25%; } 40% { width: 50%; } 60% { width: 75%; } 80%, 92% { width: 100%; } 100% { width: 0; } }
.demo-ciclo-paso { position: relative; text-align: center; animation: ciclo-paso 12s infinite; }
.demo-ciclo-paso i { font-style: normal; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0 auto .6rem; border-radius: 50%; background: #eef2fb; border: 2px solid #d2dcf3; box-shadow: var(--elev-1); font-size: 1.3rem; border: 3px solid #dfe4f0; transition: border-color .3s; }
.demo-ciclo-paso b { display: block; font-size: .92rem; }
.demo-ciclo-paso small { color: var(--color-text-muted); font-size: .75rem; }
.demo-ciclo-1 { animation-delay: 0s; } .demo-ciclo-2 { animation-delay: 2.4s; } .demo-ciclo-3 { animation-delay: 4.8s; } .demo-ciclo-4 { animation-delay: 7.2s; } .demo-ciclo-5 { animation-delay: 9.6s; }
@keyframes ciclo-paso { 0% { opacity: .65; transform: none; } 2% { opacity: 1; transform: translateY(-6px); } 6% { transform: none; } 20%, 92% { opacity: 1; } 100% { opacity: .65; } }
.demo-ciclo-paso i { animation: ciclo-icono 12s infinite; }
.demo-ciclo-1 i { animation-delay: 0s; } .demo-ciclo-2 i { animation-delay: 2.4s; } .demo-ciclo-3 i { animation-delay: 4.8s; } .demo-ciclo-4 i { animation-delay: 7.2s; } .demo-ciclo-5 i { animation-delay: 9.6s; }
@keyframes ciclo-icono { 0% { border-color: #dfe4f0; } 2%, 92% { border-color: var(--color-primary); } 100% { border-color: #dfe4f0; } }

/* ---------- Demo pegar evidencia (ciclo 6 s) ---------- */

.demo-pegar { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; width: 100%; max-width: 380px; }
.demo-teclas { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--color-text-muted); }
.demo-tecla { font-size: 1.1rem; padding: .4rem .9rem; background: #eef2fb; border: 2px solid #d2dcf3; box-shadow: 0 3px 0 #cfd5e3; border-bottom-width: 1px; animation: tecla 6s infinite; }
.demo-tecla-v { animation-delay: .25s; }
@keyframes tecla { 0%, 8% { transform: none; box-shadow: 0 3px 0 #cfd5e3; } 10%, 14% { transform: translateY(3px); box-shadow: 0 0 0 #cfd5e3; background: var(--color-primary-light); } 16%, 100% { transform: none; box-shadow: 0 3px 0 #cfd5e3; } }
.demo-zona { position: relative; width: 100%; min-height: 200px; border: 2px dashed #cbd7f0; border-radius: var(--radius); background: #eef2fb; border: 2px solid #d2dcf3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.demo-zona-texto { color: var(--color-text-muted); font-weight: 600; animation: zona-texto 6s infinite; }
@keyframes zona-texto { 0%, 14% { opacity: 1; } 20%, 90% { opacity: 0; } 100% { opacity: 1; } }
.demo-captura { position: absolute; inset: 1rem; background: #f6f8fc; border-radius: var(--radius-sm); box-shadow: var(--elev-2); padding: .6rem; opacity: 0; animation: captura 6s infinite; }
@keyframes captura { 0%, 16% { opacity: 0; transform: scale(.7); } 24%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.demo-captura-barra { height: 10px; background: #12172b; border-radius: 4px 4px 0 0; }
.demo-captura-cuerpo { padding: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.demo-captura-cuerpo span { height: 10px; border-radius: 4px; background: #dfe4f0; }
.demo-captura-cuerpo span:nth-child(2) { width: 70%; } .demo-captura-cuerpo span:nth-child(3) { width: 45%; background: var(--color-primary-light); }
.demo-captura small { display: block; font-size: .75rem; color: var(--color-text-muted); font-weight: 600; margin-top: .4rem; }

/* ---------- Demo notificaciones: teléfono + reloj (ciclo 9 s) ---------- */

.landing-oscuro .landing-bloque-demo { gap: 2rem; }
.demo-telefono { width: 230px; height: 440px; border-radius: 36px; background: #1c2340; border: 8px solid #0f1d45; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); position: relative; overflow: hidden; flex-shrink: 0; }
.demo-telefono::before { content: ''; position: absolute; top: 10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: #162c6b; border-radius: 999px; }
.demo-telefono-pantalla { position: absolute; inset: 0; background: #1580cc; padding: 3.2rem .7rem 0; }
.demo-telefono-hora { color: #fff; font-size: 2.6rem; font-weight: 200; text-align: center; margin-bottom: 1rem; letter-spacing: -1px; }
.demo-notif { background: rgba(255, 255, 255, .92); border-radius: 14px; padding: .55rem .65rem; display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; opacity: 0; animation: notif 9s infinite; }
.demo-notif span { width: 28px; height: 28px; border-radius: 8px; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.demo-notif b { display: block; font-size: .72rem; }
.demo-notif small { font-size: .7rem; color: #333; line-height: 1.25; display: block; }
.demo-notif-1 { animation-delay: 0s; } .demo-notif-2 { animation-delay: 1.3s; } .demo-notif-3 { animation-delay: 2.6s; }
@keyframes notif { 0%, 8% { opacity: 0; transform: translateY(-20px) scale(.95); } 14%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
.demo-reloj { text-align: center; color: #cbd7f0; font-size: .85rem; font-weight: 600; }
.demo-reloj-cara { width: 110px; height: 110px; border-radius: 50%; border: 4px solid #3a4780; background: #1c2340; margin: 0 auto .6rem; position: relative; }
.demo-reloj-cara::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; background: #b8c8f2; border-radius: 50%; }
.demo-reloj-aguja { position: absolute; left: 50%; bottom: 50%; width: 3px; height: 42px; margin-left: -1.5px; background: #b8c8f2; border-radius: 2px; transform-origin: bottom center; animation: aguja 9s linear infinite; }
@keyframes aguja { to { transform: rotate(360deg); } }

/* ---------- Demo app en el teléfono (ciclo 7 s) ---------- */

.demo-inicio { width: 230px; height: 400px; border-radius: 36px; background: #1e3a8a; border: 8px solid #0f1d45; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); position: relative; overflow: hidden; padding: 2.6rem 1rem 0; }
.demo-inicio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem .5rem; }
.demo-inicio-grid > span { width: 42px; height: 42px; margin: 0 auto; background: rgba(255, 255, 255, .9); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.demo-inicio-app { position: relative; background: transparent !important; animation: app-aterriza 7s infinite; }
.demo-inicio-app img { width: 42px; height: 42px; border-radius: 11px; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.demo-inicio-app small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); color: #fff; font-size: .6rem; font-weight: 600; margin-top: 2px; white-space: nowrap; }
@keyframes app-aterriza { 0%, 20% { opacity: 0; transform: scale(2.4) translateY(60px); } 32% { opacity: 1; transform: scale(1.15) translateY(0); } 36%, 92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
.demo-inicio-dock { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(255, 255, 255, .25); border-radius: 18px; padding: .5rem; display: flex; justify-content: space-around; font-size: 1.3rem; }
.demo-inicio-flecha { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); color: #fff; font-size: 2rem; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); animation: inicio-flecha 7s infinite; }
@keyframes inicio-flecha { 0%, 18% { opacity: 1; transform: translate(-50%, 0); } 9% { transform: translate(-50%, -8px); } 24%, 100% { opacity: 0; } }

/* ---------- Demo soporte (ciclo 9 s) ---------- */

.demo-soporte { display: flex; flex-direction: column; align-items: center; gap: .6rem; width: 100%; max-width: 340px; }
.demo-correo { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius-sm); padding: .7rem .9rem; box-shadow: var(--elev-2); display: flex; gap: .6rem; align-items: center; width: 100%; animation: correo-llega 9s infinite; }
.demo-correo b { display: block; font-size: .85rem; } .demo-correo small { color: var(--color-text-muted); font-size: .8rem; }
@keyframes correo-llega { 0% { opacity: 0; transform: translateY(-16px); } 8%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.demo-ticket { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius-sm); padding: .9rem 1rem; box-shadow: var(--elev-2); width: 100%; position: relative; opacity: 0; animation: ticket 9s infinite; box-shadow: var(--elev-2), inset 3px 0 0 var(--color-primary); }
@keyframes ticket { 0%, 18% { opacity: 0; transform: translateY(10px); } 26%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.demo-ticket-num { font-family: ui-monospace, monospace; font-size: .75rem; font-weight: 700; color: var(--color-primary); }
.demo-ticket b { display: block; font-size: .95rem; margin: .15rem 0 .25rem; }
.demo-ticket small { color: var(--color-text-muted); font-size: .78rem; }
.demo-ticket-estado { position: absolute; right: .8rem; top: .8rem; background: #d1fadf; color: #067647; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .2rem .6rem; opacity: 0; animation: ticket-estado 9s infinite; }
@keyframes ticket-estado { 0%, 48% { opacity: 0; transform: scale(.7); } 54%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.demo-estrellas { display: flex; gap: .3rem; font-size: 1.7rem; }
.demo-estrellas span { color: #dfe4f0; animation: estrella 9s infinite; }
.demo-estrellas span:nth-child(1) { animation-delay: 0s; } .demo-estrellas span:nth-child(2) { animation-delay: .2s; } .demo-estrellas span:nth-child(3) { animation-delay: .4s; } .demo-estrellas span:nth-child(4) { animation-delay: .6s; } .demo-estrellas span:nth-child(5) { animation-delay: .8s; }
@keyframes estrella { 0%, 62% { color: #dfe4f0; transform: none; } 66% { color: #f5b400; transform: scale(1.4); } 70%, 90% { color: #f5b400; transform: none; } 100% { color: #dfe4f0; } }

/* ---------- Demo carrera + tendencia (ciclo 8 s) ---------- */

.demo-carrera { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--elev-2); width: 100%; max-width: 420px; }
.demo-carrera-fila { display: grid; grid-template-columns: 110px 1fr 42px; align-items: center; gap: .7rem; margin-bottom: .75rem; font-size: .85rem; font-weight: 600; }
.demo-carrera-fila b { text-align: right; font-variant-numeric: tabular-nums; }
.demo-carrera-barra { height: 14px; background: #eef1f7; border-radius: 999px; overflow: hidden; }
.demo-carrera-barra i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--color-primary); animation: carrera 8s cubic-bezier(.2, .8, .2, 1) infinite; }
.demo-carrera-fila:nth-child(1) i { animation-delay: 0s; } .demo-carrera-fila:nth-child(2) i { animation-delay: .2s; } .demo-carrera-fila:nth-child(3) i { animation-delay: .4s; } .demo-carrera-fila:nth-child(4) i { animation-delay: .6s; }
@keyframes carrera { 0% { width: 0; } 35%, 88% { width: var(--ancho); } 100% { width: 0; } }
.demo-tendencia { margin-top: 1rem; border-top: 1px solid #eef1f7; padding-top: .8rem; }
.demo-tendencia svg { width: 100%; height: 60px; display: block; }
.demo-tendencia-linea { fill: none; stroke: #12b76a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: tendencia 8s infinite; }
@keyframes tendencia { 0% { stroke-dashoffset: 260; } 40%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 260; } }
.demo-tendencia small { display: block; text-align: center; color: var(--color-text-muted); font-size: .75rem; font-weight: 600; margin-top: .3rem; }

/* ---------- Demo sincronización + búsqueda ---------- */

.landing-bloque-demo:has(.demo-sync) { flex-direction: column; gap: 1.5rem; }
.demo-sync { position: relative; width: 260px; height: 150px; }
.demo-sync-cal { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; border-radius: 16px; background: #eef2fb; border: 2px solid #d2dcf3; box-shadow: var(--elev-2); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.demo-sync-anillo { position: absolute; left: 80px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 3px solid #dfe4f0; border-top-color: var(--color-primary); animation: aguja 1.6s linear infinite; }
.demo-sync-dest { position: absolute; right: 0; width: 56px; height: 56px; border-radius: 14px; background: #eef2fb; border: 2px solid #d2dcf3; box-shadow: var(--elev-2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; animation: sync-dest 4.8s infinite; }
.demo-sync-dest small { font-size: .6rem; font-weight: 600; color: var(--color-text-muted); }
.demo-sync-d1 { top: 0; color: #ea4335; animation-delay: 0s; } .demo-sync-d2 { top: 47px; color: #0078d4; animation-delay: 1.6s; } .demo-sync-d3 { top: 94px; color: #111; animation-delay: 3.2s; }
.demo-sync-d3 { font-size: 1.1rem; }
@keyframes sync-dest { 0%, 10% { transform: none; box-shadow: var(--elev-2); } 15% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(41, 82, 217, .18); } 30%, 100% { transform: none; box-shadow: var(--elev-2); } }
.demo-busqueda { width: 100%; max-width: 360px; }
.demo-busqueda-caja { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: 999px; padding: .6rem 1rem; box-shadow: var(--elev-2); font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.demo-busqueda-texto::after { content: ''; animation: escribir 8s steps(1) infinite; }
@keyframes escribir { 0% { content: ''; } 6% { content: 'c'; } 9% { content: 'co'; } 12% { content: 'con'; } 15% { content: 'conc'; } 18% { content: 'conci'; } 21% { content: 'concil'; } 24% { content: 'concili'; } 27% { content: 'concilia'; } 30%, 90% { content: 'conciliación'; } 100% { content: ''; } }
.demo-cursor { width: 2px; height: 1.1em; background: var(--color-primary); animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.demo-busqueda-res { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius-sm); box-shadow: var(--elev-2); margin-top: .5rem; overflow: hidden; }
.demo-busqueda-res div { padding: .55rem .9rem; font-size: .85rem; font-weight: 600; border-bottom: 1px solid #eef1f7; display: flex; justify-content: space-between; gap: .5rem; opacity: 0; animation: resultado 8s infinite; }
.demo-busqueda-res div:nth-child(1) { animation-delay: 0s; } .demo-busqueda-res div:nth-child(2) { animation-delay: .15s; } .demo-busqueda-res div:nth-child(3) { animation-delay: .3s; }
.demo-busqueda-res small { color: var(--color-text-muted); font-weight: 500; white-space: nowrap; }
@keyframes resultado { 0%, 32% { opacity: 0; transform: translateY(6px); } 38%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- Demo seguridad (ciclo 8 s) ---------- */

.landing-oscuro .landing-bloque-demo:has(.demo-2fa) { flex-direction: column; }
.demo-2fa { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius); padding: 1.2rem 1.4rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); text-align: center; width: 100%; max-width: 360px; }
.demo-2fa-titulo { font-weight: 700; margin-bottom: .8rem; }
.demo-2fa-celdas { display: flex; justify-content: center; gap: .4rem; }
.demo-2fa-celdas span { width: 40px; height: 48px; border: 2px solid #dfe4f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; color: transparent; animation: celda 8s infinite; }
.demo-2fa-celdas span:nth-child(1) { animation-delay: 0s; } .demo-2fa-celdas span:nth-child(2) { animation-delay: .3s; } .demo-2fa-celdas span:nth-child(3) { animation-delay: .6s; } .demo-2fa-celdas span:nth-child(4) { animation-delay: .9s; } .demo-2fa-celdas span:nth-child(5) { animation-delay: 1.2s; } .demo-2fa-celdas span:nth-child(6) { animation-delay: 1.5s; }
@keyframes celda { 0%, 10% { color: transparent; border-color: #dfe4f0; } 13%, 85% { color: var(--color-text); border-color: var(--color-primary); } 95%, 100% { color: transparent; border-color: #dfe4f0; } }
.demo-2fa-ok { margin-top: .8rem; color: #067647; font-weight: 700; opacity: 0; animation: dosfa-ok 8s infinite; }
@keyframes dosfa-ok { 0%, 36% { opacity: 0; } 42%, 85% { opacity: 1; } 95%, 100% { opacity: 0; } }
.demo-bitacora { width: 100%; max-width: 360px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-sm); padding: .6rem .9rem; font-family: ui-monospace, monospace; font-size: .72rem; color: #c3d0f0; overflow: hidden; }
.demo-bitacora div { padding: .3rem 0; border-bottom: 1px dashed rgba(255, 255, 255, .1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: bitacora 8s infinite; }
.demo-bitacora div:nth-child(1) { animation-delay: 0s; } .demo-bitacora div:nth-child(2) { animation-delay: .5s; } .demo-bitacora div:nth-child(3) { animation-delay: 1s; } .demo-bitacora div:nth-child(4) { animation-delay: 1.5s; }
@keyframes bitacora { 0% { opacity: 0; transform: translateX(-10px); } 8%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .landing-links { display: none; }
  .landing-hero-doble { grid-template-columns: 1fr; text-align: center; padding-top: 6.5rem; gap: 3.5rem; }
  .landing-acciones-izq, .landing-chips-izq { justify-content: center; }
  .landing-hero-demo { max-width: 400px; margin: 0 auto; width: 100%; }
  .demo-toast { right: 0; }
  .demo-evidencia { left: 0; }
  .landing-bloque { grid-template-columns: 1fr; gap: 2rem; }
  .landing-bloque-invertido .landing-bloque-texto { order: 1; }
  .landing-bloque-invertido .landing-bloque-demo { order: 2; }
  .landing-bloque h2 { font-size: 1.6rem; }
  .demo-ciclo { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .2rem; }
  .demo-ciclo-paso small { display: none; }
  .demo-ciclo-paso b { font-size: .72rem; }
}
@media (max-width: 1100px) {
  .demo-generador { flex-direction: column; }
  .demo-generador .demo-flecha { transform: rotate(90deg); animation-name: flecha-pulso-y; }
}

@media (max-width: 520px) {
  .demo-kpis { grid-template-columns: repeat(2, 1fr); }
  .landing-oscuro .landing-bloque-demo { flex-direction: column; }
}

/* Quien pidió menos movimiento ve todo quieto y en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .landing *, .landing *::before, .landing *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
  .landing-js .revelar { opacity: 1; transform: none; }
}

/* =====================================================================================
   Mapa de obligaciones: recorrido de seis escenas + tabla viva + tablero.
   Cada escena es un ciclo propio; la tabla y el tablero tienen el suyo.
   ===================================================================================== */

.obl-historia { display: flex; flex-direction: column; gap: 3.5rem; margin: 1rem auto 0; max-width: 1040px; position: relative; }
/* Línea vertical que une las escenas. */
.obl-historia::before { content: ''; position: absolute; left: 50%; top: 2rem; bottom: 2rem; width: 3px; margin-left: -1.5px; background: linear-gradient(180deg, transparent, #c9d4f5 8%, #c9d4f5 92%, transparent); }
.obl-escena { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; position: relative; }
.obl-escena-invertida .obl-escena-texto { order: 2; }
.obl-escena-invertida .obl-escena-demo { order: 1; }
.obl-escena-texto { position: relative; }
.obl-escena-texto h3 { font-size: 1.25rem; margin: 0 0 .6rem; }
.obl-escena-texto p { color: var(--color-text-muted); line-height: 1.65; margin: 0; font-size: 1rem; }
.obl-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: .6rem;
  background: var(--color-primary); color: #fff; font-weight: 800; box-shadow: 0 6px 14px rgba(41, 82, 217, .35);
}
.obl-escena-demo { display: flex; justify-content: center; align-items: center; min-height: 260px; }

.obl-subtitulo { font-size: 1.5rem; margin: 0 0 .5rem; }

/* Piezas comunes */
.obl-chip { display: inline-block; border-radius: 999px; padding: .2rem .65rem; font-size: .75rem; font-weight: 700; background: #eef1f7; color: var(--color-text-muted); }
.obl-chip.fija.obl-chip-critica { background: #fde7e7; color: #b42318; }
.obl-chip.fija.obl-chip-alta { background: #fff1e0; color: #b54708; }
.obl-chip.fija.obl-chip-media { background: #fff8db; color: #7a5a00; }
.obl-chip.fija.obl-chip-baja { background: #e9f7ee; color: #067647; }
.obl-estado { display: inline-block; border-radius: 999px; padding: .25rem .7rem; font-size: .78rem; font-weight: 700; background: #eef1f7; color: var(--color-text-muted); white-space: nowrap; }
.obl-boton { display: inline-block; background: var(--color-primary); color: #fff; border: 0; border-radius: 8px; padding: .5rem 1rem; font-weight: 700; font-size: .85rem; box-shadow: 0 4px 10px rgba(41, 82, 217, .3); }
.obl-boton-sec { background: #eef2fb; border: 2px solid #d2dcf3; color: var(--color-text); border: 1px solid #d7dbe4; box-shadow: none; }
.obl-mano { position: absolute; font-size: 1.6rem; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); pointer-events: none; opacity: 0; }
.obl-toast { background: #d1fadf; color: #067647; border-radius: 8px; padding: .5rem .8rem; font-size: .8rem; font-weight: 600; opacity: 0; }

/* ---------- Escena 1: formulario (ciclo 12 s) ---------- */

.obl-form { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius); padding: 1.1rem 1.3rem 1.2rem; box-shadow: var(--elev-3); width: 100%; max-width: 380px; position: relative; }
.obl-form-titulo { font-weight: 800; margin-bottom: .6rem; }
.obl-form label { display: block; font-size: .7rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .4px; margin: .55rem 0 .2rem; }
.obl-campo { border: 1.5px solid #dfe4f0; border-radius: 8px; padding: .45rem .65rem; font-size: .88rem; font-weight: 600; min-height: 2.1rem; display: flex; align-items: center; gap: .3rem; }
.obl-form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.obl-escribe-obligado::after { content: ''; animation: obl-esc-obligado 12s steps(1) infinite; }
@keyframes obl-esc-obligado { 0%, 4% { content: ''; } 7% { content: '🗂️ Sis'; } 10%, 92% { content: '🗂️ Sistemas'; } 100% { content: ''; } }
.obl-escribe-titulo::after { content: ''; animation: obl-esc-titulo 12s steps(1) infinite; }
@keyframes obl-esc-titulo { 0%, 12% { content: ''; } 14% { content: 'Actu'; } 16% { content: 'Actualizar an'; } 18% { content: 'Actualizar antivirus en'; } 20%, 92% { content: 'Actualizar antivirus en 40 equipos'; } 100% { content: ''; } }
.obl-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.obl-chip-critica:not(.fija) { animation: obl-chip-critica 12s infinite; }
@keyframes obl-chip-critica { 0%, 28% { background: #eef1f7; color: var(--color-text-muted); transform: none; } 30% { transform: scale(1.12); } 32%, 92% { background: #fde7e7; color: #b42318; transform: none; } 100% { background: #eef1f7; color: var(--color-text-muted); } }
.obl-escribe-plazo::after { content: ''; animation: obl-esc-plazo 12s steps(1) infinite; }
@keyframes obl-esc-plazo { 0%, 36% { content: ''; } 38%, 92% { content: '📅 05/09/2026'; } 100% { content: ''; } }
.obl-interruptor { display: inline-block; width: 34px; height: 20px; border-radius: 999px; background: #d7dbe4; position: relative; flex-shrink: 0; animation: obl-int 12s infinite; }
.obl-interruptor i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #eef2fb; border: 2px solid #d2dcf3; animation: obl-int-bola 12s infinite; }
@keyframes obl-int { 0%, 44% { background: #d7dbe4; } 47%, 92% { background: var(--color-primary); } 100% { background: #d7dbe4; } }
@keyframes obl-int-bola { 0%, 44% { left: 2px; } 47%, 92% { left: 16px; } 100% { left: 2px; } }
.obl-rec-texto::after { content: 'No'; animation: obl-rec-texto 12s steps(1) infinite; }
@keyframes obl-rec-texto { 0%, 46% { content: 'No'; } 48%, 92% { content: 'Trimestral'; } 100% { content: 'No'; } }
.obl-boton-emitir { margin-top: .9rem; width: 100%; animation: obl-emitir 12s infinite; }
@keyframes obl-emitir { 0%, 58% { transform: none; filter: none; } 60% { transform: scale(.96); filter: brightness(.9); } 62%, 100% { transform: none; filter: none; } }
.obl-toast-emitido { position: absolute; left: 1rem; right: 1rem; bottom: -1.4rem; animation: obl-toast-emitido 12s infinite; }
@keyframes obl-toast-emitido { 0%, 62% { opacity: 0; transform: translateY(8px); } 66%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* ---------- Escena 2: campana (ciclo 10 s) ---------- */

.obl-campana { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius); box-shadow: var(--elev-3); width: 100%; max-width: 380px; overflow: hidden; }
.obl-campana-cab { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; font-weight: 700; border-bottom: 1px solid #eef1f7; }
.obl-campana-icono { position: relative; font-size: 1.3rem; animation: obl-campana-sacude 10s infinite; display: inline-block; }
@keyframes obl-campana-sacude { 0%, 4%, 34%, 38%, 64%, 68% { transform: none; } 2%, 36%, 66% { transform: rotate(-18deg); } 3%, 37%, 67% { transform: rotate(18deg); } }
.obl-campana-badge { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; border-radius: 999px; background: #d92d20; color: #fff; font-size: .65rem; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.obl-campana-badge::after { content: '1'; animation: obl-badge 10s steps(1) infinite; }
@keyframes obl-badge { 0%, 33% { content: '1'; } 34%, 63% { content: '2'; } 64%, 100% { content: '3'; } }
.obl-aviso { padding: .6rem 1rem; font-size: .82rem; border-bottom: 1px solid #eef1f7; line-height: 1.4; opacity: 0; }
.obl-aviso small { display: block; color: var(--color-text-muted); font-size: .7rem; font-weight: 700; }
.obl-aviso-1 { animation: obl-aviso 10s infinite; }
.obl-aviso-2 { animation: obl-aviso 10s 3.2s infinite; }
.obl-aviso-3 { animation: obl-aviso 10s 6.4s infinite; }
@keyframes obl-aviso { 0% { opacity: 0; transform: translateX(-14px); background: #fff; } 4%, 12% { opacity: 1; transform: none; background: var(--color-primary-light); } 20%, 100% { opacity: 1; transform: none; background: #fff; } }
.obl-campana-pie { padding: .55rem 1rem; font-size: .72rem; color: var(--color-text-muted); font-weight: 600; background: #f6f8fc; }

/* ---------- Escena 3: acuse (ciclo 9 s) ---------- */

.obl-tarjeta { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius); box-shadow: var(--elev-3); width: 100%; max-width: 380px; padding: 1.1rem 1.3rem 1.2rem; position: relative; overflow: hidden; }
.obl-tarjeta-cab { display: flex; gap: .4rem; margin-bottom: .5rem; }
.obl-tarjeta > b { display: block; font-size: 1rem; margin-bottom: .2rem; }
.obl-tarjeta > small { display: block; color: var(--color-text-muted); font-size: .8rem; margin-bottom: .9rem; }
.obl-boton-acuse { animation: obl-boton-acuse 9s infinite; }
@keyframes obl-boton-acuse { 0%, 28% { transform: none; opacity: 1; } 30% { transform: scale(.94); } 32%, 40% { transform: none; opacity: 1; } 46%, 92% { opacity: .35; } 100% { opacity: 1; } }
.obl-mano-acuse { left: 60px; top: 130px; animation: obl-mano-acuse 9s infinite; }
@keyframes obl-mano-acuse { 0%, 10% { opacity: 0; transform: translate(60px, 40px); } 16% { opacity: 1; } 26% { transform: translate(0, 0); } 30% { transform: translate(0, 0) scale(.85); } 34% { transform: none; opacity: 1; } 40%, 100% { opacity: 0; } }
.obl-sello {
  position: absolute; right: .9rem; top: .9rem;
  border: 3px solid #b42318; color: #b42318; border-radius: 8px;
  padding: .3rem .55rem; font-size: .68rem; font-weight: 800; letter-spacing: .5px; text-align: center; line-height: 1.3;
  transform: rotate(-12deg) scale(2.2); opacity: 0; animation: obl-sello 9s infinite;
}
.obl-sello small { color: #b42318; font-weight: 600; font-size: .62rem; }
@keyframes obl-sello { 0%, 38% { opacity: 0; transform: rotate(-12deg) scale(2.2); } 42%, 92% { opacity: 1; transform: rotate(-12deg) scale(1); } 100% { opacity: 0; } }
.obl-registro { margin-top: .9rem; font-size: .75rem; font-weight: 600; color: var(--color-text-muted); background: #f6f8fc; border-radius: 6px; padding: .4rem .6rem; opacity: 0; animation: obl-registro 9s infinite; }
@keyframes obl-registro { 0%, 50% { opacity: 0; } 56%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Escena 4: hilo (ciclo 10 s) ---------- */

.obl-hilo { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius); box-shadow: var(--elev-3); width: 100%; max-width: 380px; padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.obl-hilo-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; padding-bottom: .6rem; border-bottom: 1px solid #eef1f7; margin-bottom: .2rem; }
.obl-estado-hilo::after { content: '⏳ Pendiente'; animation: obl-estado-hilo-t 10s steps(1) infinite; }
.obl-estado-hilo { animation: obl-estado-hilo 10s infinite; }
@keyframes obl-estado-hilo-t { 0%, 54% { content: '⏳ Pendiente'; } 56%, 100% { content: '🔎 En revisión'; } }
@keyframes obl-estado-hilo { 0%, 54% { background: #fff4e5; color: #b54708; } 56%, 100% { background: var(--color-primary-light); color: var(--color-primary-dark); } }
.obl-burbuja { background: #f3f5fa; border-radius: 12px 12px 12px 4px; padding: .55rem .8rem; font-size: .82rem; line-height: 1.4; opacity: 0; }
.obl-burbuja b { display: block; font-size: .72rem; color: var(--color-primary-dark); margin-bottom: .1rem; }
.obl-burbuja-sistema { background: #fff8db; color: #7a5a00; font-weight: 600; border-radius: 8px; }
.obl-burbuja-1 { animation: obl-entra 10s infinite; }
.obl-adjunto { align-self: flex-start; background: var(--color-primary-light); color: var(--color-primary-dark); border-radius: 8px; padding: .35rem .7rem; font-size: .78rem; font-weight: 700; opacity: 0; }
.obl-adjunto-1 { animation: obl-entra 10s 2s infinite; }
.obl-adjunto-2 { animation: obl-entra 10s 3.4s infinite; }
.obl-burbuja-2 { animation: obl-entra 10s 5.8s infinite; }
@keyframes obl-entra { 0% { opacity: 0; transform: translateY(8px) scale(.96); } 5%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

/* ---------- Escena 5: dictamen (ciclo 11 s) ---------- */

.obl-dictamen { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius); box-shadow: var(--elev-3); width: 100%; max-width: 380px; padding: 1.1rem 1.2rem; position: relative; }
.obl-dictamen-evidencia { display: flex; justify-content: space-between; align-items: center; background: #f6f8fc; border-radius: 8px; padding: .55rem .8rem; font-size: .82rem; font-weight: 700; margin-bottom: .9rem; }
.obl-dictamen-evidencia span { color: #067647; font-size: .75rem; }
.obl-dictamen-botones { display: flex; gap: .4rem; flex-wrap: wrap; }
.obl-boton-cumplida { background: #12b76a; box-shadow: 0 4px 10px rgba(18, 183, 106, .3); animation: obl-boton-cumplida 11s infinite; }
@keyframes obl-boton-cumplida { 0%, 30% { transform: none; filter: none; } 32% { transform: scale(.94); filter: brightness(.9); } 34%, 100% { transform: none; filter: none; } }
.obl-mano-dictamen { right: 26px; top: 86px; animation: obl-mano-dictamen 11s infinite; }
@keyframes obl-mano-dictamen { 0%, 8% { opacity: 0; transform: translate(-120px, 60px); } 14% { opacity: 1; } 26% { transform: translate(0, 0); } 31% { transform: translate(0, 0) scale(.85); } 35% { transform: none; opacity: 1; } 42%, 100% { opacity: 0; } }
.obl-resultado { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.obl-estado-dictamen::after { content: '🔎 En revisión'; animation: obl-estado-dictamen-t 11s steps(1) infinite; }
.obl-estado-dictamen { animation: obl-estado-dictamen 11s infinite; }
@keyframes obl-estado-dictamen-t { 0%, 34% { content: '🔎 En revisión'; } 36%, 100% { content: '✅ Cumplida · dictamen de Auditoría'; } }
@keyframes obl-estado-dictamen { 0%, 34% { background: var(--color-primary-light); color: var(--color-primary-dark); transform: none; } 36% { transform: scale(1.08); } 38%, 100% { background: #d1fadf; color: #067647; transform: none; } }
.obl-siguiente { font-size: .78rem; font-weight: 600; color: var(--color-text-muted); background: #f6f8fc; border-radius: 8px; padding: .45rem .7rem; opacity: 0; animation: obl-siguiente 11s infinite; }
@keyframes obl-siguiente { 0%, 50% { opacity: 0; transform: translateY(6px); } 56%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- Escena 6: agenda de recordatorios (ciclo 12 s) ---------- */

.obl-agenda { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius); box-shadow: var(--elev-3); width: 100%; max-width: 380px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.obl-agenda-reloj { font-weight: 800; font-size: 1.4rem; text-align: center; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
.obl-agenda-hora::after { content: '⏰ 8:00'; animation: obl-agenda-hora 12s steps(1) infinite; }
@keyframes obl-agenda-hora { 0%, 24% { content: '⏰ 8:00 · lunes'; } 25%, 49% { content: '⏰ 8:00 · martes'; } 50%, 74% { content: '⏰ 8:00 · miércoles'; } 75%, 100% { content: '😴 domingo'; } }
.obl-agenda-item { display: flex; gap: .6rem; align-items: center; background: #f6f8fc; border-radius: 10px; padding: .55rem .7rem; opacity: .6; }
.obl-agenda-item i { font-style: normal; font-size: 1.2rem; }
.obl-agenda-item b { display: block; font-size: .82rem; }
.obl-agenda-item small { color: var(--color-text-muted); font-size: .74rem; }
.obl-agenda-1 { animation: obl-agenda-a 12s infinite; }
.obl-agenda-2 { animation: obl-agenda-b 12s infinite; }
.obl-agenda-3 { animation: obl-agenda-c 12s infinite; }
.obl-agenda-4 { animation: obl-agenda-d 12s infinite; }
@keyframes obl-agenda-a { 0% { opacity: .6; transform: none; } 3% { opacity: 1; transform: translateX(6px); background: var(--color-primary-light); } 8%, 24% { opacity: 1; transform: none; background: #f6f8fc; } 26%, 100% { opacity: .6; } }
@keyframes obl-agenda-b { 0%, 24% { opacity: .6; transform: none; } 28% { opacity: 1; transform: translateX(6px); background: #fde7e7; } 33%, 49% { opacity: 1; transform: none; background: #f6f8fc; } 51%, 100% { opacity: .6; } }
@keyframes obl-agenda-c { 0%, 49% { opacity: .6; transform: none; } 53% { opacity: 1; transform: translateX(6px); background: #fff8db; } 58%, 74% { opacity: 1; transform: none; background: #f6f8fc; } 76%, 100% { opacity: .6; } }
@keyframes obl-agenda-d { 0%, 74% { opacity: .6; } 78%, 100% { opacity: 1; } }

/* ---------- Tabla viva (ciclo 14 s) ---------- */

.obl-tabla-bloque { margin-top: 4rem; }
.obl-tabla { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius); box-shadow: var(--elev-2); overflow: hidden; max-width: 960px; margin: 0 auto; font-size: .85rem; }
.obl-tabla-cab, .obl-fila { display: grid; grid-template-columns: 2.2fr .8fr .9fr 1.1fr 1.3fr; gap: .6rem; align-items: center; padding: .65rem 1rem; }
.obl-tabla-cab { background: #f6f8fc; font-size: .72rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .4px; }
.obl-fila { border-top: 1px solid #eef1f7; font-weight: 600; }
.obl-fila > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obl-dias, .obl-acuse { font-size: .78rem; font-weight: 700; }
.obl-dias::after, .obl-acuse::after, .obl-fila .obl-estado::after { animation-duration: 14s; animation-timing-function: steps(1); animation-iteration-count: infinite; }
.obl-fila .obl-estado { animation-duration: 14s; animation-iteration-count: infinite; }

.obl-dias-1::after { content: '15 días'; animation-name: obl-d1; } @keyframes obl-d1 { 0%, 30% { content: '15 días'; color: var(--color-text); } 31%, 100% { content: '✔ a tiempo'; color: #067647; } }
.obl-acuse-1::after { content: '⏳ pendiente'; animation-name: obl-a1; } @keyframes obl-a1 { 0%, 14% { content: '⏳ pendiente'; color: #b54708; } 15%, 100% { content: '✍️ Juan P. 9:14'; color: #067647; } }
.obl-estado-f1::after { content: '⏳ Pendiente'; animation-name: obl-e1t; } .obl-estado-f1 { animation-name: obl-e1; }
@keyframes obl-e1t { 0%, 44% { content: '⏳ Pendiente'; } 45%, 69% { content: '🔎 En revisión'; } 70%, 100% { content: '✅ Cumplida'; } }
@keyframes obl-e1 { 0%, 44% { background: #fff4e5; color: #b54708; } 45%, 69% { background: var(--color-primary-light); color: var(--color-primary-dark); } 70%, 100% { background: #d1fadf; color: #067647; } }

.obl-dias-2::after { content: '7 días'; animation-name: obl-d2; } @keyframes obl-d2 { 0%, 100% { content: '⏳ 7 días'; color: #b54708; } }
.obl-acuse-2::after { content: '✍️ Ana R. 8:40'; color: #067647; }
.obl-estado-f2::after { content: '⏳ Pendiente'; } .obl-estado-f2 { background: #fff4e5; color: #b54708; }

.obl-dias-3::after { content: 'vence hoy'; animation-name: obl-d3; } @keyframes obl-d3 { 0%, 49% { content: 'vence hoy'; color: #b54708; } 50%, 100% { content: '🔴 vencida 2 d'; color: #b42318; } }
.obl-acuse-3::after { content: '⏳ pendiente'; animation-name: obl-a3; } @keyframes obl-a3 { 0%, 100% { content: '⏳ día 3'; color: #b42318; } }
.obl-estado-f3::after { content: '⏳ Pendiente'; } .obl-estado-f3 { animation-name: obl-e3; }
@keyframes obl-e3 { 0%, 49% { background: #fff4e5; color: #b54708; } 50%, 100% { background: #fde7e7; color: #b42318; } }

.obl-dias-4::after { content: '22 días'; }
.obl-acuse-4::after { content: '✍️ Luis M. 10:02'; color: #067647; }
.obl-estado-f4::after { content: '🔎 En revisión'; animation-name: obl-e4t; } .obl-estado-f4 { animation-name: obl-e4; }
@keyframes obl-e4t { 0%, 59% { content: '🔎 En revisión'; } 60%, 100% { content: '🟡 Mitigada'; } }
@keyframes obl-e4 { 0%, 59% { background: var(--color-primary-light); color: var(--color-primary-dark); } 60%, 100% { background: #fff8db; color: #7a5a00; } }

.obl-dias-5::after { content: '30 días'; }
.obl-acuse-5::after { content: '✍️ María G. 8:15'; color: #067647; }
.obl-estado-f5::after { content: '↩ Devuelta: falta lista'; animation-name: obl-e5t; } .obl-estado-f5 { animation-name: obl-e5; }
@keyframes obl-e5t { 0%, 79% { content: '↩ Devuelta: falta lista'; } 80%, 100% { content: '🔎 En revisión'; } }
@keyframes obl-e5 { 0%, 79% { background: #fde7e7; color: #b42318; } 80%, 100% { background: var(--color-primary-light); color: var(--color-primary-dark); } }

/* ---------- Tablero (ciclo 12 s) ---------- */

.obl-tablero-bloque { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-top: 4rem; }
.obl-tablero-texto p { color: var(--color-text-muted); line-height: 1.65; }
.obl-tablero { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: var(--radius); box-shadow: var(--elev-3); padding: 1.3rem 1.4rem; display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 1.5rem; align-items: center; position: relative; }
@property --obl-p { syntax: '<number>'; inherits: false; initial-value: 0; }
.obl-dona { width: 130px; height: 130px; border-radius: 50%; background: conic-gradient(#12b76a calc(var(--obl-p) * 1%), #eef1f7 0); display: flex; align-items: center; justify-content: center; animation: obl-dona 12s infinite; }
@keyframes obl-dona { 0% { --obl-p: 0; } 30%, 60% { --obl-p: 87; } 75%, 92% { --obl-p: 100; } 100% { --obl-p: 0; } }
.obl-dona-centro { width: 96px; height: 96px; border-radius: 50%; background: #eef2fb; border: 2px solid #d2dcf3; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.obl-dona-valor { font-size: 1.5rem; line-height: 1; }
.obl-dona-valor::after { content: '0%'; animation: obl-dona-valor 12s steps(1) infinite; }
@keyframes obl-dona-valor { 0% { content: '0%'; } 5% { content: '14%'; } 10% { content: '31%'; } 15% { content: '48%'; } 20% { content: '63%'; } 25% { content: '78%'; } 30%, 60% { content: '87%'; } 68% { content: '94%'; } 75%, 92% { content: '100%'; } 100% { content: '0%'; } }
.obl-dona-centro small { font-size: .7rem; color: var(--color-text-muted); font-weight: 700; }
.obl-tablero-barras { display: flex; flex-direction: column; gap: .55rem; }
.obl-tablero-fila { display: grid; grid-template-columns: 84px 1fr 40px; gap: .6rem; align-items: center; font-size: .8rem; font-weight: 700; }
.obl-tablero-fila b { text-align: right; }
.obl-tablero-fila div { height: 12px; background: #eef1f7; border-radius: 999px; overflow: hidden; }
.obl-tablero-fila i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--color-primary); animation: obl-barra 12s cubic-bezier(.2, .8, .2, 1) infinite; }
.obl-tablero-fila:nth-child(2) i { animation-delay: .15s; } .obl-tablero-fila:nth-child(3) i { animation-delay: .3s; } .obl-tablero-fila:nth-child(4) i { animation-delay: .45s; }
@keyframes obl-barra { 0% { width: 0; } 30%, 92% { width: var(--ancho); } 100% { width: 0; } }
.obl-tablero-cierre { grid-column: 1 / -1; background: #d1fadf; color: #067647; border-radius: 10px; padding: .6rem .9rem; font-size: .85rem; font-weight: 700; text-align: center; opacity: 0; animation: obl-cierre 12s infinite; }
@keyframes obl-cierre { 0%, 74% { opacity: 0; transform: translateY(8px); } 78%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (max-width: 900px) {
  .obl-historia::before { display: none; }
  .obl-escena { grid-template-columns: 1fr; gap: 1.2rem; }
  .obl-escena-invertida .obl-escena-texto { order: 1; }
  .obl-escena-invertida .obl-escena-demo { order: 2; }
  .obl-tabla { font-size: .75rem; overflow-x: auto; }
  .obl-tabla-cab, .obl-fila { grid-template-columns: 1.6fr .7fr .9fr 1fr 1.2fr; min-width: 560px; }
  .obl-tablero-bloque { grid-template-columns: 1fr; gap: 1.5rem; }
  .obl-tablero { grid-template-columns: 1fr; justify-items: center; }
  .obl-tablero-barras { width: 100%; }
}

/* ---------- Demo: comisión por meta y metas de incentivos ---------- */
.demo-comision {
  background: #fffdf3;
  border: 1px solid #e6c75a;
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 18px 40px rgba(20, 30, 60, .12);
  color: #1f2937;
}
.demo-comision-titulo { font-weight: 800; margin-bottom: .7rem; }
.demo-comision-escalera { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.demo-comision-tramo {
  flex: 1 1 70px;
  min-width: 70px;
  text-align: center;
  background: #fff;
  border: 2px solid #e6c75a;
  border-radius: 10px;
  padding: .45rem .3rem;
  position: relative;
}
.demo-comision-tramo b { display: block; font-size: 1.3rem; color: #8a6d00; line-height: 1.1; }
.demo-comision-tramo small { font-size: .72rem; color: #6b7280; font-weight: 600; }
.demo-comision-tramo.vigente { border-color: #2952d9; box-shadow: 0 0 0 4px rgba(41, 82, 217, .18); transform: translateY(-4px); }
.demo-comision-tramo.vigente b { color: #2952d9; }
.demo-comision-tramo.vigente i {
  position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
  background: #2952d9; color: #fff; font-style: normal; font-size: .6rem; font-weight: 700;
  padding: .1rem .45rem; border-radius: 999px; white-space: nowrap;
}
.demo-comision-tramo.pasado, .demo-comision-tramo.apagado { opacity: .65; filter: grayscale(.6); }
.demo-comision-estado { margin: .8rem 0; font-size: .88rem; }
.demo-meta { background: #eef2fb; border: 2px solid #d2dcf3; border-radius: 10px; padding: .5rem .8rem; font-size: .85rem; }
.demo-meta-fila { display: flex; justify-content: space-between; padding: .2rem 0; border-bottom: 1px dashed #eee; }
.demo-meta-fila:last-child { border-bottom: none; font-weight: 800; color: #16a34a; }

/* ---------- Emergencias: el teléfono en rojo y el tablero de acuses ---------- */
.landing-kicker-rojo { color: #c22a20; }
.demo-telefono-rojo { border-color: #3a1f1f; }
@keyframes demo-latido { 0%, 100% { background: #e5342b; } 50% { background: #e0261a; } }
.demo-pantalla-roja {
  background: #e5342b; animation: demo-latido 1.2s ease-in-out infinite;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
  text-align: center; color: #fff; padding: 2.4rem .9rem 1.2rem;
}
.demo-emergencia-etiqueta { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; opacity: .9; }
.demo-emergencia-tipo { font-size: 1.9rem; font-weight: 900; line-height: 1.05; }
.demo-emergencia-msg { font-size: .82rem; font-weight: 600; line-height: 1.35; }
.demo-emergencia-meta { font-size: .68rem; opacity: .85; }
.demo-emergencia-boton {
  margin-top: .4rem; background: #fff; color: #e5342b; font-weight: 900; font-size: .95rem;
  padding: .55rem 1.5rem; border-radius: 999px; box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
  animation: demo-boton-pulso 1.2s ease-in-out infinite;
}
@keyframes demo-boton-pulso { 50% { transform: scale(1.06); } }
.demo-acuses {
  background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--elev-2);
  padding: 1rem 1.1rem; width: 230px; display: grid; gap: .45rem; background: #ffe2e0;
}
.demo-acuses b { font-size: .92rem; }
.demo-acuses small { color: var(--color-text-muted); font-size: .8rem; }
.demo-acuses-faltan { color: #e5342b !important; font-weight: 600; }
.demo-acuses-barra { height: 8px; background: #fce9e8; border-radius: 999px; overflow: hidden; }
.demo-acuses-barra i { display: block; height: 100%; width: 0; background: #12b76a; border-radius: 999px; animation: demo-acuses-llena 6s ease-out infinite; }
@keyframes demo-acuses-llena { 0% { width: 0; } 60%, 100% { width: 82%; } }

/* ---------- PQRS: la portada con canales y la bandeja con semáforo ---------- */
.demo-pqrs { display: grid; gap: .8rem; width: 100%; max-width: 380px; }
.demo-pqrs-portal { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.demo-pqrs-canal {
  background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--elev-1);
  padding: .6rem .3rem; text-align: center; font-size: 1.25rem; display: grid; gap: .15rem; justify-items: center;
  transition: transform .25s;
}
.demo-pqrs-canal:hover { transform: translateY(-3px); }
.demo-pqrs-canal b { font-size: .72rem; }
.demo-pqrs-canal small { font-size: .6rem; color: var(--color-text-muted); line-height: 1.2; }
.demo-pqrs-bandeja { background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--elev-2); overflow: hidden; }
.demo-pqrs-fila { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-bottom: 1px solid #eef1f7; font-size: .8rem; }
.demo-pqrs-fila b { font-family: ui-monospace, monospace; font-size: .74rem; color: var(--color-primary); }
.demo-pqrs-fila em { margin-left: auto; font-style: normal; color: var(--color-text-muted); font-size: .72rem; white-space: nowrap; }
.demo-pqrs-fila-ok { background: #f3fbf6; }
.demo-punto.ambar { background: #f79009; }
@media (max-width: 520px) {
  .demo-pqrs-portal { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Olas del héroe (antes vivían en el login; ahora solo el landing las usa) ---------- */
.login-olas { position: absolute; inset: 0; pointer-events: none; }

.ola {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background-repeat: repeat-x;
  background-size: 1440px 100%;
  animation: ola-deriva linear infinite, ola-marea 9s ease-in-out infinite;
}

.ola-1 {
  height: 260px;
  animation-duration: 42s, 13s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(124,155,255,0.10)' d='M0,192 C240,120 480,264 720,192 C960,120 1200,264 1440,192 L1440,320 L0,320 Z'/%3E%3C/svg%3E");
}

.ola-2 {
  height: 200px;
  animation-duration: 27s, 11s;
  animation-direction: reverse, normal;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(124,155,255,0.14)' d='M0,192 C240,120 480,264 720,192 C960,120 1200,264 1440,192 L1440,320 L0,320 Z'/%3E%3C/svg%3E");
}

.ola-3 {
  height: 150px;
  animation-duration: 18s, 8s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(41,82,217,0.35)' d='M0,192 C240,120 480,264 720,192 C960,120 1200,264 1440,192 L1440,320 L0,320 Z'/%3E%3C/svg%3E");
}

@keyframes ola-deriva {
  from { background-position-x: 0; }
  to   { background-position-x: 1440px; }
}
@keyframes ola-marea {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(14px); }
}

/* Iconos de línea en el landing: escalan con el texto, como lo hacían los emojis. */
.landing .icono { width: 1.05em; height: 1.05em; vertical-align: -.16em; }
.landing-func-icono .icono { width: 28px; height: 28px; }
.landing-marca-icono .icono { width: 22px; height: 22px; }

/* Iconos de las listas del landing en verde visto bueno. */
.landing-lista li .icono-color, .landing-mini .icono-color { width: 26px; height: 26px; }
.landing-lista li .icono:not(.icono-color) { color: #17a34a; }
.landing-oscuro .landing-lista li .icono { color: #86efac; }

/* Los demos van sobre ficha celeste con tinta oscura: nada de gris claro sobre blanco. */
.landing .demo-lista, .landing .demo-ticket, .landing .obl-agenda-item, .landing .demo-kpi, .landing .demo-acuses { color: var(--color-text); }