:root {
  --azul: #2563EB;
  --azul-claro: #7CA6FF;
  --cian: #7CE0FF;
  --plata: #A7B1C0;
  --marino: #0B1B4D;
  --noche: #07123A;
  --tinta: #121A33;
  --suave: #55607A;
  --fondo: #F6F8FC;
  --linea: #DCE2EE;
  --blanco: #FFFFFF;
  --ok: #16A34A;
  --aviso: #D97706;
  --f-marca: "Poppins", "Segoe UI", sans-serif;
  --f-texto: "Inter", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--f-texto); font-size: 17px; line-height: 1.6;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
a { color: var(--azul); }
.ancho { max-width: 1120px; margin: 0 auto; }

/* Fondo vivo de las zonas claras: manchas azules que derivan y una trama de puntos que se desliza */
body::before, body::after { content: ""; position: fixed; pointer-events: none; z-index: -1; }
body::before { inset: -20%;
  background: radial-gradient(28% 34% at 14% 24%, rgba(37,99,235,.24), transparent 70%),
              radial-gradient(26% 32% at 86% 58%, rgba(124,224,255,.30), transparent 70%),
              radial-gradient(24% 30% at 48% 96%, rgba(37,99,235,.18), transparent 70%),
              radial-gradient(20% 26% at 70% 8%, rgba(124,166,255,.22), transparent 70%); }
body::after { inset: -26px;
  background-image: radial-gradient(rgba(37,99,235,.2) 1.1px, transparent 1.3px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent 85%); mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent 85%); }
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: fondo 22s ease-in-out infinite alternate; }
  body::after { animation: trama 9s linear infinite; }
}
@keyframes fondo { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(4%, -3%, 0) rotate(4deg) scale(1.06); } 100% { transform: translate3d(-4%, 3%, 0) rotate(-3deg) scale(1.02); } }
@keyframes trama { to { transform: translate3d(26px, 26px, 0); } }
:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 3px; }

