/* =========================================================
   Supernova — hoja de estilos compartida
   Todas las páginas del sitio nuevo cargan este único archivo.
   ========================================================= */

/* Fuente original de la marca (la misma que usa landing/src) — auto-hosteada */
@font-face {
  font-family: "PP Neue Machina";
  src: local("PP Neue Machina Light"), local("PPNeueMachina-Light"),
    url("fonts/NeueMachina-Light.woff2") format("woff2"),
    url("fonts/NeueMachina-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: local("PP Neue Machina"), local("PP Neue Machina Regular"), local("PPNeueMachina-Regular"),
    url("fonts/NeueMachina-Regular.woff2") format("woff2"),
    url("fonts/NeueMachina-Regular.otf") format("opentype");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: local("PP Neue Machina Ultrabold"), local("PPNeueMachina-Ultrabold"),
    url("fonts/NeueMachina-Ultrabold.woff2") format("woff2"),
    url("fonts/NeueMachina-Ultrabold.otf") format("opentype");
  font-weight: 800 900; font-style: normal; font-display: swap;
}

:root{
  --ink:#F5F5F7; --sub:#A6A6C0; --sub-2:#7D7D99; --nav:#EDEFFA; --foot:#C9CCE0;
  --hair:rgba(196,190,232,.26); --navdim:#B8BCDC; --feat:#D6D4F2;
  --bg0:#030308; --bg1:#0A0A14; --surface:#0F0F1C; --surface-2:#15152A; --border:#262640;
  --c-purple:107,44,245; --c-blue:33,102,255; --c-cyan:0,212,255; --c-magenta:255,44,166;
  --purple:#9B7BFA; --blue:#6A9BFF; --cyan:#2DD4E8;
  --good:#4ADE80; --good-bg:rgba(74,222,128,.12); --warn:#FBBF24; --warn-bg:rgba(251,191,36,.12);
  --grad:linear-gradient(90deg, rgb(var(--c-purple)) 0%, rgb(var(--c-blue)) 55%, rgb(var(--c-cyan)) 100%);
  --radius:16px;
  color-scheme: dark;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg0); color:var(--ink);
  font-family:"PP Neue Machina","Neue Machina","Inter","SF Pro Display","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
ul,ol{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4{font-weight:600; letter-spacing:-0.01em; margin:0; text-wrap:balance;}
p{margin:0;}
img{max-width:100%;}
::selection{background:rgba(var(--c-purple),.4);}

/* ---------- fondo de estrellas, liviano, en todas las páginas ---------- */
.starfield{position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--bg0);}

/* ---------- nav pill persistente (igual en todas las páginas) ---------- */
.navbar{position:fixed; top:max(16px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  z-index:40; width:calc(100% - 24px); display:flex; justify-content:center;}
.navpill{
  display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:22px;
  padding:9px 10px 9px 18px; border-radius:999px; max-width:100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%),
    linear-gradient(90deg, rgba(var(--c-purple),.14) 0%, rgba(var(--c-cyan),.10) 100%),
    linear-gradient(180deg, rgba(3,3,8,.68) 0%, rgba(3,3,8,.8) 100%);
  border:1px solid var(--hair);
  -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 0 rgba(255,255,255,.07);
}
.brand{display:flex; align-items:center; gap:9px;}
.brand svg{display:block; width:20px; height:20px;}
.brand .spark{fill:var(--ink);}
.brand .word{font-weight:600; color:var(--ink); letter-spacing:.13em; font-size:14px;}
.menu{display:flex; align-items:center; gap:19px;}
.menu a{font-size:13.5px; color:var(--nav); opacity:.82; white-space:nowrap; transition:opacity .15s ease;}
.menu a:hover, .menu a[aria-current]{opacity:1;}
.navcta{font-size:12.5px; font-weight:600; color:#fff; padding:8px 17px; border-radius:999px; white-space:nowrap;
  background:var(--grad); box-shadow:0 0 18px rgba(var(--c-purple),.35);}
@media (max-width:760px){
  .navpill{gap:13px; padding:7px 8px 7px 13px;}
  .menu{gap:10px;}
  .menu a{font-size:11px;}
  .brand .word{font-size:12px;}
  .navcta{font-size:11px; padding:7px 12px;}
}
@media (max-width:420px){ .menu{gap:8px;} .menu a{font-size:10px;} }

/* ---------- submenús desplegables (Industrias, Casos, Recursos) ---------- */
.navpill{position:relative;}
.dd{position:relative; display:flex; align-items:center;}
.dd-top{display:inline-flex; align-items:center; gap:5px;}
.dd-top::after{content:''; width:5px; height:5px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:.7; transition:transform .2s ease;}
.dd-panel{position:absolute; top:100%; left:50%; z-index:50; min-width:300px; padding-top:16px;
  opacity:0; visibility:hidden; transform:translate(-50%,6px); transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;}
.dd-card{background:linear-gradient(180deg, rgba(20,20,38,.97) 0%, rgba(10,10,20,.97) 100%); border:1px solid var(--hair); border-radius:16px;
  padding:10px; box-shadow:0 18px 40px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);}
.dd:hover .dd-panel, .dd:focus-within .dd-panel, .dd.open .dd-panel{opacity:1; visibility:visible; transform:translate(-50%,0); transition-delay:0s;}
.dd:hover .dd-top::after, .dd.open .dd-top::after{transform:translateY(1px) rotate(225deg);}
.menu .dd-panel a{display:block; padding:10px 12px; border-radius:10px; opacity:1; white-space:normal; font-size:14px; color:var(--ink);}
.menu .dd-panel a:hover, .menu .dd-panel a:focus-visible, .menu .dd-panel a[aria-current]{background:rgba(255,255,255,.06);}
.menu .dd-panel a small{display:block; margin-top:2px; font-size:12.5px; line-height:1.4; color:var(--sub);}
.menu .dd-panel .dd-k{display:block; padding:10px 12px 4px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--purple);}
.menu .dd-panel a.dd-all{margin-top:4px; border-top:1px solid var(--border); border-radius:0 0 10px 10px; font-size:13px; font-weight:600; color:var(--purple);}
.menu .dd-panel a.dd-all:hover{color:var(--ink);}
.dd-panel.wide{min-width:560px;}
/* el último submenú (Recursos) se alinea a la derecha para no salirse de la pantalla en anchos intermedios */
.dd:last-child .dd-panel{left:auto; right:-40px; transform:translate(0,6px);}
.dd:last-child:hover .dd-panel, .dd:last-child:focus-within .dd-panel, .dd:last-child.open .dd-panel{transform:translate(0,0);}
.dd-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 6px;}
@media (max-width:760px){
  /* en celular el panel ocupa el ancho de la píldora y se abre con un toque */
  .dd{position:static;}
  .dd-top{gap:4px;}
  .dd-top::after{width:4px; height:4px;}
  .dd:hover .dd-panel, .dd:focus-within .dd-panel{opacity:0; visibility:hidden;}
  .dd-panel, .dd-panel.wide{left:0; right:0; min-width:0; padding-top:8px; transform:translateY(6px);}
  .dd:last-child .dd-panel{left:0; right:0; transform:translateY(6px);}
  .dd.open .dd-panel, .dd:last-child.open .dd-panel{opacity:1; visibility:visible; transform:none;}
  .dd-cols{grid-template-columns:1fr;}
  .menu .dd-panel a{font-size:14px; padding:9px 12px;}
  .menu .dd-panel a small{display:none;}
}
[id]{scroll-margin-top:110px;}
@media (max-width:420px){ .dd-top::after{display:none;} .navpill{gap:10px;} }

