/* Presentación de Promtdea (presentacion.promtdea.ai): una diapositiva por pantalla con scroll-snap, marca pd, datos en vivo.
   Tokens de la marca (docs: public/marca): violeta #6D28D9, lima #C6FF3D solo en el punto, oscuro por defecto. */
:root{--bg:#0B0B14;--surface:#141426;--ink:#F3F3F8;--muted:#A9A9C2;--line:#2A2A44;--accent:#8B5CF6;--accent-2:#38BDF8;--verde:#C6FF3D;--display:"Space Grotesk",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-snap-type:y mandatory;scroll-behavior:smooth;height:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);overflow-x:hidden}
h1,h2{font-family:var(--display);letter-spacing:-.02em;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,7vw,5.6rem);font-weight:700}
h2{font-size:clamp(2rem,5vw,4rem);font-weight:700}
h1 em,h2 em{font-style:normal;background:linear-gradient(120deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.s{min-height:100vh;min-height:100dvh;scroll-snap-align:start;display:flex;align-items:center;position:relative;padding:72px 24px 64px}
.cuerpo{width:min(1100px,100%);margin:0 auto;position:relative;z-index:1}
.centro{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.kicker{display:inline-block;font:600 .8rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.lead{font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--muted);max-width:60ch;margin:16px 0 0}
.centro .lead{margin-inline:auto}
.hint{color:var(--muted);font-size:.9rem;margin:8px 0 0}
/* fondo con orbes de color, lentos */
.fondo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.orbe{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:flotar 18s ease-in-out infinite alternate}
.orbe.a{width:60vw;height:60vw;left:-15vw;top:-20vw;background:radial-gradient(circle,#6D28D9,transparent 65%)}
.orbe.b{width:50vw;height:50vw;right:-15vw;bottom:-20vw;background:radial-gradient(circle,#0EA5E9,transparent 65%);animation-delay:-6s}
.orbe.c{width:22vw;height:22vw;right:20vw;top:10vw;background:radial-gradient(circle,#C6FF3D,transparent 65%);opacity:.22;animation-delay:-12s}
@keyframes flotar{from{transform:translate(0,0) scale(1)}to{transform:translate(4vw,3vw) scale(1.08)}}
/* marca animada (mismas fases que la portada de la plataforma) */
.wordmark{display:block;overflow:visible;color:#fff;max-width:80vw;height:auto}
.wordmark text{font-family:Jost,"Plus Jakarta Sans",Inter,sans-serif;font-weight:600;font-size:54px;fill:currentColor}
.wordmark .pd{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round}
.wordmark .dot{fill:var(--verde)}
@keyframes wm-p{from{transform:translate(112px,0)}to{transform:translate(0,0)}}
@keyframes wm-d{from{transform:translate(-44px,0)}to{transform:translate(0,0)}}
@keyframes wm-i{from{transform:translate(-16.5px,-9.4px)}to{transform:translate(0,0)}}
@keyframes wm-t{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.wordmark .w-p{animation:wm-p 1.1s cubic-bezier(.65,0,.2,1) .9s both}
.wordmark .w-d{animation:wm-d 1.1s cubic-bezier(.65,0,.2,1) .9s both}
.wordmark .w-i{animation:wm-i 1.1s cubic-bezier(.65,0,.2,1) .9s both}
.wordmark .w-t{animation:wm-t .7s ease 1.5s both}
/* aparición al entrar en pantalla */
.rev{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*.09s)}
.s.en .rev{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}.orbe,.wordmark *{animation:none!important}}
/* navegación */
.progreso{position:fixed;left:0;top:0;height:3px;width:100%;background:rgba(255,255,255,.08);z-index:40}
.progreso span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s ease}
.puntos{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:40}
.puntos a{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.22);display:block;position:relative;transition:transform .2s,background .2s}
.puntos a::before{content:"";position:absolute;inset:-14px}
.puntos a.on{background:var(--verde);transform:scale(1.35)}
.puntos a:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
.salir{position:fixed;top:18px;right:22px;z-index:40;color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(20,20,38,.7);backdrop-filter:blur(8px)}
.ayuda{position:fixed;left:22px;bottom:18px;z-index:40;color:var(--muted);font-size:.8rem;transition:opacity .5s}
.ayuda.oculta{opacity:0}
/* bloques */
.tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:34px}
.tres.lineas{grid-template-columns:1fr;margin-top:0;gap:12px}.tres.lineas .tarjeta{padding:18px 20px}.tres.lineas b{font-size:1.05rem}.tres.lineas p{font-size:.92rem}
.tarjeta{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;min-width:0}
.tarjeta b{font-family:var(--display);font-size:1.25rem;display:block;margin-bottom:8px}
.tarjeta p{margin:0;color:var(--muted)}
.pasos{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.pasos li{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px;min-width:0}
.pasos .n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));font:700 1.1rem var(--display);color:#fff;margin-bottom:12px}
.pasos b{font-family:var(--display);font-size:1.2rem;display:block;margin-bottom:6px}
.pasos p{margin:0;color:var(--muted)}
.pestanas,.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pestanas button,.chips button{min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 .95rem var(--body);cursor:pointer;transition:border-color .2s,background .2s}
.pestanas button:hover,.chips button:hover{border-color:var(--accent)}
.pestanas button.on,.chips button.on{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff}
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:18px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;min-width:0;animation:entra .45s ease both}
.plan.reco{border-color:var(--accent);box-shadow:0 0 0 4px rgba(139,92,246,.18)}
.plan small{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.plan b{font-family:var(--display);font-size:1.15rem;display:block;margin:4px 0}
.plan .precio{font-family:var(--mono);font-size:1.3rem;color:var(--verde)}
.plan p{margin:6px 0 0;color:var(--muted);font-size:.86rem}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:18px}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;min-width:0;animation:entra .45s ease both}
.prod.pronto{opacity:.55}
.prod .ic{font-size:1.6rem;display:block}
.prod b{font-family:var(--display);display:block;margin:6px 0 4px}
.prod p{margin:0;color:var(--muted);font-size:.85rem}
.prod .etq{display:inline-block;margin-top:8px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--verde)}
.tabla-wrap{overflow-x:auto;margin-top:30px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.compara{border-collapse:collapse;width:100%;min-width:640px}
.compara th,.compara td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compara th{font:600 .78rem/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.compara td{color:var(--muted)}
.compara td:first-child{color:var(--ink);font-weight:500}
.compara .pd{color:var(--ink);background:rgba(139,92,246,.12)}
.compara tr:last-child td{border-bottom:0}
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;margin-top:30px;align-items:start}
.recarga{margin-top:22px;margin-bottom:40px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px}
.recarga label{font-family:var(--display);font-size:1.3rem;display:block}
.recarga output{color:var(--verde);font-family:var(--mono)}
.recarga input[type=range]{width:100%;margin:14px 0;accent-color:var(--accent);height:44px}
.alcance{display:grid;gap:8px}
.alcance div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:6px 0;font-size:.95rem}
.alcance div:last-child{border-bottom:0}
.alcance b{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.barras{display:grid;gap:12px}
.barra{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.barra span{grid-column:1/-1;font-size:.9rem;color:var(--muted)}
.barra i{display:block;height:14px;border-radius:999px;background:var(--line);position:relative;overflow:hidden}
.barra i::after{content:"";position:absolute;inset:0;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--verde));transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.s.en .barra i::after{width:var(--p)}
.barra b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:30px}
.cifra{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px;min-width:0}
.cifra b{font-family:var(--display);font-size:3rem;line-height:1;display:block;color:var(--verde);font-variant-numeric:tabular-nums}
.cifra span{display:block;margin-top:8px;color:var(--muted);font-size:.9rem}
.ruta{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.ruta li{border-left:3px solid var(--accent);padding:4px 0 4px 16px;color:var(--muted);min-width:0}
.ruta b{display:block;color:var(--ink);font-family:var(--display);margin-bottom:4px}
.vivo{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:30px}
.dato{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;text-align:center;min-width:0}
.dato b{font-family:var(--display);font-size:2.4rem;line-height:1;display:block;color:var(--verde)}
.dato span{display:block;color:var(--muted);font-size:.85rem;margin-top:6px}
.lista{margin:26px 0 0;padding-left:22px;color:var(--muted);display:grid;gap:8px;max-width:70ch}
.cierre .mono{width:96px;height:96px}
.qr{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}
.qr img{border-radius:18px;background:#fff;padding:8px;width:220px;max-width:60vw;height:auto}
.qr span{font-family:var(--mono);color:var(--muted)}
.boton{display:inline-block;margin-top:6px;padding:16px 28px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;text-decoration:none;font:700 1.1rem var(--display);box-shadow:0 12px 40px rgba(139,92,246,.35)}
@media (max-width:640px){html{scroll-snap-type:y proximity}.s{padding:64px 16px 56px;min-height:auto;padding-top:80px}.puntos{right:8px}.salir{top:12px;right:12px;font-size:.8rem}.ayuda{display:none}.wordmark{width:78vw}}