:root{--bg:#f7f8fc;--alt:#eef2fb;--card:#fff;--ink:#1b2437;--muted:#5d677d;--line:#e2e7f2;--brand:#1e3a6e;--brand2:#2f6fdc;--accent:#f2a900;--ok:#15915b;--bad:#d23b3b;--shadow:0 1px 2px rgba(20,30,60,.06),0 10px 28px rgba(20,30,60,.07)}
@media (prefers-color-scheme:dark){:root{--bg:#0f1524;--alt:#131b2f;--card:#171f33;--ink:#e8ecf6;--muted:#9aa5bd;--line:#26304a;--brand:#7fa6ff;--brand2:#5b8cff;--shadow:0 1px 2px rgba(0,0,0,.4)}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--brand2)}
.envoltura{max-width:1100px;margin:auto;padding:0 20px}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--line)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700}
.mark{width:40px;height:40px;border-radius:12px;background:var(--accent);color:#1b2437;display:grid;place-items:center;font-weight:800}
.top nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.top nav a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-size:15px}
.top nav a:hover{background:var(--alt)}
.top nav a.acceso{background:var(--brand2);color:#fff;font-weight:600}
.menu{display:none;font-size:22px;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px 10px}
.hero{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:84px 0 92px}
.hero h1{font-size:clamp(30px,5vw,50px);line-height:1.15;max-width:720px;margin:14px 0}
.hero .lead{max-width:640px;font-size:18px;opacity:.92}
.chip{display:inline-block;padding:5px 14px;border-radius:99px;background:rgba(255,255,255,.16);font-size:14px}
.acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.boton{display:inline-block;padding:12px 22px;border-radius:12px;background:var(--accent);color:#1b2437;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:16px}
.boton.claro{background:rgba(255,255,255,.16);color:#fff}
.seccion{padding:64px 0}.seccion.alt{background:var(--alt)}
.seccion h2{font-size:30px;margin-bottom:10px}
.sub{color:var(--muted);max-width:640px;margin-bottom:24px}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:20px}
.tarjeta{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.tarjeta h3{font-size:18px;margin-bottom:6px}.tarjeta p,.tarjeta li{color:var(--muted)}
.tarjeta ul{padding-left:18px}
.ico{font-size:28px;display:block;margin-bottom:8px}
.centro{text-align:center;margin-top:28px}
.agenda{display:grid;gap:12px;margin-top:16px}
.evento{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.fecha{min-width:62px;text-align:center;border-radius:12px;background:var(--brand2);color:#fff;padding:8px 6px;line-height:1.1}
.fecha b{display:block;font-size:22px}.fecha small{font-size:12px;text-transform:uppercase}
.dos{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.pasos{margin:0 0 0 20px;color:var(--muted)}
.formulario{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow);display:grid;gap:14px}
.formulario label{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.formulario input,.formulario select,.formulario textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{outline:2px solid var(--brand2);outline-offset:1px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex!important;gap:10px;align-items:flex-start;color:var(--ink)!important}
.check input{width:auto;margin-top:5px}
.trampa{position:absolute;left:-9999px;height:0;overflow:hidden}
.legal{font-size:14px;color:var(--muted)}.legal p{margin-top:8px}
.msg{padding:12px 14px;border-radius:10px;font-size:15px}
.msg.err{background:#fde3e3;color:#9a2020}.msg.ok{background:#e0f5ec;color:#0c6b43}
.pie{background:var(--brand);color:#fff;padding:22px 0;font-size:14px;text-align:center}
@media(max-width:860px){
  .tres,.dos,.fila{grid-template-columns:1fr}.dos{gap:24px}
  .menu{display:block}
  .top nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--card);border-bottom:1px solid var(--line);padding:10px 20px}
  .top nav.abierto{display:flex}
  .hero{padding:56px 0 64px}.seccion{padding:44px 0}
}

/* Modos: plataforma (sin codigo) e institucion (con ?i=codigo) */
[data-modo=plataforma] .solo-inst,[data-modo=institucion] .solo-plat{display:none!important}
.top nav span{display:contents}
.codigo-form{margin-top:26px;max-width:640px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:20px;backdrop-filter:blur(10px)}
.codigo-form label{display:block;font-size:14px;margin-bottom:8px;opacity:.95}
.codigo-fila{display:flex;gap:10px;flex-wrap:wrap}
.codigo-fila input{flex:1;min-width:200px;font:inherit;padding:12px 14px;border-radius:12px;border:0;background:#fff;color:#10232c;font-weight:600}
.nota-codigo{margin-top:8px;font-size:14px;min-height:20px;opacity:.95}
.demo{margin-top:14px;font-size:15px}.demo a{color:#fff;font-weight:700}

/* ===== Portada de la plataforma (rediseno) ===== */
[hidden]{display:none!important}
.hero.plat{--h1:#12295c;--h2:#2f6fdc;background:radial-gradient(900px 420px at 85% 0,rgba(242,169,0,.22),transparent 60%),linear-gradient(135deg,var(--h1),var(--h2));padding:72px 0 88px;overflow:hidden}
.hero-dos{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero.plat h1{max-width:none}
.escena{position:relative;display:grid;place-items:center;min-height:430px}
.telefono{width:min(300px,100%);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:34px;padding:22px 14px 16px;backdrop-filter:blur(14px);box-shadow:0 30px 60px rgba(5,12,40,.35);display:grid;gap:10px}
.tel-hora{text-align:center;margin-bottom:6px}.tel-hora b{display:block;font-size:44px;line-height:1;font-weight:300}.tel-hora span{font-size:13px;opacity:.85}
.aviso{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.92);color:#1b2437;border-radius:16px;padding:10px 12px;font-size:13px;line-height:1.35}
.aviso small{display:block;color:#5d677d;font-size:11px}.aviso b{display:block;font-size:13px}.aviso span:not(.ai){color:#46506a}
.ai{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:17px}
.ai.t1{background:#dbe8ff}.ai.t2{background:#ffe9c2}.ai.t3{background:#d9f3e6}
.chapa{position:absolute;background:var(--accent);color:#1b2437;font-weight:700;font-size:13px;padding:8px 14px;border-radius:99px;box-shadow:0 10px 24px rgba(5,12,40,.3)}
.chapa.c1{left:6px;top:30px;transform:rotate(-4deg)}.chapa.c2{right:6px;bottom:28px;transform:rotate(3deg);background:#fff}
.confianza{background:var(--card);border-bottom:1px solid var(--line)}
.confianza-fila{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:26px;padding-bottom:26px}
.confianza-fila div{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:start}
.confianza-fila span{grid-row:span 2;font-size:26px}.confianza-fila b{font-size:15px}.confianza-fila small{color:var(--muted);font-size:13px;line-height:1.4}
.etiqueta{color:var(--brand2);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.ejes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:8px}
.eje{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 22px 22px;box-shadow:var(--shadow)}
.eje .num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand2);color:#fff;font-weight:800;margin-bottom:10px}
.eje h3{font-size:19px;margin-bottom:8px}.eje ul{padding-left:18px;display:grid;gap:6px;color:var(--muted);font-size:15px}
.vistas{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:10px}
.ventana{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.vent-barra{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.vent-barra i{width:10px;height:10px;border-radius:50%;background:var(--line)}.vent-barra span{margin-left:8px;font-weight:600}
.cal{padding:16px}.cal-cab{margin-bottom:10px}
.cal-sem,.cal-dias{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center}
.cal-sem{font-size:12px;color:var(--muted);margin-bottom:6px}
.cal-dias span{position:relative;padding:10px 0;border-radius:10px;background:var(--alt);font-size:14px}
.cal-dias .hoy{background:var(--brand2);color:#fff;font-weight:700}
.cal-dias em{position:absolute;left:50%;bottom:4px;width:6px;height:6px;border-radius:50%;transform:translateX(-50%)}
.cal-dias .t em,.p.t{background:var(--brand2)}.cal-dias .e em,.p.e{background:var(--accent)}
.leyenda{display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--muted)}.p{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.notas{padding:8px 16px 14px}
.nota-fila{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.nota-fila:last-child{border:0}.nota-fila span{font-weight:600}.nota-fila small{grid-column:1;color:var(--muted);font-size:12px}
.n{grid-row:span 2;grid-column:2;min-width:56px;text-align:center;padding:6px 10px;border-radius:10px;color:#fff}
.n.dar{background:#15915b}.n.aar{background:#2f6fdc}.n.paar{background:#d68a00}.n.naar{background:#d23b3b}
.nota-pie{margin-top:16px;font-size:13px;color:var(--muted)}
.pestanas{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.pestanas button{font:inherit;font-size:15px;padding:9px 16px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.pestanas button[aria-selected=true]{background:var(--brand2);border-color:var(--brand2);color:#fff;font-weight:600}
.pestanas button:focus-visible{outline:2px solid var(--brand2);outline-offset:2px}
.panel-rol{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:var(--shadow);margin-bottom:14px}
.con-js .panel-rol{display:none}.con-js .panel-rol.activo{display:block}
.ticks{list-style:none;padding:0;display:grid;gap:10px}.ticks li{position:relative;padding-left:28px}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--ok);color:#fff;font-size:12px;display:grid;place-items:center;line-height:1}
.seccion.oscura{background:#0f1a36;color:#e8ecf6}
.oscura h2{color:#fff}.oscura .sub{color:#aab6d3}.oscura .etiqueta{color:#f2a900}
.oscura .tarjeta{background:#172447;border-color:#27365f;box-shadow:none}.oscura .tarjeta h3{color:#fff}.oscura .tarjeta p{color:#aab6d3}
.seccion.cierre{background:linear-gradient(135deg,#12295c,#2f6fdc);color:#fff}.cierre h2{color:#fff}.cierre .sub{color:#dbe6ff}
.pasos3{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px auto;max-width:860px;text-align:left}
.pasos3 li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:16px;font-size:15px}
.pasos3 b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#1b2437;margin-bottom:8px}
.acciones.centrar{justify-content:center;align-items:center}
.boton:focus-visible,.codigo-fila input:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:860px){
  .hero-dos,.vistas,.pasos3{grid-template-columns:1fr}
  .escena{min-height:0;padding:10px 0 20px}.chapa.c1{left:0;top:0}.chapa.c2{right:0;bottom:0}
  .confianza-fila{grid-template-columns:1fr 1fr}
  .hero.plat{padding:48px 0 56px}
}
@media(max-width:520px){.confianza-fila{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){.aviso{animation:sube .6s both}.aviso:nth-of-type(2){animation-delay:.15s}.aviso:nth-of-type(3){animation-delay:.3s}@keyframes sube{from{opacity:0;transform:translateY(14px)}}}
.dos-demo{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:start;text-align:left}
.cierre .etiqueta{color:#f2a900}
.cierre .pasos3{grid-template-columns:1fr;max-width:none;margin:22px 0}
.cierre .pasos3 li{display:flex;gap:12px;align-items:flex-start}
.cierre .pasos3 b{flex:none;margin:0}
.cierre .pasos3 strong{display:block}.cierre .pasos3 span{color:#dbe6ff;font-size:14px}
.demo-form h3{color:var(--ink);font-size:20px}
.demo-form{color:var(--ink)}
@media(max-width:860px){.dos-demo{grid-template-columns:1fr;gap:26px}}

/* ===== Carrusel, videos y mapa del Ecuador ===== */
.carrusel{position:relative;margin-top:8px}
.car-pista{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 8px;outline-offset:4px}
.car-pista::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 100%;scroll-snap-align:center;display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:center;padding:28px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(520px 300px at 100% 0,rgba(124,92,255,.14),transparent 65%),var(--card)}
.car-texto h3{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;margin:10px 0 8px}
.car-texto>p{color:var(--muted);margin-bottom:14px}
.car-texto .num{display:inline-block;padding:4px 9px;border-radius:8px;border:1px solid rgba(53,214,232,.4);color:var(--cian);font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.car-slide .ventana{background:var(--bg);box-shadow:0 30px 60px -34px rgba(124,92,255,.7)}
.car-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.car-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--ink);font-size:20px;cursor:pointer;line-height:1;transition:border-color .2s,transform .2s}
.car-btn:hover{border-color:var(--cian);transform:translateY(-1px)}.car-btn:focus-visible{outline:2px solid var(--cian);outline-offset:2px}
.car-pausa{font-size:11px;letter-spacing:-1px}
.car-puntos{display:flex;gap:8px}
.car-puntos button{width:9px;height:9px;padding:0;border-radius:99px;border:0;background:var(--line2);cursor:pointer;transition:width .25s,background .25s}
.car-puntos button[aria-current=true]{width:28px;background:var(--neon)}
.car-puntos button:focus-visible{outline:2px solid var(--cian);outline-offset:3px}
.car-barra{height:2px;margin-top:14px;background:var(--line);border-radius:2px;overflow:hidden}
.car-barra i{display:block;height:100%;width:0;background:var(--neon)}
/* Mini pantallas */
.asis{padding:16px}.asis-dias{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;text-align:center}
.asis-dias small{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.asis-dias b{display:grid;place-items:center;height:44px;border-radius:12px;font-size:15px}
.asis-dias .ok{background:rgba(63,211,163,.16);color:var(--ok);border:1px solid rgba(63,211,163,.4)}
.asis-dias .falta{background:rgba(238,158,64,.16);color:#ffc879;border:1px solid rgba(238,158,64,.45)}
.asis-dias .just{background:rgba(53,214,232,.14);color:var(--cian);border:1px solid rgba(53,214,232,.4)}
.asis-res{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.asis-res div{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px}
.asis-res strong{display:block;font-size:24px;letter-spacing:-.02em}.asis-res small{color:var(--muted);font-size:12px}
.cuenta{padding:6px 16px 12px}
.cu-fila{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.cu-fila:last-child{border:0}.cu-fila span small{display:block;color:var(--muted);font-size:12px}
.cu-fila em{font-style:normal;font-size:12px;padding:4px 11px;border-radius:99px;white-space:nowrap}
.cu-fila .pag{background:rgba(63,211,163,.14);color:var(--ok);border:1px solid rgba(63,211,163,.4)}
.cu-fila .por{background:rgba(238,158,64,.14);color:#ffc879;border:1px solid rgba(238,158,64,.45)}
.cu-fila .pro{background:var(--card2);color:var(--muted);border:1px solid var(--line2)}
.coms{padding:10px 16px 14px;display:grid;gap:10px}
.com{display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--card2);border:1px solid var(--line);border-radius:14px}
.com i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--violeta)}
.com b{display:block;font-size:14px}.com small{color:var(--muted);font-size:12px}.com.leido{opacity:.6}.com.leido div{padding-left:21px}

/* Videos */

/* Mapa del Ecuador */
.dos-mapa{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.ecu-lista{list-style:none;padding:0;display:grid;gap:14px}
.ecu-lista li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.ecu-lista b{display:block}.ecu-lista span{color:var(--muted);font-size:14px}
.ecu-lista i{flex:none;width:12px;height:12px;margin-top:6px;border-radius:50%}
.d-costa{background:var(--cian);box-shadow:0 0 12px var(--cian)}.d-sierra{background:var(--violeta);box-shadow:0 0 12px var(--violeta)}
.d-esc{background:var(--accent);box-shadow:0 0 12px var(--accent)}.d-lopdp{background:var(--ok);box-shadow:0 0 12px var(--ok)}
.mapa-caja{margin:0;position:relative;padding:18px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(420px 320px at 60% 40%,rgba(124,92,255,.2),transparent 70%),var(--card)}
.mapa-caja svg{display:block;width:100%;height:auto}
.mapa-caja figcaption{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#667384;margin-top:6px}
#mapaEcuador .pt-costa{fill:var(--cian)}#mapaEcuador .pt-sierra{fill:var(--violeta)}
#mapaEcuador .pin-c{fill:#fff}
#mapaEcuador .pin-onda{fill:none;stroke:#fff;stroke-width:1;opacity:.7;transform-box:fill-box;transform-origin:center}
#mapaEcuador text{fill:#eef2f6;font:500 10.5px ui-monospace,Menlo,Consolas,monospace;paint-order:stroke;stroke:#0c1016;stroke-width:3px;stroke-linejoin:round}
#mapaEcuador .gal-caja{fill:none;stroke:var(--line2);stroke-dasharray:3 4}
#mapaEcuador .gal-tit{fill:#9aa6b4;font-size:9.5px;letter-spacing:.1em}
@media(prefers-reduced-motion:no-preference){#mapaEcuador .pin-onda{animation:onda 2.4s ease-out infinite}@keyframes onda{from{transform:scale(1);opacity:.8}to{transform:scale(3.2);opacity:0}}}

@media(max-width:860px){
  .car-slide{grid-template-columns:1fr;padding:20px;gap:20px}
  .dos-mapa{grid-template-columns:1fr;gap:26px}
  .mapa-caja{max-width:440px;margin-inline:auto}
}

/* ===== Portada de la plataforma: sistema "Andes Academica Glass" (teal petroleo, menta, cristal) ===== */
[data-modo=plataforma]{
  --bg:#f3f6fc;--alt:#e8eef9;--card:#fff;--card2:#edf2fb;--ink:#0a1226;--muted:#4a5675;--line:#e1e8f5;--line2:#cbd6ea;
  --brand:#1b3a8c;--brand2:#3b6fd8;--violeta:#3b6fd8;--cian:#3f8cff;--magenta:#3f8cff;--accent:#f5c15d;--ok:#3f8cff;--bad:#dc4a4a;
  --neon:linear-gradient(115deg,#1b3a8c,#3b6fd8 55%,#3f8cff);
  --glass:rgba(255,255,255,.85);--sombra:0 4px 20px -2px rgba(10,18,38,.05);--sombra-alta:0 14px 34px -6px rgba(27,58,140,.16);
  --pt-costa:#3f8cff;--pt-sierra:#1b3a8c;--on-glass:#0a1226;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:light;
}

[data-modo=plataforma] body,body[data-modo=plataforma]{background:linear-gradient(180deg,var(--bg),var(--alt)) fixed}
[data-modo=plataforma] a{color:var(--brand2)}
.neon{background:linear-gradient(115deg,#a9cbff,#8ab4ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Cabecera de cristal */
[data-modo=plataforma] .top{background:rgba(255,255,255,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.65);box-shadow:0 12px 32px -8px rgba(27,58,140,.08)}

[data-modo=plataforma] .marca{color:var(--ink);letter-spacing:-.01em}
[data-modo=plataforma] .mark{background:var(--neon);color:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(27,58,140,.25)}
[data-modo=plataforma] .top nav a{color:var(--ink);font-size:14px;font-weight:500;opacity:.85}
[data-modo=plataforma] .top nav a:hover{background:rgba(27,58,140,.08);opacity:1}
[data-modo=plataforma] .top nav a.acceso{background:#1b3a8c;color:#fff;opacity:1;font-weight:600;border-radius:10px}
[data-modo=plataforma] .top nav a.acceso:hover{background:#3b6fd8}
[data-modo=plataforma] .menu{color:var(--ink)}
@media(max-width:860px){[data-modo=plataforma] .top nav{background:var(--card);border-color:var(--line)}}

/* Rotulos y titulos */
[data-modo=plataforma] .etiqueta{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--brand2)}
[data-modo=plataforma] .seccion h2{font-size:clamp(26px,3.6vw,36px);line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:12px}
[data-modo=plataforma] .sub{color:var(--muted)}

/* Hero: petroleo profundo con nodos de luz */
[data-modo=plataforma] .hero.plat{background:
  radial-gradient(620px 420px at 86% 14%,rgba(63,140,255,.34),transparent 62%),
  radial-gradient(560px 420px at 4% 100%,rgba(59,111,216,.55),transparent 60%),
  linear-gradient(135deg,#07102b,#1b3a8c 58%,#2347a3);color:#fff;padding:78px 0 112px}
[data-modo=plataforma] .hero h1{font-size:clamp(32px,5vw,52px);line-height:1.1;font-weight:700;letter-spacing:-.02em;color:#fff}
[data-modo=plataforma] .hero .lead{color:rgba(255,255,255,.86);opacity:1}
[data-modo=plataforma] .chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
[data-modo=plataforma] .chip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#3f8cff;margin-right:8px;box-shadow:0 0 10px rgba(63,140,255,.9)}
[data-modo=plataforma] .boton{background:#1b3a8c;color:#fff;border-radius:10px;font-weight:600;box-shadow:0 4px 12px rgba(27,58,140,.25);transition:background .2s,transform .2s}
[data-modo=plataforma] .boton:hover{background:#3b6fd8;transform:translateY(-1px)}
[data-modo=plataforma] .boton.claro{background:rgba(255,255,255,.7);color:#1b3a8c;border:1px solid #ccdce5;box-shadow:none}
[data-modo=plataforma] .hero .boton,[data-modo=plataforma] .cierre .boton{background:#3f8cff;color:#0a1226;box-shadow:0 8px 22px -8px rgba(63,140,255,.8)}
[data-modo=plataforma] .hero .boton:hover,[data-modo=plataforma] .cierre .boton:hover{background:#8ab8ff}
[data-modo=plataforma] .hero .boton.claro,[data-modo=plataforma] .cierre .boton.claro{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35)}
[data-modo=plataforma] .hero .boton.claro:hover,[data-modo=plataforma] .cierre .boton.claro:hover{background:rgba(255,255,255,.2)}
[data-modo=plataforma] .codigo-form{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(18px);border-radius:20px}
[data-modo=plataforma] .codigo-fila input{background:#fff;color:#0a1226;border:1px solid #cbd6ea;border-radius:10px;font-weight:500;min-height:44px}
[data-modo=plataforma] .codigo-fila input:focus{outline:none;box-shadow:0 0 0 3px rgba(138,184,255,.45)}
[data-modo=plataforma] .demo a{color:#a9cbff}
.avatares{display:flex;align-items:center;margin-top:22px}
.avatares i{width:36px;height:36px;border-radius:50%;border:2px solid #fff;margin-left:-8px;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;color:#fff;background:var(--neon)}
.avatares i:first-child{margin-left:0}.avatares i:nth-child(2n){background:linear-gradient(135deg,#3b6fd8,#8ab8ff)}.avatares i:nth-child(3n){background:linear-gradient(135deg,#00362d,#3f8cff)}
.avatares span{margin-left:14px;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);font-size:12px;font-weight:600;backdrop-filter:blur(10px)}

/* Aparato flotando de cristal */
[data-modo=plataforma] .escena{perspective:1300px}
[data-modo=plataforma] .escena::before{content:"";position:absolute;inset:6% -14%;background:radial-gradient(closest-side,rgba(63,140,255,.45),transparent 72%);filter:blur(8px)}
[data-modo=plataforma] .telefono{position:relative;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);border-radius:32px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 60px -20px rgba(6,12,30,.6),0 0 60px -20px rgba(63,140,255,.7);transform:rotateY(-16deg) rotateX(5deg) rotateZ(1.5deg);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
[data-modo=plataforma] .escena:hover .telefono{transform:rotateY(-6deg) rotateX(2deg)}
[data-modo=plataforma] .tel-hora{color:#fff}
[data-modo=plataforma] .aviso{background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.7);color:#0a1226}
[data-modo=plataforma] .aviso small{color:#5d6d75;font-family:inherit;font-size:11px}
[data-modo=plataforma] .aviso span:not(.ai){color:#40484b}
[data-modo=plataforma] .ai.t1{background:#cfe9f0}[data-modo=plataforma] .ai.t2{background:rgba(245,193,93,.35)}[data-modo=plataforma] .ai.t3{background:rgba(63,140,255,.25)}
[data-modo=plataforma] .chapa{background:rgba(255,255,255,.94);color:#0a1226;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0;border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 24px -8px rgba(6,12,30,.45)}
[data-modo=plataforma] .chapa.c2{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.7);box-shadow:0 10px 24px -8px rgba(6,12,30,.45)}
@media(prefers-reduced-motion:no-preference){[data-modo=plataforma] .escena .telefono{animation:flota 7s ease-in-out infinite}@keyframes flota{0%,100%{translate:0 0}50%{translate:0 -12px}}}

/* Garantias: mosaicos KPI sobre el borde del hero */
[data-modo=plataforma] .confianza{background:transparent;border:0;margin-top:-56px;position:relative;z-index:2;padding-bottom:8px}
[data-modo=plataforma] .confianza-fila{padding-top:0;padding-bottom:0;gap:16px}
[data-modo=plataforma] .confianza-fila>div{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:16px 18px;box-shadow:var(--sombra-alta);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);align-items:center}
[data-modo=plataforma] .confianza-fila span{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--neon);color:#fff;filter:none}
[data-modo=plataforma] .confianza-fila b{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
[data-modo=plataforma] .confianza-fila small{color:var(--muted);font-size:12.5px}

/* Cinta de modulos */
.franja{padding:34px 0 18px;background:transparent;border:0;overflow:hidden}
.franja-rotulo{text-align:center;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-family:inherit}
.franja-ventana{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.franja-cinta{display:flex;gap:12px;width:max-content}
.franja-item{display:flex;align-items:center;gap:10px;padding:9px 18px 9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--glass);color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap;box-shadow:var(--sombra)}
.franja-item i{width:8px;height:8px;border-radius:50%;background:var(--neon);flex:none}
@media(prefers-reduced-motion:no-preference){.franja-cinta{animation:desfilar 40s linear infinite}.franja-ventana:hover .franja-cinta{animation-play-state:paused}@keyframes desfilar{to{transform:translateX(-50%)}}}
@media(prefers-reduced-motion:reduce){.franja-ventana{overflow-x:auto}}

/* Tarjetas de cristal (24 px) */
[data-modo=plataforma] .seccion.alt{background:transparent}
[data-modo=plataforma] .eje,[data-modo=plataforma] .tarjeta,[data-modo=plataforma] .ventana,[data-modo=plataforma] .panel-rol,[data-modo=plataforma] .formulario,[data-modo=plataforma] .ecu-lista li,[data-modo=plataforma] .car-slide,[data-modo=plataforma] .mapa-caja{background:var(--glass);border:1px solid var(--line);border-radius:24px;box-shadow:var(--sombra);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
[data-modo=plataforma] .ecu-lista li{border-radius:18px}
[data-modo=plataforma] .eje,[data-modo=plataforma] .tarjeta{transition:transform .25s,box-shadow .25s,border-color .25s}
[data-modo=plataforma] .eje:hover,[data-modo=plataforma] .tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:rgba(59,111,216,.45)}
[data-modo=plataforma] .eje .num,[data-modo=plataforma] .car-texto .num{display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border-radius:12px;background:var(--neon);border:0;color:#fff;font:700 15px/1 inherit;letter-spacing:0;font-family:inherit;justify-self:start}
[data-modo=plataforma] .eje h3{font-size:20px;font-weight:600;letter-spacing:-.01em}
[data-modo=plataforma] .vent-barra{border-color:var(--line);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0}
[data-modo=plataforma] .vent-barra i{background:var(--line2)}
[data-modo=plataforma] .car-slide{background:linear-gradient(135deg,var(--glass),var(--glass)),radial-gradient(520px 300px at 100% 0,rgba(63,140,255,.16),transparent 65%)}
[data-modo=plataforma] .car-slide .ventana{background:var(--card);box-shadow:0 24px 50px -28px rgba(27,58,140,.55)}
/* Pantallas de ejemplo */
[data-modo=plataforma] .cal-dias span{background:var(--card2);color:var(--ink)}
[data-modo=plataforma] .cal-dias .hoy{background:var(--neon);color:#fff;box-shadow:0 4px 12px rgba(27,58,140,.3)}
[data-modo=plataforma] .cal-dias .t em,[data-modo=plataforma] .p.t{background:#3b6fd8}
[data-modo=plataforma] .cal-dias .e em,[data-modo=plataforma] .p.e{background:#f5c15d}
.n.dar{background:#3f8cff}.n.aar{background:#3b6fd8}.n.paar{background:#f5c15d;color:#5c4108}.n.naar{background:#dc4a4a}
[data-modo=plataforma] .n{font-variant-numeric:tabular-nums;font-weight:700}
.asis-dias .ok{background:rgba(63,140,255,.12);color:#2a56b8;border:1px solid rgba(63,140,255,.35);box-shadow:0 0 10px rgba(63,140,255,.2)}
.asis-dias .falta{background:rgba(245,193,93,.16);color:#8f6413;border:1px solid rgba(245,193,93,.5);box-shadow:0 0 10px rgba(245,193,93,.25)}
.asis-dias .just{background:rgba(59,111,216,.12);color:#2347a3;border:1px solid rgba(59,111,216,.35)}
.asis-res div{background:var(--card2);border-color:var(--line)}
.cu-fila .pag{background:rgba(63,140,255,.12);color:#2a56b8;border:1px solid rgba(63,140,255,.3);box-shadow:0 0 10px rgba(63,140,255,.25);font-weight:600}
.cu-fila .por{background:rgba(245,193,93,.15);color:#8f6413;border:1px solid rgba(245,193,93,.45);box-shadow:0 0 10px rgba(245,193,93,.25);font-weight:600}
.cu-fila .pro{background:var(--card2);color:var(--muted);border:1px solid var(--line2)}

.com{background:var(--card2);border-color:var(--line)}.com i{background:#3f8cff;box-shadow:0 0 10px rgba(63,140,255,.6)}
/* Carrusel: indicadores en segmentos */
.car-btn{border:1px solid var(--line2);background:var(--glass);color:var(--brand)}
.car-btn:hover{border-color:var(--brand2)}
.car-puntos{gap:4px}
.car-puntos button{width:34px;height:6px;border-radius:3px;background:var(--line2)}
.car-puntos button[data-hecho=true]{background:#3f8cff}
.car-puntos button[aria-current=true]{width:34px;background:linear-gradient(90deg,#3b6fd8,#3f8cff)}
.car-barra{background:var(--line)}.car-barra i{background:linear-gradient(90deg,#3b6fd8,#3f8cff)}

/* Seccion de videos: petroleo oscuro */

/* Mapa */
.mapa-caja{background:radial-gradient(420px 320px at 60% 40%,rgba(63,140,255,.18),transparent 70%),var(--glass)}
#mapaEcuador .pt-costa{fill:var(--pt-costa)}#mapaEcuador .pt-sierra{fill:var(--pt-sierra)}
#mapaEcuador .pin-c{fill:#0a1226;stroke:#fff;stroke-width:1.6}#mapaEcuador .pin-onda{stroke:#0a1226}
#mapaEcuador text{fill:var(--ink);stroke:var(--card);font:600 10.5px Inter,system-ui,sans-serif;stroke-width:3.5px}
#mapaEcuador .gal-caja{stroke:var(--line2)}#mapaEcuador .gal-tit{fill:var(--muted);font-weight:600}
.mapa-caja figcaption{font-family:inherit;font-size:12px;letter-spacing:0;color:var(--muted)}
.d-costa{background:#3f8cff;box-shadow:0 0 12px rgba(63,140,255,.6)}.d-sierra{background:#1b3a8c;box-shadow:0 0 12px rgba(27,58,140,.5)}
.d-esc{background:#f5c15d;box-shadow:0 0 12px rgba(245,193,93,.6)}.d-lopdp{background:#dc4a4a;box-shadow:0 0 12px rgba(220,74,74,.45)}
.ecu-lista b{color:var(--ink)}.ecu-lista span{color:var(--muted)}

/* Roles */
[data-modo=plataforma] .pestanas button{background:rgba(255,255,255,.7);border:1px solid #ccdce5;color:#1b3a8c;font-weight:600;font-size:14px}

[data-modo=plataforma] .pestanas button[aria-selected=true]{background:#1b3a8c;border-color:#1b3a8c;color:#fff;box-shadow:0 4px 12px rgba(27,58,140,.25)}
[data-modo=plataforma] .ticks li::before{background:rgba(63,140,255,.14);color:#2a56b8;border:1px solid rgba(63,140,255,.5)}


/* Seguridad y cierre: petroleo */
[data-modo=plataforma] .seccion.oscura{background:radial-gradient(640px 320px at 12% 0,rgba(63,140,255,.2),transparent 65%),#0a1226;border:0;color:#e4f3fd}
[data-modo=plataforma] .oscura h2{color:#fff}[data-modo=plataforma] .oscura .sub{color:rgba(255,255,255,.72)}[data-modo=plataforma] .oscura .etiqueta{color:#8ab8ff}
[data-modo=plataforma] .oscura .tarjeta{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);box-shadow:none}
[data-modo=plataforma] .oscura .tarjeta h3{color:#fff}[data-modo=plataforma] .oscura .tarjeta p{color:rgba(255,255,255,.72)}
[data-modo=plataforma] .oscura .tarjeta:hover{border-color:rgba(138,184,255,.5);box-shadow:0 18px 40px -26px #3f8cff}
[data-modo=plataforma] .seccion.cierre{background:radial-gradient(620px 420px at 88% 100%,rgba(63,140,255,.3),transparent 62%),radial-gradient(560px 400px at 6% 0,rgba(59,111,216,.5),transparent 62%),linear-gradient(135deg,#07102b,#1b3a8c 60%,#2347a3);color:#fff}
[data-modo=plataforma] .cierre h2{color:#fff}[data-modo=plataforma] .cierre .sub{color:rgba(255,255,255,.82)}[data-modo=plataforma] .cierre .etiqueta{color:#8ab4ff}
[data-modo=plataforma] .pasos3 li,[data-modo=plataforma] .cierre .pasos3 li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px)}
[data-modo=plataforma] .pasos3 b{background:#3f8cff;color:#0a1226;border-radius:50%;font-family:inherit;font-weight:700}
[data-modo=plataforma] .cierre .pasos3 span{color:rgba(255,255,255,.8)}
[data-modo=plataforma] .cierre .formulario{background:rgba(255,255,255,.95);color:#0a1226;box-shadow:0 24px 48px -8px rgba(6,12,30,.4);border-color:#e1e8f5}
[data-modo=plataforma] .cierre .formulario label{color:#40484b}.demo-form h3{color:#0a1226}

[data-modo=plataforma] .formulario label{font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.02em}
[data-modo=plataforma] .formulario input,[data-modo=plataforma] .formulario select,[data-modo=plataforma] .formulario textarea{background:#fff;color:#0a1226;border:1px solid #cbd6ea;border-radius:10px;min-height:44px}

[data-modo=plataforma] .formulario input:focus,[data-modo=plataforma] .formulario select:focus,[data-modo=plataforma] .formulario textarea:focus{outline:none;border-color:#3b6fd8;box-shadow:0 0 0 3px rgba(59,111,216,.15)}
[data-modo=plataforma] .formulario .boton{background:#1b3a8c;color:#fff;box-shadow:0 4px 12px rgba(27,58,140,.25)}
[data-modo=plataforma] .formulario .boton:hover{background:#3b6fd8}
[data-modo=plataforma] .msg.err{background:rgba(220,74,74,.12);color:#b3363a;border:1px solid rgba(220,74,74,.35)}
[data-modo=plataforma] .msg.ok{background:rgba(63,140,255,.12);color:#2a56b8;border:1px solid rgba(63,140,255,.35)}
[data-modo=plataforma] .pie{background:#0a1226;border:0;color:rgba(255,255,255,.7);font-family:inherit;font-size:13px}

/* Aparicion suave al desplazarse */
.neon-fix{}
@media(prefers-reduced-motion:no-preference){.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}.rv.ve{opacity:1;transform:none}}

/* ===== Fotos reales: carrusel de fondo y fotos por rol ===== */
[data-modo=plataforma] .hero.plat{position:relative;overflow:hidden;isolation:isolate}
.hero-fotos{position:absolute;inset:0;z-index:-1}
.hero-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.hero-fotos img.on{opacity:1}
.hero-fotos::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,45,58,.93) 0%,rgba(27,58,140,.82) 46%,rgba(27,58,140,.5) 100%),radial-gradient(520px 360px at 88% 14%,rgba(63,140,255,.28),transparent 62%)}
@media(prefers-reduced-motion:no-preference){.hero-fotos img.on{animation:acerca 9s ease-out both}@keyframes acerca{from{transform:scale(1.07)}to{transform:scale(1)}}}
.panel-rol.con-foto{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.con-js .panel-rol.con-foto.activo{display:grid}
.foto-rol{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 14px 34px -14px rgba(27,58,140,.45)}
.foto-rol img{width:100%;height:100%;object-fit:cover;display:block}
.pie .creditos{margin-top:6px;font-size:12px;opacity:.75}.pie .creditos a{color:inherit}
@media(max-width:860px){.panel-rol.con-foto,.con-js .panel-rol.con-foto.activo{grid-template-columns:1fr}.foto-rol{aspect-ratio:16/9}}
/* Con foto de fondo: sin marco de telefono, solo avisos flotando */
[data-modo=plataforma] .telefono{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;padding:0;width:min(330px,100%)}
[data-modo=plataforma] .escena:hover .telefono{transform:none}
[data-modo=plataforma] .escena::before{display:none}
[data-modo=plataforma] .tel-hora{display:none}
[data-modo=plataforma] .aviso{box-shadow:0 18px 40px -16px rgba(6,12,30,.55);backdrop-filter:blur(10px)}
[data-modo=plataforma] .aviso:nth-of-type(2){margin-left:26px}
[data-modo=plataforma] .escena{place-items:end center;min-height:420px}
[data-modo=plataforma] .chapa.c1{top:auto;bottom:28px;left:6px}
[data-modo=plataforma] .chapa.c2{bottom:auto;top:20px;right:6px}
[data-modo=plataforma] .chapa.c1{top:-8px;bottom:auto;left:0}
.con-js .panel-rol.con-foto:not(.activo){display:none}

/* Marca LexEdu */
[data-modo=plataforma] .mark{background:none;box-shadow:none;padding:0;width:40px;height:40px;overflow:hidden}
.mark>img{display:block;width:100%;height:100%}
[data-modo=plataforma] .nombre{font-size:20px;letter-spacing:-.02em}
[data-modo=plataforma] .nombre b{font-weight:800}
[data-modo=plataforma] .nombre .edu{font-weight:500;color:var(--brand2)}

/* Movimiento: red de la comunidad (video de HyperFrames) y detalles modernos */
.comunidad{background:linear-gradient(180deg,#0a1226,#0d1a36);color:#fff;border:0;position:relative;overflow:hidden}
.comunidad::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 420px at 85% 20%,rgba(63,140,255,.22),transparent 65%);pointer-events:none}
.comunidad h2{color:#fff!important}.comunidad .sub{color:rgba(255,255,255,.78)!important}.comunidad .etiqueta{color:#8ab8ff!important}
.dos-red{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;position:relative;z-index:1}
.red-puntos{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.red-puntos li{border:1px solid rgba(138,184,255,.28);background:rgba(17,31,64,.6);border-radius:16px;padding:14px 14px 12px;backdrop-filter:blur(8px);transition:transform .25s,border-color .25s}
.red-puntos li:hover{transform:translateY(-4px);border-color:rgba(138,184,255,.7)}
.red-puntos b{display:block;font-size:22px;color:#fff;letter-spacing:-.02em}.red-puntos span{display:block;margin-top:2px;font-size:13px;color:rgba(255,255,255,.7)}
.red-marco{margin:0;border-radius:26px;overflow:hidden;border:1px solid rgba(138,184,255,.35);box-shadow:0 30px 70px -30px rgba(63,140,255,.55),inset 0 0 0 1px rgba(255,255,255,.04);background:#0a1226}
.red-marco video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.neon{background-size:200% 100%;animation:brillo 6s ease-in-out infinite alternate}
@keyframes brillo{from{background-position:0 0}to{background-position:100% 0}}
.hero.plat .chip{animation:flota 5s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.a11y-quieto .neon,.a11y-quieto .hero.plat .chip{animation:none}
@media(prefers-reduced-motion:reduce){.neon,.hero.plat .chip{animation:none}}
@media(max-width:860px){.dos-red{grid-template-columns:1fr;gap:26px}.red-puntos{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:520px){.red-puntos{grid-template-columns:1fr}}

/* Preguntas frecuentes */
.faq-lista{display:grid;gap:10px;margin-top:18px;max-width:860px}
.faq-lista details{border:1px solid var(--line2);background:var(--card);border-radius:16px;padding:0 18px;transition:border-color .2s,box-shadow .2s}
.faq-lista details[open]{border-color:var(--brand2);box-shadow:var(--sombra-alta)}
.faq-lista summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-weight:600;color:var(--ink);position:relative}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:22px;color:var(--brand2);transition:transform .2s}
.faq-lista details[open] summary::after{content:"\2212"}
.faq-lista details p{margin:0 0 16px;color:var(--muted);line-height:1.6}
.faq-lista summary:focus-visible{outline:2px solid var(--brand2);outline-offset:2px;border-radius:8px}

/* Pestanas de rol: cada una con su texto, sus pantallas y lo que no ve */
.rol-texto h3{font-size:clamp(20px,2.4vw,26px);line-height:1.2;letter-spacing:-.02em;margin:0 0 6px}
.rol-lead{margin:0 0 14px;color:var(--muted)}
.rol-no{margin:14px 0 16px;padding:10px 14px;border-radius:12px;background:rgba(27,58,140,.08);border:1px solid rgba(59,111,216,.28);font-size:14px}
.rol-probar{display:inline-block;text-decoration:none}
.rol-lado{display:grid;gap:14px;align-content:start}
.pantallas-rol{border:1px solid var(--line2);border-radius:16px;padding:14px 16px;background:var(--card2,var(--card))}
.pantallas-rol h4{margin:0 0 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--brand2)}
.pantallas-rol ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pantallas-rol li{font-size:13px;padding:5px 11px;border-radius:99px;border:1px solid var(--line2);background:var(--card)}
@media(max-width:860px){
  .pestanas{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .pestanas button{flex:none;scroll-snap-align:start;white-space:nowrap}
}


/* ===== Tema claro y compacto: fondo blanco, letras y botones azules; escala natural ===== */
[data-modo=plataforma] body,body[data-modo=plataforma]{background:#fff}
[data-modo=plataforma]{--bg:#fff;--alt:#f4f7fd;--line:#e3e9f5;--line2:#d3dcee;--ink:#0f1a33;--muted:#53607c;--brand:#1b3a8c;--brand2:#2a56b8;--sombra:0 1px 2px rgba(15,26,51,.05);--sombra-alta:0 8px 24px -10px rgba(27,58,140,.22)}
body{font-size:15px;line-height:1.55}
[data-modo=plataforma] .top{padding:8px 20px;background:rgba(255,255,255,.92);box-shadow:none;border-bottom:1px solid var(--line)}
[data-modo=plataforma] .mark{width:32px;height:32px;border-radius:9px;font-size:13px;box-shadow:none}
[data-modo=plataforma] .marca{font-size:15px}
[data-modo=plataforma] .top nav a{font-size:13.5px;padding:6px 10px;border-radius:8px}
[data-modo=plataforma] .top nav a.acceso{border-radius:8px;padding:7px 14px}
[data-modo=plataforma] .hero.plat{background:linear-gradient(180deg,#f1f5ff 0%,#fff 100%);color:var(--ink);padding:44px 0 72px;border-bottom:1px solid var(--line)}
[data-modo=plataforma] .hero-fotos{display:none}
[data-modo=plataforma] .hero h1{color:#0f1a33;font-size:clamp(26px,3.6vw,38px);line-height:1.15;font-weight:700;letter-spacing:-.025em;margin:12px 0}
[data-modo=plataforma] .hero .lead{color:#4a5675;font-size:15.5px;max-width:560px;opacity:1}
.neon{background:linear-gradient(115deg,#1b3a8c,#3b6fd8);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
[data-modo=plataforma] .chip{background:#e8efff;border:1px solid #cdd9f5;color:#1b3a8c;font-size:11.5px;padding:4px 12px}
[data-modo=plataforma] .chip::before{box-shadow:none;background:#2a56b8}
[data-modo=plataforma] .boton,[data-modo=plataforma] .hero .boton,[data-modo=plataforma] .cierre .boton{background:#1b3a8c;color:#fff;padding:9px 18px;border-radius:9px;font-size:14px;font-weight:600;box-shadow:none}
[data-modo=plataforma] .boton:hover,[data-modo=plataforma] .hero .boton:hover,[data-modo=plataforma] .cierre .boton:hover{background:#2a56b8;transform:none}
[data-modo=plataforma] .boton.claro,[data-modo=plataforma] .hero .boton.claro,[data-modo=plataforma] .cierre .boton.claro{background:#fff;color:#1b3a8c;border:1px solid #b9c8ea}
[data-modo=plataforma] .boton.claro:hover,[data-modo=plataforma] .hero .boton.claro:hover,[data-modo=plataforma] .cierre .boton.claro:hover{background:#eef3ff}
.acciones{margin-top:20px;gap:10px}
[data-modo=plataforma] .codigo-form{margin-top:18px;background:#fff;border:1px solid var(--line2);backdrop-filter:none;border-radius:12px;padding:14px;box-shadow:var(--sombra)}
.codigo-form label{color:var(--ink);font-size:13px;opacity:1}
[data-modo=plataforma] .codigo-fila input{min-height:38px;padding:8px 12px;border-radius:9px;font-size:14px}
[data-modo=plataforma] .demo a{color:var(--brand2)}
.demo,.nota-codigo{font-size:13px;color:var(--muted)}
.avatares{margin-top:16px}.avatares i{width:28px;height:28px;font-size:10px;border-color:#fff}
.avatares span{background:#e8efff;border-color:#cdd9f5;color:#1b3a8c;font-size:11px;backdrop-filter:none}
[data-modo=plataforma] .escena::before{display:none}
[data-modo=plataforma] .telefono{background:#fff;border:1px solid var(--line2);box-shadow:var(--sombra-alta);backdrop-filter:none;transform:none;border-radius:22px;padding:16px 12px 12px}
[data-modo=plataforma] .escena:hover .telefono{transform:none}
[data-modo=plataforma] .escena .telefono{animation:none}
[data-modo=plataforma] .tel-hora{color:var(--ink)}.tel-hora b{font-size:34px}
[data-modo=plataforma] .aviso{background:#f4f7fd;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
[data-modo=plataforma] .chapa{font-size:11.5px;padding:6px 12px;box-shadow:var(--sombra-alta);border:1px solid var(--line)}
.hero-dos{gap:36px}.escena{min-height:340px}
[data-modo=plataforma] .confianza{margin-top:-40px}
[data-modo=plataforma] .confianza-fila{gap:12px}
[data-modo=plataforma] .confianza-fila>div{padding:12px 14px;border-radius:12px;box-shadow:var(--sombra-alta);backdrop-filter:none;background:#fff}
[data-modo=plataforma] .confianza-fila span{width:34px;height:34px;border-radius:10px;font-size:18px}
[data-modo=plataforma] .confianza-fila b{font-size:13.5px}[data-modo=plataforma] .confianza-fila small{font-size:12px}
.seccion{padding:44px 0}
[data-modo=plataforma] .seccion h2{font-size:clamp(21px,2.6vw,27px);margin-bottom:8px}
.sub{font-size:15px;margin-bottom:18px}
[data-modo=plataforma] .etiqueta{font-size:11.5px}
.tarjeta,.eje,.ventana,.panel-rol{border-radius:12px;box-shadow:var(--sombra)}
.tarjeta{padding:16px}.tarjeta h3{font-size:15.5px}.eje{padding:18px 18px 16px}.eje h3{font-size:16.5px}.eje ul{font-size:14px}
.eje .num{width:28px;height:28px;font-size:13px}
.tres,.rejilla,.ejes{gap:14px}
.panel-rol{padding:18px 20px}
[data-modo=plataforma] .pestanas button{font-size:13px;padding:6px 13px}
.faq-lista details{border-radius:12px;padding:0 16px}.faq-lista summary{padding:12px 26px 12px 0;font-size:14.5px}
[data-modo=plataforma] .seccion.oscura,.comunidad{background:#f4f7fd!important;color:var(--ink)!important;border:0}
.comunidad::before{display:none}
[data-modo=plataforma] .oscura h2,.comunidad h2{color:var(--ink)!important}
[data-modo=plataforma] .oscura .sub,.comunidad .sub{color:var(--muted)!important}
[data-modo=plataforma] .oscura .etiqueta,.comunidad .etiqueta{color:var(--brand2)!important}
[data-modo=plataforma] .oscura .tarjeta{background:#fff;border:1px solid var(--line);box-shadow:var(--sombra)}
[data-modo=plataforma] .oscura .tarjeta h3{color:var(--ink)}[data-modo=plataforma] .oscura .tarjeta p{color:var(--muted)}
[data-modo=plataforma] .seccion.cierre{background:#eef3ff;color:var(--ink);border-top:1px solid var(--line)}
[data-modo=plataforma] .cierre h2{color:var(--ink)}[data-modo=plataforma] .cierre .sub{color:var(--muted)}[data-modo=plataforma] .cierre .etiqueta{color:var(--brand2)}
[data-modo=plataforma] .pasos3 li,[data-modo=plataforma] .cierre .pasos3 li{background:#fff;border:1px solid var(--line);backdrop-filter:none;font-size:14px;padding:12px 14px}
[data-modo=plataforma] .cierre .pasos3 span{color:var(--muted)}
[data-modo=plataforma] .cierre .formulario{box-shadow:var(--sombra-alta);border-radius:12px;padding:18px}
.formulario{padding:18px;border-radius:12px}.formulario input,.formulario select,.formulario textarea{padding:8px 11px;border-radius:9px;font-size:14px}
.pasos3 b{width:24px;height:24px;font-size:13px;background:#1b3a8c;color:#fff}
[data-modo=plataforma] .pie{background:#1b3a8c;font-size:13px;padding:18px 0}
#mapaEcuador text{fill:#1b3a8c;stroke:#fff;stroke-width:3px}
#mapaEcuador .pin-c{fill:#1b3a8c}#mapaEcuador .pin-onda{stroke:#1b3a8c}
#mapaEcuador .gal-tit{fill:#53607c}
.mapa-caja{border-radius:16px;padding:14px}.mapa-caja figcaption{color:var(--muted)}
.ecu-lista li{padding:11px 14px;border-radius:12px}
@media(max-width:860px){.hero.plat{padding:32px 0 56px}[data-modo=plataforma] .confianza{margin-top:-30px}.seccion{padding:34px 0}}
.red-puntos{margin-top:18px;gap:10px}
.red-puntos li{background:#fff;border:1px solid var(--line);backdrop-filter:none;border-radius:12px;padding:11px 12px;box-shadow:var(--sombra)}
.red-puntos li:hover{transform:none;border-color:var(--brand2)}
.red-puntos b{font-size:18px;color:var(--brand)}.red-puntos span{font-size:12.5px;color:var(--muted)}
.red-marco{border-radius:14px;border:1px solid var(--line2);box-shadow:var(--sombra-alta)}
.dos-red{gap:32px}


/* ===== Marcas de agua: fotos reales muy suaves detras del contenido blanco (carrusel en la portada y fundido en las secciones) ===== */
[data-modo=plataforma] .hero-fotos{display:block;z-index:0}
[data-modo=plataforma] .hero-fotos img{filter:grayscale(.35)}
[data-modo=plataforma] .hero-fotos img.on{opacity:.55}
[data-modo=plataforma] .hero-fotos::after{background:linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 42%,rgba(246,249,255,.62) 100%)}
[data-modo=plataforma] .hero.plat>.envoltura{position:relative;z-index:1}
[data-modo=plataforma] .seccion.solo-plat{position:relative;isolation:isolate;overflow:hidden}
[data-modo=plataforma] .seccion.solo-plat::before,[data-modo=plataforma] .seccion.solo-plat::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:no-repeat;background-size:cover;background-position:70% 40%;filter:grayscale(.4);opacity:0}
[data-modo=plataforma] #ejes::before{background-image:url(/img/aula-docente.webp)}
[data-modo=plataforma] #ejes::after{background-image:url(/img/docente-laptop.webp)}
[data-modo=plataforma] #vistas::before{background-image:url(/img/estudiante-casa.webp)}
[data-modo=plataforma] #vistas::after{background-image:url(/img/familia-celular.webp)}
[data-modo=plataforma] #seguridad::before{background-image:url(/img/direccion-pasillo.webp)}
[data-modo=plataforma] #seguridad::after{background-image:url(/img/secretaria-aula.webp)}
[data-modo=plataforma] #preguntas::before{background-image:url(/img/escolares-alegria.webp)}
[data-modo=plataforma] #preguntas::after{background-image:url(/img/aula-docente.webp)}
[data-modo=plataforma] #acceso::before{background-image:url(/img/familia-celular.webp)}
[data-modo=plataforma] #acceso::after{background-image:url(/img/escolares-alegria.webp)}
/* velo blanco encima de la foto para que el texto se lea siempre */
[data-modo=plataforma] .seccion.solo-plat .envoltura{position:relative}
[data-modo=plataforma] #ejes,[data-modo=plataforma] #vistas,[data-modo=plataforma] #seguridad,[data-modo=plataforma] #preguntas,[data-modo=plataforma] #acceso{background-color:#fff}
[data-modo=plataforma] #vistas{background-color:#f6f8fd}
[data-modo=plataforma] #seguridad{background-color:#f4f7fd!important}
[data-modo=plataforma] #acceso{background-color:#eef3ff}
@media(prefers-reduced-motion:no-preference){
  [data-modo=plataforma] .seccion.solo-plat::before{animation:marcaA 22s ease-in-out infinite}
  [data-modo=plataforma] .seccion.solo-plat::after{animation:marcaB 22s ease-in-out infinite}
  @keyframes marcaA{0%,100%{opacity:.13}45%{opacity:.13}55%{opacity:0}95%{opacity:0}}
  @keyframes marcaB{0%,45%{opacity:0}55%,95%{opacity:.13}100%{opacity:0}}
}
@media(prefers-reduced-motion:reduce){[data-modo=plataforma] .seccion.solo-plat::before{opacity:.12}}
@media(max-width:860px){[data-modo=plataforma] .seccion.solo-plat::before,[data-modo=plataforma] .seccion.solo-plat::after{background-position:60% 30%}}