/* ---------- botones / pill glass ---------- */
.btn{position:relative; display:inline-flex; align-items:center; gap:10px; border-radius:999px;
  padding:15px 26px; font-size:15.5px; font-weight:500; cursor:pointer;
  background:
    linear-gradient(180deg, rgba(3,3,8,0) 45%, rgba(3,3,8,.14) 78%, rgba(3,3,8,.30) 100%),
    linear-gradient(90deg, rgba(var(--c-purple),.22) 0%, rgba(var(--c-blue),.14) 50%, rgba(var(--c-cyan),.20) 100%),
    linear-gradient(90deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.10) 40%, rgba(255,255,255,.05) 100%);
  -webkit-backdrop-filter:blur(20px) saturate(1.1); backdrop-filter:blur(20px) saturate(1.1);
  box-shadow:0 -2px 20px rgba(107,44,245,.22), 0 0 30px rgba(0,212,255,.14), inset 0 1px 0 0 rgba(255,255,255,.35);
}
.btn::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.14) 45%, rgba(255,255,255,0) 78%),
    linear-gradient(90deg, rgba(var(--c-purple),.9) 0%, rgba(var(--c-blue),.5) 45%, rgba(var(--c-cyan),.9) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
}
.btn svg{width:16px; height:11px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter;}
.btn-ghost{background:transparent; border:1px solid var(--hair); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;}
.btn-ghost::before{display:none;}
.btn-sm{padding:10px 18px; font-size:13.5px;}

/* ---------- layout ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
@media (max-width:640px){ .wrap{padding:0 18px;} }
section{padding-block:72px;}
.section-tight{padding-block:48px;}
.eyebrow{font-family:"PP Neue Machina",sans-serif; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--purple);}
.h1{font-size:clamp(2rem,5vw,3.2rem); line-height:1.1;}
.h2{font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.16;}
.h3{font-size:1.2rem;}
.lede{color:var(--sub); font-size:1.08rem; max-width:62ch; margin-top:16px;}
.hero-pad{padding-top:148px;}
@media (max-width:640px){ .hero-pad{padding-top:124px;} }

/* ---------- animación de aparición al hacer scroll ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* ---------- tarjetas ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px;
  position:relative; overflow:hidden; transition:border-color .2s ease, transform .2s ease;}
.card::before{content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--grad);
  opacity:0; transition:opacity .2s ease;}
.card:hover{border-color:rgba(var(--c-purple),.45); transform:translateY(-2px);}
.card:hover::before{opacity:1;}
.grid{display:grid; gap:16px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

/* ---------- tabla (para "problemas típicos") ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius);}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:.95rem;}
th,td{padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border);}
th{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--sub-2); background:var(--surface-2);}
tr:last-child td{border-bottom:none;}

/* ---------- pasos del método: timeline con línea conectora ---------- */
.steps{position:relative; display:flex; flex-direction:column; gap:0; counter-reset:step; padding-left:54px;}
.steps::before{content:''; position:absolute; left:19px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, rgba(var(--c-purple),.55), rgba(var(--c-cyan),.15));}
.step{position:relative; padding:0 0 36px; }
.step:last-child{padding-bottom:0;}
.step::before{counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; left:-54px; top:-2px; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"PP Neue Machina",sans-serif; font-weight:700; font-size:.92rem; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--border); box-shadow:0 0 0 4px var(--bg0);}
.step:hover::before{background:var(--grad); border-color:transparent; color:#fff; transition:background .2s ease;}
.step h3{margin-bottom:6px;}
.step p{color:var(--sub);}
@media (max-width:480px){ .steps{padding-left:44px;} .step::before{left:-44px; width:34px; height:34px; font-size:.82rem;} }

/* ---------- FAQ: acordeón nativo (details/summary) ---------- */
.faq{border-top:1px solid var(--border);}
.faq details{border-bottom:1px solid var(--border);}
.faq summary{list-style:none; cursor:pointer; padding:19px 28px 19px 0; position:relative;
  font-size:1rem; font-weight:600; transition:color .15s ease;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:''; position:absolute; right:4px; top:50%; width:9px; height:9px;
  border-right:1.6px solid var(--sub); border-bottom:1.6px solid var(--sub);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq details:hover summary{color:var(--purple);}
.faq .faq-a{color:var(--sub); font-size:.95rem; padding:0 28px 20px 0; max-width:68ch;}
/* compatibilidad con el markup anterior .faq-item (lo dejamos estilado por si queda alguno) */
.faq-item{border-top:1px solid var(--border); padding:20px 0;}
.faq-item:first-child{border-top:none;}
.faq-item h3{font-size:1rem; font-weight:600;}
.faq-item p{color:var(--sub); margin-top:8px; font-size:.95rem;}

/* ---------- chips / etiquetas ---------- */
.chip{display:inline-block; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  padding:4px 11px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--cyan);}
.chip-soon{color:var(--sub-2);}

/* ---------- industrias: grid de tarjetas ---------- */
.ind-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px;
  display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden;
  transition:border-color .15s ease, transform .15s ease;}
.ind-card::before{content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--grad);
  opacity:0; transition:opacity .2s ease;}
.ind-card:hover{border-color:rgba(var(--c-purple),.5); transform:translateY(-2px);}
.ind-card:hover::before{opacity:1;}
.ind-card:hover .ind-icon{transform:scale(1.08); border-color:rgba(var(--c-purple),.6);}
.ind-card .tag{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--cyan);}
.ind-icon{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); margin-bottom:4px; transition:transform .2s ease, border-color .2s ease;}
.ind-icon svg{width:22px; height:22px; fill:none; stroke:var(--purple); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.soon-card{border-style:dashed; color:var(--sub-2); text-align:center;}

/* ---------- estadísticas (números animados) ---------- */
.stat-tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  position:relative; overflow:hidden; transition:border-color .2s ease, transform .2s ease;}
.stat-tile::before{content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--grad);
  opacity:0; transition:opacity .2s ease;}
.stat-tile:hover{border-color:rgba(var(--c-purple),.4); transform:translateY(-2px);}
.stat-tile:hover::before{opacity:1;}
.stat-tile .num{font-weight:700; font-size:2.1rem; background:var(--grad); -webkit-background-clip:text;
  background-clip:text; color:transparent; font-variant-numeric:tabular-nums; display:inline-block;}
.stat-tile p{color:var(--sub); font-size:.92rem; margin-top:6px;}

/* ---------- pull quote ---------- */
.pull{margin-top:8px; padding:20px 24px; background:var(--surface-2); border-left:3px solid var(--purple);
  border-radius:0 var(--radius) var(--radius) 0; font-size:1.02rem;}
.pull b{color:var(--purple);}

/* ---------- footer ---------- */
footer.site-foot{border-top:1px solid var(--border); padding-block:40px; margin-top:40px;}
footer.site-foot .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; align-items:center;}
footer.site-foot .word{font-weight:600; letter-spacing:.1em; font-size:.85rem;}
footer.site-foot nav{display:flex; flex-wrap:wrap; gap:18px; font-size:.85rem; color:var(--sub);}
footer.site-foot .legal{color:var(--sub-2); font-size:.78rem; width:100%; margin-top:12px;}

/* ---------- utilidades ---------- */
.mono{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;}
.center{text-align:center;}
.stack{display:flex; flex-direction:column; gap:14px;}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} html{scroll-behavior:auto;} }

/* =========================================================
   v3 — estilo "operación primero": títulos grandes en dos tonos,
   cajas con borde fino y numeración, línea de tiempo, fondo con orbes.
   Marca Supernova (PP Neue Machina, violeta/azul/cyan); no usa
   tipografía ni colores de terceros.
   ========================================================= */

/* ---------- fondo: orbes, retícula y ruido sutil (fijo, detrás de todo) ---------- */
.bgfx{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:var(--bg0);}
.bgfx i{position:absolute; display:block; border-radius:50%; filter:blur(8px);}
.bgfx .o1{width:900px; height:700px; left:50%; top:-80px; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(112,78,181,.20), rgba(91,72,160,.10) 40%, transparent 72%);}
.bgfx .o2{width:620px; height:660px; right:-240px; top:24%;
  background:radial-gradient(ellipse, rgba(85,89,194,.18), transparent 65%);}
.bgfx .o3{width:660px; height:560px; left:-320px; bottom:-60px;
  background:radial-gradient(ellipse, rgba(143,57,123,.12), transparent 70%);}