/* ---------- Barra ---------- */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; flex-wrap: wrap; }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--marino); }
.marca svg { width: 46px; height: auto; }
.nombre { font-family: var(--f-marca); font-weight: 800; font-style: italic; font-size: 26px; letter-spacing: -0.5px; }
.nombre b { color: var(--azul); font-weight: 800; }
.barra nav { display: flex; align-items: center; gap: 22px; font-size: 15px; flex-wrap: wrap; }
.barra nav a { color: var(--suave); text-decoration: none; }
.barra nav a:hover { color: var(--marino); }
.oscuro .nombre { color: #fff; }
.oscuro .nombre b { color: var(--azul-claro); }
.oscuro nav a { color: #C9D3EA; }
.oscuro nav a:hover { color: #fff; }
.barra nav a.portal { color: #fff; border: 1.5px solid rgba(255,255,255,.55); padding: 8px 16px; border-radius: 999px; font-weight: 600; transition: background .2s, border-color .2s; }
.barra nav a.portal:hover { background: var(--azul); border-color: var(--azul); }

/* ---------- Portada ---------- */
.portada { position: relative; overflow: hidden; background: var(--noche); color: #fff;
  margin-inline: calc(-1 * max(20px, env(safe-area-inset-left, 0px))); padding-inline: max(20px, env(safe-area-inset-left, 0px)); padding-block: 0 84px; }
.portada::before { content: ""; position: absolute; inset: -25%; pointer-events: none;
  background: radial-gradient(38% 46% at 80% 36%, rgba(37,99,235,.6), transparent 70%),
              radial-gradient(34% 42% at 10% 90%, rgba(124,224,255,.16), transparent 70%); }
#red { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.portada .ancho { position: relative; z-index: 1; }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; padding-top: 28px; }
.hero-texto { display: grid; gap: 22px; }
.etiqueta { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--plata); font-weight: 600; }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 0 0 rgba(124,224,255,.7); }
h1 { font-family: var(--f-marca); font-weight: 800; font-style: italic; font-size: clamp(36px, 6vw, 64px); line-height: 1.04; margin: 0; letter-spacing: -1px; text-wrap: balance; }
h1 b { background: linear-gradient(90deg, #7CA6FF, #7CE0FF); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.portada p.sub { margin: 0; max-width: 52ch; color: #C9D3EA; font-size: 19px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.boton { display: inline-block; background: var(--azul); color: #fff; text-decoration: none; font-weight: 600; padding: 14px 26px; border-radius: 10px; width: fit-content; transition: background .2s, transform .2s; border: 1.5px solid var(--azul); }
.boton:hover { background: #1D4FCB; transform: translateY(-2px); }
.boton.claro { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.boton.claro:hover { background: rgba(255,255,255,.1); }
.garantias { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: #A9B8DC; }
.garantias li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cian); margin-right: 8px; }

/* Escena del hero: panel con candidatos y avisos */
.escena { position: relative; min-height: 380px; display: grid; align-items: center; }
.panel-mini { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); }
.pm-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; }
.pm-cab small { display: block; color: #8FA2D4; font-size: 12px; }
.pm-cab b { font-size: 15px; }
.chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.chip.alta { background: rgba(217,119,6,.18); color: #FFB454; }
.chip.media { background: rgba(124,166,255,.18); color: #A9C3FF; }
.chip.baja { background: rgba(167,177,192,.2); color: #C3CBD8; }
.cands { list-style: none; margin: 0; padding: 6px 0 0; display: grid; }
.cands li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 90px 44px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.cands li:last-child { border-bottom: 0; }
.av2 { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-marca); font-weight: 700; font-size: 14px; background: linear-gradient(135deg, var(--azul), var(--cian)); color: #fff; }
.cd b { display: block; font-size: 14.5px; line-height: 1.2; }
.cd small { color: #8FA2D4; font-size: 12px; }
.barra-m { height: 7px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.barra-m i { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: 99px; background: linear-gradient(90deg, var(--azul), var(--cian)); transform-origin: left; }
.cands em { font-style: normal; font-weight: 700; font-size: 14px; text-align: right; }
.toast { position: absolute; background: #fff; color: var(--tinta); border-radius: 12px; padding: 11px 16px 11px 14px; font-size: 13.5px; font-weight: 600; box-shadow: 0 18px 40px -16px rgba(0,0,0,.55); display: flex; gap: 10px; align-items: center; max-width: 270px; }
.toast::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; }
.toast small { display: block; font-weight: 500; color: var(--suave); font-size: 12px; }
.t1 { right: -8px; top: -14px; }
.t2 { left: -18px; bottom: -10px; }
.t2::before { background: var(--azul); }

@media (prefers-reduced-motion: no-preference) {
  .portada::before { animation: deriva 16s ease-in-out infinite alternate; }
  .punto { animation: latido 2.4s ease-out infinite; }
  .hero-texto > * { animation: sube .8s cubic-bezier(.2,.8,.2,1) both; }
  .hero-texto > *:nth-child(2) { animation-delay: .08s; }
  .hero-texto > *:nth-child(3) { animation-delay: .16s; }
  .hero-texto > *:nth-child(4) { animation-delay: .24s; }
  .hero-texto > *:nth-child(5) { animation-delay: .32s; }
  .panel-mini { animation: sube .9s cubic-bezier(.2,.8,.2,1) .2s both, flota 7s ease-in-out 1.2s infinite alternate; }
  .barra-m i { animation: llena 1.5s cubic-bezier(.2,.8,.2,1) both; }
  .cands li:nth-child(1) .barra-m i { animation-delay: .7s; }
  .cands li:nth-child(2) .barra-m i { animation-delay: .9s; }
  .cands li:nth-child(3) .barra-m i { animation-delay: 1.1s; }
  .toast { animation: entra .6s cubic-bezier(.2,.8,.2,1) both, flota 6s ease-in-out infinite alternate; }
  .t1 { animation-delay: 1.6s, 2.2s; }
  .t2 { animation-delay: 2.6s, 3s; }
}
@keyframes deriva { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 3%, 0) scale(1.08); } }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(124,224,255,.7); } 70%, 100% { box-shadow: 0 0 0 12px rgba(124,224,255,0); } }
@keyframes sube { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes flota { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@keyframes llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes entra { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Secciones ---------- */
section.bloque { padding-block: 84px 0; }
.sobre { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul); font-weight: 700; margin: 0 0 10px; }
h2 { font-family: var(--f-marca); font-weight: 700; font-size: clamp(25px, 4vw, 38px); line-height: 1.15; margin: 0 0 12px; color: var(--marino); text-wrap: balance; }
.intro { color: var(--suave); max-width: 60ch; margin: 0 0 32px; }
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.dos-col.inv > :first-child { order: 2; }
.puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.puntos li { padding-left: 30px; position: relative; color: var(--tinta); }
.puntos li::before { content: ""; position: absolute; left: 0; top: .45em; width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(135deg, var(--azul) 50%, var(--plata) 50%); }

/* Pasos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; counter-reset: paso; position: relative; }
.pasos li { counter-increment: paso; background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; padding: 22px 20px; position: relative; transition: transform .25s, box-shadow .25s; }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--azul), var(--cian)); color: #fff; font-family: var(--f-marca); font-weight: 800; font-size: 16px; margin-bottom: 14px; }
.pasos h3 { font-size: 16.5px; margin: 0 0 6px; color: var(--marino); line-height: 1.25; }
.pasos p { margin: 0; font-size: 14.5px; color: var(--suave); }
.pasos li:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -20px rgba(11,27,77,.5); }

/* Panel de ejemplo */
.ventana { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; box-shadow: 0 30px 70px -36px rgba(11,27,77,.5); overflow: hidden; }
.v-barra { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #EEF2F9; border-bottom: 1px solid var(--linea); }
.v-barra i { width: 10px; height: 10px; border-radius: 50%; background: #CBD3E2; }
.v-barra span { margin-left: 10px; font-size: 12.5px; color: var(--suave); }
.v-tabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--linea); font-size: 14px; flex-wrap: wrap; }
.v-tabs span { padding: 8px 14px; color: var(--suave); border-bottom: 2px solid transparent; }
.v-tabs span.on { color: var(--azul); border-color: var(--azul); font-weight: 600; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); font-weight: 600; padding: 12px 16px 8px; }
.tabla td { padding: 13px 16px; border-top: 1px solid var(--linea); }
.tabla td b { color: var(--marino); display: block; line-height: 1.25; }
.tabla td small { color: var(--suave); }
.chip.c-alta { background: #FEF0DC; color: #A85A00; }
.chip.c-media { background: #E3ECFF; color: #1D4FCB; }
.chip.c-baja { background: #ECEFF4; color: #55607A; }
.pct { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--marino); }
.pct i { width: 54px; height: 6px; border-radius: 9px; background: #E3E8F2; overflow: hidden; display: inline-block; }
.pct i::after { content: ""; display: block; height: 100%; width: calc(var(--p) * 1%); background: linear-gradient(90deg, var(--azul), var(--cian)); transform-origin: left; }
.avisos { display: grid; gap: 10px; padding: 14px 16px 18px; background: #F8FAFE; border-top: 1px solid var(--linea); }
.aviso { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--tinta); }
.aviso::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.aviso.az::before { background: var(--azul); }
.nota-ej { font-size: 12.5px; color: var(--suave); margin: 12px 4px 0; }
.scroll { overflow-x: auto; }

/* Perfil y preguntas */
.perfil { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; padding: 22px; box-shadow: 0 30px 70px -36px rgba(11,27,77,.5); display: grid; gap: 4px; }
.pf-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 14px; flex-wrap: wrap; }
.pf-cab b { color: var(--marino); font-size: 17px; }
.pf-fila { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--linea); font-size: 15px; }
.pf-fila em { font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.ob { background: #E3ECFF; color: #1D4FCB; }
.de { background: #ECEFF4; color: #55607A; }
.pf-add { margin-top: 10px; border: 1.5px dashed var(--plata); border-radius: 10px; padding: 11px; text-align: center; color: var(--suave); font-size: 14px; }

/* Diagrama del candidato */
.diagrama { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; padding: 10px; }
.diagrama svg { display: block; width: 100%; min-width: 880px; height: auto; font-family: var(--f-texto); }
.nodo { fill: #fff; stroke: #B9C3D6; stroke-width: 1.6; }
.nodo.az { stroke: var(--azul); }
.nodo.fin { fill: var(--azul); stroke: var(--azul); }
.nt { font-size: 14px; font-weight: 600; fill: var(--marino); text-anchor: middle; }
.ns { font-size: 12px; fill: var(--suave); text-anchor: middle; }
.nt.b, .ns.b { fill: #fff; }
.fl { fill: none; stroke: #8A97AE; stroke-width: 1.8; }
.fl.pt { stroke-dasharray: 5 4; }
.et { font-size: 12.5px; font-weight: 700; fill: var(--marino); }
.leyenda-d { font-size: 13.5px; color: var(--suave); margin: 12px 8px 4px; }

/* Entrevista de ejemplo */
.movil { background: var(--marino); border-radius: 26px; padding: 14px; box-shadow: 0 24px 60px -24px rgba(11,27,77,.55); max-width: 400px; width: 100%; justify-self: center; }
.movil-barra { display: flex; align-items: center; gap: 12px; color: #fff; padding: 8px 10px 14px; }
.movil-barra small { display: block; color: #8FA2D4; font-size: 12px; }
.movil-barra b { font-size: 14px; }
.av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--azul), var(--cian)); display: grid; place-items: center; font-family: var(--f-marca); font-weight: 800; font-style: italic; color: #fff; }
.msgs { background: #EAF0FB; border-radius: 16px; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 420px; }
.m { margin: 0; max-width: 84%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; }
.m.ia { background: #fff; color: var(--tinta); border-top-left-radius: 4px; align-self: flex-start; }
.m.yo { background: var(--azul); color: #fff; border-top-right-radius: 4px; align-self: flex-end; }
.msgs.anim .m { opacity: 0; }
.msgs.anim.vis .m { animation: msg .5s ease-out var(--d, 0s) both; }
@keyframes msg { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* Precio */
.precio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.precio > div { background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; padding: 26px 24px; }
.precio > div.fuerte { background: var(--marino); border-color: var(--marino); color: #fff; }
.precio .tag { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--azul); }
.precio .fuerte .tag { color: var(--cian); }
.precio h3 { font-family: var(--f-marca); font-size: 24px; margin: 6px 0 8px; color: var(--marino); }
.precio .fuerte h3 { color: #fff; }
.precio p { margin: 0; color: var(--suave); font-size: 15px; }
.precio .fuerte p { color: #C9D3EA; }

/* Contacto y pie */
.contacto { margin-block: 84px; background: var(--marino); color: #fff; border-radius: 20px; padding: 44px 36px; display: grid; gap: 16px; position: relative; overflow: hidden; }
.contacto::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.7), transparent 70%); }
.contacto > * { position: relative; z-index: 1; }
.contacto h2 { color: #fff; margin: 0; }
.contacto p { margin: 0; color: #C9D3EA; max-width: 56ch; }
.contacto .acciones { margin-top: 6px; }

/* Páginas legales */
.legal { padding-block: 18px 72px; max-width: 74ch; }
.legal h1 { color: var(--marino); font-style: normal; font-size: clamp(28px, 5vw, 40px); max-width: none; margin-bottom: 6px; background: none; }
.legal h2 { font-size: 21px; margin: 34px 0 8px; }
.legal p, .legal li { color: #2A3350; }
.legal ul { padding-left: 22px; }
.fecha { color: var(--suave); font-size: 14px; margin: 0 0 18px; }
.borrador { background: #FFF6DD; border: 1px solid #E9D58B; color: #5B4A00; border-radius: 10px; padding: 12px 16px; font-size: 14px; margin: 18px 0; }

footer { border-top: 1px solid var(--linea); padding-block: 28px 40px; color: var(--suave); font-size: 14px; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--suave); }

/* Aparición al desplazarse (solo con JS; sin JS todo se ve) */
.rv { opacity: 0; transform: translateY(20px); }
.rv.vis { opacity: 1; transform: none; transition: opacity .65s ease var(--r, 0s), transform .65s ease var(--r, 0s); }
.vis .pct i::after, .vis.pct i::after { animation: llena 1.2s cubic-bezier(.2,.8,.2,1) .2s both; }

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .escena { min-height: 0; gap: 12px; }
  .toast { position: relative; inset: auto; max-width: none; }
  .dos-col { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dos-col.inv > :first-child { order: 0; }
  section.bloque { padding-block: 64px 0; }
  .contacto { padding: 32px 22px; }
  .tabla .oc { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }