/* Estilo oscuro "Impacto" de las paginas publicas (portada, login/registro, como funciona,
   ejemplos, guias y paginas de texto). Va DESPUES de estilo.css; el panel de la app (dashboard,
   evaluacion, admin) sigue en claro con solo estilo.css. Animaciones solo con CSS o js/revelar.js
   (la CSP no permite JS en linea) y todas se detienen con prefers-reduced-motion. */

@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/vendor/red-hat-display-5.3.0/red-hat-display-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.lp {
  --lp-fondo: #060b1a;
  --lp-tarjeta: #0d1631;
  --lp-tarjeta-activa: #111d40;
  --lp-texto: #e8ecf7;
  --lp-suave: #b4bdd4;
  --lp-tenue: #9aa6c4;
  --lp-azul: #4f86ff;
  --lp-azul-boton: #2f64e0;
  --lp-naranja: #ffb347;
  --lp-oro: #f5c451;
  --lp-linea: rgba(255, 255, 255, 0.12);
  background: var(--lp-fondo);
  color: var(--lp-texto);
  font-family: "Red Hat Display", "Inter", "Inter Fallback", system-ui, sans-serif;
}
.lp a { color: var(--lp-texto); }
.lp a:hover { color: #fff; }
.lp-envoltura { padding: 20px; }
.lp-ancho { max-width: 1320px; margin: 0 auto; }

/* --- Escenario del hero (nav + hero + franja de marcos) */
.lp-escenario {
  max-width: 1720px; margin: 0 auto; border-radius: 28px; overflow: hidden; position: relative;
  min-height: calc(100vh - 40px); display: flex; flex-direction: column;
  background: radial-gradient(circle at 72% 38%, #1b3a8f 0%, #0c1b46 34%, #070e24 70%);
}

/* --- Navegacion */
.lp-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 26px clamp(24px, 4vw, 72px); }
.lp-nav-izq { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lp-marca { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #0a1638 !important; font-weight: 800; font-size: 17px; padding: 9px 15px; border-radius: 12px; text-decoration: none; }
.lp-enlaces { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--lp-linea); border-radius: 12px; padding: 4px; }
.lp-enlaces a { display: block; padding: 8px 14px; font-size: 15px; text-decoration: none; border-radius: 8px; }
.lp-enlaces a:hover { background: rgba(255, 255, 255, 0.08); }
.lp-nav-der { display: flex; align-items: center; gap: 18px; }
.lp-nav-der .topnav-invitado { display: flex; align-items: center; gap: 18px; }
.lp-nav-der .topnav-link { color: var(--lp-texto); font-weight: 500; font-size: 15px; }
.lp-boton-borde { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--lp-texto); border-radius: 12px; padding: 10px 16px; font-size: 15px; font-weight: 600; text-decoration: none; }
.lp-boton-borde:hover { background: rgba(255, 255, 255, 0.08); }
.lp .topnav-avatar { background: #fff; color: #0a1638; }

/* --- Hero */
.lp-hero { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 32px; padding: 36px clamp(24px, 4vw, 72px) 80px; }
.lp-hero-texto { flex: 1 1 460px; min-width: 0; max-width: 920px; }
.lp-hero h1 { margin: 0; font-size: clamp(42px, 4.6vw, 96px); line-height: 1.02; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.lp-hero-sub { margin: 26px 0 0; font-size: clamp(17px, 1.15vw, 21px); line-height: 1.55; color: #c3cbe0; max-width: 600px; }
.lp-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px; max-width: 560px; }
.lp-campo { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 0 14px; min-height: 52px; }
.lp-campo:focus-within { border-color: var(--lp-azul); box-shadow: 0 0 0 3px rgba(79, 134, 255, 0.25); }
.lp-campo span { font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, 0.12); padding: 4px 7px; border-radius: 6px; }
.lp-campo input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font: inherit; font-size: 16px; padding: 0; box-shadow: none; }
.lp-campo input::placeholder { color: #8e9abb; }
.lp-boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--lp-azul-boton); color: #fff !important; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none; }
.lp-boton:hover { background: #2552c0; }
.lp-nota { margin: 14px 0 0; font-size: 14px; color: var(--lp-tenue); }
.lp-nota a { color: var(--lp-tenue); }
.lp-visual { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }
.lp-visual svg { width: 100%; max-width: 760px; height: auto; }

/* Animacion del radar: capas que se completan, escudo que se llena, nivel que sube. */
.mc-arco { stroke-dasharray: 100; stroke-dashoffset: 100; animation: mc-llenar 9s ease-in-out infinite; }
.mc-a2 { animation-delay: .5s; } .mc-a3 { animation-delay: 1s; } .mc-a4 { animation-delay: 1.5s; } .mc-a5 { animation-delay: 2s; }
@keyframes mc-llenar { 0% { stroke-dashoffset: 100; opacity: .25; } 35% { stroke-dashoffset: 0; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.mc-barrido { transform-box: view-box; transform-origin: 280px 260px; animation: mc-girar 4.5s linear infinite; }
.mc-orbita { transform-box: view-box; transform-origin: 280px 260px; animation: mc-girar 14s linear infinite; }
@keyframes mc-girar { to { transform: rotate(360deg); } }
.mc-pulso { transform-box: view-box; transform-origin: 280px 260px; animation: mc-pulso 3s ease-out infinite; }
.mc-pulso2 { animation-delay: 1.5s; }
@keyframes mc-pulso { 0% { transform: scale(.25); opacity: .7; } 100% { transform: scale(1.05); opacity: 0; } }
.mc-relleno { transform-box: fill-box; transform-origin: 50% 100%; animation: mc-subir 9s ease-in-out infinite; }
@keyframes mc-subir { 0% { transform: scaleY(.08); } 75%, 90% { transform: scaleY(1); } 100% { transform: scaleY(.08); } }
.mc-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: mc-check 9s ease-in-out infinite; }
@keyframes mc-check { 0%, 70% { stroke-dashoffset: 40; } 78%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 40; } }
.mc-nivel { opacity: 0; animation: mc-nivel 9s linear infinite; }
.mc-n2 { animation-delay: -6.75s; } .mc-n3 { animation-delay: -4.5s; } .mc-n4 { animation-delay: -2.25s; }
@keyframes mc-nivel { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
.mc-area { opacity: 0; animation: mc-area 9s ease-in-out infinite; }
.mc-t2 { animation-delay: -7.5s; } .mc-t3 { animation-delay: -6s; } .mc-t4 { animation-delay: -4.5s; } .mc-t5 { animation-delay: -3s; } .mc-t6 { animation-delay: -1.5s; }
@keyframes mc-area { 0% { opacity: 0; transform: translateY(4px); } 3%, 14% { opacity: 1; transform: translateY(0); } 16.6%, 100% { opacity: 0; transform: translateY(-4px); } }

/* --- Franja de marcos */
.lp-franja { margin: 0 20px 20px; background: #111a33; border-radius: 24px; padding: 32px 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.lp-franja-titulo { flex: 1 1 260px; }
.lp-franja-titulo p { margin: 0; }
.lp-franja-titulo .grande { font-size: 32px; font-weight: 600; color: #fff; line-height: 1.15; }
.lp-franja-titulo .chico { margin-top: 8px; font-size: 15px; color: var(--lp-tenue); }
.lp-franja-grid { flex: 3 1 600px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.lp-chip { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; padding: 18px 20px; text-decoration: none; display: block; transition: border-color .2s, background .2s; }
.lp-chip:hover { border-color: var(--lp-azul); background: rgba(79, 134, 255, 0.08); }
.lp-chip strong { display: block; font-size: 18px; color: #fff; }
.lp-chip span { display: block; margin-top: 6px; font-size: 14px; color: var(--lp-tenue); }

/* --- Secciones */
.lp-seccion { max-width: 1640px; margin: clamp(88px, 9vw, 160px) auto 0; padding: 0 clamp(20px, 3vw, 60px); }
.lp-seccion h2 { margin: 0; font-size: clamp(30px, 3.4vw, 60px); font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1.1; }
.lp-seccion-intro { margin: 14px 0 0; font-size: 18px; line-height: 1.55; color: var(--lp-suave); max-width: 680px; }
.lp-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.lp-tarjeta { background: var(--lp-tarjeta); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 20px; padding: 30px; }
.lp-tarjeta h3 { margin: 0 0 8px; font-size: 21px; color: #fff; }
.lp-tarjeta p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--lp-suave); }
.lp-etiqueta { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--lp-oro); margin-bottom: 10px; }
.lp-cifra { font-size: 15px; font-weight: 600; color: var(--lp-azul); margin: 0 0 10px !important; }
.lp-dato { font-size: 52px; font-weight: 700; color: var(--lp-oro); line-height: 1; margin-bottom: 10px; }
.lp-enlace { display: inline-block; margin-top: 22px; color: var(--lp-azul) !important; font-weight: 600; text-decoration: none; }
.lp-enlace:hover { text-decoration: underline; }

/* Pasos 01-02-03: se turnan en el mismo ciclo de 9s del radar. */
.mc-paso { --c: var(--lp-azul); position: relative; overflow: hidden; transition: box-shadow .3s; animation: mc-paso 9s ease-in-out infinite; }
.mc-paso:hover { box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 1px var(--c); }
.mc-p2 { --c: var(--lp-naranja); animation-delay: 3s; }
.mc-p3 { --c: var(--lp-oro); animation-delay: 6s; }
@keyframes mc-paso { 0%, 100% { transform: translateY(0); border-color: rgba(255, 255, 255, .06); background: var(--lp-tarjeta); } 4%, 30% { transform: translateY(-8px); border-color: var(--c); background: var(--lp-tarjeta-activa); } 35% { transform: translateY(0); border-color: rgba(255, 255, 255, .06); background: var(--lp-tarjeta); } }
.mc-barra { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--c); transform-origin: 0 50%; transform: scaleX(0); animation: mc-barra 9s linear infinite; }
.mc-p2 .mc-barra, .mc-p2 .mc-marca { animation-delay: 3s; }
.mc-p3 .mc-barra, .mc-p3 .mc-marca { animation-delay: 6s; }
@keyframes mc-barra { 0% { transform: scaleX(0); opacity: 1; } 30% { transform: scaleX(1); opacity: 1; } 35%, 100% { transform: scaleX(1); opacity: 0; } }
.mc-marca { position: absolute; right: 20px; top: -6px; font-size: 120px; font-weight: 800; line-height: 1; color: var(--c); opacity: .07; animation: mc-marca 9s ease-in-out infinite; pointer-events: none; }
@keyframes mc-marca { 0%, 100% { opacity: .07; transform: translateY(0); } 4%, 30% { opacity: .18; transform: translateY(6px); } 35% { opacity: .07; transform: translateY(0); } }
.mc-paso-cabecera { display: flex; align-items: center; justify-content: space-between; position: relative; margin-bottom: 12px; }
.mc-paso-num { font-size: 14px; font-weight: 700; color: var(--c); }
.mc-paso h3, .mc-paso p { position: relative; }
.mc-punto { animation: mc-punto 1.2s ease-in-out infinite; } .mc-d2 { animation-delay: .2s; } .mc-d3 { animation-delay: .4s; }
@keyframes mc-punto { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.mc-flecha { animation: mc-flecha 1.6s ease-in-out infinite; }
@keyframes mc-flecha { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-3px); } }
.mc-col { transform-box: fill-box; transform-origin: 50% 100%; animation: mc-col 2.4s ease-in-out infinite; } .mc-c2 { animation-delay: .25s; } .mc-c3 { animation-delay: .5s; }
@keyframes mc-col { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* --- Compartir (enlace verificable) */
.lp-compartir { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; background: var(--lp-tarjeta); border-radius: 24px; padding: 44px; }
.lp-compartir > div { flex: 1 1 380px; min-width: 0; }
.lp-lista { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.lp-lista li { display: flex; gap: 10px; font-size: 16px; color: var(--lp-suave); line-height: 1.5; }
.lp-lista li::before { content: ""; flex: 0 0 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: rgba(245, 196, 81, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c451' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.lp-vista { background: #0a1128; border: 1px solid var(--lp-linea); border-radius: 18px; overflow: hidden; }
.lp-vista-url { padding: 10px 16px; border-bottom: 1px solid var(--lp-linea); font-family: ui-monospace, monospace; font-size: 13px; color: var(--lp-tenue); }
.lp-vista-cuerpo { padding: 24px; display: grid; gap: 8px; }
.lp-vista-cuerpo strong { font-size: 20px; color: #fff; }
.lp-vista-cuerpo span { color: var(--lp-tenue); font-size: 14px; }
.lp-vista-score { font-size: 64px; font-weight: 700; color: var(--lp-oro); line-height: 1; }
.lp-vista-score small { font-size: 28px; }
.lp-barra { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, .1); }

/* --- Cierre */
.lp-cierre { text-align: center; background: radial-gradient(circle at 50% 0%, #1b3a8f 0%, #0c1b46 45%, #0a1230 100%); border-radius: 28px; padding: 64px 24px; }
.lp-cierre p { color: var(--lp-suave); font-size: 18px; margin: 14px auto 28px; max-width: 560px; }
.lp-cierre .lp-nota { font-size: 14px; margin-top: 22px; }

/* --- Pie de pagina en oscuro */
.lp .sitio-footer { border-top-color: var(--lp-linea); color: var(--lp-tenue); margin-top: 96px; max-width: 1640px; }
.lp .sitio-footer-logo { color: #fff; }
.lp .sitio-footer-links a { color: var(--lp-tenue); }
.lp .sitio-footer-links a:hover { color: #fff; }
.lp .sitio-footer-titulo { color: #fff; }
.lp .sitio-footer-legal { color: #7f8bab; }

/* --- Scroll: barra de progreso, aparicion con zoom y profundidad del hero.
   La aparicion la activa js/revelar.js (clase js-revelar en <html>): sin JS todo se ve igual.
   Usa translate/scale (no transform) para no chocar con las animaciones de los pasos. */
.lp-progreso { position: fixed; left: 0; top: 0; z-index: 50; height: 3px; width: 100%; background: linear-gradient(90deg, var(--lp-azul), var(--lp-oro)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.js-revelar .revelar { opacity: 0; translate: 0 48px; scale: .94; transition: opacity .8s ease, translate .9s cubic-bezier(.2, .7, .2, 1), scale .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 120ms); }
.js-revelar .revelar.visible { opacity: 1; translate: 0 0; scale: 1; }
@supports (animation-timeline: scroll()) {
  .lp-progreso { animation: lp-progreso linear both; animation-timeline: scroll(root); }
  @keyframes lp-progreso { to { transform: scaleX(1); } }
  /* Al bajar, el radar se acerca y se desvanece, y el texto sube: efecto de profundidad. */
  .lp-visual { animation: lp-acercar linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  @keyframes lp-acercar { to { transform: scale(1.35) translateY(8%); opacity: 0; } }
  .lp-hero-texto { animation: lp-subir linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
  @keyframes lp-subir { to { transform: translateY(-12%); opacity: .15; } }
  /* Tarjetas grandes: crecen desde 90% mientras entran en pantalla. */
  .lp-compartir, .lp-cierre { animation: lp-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  @keyframes lp-zoom { from { transform: scale(.88); opacity: .3; } to { transform: scale(1); opacity: 1; } }
}

@media (max-width: 640px) {
  .lp-envoltura { padding: 10px; }
  .lp-nav { padding: 18px 18px; }
  .lp-hero { padding: 20px 18px 56px; }
  .lp-franja { margin: 0 10px 10px; padding: 24px 20px; }
  .lp-compartir { padding: 28px 20px; }
  .lp-seccion { margin-top: 64px; padding: 0 12px; }
  .lp-nav-der .topnav-link { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js-revelar .revelar { opacity: 1; translate: none; scale: none; transition: none; }
  .lp-progreso, .lp-visual, .lp-hero-texto, .lp-compartir, .lp-cierre { animation: none; }
  .mc-arco, .mc-barrido, .mc-orbita, .mc-pulso, .mc-relleno, .mc-check, .mc-nivel, .mc-area,
  .mc-paso, .mc-barra, .mc-marca, .mc-punto, .mc-flecha, .mc-col { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .mc-pulso, .mc-n1, .mc-n2, .mc-n3, .mc-t2, .mc-t3, .mc-t4, .mc-t5, .mc-t6 { opacity: 0; }
  .mc-marca { opacity: .07; }
}

/* === Login y registro en oscuro (<body class="lp acceso-oscuro">) ===
   Mismo esqueleto acceso-split de estilo.css: aqui solo cambian colores y formas. Las
   variables se redefinen para que los textos que el JS colorea con var(--rojo), var(--verde)
   o var(--gris) (ej. "Correo disponible.") se lean bien sobre fondo oscuro. */
.acceso-oscuro {
  --texto: #e8ecf7; --gris: #9aa6c4; --gris-suave: #7f8bab; --borde: rgba(255, 255, 255, 0.18);
  --rojo: #ff8a80; --verde: #6fd39a; --azul: #8fb1ff; --azul-claro: rgba(79, 134, 255, 0.25);
  min-height: 100vh;
}
.acceso-oscuro .acceso-split { gap: 20px; padding: 20px; min-height: 100vh; box-sizing: border-box; }
.acceso-oscuro .acceso-marca { background: radial-gradient(circle at 75% 80%, #1b3a8f 0%, #0c1b46 40%, #070e24 80%); border-radius: 28px; padding: clamp(28px, 4vw, 64px); }
.acceso-oscuro .acceso-marca > * { position: relative; z-index: 1; }
.acceso-oscuro .acceso-logo { align-self: flex-start; background: #fff; color: #0a1638 !important; padding: 9px 15px; border-radius: 12px; font-size: 17px; }
.acceso-oscuro .acceso-marca-inferior { max-width: 560px; }
.acceso-oscuro .acceso-slide h2 { font-size: clamp(26px, 2.5vw, 44px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
.acceso-oscuro .acceso-eyebrow, .acceso-oscuro .acceso-stat-numero { color: var(--lp-oro); }
.acceso-oscuro .acceso-stat-texto, .acceso-oscuro .acceso-stat-cita { color: var(--lp-suave); }
.acceso-oscuro .acceso-dot.activo { background: var(--lp-oro); }
/* Radar decorativo en la esquina superior derecha, en el espacio libre junto al logo: nunca
   detras del titular (que va centrado verticalmente en el panel). */
.acceso-radar { position: absolute !important; z-index: 0 !important; right: -70px; top: -70px; width: min(400px, 46%); opacity: .4; pointer-events: none; }
.acceso-oscuro .acceso-form { background: var(--lp-tarjeta); border-radius: 28px; color: var(--lp-suave); }
.acceso-oscuro .acceso-form-interior { max-width: 440px; }
.acceso-oscuro .acceso-form-interior h1, .acceso-oscuro .acceso-form-interior h2 { color: #fff; font-size: clamp(28px, 2.2vw, 38px); font-weight: 600; letter-spacing: -0.02em; }
.acceso-oscuro label { color: var(--lp-texto); }
.acceso-oscuro input[type=text], .acceso-oscuro input[type=email], .acceso-oscuro select {
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--borde); color: #fff; border-radius: 12px; min-height: 48px;
}
.acceso-oscuro select option { background: #0d1631; color: #fff; }
.acceso-oscuro input::placeholder { color: #8e9abb; }
.acceso-oscuro input[type=checkbox] { accent-color: var(--lp-azul); }
.acceso-oscuro .acceso-form button:not(.enlace-simple) {
  background: var(--lp-azul-boton); border-radius: 12px; min-height: 50px; width: 100%; font: inherit; font-size: 16px; font-weight: 700; box-shadow: none;
}
.acceso-oscuro .acceso-form button:not(.enlace-simple):hover { background: #2552c0; }
.acceso-oscuro .acceso-icono { background: rgba(79, 134, 255, 0.15); }
@media (max-width: 860px) {
  .acceso-oscuro .acceso-split { padding: 10px; gap: 10px; }
  .acceso-radar { width: 210px; top: -50px; right: -50px; opacity: .35; }
}
.lp-linea { display: block; }

/* ===================== Botones (sistema comun) =====================
   .btn + .btn-primario | .btn-oro | .btn-secundario, opcional .btn-chico, y un
   <span class="btn-flecha"> con el icono. .lp-boton / .lp-boton-borde y los botones de
   formularios oscuros heredan el mismo aspecto. */
.btn, .lp-boton, .lp-boton-borde {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 24px; border-radius: 14px; border: 0; font: inherit; font-size: 16px; font-weight: 700;
  text-decoration: none; overflow: hidden; cursor: pointer; white-space: nowrap;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.btn:has(.btn-flecha), .lp-boton:has(.btn-flecha), .lp-boton-borde:has(.btn-flecha) { padding-right: 10px; }
.btn:hover, .lp-boton:hover, .lp-boton-borde:hover { transform: translateY(-2px); }
.btn:active, .lp-boton:active, .lp-boton-borde:active { transform: translateY(0) scale(.98); }
.lp .btn:focus-visible, .lp .lp-boton:focus-visible, .lp .lp-boton-borde:focus-visible, .lp a:focus-visible, .lp button:focus-visible { outline: 3px solid var(--lp-oro); outline-offset: 3px; }
.btn-flecha { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; transition: transform .25s ease; }
.btn:hover .btn-flecha, .lp-boton:hover .btn-flecha, .lp-boton-borde:hover .btn-flecha { transform: translateX(4px); }
.btn-primario, .lp-boton, .lp.acceso-oscuro .acceso-form button:not(.enlace-simple):not(.acceso-dot) {
  color: #fff !important;
  background: linear-gradient(135deg, #4a82ff 0%, #2f64e0 55%, #2453c9 100%);
  box-shadow: 0 10px 30px -8px rgba(47, 100, 224, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primario:hover, .lp-boton:hover, .lp.acceso-oscuro .acceso-form button:not(.enlace-simple):not(.acceso-dot):not(:disabled):hover {
  background: linear-gradient(135deg, #5a8eff 0%, #3a6ff0 55%, #2a5bd6 100%);
  box-shadow: 0 16px 40px -8px rgba(79, 134, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-primario .btn-flecha, .lp-boton .btn-flecha { background: rgba(255, 255, 255, .18); }
.btn-primario::after, .lp-boton::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-160%) skewX(-20deg); animation: btn-brillo 4s ease-in-out infinite;
}
@keyframes btn-brillo { 0%, 70% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(380%) skewX(-20deg); } }
.btn-oro { color: #1a1405 !important; background: linear-gradient(135deg, #ffd77a 0%, #f5c451 50%, #e0a92e 100%); box-shadow: 0 10px 30px -8px rgba(245, 196, 81, .6), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-oro:hover { box-shadow: 0 16px 40px -8px rgba(245, 196, 81, .8); }
.btn-oro .btn-flecha { background: rgba(26, 20, 5, .12); }
.btn-secundario, .lp-boton-borde {
  color: var(--lp-texto) !important; border: 1px solid transparent;
  background: linear-gradient(#0c1735, #0c1735) padding-box, linear-gradient(120deg, rgba(143, 177, 255, .7), rgba(245, 196, 81, .55)) border-box;
}
.btn-secundario:hover, .lp-boton-borde:hover {
  background: linear-gradient(#13214a, #13214a) padding-box, linear-gradient(120deg, #8fb1ff, #f5c451) border-box;
  box-shadow: 0 10px 30px -10px rgba(143, 177, 255, .5);
}
.btn-secundario .btn-flecha, .lp-boton-borde .btn-flecha { background: rgba(255, 255, 255, .07); }
.btn-chico, .lp-nav .lp-boton-borde { min-height: 46px; font-size: 15px; padding-left: 18px; border-radius: 12px; }
.btn-chico .btn-flecha, .lp-nav .btn-flecha { width: 30px; height: 30px; border-radius: 8px; }
.lp button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.lp button:disabled::after { display: none; }
.lp-enlace { position: relative; display: inline-flex !important; align-items: center; gap: 8px; }
.lp-enlace::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.lp-enlace:hover { text-decoration: none !important; }
.lp-enlace:hover::after { transform: scaleX(1); }

/* ===================== Paginas de contenido (body.lp.sitio-oscuro) =====================
   Reviste las clases de estilo.css que ya usan como-funciona, ejemplos, guias, privacidad,
   terminos, seguridad, contacto, aviso legal y 404, sin reescribir su HTML. */
.sitio-oscuro {
  --texto: #e8ecf7; --gris: #a7b1ca; --gris-suave: #7f8bab; --borde: rgba(255, 255, 255, .1);
  --fondo: rgba(255, 255, 255, .04); --azul: #8fb1ff; --azul-oscuro: #b5ccff; --azul-claro: rgba(79, 134, 255, .16);
  /* Colores de estado validados para fondo oscuro (separacion para daltonismo y vision normal). */
  --verde: #34a37a; --rojo: #e0475e; --naranja: #c08a1e; --amarillo: #f5c451; --gris-suave: #7f8bab; --sombra-sm: none; --sombra-md: 0 20px 50px -20px rgba(0, 0, 0, .6);
  min-height: 100vh;
}
.sitio-oscuro .lp-envoltura { padding-bottom: 0; }
.lp-escenario-pagina { max-width: 1720px; margin: 0 auto; }
.lp-nav .activo a, .lp-enlaces a[aria-current="page"] { background: rgba(79, 134, 255, .22); color: #fff; }
.sitio-oscuro .app-topbar { background: transparent; border: 0; padding: 10px clamp(24px, 4vw, 72px) 0; max-width: 1720px; margin: 0 auto; }
.sitio-oscuro .app-content { max-width: 1240px; padding: 24px clamp(16px, 3vw, 40px) 40px; }
.sitio-oscuro h1, .sitio-oscuro h2, .sitio-oscuro h3 { color: #fff; letter-spacing: -0.015em; }
.sitio-oscuro .app-content h1 { font-size: clamp(34px, 4vw, 56px); font-weight: 600; line-height: 1.08; margin-bottom: 14px; }
.sitio-oscuro .app-content h2 { font-size: clamp(22px, 2vw, 30px); font-weight: 600; }
.sitio-oscuro p, .sitio-oscuro li { color: var(--lp-suave); }
.sitio-oscuro strong { color: #fff; }
.sitio-oscuro .ayuda { color: var(--lp-tenue); font-size: .95rem; }
.sitio-oscuro .tarjeta { background: var(--lp-tarjeta); border: 1px solid rgba(255, 255, 255, .06); border-radius: 22px; padding: clamp(22px, 3vw, 40px); margin-bottom: 20px; }
.sitio-oscuro .doc { line-height: 1.7; font-size: 1.05rem; }
.sitio-oscuro .doc p, .sitio-oscuro .doc li { color: #c3cbe0; }
.sitio-oscuro .doc h2 { margin-top: 40px; font-size: clamp(22px, 2vw, 28px); }
.sitio-oscuro .doc-meta { color: var(--lp-tenue); }
.sitio-oscuro .enlace-simple, .sitio-oscuro .doc a:not(.boton):not(.btn) { color: #8fb1ff; }
.sitio-oscuro code { background: rgba(255, 255, 255, .08); border-color: transparent; color: #fff; }
.sitio-oscuro .doc-tabla th { background: rgba(255, 255, 255, .06); color: #fff; }
.sitio-oscuro .doc-tabla td, .sitio-oscuro .doc-tabla th { border-bottom-color: rgba(255, 255, 255, .1); }
.sitio-oscuro .boton:not(.secundario) {
  color: #fff; border-radius: 14px; padding: 14px 22px; font-weight: 700; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #4a82ff 0%, #2f64e0 55%, #2453c9 100%); box-shadow: 0 10px 30px -8px rgba(47, 100, 224, .7);
}
.sitio-oscuro .boton:not(.secundario):hover { transform: translateY(-2px); }
.sitio-oscuro .boton.secundario { color: var(--lp-texto); border: 1px solid transparent; border-radius: 14px; background: linear-gradient(#0c1735, #0c1735) padding-box, linear-gradient(120deg, rgba(143, 177, 255, .7), rgba(245, 196, 81, .55)) border-box; }
/* Guias: checklist como tarjetas, CTA con degradado, FAQ oscuras. */
.sitio-oscuro .checklist { display: grid; gap: 12px; }
.sitio-oscuro .check-item { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); border-radius: 18px; padding: 20px 22px; transition: border-color .25s, transform .25s; }
.sitio-oscuro .check-item:hover { border-color: rgba(143, 177, 255, .5); transform: translateX(4px); }
.sitio-oscuro .check-item strong { font-size: 1.05rem; line-height: 1.45; }
.sitio-oscuro .check-num { width: 36px; height: 36px; border-radius: 11px; background: rgba(79, 134, 255, .18); color: #8fb1ff; }
.sitio-oscuro .check-evidencia { display: inline-block; margin-top: 10px !important; padding: 7px 12px; border-radius: 10px; background: rgba(245, 196, 81, .08); border: 1px solid rgba(245, 196, 81, .25); color: #e6d3a3; font-size: .9rem; }
.sitio-oscuro .cta-guia { background: radial-gradient(circle at 90% 0%, #1b3a8f 0%, #0c1b46 55%, #0a1230 100%); border-radius: 20px; padding: 26px 28px; border: 1px solid rgba(143, 177, 255, .2); }
.sitio-oscuro .cta-guia .boton { color: #fff; background: linear-gradient(135deg, #4a82ff 0%, #2f64e0 55%, #2453c9 100%); }
.sitio-oscuro .faq { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); border-radius: 14px; }
.sitio-oscuro .faq summary { color: #fff; }
.sitio-oscuro .faq[open] { border-color: rgba(143, 177, 255, .4); }
/* Guias (indice) */
.sitio-oscuro .guia-card { background: var(--lp-tarjeta); border-color: rgba(255, 255, 255, .08); color: var(--lp-texto); border-radius: 22px; }
/* Ejemplos */
.sitio-oscuro .categoria-chip { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
.sitio-oscuro .categoria-chip .nombre { color: #fff; }
.sitio-oscuro .ejemplo-caja { background: rgba(245, 196, 81, .08); border: 1px solid rgba(245, 196, 81, .25); border-radius: 12px; }
.sitio-oscuro .ejemplo-caja, .sitio-oscuro .ejemplo-caja p { color: #e6d3a3; }
.sitio-oscuro .ejemplo-numero { background: rgba(79, 134, 255, .18); color: #8fb1ff; }
.sitio-oscuro .roadmap-columna { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); border-top-width: 3px; border-radius: 16px; }
.sitio-oscuro .roadmap-columna:nth-child(1) { border-top-color: #d9534a; }
.sitio-oscuro .roadmap-columna:nth-child(2) { border-top-color: #e09a3a; }
.sitio-oscuro .roadmap-columna:nth-child(3) { border-top-color: #4f86ff; }
.sitio-oscuro .panel-hero-bar-numero { color: var(--lp-oro); }
.sitio-oscuro .progreso-fondo { background: rgba(255, 255, 255, .1); }
/* Mismos colores de estado en leyenda, barra y dona (ver js/paginas/ejemplos.js). */
.sitio-oscuro .panel-barra-segmento.color-cumple { background: var(--verde); }
.sitio-oscuro .panel-barra-segmento.color-parcial { background: var(--naranja); }
.sitio-oscuro .panel-barra-segmento.color-no_cumple { background: var(--rojo); }
.sitio-oscuro .panel-barra-segmento.color-revision { background: var(--gris-suave); }
.sitio-oscuro .check-evidencia { color: #e6d3a3; }
/* Contacto y 404 */
.sitio-oscuro .contacto-caja { background: rgba(79, 134, 255, .1); border-color: rgba(143, 177, 255, .3); border-radius: 18px; }
.sitio-oscuro .contacto-correo { color: #fff; }
.sitio-oscuro .error-404-tarjeta { background: var(--lp-tarjeta); border-color: rgba(255, 255, 255, .08); }
.sitio-oscuro .error-404-numero { color: var(--lp-oro); }
/* Aviso legal y demo usan una barra simple en lugar del nav. */
.sitio-oscuro .barra-superior { background: transparent; border: 0; color: var(--lp-texto); padding: 22px clamp(24px, 4vw, 72px); }
.sitio-oscuro .barra-superior a { color: #8fb1ff; }
.sitio-oscuro .contenedor { max-width: 1000px; }

/* Cabecera de pagina interna (como funciona, guias): bloque con degradado y radar tenue. */
.lp-cabecera { position: relative; overflow: hidden; max-width: 1720px; margin: 20px auto 0; border-radius: 28px; padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 80px); background: radial-gradient(circle at 85% 30%, #1b3a8f 0%, #0c1b46 38%, #070e24 75%); }
.lp-cabecera > * { position: relative; z-index: 1; }
.lp-cabecera h1 { margin: 0; font-size: clamp(40px, 5vw, 80px); line-height: 1.04; font-weight: 600; letter-spacing: -0.02em; color: #fff; max-width: 900px; }
.lp-cabecera p { margin: 20px 0 0; font-size: clamp(17px, 1.2vw, 21px); line-height: 1.55; color: #c3cbe0; max-width: 680px; }
.lp-cabecera .lp-migas { margin: 0 0 18px; font-size: 14px; color: var(--lp-tenue); }
.lp-cabecera .lp-migas a { color: var(--lp-tenue); text-decoration: none; }
.lp-cabecera-radar { position: absolute !important; z-index: 0 !important; right: -60px; top: -40px; width: min(460px, 45%); opacity: .55; pointer-events: none; }

/* ===================== Flujo animado (patron para paginas con pasos) =====================
   <div class="flujo"> con .flujo-pista/.flujo-avance/.flujo-punto y 4 .paso (p1..p4). La linea
   avanza, cada paso se enciende (onda + tarjeta que sube) y queda con un check. Ciclo de 10s. */
.flujo { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.flujo-pista, .flujo-avance { position: absolute; left: 34px; right: 34px; top: 33px; height: 3px; border-radius: 2px; }
.flujo-pista { background: rgba(255, 255, 255, .08); }
.flujo-avance { background: linear-gradient(90deg, #4f86ff, #ffb347, #f5c451, #3fae6e); transform-origin: 0 50%; animation: flujo-avance 10s linear infinite; }
@keyframes flujo-avance { 0% { transform: scaleX(0); opacity: 1; } 75%, 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.flujo-punto { position: absolute; top: 27px; left: 34px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px 4px rgba(143, 177, 255, .8); animation: flujo-viaje 10s linear infinite; }
@keyframes flujo-viaje { 0% { left: 34px; opacity: 1; } 75% { left: calc(100% - 49px); opacity: 1; } 80%, 100% { left: calc(100% - 49px); opacity: 0; } }
.paso { --c: #4f86ff; position: relative; }
.paso.p2 { --c: #ffb347; } .paso.p3 { --c: #f5c451; } .paso.p4 { --c: #3fae6e; }
.paso-nodo { position: relative; width: 68px; height: 68px; border-radius: 50%; background: #0b1430; border: 2px solid rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; color: #7f8bab; animation: paso-n1 10s ease-in-out infinite; }
.paso-nodo::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; animation: paso-o1 10s ease-out infinite; }
.paso-hecho { position: absolute; right: -4px; top: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--c); display: flex; align-items: center; justify-content: center; transform: scale(0); animation: paso-h1 10s ease-in-out infinite; }
.paso-tarjeta { margin-top: 22px; background: var(--lp-tarjeta); border-radius: 20px; padding: 26px; border: 1px solid rgba(255, 255, 255, .06); animation: paso-t1 10s ease-in-out infinite; transition: border-color .25s; }
.paso:hover .paso-tarjeta { border-color: var(--c); }
.paso-num { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--c); }
.paso h2, .paso h3 { margin: 8px 0 8px; font-size: 21px; color: #fff; }
.paso p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--lp-suave); }
.p2 .paso-nodo { animation-name: paso-n2; } .p3 .paso-nodo { animation-name: paso-n3; } .p4 .paso-nodo { animation-name: paso-n4; }
.p2 .paso-nodo::before { animation-name: paso-o2; } .p3 .paso-nodo::before { animation-name: paso-o3; } .p4 .paso-nodo::before { animation-name: paso-o4; }
.p2 .paso-hecho { animation-name: paso-h2; } .p3 .paso-hecho { animation-name: paso-h3; } .p4 .paso-hecho { animation-name: paso-h4; }
.p2 .paso-tarjeta { animation-name: paso-t2; } .p3 .paso-tarjeta { animation-name: paso-t3; } .p4 .paso-tarjeta { animation-name: paso-t4; }
@keyframes paso-n1 { 0%, 92% { border-color: var(--c); color: #fff; background: #13224d; box-shadow: 0 0 30px -4px var(--c); } 100% { border-color: rgba(255,255,255,.14); color: #7f8bab; background: #0b1430; box-shadow: none; } }
@keyframes paso-n2 { 0%, 24% { border-color: rgba(255,255,255,.14); color: #7f8bab; background: #0b1430; box-shadow: none; } 26%, 92% { border-color: var(--c); color: #fff; background: #2a2112; box-shadow: 0 0 30px -4px var(--c); } 100% { border-color: rgba(255,255,255,.14); color: #7f8bab; background: #0b1430; box-shadow: none; } }
@keyframes paso-n3 { 0%, 49% { border-color: rgba(255,255,255,.14); color: #7f8bab; background: #0b1430; box-shadow: none; } 51%, 92% { border-color: var(--c); color: #fff; background: #2a2510; box-shadow: 0 0 30px -4px var(--c); } 100% { border-color: rgba(255,255,255,.14); color: #7f8bab; background: #0b1430; box-shadow: none; } }
@keyframes paso-n4 { 0%, 74% { border-color: rgba(255,255,255,.14); color: #7f8bab; background: #0b1430; box-shadow: none; } 76%, 92% { border-color: var(--c); color: #fff; background: #10281b; box-shadow: 0 0 30px -4px var(--c); } 100% { border-color: rgba(255,255,255,.14); color: #7f8bab; background: #0b1430; box-shadow: none; } }
@keyframes paso-t1 { 0%, 2% { transform: translateY(0); border-color: rgba(255,255,255,.06); } 5%, 22% { transform: translateY(-10px); border-color: var(--c); box-shadow: 0 20px 50px -20px var(--c); } 26%, 100% { transform: translateY(0); border-color: rgba(255,255,255,.06); box-shadow: none; } }
@keyframes paso-t2 { 0%, 25% { transform: translateY(0); border-color: rgba(255,255,255,.06); } 30%, 47% { transform: translateY(-10px); border-color: var(--c); box-shadow: 0 20px 50px -20px var(--c); } 51%, 100% { transform: translateY(0); border-color: rgba(255,255,255,.06); box-shadow: none; } }
@keyframes paso-t3 { 0%, 50% { transform: translateY(0); border-color: rgba(255,255,255,.06); } 55%, 72% { transform: translateY(-10px); border-color: var(--c); box-shadow: 0 20px 50px -20px var(--c); } 76%, 100% { transform: translateY(0); border-color: rgba(255,255,255,.06); box-shadow: none; } }
@keyframes paso-t4 { 0%, 75% { transform: translateY(0); border-color: rgba(255,255,255,.06); } 80%, 92% { transform: translateY(-10px); border-color: var(--c); box-shadow: 0 20px 50px -20px var(--c); } 100% { transform: translateY(0); border-color: rgba(255,255,255,.06); box-shadow: none; } }
@keyframes paso-o1 { 0% { opacity: .9; transform: scale(.9); } 12%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes paso-o2 { 0%, 25% { opacity: 0; transform: scale(.9); } 26% { opacity: .9; transform: scale(.9); } 38%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes paso-o3 { 0%, 50% { opacity: 0; transform: scale(.9); } 51% { opacity: .9; transform: scale(.9); } 63%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes paso-o4 { 0%, 75% { opacity: 0; transform: scale(.9); } 76% { opacity: .9; transform: scale(.9); } 88%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes paso-h1 { 0%, 20% { transform: scale(0); } 24%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes paso-h2 { 0%, 45% { transform: scale(0); } 49%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes paso-h3 { 0%, 70% { transform: scale(0); } 74%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes paso-h4 { 0%, 86% { transform: scale(0); } 89%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@media (max-width: 900px) {
  .flujo { grid-template-columns: 1fr; }
  .flujo-pista, .flujo-avance, .flujo-punto { display: none; }
}

/* Tarjetas con halo de color al pasar el mouse (reportes, guias). */
.lp-halo { --c: var(--lp-azul); position: relative; overflow: hidden; display: block; text-decoration: none; background: var(--lp-tarjeta); border-radius: 22px; padding: 30px; border: 1px solid rgba(255, 255, 255, .06); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.lp-halo:hover { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 24px 60px -30px var(--c); }
.lp-halo::before { content: ""; position: absolute; right: -60px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, var(--c), transparent 70%); opacity: .12; transition: opacity .3s; pointer-events: none; }
.lp-halo:hover::before { opacity: .3; }
.lp-halo h2, .lp-halo h3 { margin: 16px 0 8px; font-size: 22px; color: #fff; }
.lp-halo p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--lp-suave); }
.lp-pildora { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); border-radius: 999px; padding: 5px 10px; }
.lp-guia-arte { margin: -30px -30px 22px; height: 170px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--c) 70%, #0c1b46) 0%, #0c1b46 70%); }
.lp-halo .lp-leer { display: inline-flex; margin-top: 18px; font-weight: 700; color: var(--c); }

@media (prefers-reduced-motion: reduce) {
  .btn-primario::after, .lp-boton::after { animation: none; display: none; }
  .flujo *, .flujo *::before { animation: none !important; }
  .paso-hecho { transform: scale(1); }
}
.lp-pagina { padding: 0 20px; }
.lp-cierre-botones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
@media (max-width: 640px) { .lp-pagina { padding: 0 10px; } }

/* Etiqueta dorada "ejemplo / empresa ficticia" (ejemplos). */
.lp-aviso-ficticio { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px !important; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(245, 196, 81, .45); background: rgba(245, 196, 81, .1); color: var(--lp-oro) !important; font-size: clamp(14px, 1.1vw, 16px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lp-aviso-ficticio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-oro); }

/* Resultado compartido (/trust) en oscuro. */
.trust-cabecera { max-width: 1040px; margin: 0 auto; padding: 24px 20px 8px; }
.trust-sello { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); font-size: 14px; color: var(--lp-suave); }
.trust-oscuro .contenedor { max-width: 1040px; padding: 16px 20px 80px; }
.trust-oscuro .tarjeta h1 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; margin: 0 0 8px; }
.trust-oscuro .stat-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.trust-oscuro .stat-caja { max-width: none; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; }
.trust-oscuro .stat-caja:first-child { background: rgba(245, 196, 81, .08); border-color: rgba(245, 196, 81, .3); }
.trust-oscuro .stat-caja:first-child .stat-numero { color: var(--lp-oro); }
.trust-oscuro .stat-etiqueta { color: var(--lp-tenue); }
.trust-oscuro .progreso-fondo { background: rgba(255, 255, 255, .1); }
.trust-oscuro .aviso-ejemplo { background: radial-gradient(circle at 90% 0%, #3a2d0c 0%, #1a1608 60%); border: 1px solid rgba(245, 196, 81, .35); border-radius: 18px; padding: 18px 22px; color: #e6d3a3; }
.trust-oscuro .aviso-ejemplo strong { color: var(--lp-oro); }
.trust-oscuro .aviso-ejemplo .boton { color: #1a1405; background: linear-gradient(135deg, #ffd77a 0%, #f5c451 50%, #e0a92e 100%); box-shadow: 0 10px 30px -8px rgba(245, 196, 81, .6); }

/* ===================== Enlaces de texto =====================
   En un texto: azul claro con subrayado tenue que se completa al pasar el mouse.
   Atajos de navegacion (.lp-atajo): fila con icono, texto y flecha que avanza. */
.lp .enlace-simple {
  color: #8fb1ff; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(143, 177, 255, .35); text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s;
}
.lp .enlace-simple:hover { color: #c3d5ff; text-decoration-color: currentColor; }
.acceso-cuenta { margin: 22px 0 0; color: var(--lp-suave); }
.acceso-legal { margin: 26px 0 0; font-size: .82rem; color: var(--lp-tenue); }
.acceso-legal .enlace-simple { font-weight: 600; }
.lp-atajos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 18px; }
.lp-atajo {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; text-decoration: none;
  color: var(--lp-texto) !important; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08);
  transition: background .2s, border-color .2s, transform .2s;
}
.lp-atajo:hover { background: rgba(79, 134, 255, .1); border-color: rgba(143, 177, 255, .45); transform: translateY(-1px); }
.lp-atajo-icono { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(79, 134, 255, .16); color: #8fb1ff; flex: 0 0 auto; }
.lp-atajo-texto { flex: 1; font-weight: 600; font-size: 15px; }
.lp-atajo-flecha { color: var(--lp-tenue); transition: transform .25s, color .25s; }
.lp-atajo:hover .lp-atajo-flecha { transform: translateX(4px); color: #8fb1ff; }

/* ===================== Ejemplos ===================== */
.ej-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 4vw, 64px); }
.ej-cabecera-texto { flex: 1 1 520px; min-width: 0; }
.ej-cabecera-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ej-mini { flex: 0 1 340px; min-width: 260px; margin-left: auto; background: rgba(6, 11, 26, .55); border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; padding: 26px; backdrop-filter: blur(6px); }
.ej-mini .lp-aviso-ficticio { font-size: 12px; padding: 6px 12px; }
.ej-anillo { display: block; width: 180px; height: 180px; margin: 6px auto 14px; font-family: inherit; }
.ej-anillo-valor { animation: ej-anillo 1.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ej-anillo { from { stroke-dasharray: 0 100; } }
.ej-mini-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ej-mini-lista li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--lp-suave); }
.ej-mini-lista li span { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.ej-mini-lista strong { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }

.ej-panel { margin-top: 32px; background: var(--lp-tarjeta); border: 1px solid rgba(255, 255, 255, .06); border-radius: 24px; padding: clamp(24px, 3vw, 40px); }
.ej-panel-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.ej-panel-numero { font-size: clamp(56px, 6vw, 84px); font-weight: 700; line-height: 1; color: var(--lp-oro); letter-spacing: -0.03em; }
.ej-panel-numero span { font-size: .45em; margin-left: 2px; }
.ej-panel-texto { flex: 1 1 420px; min-width: 0; }
.ej-panel-mensaje { margin: 0 0 14px; font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; color: #fff !important; }
.ej-barra { height: 14px; border-radius: 7px; }
.ej-leyenda { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ej-leyenda li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lp-suave); }
.ej-leyenda span { width: 10px; height: 10px; border-radius: 3px; }

.ej-subtitulo { margin: 48px 0 18px; font-size: clamp(20px, 1.6vw, 26px) !important; font-weight: 600; color: #fff; }
.ej-roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.ej-plazo { --c: var(--lp-azul); position: relative; background: var(--lp-tarjeta); border: 1px solid rgba(255, 255, 255, .06); border-radius: 20px; padding: 24px 24px 22px; overflow: hidden; }
.ej-plazo::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--c); }
.ej-plazo-etiqueta { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.ej-plazo p { margin: 8px 0 16px; font-size: 15px; color: var(--lp-tenue); }
.ej-plazo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ej-plazo li { padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: 14px; color: var(--lp-texto); }

.ej-graficos { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ej-grafico { margin: 0; min-width: 0; background: var(--lp-tarjeta); border: 1px solid rgba(255, 255, 255, .06); border-radius: 22px; padding: 26px; }
.ej-grafico figcaption strong { display: block; font-size: 19px; color: #fff; }
.ej-grafico figcaption span { display: block; margin-top: 4px; font-size: 14px; color: var(--lp-tenue); }
.ej-lienzo { position: relative; height: 380px; margin-top: 14px; min-width: 0; }
.ej-lienzo-radar { height: 420px; }

.ej-areas { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ej-area { padding: 28px; }
.ej-area-cabecera { display: flex; align-items: center; gap: 14px; }
.ej-area-cabecera h3 { margin: 0 !important; font-size: 21px !important; }
.ej-area-num { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.ej-area-datos { margin: 18px 0 0; display: grid; gap: 12px; }
.ej-area-datos div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: baseline; }
.ej-area-datos dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-tenue); }
.ej-area-datos dd { margin: 0; font-size: 16px; line-height: 1.55; color: #c3cbe0; }
.ej-caso { margin: 18px 0 0 !important; padding: 14px 16px; border-radius: 14px; background: rgba(245, 196, 81, .07); border: 1px solid rgba(245, 196, 81, .22); font-size: 15px !important; line-height: 1.55; color: #e6d3a3 !important; }
.ej-caso span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-oro); }

@media (max-width: 900px) {
  .ej-graficos, .ej-areas { grid-template-columns: 1fr; }
  .ej-mini { margin-left: 0; flex-basis: 100%; }
  .ej-lienzo-radar { height: 360px; }
  .ej-area-datos div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .ej-anillo-valor { animation: none; } }

/* Dona de Ejemplos: anillo fino con el % al centro y leyenda con cantidad, % y barra. */
.ej-dona { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.ej-dona-lienzo { position: relative; aspect-ratio: 1; max-width: 300px; width: 100%; margin: 0 auto; }
.ej-dona-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ej-dona-centro strong { font-size: clamp(34px, 3vw, 44px); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.02em; }
.ej-dona-centro span { margin-top: 6px; font-size: 13px; color: var(--lp-tenue); }
.ej-dona-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ej-dona-fila { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.ej-dona-marca { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: 0 0 auto; align-self: center; }
.ej-dona-nombre { flex: 1; color: var(--lp-suave); }
.ej-dona-fila strong { color: #fff; font-size: 17px; font-variant-numeric: tabular-nums; }
.ej-dona-fila em { font-style: normal; width: 42px; text-align: right; color: var(--lp-tenue); font-variant-numeric: tabular-nums; }
.ej-dona-barra { margin: 8px 0 0 20px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.ej-dona-barra span { display: block; height: 100%; border-radius: 2px; background: var(--c); }
@media (max-width: 640px) { .ej-dona { grid-template-columns: 1fr; } }

/* ---------- /demo: cuentas demo ---------- */
.demo-pagina { max-width: 1180px; }
.demo-cabecera h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); }
.demo-cabecera p { max-width: 680px; margin: 12px 0 0; font-size: 18px; line-height: 1.6; color: #c3cbe0; }
.demo-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.sitio-oscuro .demo-cuenta { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-top: 3px solid var(--c); margin: 0; }
.demo-cuenta .lp-pildora { align-self: flex-start; }
.demo-cuenta h2 { margin: 6px 0 0; font-size: 24px; }
.demo-meta { margin: 0; font-size: 15px; color: var(--lp-tenue); }
.demo-datos { margin: 6px 0 10px; display: grid; gap: 10px; }
.demo-datos div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: baseline; }
.demo-datos dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-tenue); }
.demo-datos dd { margin: 0; font-size: 15px; color: #c3cbe0; }
.demo-datos dd strong { font-size: 20px; color: #fff; }
.demo-cuenta .btn { margin-top: auto; align-self: flex-start; }
.demo-nota { margin-top: 24px; font-size: 14px; color: var(--lp-tenue); }