.bgfx .gl{position:absolute; inset:0; opacity:.12;
  background-image:linear-gradient(rgba(174,157,225,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(174,157,225,.16) 1px, transparent 1px);
  background-size:90px 90px;
  -webkit-mask-image:linear-gradient(transparent, #000 25%, #000 70%, transparent);
          mask-image:linear-gradient(transparent, #000 25%, #000 70%, transparent);}
.bgfx .nz{position:absolute; inset:0; opacity:.10;
  background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".67" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity=".45"/%3E%3C/svg%3E');}

/* ---------- layout y títulos de sección ---------- */
.wrap-wide{max-width:1200px; margin:0 auto; padding:0 24px;}
@media (max-width:640px){ .wrap-wide{padding:0 18px;} }
section.sect{padding-block:96px;}
@media (max-width:640px){ section.sect{padding-block:68px;} }
.band{background:rgba(8,8,18,.62); border-block:1px solid rgba(255,255,255,.05);}
.disp{font-size:clamp(2.3rem,5.4vw,4.3rem); line-height:1.03; font-weight:800; letter-spacing:-.035em; text-wrap:balance; margin-top:14px;}
.disp .dim{color:#8e8eaa;}
.disp-m{font-size:clamp(1.8rem,3.7vw,2.8rem); line-height:1.07; font-weight:800; letter-spacing:-.03em; text-wrap:balance; margin-top:14px;}
.disp-m .dim{color:#8e8eaa;}
.lede-w{color:var(--sub); font-size:1.08rem; max-width:66ch; margin-top:18px;}
.more{display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-size:.9rem; font-weight:600; color:var(--purple);}
.more svg{width:16px; height:11px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:square;}
.more:hover{color:var(--ink);}

/* ---------- cajas: borde fino, número a la derecha, icono de línea ---------- */
.bx{position:relative; background:rgba(15,15,28,.78); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:28px 30px 26px; transition:border-color .2s ease, background .2s ease;}
.bx:hover{border-color:rgba(var(--c-purple),.5); background:rgba(21,21,42,.85);}
.bx-num{position:absolute; top:24px; right:26px; font-size:.78rem; letter-spacing:.1em; color:var(--sub-2);}
.bx-ic{display:block; width:34px; height:34px; margin-bottom:22px; fill:none; stroke:var(--purple); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.bx h3{font-size:1.28rem; font-weight:800; letter-spacing:-.02em; margin-bottom:10px;}
.bx p{color:var(--sub); font-size:.95rem;}
.bx ul{margin-top:18px; border-top:1px solid rgba(255,255,255,.1); padding-top:16px; display:flex; flex-direction:column; gap:10px;}
.bx li{display:flex; gap:10px; font-size:.9rem; color:var(--feat);}
.bx li::before{content:''; flex:none; width:6px; height:6px; margin-top:.55em; border-radius:50%; background:var(--cyan);}
.bx .tag{display:inline-block; margin-bottom:14px; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan);}
.bx-link{display:block;}

/* ---------- línea de tiempo de 3 fases (método) ---------- */
.tl3{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-top:36px; margin-top:34px;}
.tl3::before{content:''; position:absolute; left:0; right:0; top:6px; height:1px;
  background:linear-gradient(90deg, rgba(var(--c-purple),.65), rgba(var(--c-blue),.45), rgba(var(--c-cyan),.5));}
.tl3 > .bx::after{content:''; position:absolute; top:-35px; left:30px; width:11px; height:11px; border-radius:50%;
  background:var(--bg0); border:1.5px solid var(--cyan); box-shadow:0 0 0 4px var(--bg0);}
.tl3 > .bx:hover::after{background:var(--cyan);}
@media (max-width:860px){ .tl3{grid-template-columns:1fr; padding-top:0;} .tl3::before,.tl3>.bx::after{display:none;} }

/* ---------- proceso en 5 pasos ---------- */
.proc{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:40px;}
.proc-step{border-top:1px solid rgba(var(--c-purple),.55); padding:22px 4px 0 0;}
.proc-step .n{display:block; font-size:2.6rem; font-weight:300; line-height:1; letter-spacing:-.04em; color:rgba(255,255,255,.22);}
.proc-step h3{font-size:1.05rem; font-weight:800; margin:14px 0 8px;}
.proc-step p{font-size:.88rem; color:var(--sub);}
.proc-step .out{margin-top:14px; padding-left:10px; border-left:2px solid rgba(var(--c-cyan),.55); font-size:.82rem; color:var(--feat);}
.proc-step .out b{display:block; margin-bottom:2px; font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sub-2);}
@media (max-width:1000px){ .proc{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .proc{grid-template-columns:1fr;} }

/* ---------- esquema silos vs. base común ---------- */
.silo{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:40px;}
.silo-p{display:flex; flex-direction:column; gap:16px; min-height:360px; padding:26px;
  background:rgba(15,15,28,.78); border:1px solid rgba(255,255,255,.12); border-radius:12px;}
.silo-p.on{border-color:rgba(var(--c-purple),.45);}
.silo-p h3{font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sub-2);}
.silo-p.on h3{color:var(--purple);}
.nodes{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.nodes.three{grid-template-columns:repeat(3,1fr);}
.node{padding:10px 12px; border-radius:8px; font-size:.82rem; text-align:center; color:#d9d0f5;
  background:rgba(172,144,236,.09); border:1px solid rgba(178,152,253,.22);}
.silo-p.off .node{background:transparent; border-style:dashed; border-color:rgba(255,255,255,.2); color:var(--sub);}
.silo-p.off .node.warn{border-color:rgba(251,191,36,.55); color:var(--warn);}
.core{padding:14px; border-radius:10px; text-align:center; font-weight:800;
  background:linear-gradient(90deg, rgba(var(--c-purple),.30), rgba(var(--c-cyan),.20)); border:1px solid rgba(var(--c-purple),.55);}
.flow{text-align:center; color:var(--purple); font-size:1rem; letter-spacing:.9em; padding-left:.9em; line-height:1;}
.silo-p .cap{margin-top:auto; font-size:.86rem; color:var(--sub);}
.silo-note{margin-top:14px; font-size:.78rem; color:var(--sub-2);}
@media (max-width:760px){ .silo{grid-template-columns:1fr;} .silo-p{min-height:0;} }

/* ---------- agente de diagnóstico (demo sin LLM) ---------- */
.agent{margin-top:36px; background:rgba(15,15,28,.82); border:1px solid rgba(255,255,255,.14); border-radius:14px; overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.45), 0 0 80px rgba(var(--c-purple),.10);}
.ag-head{display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.1); font-size:.82rem; font-weight:600;}
.ag-head .live{margin-left:auto; display:flex; align-items:center; gap:7px; font-size:.7rem; font-weight:500; color:var(--good);}
.ag-head .live::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--good); box-shadow:0 0 10px var(--good);}
.ag-body{display:grid; grid-template-columns:1fr 250px;}
.ag-chat{display:flex; flex-direction:column; min-width:0; padding:18px 20px;}
.ag-stream{display:flex; flex-direction:column; gap:14px; min-height:170px; max-height:380px; overflow:auto; padding-bottom:8px;}
.ag-msg{font-size:.9rem; line-height:1.65; color:#d4d1e1; max-width:96%; white-space:pre-line;}
.ag-msg.user{align-self:flex-end; max-width:86%; padding:10px 14px; border-radius:12px 12px 3px 12px;
  background:rgba(var(--c-purple),.18); border:1px solid rgba(var(--c-purple),.3); color:#ece7fb;}
.ag-quick{display:flex; flex-wrap:wrap; gap:8px; padding:6px 0 14px;}
.ag-chip{font:inherit; font-size:.78rem; padding:9px 13px; border-radius:999px; cursor:pointer; color:#c9c4d9;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); transition:background .2s ease, border-color .2s ease;}
.ag-chip:hover{background:rgba(var(--c-purple),.2); border-color:rgba(var(--c-purple),.6); color:#fff;}
.ag-entry{display:flex; gap:8px; align-items:flex-end; padding:9px; border-radius:12px; background:rgba(3,3,8,.65); border:1px solid rgba(255,255,255,.18);}
.ag-entry textarea{flex:1; resize:none; outline:none; border:0; background:none; color:#fff; font:inherit; font-size:.88rem; line-height:1.5; min-height:42px; max-height:94px; padding:6px 9px;}
.ag-entry textarea::placeholder{color:#77778b;}
.ag-send{flex:none; width:42px; height:42px; border:0; border-radius:9px; cursor:pointer; font-size:1.1rem; color:#fff; background:var(--grad);}
.ag-send:disabled{background:#33304a; color:#8a869c; cursor:not-allowed;}
.ag-note{margin-top:9px; font-size:.7rem; color:var(--sub-2);}
.ag-side{padding:20px; border-left:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.02);}
.ag-side .lbl{font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sub-2);}
.ag-steps{display:flex; flex-direction:column; gap:16px; margin-top:18px;}
.ag-step{display:flex; align-items:center; gap:11px; font-size:.8rem; color:var(--sub-2);}
.ag-dot{flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.62rem; background:#1b1a2c; border:1px solid #39334a;}
.ag-step.active{color:var(--ink);} .ag-step.active .ag-dot{border-color:var(--purple); background:rgba(var(--c-purple),.3);}
.ag-step.done{color:#bfe6cf;} .ag-step.done .ag-dot{border-color:#4f8a66; background:rgba(74,222,128,.16);}
.ag-report{margin:2px 0 12px; padding:16px; border-radius:12px; background:rgba(21,21,42,.9); border:1px solid rgba(255,255,255,.14);}
.ag-report .t{font-size:.8rem; font-weight:700; margin-bottom:10px; color:#e5ddff;}
.ag-report .g{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;}
.ag-report .m{padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,.1);}
.ag-report .m strong{display:block; font-size:1.3rem; font-weight:800; line-height:1.1;}
.ag-report .m span{font-size:.68rem; color:var(--sub);}
.ag-report p{font-size:.8rem; color:#b5b1c8; margin:8px 0;}
.ag-report .hyp{display:inline-block; margin-top:4px; padding:4px 8px; border-radius:5px; font-size:.66rem; color:var(--warn); border:1px solid rgba(251,191,36,.35);}
.ag-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px;}
.ag-reset{font:inherit; font-size:.78rem; background:none; border:0; color:var(--sub); text-decoration:underline; cursor:pointer;}
@media (max-width:820px){ .ag-body{grid-template-columns:1fr;} .ag-side{display:none;} }

/* =========================================================
   v3.1 — hero con el fondo del prototipo 2.0 (orbes, retícula y ruido),
   sin cursivas, con la tipografía de Supernova.
   ========================================================= */
:root{ --bg0:#07080e; }
.hero3{position:relative; isolation:isolate; overflow:hidden; padding:168px 20px 104px;}
.hero3.short{padding-bottom:72px;}
.herobg{position:absolute; inset:0; z-index:-1; pointer-events:none;}
.herobg i{position:absolute; display:block; filter:blur(6px);}
.herobg .o1{width:850px; height:680px; left:50%; top:0; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(112,78,181,.21) 0%, rgba(91,72,160,.11) 38%, transparent 73%);}
.herobg .o2{width:580px; height:640px; right:-225px; top:130px;
  background:radial-gradient(ellipse, rgba(85,89,194,.20), transparent 65%);}
.herobg .o3{width:630px; height:530px; left:-320px; bottom:-100px;
  background:radial-gradient(ellipse, rgba(143,57,123,.13), transparent 70%);}
.herobg .gl{position:absolute; inset:0; opacity:.14;
  background-image:linear-gradient(rgba(174,157,225,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(174,157,225,.16) 1px, transparent 1px);
  background-size:90px 90px;
  -webkit-mask-image:linear-gradient(transparent, #000 30%, transparent 82%);
          mask-image:linear-gradient(transparent, #000 30%, transparent 82%);}
.herobg .nz{position:absolute; inset:0; opacity:.12;
  background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".67" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity=".45"/%3E%3C/svg%3E');}
.hero3-in{max-width:1080px; margin:0 auto; text-align:center;}
.hero3-in.left{text-align:left; max-width:1200px;}
.eyebrow-dot{display:inline-flex; align-items:center; gap:9px; font-size:.68rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:#d0c0fd;}
.eyebrow-dot::before{content:''; width:7px; height:7px; border-radius:50%; background:#a28cf9; box-shadow:0 0 18px #a28cf9;}
.hero3 h1{font-size:clamp(2.8rem,7.2vw,6.4rem); line-height:1; font-weight:800; letter-spacing:-.045em; margin:26px 0 24px; text-wrap:balance;}
.hero3 h1 .dim{color:#8e8eaa;}
.hero3 .sub3{max-width:620px; margin:0 auto; font-size:1.06rem; line-height:1.7; color:#aaacbe;}
.hero3-in.left .sub3{margin:0;}
.hero3 .hint{display:inline-flex; align-items:center; gap:10px; margin-top:26px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#aea3d5;}
.hero3 .hint span{font-size:1.3rem; line-height:1;}
@media (max-width:640px){ .hero3{padding:140px 16px 72px;} }

/* agente dentro del hero: tarjeta con brillo superior, como en el prototipo */
.hero3 .agent{position:relative; max-width:1010px; margin:44px auto 0; text-align:left; border-radius:22px;
  border:1px solid rgba(205,196,240,.18);
  background:linear-gradient(150deg, rgba(30,29,48,.9), rgba(13,16,27,.9) 58%, rgba(23,19,37,.9));
  box-shadow:0 34px 130px rgba(0,0,0,.5), 0 0 100px rgba(126,79,198,.13);}
.hero3 .agent::before{content:''; position:absolute; top:0; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(207,182,255,.55), transparent);}
.hero3 .ag-send{color:#14101f; background:#d5c5ff;}
.hero3 .ag-send:hover{background:#fff;}
.hero3 .ag-send:disabled{background:#564c70; color:#a39aaf;}
.underchat{display:flex; justify-content:center; flex-wrap:wrap; gap:26px; margin-top:24px; font-size:.78rem; color:#8f8da1;}
.underchat span{display:flex; align-items:center; gap:7px;}
.underchat b{color:#a5e5c7; font-weight:500;}
@media (max-width:640px){ .underchat{gap:12px;} }

/* ---------- bloque en dos columnas (quiénes somos, human in the loop) ---------- */
.duo{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start;}
@media (max-width:860px){ .duo{grid-template-columns:1fr; gap:28px;} }
.saberes{border-top:1px solid rgba(255,255,255,.1);}
.saber{display:grid; grid-template-columns:44px 1fr; gap:14px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.1);}
.saber .n{font-size:.78rem; letter-spacing:.1em; color:var(--sub-2); padding-top:4px;}
.saber h3{font-size:1.1rem; font-weight:800; letter-spacing:-.01em; margin-bottom:6px;}
.saber p{color:var(--sub); font-size:.93rem;}
.callout{margin-top:26px; padding:20px 24px; border-radius:12px; background:rgba(var(--c-purple),.10); border:1px solid rgba(var(--c-purple),.35); color:var(--feat); font-size:1rem;}
.callout b{color:var(--ink);}
/* titular del hero: escala con el ancho para que "Más operación funcionando." entre en una línea en escritorio */
.hero3-in{max-width:1240px;}
.hero3 h1{font-size:clamp(2.4rem, calc((100vw - 40px) / 14.2), 5.6rem);}
.wrap-wide > .faq{max-width:920px;}

/* =========================================================
   v3.2 — casos e industrias: cadena de touchpoints, fichas de caso
   y línea de "terreno ganado".
   ========================================================= */
/* cadena de la operación: cada eslabón dice dónde entra Supernova */
.chain{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:40px;}
.chain .proc-step h3{font-size:.98rem;}
.chain .proc-step .out{font-size:.8rem;}
@media (max-width:1100px){ .chain{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .chain{grid-template-columns:1fr;} }

/* para quién: segmentos */
.segs{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.seg{padding:10px 16px; border-radius:999px; font-size:.86rem; color:var(--feat);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);}

/* ficha de caso */
.case{display:grid; grid-template-columns:1.45fr .55fr; gap:36px; padding:34px 34px 30px;}
@media (max-width:900px){ .case{grid-template-columns:1fr; gap:24px; padding:26px;} }
.case h3{font-size:1.6rem; font-weight:800; letter-spacing:-.025em; line-height:1.15; margin-bottom:14px;}
.case h4{margin:26px 0 10px; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sub-2);}
.case p{color:var(--sub); font-size:.97rem;}
.case .meta{display:flex; flex-direction:column; gap:16px; padding-left:24px; border-left:1px solid rgba(255,255,255,.1);}
@media (max-width:900px){ .case .meta{padding-left:0; border-left:0; padding-top:20px; border-top:1px solid rgba(255,255,255,.1);} }
.case .meta div{display:flex; flex-direction:column; gap:3px;}
.case .meta b{font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sub-2);}
.case .meta span{font-size:.92rem; color:var(--ink);}
.status{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; color:var(--purple);}
.status::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--purple); box-shadow:0 0 12px var(--purple);}
.status.live{color:var(--good);} .status.live::before{background:var(--good); box-shadow:0 0 12px var(--good);}

/* terreno ganado: hecho / en curso / próximo */
.tg{display:flex; flex-direction:column; gap:10px; margin-top:4px;}
.tg li{display:flex; gap:12px; font-size:.92rem; color:var(--feat);}
.tg li::before{content:''; flex:none; width:16px; height:16px; margin-top:.2em; border-radius:50%; border:1.5px solid var(--sub-2);}
.tg li.done::before{border-color:var(--good); background:radial-gradient(circle, var(--good) 0 3.5px, transparent 4px);}
.tg li.now::before{border-color:var(--purple); background:radial-gradient(circle, var(--purple) 0 3.5px, transparent 4px); box-shadow:0 0 10px rgba(var(--c-purple),.6);}
.tg li.next{color:var(--sub);}
.tg-legend{display:flex; flex-wrap:wrap; gap:18px; margin-top:14px; font-size:.74rem; color:var(--sub-2);}
.tg-legend span{display:inline-flex; align-items:center; gap:6px;}
.tg-legend i{width:8px; height:8px; border-radius:50%; display:inline-block;}

/* lista de aprendizajes / datos */
.ticks{display:flex; flex-direction:column; gap:10px;}
.ticks li{display:flex; gap:10px; font-size:.93rem; color:var(--feat);}
.ticks li::before{content:''; flex:none; width:6px; height:6px; margin-top:.6em; border-radius:50%; background:var(--cyan);}

.soon-box{border-style:dashed; text-align:left;}
.soon-box p{font-size:.9rem;}
/* tarjetas de industria con el mismo lenguaje que .bx */
.ind-card{background:rgba(15,15,28,.78); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:28px 26px;}
.ind-card .h3{font-weight:800; letter-spacing:-.02em;}
/* los marcadores de "terreno ganado" no heredan el punto de las listas dentro de .bx */
.bx .tg li::before{width:16px; height:16px; margin-top:.2em; background:transparent;}
.bx .tg li.done::before{background:radial-gradient(circle, var(--good) 0 3.5px, transparent 4px);}
.bx .tg li.now::before{background:radial-gradient(circle, var(--purple) 0 3.5px, transparent 4px);}
.bx .tg, .case .ticks{border-top:0; padding-top:0; margin-top:4px;}

/* =========================================================
   v3.3 — bibliotecas de Recursos (prompts y herramientas):
   filtros en píldoras con contador, buscador y tarjetas.
   ========================================================= */
.lib-bar{display:flex; flex-direction:column; gap:16px; margin-top:8px;}
.filters{display:flex; flex-wrap:wrap; gap:8px;}
.fpill{font:inherit; font-size:.8rem; padding:8px 14px; border-radius:999px; cursor:pointer; color:var(--feat);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); transition:background .2s ease, border-color .2s ease;}
.fpill:hover{border-color:rgba(var(--c-purple),.6);}
.fpill[aria-pressed="true"]{background:var(--ink); color:#0b0b14; border-color:var(--ink);}
.fpill .c{opacity:.6; margin-left:4px;}
.search{display:flex; align-items:center; gap:10px; max-width:420px; padding:11px 14px; border-radius:10px;
  background:rgba(15,15,28,.8); border:1px solid rgba(255,255,255,.14);}
.search svg{width:16px; height:16px; flex:none; fill:none; stroke:var(--sub-2); stroke-width:1.8; stroke-linecap:round;}
.search input{flex:1; min-width:0; border:0; outline:none; background:none; color:var(--ink); font:inherit; font-size:.9rem;}
.search input::placeholder{color:var(--sub-2);}
.lib-count{font-size:.8rem; color:var(--sub-2);}
.lib-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:28px;}
.lib-grid.three{grid-template-columns:repeat(3,1fr);}
@media (max-width:1000px){ .lib-grid.three{grid-template-columns:repeat(2,1fr);} }
@media (max-width:760px){ .lib-grid, .lib-grid.three{grid-template-columns:1fr;} }
.card-p{display:flex; flex-direction:column; gap:12px;}
.card-p[hidden]{display:none;}
.card-p .top{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.card-p .area{font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan);}
.card-p h3{margin-bottom:0;}
.card-p pre{margin:0; padding:16px; border-radius:10px; background:rgba(3,3,8,.75); border:1px solid rgba(255,255,255,.1);
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace; font-size:.8rem; line-height:1.6; color:#d6d3e6; white-space:pre-wrap; word-break:break-word;}
.copy{font:inherit; font-size:.76rem; font-weight:600; padding:7px 12px; border-radius:8px; cursor:pointer; color:var(--ink);
  background:rgba(var(--c-purple),.2); border:1px solid rgba(var(--c-purple),.45); white-space:nowrap; transition:background .2s ease;}
.copy:hover{background:rgba(var(--c-purple),.35);}
.copy.ok{background:rgba(74,222,128,.18); border-color:rgba(74,222,128,.5);}
.tool-head{display:flex; align-items:center; gap:14px;}
.tool-av{flex:none; width:42px; height:42px; border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:1.05rem;
  color:var(--ink); background:linear-gradient(135deg, rgba(var(--c-purple),.35), rgba(var(--c-cyan),.2)); border:1px solid rgba(255,255,255,.14);}
.tool-head h3{font-size:1.12rem;}
.card-p .use{font-size:.86rem; color:var(--feat); padding-left:10px; border-left:2px solid rgba(var(--c-cyan),.55);}
.card-p .use b{display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sub-2); font-weight:600; margin-bottom:2px;}
.card-p .ext{margin-top:auto; font-size:.82rem; color:var(--purple); display:inline-flex; gap:6px; align-items:center;}
.card-p .ext:hover{color:var(--ink);}
.notice{margin-top:22px; padding:14px 18px; border-radius:10px; font-size:.86rem; color:var(--feat);
  background:rgba(251,191,36,.07); border:1px solid rgba(251,191,36,.3);}
.notice b{color:var(--warn);}
.empty{display:none; margin-top:24px; color:var(--sub);}

/* =========================================================
   Fondo "Universo": capas fijas detrás de todo el sitio (markup en cada página, animación en universe.js).
   Prefijo snu- para no chocar con clases existentes (.starfield, .bgfx, etc.).
   ========================================================= */
html{background:#07080e;}
body{background:transparent !important;}
.snu{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
.snu *{pointer-events:none;}

/* profundidad: nebulosa, estrellas en tres planos y arco de luz, desplazados con el scroll */
.snu-cosmos{--travel:0; position:absolute; inset:-12vh -5vw; overflow:hidden; contain:strict;
  background:radial-gradient(ellipse at 50% -10%, #171427 0%, #090a12 48%, #07080e 78%);}
.snu-cosmos::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 0 66%, rgba(7,8,14,.34));}
.snu-layer{position:absolute; inset:-18%; will-change:transform;}
.snu-far{opacity:.27;
  background-image:radial-gradient(circle,#fff 0 1px,transparent 1.2px),radial-gradient(circle,#c6b7ff 0 .7px,transparent 1px);
  background-position:17px 29px,73px 91px; background-size:137px 137px,193px 193px;
  transform:translate3d(0,calc(var(--travel)*-.045px),0);}
.snu-mid{opacity:.2;
  background-image:radial-gradient(circle,#fff 0 .9px,transparent 1.4px),radial-gradient(circle,#a88cff 0 1px,transparent 1.6px),radial-gradient(circle,#9fbaff 0 .65px,transparent 1px);
  background-position:37px 71px,101px 43px,19px 123px; background-size:211px 211px,293px 293px,167px 167px;
  transform:translate3d(0,calc(var(--travel)*-.095px),0);}
.snu-near{opacity:.22;
  background-image:radial-gradient(circle,#e8e3ff 0 1.15px,transparent 1.8px),radial-gradient(circle,#e8bdf2 0 .85px,transparent 1.4px);
  background-position:91px 15px,12px 77px; background-size:347px 347px,431px 431px;
  transform:translate3d(0,calc(var(--travel)*-.16px),0);}
.snu-nebula{inset:-25%; opacity:.62; filter:blur(12px);
  background:radial-gradient(ellipse at 19% 30%,rgba(121,74,188,.105),transparent 25%),
             radial-gradient(ellipse at 80% 61%,rgba(74,85,180,.09),transparent 25%),
             radial-gradient(ellipse at 48% 88%,rgba(161,71,137,.07),transparent 22%);
  transform:translate3d(calc(var(--travel)*.018px),calc(var(--travel)*-.055px),0) scale(1.04);}
.snu-arc{inset:auto -20vw 11%; height:42vh; border-radius:50%; border-top:1px solid rgba(176,151,255,.09);
  box-shadow:0 -28px 95px rgba(107,78,174,.035);
  transform:translate3d(0,calc(var(--travel)*-.09px),0) rotate(-5deg); opacity:calc(.3 + var(--travel)*.0002);}

/* canvas de estrellas animadas + luces violetas y azules (transparente: deja ver la profundidad) */
.snu-canvas{position:absolute; inset:0; width:100%; height:100%;
  background:radial-gradient(ellipse at 50% -12%,rgba(80,58,126,.22),transparent 48%),
             radial-gradient(ellipse at 82% 72%,rgba(53,64,141,.12),transparent 34%),
             radial-gradient(ellipse at 11% 57%,rgba(122,48,106,.075),transparent 29%);}

/* supernova: núcleo, halo, rayos y anillos; se mueve apenas con el cursor */
.snu-nova{--px:0; --py:0; position:absolute; left:86%; top:50%; width:min(30vw,440px); aspect-ratio:1;
  transform:translate(-50%,-50%); translate:calc(var(--px)*-14px) calc(var(--py)*-10px);
  mix-blend-mode:screen; filter:saturate(.9); animation:snu-float 14s ease-in-out infinite alternate;}
.snu-haze,.snu-ring,.snu-rays,.snu-core{position:absolute; inset:0; border-radius:50%;}
.snu-haze{background:radial-gradient(circle,rgba(255,255,255,.16) 0 1%,rgba(207,185,255,.13) 3%,rgba(139,102,232,.075) 15%,rgba(88,105,215,.038) 34%,transparent 68%);
  filter:blur(8px); animation:snu-breathe 6s ease-in-out infinite;}
.snu-ring{inset:22%; border:1px solid rgba(205,188,255,.13); box-shadow:0 0 28px rgba(170,126,255,.08),inset 0 0 25px rgba(152,127,255,.05);
  animation:snu-ring 9s ease-out infinite;}
.snu-ring.two{inset:30%; animation-delay:-4.5s;}
.snu-rays{inset:12%; filter:blur(1px); animation:snu-turn 38s linear infinite;
  background:conic-gradient(from 18deg,transparent 0 8%,rgba(218,201,255,.09) 8.4%,transparent 9%,transparent 24%,rgba(149,174,255,.06) 24.4%,transparent 25%,transparent 49%,rgba(235,216,255,.07) 49.35%,transparent 50%,transparent 73%,rgba(164,137,255,.08) 73.35%,transparent 74%);}
.snu-core{inset:46.5%; background:#fff; animation:snu-core 4.8s ease-in-out infinite;
  box-shadow:0 0 6px 2px #fff,0 0 14px 5px rgba(232,215,255,.92),0 0 32px 13px rgba(171,132,255,.55),0 0 82px 30px rgba(100,91,217,.2);}
.snu-core::after{content:""; position:absolute; left:50%; top:50%; width:760%; height:1px; transform:translate(-50%,-50%) rotate(-13deg);
  background:linear-gradient(90deg,transparent,rgba(193,178,255,.05),rgba(255,255,255,.38),rgba(193,178,255,.05),transparent); filter:blur(.4px);}
@keyframes snu-float{to{transform:translate(-51.5%,-48.5%) scale(1.025);}}
@keyframes snu-breathe{50%{opacity:.68; transform:scale(1.055);}}
@keyframes snu-ring{0%{transform:scale(.54); opacity:0;} 22%{opacity:.55;} 100%{transform:scale(1.7); opacity:0;}}
@keyframes snu-turn{to{transform:rotate(360deg);}}
@keyframes snu-core{50%{transform:scale(.82); opacity:.86;}}

/* adaptación móvil */
@media (max-width:900px){ .snu-near{display:none;} .snu-nebula{filter:blur(18px); opacity:.48;} }
@media (max-width:700px){
  .snu-cosmos{inset:-7vh -10vw;} .snu-arc{display:none;}
  .snu-nova{left:84%; top:13%; width:min(56vw,300px); opacity:.8;}
}

/* movimiento reducido: todo quieto */
@media (prefers-reduced-motion:reduce){
  .snu-layer{transform:none !important; will-change:auto;}
  .snu-nova,.snu-nova *{animation:none !important;}
  .snu-nova{translate:none;}
}

/* diagnóstico guiado v4: veredicto "sí, no o todavía no", listas y enlaces del mapa preliminar */
.ag-report .verdict{display:flex; flex-direction:column; gap:4px; margin:4px 0 12px; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.14);}
.ag-report .verdict b{font-size:.92rem; font-weight:800;}
.ag-report .verdict span{font-size:.8rem; color:#c9c5da;}
.ag-report .v-yes{background:rgba(74,222,128,.10); border-color:rgba(74,222,128,.4);} .ag-report .v-yes b{color:var(--good);}
.ag-report .v-mid{background:rgba(155,123,250,.12); border-color:rgba(155,123,250,.45);} .ag-report .v-mid b{color:var(--purple);}
.ag-report .v-no{background:rgba(251,191,36,.08); border-color:rgba(251,191,36,.4);} .ag-report .v-no b{color:var(--warn);}
.ag-report ul{margin:4px 0 10px; display:flex; flex-direction:column; gap:5px;}
.ag-report li{display:flex; gap:8px; font-size:.8rem; color:#c9c5da;}
.ag-report li::before{content:''; flex:none; width:5px; height:5px; margin-top:.55em; border-radius:50%; background:var(--cyan);}
.ag-link{font-size:.8rem; color:var(--purple); text-decoration:underline;}
.ag-link:hover{color:var(--ink);}
.ag-side .ag-steps{gap:13px;}

/* diagnóstico guiado como desplegable */
.hero3 .diag-toggle{margin-top:30px; font:inherit; font-size:1rem; font-weight:600; color:var(--ink); border:0;}
.hero3 .diag-toggle .dt-chev{width:14px; height:9px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease;}
.hero3 .diag-toggle[aria-expanded="true"] .dt-chev{transform:rotate(180deg);}
.hero3 .agent[hidden]{display:none;}
.hero3 .agent{scroll-margin-top:96px;}
.hero3 .agent.is-open{animation:diag-open .45s cubic-bezier(.2,.8,.2,1);}
@keyframes diag-open{from{opacity:0; transform:translateY(-10px);}}
.ag-close{margin-left:12px; font:inherit; font-size:.72rem; font-weight:600; color:var(--sub); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:5px 11px; cursor:pointer;}
.ag-close:hover{color:var(--ink); border-color:rgba(var(--c-purple),.6);}
@media (prefers-reduced-motion:reduce){ .hero3 .agent.is-open{animation:none;} }

/* fondo v4.1: el esfumado de color (resplandor, nebulosa y luces) queda en el primer scroll;
   después el fondo es pleno y parejo. Las estrellas y la supernova no cambian.
   --glow lo actualiza universe.js según el scroll (1 arriba, 0 al terminar el hero). */
.snu{--glow:1;}
.snu .snu-cosmos{background:#07080e;}
.snu .snu-cosmos::before{content:""; position:absolute; inset:0; opacity:var(--glow);
  background:radial-gradient(ellipse at 50% -10%, #171427 0%, #090a12 48%, #07080e 78%);}
.snu .snu-nebula{opacity:calc(.62 * var(--glow));}
.snu .snu-canvas{background:none;}
.snu .snu-glow{position:absolute; inset:0; opacity:var(--glow);
  background:radial-gradient(ellipse at 50% -12%,rgba(80,58,126,.22),transparent 48%),
             radial-gradient(ellipse at 82% 72%,rgba(53,64,141,.12),transparent 34%),
             radial-gradient(ellipse at 11% 57%,rgba(122,48,106,.075),transparent 29%);}
.band{background:transparent; border-block:0;}
@media (max-width:900px){ .snu .snu-nebula{opacity:calc(.48 * var(--glow));} }

/* Widget de WhatsApp flotante (todas las páginas). Imagen: assets/whatsapp-widget.webp (192 px) con respaldo .png (128 px). */
.wa-fab{position:fixed; right:22px; bottom:22px; z-index:60; width:64px; height:64px; display:block;
  border-radius:50%; animation:wa-float 3.2s ease-in-out infinite; -webkit-tap-highlight-color:transparent;}
.wa-fab picture{display:block; width:100%; height:100%;}
.wa-fab img{position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45)); transition:transform .25s ease;}
.wa-fab::before,.wa-fab::after{content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(155,123,250,.6); animation:wa-ring 2.6s ease-out infinite; pointer-events:none;}
.wa-fab::after{animation-delay:1.3s;}
.wa-fab:hover img,.wa-fab:focus-visible img{transform:scale(1.08) rotate(-4deg);}
.wa-fab:focus-visible{outline:2px solid var(--purple); outline-offset:4px;}
.wa-fab .wa-tip{position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px);
  white-space:nowrap; padding:8px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--ink); font-size:.82rem; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;}
.wa-fab:hover .wa-tip,.wa-fab:focus-visible .wa-tip{opacity:1; transform:translateY(-50%) translateX(0);}
@keyframes wa-float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
@keyframes wa-ring{0%{transform:scale(1); opacity:.9} 100%{transform:scale(1.7); opacity:0}}
@media (max-width:640px){ .wa-fab{width:56px; height:56px; right:16px; bottom:16px;} .wa-fab .wa-tip{display:none;} }
@media (prefers-reduced-motion:reduce){ .wa-fab,.wa-fab::before,.wa-fab::after{animation:none;} .wa-fab::before,.wa-fab::after{display:none;} }

/* Aviso de cookies (assets/consent.js) — abajo a la izquierda, sin tapar el botón de WhatsApp */
.ck-banner{position:fixed; left:20px; bottom:20px; z-index:60; max-width:420px;
  background:rgba(15,15,28,.94); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; box-shadow:0 18px 50px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
.ck-banner[hidden]{display:none;}
.ck-banner p{margin:0; font-size:.86rem; line-height:1.55; color:var(--sub);}
.ck-banner a{color:var(--ink);}
.ck-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:14px;}
footer.site-foot .legal a{color:inherit;}
footer.site-foot .legal a:hover{color:var(--ink);}
@media (max-width:640px){
  .ck-banner{left:12px; right:12px; bottom:12px; max-width:none;}
  body:has(.ck-banner:not([hidden])) .wa-fab{display:none;} /* en celular el aviso ocupa el ancho: el botón vuelve al elegir */
}

/* ---------- Artículos de Insights (insights/*.html) ---------- */
.art-head{position:relative; isolation:isolate; overflow:hidden; padding:156px 20px 56px;}
.art-head .wrap-art{text-align:left;}
.wrap-art{max-width:760px; margin:0 auto; padding:0 24px;}
.art-head h1{font-size:clamp(2.2rem,5.2vw,3.9rem); line-height:1.04; font-weight:800; letter-spacing:-.035em; margin:22px 0 22px; text-wrap:balance;}
.art-head h1 .dim{color:#8e8eaa;}
.art-head .lede{color:#aaacbe; font-size:1.12rem; line-height:1.7; max-width:66ch;}
.art-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:26px; font-size:.82rem; color:var(--sub-2);}
.art-meta span+span::before{content:'·'; margin-right:18px; color:var(--border);}
.crumbs{font-size:.78rem; color:var(--sub-2); margin-bottom:18px;}
.crumbs a{color:var(--sub);} .crumbs a:hover{color:var(--ink);}
.tldr{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--purple); border-radius:12px; padding:24px 26px; margin-top:8px;}
.tldr .tag{display:block; margin-bottom:10px; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan);}
.tldr ul{margin:0; padding-left:18px;}
.tldr li{color:var(--ink); line-height:1.6; margin-top:6px; font-size:.98rem;}
.prose{padding-bottom:24px;}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.7rem); line-height:1.2; font-weight:800; letter-spacing:-.02em; margin:56px 0 0;}
.prose h3{font-size:1.1rem; line-height:1.3; margin:32px 0 0;}
.prose p, .prose li{color:var(--sub); line-height:1.75; font-size:1.02rem;}
.prose p{margin:16px 0 0;}
.prose ul, .prose ol{margin:14px 0 0; padding-left:22px;}
.prose li{margin-top:8px;}
.prose li::marker{color:var(--purple);}
.prose b, .prose strong{color:var(--ink); font-weight:600;}
.prose a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--purple); text-underline-offset:3px;}
.prose a:hover{color:var(--purple);}
.prose blockquote{margin:28px 0 0; padding:4px 0 4px 20px; border-left:2px solid var(--cyan); color:var(--ink); font-size:1.12rem; line-height:1.6;}
.prose .table-scroll{overflow-x:auto; margin-top:22px;}
.prose table{width:100%; border-collapse:collapse; font-size:.92rem;}
.prose th, .prose td{text-align:left; vertical-align:top; padding:12px 14px; border-bottom:1px solid var(--border); color:var(--sub); line-height:1.55;}
.prose th{color:var(--ink); font-weight:600; background:var(--surface);}
.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:24px;}
.related a{display:block; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; transition:border-color .2s;}
.related a:hover{border-color:var(--purple);}
.related .k{display:block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin-bottom:8px;}
.related b{display:block; color:var(--ink); font-weight:600; line-height:1.35;}
a.post{display:block; transition:border-color .2s;}
a.post:hover{border-color:var(--purple);}
a.post .more{margin-top:18px;}
@media (max-width:640px){ .art-head{padding-top:128px;} .tldr{padding:20px;} .art-meta{gap:4px 16px;} .art-meta span+span::before{display:none;} }