/* @fuentes-locales:inicio — autoalojadas (RGPD: sin peticiones a Google) */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/outfit-400.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/outfit-500.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/outfit-600.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/outfit-800.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/outfit-700.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/spline-sans-mono-400.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/spline-sans-mono-500.woff2') format('woff2')}
/* @fuentes-locales:fin */

/* FalsaAlarma — Web_nueva, v9 consolidada.
   Sistema: Outfit + paleta MoRA. Cuatro radios, una transicion, ritmo de
   bandas alternas. El color decorativo se raciona; el color con significado
   (datos, sentimiento, espectro por entidad) manda. */

:root{
  --fondo:#FFFFFF;
  --papel:#F8F8FC;
  --papel-2:#F3F0FA;
  --tinta:#1A1A2E;
  --tinta-2:#3A3A4A;
  --sutil:#6B7280;
  --tenue:#9AA0AF;
  --linea:#E6E4F0;
  --linea-suave:#EFEDF7;
  --acento:#6B4ED8;
  --acento-tinta:#FFFFFF;
  --acento-suave:#F0EDFA;
  --navy:#402D9B;
  --grad:linear-gradient(90deg,#402D9B,#6B4ED8,#F966BE,#E8547A,#60A8E9);

  --neg:#D94A78;   --neg-bg:#FCEAF1;
  --pos:#2380BF;   --pos-bg:#E7F2FB;
  --neutro:#6B7280;--neutro-bg:#EEEFEA;

  --r-s:10px; --r-m:14px; --r-l:18px; --r-pill:999px;
  --tr:.22s cubic-bezier(.16,1,.3,1);
  --sombra:0 1px 2px rgba(26,26,46,.04), 0 6px 24px -8px rgba(26,26,46,.08);
  --sombra-alta:0 2px 4px rgba(26,26,46,.05), 0 14px 40px -12px rgba(26,26,46,.14);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:#131322; --papel:#1B1B2E; --papel-2:#232338;
    --tinta:#ECECF4; --tinta-2:#C6C6D6; --sutil:#9698AC; --tenue:#6E7086;
    --linea:#31314A; --linea-suave:#282840;
    --acento:#9B87F0; --acento-tinta:#161628; --acento-suave:#2B2650;
    --navy:#8B72E8;
    --grad:linear-gradient(90deg,#5E45C9,#8B72E8,#F966BE,#E8547A,#60A8E9);
    --neg:#F58BB8; --neg-bg:#3C2233;
    --pos:#7CC1F0; --pos-bg:#1B2B3C;
    --neutro:#9698AC; --neutro-bg:#232338;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 6px 24px -8px rgba(0,0,0,.4);
    --sombra-alta:0 2px 4px rgba(0,0,0,.35), 0 14px 40px -12px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fondo:#131322; --papel:#1B1B2E; --papel-2:#232338;
  --tinta:#ECECF4; --tinta-2:#C6C6D6; --sutil:#9698AC; --tenue:#6E7086;
  --linea:#31314A; --linea-suave:#282840;
  --acento:#9B87F0; --acento-tinta:#161628; --acento-suave:#2B2650;
  --navy:#8B72E8;
  --grad:linear-gradient(90deg,#5E45C9,#8B72E8,#F966BE,#E8547A,#60A8E9);
  --neg:#F58BB8; --neg-bg:#3C2233;
  --pos:#7CC1F0; --pos-bg:#1B2B3C;
  --neutro:#9698AC; --neutro-bg:#232338;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 6px 24px -8px rgba(0,0,0,.4);
  --sombra-alta:0 2px 4px rgba(0,0,0,.35), 0 14px 40px -12px rgba(0,0,0,.55);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:"Outfit",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%}
::selection{background:var(--acento);color:#fff}
a{color:var(--acento); text-decoration:none; transition:color var(--tr)}
a:hover{text-decoration:underline; text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:3px}

.contenedor{max-width:1080px;margin:0 auto;padding:0 28px}

/* ---------- cabecera ---------- */
.cabecera{display:flex;justify-content:space-between;align-items:center;padding:26px 0}
.marca{display:flex;align-items:center}
.marca img{height:52px;width:auto;display:block}
@media(max-width:640px){.marca img{height:40px}}
.marca:hover{text-decoration:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .marca img{filter:invert(1)}
}
:root[data-theme="dark"] .marca img{filter:invert(1)}
.nav{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:500;letter-spacing:.01em}
.nav a{color:var(--tinta-2)}
.nav a:hover{color:var(--tinta);text-decoration:none}
.idioma{font-family:"Spline Sans Mono",monospace;font-size:12px;color:var(--sutil)}
.idioma b{color:var(--tinta)}
@media(max-width:820px){.nav{gap:18px;font-size:13px}}

/* ---------- botones: disciplina ---------- */
.acciones{display:flex;gap:14px;flex-wrap:wrap}
.boton{
  display:inline-block;padding:13px 28px;border-radius:var(--r-s);
  font-weight:600;font-size:15px;letter-spacing:.01em;
  background:var(--tinta);color:var(--fondo);border:1px solid transparent;
  transition:background var(--tr), color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.boton:hover{text-decoration:none;background:var(--acento);color:var(--acento-tinta);
  transform:translateY(-1px);box-shadow:var(--sombra)}
.boton.secundario{background:transparent;color:var(--tinta);border-color:var(--linea)}
.boton.secundario:hover{border-color:var(--tinta);background:transparent;color:var(--tinta);box-shadow:none}

/* ---------- hero: profundidad, no carnaval ---------- */
.herox{position:relative;background:#12122A;overflow:hidden;color:#fff}
.herox-velo{position:absolute;inset:0;background:
  radial-gradient(1000px 560px at 88% -12%, rgba(249,102,190,.30), transparent 62%),
  radial-gradient(820px 560px at -12% 112%, rgba(96,168,233,.26), transparent 62%),
  radial-gradient(700px 480px at 45% 118%, rgba(107,78,216,.22), transparent 65%),
  linear-gradient(150deg, rgba(64,45,155,.42) 0%, rgba(18,18,42,0) 55%)}
.herox::before{content:"";position:absolute;top:-22%;right:-8%;width:560px;height:560px;
  background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 70%);border-radius:50%}
.herox::after{content:"";position:absolute;bottom:-18%;left:-6%;width:460px;height:460px;
  background:radial-gradient(circle,rgba(232,84,122,.10) 0%,transparent 70%);border-radius:50%}
@media (prefers-reduced-motion:no-preference){
  .herox::before{animation:flotar 18s ease-in-out infinite alternate}
  .herox::after{animation:flotar 22s ease-in-out infinite alternate-reverse}
}
@keyframes flotar{from{transform:translate(0,0)}to{transform:translate(-26px,20px)}}
.herox-lienzo{position:relative;z-index:3;padding-bottom:72px}
.herox .cabecera{padding:26px 0 44px}
.herox .marca img{filter:brightness(0) invert(1)}
.herox .nav a{color:rgba(255,255,255,.78)}
.herox .nav a:hover{color:#fff}
.herox .idioma{color:rgba(255,255,255,.55)}
.herox .idioma b{color:#fff}
.herox-content{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center;padding-top:18px}
@media(max-width:920px){.herox-content{grid-template-columns:1fr;gap:44px}}
.herox-badge{display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill);padding:7px 16px;font-size:11.5px;font-weight:600;
  color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:.1em;
  backdrop-filter:blur(10px);margin-bottom:28px}
.herox h1{font-weight:800;font-size:clamp(2.5rem,5.6vw,4rem);line-height:1.06;
  letter-spacing:-.025em;color:#fff;margin:0 0 22px;max-width:16ch;text-wrap:balance}
.herox .sub{color:rgba(255,255,255,.84);font-size:1.13rem;line-height:1.65;
  max-width:54ch;margin:0 0 32px}
.herox .sub strong{color:#fff;font-weight:600}
.herox .boton{background:#fff;color:#12122A}
.herox .boton:hover{background:var(--acento);color:#fff}
.herox .boton.secundario{background:rgba(255,255,255,.08);color:#fff;
  border-color:rgba(255,255,255,.22);backdrop-filter:blur(10px)}
.herox .boton.secundario:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);color:#fff}
.herox-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:36px}
@media(max-width:640px){.herox-stats{grid-template-columns:1fr 1fr}}
.hstat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:15px 10px;text-align:center;backdrop-filter:blur(10px)}
.hstat .dato{color:#fff;font-family:"Spline Sans Mono",monospace;
  font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.3vw,1.75rem)}
.hstat .dato-etq{color:rgba(255,255,255,.62);font-size:11.5px;margin-top:4px;letter-spacing:.02em}

/* la ficha de cristal */
.ficha-vidrio{background:rgba(255,255,255,.07);backdrop-filter:blur(26px);
  -webkit-backdrop-filter:blur(26px);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-l);padding:28px 30px;
  box-shadow:0 28px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.09)}
.ficha-vidrio .ficha-entidad{color:#fff;font-size:1.35rem}
.ficha-vidrio .ficha-fuente{color:rgba(255,255,255,.66)}
.ficha-vidrio .med-ico{opacity:.95}
.ficha-vidrio .vivo{color:#7EE0C2}
.ficha-vidrio .vivo::before{background:#7EE0C2}
.ficha-vidrio .ficha-papel{color:#fff}
.ficha-vidrio .gran-dato{font-size:2.9rem;font-weight:800;line-height:1;margin:16px 0 3px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.66) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ficha-vidrio .gran-etq{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(255,255,255,.62);margin-bottom:18px}
.ficha-vidrio .chip{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.88)}
.ficha-vidrio .chip.principal{border-color:#F9A3D7;color:#F9A3D7}
.ficha-vidrio .chip.negativo{border-color:#F58BB8;color:#F58BB8}
.ficha-vidrio .ficha-datos{border-top-color:rgba(255,255,255,.14)}
.ficha-vidrio .ficha-datos dt{color:rgba(255,255,255,.58)}
.ficha-vidrio .ficha-datos dd{color:#fff}

/* cinta de medios, con fundido en los bordes */
.cinta{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.1);
  overflow:hidden;padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cinta-pista{display:flex;white-space:nowrap;width:max-content;animation:desfile 60s linear infinite}
@media (prefers-reduced-motion:reduce){.cinta-pista{animation:none}}
.cinta-pista span{font-family:"Spline Sans Mono",monospace;font-size:12px;
  letter-spacing:.08em;color:rgba(255,255,255,.5);text-transform:uppercase;padding-right:8px}
@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- la banda del 90 ---------- */
.banda-90{text-align:center;padding:96px 24px 90px;border-bottom:1px solid var(--linea-suave);
  background:radial-gradient(640px 300px at 50% 0%, var(--acento-suave), transparent 70%)}
.banda-90 .cifra{font-weight:800;font-size:clamp(6.5rem,18vw,12.5rem);line-height:1;
  letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;display:inline-block;
  padding:.03em .1em;margin:-.03em 0;font-variant-numeric:tabular-nums}
.banda-90 .unidad{font-weight:700;font-size:clamp(1.2rem,2.6vw,1.8rem);
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);display:block;margin:52px 0 28px}
.banda-90 .declaracion{font-size:clamp(1.15rem,2.4vw,1.45rem);line-height:1.5;
  color:var(--tinta);max-width:46ch;margin:0 auto 14px;font-weight:500;text-wrap:balance}
.banda-90 .declaracion strong{font-weight:700}
.banda-90 .matiz{font-size:13.5px;color:var(--sutil);margin:0}

/* ---------- secciones y ritmo de bandas ---------- */
main{display:block}
section{padding:88px 0}
.ojal{font-family:"Spline Sans Mono",monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acento);margin:0 0 18px}
h2{font-weight:700;font-size:clamp(1.9rem,3.5vw,2.5rem);
  letter-spacing:-.015em;line-height:1.12;margin:0 0 24px;
  max-width:26ch;text-wrap:balance;padding-bottom:16px;position:relative}
h2::after{content:"";position:absolute;bottom:0;left:0;width:64px;height:4px;
  background:var(--grad);border-radius:2px}
.contacto h2::after{left:50%;transform:translateX(-50%)}
.prosa{color:var(--tinta-2);max-width:62ch;font-size:1.05rem}
.prosa p{margin:0 0 1em}
.prosa strong{color:var(--tinta);font-weight:600}

/* bandas alternas a sangre completa */
#metricas,#faq{background:var(--papel);box-shadow:0 0 0 100vmax var(--papel);clip-path:inset(0 -100vmax)}

/* las tres razones */
.razones{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
@media(max-width:820px){.razones{grid-template-columns:1fr}}
.razon{border-top:3px solid;padding-top:20px}
.razon:nth-child(1){border-color:#F966BE}
.razon:nth-child(2){border-color:#60A8E9}
.razon:nth-child(3){border-color:#6B4ED8}
.razon-n{font-weight:700;font-size:1.12rem;margin-bottom:9px;letter-spacing:-.008em}
.razon p{font-size:15.5px;color:var(--tinta-2);margin:0;line-height:1.62}

/* clipping */
.clipping{background:var(--papel-2);border-radius:var(--r-m);padding:28px 32px;margin-top:40px}
.clipping h3{font-weight:700;font-size:1.12rem;margin:0 0 10px;
  padding-left:14px;border-left:4px solid #F966BE}
.clipping p{margin:0;color:var(--tinta-2);font-size:15.5px;max-width:76ch;line-height:1.62}

/* linea de tiempo */
.linea-tiempo{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;position:relative}
.linea-tiempo::before{content:"";position:absolute;top:9px;left:4%;right:4%;height:3px;
  background:var(--grad);border-radius:2px;opacity:.9}
@media(max-width:820px){
  .linea-tiempo{grid-template-columns:1fr;gap:36px}
  .linea-tiempo::before{left:9px;right:auto;top:8px;bottom:8px;width:3px;height:auto}
  .hito{padding-left:36px}
}
.hito{position:relative}
.hito-punto{width:20px;height:20px;border-radius:50%;border:3.5px solid var(--fondo);
  position:relative;z-index:1;margin-bottom:16px;box-shadow:0 0 0 3px rgba(107,78,216,.16)}
@media(max-width:820px){.hito-punto{position:absolute;left:-36px;top:0;margin:0}}
.hito-punto.p1{background:#402D9B}
.hito-punto.p2{background:#F966BE}
.hito-punto.p3{background:#60A8E9}
@media (prefers-reduced-motion:no-preference){
  .hito-punto.p2{animation:latido 2.4s ease-in-out infinite}
}
@keyframes latido{0%,100%{box-shadow:0 0 0 3px rgba(249,102,190,.22)}50%{box-shadow:0 0 0 10px rgba(249,102,190,.06)}}
.hito-tiempo{font-family:"Spline Sans Mono",monospace;font-size:1.5rem;font-weight:500;
  color:var(--acento);margin-bottom:7px;font-variant-numeric:tabular-nums}
.hito h3{font-weight:700;font-size:1.18rem;margin:0 0 9px}
.hito p{font-size:15px;color:var(--tinta-2);margin:0;line-height:1.62}

/* ---------- metricas ---------- */
.metricas{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
@media(max-width:720px){.metricas{grid-template-columns:1fr}}
.metrica{background:var(--fondo);border:1px solid var(--linea);border-radius:var(--r-m);
  padding:30px 32px;position:relative;overflow:hidden;box-shadow:var(--sombra);
  transition:transform var(--tr), box-shadow var(--tr)}
.metrica::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--grad);opacity:0;transition:opacity var(--tr)}
.metrica:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta)}
.metrica:hover::before{opacity:1}
.metrica h3{font-weight:700;font-size:1.28rem;letter-spacing:-.01em;margin:0 0 10px}
.metrica p{font-size:15.5px;color:var(--tinta-2);margin:0 0 20px;line-height:1.62}
.metrica .icono{width:46px;height:46px;padding:12px;border-radius:12px;color:#fff;
  box-sizing:border-box;margin-bottom:16px;display:block}
.metrica:nth-child(1) .icono{background:linear-gradient(135deg,#F966BE,#5E45C9)}
.metrica:nth-child(2) .icono{background:linear-gradient(135deg,#5E8FD8,#402D9B)}
.metrica:nth-child(3) .icono{background:linear-gradient(135deg,#E8547A,#F966BE)}
.metrica:nth-child(4) .icono{background:linear-gradient(135deg,#5E45C9,#60A8E9)}
.formula{font-family:"Spline Sans Mono",monospace;font-size:12.5px;color:var(--sutil);
  border-top:1px solid var(--linea-suave);padding-top:13px;letter-spacing:.01em}
.icono{width:26px;height:26px;color:var(--acento);display:block}

/* ---------- ficha de mencion ---------- */
.ficha{background:var(--fondo);border:1px solid var(--linea);border-radius:var(--r-m);
  overflow:hidden;box-shadow:var(--sombra);
  transition:transform var(--tr), box-shadow var(--tr)}
.ficha:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.ficha-cuerpo{padding:22px 24px}
.ficha-cabecera{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ficha-entidad{font-weight:700;font-size:1.26rem;letter-spacing:-.012em;color:var(--tinta);
  display:inline-flex;align-items:center;gap:9px;line-height:1.2}
.punto-entidad{width:11px;height:11px;border-radius:50%;flex:none;background:var(--acento)}
.ficha-fuente{font-size:13px;color:var(--sutil);margin:4px 0 13px;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.med-ico{width:16px;height:16px;border-radius:4px;flex:none}
.vivo{display:inline-flex;align-items:center;gap:6px;color:var(--pos);
  font-family:"Spline Sans Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap}
.vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pos)}
@media (prefers-reduced-motion:no-preference){.vivo::before{animation:latido-vivo 2s ease-in-out infinite}}
@keyframes latido-vivo{0%,100%{opacity:1}50%{opacity:.45}}
.ficha-papel{font-size:15.5px;line-height:1.55;margin:0 0 15px;color:var(--tinta);max-width:60ch}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:15px}
.chip{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 11px;border-radius:var(--r-pill);background:transparent;
  color:var(--sutil);border:1px solid var(--linea)}
.chip.principal{color:var(--acento);border-color:var(--acento)}
.chip.negativo{color:var(--neg);border-color:var(--neg)}
.chip.positivo{color:var(--pos);border-color:var(--pos)}
.ficha-datos{display:grid;grid-template-columns:auto 1fr;gap:5px 18px;
  font-size:13.5px;border-top:1px solid var(--linea-suave);padding-top:13px;margin:0}
.ficha-datos dt{color:var(--sutil);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding-top:2px}
.ficha-datos dd{margin:0;font-variant-numeric:tabular-nums}
.ficha-enlace{display:block;padding:13px 24px;border-top:1px solid var(--linea-suave);
  font-size:13.5px;font-weight:600;transition:background var(--tr)}
.ficha-enlace:hover{background:var(--papel);text-decoration:none}
.alerta-demo{max-width:560px;margin:48px auto 0}

/* ---------- faq ---------- */
.faqs{margin-top:40px;border-top:1px solid var(--linea)}
.faqs details{border-bottom:1px solid var(--linea)}
.faqs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:18px;padding:22px 4px;font-weight:600;font-size:1.05rem;
  transition:color var(--tr)}
.faqs summary:hover{color:var(--acento)}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";font-weight:400;font-size:1.5rem;color:var(--acento);
  line-height:1;transition:transform var(--tr);flex:none}
.faqs details[open] summary::after{transform:rotate(45deg)}
.faqs details p{margin:0;padding:0 4px 24px;color:var(--tinta-2);font-size:15.5px;
  max-width:74ch;line-height:1.62}

/* ---------- contacto ---------- */
.contacto{background:linear-gradient(135deg,#402D9B 0%,#6B4ED8 45%,#E8547A 100%);
  color:#fff;border-radius:var(--r-l);padding:60px 48px;margin:16px 0 0;
  text-align:center;position:relative;overflow:hidden}
.contacto::before{content:"";position:absolute;top:-90px;right:-90px;width:360px;height:360px;
  background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);border-radius:50%}
.contacto>*{position:relative;z-index:1}
.contacto h2{max-width:none;color:#fff}
.contacto p{color:rgba(255,255,255,.85);max-width:48ch;margin:0 auto 32px}
.contacto .boton{background:#fff;color:#1A1A2E}
.contacto .boton:hover{background:rgba(255,255,255,.92);color:#402D9B;transform:translateY(-1px)}

/* ---------- pie ---------- */
.pie-pagina{border-top:1px solid var(--linea);margin-top:88px;padding:32px 0 48px;
  font-size:13px;color:var(--sutil);display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap}

/* ---------- demo ---------- */
.portada-demo{position:relative;background:#12122A;overflow:hidden;color:#fff;margin-bottom:8px}
.portada-demo .velo{position:absolute;inset:0;background:
  radial-gradient(900px 480px at 85% -10%, rgba(249,102,190,.28), transparent 62%),
  radial-gradient(700px 480px at -10% 115%, rgba(96,168,233,.24), transparent 62%),
  linear-gradient(150deg, rgba(64,45,155,.42) 0%, rgba(18,18,42,0) 55%)}
.portada-demo .contenedor{position:relative;z-index:2}
.portada-demo .cabecera{padding:26px 0 36px}
.portada-demo .marca img{filter:brightness(0) invert(1)}
.portada-demo .nav a{color:rgba(255,255,255,.78)}
.portada-demo .nav a:hover{color:#fff}
.portada-demo .idioma{color:rgba(255,255,255,.55)}
.portada-demo .idioma b{color:#fff}
.portada-demo h1{font-weight:800;font-size:clamp(2.1rem,4.6vw,3.2rem);
  letter-spacing:-.022em;line-height:1.06;margin:0 0 16px;color:#fff}
.portada-demo .demo-nota{color:rgba(255,255,255,.82);padding-bottom:48px}
.portada-demo .ojal{color:#F9A3D7}
.demo-cabeza h1{font-weight:800;font-size:clamp(2.1rem,4.6vw,3rem);
  letter-spacing:-.02em;line-height:1.07;margin:0 0 14px}
.demo-nota{font-size:14.5px;color:var(--sutil);max-width:66ch;line-height:1.6}
.selector{display:flex;gap:8px;margin:28px 0 6px;flex-wrap:wrap}
.selector button{font:inherit;font-size:13.5px;font-weight:600;padding:8px 18px;
  border-radius:var(--r-pill);border:1px solid var(--linea);background:transparent;
  color:var(--tinta-2);cursor:pointer;transition:all var(--tr)}
.selector button:hover{border-color:var(--acento);color:var(--acento)}
.selector button[aria-pressed="true"]{background:var(--tinta);color:var(--fondo);border-color:var(--tinta)}
.estado{font-size:13px;color:var(--sutil);margin-top:16px;
  font-family:"Spline Sans Mono",monospace;letter-spacing:.02em}
.estado.muestra{color:var(--acento)}
.muro{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
@media(max-width:860px){.muro{grid-template-columns:1fr}}
.panel{background:var(--fondo);border:1px solid var(--linea);border-radius:var(--r-m);
  box-shadow:var(--sombra);padding:28px 30px;margin-top:26px}
.panel h3{font-weight:700;font-size:1.26rem;letter-spacing:-.008em;margin:0 0 5px;
  padding-left:14px;border-left:4px solid #F966BE}
.panel .pie{font-size:13.5px;color:var(--sutil);margin:0 0 22px;line-height:1.55}
.barras{display:grid;gap:13px;margin:0}
.barra{display:grid;grid-template-columns:150px 1fr 88px;gap:14px;align-items:center}
@media(max-width:640px){.barra{grid-template-columns:104px 1fr 72px}}
.barra .nombre{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra .pista{height:10px;background:var(--papel-2);border-radius:var(--r-pill);overflow:hidden}
.barra .relleno{height:100%;background:var(--acento);border-radius:var(--r-pill);
  min-width:2px;transition:width .7s cubic-bezier(.16,1,.3,1)}
.barra .relleno.neg{background:var(--neg)}
.barra .relleno.pos{background:var(--pos)}
.barra .relleno[data-c]{background:var(--c)}
.barra .valor{font-family:"Spline Sans Mono",monospace;font-size:13px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.tabla-envoltura{overflow-x:auto}
table.sobria{width:100%;border-collapse:collapse;font-size:14px}
table.sobria th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sutil);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--linea)}
table.sobria td{padding:11px 12px;border-bottom:1px solid var(--linea-suave);font-variant-numeric:tabular-nums}
table.sobria tbody tr{transition:background var(--tr)}
table.sobria tbody tr:hover{background:var(--papel)}
table.sobria tr:last-child td{border-bottom:0}
.num{font-family:"Spline Sans Mono",monospace;text-align:right}
td.pos{color:var(--pos)} td.neg{color:var(--neg)}

/* ---------- aparicion al hacer scroll ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .rev{opacity:0;transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .js .rev.vis{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}


/* ---------- v10: sistema de iconos completo ---------- */
.icono-s{width:21px;height:21px;flex:none}
.icono-xs{width:13px;height:13px;flex:none;vertical-align:-2px}
.icono-h{width:19px;height:19px}
.razon-n{display:flex;align-items:center;gap:9px}
.razon:nth-child(1) .icono-s{color:#F966BE}
.razon:nth-child(2) .icono-s{color:#60A8E9}
.razon:nth-child(3) .icono-s{color:#6B4ED8}
.hito-punto{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;color:#fff}
.linea-tiempo::before{top:17px}
@media(max-width:820px){
  .hito{padding-left:52px}
  .hito-punto{position:absolute;left:-52px;top:0;margin:0}
  .linea-tiempo::before{left:16px;top:10px;bottom:10px}
}
.panel h3{display:flex;align-items:center;gap:10px}
.panel h3 .icono-s{color:var(--acento)}
.herox-badge .icono-xs{width:14px;height:14px}
.ficha-datos dt{display:flex;align-items:center;gap:6px}
.ficha-datos dt .icono-xs{color:var(--tenue)}
.ficha-vidrio .ficha-datos dt .icono-xs{color:rgba(255,255,255,.5)}


/* ---------- cabecera fija: aparece al dejar atras el hero ---------- */
.cabecera-fija{position:fixed;top:0;left:0;right:0;z-index:60;will-change:transform;
  background:color-mix(in srgb, var(--fondo) 86%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
  transform:translateY(-100%);transition:transform var(--tr)}
.cabecera-fija.visible{transform:translateY(0)}
.cabecera-fija .contenedor{display:flex;justify-content:space-between;
  align-items:center;padding-top:12px;padding-bottom:12px}
.cabecera-fija .marca img{height:34px}
@media (prefers-reduced-motion:reduce){.cabecera-fija{transition:none}}


/* ---------- carrusel de alertas reales (seccion velocidad) ---------- */
.carrusel{position:relative}
.carrusel .ficha{transition:opacity .45s ease, transform var(--tr), box-shadow var(--tr)}
.carrusel.cambiando .ficha{opacity:0}
.carrusel-puntos{display:flex;justify-content:center;gap:8px;margin-top:18px}
.carrusel-puntos button{width:8px;height:8px;border-radius:50%;border:0;padding:0;
  background:var(--linea);cursor:pointer;transition:background var(--tr), transform var(--tr)}
.carrusel-puntos button[aria-current="true"]{background:var(--acento);transform:scale(1.25)}
.carrusel-puntos button:hover{background:var(--acento)}


/* ---------- v11: coreografia de movimiento ----------
   Toda la capa vive bajo prefers-reduced-motion:no-preference y (para los
   estados iniciales ocultos) bajo .js: sin JavaScript o con movimiento
   reducido, la pagina se ve completa y quieta. */

.boton{position:relative;overflow:hidden}
.boton::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none}
.contacto{background-size:170% 170%}
.cinta:hover .cinta-pista{animation-play-state:paused}
.metrica .icono{transition:transform var(--tr)}
.herox-velo{will-change:transform}

@media (prefers-reduced-motion:no-preference){

  @keyframes ent-sube{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes ent-ficha{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes vaiven{from{transform:translateY(0)}to{transform:translateY(-9px)}}
  @keyframes brillo{from{background-position:0% 50%}to{background-position:100% 50%}}
  @keyframes deriva{from{background-position:0% 0%}to{background-position:100% 100%}}

  /* entrada orquestada del hero (solo al cargar) */
  .js .herox-badge{animation:ent-sube .7s cubic-bezier(.16,1,.3,1) .05s backwards}
  .js .herox h1{animation:ent-sube .85s cubic-bezier(.16,1,.3,1) .16s backwards}
  .js .herox .sub{animation:ent-sube .85s cubic-bezier(.16,1,.3,1) .3s backwards}
  .js .herox .acciones{animation:ent-sube .85s cubic-bezier(.16,1,.3,1) .44s backwards}
  .js .hstat{animation:ent-sube .7s cubic-bezier(.16,1,.3,1) backwards}
  .js .hstat:nth-child(1){animation-delay:.56s}
  .js .hstat:nth-child(2){animation-delay:.64s}
  .js .hstat:nth-child(3){animation-delay:.72s}
  .js .hstat:nth-child(4){animation-delay:.8s}
  .js .herox .ficha-vidrio{animation:ent-ficha .9s cubic-bezier(.16,1,.3,1) .38s backwards,
    vaiven 6.5s ease-in-out 2.4s infinite alternate}
  .js .cinta{animation:ent-sube 1s ease .85s backwards}
  .herox-badge .icono-xs{animation:latido-vivo 2.6s ease-in-out infinite}
  .herox-velo{transition:transform .5s ease-out}

  /* entrada del hero de la demo */
  .js .portada-demo h1{animation:ent-sube .8s cubic-bezier(.16,1,.3,1) .1s backwards}
  .js .portada-demo .ojal{animation:ent-sube .7s cubic-bezier(.16,1,.3,1) .02s backwards}
  .js .portada-demo .demo-nota{animation:ent-sube .8s cubic-bezier(.16,1,.3,1) .26s backwards}

  /* aparicion escalonada: los hijos de .escalona entran de uno en uno */
  .js .escalona>*{opacity:0;transform:translateY(28px);
    transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
  .js .rev.vis .escalona>*{opacity:1;transform:none}
  .js .rev.vis .escalona>*:nth-child(1){transition-delay:.12s}
  .js .rev.vis .escalona>*:nth-child(2){transition-delay:.24s}
  .js .rev.vis .escalona>*:nth-child(3){transition-delay:.36s}
  .js .rev.vis .escalona>*:nth-child(4){transition-delay:.48s}
  .js .rev.vis .escalona>*:nth-child(5){transition-delay:.6s}
  .js .rev.vis .escalona>*:nth-child(6){transition-delay:.72s}

  /* el ojal se desliza y el subrayado del titulo se dibuja */
  .js .rev .ojal{opacity:0;transform:translateX(-16px);
    transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
  .js .rev.vis .ojal{opacity:1;transform:none}
  .js .rev h2::after{width:0;transition:width .9s cubic-bezier(.16,1,.3,1) .35s}
  .js .rev.vis h2::after{width:64px}

  /* la linea de tiempo se dibuja de izquierda a derecha */
  .js .rev .linea-tiempo::before{transform:scaleX(0);transform-origin:0 50%;
    transition:transform 1.1s cubic-bezier(.16,1,.3,1) .3s}
  .js .rev.vis .linea-tiempo::before{transform:scaleX(1)}
  @media(max-width:820px){
    .js .rev .linea-tiempo::before{transform:scaleY(0);transform-origin:50% 0}
    .js .rev.vis .linea-tiempo::before{transform:scaleY(1)}
  }

  /* la banda del 90: el numero entra con zoom y el degradado respira */
  .banda-90 .cifra{background-size:200% 100%;animation:brillo 8s ease-in-out infinite alternate}
  .js .banda-90 .cifra{opacity:0;transform:scale(.72);
    transition:opacity .75s cubic-bezier(.16,1,.3,1) .05s,transform .75s cubic-bezier(.16,1,.3,1) .05s}
  .js .banda-90.vis .cifra{opacity:1;transform:scale(1)}
  .js .banda-90 .unidad,.js .banda-90 .declaracion,.js .banda-90 .matiz{opacity:0;
    transform:translateY(18px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
  .js .banda-90.vis .unidad{opacity:1;transform:none;transition-delay:.3s}
  .js .banda-90.vis .declaracion{opacity:1;transform:none;transition-delay:.45s}
  .js .banda-90.vis .matiz{opacity:1;transform:none;transition-delay:.6s}

  /* contacto: el degradado deriva despacio y el bloque entra con un punto de zoom */
  .contacto{animation:deriva 16s ease-in-out infinite alternate}
  .js .contacto.rev{transform:translateY(26px) scale(.965)}
  .js .contacto.rev.vis{transform:none}

  /* micro-interacciones */
  .boton::before{transition:left .6s ease,opacity .6s ease}
  .boton:hover::before{left:125%;opacity:1}
  .metrica:hover .icono{transform:scale(1.1) rotate(-4deg)}
  .faqs details[open] p{animation:ent-sube .45s cubic-bezier(.16,1,.3,1)}

  /* fichas del muro de la demo: entran en cascada al pintarse */
  .muro .ficha{animation:ent-sube .6s cubic-bezier(.16,1,.3,1) backwards}
  .muro .ficha:nth-child(1){animation-delay:.05s}
  .muro .ficha:nth-child(2){animation-delay:.12s}
  .muro .ficha:nth-child(3){animation-delay:.19s}
  .muro .ficha:nth-child(4){animation-delay:.26s}
  .muro .ficha:nth-child(5){animation-delay:.33s}
  .muro .ficha:nth-child(6){animation-delay:.4s}
  .muro .ficha:nth-child(7){animation-delay:.47s}
  .muro .ficha:nth-child(8){animation-delay:.54s}
}


/* ---------- v12: atmosfera y espectaculo ---------- */

/* barra de progreso de lectura */
.progreso-lectura{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;will-change:transform;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* lienzos del hero */
.constelacion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.foco{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px at var(--mx,72%) var(--my,28%),rgba(155,135,240,.16),transparent 65%)}

/* grano de textura sobre el hero (mata el degradado plano) */
.herox::before{z-index:2}
.herox-velo::after{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.herox-velo{position:absolute}

/* titular palabra a palabra */
.pal{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.pal-i{display:inline-block}
.palabra-clave{background:linear-gradient(90deg,#F9A3D7,#C4B2FF,#7CC1F0,#F9A3D7);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

/* numeros de seccion en filigrana */
section[data-num]{position:relative;z-index:0}
section[data-num]::before{content:attr(data-num);position:absolute;top:24px;right:-10px;
  font-weight:800;font-size:clamp(6rem,13vw,10.5rem);line-height:1;z-index:-1;
  pointer-events:none;user-select:none;color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--acento) 20%, transparent)}
@supports not (-webkit-text-stroke:1px red){
  section[data-num]::before{color:color-mix(in srgb, var(--acento) 7%, transparent)}
}
@media(max-width:820px){section[data-num]::before{font-size:5.5rem;top:12px;right:0}}

/* ficha de cristal: borde luminoso que gira, y fundido al rotar de alerta */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.ficha-vidrio{position:relative;transition:opacity .38s ease}
.ficha-vidrio.cambiando{opacity:.1}
@media(min-width:920px){.js .herox .ficha-vidrio{min-height:396px}}
.ficha-vidrio::before{content:"";position:absolute;inset:-1px;border-radius:inherit;
  padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0turn,transparent .62turn,
    rgba(249,102,190,.9) .78turn,rgba(124,193,240,.8) .88turn,transparent 1turn);
  -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}


/* linea de tiempo ligada al scroll: hitos que despiertan */
.hito-punto{transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s ease,box-shadow .4s ease}
.hito-tiempo{transition:color .4s ease,opacity .4s ease}
.js .hito .hito-punto{transform:scale(.72);opacity:.45}
.js .hito .hito-tiempo{opacity:.4}
.js .hito.activo .hito-punto{transform:scale(1);opacity:1}
.js .hito.activo .hito-tiempo{opacity:1}

@media (prefers-reduced-motion:no-preference){
  @keyframes sube-pal{from{transform:translateY(112%)}to{transform:none}}
  @keyframes anillo{0%{transform:scale(.55);opacity:.5}100%{transform:scale(1.6);opacity:0}}
  @keyframes girar-borde{to{--ang:360deg}}

  .js .herox h1 .pal-i{animation:sube-pal .75s cubic-bezier(.16,1,.3,1) backwards}
  .js .herox h1{animation:none}
  .palabra-clave{animation:brillo 7s linear infinite}
  .ficha-vidrio::before{animation:girar-borde 7s linear infinite}

  /* la traza de la linea de tiempo la conduce el scroll */
  .js .rev .linea-tiempo::before,.js .rev.vis .linea-tiempo::before{
    transform:scaleX(var(--traza,0));transition:transform .25s linear}
  @media(max-width:820px){
    .js .rev .linea-tiempo::before,.js .rev.vis .linea-tiempo::before{
      transform:scaleY(var(--traza,0))}
  }
}
@media (prefers-reduced-motion:reduce){
  .js .hito .hito-punto,.js .hito .hito-tiempo{transform:none;opacity:1}
  .progreso-lectura{display:none}
}

/* ---------- v13: pulido fino ---------- */
/* los anclajes no se esconden bajo la cabecera fija */
main [id],section[id]{scroll-margin-top:76px}
/* el selector de idioma tambien en la cabecera fija */
.cabecera-fija .idioma{margin-left:6px}

/* ---------- v14c: la escena del caso Santander (30 s de ciclo) ----------
   La palabra "Santander" dispara tres coincidencias en la portada. El Racing
   y la ciudad se descartan con su cruz; la mencion de Banco Santander se
   verifica, se etiqueta y es la unica que llega al movil. Sin animacion
   (reduced motion) se muestra el desenlace completo. */
.escena{background:#12122A;border-radius:var(--r-l);margin:44px 0 52px;overflow:hidden;
  position:relative;box-shadow:var(--sombra-alta)}
.escena::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(500px 260px at 18% 20%, rgba(249,102,190,.14), transparent 65%),
  radial-gradient(460px 260px at 85% 75%, rgba(96,168,233,.12), transparent 65%)}
.escena svg{display:block;width:100%;height:auto}
.esc-cabecera{font:700 19px 'Outfit',sans-serif;letter-spacing:.26em;fill:rgba(255,255,255,.6)}
.esc-titular{font:500 11.5px 'Outfit',sans-serif;fill:rgba(255,255,255,.66)}
.esc-palabra{font-weight:700;fill:#F9A3D7}
.esc-txt-paq{font:600 12px 'Outfit',sans-serif;letter-spacing:.04em;fill:rgba(255,255,255,.85)}
.esc-txt-chip{font:600 12px 'Outfit',sans-serif;letter-spacing:.05em}
.esc-txt-noti{font:700 10.5px 'Outfit',sans-serif;fill:rgba(255,255,255,.85)}
.esc-etq{font:500 12.5px 'Spline Sans Mono',monospace;letter-spacing:.08em;fill:rgba(255,255,255,.4)}
.esc-caso{font:700 18px 'Outfit',sans-serif;letter-spacing:.04em;fill:rgba(255,255,255,.92)}
.esc-sinalerta{font:500 12px 'Spline Sans Mono',monospace;letter-spacing:.1em;fill:rgba(255,255,255,.45)}

/* estado base (sin animacion): el desenlace, con las dos descartadas marcadas */
.esc-laser,.esc-paq,.esc-pulso,.esc-caso1,.esc-veto,.esc-sinalerta{opacity:0}
.esc-marco1,.esc-marco2{opacity:.35}
.esc-marco3{opacity:0}

@media (prefers-reduced-motion:no-preference){
  @keyframes esc-barrido{
    0%{transform:translateY(0);opacity:0}
    1%{opacity:1}
    7%{transform:translateY(330px);opacity:1}
    8%,100%{transform:translateY(330px);opacity:0}
  }
  /* coincidencias: se encienden al paso del laser, y las malas quedan apagadas */
  @keyframes esc-m1{0%,4.2%{opacity:0}5.2%,15%{opacity:1}19%,91%{opacity:.35}96%,100%{opacity:0}}
  @keyframes esc-m2{0%,5.3%{opacity:0}6.3%,28.5%{opacity:1}32%,91%{opacity:.35}96%,100%{opacity:0}}
  @keyframes esc-m3a{0%,6.4%{opacity:0}7.4%,46%{opacity:1}49%,100%{opacity:0}}
  @keyframes esc-m3b{0%,47%{opacity:0}49.5%,93%{opacity:1}98%,100%{opacity:0}}
  @keyframes esc-cruzA{0%,16%{opacity:0}18%,91%{opacity:1}96%,100%{opacity:0}}
  @keyframes esc-cruzB{0%,30%{opacity:0}32%,91%{opacity:1}96%,100%{opacity:0}}
  @keyframes esc-tick{0%,48.5%{opacity:0}51%,93%{opacity:1}98%,100%{opacity:0}}
  /* los tres viajes de la palabra */
  @keyframes esc-v1{
    0%,8.5%{transform:translate(190px,219px);opacity:0}
    10%{opacity:1}
    15%{transform:translate(500px,220px);opacity:1}
    16%,100%{transform:translate(500px,220px);opacity:0}
  }
  @keyframes esc-v2{
    0%,22%{transform:translate(190px,273px);opacity:0}
    23.5%{opacity:1}
    28.5%{transform:translate(500px,220px);opacity:1}
    29.5%,100%{transform:translate(500px,220px);opacity:0}
  }
  @keyframes esc-v3{
    0%,41%{transform:translate(190px,327px);opacity:0}
    42.5%{opacity:1}
    47.5%{transform:translate(500px,220px);opacity:1}
    48.5%,100%{transform:translate(500px,220px);opacity:0}
  }
  /* veredictos */
  @keyframes esc-veto1{
    0%,15.5%{opacity:0;transform:scale(.6)}
    18%{opacity:1;transform:scale(1.08)}
    19.5%,24%{opacity:1;transform:scale(1)}
    27%,100%{opacity:0;transform:scale(.6)}
  }
  @keyframes esc-veto2{
    0%,29%{opacity:0;transform:scale(.6)}
    31.5%{opacity:1;transform:scale(1.08)}
    33%,38%{opacity:1;transform:scale(1)}
    41%,100%{opacity:0;transform:scale(.6)}
  }
  @keyframes esc-pop-check{
    0%,48%{opacity:0;transform:scale(.6)}
    50.5%{opacity:1;transform:scale(1.08)}
    52%,93%{opacity:1;transform:scale(1)}
    98%,100%{opacity:0;transform:scale(.6)}
  }
  @keyframes esc-pop-1{
    0%,54%{opacity:0;transform:scale(.6)}
    56.5%{opacity:1;transform:scale(1.08)}
    58%,93%{opacity:1;transform:scale(1)}
    98%,100%{opacity:0;transform:scale(.6)}
  }
  @keyframes esc-pop-2{
    0%,58%{opacity:0;transform:scale(.6)}
    60.5%{opacity:1;transform:scale(1.08)}
    62%,93%{opacity:1;transform:scale(1)}
    98%,100%{opacity:0;transform:scale(.6)}
  }
  @keyframes esc-pop-3{
    0%,62%{opacity:0;transform:scale(.6)}
    64.5%{opacity:1;transform:scale(1.08)}
    66%,93%{opacity:1;transform:scale(1)}
    98%,100%{opacity:0;transform:scale(.6)}
  }
  @keyframes esc-viaje2{
    0%,68%{transform:translate(575px,220px);opacity:0}
    69%{opacity:1}
    73.5%{transform:translate(850px,150px);opacity:1}
    74.5%,100%{transform:translate(850px,150px);opacity:0}
  }
  @keyframes esc-noti-cae{
    0%,73.5%{opacity:0;transform:translateY(-26px)}
    77%,95%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(-26px)}
  }
  @keyframes esc-vibra{
    0%,76%,83%,100%{transform:rotate(0)}
    77%,79%,81%{transform:rotate(1.1deg)}
    78%,80%,82%{transform:rotate(-1.1deg)}
  }
  @keyframes esc-onda{
    0%,74.5%{transform:scale(.4);opacity:0}
    78%{opacity:.8}
    90%,100%{transform:scale(1.7);opacity:0}
  }
  @keyframes esc-sinAlertaLuz{0%,17%{opacity:0}20%,40%{opacity:.9}45%,100%{opacity:0}}
  @keyframes esc-casoUno{0%,1%{opacity:0}4%,40%{opacity:1}44%,100%{opacity:0}}
  @keyframes esc-casoDos{0%,44%{opacity:0}48%,96%{opacity:1}100%{opacity:0}}
  @keyframes esc-nucleo-late{
    0%,14%{transform:scale(1)}
    16%{transform:scale(1.16)}
    18%,27.5%{transform:scale(1)}
    29.5%{transform:scale(1.16)}
    31.5%,46.5%{transform:scale(1)}
    48.5%{transform:scale(1.16)}
    50.5%,100%{transform:scale(1)}
  }
  @keyframes esc-gira{to{transform:rotate(360deg)}}
  @keyframes esc-luz-1{0%,1%{fill:rgba(255,255,255,.35)}3%,8%{fill:#fff}13%,100%{fill:rgba(255,255,255,.35)}}
  @keyframes esc-luz-2{0%,10%{fill:rgba(255,255,255,.35)}14%,64%{fill:#fff}70%,100%{fill:rgba(255,255,255,.35)}}
  @keyframes esc-luz-3{0%,72%{fill:rgba(255,255,255,.35)}76%,92%{fill:#fff}97%,100%{fill:rgba(255,255,255,.35)}}

  .esc-laser{animation:esc-barrido 30s linear infinite}
  .esc-marco1{animation:esc-m1 30s linear infinite;opacity:0}
  .esc-marco2{animation:esc-m2 30s linear infinite;opacity:0}
  .esc-marco3{animation:esc-m3a 30s linear infinite}
  .esc-marcoB3{animation:esc-m3b 30s linear infinite;opacity:0}
  .esc-cruz1{animation:esc-cruzA 30s linear infinite;opacity:0}
  .esc-cruz2{animation:esc-cruzB 30s linear infinite;opacity:0}
  .esc-tick3{animation:esc-tick 30s linear infinite;opacity:0}
  .esc-paq1{animation:esc-v1 30s cubic-bezier(.4,0,.4,1) infinite}
  .esc-paq2{animation:esc-v2 30s cubic-bezier(.4,0,.4,1) infinite}
  .esc-paq3{animation:esc-v3 30s cubic-bezier(.4,0,.4,1) infinite}
  .esc-veto1{animation:esc-veto1 30s ease infinite;transform-origin:500px 127px}
  .esc-veto2{animation:esc-veto2 30s ease infinite;transform-origin:500px 127px}
  .esc-check{animation:esc-pop-check 30s ease infinite;transform-origin:500px 127px}
  .esc-chip1{animation:esc-pop-1 30s ease infinite;transform-origin:416px 299px}
  .esc-chip2{animation:esc-pop-2 30s ease infinite;transform-origin:545px 321px}
  .esc-chip3{animation:esc-pop-3 30s ease infinite;transform-origin:672px 281px}
  .esc-pulso{animation:esc-viaje2 30s cubic-bezier(.4,0,.4,1) infinite}
  .esc-noti{animation:esc-noti-cae 30s cubic-bezier(.16,1,.3,1) infinite}
  .esc-movil{animation:esc-vibra 30s linear infinite;transform-origin:850px 220px}
  .esc-onda1{animation:esc-onda 30s ease-out infinite}
  .esc-onda2{animation:esc-onda 30s ease-out infinite;animation-delay:.6s}
  .esc-sinalerta{animation:esc-sinAlertaLuz 30s linear infinite}
  .esc-caso1{animation:esc-casoUno 30s linear infinite}
  .esc-caso2{animation:esc-casoDos 30s linear infinite;opacity:0}
  .esc-corazon{animation:esc-nucleo-late 30s ease infinite;transform-origin:500px 220px}
  .esc-orbita{animation:esc-gira 9s linear infinite;transform-origin:500px 220px}
  .esc-etq1{animation:esc-luz-1 30s ease infinite}
  .esc-etq2{animation:esc-luz-2 30s ease infinite}
  .esc-etq3{animation:esc-luz-3 30s ease infinite}
}
@media (prefers-reduced-motion:reduce){
  .esc-marcoB3,.esc-tick3,.esc-cruz,.esc-check,.esc-chip,.esc-noti,.esc-caso2{opacity:1}
}


/* ---------- v15: la escena viral (26 s) ----------
   Una noticia nace en una portada (con el aviso de FalsaAlarma en ~90 s),
   salta a una red social, se viraliza y acaba en decenas de portadas. */
.escena-viral{margin:44px 0 8px}
.vl-diario-nombre{font:700 13px 'Outfit',sans-serif;letter-spacing:.22em;fill:rgba(255,255,255,.55)}
.vl-contador{font:600 14px 'Spline Sans Mono',monospace;fill:#F9A3D7;letter-spacing:.04em}
.vl-moraleja{font:600 16.5px 'Outfit',sans-serif;letter-spacing:.03em;fill:#7EE0C2}
.vl-nombre{font:700 9.5px 'Outfit',sans-serif;fill:rgba(255,255,255,.75)}
.vl-usuario{font:500 8.5px 'Outfit',sans-serif;fill:rgba(255,255,255,.4)}
.vl-nombre-g{font:700 13px 'Outfit',sans-serif;fill:rgba(255,255,255,.85)}
.vl-usuario-g{font:500 11px 'Outfit',sans-serif;fill:rgba(255,255,255,.42)}
.vl-post-texto{font:500 12px 'Outfit',sans-serif;fill:rgba(255,255,255,.75)}
.vl-enlace-titulo{font:600 10.5px 'Outfit',sans-serif;fill:#F9A3D7}
.vl-enlace-fuente{font:500 9.5px 'Outfit',sans-serif;fill:rgba(255,255,255,.4)}
.vl-cabecera-mini{font:700 9px 'Outfit',sans-serif;letter-spacing:.14em;fill:rgba(255,255,255,.6)}

/* estado base (sin animacion): el cuadro final completo */
.vl-t1,.vl-t2,.vl-t3,.vl-c1,.vl-c2{opacity:0}

@media (prefers-reduced-motion:no-preference){
  @keyframes vl-tit{0%,1%{opacity:0}3%,94%{opacity:1}99%,100%{opacity:0}}
  @keyframes vl-aviso{0%,6%{opacity:0;transform:scale(.7)}9%{opacity:1;transform:scale(1.05)}11%,94%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(.7)}}
  @keyframes vl-l1{0%,11%{opacity:0}14%,90%{opacity:1}96%,100%{opacity:0}}
  @keyframes vl-post{0%,12%{opacity:0;transform:translateY(20px)}17%,93%{opacity:1;transform:translateY(0)}99%,100%{opacity:0;transform:translateY(20px)}}
  @keyframes vl-c1{0%,19%{opacity:0}22%,28%{opacity:1}31%,100%{opacity:0}}
  @keyframes vl-c2{0%,30%{opacity:0}33%,39%{opacity:1}42%,100%{opacity:0}}
  @keyframes vl-c3{0%,41%{opacity:0}44%,92%{opacity:1}98%,100%{opacity:0}}
  @keyframes vl-red{0%,25%{opacity:0}31%,91%{opacity:1}97%,100%{opacity:0}}
  @keyframes vl-l2{0%,46%{opacity:0}49%,91%{opacity:1}97%,100%{opacity:0}}
  @keyframes vl-tit1luz{0%,1%{opacity:0}2.5%{opacity:1}100%{opacity:1}}
  @keyframes vl-latido{0%,100%{opacity:.5}50%{opacity:1}}

  .vl-t1{animation:vl-t1k 30s linear infinite}
  .vl-t2{animation:vl-t2k 30s linear infinite}
  .vl-t3{animation:vl-t3k 30s linear infinite}
  @keyframes vl-t1k{0%,1%{opacity:0}4%,26%{opacity:1}30%,100%{opacity:0}}
  @keyframes vl-t2k{0%,28%{opacity:0}32%,54%{opacity:1}58%,100%{opacity:0}}
  @keyframes vl-t3k{0%,56%{opacity:0}60%,95%{opacity:1}100%{opacity:0}}
  @keyframes vl-moral{0%,72%{opacity:0}77%,96%{opacity:1}100%{opacity:0}}
  @keyframes vl-titular-pulso{0%,1%{opacity:0}3%{opacity:1}5%,7%,9%{opacity:.55}6%,8%,95%{opacity:1}99%,100%{opacity:0}}

  .vl-titular{animation:vl-titular-pulso 30s linear infinite}
  .vl-aviso{animation:vl-aviso 30s ease infinite;transform-origin:160px 331px}
  .vl-linea1{animation:vl-l1 30s linear infinite;opacity:0}
  .vl-post{animation:vl-post 30s cubic-bezier(.16,1,.3,1) infinite}
  .vl-c1{animation:vl-c1 30s linear infinite}
  .vl-c2{animation:vl-c2 30s linear infinite}
  .vl-c3{animation:vl-c3 30s linear infinite;opacity:0}
  .vl-red{animation:vl-red 30s linear infinite;opacity:0}
  .vl-linea2{animation:vl-l2 30s linear infinite;opacity:0}
  .vl-moraleja{animation:vl-moral 30s ease infinite;opacity:0}
  @keyframes vl-mk1{0%,26%{opacity:0;transform:scale(.5)}29%{opacity:1;transform:scale(1.07)}31%,92%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.5)}}
  .vl-m1{animation:vl-mk1 30s ease infinite;transform-origin:center;transform-box:fill-box}
  @keyframes vl-mk2{0%,29%{opacity:0;transform:scale(.5)}32%{opacity:1;transform:scale(1.07)}34%,92%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.5)}}
  .vl-m2{animation:vl-mk2 30s ease infinite;transform-origin:center;transform-box:fill-box}
  @keyframes vl-mk3{0%,32%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1.07)}37%,92%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.5)}}
  .vl-m3{animation:vl-mk3 30s ease infinite;transform-origin:center;transform-box:fill-box}
  @keyframes vl-mk4{0%,35%{opacity:0;transform:scale(.5)}38%{opacity:1;transform:scale(1.07)}40%,92%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.5)}}
  .vl-m4{animation:vl-mk4 30s ease infinite;transform-origin:center;transform-box:fill-box}
  @keyframes vl-mk5{0%,38%{opacity:0;transform:scale(.5)}41%{opacity:1;transform:scale(1.07)}43%,92%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.5)}}
  .vl-m5{animation:vl-mk5 30s ease infinite;transform-origin:center;transform-box:fill-box}
  @keyframes vl-dk1{0%,56%{opacity:0;transform:scale(.5)}59%{opacity:1;transform:scale(1.07)}61%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(.5)}}
  .vl-d1{animation:vl-dk1 30s ease infinite;transform-origin:center;transform-box:fill-box}
  @keyframes vl-dk2{0%,59%{opacity:0;transform:scale(.5)}62%{opacity:1;transform:scale(1.07)}64%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(.5)}}
  .vl-d2{animation:vl-dk2 30s ease infinite;transform-origin:center;transform-box:fill-box}
  @keyframes vl-dk3{0%,62%{opacity:0;transform:scale(.5)}65%{opacity:1;transform:scale(1.07)}67%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(.5)}}
  .vl-d3{animation:vl-dk3 30s ease infinite;transform-origin:center;transform-box:fill-box}
  @keyframes vl-dk4{0%,65%{opacity:0;transform:scale(.5)}68%{opacity:1;transform:scale(1.07)}70%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(.5)}}
  .vl-d4{animation:vl-dk4 30s ease infinite;transform-origin:center;transform-box:fill-box}
  @keyframes vl-dk5{0%,68%{opacity:0;transform:scale(.5)}71%{opacity:1;transform:scale(1.07)}73%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(.5)}}
  .vl-d5{animation:vl-dk5 30s ease infinite;transform-origin:center;transform-box:fill-box}
  @keyframes vl-dk6{0%,71%{opacity:0;transform:scale(.5)}74%{opacity:1;transform:scale(1.07)}76%,93%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(.5)}}
  .vl-d6{animation:vl-dk6 30s ease infinite;transform-origin:center;transform-box:fill-box}
}
@media (prefers-reduced-motion:reduce){
  .vl-aviso,.vl-post,.vl-mini,.vl-diario,.vl-red,.vl-linea1,.vl-linea2,.vl-c3,.vl-moraleja{opacity:1}
}

/* el telon: todo se apaga para dejar paso a la frase final */
.vl-final{font:700 27px 'Outfit',sans-serif;letter-spacing:-.01em;fill:url(#esc-degradado);opacity:0}
@media (prefers-reduced-motion:no-preference){
  @keyframes vl-apagado{0%,83%{opacity:1}88%,100%{opacity:0}}
  .vl-todo{animation:vl-apagado 30s linear infinite}
  @keyframes vl-finalk{0%,86%{opacity:0;transform:scale(.94)}90%,97%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.97)}}
  .vl-final{animation:vl-finalk 30s ease infinite;transform-origin:500px 200px}
}

/* ---------- v16: el cronometro del 90 ---------- */
.crono{position:relative;display:inline-block;font-size:clamp(6.5rem,18vw,12.5rem);line-height:1}
.crono .cifra{font-size:1em;position:relative;z-index:1}
.crono-anillo{position:absolute;left:50%;top:50%;width:1.5em;height:1.5em;
  transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.crono-ticks line{stroke:color-mix(in srgb, var(--acento) 30%, transparent);stroke-width:1.6;stroke-linecap:round}
.anillo-fondo{stroke:color-mix(in srgb, var(--acento) 15%, transparent);stroke-width:2}
.anillo-traza{stroke:url(#anillo-grad);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:345.6;stroke-dashoffset:192.96}
.crono-orbita{opacity:0}
.js .anillo-traza{stroke-dashoffset:345.6;
  transition:stroke-dashoffset 2.2s cubic-bezier(.16,1,.3,1) .5s}
.js .banda-90.vis .anillo-traza{stroke-dashoffset:192.96}
@media (prefers-reduced-motion:no-preference){
  @keyframes girar-orbita{to{transform:rotate(360deg)}}
  .banda-90.vis .crono-orbita{opacity:1;transition:opacity .6s ease 2.4s;
    animation:girar-orbita 12s linear infinite;transform-origin:60px 60px}
}
@media (prefers-reduced-motion:reduce){
  .anillo-traza{stroke-dashoffset:192.96!important}
}

/* ---------- v16b: acabados ---------- */
/* barras de la demo: se rellenan en cascada */
.barras .barra:nth-child(1) .relleno{transition-delay:.05s}
.barras .barra:nth-child(2) .relleno{transition-delay:.11s}
.barras .barra:nth-child(3) .relleno{transition-delay:.17s}
.barras .barra:nth-child(4) .relleno{transition-delay:.23s}
.barras .barra:nth-child(5) .relleno{transition-delay:.29s}
.barras .barra:nth-child(6) .relleno{transition-delay:.35s}
.barras .barra:nth-child(7) .relleno{transition-delay:.41s}
.barras .barra:nth-child(8) .relleno{transition-delay:.47s}
.barras .barra:nth-child(9) .relleno{transition-delay:.53s}

/* pie con filete degradado */
.pie-pagina{border-top:2px solid;border-image:linear-gradient(90deg,#402D9B,#6B4ED8,#F966BE,#E8547A,#60A8E9) 1}

/* barra de scroll con la casa a cuestas */
html{scrollbar-width:thin;scrollbar-color:var(--acento) transparent}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--navy),var(--acento));
  border-radius:6px;border:3px solid var(--fondo)}

/* los tiles del hero responden */
.hstat{transition:transform var(--tr),background var(--tr),border-color var(--tr)}
.hstat:hover{transform:translateY(-3px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}

/* la inclinacion 3D no debe pelear con la transicion de hover */
.metrica.inclinada{transition:box-shadow var(--tr)}

/* el relleno de las barras es un span del constructor: necesita ser bloque */
.barra .relleno{display:block}

/* ---------- v17: la demo como panel de inteligencia de medios ---------- */

/* pestañas */
.pestanas{display:flex;gap:0;margin:26px 0 8px;border-bottom:2px solid var(--linea);position:relative}
.pestanas button{font:inherit;font-size:15.5px;font-weight:700;letter-spacing:-.005em;
  padding:12px 26px;border:0;background:transparent;color:var(--sutil);cursor:pointer;
  position:relative;transition:color var(--tr)}
.pestanas button:hover{color:var(--tinta)}
.pestanas button::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;
  height:3px;border-radius:2px;background:var(--grad);opacity:0;transform:scaleX(.4);
  transition:opacity var(--tr),transform var(--tr)}
.pestanas button[aria-selected="true"]{color:var(--tinta)}
.pestanas button[aria-selected="true"]::after{opacity:1;transform:scaleX(1)}

/* kpis del sector y de la marca */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 4px}
@media(max-width:820px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:var(--fondo);border:1px solid var(--linea);border-radius:var(--r-m);
  padding:18px 20px;box-shadow:var(--sombra);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.kpi .valor{font-family:"Spline Sans Mono",monospace;font-weight:500;font-size:1.7rem;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .etq{font-size:12px;color:var(--sutil);margin-top:4px;letter-spacing:.02em}
.kpi .delta{font-family:"Spline Sans Mono",monospace;font-size:12px;margin-left:8px}
.kpi .delta.pos{color:var(--pos)} .kpi .delta.neg{color:var(--neg)}

/* barra 100% apilada (Share of Impact) */
.apilada{display:flex;height:34px;border-radius:var(--r-pill);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--linea-suave)}
.apilada .tramo{height:100%;min-width:3px;transition:width .8s cubic-bezier(.16,1,.3,1);
  position:relative}
.apilada .tramo+.tramo{border-left:2px solid var(--fondo)}
.leyenda{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px}
.leyenda .item{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--tinta-2)}
.leyenda .item i{width:10px;height:10px;border-radius:3px;flex:none}
.leyenda .item b{font-family:"Spline Sans Mono",monospace;font-weight:500;font-variant-numeric:tabular-nums}

/* barras divergentes de tono */
.divergentes{display:grid;gap:12px;position:relative;padding:4px 0}
.divergente{display:grid;grid-template-columns:150px 1fr 64px;gap:14px;align-items:center}
@media(max-width:640px){.divergente{grid-template-columns:104px 1fr 56px}}
.divergente .nombre{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.divergente .eje{position:relative;height:14px}
.divergente .eje::before{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;
  background:var(--linea);border-radius:1px}
.divergente .mitad{position:absolute;top:2px;height:10px;border-radius:5px;
  transition:width .8s cubic-bezier(.16,1,.3,1)}
.divergente .mitad.neg{right:50%;background:linear-gradient(270deg,var(--neg-bg),var(--neg));border-radius:5px 0 0 5px}
.divergente .mitad.pos{left:50%;background:linear-gradient(90deg,var(--pos-bg),var(--pos));border-radius:0 5px 5px 0}
.divergente .valor{font-family:"Spline Sans Mono",monospace;font-size:13px;text-align:right;
  font-variant-numeric:tabular-nums}
.divergente .valor.pos{color:var(--pos)} .divergente .valor.neg{color:var(--neg)}
.promedio-marca{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--acento);opacity:.55}

/* cabecera de la marca en el deep-dive */
.marca-cabecera{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
.marca-cabecera .quien{display:flex;align-items:center;gap:12px}
.marca-cabecera .quien i{width:16px;height:16px;border-radius:50%;flex:none}
.marca-cabecera .quien b{font-size:1.6rem;font-weight:800;letter-spacing:-.015em}
.marca-cabecera dl{display:flex;flex-wrap:wrap;gap:14px 30px;margin:0}
.marca-cabecera dt{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sutil)}
.marca-cabecera dd{margin:2px 0 0;font-family:"Spline Sans Mono",monospace;font-size:1.15rem;
  font-variant-numeric:tabular-nums}
.marca-cabecera dd .delta{font-size:12px;margin-left:6px}
.marca-cabecera dd .delta.pos{color:var(--pos)} .marca-cabecera dd .delta.neg{color:var(--neg)}

/* evolutivo */
.evolutivo svg{display:block;width:100%;height:auto}
.evolutivo .eje-x{font:500 10.5px 'Spline Sans Mono',monospace;fill:var(--tenue)}
.evolutivo .barra-dia{transition:opacity var(--tr)}
.evolutivo .barra-dia:hover{opacity:.75}
.evo-leyenda{display:flex;gap:22px;margin-top:12px;font-size:12.5px;color:var(--sutil)}
.evo-leyenda .item{display:inline-flex;align-items:center;gap:7px}
.evo-leyenda .cuadrito{width:10px;height:10px;border-radius:3px}
.evo-leyenda .rayita{width:16px;height:0;border-top:2.5px solid #F966BE;border-radius:2px}

/* comparadas 100% (sentimiento marca vs sector) */
.comparada{margin:10px 0 18px}
.comparada .quien-fila{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sutil);margin-bottom:7px}
.comparada .pila{display:flex;height:26px;border-radius:var(--r-pill);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--linea-suave)}
.comparada .pila span{min-width:2px;transition:width .8s cubic-bezier(.16,1,.3,1)}
.comparada .pila .fav{background:var(--pos)}
.comparada .pila .neu{background:var(--neutro-bg)}
.comparada .pila .des{background:var(--neg)}
.mini-leyenda{display:flex;gap:18px;margin-top:10px;font-size:12.5px;color:var(--sutil)}
.mini-leyenda .item{display:inline-flex;align-items:center;gap:6px}
.mini-leyenda i{width:10px;height:10px;border-radius:3px}

/* huella comparada: pares de barras */
.dobles{display:grid;gap:14px}
.doble{display:grid;grid-template-columns:170px 1fr 118px;gap:14px;align-items:center}
@media(max-width:640px){.doble{grid-template-columns:110px 1fr 80px}}
.doble .nombre{font-size:13.5px;font-weight:600}
.doble .par{display:grid;gap:4px}
.doble .pista{height:9px;background:var(--papel-2);border-radius:var(--r-pill);overflow:hidden}
.doble .pista .relleno{display:block;height:100%;border-radius:var(--r-pill);min-width:2px;
  transition:width .8s cubic-bezier(.16,1,.3,1)}
.doble .pista .sector{background:var(--tenue);opacity:.55}
.doble .cifras{font-family:"Spline Sans Mono",monospace;font-size:12px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--tinta-2);line-height:1.5;white-space:nowrap}
.doble .cifras .vs{color:var(--tenue)}

/* listas de medios (brilla / sufre) */
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.dos-columnas{grid-template-columns:1fr}}
.dos-columnas .panel{margin-top:26px}
.medios-lista{display:grid;gap:4px}
.medio-fila{display:grid;grid-template-columns:22px 1fr auto auto;gap:11px;align-items:center;
  padding:9px 10px;border-radius:var(--r-s);transition:background var(--tr)}
.medio-fila:hover{background:var(--papel)}
.medio-fila img{width:18px;height:18px;border-radius:4px}
.medio-fila .sin-ico{width:18px;height:18px;border-radius:4px;background:var(--papel-2)}
.medio-fila .nombre{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.medio-fila .nombre small{display:block;font-weight:400;font-size:11.5px;color:var(--sutil)}
.medio-fila .menciones{font-family:"Spline Sans Mono",monospace;font-size:12px;color:var(--sutil);
  white-space:nowrap}
.medio-fila .balance{font-family:"Spline Sans Mono",monospace;font-size:12.5px;font-weight:500;
  padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap}
.medio-fila .balance.pos{color:var(--pos);background:var(--pos-bg)}
.medio-fila .balance.neg{color:var(--neg);background:var(--neg-bg)}
.medio-fila .balance.neu{color:var(--neutro);background:var(--neutro-bg)}
.selector-marcas{margin:26px 0 6px}

/* ---------- v18: la demo como consola oscura ----------
   La zona de datos vive en azul noche, continuando el hero: paneles de
   cristal, espectro de colores a pleno brillo, numeros grandes en mono.
   Look unico y deliberado: no cambia con el tema del visitante. */
.consola.oscura{background:#0E0E1E;color:#ECECF4}
.consola.oscura .estado{color:#8E90A6}
.consola.oscura .estado.muestra{color:#B4A5F5}

/* pestañas y selectores en oscuro */
.consola.oscura .pestanas{border-bottom-color:rgba(255,255,255,.1)}
.consola.oscura .pestanas button{color:#8E90A6}
.consola.oscura .pestanas button:hover,.consola.oscura .pestanas button[aria-selected="true"]{color:#fff}
.consola.oscura .selector button{border-color:rgba(255,255,255,.16);color:#C6C6D6}
.consola.oscura .selector button:hover{border-color:#9B87F0;color:#B4A5F5}
.consola.oscura .selector button[aria-pressed="true"]{background:#fff;color:#12122A;border-color:#fff}

/* paneles de cristal */
.consola.oscura .panel{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(8px)}
.consola.oscura .panel h3{color:#fff;border-left-color:#F966BE}
.consola.oscura .panel h3 .icono-s{color:#B4A5F5}
.consola.oscura .panel .pie{color:#8E90A6}

/* kpis */
.consola.oscura .kpi{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09);
  box-shadow:0 14px 40px -16px rgba(0,0,0,.5)}
.consola.oscura .kpi .valor{background:linear-gradient(100deg,#F9A3D7,#C4B2FF 55%,#7CC1F0);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-size:2rem}
.consola.oscura .kpi .etq{color:#8E90A6}

/* barras y pistas */
.consola.oscura .barra .nombre{color:#ECECF4}
.consola.oscura .barra .pista{background:rgba(255,255,255,.08)}
.consola.oscura .barra .valor{color:#C6C6D6}
.consola.oscura .apilada{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.consola.oscura .apilada .tramo+.tramo{border-left-color:#0E0E1E}
.consola.oscura .apilada{height:40px}
.consola.oscura .leyenda .item{color:#C6C6D6}

/* divergentes */
.consola.oscura .divergente .nombre{color:#ECECF4}
.consola.oscura .divergente .eje::before{background:rgba(255,255,255,.18)}
.consola.oscura .divergente .mitad.pos{background:linear-gradient(90deg,rgba(124,193,240,.25),#7CC1F0)}
.consola.oscura .divergente .mitad.neg{background:linear-gradient(270deg,rgba(245,139,184,.25),#F58BB8)}
.consola.oscura .divergente .valor.pos{color:#7CC1F0}
.consola.oscura .divergente .valor.neg{color:#F58BB8}
.consola.oscura .promedio-marca{border-left-color:#B4A5F5}

/* cabecera de marca */
.consola.oscura .marca-cabecera dt{color:#8E90A6}
.consola.oscura .marca-cabecera dd{color:#fff}
.consola.oscura .marca-cabecera .quien b{color:#fff}
.consola.oscura .kpi .delta.pos,.consola.oscura .marca-cabecera .delta.pos{color:#7CC1F0}
.consola.oscura .kpi .delta.neg,.consola.oscura .marca-cabecera .delta.neg{color:#F58BB8}

/* evolutivo */
.consola.oscura .evolutivo .eje-x{fill:#6E7086}
.consola.oscura .evo-leyenda{color:#8E90A6}

/* comparadas y dobles */
.consola.oscura .comparada .quien-fila{color:#8E90A6}
.consola.oscura .comparada .pila{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.consola.oscura .comparada .pila .fav{background:#7CC1F0}
.consola.oscura .comparada .pila .neu{background:rgba(255,255,255,.14)}
.consola.oscura .comparada .pila .des{background:#F58BB8}
.consola.oscura .mini-leyenda{color:#8E90A6}
.consola.oscura .mini-leyenda .item i.neutra{background:rgba(255,255,255,.14)}
.consola.oscura .doble .nombre{color:#ECECF4}
.consola.oscura .doble .pista{background:rgba(255,255,255,.08)}
.consola.oscura .doble .pista .sector{background:rgba(255,255,255,.35);opacity:1}
.consola.oscura .doble .cifras{color:#C6C6D6}
.consola.oscura .doble .cifras .vs{color:#6E7086}

/* tabla */
.consola.oscura table.sobria th{color:#8E90A6;border-bottom-color:rgba(255,255,255,.12)}
.consola.oscura table.sobria td{border-bottom-color:rgba(255,255,255,.07);color:#ECECF4}
.consola.oscura table.sobria tbody tr:hover{background:rgba(255,255,255,.05)}
.consola.oscura td.pos{color:#7CC1F0}.consola.oscura td.neg{color:#F58BB8}

/* listas de medios */
.consola.oscura .medio-fila:hover{background:rgba(255,255,255,.05)}
.consola.oscura .medio-fila .nombre{color:#ECECF4}
.consola.oscura .medio-fila .nombre small{color:#8E90A6}
.consola.oscura .medio-fila .menciones{color:#8E90A6}
.consola.oscura .medio-fila .sin-ico{background:rgba(255,255,255,.1)}
.consola.oscura .medio-fila .balance.pos{color:#7CC1F0;background:rgba(124,193,240,.14)}
.consola.oscura .medio-fila .balance.neg{color:#F58BB8;background:rgba(245,139,184,.16)}
.consola.oscura .medio-fila .balance.neu{color:#9698AC;background:rgba(255,255,255,.08)}

/* fichas del muro, en cristal */
.consola.oscura .ficha{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.5)}
.consola.oscura .ficha:hover{box-shadow:0 24px 60px -18px rgba(0,0,0,.65)}
.consola.oscura .ficha-entidad{color:#fff}
.consola.oscura .ficha-fuente{color:#8E90A6}
.consola.oscura .ficha-papel{color:#ECECF4}
.consola.oscura .chip{border-color:rgba(255,255,255,.25);color:#C6C6D6}
.consola.oscura .chip.principal{color:#F9A3D7;border-color:#F9A3D7}
.consola.oscura .chip.negativo{color:#F58BB8;border-color:#F58BB8}
.consola.oscura .chip.positivo{color:#7CC1F0;border-color:#7CC1F0}
.consola.oscura .ficha-datos{border-top-color:rgba(255,255,255,.1)}
.consola.oscura .ficha-datos dt{color:#8E90A6}
.consola.oscura .ficha-datos dd{color:#ECECF4}
.consola.oscura .ficha-enlace{border-top-color:rgba(255,255,255,.1);color:#B4A5F5}
.consola.oscura .ficha-enlace:hover{background:rgba(255,255,255,.06)}
.consola.oscura .vivo{color:#7EE0C2}.consola.oscura .vivo::before{background:#7EE0C2}

/* titulares de seccion y ojales */
.consola.oscura h2{color:#fff}
.consola.oscura .ojal{color:#B4A5F5}
.consola.oscura .pie-pagina{border:0;border-top:2px solid;color:#8E90A6;
  border-image:linear-gradient(90deg,#402D9B,#6B4ED8,#F966BE,#E8547A,#60A8E9) 1}
.consola.oscura .pie-pagina a{color:#B4A5F5}

/* la cabecera fija, tambien en modo consola */
.consola.oscura .cabecera-fija{background:rgba(14,14,30,.85);border-bottom-color:rgba(255,255,255,.1)}
.consola.oscura .cabecera-fija .marca img{filter:brightness(0) invert(1)}
.consola.oscura .cabecera-fija .nav a{color:rgba(255,255,255,.78)}
.consola.oscura .cabecera-fija .nav a:hover{color:#fff}
.consola.oscura .cabecera-fija .idioma{color:rgba(255,255,255,.5)}
.consola.oscura .cabecera-fija .idioma b{color:#fff}
.evo-pico{font:700 15px 'Outfit',sans-serif}

/* ---------- v19: consola en claro (por defecto) y conmutador ---------- */
.consola{background:#F4F4FB}
.consola .panel{background:#FFFFFF;border-color:#E6E4F0;
  box-shadow:0 1px 2px rgba(26,26,46,.04), 0 14px 44px -18px rgba(64,45,155,.16)}
.consola .kpi{background:#FFFFFF;border-color:#E6E4F0;
  box-shadow:0 1px 2px rgba(26,26,46,.04), 0 12px 36px -16px rgba(64,45,155,.16)}
.consola .kpi .valor{background:linear-gradient(100deg,#E8547A,#6B4ED8 55%,#2380BF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-size:2rem}
.consola.oscura .kpi .valor{background:linear-gradient(100deg,#F9A3D7,#C4B2FF 55%,#7CC1F0);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.consola .apilada{height:40px}
.consola .marca-cabecera{display:flex}

/* los colores del grafico van por clase, no clavados en el SVG */
.consola .evo-rejilla{stroke:rgba(26,26,46,.1)}
.consola.oscura .evo-rejilla{stroke:rgba(255,255,255,.07)}
.consola .evo-eje{stroke:rgba(26,26,46,.22)}
.consola.oscura .evo-eje{stroke:rgba(255,255,255,.2)}
.consola .evo-pico{fill:#1A1A2E}
.consola.oscura .evo-pico{fill:#fff}
.consola .evolutivo .eje-x{fill:#9AA0AF}
.consola.oscura .evolutivo .eje-x{fill:#6E7086}

/* fila de controles: periodo a la izquierda, tema a la derecha */
.fila-controles{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.selector-tema{margin-left:auto}
.selector-tema button{display:inline-flex;align-items:center;gap:7px}
.selector-tema .icono-xs{width:14px;height:14px}

/* ---------- v20: pulido pro del panel ---------- */
/* cabeceras de panel: azulejo de icono, sin filete */
.consola .panel h3{border-left:0;padding-left:0;display:flex;align-items:center;gap:11px;
  font-size:1.12rem;letter-spacing:-.008em;margin-bottom:6px}
.icono-titulo{width:32px;height:32px;border-radius:9px;flex:none;display:inline-flex;
  align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#6B4ED8,#F966BE)}
.icono-titulo svg{width:17px;height:17px}
.consola .panel .pie{margin-bottom:20px}

/* pie de fuente bajo cada grafico */
.fuente{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--linea-suave);
  font-size:12px;line-height:1.55;color:var(--tenue)}
.consola.oscura .fuente{border-top-color:rgba(255,255,255,.08);color:#6E7086}
.nota-base{font-size:12px;color:var(--tenue);max-width:86ch;margin:10px 0 0;line-height:1.55}
.consola.oscura .nota-base{color:#6E7086}

/* paneles emparejados */
.par-paneles{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:900px){.par-paneles{grid-template-columns:1fr}}
.par-paneles .panel{margin-top:26px}
.par-paneles .divergente{grid-template-columns:118px 1fr 56px}
.par-paneles .doble{grid-template-columns:132px 1fr 108px}

/* interruptor de oscuro */
.interruptor{font:600 13.5px 'Outfit',sans-serif;display:inline-flex;align-items:center;gap:9px;
  margin-left:auto;padding:8px 14px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--linea);background:transparent;color:var(--tinta-2);
  transition:border-color var(--tr),color var(--tr)}
.interruptor:hover{border-color:var(--acento);color:var(--acento)}
.pista-interruptor{width:34px;height:19px;border-radius:10px;background:var(--linea);
  position:relative;display:inline-block;transition:background var(--tr);flex:none}
.pista-interruptor .bola{position:absolute;top:2.5px;left:3px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:transform var(--tr);display:block;
  box-shadow:0 1px 3px rgba(0,0,0,.3)}
.interruptor[aria-pressed="true"] .pista-interruptor{background:var(--acento)}
.interruptor[aria-pressed="true"] .pista-interruptor .bola{transform:translateX(14px)}
.consola.oscura .interruptor{border-color:rgba(255,255,255,.2);color:#ECECF4}
.consola.oscura .pista-interruptor{background:rgba(255,255,255,.2)}
.consola.oscura .interruptor[aria-pressed="true"] .pista-interruptor{background:#9B87F0}

/* geometria identica en ambos temas (nada de saltos al conmutar) */
.consola .portada-demo{margin-bottom:0}
.consola .medio-fila img{padding:1px;background:rgba(255,255,255,.9)}

/* ---------- v21: subtabs del aporte, rayita del sector y filtros del muro ---------- */
.subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.subtabs button{font:600 12.5px 'Outfit',sans-serif;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--linea);background:transparent;color:var(--sutil);cursor:pointer;
  transition:all var(--tr)}
.subtabs button:hover{border-color:var(--acento);color:var(--acento)}
.subtabs button[aria-pressed="true"]{background:var(--acento-suave);border-color:var(--acento);color:var(--acento)}
.consola.oscura .subtabs button{border-color:rgba(255,255,255,.16);color:#8E90A6}
.consola.oscura .subtabs button:hover{border-color:#9B87F0;color:#B4A5F5}
.consola.oscura .subtabs button[aria-pressed="true"]{background:rgba(155,135,240,.16);
  border-color:#9B87F0;color:#B4A5F5}

/* la rayita: el % del medio en el conjunto del sector */
.barra .pista{position:relative;overflow:visible}
.barra .pista .relleno{border-radius:var(--r-pill)}
.rayita{position:absolute;top:-4px;bottom:-4px;width:2.5px;border-radius:1px;
  background:var(--tinta-2);opacity:.75;pointer-events:none}
.consola.oscura .rayita{background:#ECECF4;opacity:.65}
.delta-aporte{font-family:"Spline Sans Mono",monospace;font-size:11.5px;margin-left:8px}
.delta-aporte.pos{color:var(--pos)}.delta-aporte.neg{color:var(--neg)}
.consola.oscura .delta-aporte.pos{color:#7CC1F0}.consola.oscura .delta-aporte.neg{color:#F58BB8}

/* filtros del muro de marca */
.filtros-muro{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:flex-end;margin:20px 0 22px}
.grupo-filtro{display:grid;gap:7px}
.etq-filtro{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--sutil)}
.consola.oscura .etq-filtro{color:#8E90A6}
.selector-mini{display:flex;gap:6px;flex-wrap:wrap}
.selector-mini button{font:600 12px 'Outfit',sans-serif;padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--linea);background:transparent;color:var(--tinta-2);cursor:pointer;
  transition:all var(--tr)}
.selector-mini button:hover{border-color:var(--acento);color:var(--acento)}
.selector-mini button[aria-pressed="true"]{background:var(--tinta);color:var(--fondo);border-color:var(--tinta)}
.consola.oscura .selector-mini button{border-color:rgba(255,255,255,.16);color:#C6C6D6}
.consola.oscura .selector-mini button[aria-pressed="true"]{background:#fff;color:#12122A;border-color:#fff}
.selector-dim{font:600 12.5px 'Outfit',sans-serif;padding:7px 12px;border-radius:var(--r-s);
  border:1px solid var(--linea);background:var(--fondo);color:var(--tinta);cursor:pointer}
.consola.oscura .selector-dim{background:#16162A;color:#ECECF4;border-color:rgba(255,255,255,.16)}
.recuento-filtro{font-family:"Spline Sans Mono",monospace;font-size:12px;color:var(--sutil);
  margin-left:auto;padding-bottom:8px}
.consola.oscura .recuento-filtro{color:#8E90A6}

/* el nombre de las barras del aporte lleva favicon */
.barra .nombre{display:flex;align-items:center;gap:8px}
.consola.oscura .barra .nombre .med-ico{background:rgba(255,255,255,.9);border-radius:4px;padding:1px}

/* los paneles emparejados hacen caja: misma altura, pie alineado abajo */
.par-paneles{align-items:stretch}
.par-paneles .panel{display:flex;flex-direction:column}
.par-paneles .panel .fuente{margin-top:auto}
.par-paneles .panel > :nth-last-child(2){margin-bottom:18px}

/* ---------- v22: jerarquia, filtros segmentados y fichas tintadas ---------- */
.consola .pestanas{margin-top:34px}
.consola .demo-cabeza{margin-top:2px}
.consola .demo-cabeza .fila-controles{margin-top:18px}
.consola .pestanas button{font-size:16.5px}

/* filtros: tira contenida con controles segmentados */
.filtros-muro{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);
  padding:16px 20px;gap:12px 28px;align-items:flex-end}
.consola.oscura .filtros-muro{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
.selector-mini{background:var(--papel-2);border-radius:var(--r-pill);padding:3px;gap:0}
.consola.oscura .selector-mini{background:rgba(255,255,255,.07)}
.selector-mini button{border:0;padding:6px 13px;color:var(--sutil);border-radius:var(--r-pill)}
.selector-mini button:hover{color:var(--tinta)}
.selector-mini button[aria-pressed="true"]{background:var(--fondo);color:var(--tinta);
  box-shadow:0 1px 3px rgba(26,26,46,.14)}
.consola.oscura .selector-mini button{color:#9698AC}
.consola.oscura .selector-mini button:hover{color:#ECECF4}
.consola.oscura .selector-mini button[aria-pressed="true"]{background:rgba(255,255,255,.14);
  color:#fff;box-shadow:none}
.selector-dim{border-radius:var(--r-pill);padding:8px 14px;background:var(--papel-2);border:0;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.consola.oscura .selector-dim{background-color:rgba(255,255,255,.07);border:0}
.recuento-filtro{background:var(--papel-2);border-radius:var(--r-pill);padding:6px 13px;
  margin-left:auto;align-self:flex-end}
.consola.oscura .recuento-filtro{background:rgba(255,255,255,.07)}

/* fichas tintadas por tono: apenas un velo */
.ficha--pos .ficha-cuerpo{background:linear-gradient(180deg,rgba(56,178,120,.06),transparent 70%)}
.ficha--neg .ficha-cuerpo{background:linear-gradient(180deg,rgba(224,73,108,.07),transparent 70%)}
.ficha--pos{border-color:#CBE9D8}
.ficha--neg{border-color:#F3CFDA}
.consola.oscura .ficha--pos{border-color:rgba(110,220,170,.28)}
.consola.oscura .ficha--neg{border-color:rgba(245,139,184,.32)}
.consola.oscura .ficha--pos .ficha-cuerpo{background:linear-gradient(180deg,rgba(110,220,170,.07),transparent 70%)}
.consola.oscura .ficha--neg .ficha-cuerpo{background:linear-gradient(180deg,rgba(245,139,184,.08),transparent 70%)}

/* ---------- v22b: filtros en una sola fila ---------- */
.filtros-muro{flex-wrap:nowrap;align-items:center;gap:12px;padding:10px 14px;overflow-x:auto}
@media(max-width:1020px){.filtros-muro{flex-wrap:wrap}}
.grupo-filtro{display:flex;align-items:center;gap:0}
.etq-filtro{display:none}
.grupo-filtro+.grupo-filtro{border-left:1px solid var(--linea);padding-left:12px}
.consola.oscura .grupo-filtro+.grupo-filtro{border-left-color:rgba(255,255,255,.1)}
.selector-mini button{font-size:11.5px;padding:5px 10px}
.selector-dim{font-size:12px;padding:6px 12px;padding-right:30px}
.recuento-filtro{padding:5px 11px;font-size:11.5px;align-self:center;white-space:nowrap}

/* los grupos no se encogen ni parten sus pildoras */
.filtros-muro{gap:10px}
.filtros-muro .grupo-filtro{flex:0 0 auto}
.selector-mini{flex-wrap:nowrap}
.selector-mini button{white-space:nowrap}
.grupo-filtro+.grupo-filtro{padding-left:10px}

/* apretar para que quepa el contador en la misma fila */
.filtros-muro{gap:8px;padding:9px 12px}
.selector-mini button{font-size:11px;padding:4px 9px}
.selector-mini{padding:2.5px}
.grupo-filtro+.grupo-filtro{padding-left:8px}
.selector-dim{font-size:11.5px;padding:5px 10px;padding-right:26px;max-width:118px;
  background-position:right 9px center}
.recuento-filtro{font-size:11px;padding:4px 9px;margin-left:6px}

/* ---------- v22c: filtros con nombre y en una fila ---------- */
.filtros-muro{align-items:flex-end;padding:12px 16px 12px;gap:14px}
.grupo-filtro{display:grid;gap:5px;flex:0 0 auto}
.etq-filtro{display:block;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tenue);margin-left:4px}
.consola.oscura .etq-filtro{color:#6E7086}
.grupo-filtro+.grupo-filtro{border-left:1px solid var(--linea-suave);padding-left:14px}
.recuento-filtro{align-self:flex-end;margin-bottom:1px}
.filtros-muro{gap:12px}
.grupo-filtro+.grupo-filtro{padding-left:12px}

/* regleta fina: la tira de filtros a media altura */
.filtros-muro{padding:8px 14px;margin:16px 0 20px}
.grupo-filtro{gap:4px}
.etq-filtro{line-height:1;font-size:9px}
.selector-mini{padding:2px}
.selector-mini button{padding:4px 9px}
.selector-dim{padding:4px 9px;padding-right:26px;font-size:11px}
.recuento-filtro{padding:4px 9px}
.filtros-muro .selector{margin:0}

/* todos los grupos alineados: rotulos arriba, controles a la misma altura */
.filtros-muro{align-items:stretch}
.grupo-filtro{grid-template-rows:14px auto;align-items:center}
.etq-filtro{align-self:start}
.selector-dim{height:29px;box-sizing:border-box}
.selector-mini{height:29px;box-sizing:border-box;align-items:center}
.recuento-filtro{align-self:end;margin-bottom:2px}

/* ---------- v23: selector de sector ---------- */
.selector-sector{margin:30px 0 0}
.selector-sector button{font-size:15px;font-weight:700;padding:10px 26px}
.consola .pestanas{margin-top:20px}

/* ============================================================ v24 — capa animada del panel (31-08) */
.panel { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.panel:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(26, 18, 64, .12); border-color: rgba(107, 78, 216, .35); }
.consola.oscura .panel:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }

/* contadores y entrada de los KPI */
.kpi { animation: kpi-sube .5s cubic-bezier(.22, 1, .36, 1) both; }
.kpi:nth-child(2) { animation-delay: .07s; }
.kpi:nth-child(3) { animation-delay: .14s; }
.kpi:nth-child(4) { animation-delay: .21s; }
.kpi .valor { font-variant-numeric: tabular-nums; }
@keyframes kpi-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* barras horizontales: crecen desde la izquierda al pintarse */
.barra .relleno { transform-origin: left center; animation: crece-x .8s cubic-bezier(.22, 1, .36, 1) both; }
.pila .fav, .pila .neu, .pila .des { transform-origin: left center; animation: crece-x .9s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes crece-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* fichas del muro: cascada */
.ficha { animation: ficha-entra .45s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* evolutivo: columnas que crecen, línea que se dibuja, área y puntos que llegan después */
.evo-anim .barra-dia { transform-box: fill-box; transform-origin: center bottom; animation: crece-y .55s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0ms); }
@keyframes crece-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.evo-anim polyline[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dibuja 1.1s ease .45s forwards; }
@keyframes dibuja { to { stroke-dashoffset: 0; } }
.evo-anim path[fill^="url"], .evo-anim circle, .evo-anim .evo-pico { opacity: 0; animation: llega .5s ease 1.15s forwards; }
@keyframes llega { to { opacity: 1; } }

/* interruptores y botones con respuesta táctil */
.selector-mini button, .selector-sector button { transition: background .18s ease, color .18s ease, transform .12s ease; }
.selector-mini button:active, .selector-sector button:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .kpi, .barra .relleno, .pila .fav, .pila .neu, .pila .des, .ficha,
  .evo-anim .barra-dia, .evo-anim polyline[pathLength],
  .evo-anim path[fill^="url"], .evo-anim circle, .evo-anim .evo-pico { animation: none; opacity: 1; }
  .panel, .panel:hover { transform: none; }
}

/* distintivo EN PORTADA: el punto que ya existia, ahora con latido */
.vivo::before { animation: late 2.2s ease-in-out infinite; }
@keyframes late {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 196, 145, .5); }
  45% { box-shadow: 0 0 0 5px rgba(46, 196, 145, 0); }
}
@media (prefers-reduced-motion: reduce) { .vivo::before { animation: none; } }

/* anillos de cuota por tono */
.dona { display: flex; justify-content: center; padding: 6px 0 2px; }
.dona svg { width: 168px; height: 168px; }
.dona-cifra { font-size: 15px; font-weight: 700; fill: var(--tinta, currentColor); }
.dona-etq { font-size: 8.5px; letter-spacing: .12em; fill: var(--tinta-suave, currentColor); opacity: .65; }
.dona path { transition: opacity .18s ease; }
.dona svg:hover path { opacity: .45; }
.dona svg path:hover { opacity: 1; }

/* anillo + leyenda lado a lado */
.dona-fila { display: flex; align-items: center; gap: 18px; padding: 6px 0 2px; flex-wrap: wrap; }
.dona-fila .dona { padding: 0; flex: none; }
.leyenda-columna { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 150px; }
.leyenda-columna .item { display: inline-flex; align-items: center; gap: 7px; }
.dona-rotulo { font-size: 7.5px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.25); stroke-width: .6px; }

/* base muestral de cada grafico */
.base-grafico { font-size: 11.5px; color: var(--tinta-suave); opacity: .85; margin: 10px 0 0; letter-spacing: .01em; }

/* ============================================================ v27 — vitrina de metricas con vida (01-09) */
.metrica:nth-child(5) .icono{background:linear-gradient(135deg,#60A8E9,#5E45C9)}
.metrica:nth-child(6) .icono{background:linear-gradient(135deg,#F966BE,#E8547A)}


.mini-diag{display:block;width:100%;max-width:210px;height:auto;margin:2px 0 18px}
.diag-dona,.diag-radar{max-width:96px}
.dlbl{font-family:"Spline Sans Mono",monospace;font-size:9.5px;fill:currentColor;opacity:.55}
.dx{font-size:15px;fill:currentColor;opacity:.45;font-weight:700}

/* coreografia al entrar en pantalla (.rev gana .vis) */
.diag-ee rect{transform-box:fill-box;transform-origin:center bottom;transform:scaleY(0)}
.rev.vis .diag-ee .b1{animation:diag-sube .6s cubic-bezier(.22,1,.36,1) .15s forwards}
.rev.vis .diag-ee .b2{animation:diag-sube .6s cubic-bezier(.22,1,.36,1) .35s forwards}
.rev.vis .diag-ee .b3{animation:diag-sube .6s cubic-bezier(.22,1,.36,1) .55s forwards}
.rev.vis .diag-ee .b4{animation:diag-sube .7s cubic-bezier(.22,1,.36,1) .85s forwards}
@keyframes diag-sube{to{transform:scaleY(1)}}

.diag-dona .a1,.diag-dona .a2,.diag-dona .a3,.diag-cuotas .c1,.diag-cuotas .c2{opacity:0}
.rev.vis .diag-dona .a1{animation:diag-llega .5s ease .2s forwards}
.rev.vis .diag-dona .a2{animation:diag-llega .5s ease .45s forwards}
.rev.vis .diag-dona .a3{animation:diag-llega .5s ease .7s forwards}
.rev.vis .diag-cuotas .c1{animation:diag-llega .6s ease .3s forwards}
.rev.vis .diag-cuotas .c2{animation:diag-llega .6s ease .6s forwards}
@keyframes diag-llega{to{opacity:1}}

.diag-tono rect{transform-box:fill-box;transform:scaleX(0)}
.diag-tono .tneg{transform-origin:right center}
.diag-tono .tpos{transform-origin:left center}
.rev.vis .diag-tono .tneg{animation:diag-ancho .7s cubic-bezier(.22,1,.36,1) .3s forwards}
.rev.vis .diag-tono .tpos{animation:diag-ancho .7s cubic-bezier(.22,1,.36,1) .5s forwards}
@keyframes diag-ancho{to{transform:scaleX(1)}}

.diag-radar .radar{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0}
.rev.vis .diag-radar .radar{animation:diag-radar .8s cubic-bezier(.22,1,.36,1) .25s forwards}
@keyframes diag-radar{to{transform:scale(1);opacity:1}}
.diag-radar .vertice{opacity:0}
.rev.vis .diag-radar .vertice{animation:diag-llega .4s ease .9s forwards}

.diag-red circle{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.diag-red .hilos{opacity:0}
.rev.vis .diag-red .n0{animation:diag-pop .45s cubic-bezier(.22,1,.36,1) .2s forwards}
.rev.vis .diag-red .n1{animation:diag-pop .45s cubic-bezier(.22,1,.36,1) .4s forwards}
.rev.vis .diag-red .n2{animation:diag-pop .45s cubic-bezier(.22,1,.36,1) .5s forwards}
.rev.vis .diag-red .n3{animation:diag-pop .45s cubic-bezier(.22,1,.36,1) .6s forwards}
.rev.vis .diag-red .n4{animation:diag-pop .45s cubic-bezier(.22,1,.36,1) .7s forwards}
.rev.vis .diag-red .n5{animation:diag-pop .45s cubic-bezier(.22,1,.36,1) .8s forwards}
.rev.vis .diag-red .n6{animation:diag-pop .45s cubic-bezier(.22,1,.36,1) .9s forwards}
.rev.vis .diag-red .hilos{animation:diag-llega .6s ease 1s forwards}
@keyframes diag-pop{60%{transform:scale(1.25)}to{transform:scale(1)}}

@media (prefers-reduced-motion: reduce){
  .diag-ee rect,.diag-tono rect,.diag-radar .radar,.diag-red circle{transform:none;opacity:1;animation:none}
  .diag-dona .a1,.diag-dona .a2,.diag-dona .a3,.diag-cuotas .c1,.diag-cuotas .c2,
  .diag-radar .vertice,.diag-red .hilos{opacity:1;animation:none}
}


/* ============================================================ v28 — vitrina editorial de metricas (sin tarjetas) */
.metricas.lista{display:block;margin-top:40px;counter-reset:met}
.metricas.lista .metrica{counter-increment:met;background:none;border:0;box-shadow:none;
  border-radius:0;padding:38px 0;border-top:1px solid var(--linea);
  display:grid;grid-template-columns:1.35fr 320px;gap:8px 64px;align-items:center}
.metricas.lista .metrica:first-child{border-top:0;padding-top:8px}
.metricas.lista .metrica::before{display:none}
.metricas.lista .metrica:hover{transform:none;box-shadow:none}
.metricas.lista .icono{display:none}
.metricas.lista h3{grid-column:1;font-size:1.5rem;margin:0 0 6px}
.metricas.lista h3::before{content:"0" counter(met);display:inline-block;
  font-family:"Spline Sans Mono",monospace;font-size:.8rem;font-weight:500;
  color:var(--acento);letter-spacing:.08em;margin-right:14px;vertical-align:2px}
.metricas.lista p{grid-column:1;max-width:56ch}
.metricas.lista .formula{grid-column:1;border-top:0;padding-top:2px}
.metricas.lista .mini-diag{grid-column:2;grid-row:1/4;width:100%;max-width:300px;
  justify-self:center;margin:0}
.metricas.lista .diag-dona,.metricas.lista .diag-radar{max-width:150px}
.metricas.lista .diag-cuotas,.metricas.lista .diag-red{max-width:230px}
.metricas.lista .metrica:nth-child(even){grid-template-columns:320px 1.35fr}
.metricas.lista .metrica:nth-child(even) h3,
.metricas.lista .metrica:nth-child(even) p,
.metricas.lista .metrica:nth-child(even) .formula{grid-column:2}
.metricas.lista .metrica:nth-child(even) .mini-diag{grid-column:1;grid-row:1/4}
@media(max-width:820px){
  .metricas.lista .metrica,.metricas.lista .metrica:nth-child(even){display:block;padding:30px 0}
  .metricas.lista .mini-diag{margin:14px auto 4px}
}


/* ============================================================ v29 — lockup 53seconds (01-09) */
.marca-53{display:inline-flex;align-items:center;color:inherit;text-decoration:none}
.marca-53 .marca-ico{height:144px;width:auto;display:block}
@media(max-width:640px){.marca-53 .marca-ico{height:100px}}
.marca-53:hover{text-decoration:none;opacity:.85}

/* la banda del 53 luce el logo animado de la marca */
.banda-90 .logo-banda{width:min(390px,72vw);height:auto;display:block;margin:0 auto 10px}

/* en la cabecera fija (al hacer scroll) el logo cabe en la barra */
.cabecera-fija .marca-53 .marca-ico{height:60px}

/* ============================================================ v30 — pila viva del hero (01-09) */
.pila-vidrio{display:flex;flex-direction:column;gap:16px;position:relative;
  overflow:hidden;justify-content:flex-start;
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 72%,transparent 99%)}
@media(min-width:920px){.js .herox .pila-vidrio{height:560px;min-height:0}}
@media(max-width:919px){.pila-vidrio{max-height:560px}}
.js .herox .pila-vidrio{animation:ent-ficha .9s cubic-bezier(.16,1,.3,1) .38s backwards}
.vidrio-carta{background:rgba(255,255,255,.07);backdrop-filter:blur(26px);
  -webkit-backdrop-filter:blur(26px);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-l);padding:20px 24px;
  box-shadow:0 18px 46px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.09);
  transition:opacity .4s ease, transform .4s ease}
.vidrio-carta .ficha-entidad{color:#fff;font-size:1.15rem}
.vidrio-carta .ficha-fuente{color:rgba(255,255,255,.66);margin-top:4px}
.vidrio-carta .ficha-fuente b{color:#fff;font-weight:700}
.vidrio-carta .med-ico{opacity:.95}
.vidrio-carta .vivo{color:#7EE0C2}
.vidrio-carta .ficha-papel{color:rgba(255,255,255,.88);margin:10px 0 12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pila-vidrio .vidrio-carta:nth-child(2){opacity:.85}
.pila-vidrio .vidrio-carta:nth-child(3){opacity:.55}
.vidrio-carta.entra{animation:carta-cae .55s cubic-bezier(.22,1,.36,1)}
@keyframes carta-cae{from{opacity:0;transform:translateY(-30px) scale(.96)}}
.vidrio-carta.sale{opacity:0 !important;transform:translateY(16px) scale(.96)}
@media (prefers-reduced-motion: reduce){.vidrio-carta.entra{animation:none}}

/* cabecera apilada en moviles: logo arriba, enlaces debajo */
@media(max-width:640px){
  .cabecera{flex-direction:column;align-items:center;gap:10px;padding-top:16px}
  .cabecera .nav{justify-content:center;flex-wrap:wrap;row-gap:6px}
}

/* ============================================================ v31 — formulario de contacto (01-09) */
.formulario{margin-top:26px;text-align:left;max-width:560px;margin-left:auto;margin-right:auto}
.formulario .campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.formulario .campos{grid-template-columns:1fr}}
.formulario label{display:block;font-size:13.5px;font-weight:600;letter-spacing:.02em;
  margin-bottom:14px;color:inherit;opacity:.9}
.formulario input,.formulario textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:10px;
  color:inherit;font:inherit;font-size:15px;padding:11px 13px;outline:none;
  transition:border-color .2s ease, background .2s ease}
.formulario input:focus,.formulario textarea:focus{border-color:#8B7BF0;background:rgba(255,255,255,.1)}
.formulario textarea{resize:vertical;min-height:96px}
.formulario .np{position:absolute;left:-9999px;height:1px;width:1px;opacity:0}
.formulario .boton{margin-top:2px}
.form-estado{min-height:1.3em;font-size:14.5px;margin:12px 0 0}
.form-estado.ok{color:#7EE0C2}
.form-estado.mal{color:#F9A3B8}
.form-nota{font-size:12.5px;opacity:.65;margin:10px 0 0}
.form-nota a{color:inherit;text-decoration:underline}

/* formulario: selects a juego y placeholders legibles (adios al verde heredado) */
.formulario select{display:block;width:100%;box-sizing:border-box;margin-top:6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:10px;
  color:inherit;font:inherit;font-size:15px;padding:11px 13px;outline:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23BBB3E8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.formulario select:focus{border-color:#8B7BF0;background-color:rgba(255,255,255,.1)}
.formulario select option{background:#221A4A;color:#EDEAFB}
.formulario input::placeholder,.formulario textarea::placeholder{
  color:rgba(255,255,255,.45);opacity:1}
.formulario .campos{grid-template-columns:1fr 1fr;}
.formulario .campos label:nth-child(1){grid-column:1}
.formulario .campos label:nth-child(2){grid-column:2}

/* ambito de los dashboards, bien visible junto al periodo */
.chip-ambito{display:inline-flex;align-items:center;gap:7px;margin-left:12px;
  padding:9px 16px;border-radius:999px;border:1px solid var(--linea);
  font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--tinta);
  background:var(--fondo);vertical-align:middle}
.chip-ambito .icono-xs{width:15px;height:15px;color:var(--acento)}

/* share of impact en sectores grandes: anillo + tabla completa */
.sov-dona{display:flex;justify-content:center;padding:8px 0 4px}
.sov-dona svg{width:230px;height:230px}
.leyenda-sov-tabla{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 20px;margin-top:14px}
@media(max-width:900px){.leyenda-sov-tabla{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.leyenda-sov-tabla{grid-template-columns:1fr}}
.leyenda-sov-tabla .item{display:inline-flex;align-items:center;gap:8px;font-size:13.5px}
.leyenda-sov-tabla .item em{font-style:normal;font-family:"Spline Sans Mono",monospace;
  font-size:11px;opacity:.5;min-width:18px;text-align:right}
.leyenda-sov-tabla .item b{margin-left:auto;font-variant-numeric:tabular-nums}

/* el contenedor de la barra, liberado cuando toca anillo */
.apilada.apilada--dona{height:auto !important;border-radius:0;overflow:visible;
  box-shadow:none !important;background:none;display:block}

/* share of impact partido: anillo grande + tabla con tickers */
.sov-partido{display:grid;grid-template-columns:1fr 1fr;gap:12px 36px;align-items:center}
@media(max-width:860px){.sov-partido{grid-template-columns:1fr}}
.sov-partido .sov-dona{padding:0}
.sov-partido .sov-dona svg{width:min(430px,100%);height:auto}
.sov-tabla-env{overflow-x:auto}
.tabla-sov{width:100%;border-collapse:collapse;font-size:13px;line-height:1.35}
.tabla-sov td{padding:3.5px 8px;border-bottom:1px solid var(--linea-suave);white-space:nowrap}
.tabla-sov tr:last-child td{border-bottom:0}
.tabla-sov .pos{font-family:"Spline Sans Mono",monospace;font-size:11px;opacity:.5;text-align:right;width:24px}
.tabla-sov .tick{font-family:"Spline Sans Mono",monospace;font-weight:600;letter-spacing:.04em}
.tabla-sov .num{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.tabla-sov .punto-entidad{display:inline-block;width:10px;height:10px;vertical-align:-1px}

/* rotulos de ticker dentro del anillo grande */
.dona-rotulo-tick{font-size:5.6px;font-weight:700;letter-spacing:.03em}

/* etiquetas exteriores del anillo de sector: limpias, sin sombras */
.sov-dona{color:var(--tinta)}
.sov-etq{font-size:7px;fill:currentColor}
.sov-etq-tick{font-family:"Spline Sans Mono",monospace;font-weight:700;letter-spacing:.02em}
.sov-etq-pct{opacity:.55;font-weight:600}
.sov-partido .sov-dona svg{width:min(520px,100%);height:auto}