/* ============================================================
   Testmia — web pública · hoja de estilos única
   Parte 1: base del sitio.
   Parte 2: las 15 animaciones aprobadas, copiadas tal cual
   desde testmia-animaciones-aprobadas.html (no editar esa parte).
   Los tokens de :root son los mismos del archivo de animaciones.
   Efectos (decisión de Nico 2026-08-28): degradés, glow y patrones
   permitidos SOLO en neutros y lima (rgba/color-mix de la paleta).
   ============================================================ */
:root{
  --bg:#000000;--card:#16181B;--line:#26282C;
  --text:#E8EAF0;--text2:#9AA0AC;--muted:#6E7480;
  --lime:#A3E635;--ok:#2DD48F;--warn:#F5A623;--err:#EF4444;--info:#4DA3FF;
  --w:#FFFFFF;--w2:#F5F6F7;--wl:#E3E5E9;--wt:#111318;--wm:#6B7280;
  --card2:#1E2126;--line2:#3A3E44; /* tarjeta alta y borde activo, del manual de marca */
  /* MEDIDA UNICA de todo el texto del sitio (decision de Nico, 2026-08-30: antes
     habia cinco anchos distintos -720/760/820/860/1000- y se notaba el desprolijo).
     Cambiar solo aca: no volver a poner max-width sueltos en bloques de texto.
     El 2026-08-30, segunda vuelta: paso de 900px a 100%. Con 900 el texto cortaba
     antes que las animaciones, que ocupan el ancho del contenedor (1152), y el
     escalon se veia. Con 100% el borde derecho del texto y el de la ventana son
     el mismo en cualquier pantalla, sin depender de ningun numero. */
  --medida:100%;
  /* El formulario de aplicar NO es texto corrido: es una columna de campos y a
     1152px los inputs quedan absurdos. Va con su propia medida, como el
     .contenedor y el marco .ventana, que tambien quedan afuera de --medida. */
  --medida-campos:900px;
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Manrope',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.salto{position:absolute;left:-9999px;top:0;background:var(--lime);color:#000;padding:10px 16px;font-weight:700;z-index:100;text-decoration:none}
.salto:focus{left:0}
.contenedor{max-width:1200px;margin:0 auto;padding:0 24px}
.lima{color:var(--lime)}
.baja .lima,.problema .lima,.texto .lima{color:var(--lime)}

/* --- cabecera --- */
.cabecera{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cabecera{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
.cabecera .contenedor{display:flex;align-items:center;gap:24px;height:64px}
.marca{display:flex;align-items:baseline;gap:14px;text-decoration:none}
.wordmark{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:23px;letter-spacing:-.035em;color:var(--w);line-height:1}
.wordmark i{font-style:normal;color:var(--lime)}
.punto{display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--lime);vertical-align:.6em;margin-left:.08em}
.tagline{font-family:'Manrope',sans-serif;font-size:10px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--lime)}
.cabecera nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.enlace{color:var(--text2);text-decoration:none;font-size:13.5px;font-weight:500}
.enlace:hover,.enlace:focus-visible{color:var(--lime)}
/* selector de idioma: un solo enlace, que dice el idioma AL QUE lleva (en la
   web en castellano dice EN, en la inglesa dice ES). Un par «ES | EN» sería más
   reconocible pero el header ya venía justo de ancho a 640px. El globo es lo
   que hace evidente que es idioma y no una sigla cualquiera. */
.idioma{display:inline-flex;align-items:center;gap:6px;flex:none;color:var(--text2);text-decoration:none;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.1em;
  border:1px solid var(--line);border-radius:9px;padding:6px 9px;transition:color .2s ease,border-color .2s ease}
.idioma svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.idioma:hover,.idioma:focus-visible{color:var(--lime);border-color:var(--lime)}
@media(max-width:400px){.idioma span{display:none}.idioma{padding:6px}}
.boton{display:inline-block;background-color:var(--lime);background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);color:#000;font-family:'Manrope',sans-serif;font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:12px;text-decoration:none;box-shadow:0 0 26px -9px rgba(163,230,53,.5);transition:box-shadow .25s ease,filter .2s ease}
.boton:hover{filter:brightness(1.07);box-shadow:0 0 34px -6px rgba(163,230,53,.7)}
.boton:active{transform:translateY(1px)}
.boton.chico{padding:8px 15px;font-size:13px}
.boton-sec{display:inline-block;border:1px solid var(--lime);color:var(--lime);font-family:'Manrope',sans-serif;font-weight:600;font-size:14.5px;padding:10px 19px;border-radius:12px;text-decoration:none;transition:box-shadow .25s ease,background-color .25s ease}
.boton-sec:hover{background-color:rgba(163,230,53,.08);box-shadow:0 0 22px -10px rgba(163,230,53,.5)}
.boton-sec:active{transform:translateY(1px)}
/* Log in: mismo tamaño y efectos que «Aplicar», con los colores invertidos —
   fondo negro y texto lima en vez de fondo lima y texto negro. */
.boton-sec.chico{padding:7px 14px;font-size:13px;font-weight:700;background-color:var(--bg);background-image:linear-gradient(180deg,rgba(163,230,53,.12),rgba(163,230,53,0) 55%);box-shadow:0 0 26px -9px rgba(163,230,53,.5)}
.boton-sec.chico:hover{background-color:var(--bg);filter:brightness(1.12);box-shadow:0 0 34px -6px rgba(163,230,53,.7)}
@media(max-width:640px){.cabecera .tagline{display:none}}

/* --- menú de herramientas (details, sin JavaScript) --- */
.menu{position:relative}
.menu > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;color:var(--text2);font-size:13.5px;font-weight:500;-webkit-user-select:none;user-select:none}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary::after{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text2)}
.menu > summary:hover,.menu[open] > summary{color:var(--text)}
.menu-panel{position:absolute;right:0;top:calc(100% + 16px);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px;min-width:252px;margin:0;list-style:none;z-index:60;box-shadow:0 24px 70px -24px rgba(0,0,0,.9)}
.menu-panel li{margin:0}
.menu-panel a{display:block;padding:9px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:13.5px;font-weight:500;line-height:1.35}
.menu-panel a:hover,.menu-panel a:focus-visible{background:var(--card2)}
.menu-panel a em{font-style:normal;display:block;font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);margin-top:3px}
.menu-panel .divisor{border-top:1px solid var(--line);margin:6px 4px}
.menu-panel .solo-movil{display:none}
@media(max-width:640px){
  /* en pantallas chicas «El equipo», «Valores» y «Log in» pasan al desplegable:
     con los dos botones sueltos el header desbordaba 38px */
  .cabecera nav > .enlace,.cabecera nav > .boton-sec{display:none}
  .menu-panel .solo-movil{display:block}
}
/* Con el selector de idioma sumado, a 375px el header ya no entraba. Se
   aprietan los espacios en vez de esconder algo: poder cambiar de idioma
   tiene que estar a la vista también en el teléfono. */
@media(max-width:430px){
  .cabecera .contenedor{gap:12px;padding:0 14px}
  .cabecera nav{gap:12px}
}
/* a 340px «Herramientas» es más largo que «Tools» y el header castellano
   volvía a desbordar: se achican los dos elementos que se pueden achicar */
@media(max-width:345px){
  .cabecera .wordmark{font-size:19px}
  .cabecera .menu > summary{font-size:12.5px}
  .cabecera .boton.chico{padding:8px 11px;font-size:12.5px}
}

/* --- portada --- */
.portada{position:relative;overflow:hidden;padding:100px 0 84px}
.portada::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 62% 52% at 50% -12%,rgba(163,230,53,.13),rgba(163,230,53,.04) 55%,transparent 76%) no-repeat,
  linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) top left/46px 46px,
  linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) top left/46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 95% 92% at 50% 0%,#000 32%,transparent 76%);
  mask-image:radial-gradient(ellipse 95% 92% at 50% 0%,#000 32%,transparent 76%)}
.portada .contenedor{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);margin:0 0 18px;border:1px solid var(--line);border-radius:999px;padding:6px 13px;background:rgba(255,255,255,.02)}
.eyebrow::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px rgba(163,230,53,.8)}
/* eslogan «Run / Learn / Repeat» tipeado (CSS puro; 20 caracteres exactos).
   Excepción de Nico (2026-08-28) a la regla «sin texto letra por letra»: solo acá. */
.eslogan .tipeo{--tipeo-w:calc(20ch + 3.2em);display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:2px solid var(--lime);width:var(--tipeo-w);animation:tipeoslogan 7.5s steps(20,end) infinite,tipeocursor .9s step-end infinite}
/* en el pie: mismo eslogan, tipografía más chica y con más letter-spacing (.22em × 20 caracteres) */
.pie-linea .eslogan .tipeo{--tipeo-w:calc(20ch + 4.4em);border-right-width:1px}
@keyframes tipeoslogan{0%{width:0}28%{width:var(--tipeo-w)}80%{width:var(--tipeo-w)}92%{width:0}100%{width:0}}
@keyframes tipeocursor{0%,100%{border-right-color:var(--lime)}50%{border-right-color:transparent}}
@media (prefers-reduced-motion: reduce){.eslogan .tipeo{animation:none;border-right:0;width:auto}}
.portada h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(34px,5.2vw,62px);line-height:1.06;letter-spacing:-.02em;margin:0 0 24px;max-width:var(--medida)}
.portada h1 em{font-style:normal;color:var(--lime)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .portada h1 em{background:linear-gradient(94deg,color-mix(in srgb,var(--lime) 55%,var(--w)),var(--lime) 68%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.portada .boton,.cabecera .boton,.cabecera .boton-sec{position:relative}
.portada .boton::before,.cabecera .boton::before,.cabecera .boton-sec::before{content:'';position:absolute;left:2%;right:2%;bottom:-16px;height:13px;background:radial-gradient(ellipse at center,rgba(163,230,53,.35),transparent 70%);pointer-events:none}
.portada .boton::after,.cabecera .boton::after,.cabecera .boton-sec::after{content:'';position:absolute;left:15%;right:15%;bottom:-9px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--lime),transparent);opacity:.85;pointer-events:none}
/* el botón del header es más chico: el mismo efecto, proporcional */
.cabecera .boton::before,.cabecera .boton-sec::before{bottom:-11px;height:10px}
.cabecera .boton::after,.cabecera .boton-sec::after{bottom:-6px;height:1.5px}
.baja{font-size:clamp(16px,1.5vw,18.5px);color:var(--text);line-height:1.65;max-width:var(--medida);margin:0}
.problema{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:18px 22px;max-width:var(--medida);color:var(--text2);font-size:15px;line-height:1.6;margin:26px 0 0}
.problema strong{color:var(--text);font-weight:600}
.acciones{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:32px 0 0}
.firma{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--text2);margin:36px 0 0}
/* entrada del hero al cargar: el scroll nunca lo dispara porque ya está en pantalla */
@media (prefers-reduced-motion: no-preference){
  .portada .eyebrow{animation:aparecer .55s ease-out .05s both}
  .portada h1{animation:aparecer .55s ease-out .18s both}
  .portada .baja{animation:aparecer .55s ease-out .30s both}
  .portada .acciones{animation:aparecer .55s ease-out .42s both}
}

/* --- título de página de herramienta --- */
.titulo-pagina{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,5vw,44px);line-height:1.1;letter-spacing:-.02em;margin:0 0 20px;max-width:var(--medida)}
/* mismo resaltado que en .sec-titulo: la palabra que importa, en lima */
.titulo-pagina em{font-style:normal;color:var(--lime)}

/* --- franja de honestidad --- */
.franja{border-bottom:1px solid var(--line);background:var(--card)}
.franja p{margin:0;padding:16px 0;font-size:14px;color:var(--text2);line-height:1.55}
.franja strong{color:var(--text);font-weight:600}

/* --- secciones --- */
.sec{position:relative;padding:80px 0;scroll-margin-top:64px}
/* divisor con glow: línea gris que se apaga en los bordes + segmento lima luminoso al centro */
.portada::after,.sec::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:10px;pointer-events:none;
  background-image:
    radial-gradient(ellipse at center,rgba(163,230,53,.22),transparent 68%),
    linear-gradient(90deg,transparent,var(--lime) 38%,var(--lime) 62%,transparent),
    linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
  background-position:center;background-repeat:no-repeat;
  background-size:380px 10px,230px 1px,100% 1px}
/* trama de puntos de fondo para una sección */
.sec-trama{background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px);background-size:26px 26px}
.sec-titulo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(26px,4vw,34px);line-height:1.15;letter-spacing:-.015em;margin:0 0 18px}
.sec-titulo em{font-style:normal;color:var(--lime)}
/* «MEDIA BUYING 3.0» tipeado al lado del título, mismo efecto que el eslogan del
   hero pero con 16 caracteres (el steps() tiene que coincidir con el largo). */
.tag-tipeo{display:inline-block;margin-left:10px;font-family:'JetBrains Mono',monospace;font-size:clamp(13px,1.3vw,16px);font-weight:700;letter-spacing:.12em;color:var(--lime);white-space:nowrap}
.tag-tipeo .tipeo{--tipeo-w:calc(16ch + 1.92em);display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:2px solid var(--lime);width:var(--tipeo-w);animation:tipeoslogan 7.5s steps(16,end) infinite,tipeocursor .9s step-end infinite}
@media (prefers-reduced-motion: reduce){.tag-tipeo .tipeo{animation:none;border-right:0;width:auto}}
.texto{font-size:15.5px;color:var(--text2);line-height:1.65;max-width:var(--medida);margin:0 0 14px}
.texto strong{color:var(--text);font-weight:600}
/* enlace dentro de un párrafo: sin esto hereda el azul del navegador, que no
   está en la paleta. Es el primero del sitio (Live Ads → Creación de anuncios). */
.texto a{color:var(--lime);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--lime) 40%,transparent)}
.texto a:hover,.texto a:focus-visible{border-bottom-color:var(--lime)}
.pieza{margin-top:72px}
.chip-obra{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text2);border:1px solid var(--line2);border-radius:6px;padding:4px 9px;margin:0 0 14px}
.herr-card .chip-obra{margin:0 0 10px;font-size:8.5px;padding:3px 7px}
.pieza-titulo{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:21px;letter-spacing:-.01em;margin:0 0 12px}

/* --- los tres modos --- */
.modos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0 0;max-width:var(--medida)}
.modo{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:16px 18px;margin:0}
.modo dt{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin:0 0 8px}
.modo dd{margin:0;font-size:13px;color:var(--text2);line-height:1.5}
.pieza > .modos{margin-top:22px}
@media(max-width:700px){.modos{grid-template-columns:1fr}}

/* --- lo que nunca puede hacer --- */
.nunca{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:22px 24px;margin-top:72px;max-width:var(--medida)}
.nunca-titulo{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;letter-spacing:-.01em;margin:0 0 8px}
.nunca-intro{margin:0 0 14px;font-size:14px;color:var(--text2);line-height:1.6}
.nunca ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.nunca li{border-top:1px solid var(--line);padding:9px 0;font-size:13.5px;color:var(--text2);line-height:1.5}
@media(max-width:640px){.nunca ul{grid-template-columns:1fr}}

/* --- lo que viene --- */
.venir{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:64px}
.pieza > .venir{margin-top:22px}
.venir-card{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:18px 20px}
.venir-titulo{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.01em;margin:0 0 8px}
.venir-card p{margin:0;font-size:13.5px;color:var(--text2);line-height:1.55}
@media(max-width:640px){.venir{grid-template-columns:1fr}}

/* --- números reales (prueba) --- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.stat{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--card);border-radius:16px;padding:20px 22px;transition:transform .25s ease,border-color .25s ease}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--line2),transparent 70%)}
.stat.lider::before{height:2px;background:linear-gradient(90deg,var(--lime),rgba(163,230,53,0) 70%)}
.stat.lider{box-shadow:0 24px 60px -34px rgba(163,230,53,.3)}
.stat:hover{transform:translateY(-3px);border-color:var(--line2)}
.stat-cifra{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(28px,3vw,38px);letter-spacing:-.02em;line-height:1.1}
.stat.lider .stat-cifra{color:var(--lime)}
.stat-lbl{margin-top:8px;font-size:13px;color:var(--text2);line-height:1.5}
.stats-nota{margin:16px 0 0;font-size:12.5px;color:var(--text2)}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.stats{grid-template-columns:1fr}}

/* --- dolores --- */
.dolores{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.dolor{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:20px 22px}
.dolor-t{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.01em;line-height:1.3;margin:0 0 8px}
.dolor p{margin:0;font-size:13.5px;color:var(--text2);line-height:1.55}
@media(max-width:800px){.dolores{grid-template-columns:1fr}}

/* --- cómo funciona --- */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px;counter-reset:paso}
.paso{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:22px}
.paso-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:28px;color:var(--lime);letter-spacing:-.02em}
.paso-t{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.01em;margin:10px 0 8px}
.paso p{margin:0;font-size:13.5px;color:var(--text2);line-height:1.6}
/* frase clave: cierre de la sección, más grande que el texto corrido */
.frase-clave{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(19px,2.2vw,24px);line-height:1.35;letter-spacing:-.01em;color:var(--text);max-width:var(--medida);margin:34px 0 18px}
.frase-clave em{font-style:normal;color:var(--lime)}
@media(max-width:800px){.pasos{grid-template-columns:1fr}}

/* --- para quién es --- */
.aptos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
.apto{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:20px 22px}
.apto-t{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.01em;margin:0 0 10px}
.apto ul{margin:0;padding:0;list-style:none}
.apto li{border-top:1px solid var(--line);padding:10px 0;font-size:13.5px;color:var(--text2);line-height:1.55}
@media(max-width:700px){.aptos{grid-template-columns:1fr}}

/* --- diferenciales --- */

/* --- quién está detrás --- */
.quien{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:26px 28px;margin-top:34px;max-width:var(--medida);
  display:grid;grid-template-columns:236px 1fr;gap:28px;align-items:start}
/* La foto original es un plano general de 960x1280: la cara ocupa una parte
   chica del cuadro. Por eso no se recorta el archivo — se hace acá, con un
   `scale` anclado en el punto donde está la cara, y el marco recorta el resto.
   Así no se pierde nitidez ni hace falta editar la imagen. */
.quien-foto{margin:0;align-self:start;width:100%;position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:14px;border:1px solid var(--line2);background:var(--card2)}
.quien-foto img{display:block;width:100%;height:100%;object-fit:cover;scale:1.3;transform-origin:43% 32%}
@media(max-width:700px){
  .quien{grid-template-columns:1fr;gap:20px}
  .quien-foto{max-width:200px}
}
.quien-nombre{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.01em;margin:0 0 10px}
.quien p{margin:0 0 12px;font-size:14.5px;color:var(--text2);line-height:1.65}
.quien p strong{color:var(--text);font-weight:600}
.quien p:last-child{margin-bottom:0}
/* enlace a LinkedIn: el logo va monocromo, heredando el color del botón. El
   azul de LinkedIn no está en la paleta, igual que no lo estaba el verde de
   Shopify en el cerebro. */
.quien .acciones{margin-top:22px}
.social{display:inline-flex;align-items:center;gap:9px}
.social svg{width:15px;height:15px;flex:none;fill:currentColor}

/* --- valores: cada valor con su elemento gráfico ---
   Decisión de Nico del 2026-08-30: se usa la MISMA primitiva del cerebro de la
   home (nodos y cables) comportándose distinto en cada valor, en vez de cinco
   ilustraciones sueltas. Así la página de Valores se lee como parte del mismo
   sistema y no como un banco de íconos. Los cinco comportamientos:
     honestidad  → seis nodos encienden, uno queda gris a propósito
     antifragilidad → un nodo falla y vuelve reforzado
     orden       → los nodos se acomodan y recién ahí se conectan
     disciplina  → la señal frena en el muro y no lo pasa
     constancia  → cada pasada deja su marca y las marcas se acumulan  ------- */
.valores{margin:44px 0 0;display:flex;flex-direction:column;gap:18px}
.val-fila{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:30px;align-items:center;
  border:1px solid var(--line);background:var(--card);border-radius:16px;padding:26px 28px}
.val-nombre{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.01em;margin:0 0 10px}
.val-txt p{margin:0;font-size:14.5px;line-height:1.65;color:var(--text2)}
.val-txt p strong{color:var(--text);font-weight:600}
.val-graf{min-width:0}
.val-graf svg{display:block;width:100%;height:auto;overflow:visible}
.val-graf .mn{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.08em;fill:var(--text2)}
.val-graf .mn.tenue{fill:var(--muted)}
.val-graf .mn.enc{fill:var(--lime)}
.val-graf .lk{fill:none;stroke:var(--line);stroke-width:1.4}
.val-graf .nb{fill:var(--bg);stroke:var(--line2);stroke-width:1.5}
.val-graf .np{fill:var(--text2)}
.val-graf .np.apagado{fill:var(--muted)}
.val-graf .muro{stroke:var(--lime);stroke-dasharray:3 3}
/* Estados base = el estado final estático. Las animaciones sólo existen dentro
   de `prefers-reduced-motion: no-preference`, así que quien las tenga apagadas
   ve la pieza terminada y legible, nunca un fotograma vacío. */
.val-graf .on{fill:var(--lime);opacity:1}
.val-graf .halo{fill:rgba(163,230,53,.16);opacity:0}
.v-anti .err{opacity:0}
.v-anti .fuerte{opacity:1}
.v-constancia .marcas-hoy rect{fill:var(--lime);opacity:.85}
.v-constancia .marcas-ayer rect{fill:var(--lime);opacity:.55}
.v-constancia .marcas-antes rect{fill:var(--lime);opacity:.3}
@media (prefers-reduced-motion: no-preference){
  .val-graf .on,.val-graf .halo{animation:valprender 4.4s linear infinite}
  .v-disciplina .on,.v-disciplina .halo{animation-duration:4s}
  .v-constancia .on,.v-constancia .halo{animation-duration:3.6s}
  .v-orden .nodo-g{animation:valacomodar 6s cubic-bezier(.2,.9,.2,1) infinite}
  .v-orden .lk-fade{animation:valconectar 6s ease-in-out infinite}
  .v-anti .dim{animation:valapagar 6s ease-in-out infinite}
  .v-anti .err{animation:valerror 6s ease-in-out infinite}
  .v-anti .fuerte{animation:valreforzar 6s ease-in-out infinite}
  .v-constancia .marcas-hoy rect{animation:valmarca 3.6s linear infinite}
}
@keyframes valprender{0%,100%{opacity:0}7%,19%{opacity:1}}
@keyframes valacomodar{0%,8%{transform:translate(var(--dx),var(--dy))}34%,100%{transform:translate(0,0)}}
@keyframes valconectar{0%,30%{opacity:0}46%,100%{opacity:1}}
@keyframes valapagar{0%,12%{opacity:1}18%,27%{opacity:.14}33%,100%{opacity:1}}
@keyframes valerror{0%,12%{opacity:0}17%,27%{opacity:1}32%,100%{opacity:0}}
@keyframes valreforzar{0%,29%{opacity:0}38%,100%{opacity:1}}
@keyframes valmarca{0%,100%{opacity:0}6%,94%{opacity:.85}}
@media(max-width:820px){
  .val-fila{grid-template-columns:1fr;gap:20px;padding:22px 20px}
  /* el SVG se achica a ~0.68 del original: sin esto las etiquetas mono
     terminan en 6,5px reales y no se leen */
  .val-graf .mn{font-size:13px}
}

/* --- preguntas frecuentes --- */
.faq{margin-top:34px;max-width:var(--medida)}
.faq details{border:1px solid var(--line);background:var(--card);border-radius:16px;margin-bottom:10px}
.faq summary{list-style:none;cursor:pointer;padding:16px 20px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:center;gap:14px;-webkit-user-select:none;user-select:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:'JetBrains Mono',monospace;font-weight:400;font-size:18px;color:var(--text2);flex:none}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:0;padding:0 20px 18px;font-size:14px;color:var(--text2);line-height:1.65}
.faq details p strong{color:var(--text);font-weight:600}

/* --- grilla de herramientas (home) --- */
.grilla-herr{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
.herr-card{display:block;border:1px solid var(--line);background:var(--card);border-radius:16px;padding:18px 20px;text-decoration:none;color:var(--text);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.herr-card:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:0 18px 50px -28px rgba(163,230,53,.22)}
.herr-card.destacada{grid-column:1 / -1}
.herr-num{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text2);margin:0 0 10px}
.herr-icono{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--card2);margin:0 0 12px}
.herr-icono svg{width:19px;height:19px;fill:none;stroke:var(--text2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.herr-card:hover .herr-icono{border-color:var(--line2)}
.herr-card:hover .herr-icono svg{stroke:var(--lime)}
/* prendido de los íconos al llegar con el scroll (CSS scroll-driven, sin JS); columna a columna */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference){
    .grilla-herr .herr-icono{animation:prendercaja linear both;animation-timeline:view(block);animation-range:entry 20% entry 70%}
    .grilla-herr .herr-icono svg{animation:prendertrazo linear both;animation-timeline:view(block);animation-range:entry 20% entry 70%}
    .grilla-herr .herr-card:nth-child(3n) .herr-icono,
    .grilla-herr .herr-card:nth-child(3n) .herr-icono svg{animation-range:entry 40% entry 90%}
    .grilla-herr .herr-card:nth-child(3n+1) .herr-icono,
    .grilla-herr .herr-card:nth-child(3n+1) .herr-icono svg{animation-range:entry 60% cover 10%}
  }
  @media (prefers-reduced-motion: reduce){
    .grilla-herr .herr-icono{border-color:rgba(163,230,53,.5);background:rgba(163,230,53,.07);box-shadow:0 0 16px -4px rgba(163,230,53,.4)}
    .grilla-herr .herr-icono svg{stroke:var(--lime)}
  }
}
@keyframes prendercaja{to{border-color:rgba(163,230,53,.55);background:rgba(163,230,53,.08);box-shadow:0 0 18px -3px rgba(163,230,53,.5)}}
@keyframes prendertrazo{to{stroke:var(--lime)}}
.herr-titulo{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.01em;margin:0 0 7px}
.herr-card > p{margin:0;font-size:13.5px;color:var(--text2);line-height:1.55}
.herr-cta{margin-top:12px !important;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.herr-card:hover .herr-cta{color:var(--lime)}
@media(min-width:980px){.grilla-herr{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.grilla-herr{grid-template-columns:1fr}}

/* --- cerebro-red de agentes (home, sección herramientas) ---
   Vista axial: el cerebro se ve DESDE ARRIBA, con los dos hemisferios y la
   cisura al medio. Proporción anatómica real (484 de ancho por 620 de largo).
   No es un cerebro decorativo: los nodos son las herramientas reales y los
   cables las conexiones que existen. Identidad es el hub porque alimenta a
   todas. Las etiquetas van en los márgenes con línea de llamada: adentro no
   entran sin estirar el cerebro y arruinar la proporción.
   La geometría se declara una vez en <defs> y se reusa con <use> (hemisferio
   espejado, trazo neutro, resplandor y trazo vivo del latido). ------------- */
.cerebro{margin:48px 0 0;padding:0}
.cerebro-svg{display:block;width:100%;max-width:1160px;height:auto;margin:0 auto}
.cerebro-forma,.cerebro-cables,.cerebro-pulsos{pointer-events:none}
.cerebro-silueta{fill:rgba(255,255,255,.015);stroke:rgba(255,255,255,.16);stroke-width:1.5}
.cerebro-pistas use{fill:none;stroke:rgba(255,255,255,.085);stroke-width:1;stroke-linecap:square}

/* --- cables: 12 desde Identidad + 14 entre agentes + 2 externos de Shopify --- */
.cerebro-cables path{fill:none;stroke:var(--line);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cerebro-cables .secundario{stroke-width:1.1;opacity:.6}
/* Shopify no es parte del cerebro: entra desde afuera, con hormigas en marcha */
.cerebro-cables .externo{stroke:var(--muted);stroke-width:1.4;stroke-dasharray:6 8;opacity:.55}
.cerebro-pulsos path{fill:none;stroke:var(--lime);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:8 92;stroke-dashoffset:-100}
.cerebro-pulsos .secundario{stroke-width:1.9;opacity:.6}

/* --- Shopify: sin caja, al aire, afuera del cerebro. Monocromo: el verde de
   Shopify no entra en la paleta, igual que los logos de clientes. --- */
.cerebro-fuente text{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.12em;fill:var(--text)}
.cerebro-fuente .bolsa{fill:var(--text2)}
.cerebro-fuente .ese{fill:var(--bg)}

/* --- nodos --- */
.cerebro-nodo{cursor:pointer}
.cerebro-nodo .hit,.cerebro-nodo .lab .hit{fill:transparent}
/* la llamada une el nodo, adentro del cerebro, con su etiqueta afuera */
.cerebro-nodo .llamada{fill:none;stroke:var(--line2);stroke-width:1;stroke-dasharray:2 4;opacity:.75;transition:stroke .2s ease}
.cerebro-nodo .anillo{fill:var(--bg);stroke:var(--line2);stroke-width:1.5;transition:stroke .2s ease}
.cerebro-nodo .punto{fill:var(--text2);transition:fill .2s ease}
.cerebro-nodo .halo{fill:rgba(163,230,53,.15);opacity:0;transition:opacity .2s ease}
/* el destello va en su propio círculo, nunca animando el fill del punto: una
   animación corriendo pisaría el :hover y mataría el encendido del nodo */
.cerebro-nodo .flash{fill:var(--lime);opacity:0}
.cerebro-nodo text{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.1em;
  fill:var(--text2);transition:fill .2s ease}
.cerebro-nodo .ico path,.cerebro-nodo .ico circle,.cerebro-nodo .ico rect{fill:none;stroke:var(--text2);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}
.cerebro-nodo:hover .anillo,.cerebro-nodo:focus-visible .anillo{stroke:var(--lime)}
.cerebro-nodo:hover .punto,.cerebro-nodo:focus-visible .punto{fill:var(--lime)}
.cerebro-nodo:hover .halo,.cerebro-nodo:focus-visible .halo{opacity:1}
.cerebro-nodo:hover .llamada,.cerebro-nodo:focus-visible .llamada{stroke:var(--lime)}
.cerebro-nodo:hover text,.cerebro-nodo:focus-visible text{fill:var(--lime);font-weight:700}
.cerebro-nodo:hover .ico path,.cerebro-nodo:hover .ico circle,.cerebro-nodo:hover .ico rect,
.cerebro-nodo:focus-visible .ico path,.cerebro-nodo:focus-visible .ico circle,.cerebro-nodo:focus-visible .ico rect{stroke:var(--lime)}
/* Identidad es el hub: siempre encendida */
.cerebro-nodo.es-hub .anillo{stroke:var(--lime)}
.cerebro-nodo.es-hub .punto{fill:var(--lime)}
.cerebro-nodo.es-hub text{fill:var(--lime);font-weight:700}
.cerebro-nodo.es-hub .ico path{stroke:var(--lime)}
.cerebro-nodo.es-hub .halo{fill:rgba(163,230,53,.11);opacity:1}
/* la ventanita es lo que hace evidente que el nodo es clickeable */
.cerebro-nodo .tip{opacity:0;pointer-events:none;transition:opacity .18s ease}
.cerebro-nodo .tip rect{fill:var(--card2);stroke:var(--lime);stroke-width:1.5}
.cerebro-nodo .tip text{font-size:11px;font-weight:700;fill:var(--lime);letter-spacing:.08em}
.cerebro-nodo:hover .tip,.cerebro-nodo:focus-visible .tip{opacity:1;pointer-events:auto}

/* --- chispazos: cada uno al lado de la etiqueta del agente que lo produce --- */
.chispas{pointer-events:none}
.chispa{opacity:0}
.chispa text{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;
  fill:color-mix(in srgb,var(--lime) 72%,#FFFFFF)}
.chispa circle{fill:var(--lime)}

/* --- el latido (decisión de Nico, 2026-08-29): "Ola", seis bandas del frente
   a la nuca que se encienden desfasadas. Va en verde éxito por pedido expreso.
   Dos trazos sobre la misma geometría: uno grueso y muy tenue que hace de
   resplandor y uno fino un poco más vivo. Sin filtros: rinden mucho mejor. --- */
.cerebro-lat{opacity:0}
.cerebro-lat .glow{fill:none;stroke:var(--ok);stroke-width:4;opacity:.06;stroke-linecap:round}
.cerebro-lat .viva{fill:none;stroke:var(--ok);stroke-width:1.1;opacity:.22;stroke-linecap:square}

@media (prefers-reduced-motion: no-preference){
  .cerebro-pulsos path{animation-name:cerebroPulso;animation-timing-function:linear;animation-iteration-count:infinite}
  .cerebro-pulsos .externo{animation-name:cerebroEntra}
  .cerebro-cables .externo{animation:cerebroFlujo 1.1s linear infinite}
  .cerebro-lat{animation:cerebroOla 6s ease-in-out infinite}
  .cerebro-nodo .flash{animation:cerebroFlash 18s linear infinite}
  /* cada nodo destella cuando le llega su pulso */
  .cerebro-nodos > a:nth-child(2) .flash{animation-delay:2.60s}
  .cerebro-nodos > a:nth-child(3) .flash{animation-delay:3.24s}
  .cerebro-nodos > a:nth-child(4) .flash{animation-delay:3.89s}
  .cerebro-nodos > a:nth-child(5) .flash{animation-delay:4.53s}
  .cerebro-nodos > a:nth-child(6) .flash{animation-delay:5.17s}
  .cerebro-nodos > a:nth-child(7) .flash{animation-delay:5.81s}
  .cerebro-nodos > a:nth-child(8) .flash{animation-delay:6.46s}
  .cerebro-nodos > a:nth-child(9) .flash{animation-delay:7.10s}
  .cerebro-nodos > a:nth-child(10) .flash{animation-delay:7.74s}
  .cerebro-nodos > a:nth-child(11) .flash{animation-delay:8.39s}
  .cerebro-nodos > a:nth-child(12) .flash{animation-delay:9.03s}
  .cerebro-nodos > a:nth-child(13) .flash{animation-delay:9.67s}
  /* Identidad recibe de Shopify, que entra sin parar */
  .cerebro-nodos > a:nth-child(1) .flash{animation-duration:2.6s;animation-delay:1.3s}
  /* chispazos: uno cada 3 segundos, siempre en distinto agente */
  .chispa{animation:cerebroChispa 24s linear infinite}
  .chispa:nth-child(1){animation-delay:.5s}
  .chispa:nth-child(2){animation-delay:3.5s}
  .chispa:nth-child(3){animation-delay:6.5s}
  .chispa:nth-child(4){animation-delay:9.5s}
  .chispa:nth-child(5){animation-delay:12.5s}
  .chispa:nth-child(6){animation-delay:15.5s}
  .chispa:nth-child(7){animation-delay:18.5s}
  .chispa:nth-child(8){animation-delay:21.5s}
}
/* estado final estático, sin artefactos: un rescoldo parejo y nada moviéndose */
@media (prefers-reduced-motion: reduce){.cerebro-lat{opacity:.2}}

@keyframes cerebroPulso{0%{stroke-dashoffset:0}15%,100%{stroke-dashoffset:-100}}
@keyframes cerebroEntra{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes cerebroFlujo{to{stroke-dashoffset:-14}}
@keyframes cerebroOla{0%,100%{opacity:0}46%{opacity:1}}
@keyframes cerebroFlash{0%{opacity:0}3%{opacity:.8}11%,100%{opacity:0}}
@keyframes cerebroChispa{
  0%,1%{opacity:0;translate:0 10px}
  3.5%{opacity:1;translate:0 0}
  9%{opacity:1;translate:0 -2px}
  12%,100%{opacity:0;translate:0 -10px}
}
/* En pantallas chicas las etiquetas de los márgenes quedarían ilegibles: se
   ocultan, el cerebro se agranda para que se lea la forma y pasa a ser solo
   visual. La navegación la hacen las tarjetas de abajo, que por eso quedan. */
@media(max-width:760px){
  .cerebro-nodo .lab,.cerebro-nodo .tip,.cerebro-nodo .llamada,.chispas,.cerebro-fuente text{display:none}
  .cerebro-nodo{pointer-events:none}
  .cerebro{margin-top:34px;overflow:hidden}
  .cerebro-svg{width:210%;margin-left:-55%;max-width:none}
}

/* --- ventana de software (marco de las animaciones; no toca los .stage aprobados) --- */
.ventana{margin:34px 0 0;border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden;box-shadow:0 30px 90px -42px rgba(163,230,53,.18),0 18px 50px -30px rgba(0,0,0,.8)}
.ventana-barra{display:flex;align-items:center;gap:14px;margin:0;padding:11px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--card2),var(--card))}
.ventana-puntos{display:flex;gap:6px;flex:none}
.ventana-puntos i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.ventana-titulo{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ventana-led{margin-left:auto;flex:none;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px 1px rgba(163,230,53,.7)}
/* el caso real va adentro del mismo marco de ventana que las animaciones */
.ventana-video{display:block;width:100%;height:auto;background:var(--bg)}
/* Parche del rótulo del video del caso real. El MP4 trae quemado «Marca de moda
   · USA · ROAS diario, agosto»; Nico pidió sacar el país y poner Agosto con
   mayúscula. Como no se puede editar el video desde acá, se tapa esa línea con
   una capa del color exacto de su fondo y se reescribe encima.
   Los dos colores de acá son los ÚNICOS hex del sitio fuera de la paleta, y no
   son una decisión de diseño: están medidos sobre el propio archivo para que el
   parche sea invisible. Las medidas van en % del video (1920x1080) y el cuerpo
   en `cqw`, así todo escala con el ancho.
   **Cuando se regenere el MP4, borrar esto y el bloque .video-caja del HTML.** */
.video-caja{position:relative;container-type:inline-size;line-height:0}
.video-rotulo{position:absolute;left:3.85%;top:11.75%;width:27.4%;height:3.62%;margin:0;
  display:flex;align-items:center;
  background:#0B0D0F;color:#97999D;
  font-family:'Manrope',sans-serif;font-size:1.25cqw;line-height:1;white-space:nowrap}
@media (prefers-reduced-motion: no-preference){.ventana-led:not(.futuro){animation:ventanaled 2.6s ease-in-out infinite}}
@keyframes ventanaled{0%,100%{box-shadow:0 0 10px 1px rgba(163,230,53,.7)}50%{box-shadow:0 0 3px 0 rgba(163,230,53,.25)}}

/* --- aplicar --- */
.aplicar{position:relative;overflow:hidden;padding:92px 0;border-bottom:1px solid var(--line);scroll-margin-top:64px}
.aplicar .contenedor{position:relative;z-index:1}
.aplicar::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 46% 62% at 26% 42%,rgba(163,230,53,.07),transparent 72%) no-repeat,
  radial-gradient(circle at calc(100% - 150px) 86px,rgba(163,230,53,.10) 0 45px,transparent 49px) no-repeat}
/* la «ı» del wordmark, gigante y casi invisible (barra + punto lima de arriba) */
.aplicar::after{content:'';position:absolute;right:106px;top:172px;bottom:-70px;width:88px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.008));pointer-events:none}
.aplicar.compacta{padding:64px 0}
.aplicar.compacta::before{background:radial-gradient(ellipse 60% 70% at 40% 40%,rgba(163,230,53,.05),transparent 72%) no-repeat}
.aplicar.compacta::after{display:none}
@media(max-width:900px){
  .aplicar::after{display:none}
  .aplicar::before{background:radial-gradient(ellipse 70% 60% at 50% 32%,rgba(163,230,53,.06),transparent 72%) no-repeat}
}
.consejo{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);margin:28px 0 0}

.campo{display:block}
.campo-lbl{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text2);margin:0 0 8px}
.campo input{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:var(--text);font-family:'Manrope',sans-serif;font-size:15px;line-height:1.3}

/* --- formulario de aplicación, por pasos ---
   HTML puro: la validación es la nativa del navegador y el paso a paso son
   radios + `:checked`, sin una línea de JavaScript. Los radios de control
   viven FUERA del <form> para que no se envíen; desde ahí gobiernan la vista
   con el combinador `~`. Ver el comentario en aplicar.template.html. */
.asistente{margin:36px 0 0;max-width:var(--medida-campos)}
/* escondidos a la vista pero enfocables: así se puede cambiar de paso con el teclado */
.ctrl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.form-aplicar{display:flex;flex-direction:column;gap:22px}

/* --- progreso: nodos y cables, la misma primitiva del cerebro --- */
.progreso{display:flex;list-style:none;margin:0 0 12px;padding:0}
.pnodo{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:11px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:center;transition:color .3s ease}
/* el cable apagado y, encima, el cable vivo que se llena al avanzar */
.pnodo::before,.pnodo::after{content:'';position:absolute;top:8px;right:50%;left:-50%;height:1.5px}
.pnodo::before{background:var(--line)}
.pnodo::after{background:var(--lime);scale:0 1;transform-origin:left center;transition:scale .45s ease}
.pnodo:first-child::before,.pnodo:first-child::after{display:none}
.pnodo b{position:relative;z-index:1;width:17px;height:17px;border-radius:50%;background:var(--bg);
  border:1.5px solid var(--line2);display:grid;place-items:center;transition:border-color .3s ease,box-shadow .3s ease}
.pnodo b::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--lime);
  scale:0;transition:scale .3s ease}
/* nodos ya recorridos: encendidos, y su cable lleno */
#p1:checked ~ .form-aplicar .pnodo:nth-child(-n+1),
#p2:checked ~ .form-aplicar .pnodo:nth-child(-n+2),
#p3:checked ~ .form-aplicar .pnodo:nth-child(-n+3),
#p4:checked ~ .form-aplicar .pnodo:nth-child(-n+4){color:var(--text)}
#p1:checked ~ .form-aplicar .pnodo:nth-child(-n+1) b,
#p2:checked ~ .form-aplicar .pnodo:nth-child(-n+2) b,
#p3:checked ~ .form-aplicar .pnodo:nth-child(-n+3) b,
#p4:checked ~ .form-aplicar .pnodo:nth-child(-n+4) b{border-color:var(--lime)}
#p1:checked ~ .form-aplicar .pnodo:nth-child(-n+1) b::after,
#p2:checked ~ .form-aplicar .pnodo:nth-child(-n+2) b::after,
#p3:checked ~ .form-aplicar .pnodo:nth-child(-n+3) b::after,
#p4:checked ~ .form-aplicar .pnodo:nth-child(-n+4) b::after{scale:1}
#p2:checked ~ .form-aplicar .pnodo:nth-child(-n+2)::after,
#p3:checked ~ .form-aplicar .pnodo:nth-child(-n+3)::after,
#p4:checked ~ .form-aplicar .pnodo:nth-child(-n+4)::after{scale:1 1}
/* el nodo del paso actual, con resplandor */
#p1:checked ~ .form-aplicar .pnodo:nth-child(1) b,
#p2:checked ~ .form-aplicar .pnodo:nth-child(2) b,
#p3:checked ~ .form-aplicar .pnodo:nth-child(3) b,
#p4:checked ~ .form-aplicar .pnodo:nth-child(4) b{box-shadow:0 0 0 4px rgba(163,230,53,.14)}

/* --- pasos --- */
.fpaso{display:none;border:0;margin:0;padding:0;min-inline-size:0;background:none;animation:pasoentra .32s ease-out}
@media (prefers-reduced-motion: reduce){.fpaso{animation:none}}
@keyframes pasoentra{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
#p1:checked ~ .form-aplicar .fpaso-1,
#p2:checked ~ .form-aplicar .fpaso-2,
#p3:checked ~ .form-aplicar .fpaso-3,
#p4:checked ~ .form-aplicar .fpaso-4{display:block}
.fpaso-t{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.01em;
  color:var(--text);padding:0;margin:0 0 20px}
.fpaso-nav{display:flex;align-items:center;gap:12px;margin-top:24px;flex-wrap:wrap}
.fpaso-nav .boton,.fpaso-nav .boton-sec{cursor:pointer;border:0;font-family:'Manrope',sans-serif}
.fpaso-nav .boton-sec{border:1px solid var(--lime)}
.fpaso-nav .siguiente{margin-left:auto}
/* «Siguiente» apagado mientras el paso tenga algo sin completar: nadie avanza
   con huecos, y por eso al final el formulario siempre está entero */
.fpaso:has(:invalid) .siguiente{pointer-events:none;opacity:.32;box-shadow:none;filter:none}
.form-aplicar:has(:invalid) .enviar{pointer-events:none;opacity:.32;box-shadow:none;filter:none}
.aviso{display:none;margin:18px 0 0;font-size:13.5px;line-height:1.55;color:var(--warn)}
.form-aplicar:has(:invalid) .aviso{display:block}

/* --- campos --- */
.form-grilla{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.form-aplicar .campo-lbl em{font-style:normal;color:var(--muted);font-weight:400;letter-spacing:.08em}
.form-aplicar select,.form-aplicar textarea{width:100%;box-sizing:border-box;background:var(--bg);
  border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:var(--text);
  font-family:'Manrope',sans-serif;font-size:15px;line-height:1.3}
.form-aplicar textarea{resize:vertical;min-height:96px;line-height:1.55}
.form-aplicar select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text2) 50%),linear-gradient(135deg,var(--text2) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.form-aplicar select:invalid{color:var(--muted)}
.form-aplicar input:focus,.form-aplicar select:focus,.form-aplicar textarea:focus{outline:none;border-color:var(--lime)}
/* Rojo SOLO después de que la persona interactuó, nunca al cargar la página.
   Con `:invalid` a secas todos los campos obligatorios arrancan en rojo, y con
   `:not(:placeholder-shown):invalid` pasa lo mismo en los que no tienen
   placeholder (que nunca están «placeholder-shown»). `:user-invalid` es el
   selector correcto; donde no exista, simplemente no se pinta nada. */
.form-aplicar input:user-invalid,
.form-aplicar select:user-invalid,
.form-aplicar textarea:user-invalid{border-color:var(--err)}
/* WhatsApp: código de país angosto + número ancho, en la misma celda */
.campo-tel{display:grid;grid-template-columns:minmax(0,116px) minmax(0,1fr);gap:10px}
.campo-tel input{width:100%}
/* --- desplegable con buscador, con la tipografía de la marca ---
   El panel de un <select> o un <datalist> lo dibuja el navegador y no se puede
   estilar; por eso este lo arma un script (el único del sitio) y lo pintamos
   nosotros. Si el script no corre, el campo conserva su `list` y cae en el
   desplegable nativo, que también busca. */
.form-aplicar input[list],.cbx input{
  background-image:linear-gradient(45deg,transparent 50%,var(--text2) 50%),linear-gradient(135deg,var(--text2) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.form-aplicar input[list]::-webkit-calendar-picker-indicator{opacity:0}
.cbx{position:relative}
.cbx input{width:100%}
.cbx-lista{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:100%;width:max-content;max-width:min(320px,80vw);
  max-height:264px;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:6px;list-style:none;
  background:var(--card);border:1px solid var(--line2);border-radius:12px;
  box-shadow:0 24px 70px -24px rgba(0,0,0,.9)}
.cbx-lista li{padding:9px 12px;border-radius:8px;cursor:pointer;line-height:1.35;
  font-family:'Manrope',sans-serif;font-size:14.5px;color:var(--text2);white-space:nowrap}
.cbx-lista li:hover{background:var(--card2);color:var(--text)}
.cbx-lista li.act{background:var(--card2);color:var(--lime)}
.cbx-lista .cbx-vacio{color:var(--muted);cursor:default;font-style:italic}
.cbx-lista .cbx-vacio:hover{background:none;color:var(--muted)}
/* el de códigos es un dato: va en mono, como el resto de los datos del sitio */
.campo-tel .cbx-lista li{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.04em}
.cbx-lista::-webkit-scrollbar{width:10px}
.cbx-lista::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:3px solid var(--card)}
.campo-grupo{border:0;margin:22px 0 0;padding:0}
.opciones{display:flex;gap:10px;margin-top:10px}
.opcion{position:relative;display:inline-flex;align-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;padding:12px 20px;background:var(--bg);
  font-size:15px;color:var(--text2);transition:border-color .18s ease,color .18s ease}
.opcion input{position:absolute;opacity:0;width:0;height:0}
.opcion span{position:relative;padding-left:24px}
.opcion span::before{content:'';position:absolute;left:0;top:50%;translate:0 -50%;width:15px;height:15px;
  border-radius:50%;border:1.5px solid var(--line2);transition:border-color .18s ease}
.opcion span::after{content:'';position:absolute;left:4px;top:50%;translate:0 -50%;width:7px;height:7px;
  border-radius:50%;background:var(--lime);opacity:0;transition:opacity .18s ease}
.opcion:hover{border-color:var(--line2);color:var(--text)}
.opcion:has(input:checked){border-color:var(--lime);color:var(--text)}
.opcion:has(input:checked) span::before{border-color:var(--lime)}
.opcion:has(input:checked) span::after{opacity:1}
.opcion:has(input:focus-visible){outline:2px solid var(--lime);outline-offset:2px}
.form-nota{margin:16px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
/* trampa para bots: fuera de la vista pero sin display:none, que algunos bots detectan */
.miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Sin soporte de `:has()` no se puede apagar «Siguiente» ni saber si el
   formulario está completo: ahí el paso a paso se cae con elegancia y quedan
   los cuatro pasos a la vista, como un formulario largo común. */
@supports not selector(:has(*)){
  .fpaso{display:block;animation:none}
  .progreso,.fpaso-nav .siguiente,.fpaso-nav .atras{display:none}
  .fpaso + .fpaso{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
}
@media(max-width:640px){
  .form-grilla{grid-template-columns:1fr}
  .fpaso-nav{gap:10px}
  .fpaso-nav .boton,.fpaso-nav .boton-sec{flex:1;text-align:center}
  .fpaso-nav .siguiente{margin-left:0}
  .pnodo span{font-size:8.5px;letter-spacing:.08em}
}
.campo input::placeholder{color:var(--muted)}
.campo input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(163,230,53,.14)}

/* --- pie --- */
.pie-pagina{padding:36px 0 46px}
.pie-linea{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px}
.pie-nota{margin:14px 0 0;font-size:12.5px;color:var(--text2);line-height:1.5}
.pie-legal{margin:10px 0 0;font-size:12.5px;color:var(--text2);line-height:1.5}

/* ============================================================
   Entradas al scroll — CSS scroll-driven, sin JavaScript.
   Regla de oro: el estado "escondido" vive SOLO dentro del
   @supports, así que donde no hay soporte (Firefox, Safari
   viejos) todo se ve completo y estático. Con reduced-motion
   también. El movimiento usa `translate`/`scale` (propiedades
   sueltas) y no `transform`, para no pisar los hover de las
   tarjetas, que sí usan transform.
   ============================================================ */
@keyframes aparecer{from{opacity:0;translate:0 42px}to{opacity:1;translate:0 0}}
@keyframes aparecerventana{from{opacity:0;translate:0 26px;scale:.99}to{opacity:1;translate:0 0;scale:1}}
/* bloques de texto: fade y subida (la cortina con clip-path se probó el
   2026-08-28 y a Nico no le gustó; no reintentarla) */
@keyframes aparecerbloque{from{opacity:0;translate:0 60px}to{opacity:1;translate:0 0}}
@keyframes aparecertarjeta{from{opacity:0;translate:0 92px}to{opacity:1;translate:0 0}}
/* destello lima en el borde superior de la tarjeta cuando llega, y se apaga.
   Va en un ::after y no en el borde de la tarjeta, porque una animación con
   fill pisaría el border-color del :hover y rompería el hover. */
@keyframes destellotarjeta{0%{opacity:0}18%{opacity:.95}100%{opacity:0}}
@keyframes barrerdivisor{from{background-size:0 10px,0 1px,100% 1px}to{background-size:380px 10px,230px 1px,100% 1px}}
@keyframes progresolectura{to{scale:1 1}}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* 1 · encabezados y bloques sueltos: entran en el orden natural en que aparecen */
    .sec > .contenedor > .eyebrow,
    .sec > .contenedor > .sec-titulo,
    .sec > .contenedor > .titulo-pagina,
    .sec > .contenedor > .texto,
    .sec > .contenedor > .frase-clave,
    .sec > .contenedor > .acciones,
    .aplicar > .contenedor > .eyebrow,
    .aplicar > .contenedor > .sec-titulo,
    .aplicar > .contenedor > .texto,
    .aplicar > .contenedor > .acciones,
    .aplicar > .contenedor > .consejo,
    .pieza > .pieza-titulo,
    .pieza > .texto,
    .nunca,
    .quien,
    .val-fila,
    .cerebro{
      animation:aparecerbloque ease-out both;
      animation-timeline:view(block);
      /* El rango va SIEMPRE en porcentaje del `cover`, nunca en px (en px el progreso
         se rompe en páginas que no scrollean y el elemento queda congelado a media
         opacidad para siempre — probado en valores.html).
         El número importa mucho: `cover` va de 0% (el elemento asoma por abajo) a
         100% (termina de salir por arriba), así que ~45% es cuando llega al medio de
         la pantalla. Con 18% la aparición terminaba pegada al borde inferior, donde
         nadie mira, y el efecto no se percibía. */
      animation-range:cover 0% cover 40%;
    }
    /* 2 · grillas: las piezas suben escalonadas, columna por columna */
    :is(.stats,.dolores,.pasos,.aptos,.grilla-herr,.modos,.venir,.faq) > *{
      position:relative;
      animation:aparecertarjeta ease-out both;
      animation-timeline:view(block);
      animation-range:cover 0% cover 38%;
    }
    /* destello lima en el borde de arriba al llegar cada tarjeta */
    :is(.stats,.dolores,.pasos,.aptos,.grilla-herr,.modos,.venir,.faq) > *::after{
      content:'';position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;pointer-events:none;
      background:linear-gradient(90deg,transparent,var(--lime),transparent);
      opacity:0;
      animation:destellotarjeta ease-out both;
      animation-timeline:view(block);
      animation-range:cover 0% cover 38%;
    }
    :is(.stats,.dolores,.pasos,.aptos,.grilla-herr,.modos,.venir,.faq) > :nth-child(3n+2),
    :is(.stats,.dolores,.pasos,.aptos,.grilla-herr,.modos,.venir,.faq) > :nth-child(3n+2)::after{animation-range:cover 6% cover 44%}
    :is(.stats,.dolores,.pasos,.aptos,.grilla-herr,.modos,.venir,.faq) > :nth-child(3n),
    :is(.stats,.dolores,.pasos,.aptos,.grilla-herr,.modos,.venir,.faq) > :nth-child(3n)::after{animation-range:cover 12% cover 50%}
    /* el FAQ es lo último antes del cierre: rango más corto para que complete
       incluso en pantallas muy altas (a 1800px de alto, 52% no llegaba) */
    .faq > *,.faq > *::after{animation-range:cover 0% cover 24%}
    .faq > :nth-child(3n+2),.faq > :nth-child(3n+2)::after{animation-range:cover 4% cover 28%}
    .faq > :nth-child(3n),.faq > :nth-child(3n)::after{animation-range:cover 8% cover 32%}
    /* La última sección de cada página tiene poco scroll por debajo: rango corto,
       que termina sí o sí (`entry 100%` = cuando el elemento entró entero). */
    .aplicar > .contenedor > .eyebrow,
    .aplicar > .contenedor > .sec-titulo,
    .aplicar > .contenedor > .texto,
    .aplicar > .contenedor > .acciones,
    .aplicar > .contenedor > .consejo{animation-range:entry 0% entry 100%}
    /* extra · las ventanas de software "arrancan" cuando entran */
    .ventana{
      animation:aparecerventana linear both;
      animation-timeline:view(block);
      animation-range:cover 0% cover 34%;
    }
    /* extra · el divisor barre su segmento lima al llegar la sección.
       Rango corto y temprano a propósito: el divisor está arriba del contenido
       de la sección que sigue, así que barre primero y después llega el
       contenido. El cambio de sección se lee como una secuencia, no como un
       continuo. */
    .sec::after{
      animation:barrerdivisor ease-out both;
      animation-timeline:view(block);
      animation-range:cover 0% cover 22%;
    }
  }
}

/* 3 · barra de progreso de lectura en el borde del header.
   Va sin guarda de reduced-motion a propósito: es un indicador de posición
   —como la barra de scroll—, se mueve solo mientras el usuario scrollea. */
@supports (animation-timeline: scroll()){
  .cabecera::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
    background:linear-gradient(90deg,color-mix(in srgb,var(--lime) 45%,transparent),var(--lime));
    transform-origin:0 50%;scale:0 1;
    animation:progresolectura linear both;
    animation-timeline:scroll(root block);
  }
}

/* ============================================================
   Meta Ads Agent — animaciones nuevas b1 a b4.
   OJO: NO son parte de las 15 aprobadas de la parte 2. Se
   escribieron el 2026-08-30 para las cuatro secciones que no
   tenían animación: la ventana de la decisión, los candados,
   los tres modos y el freno de emergencia. Falta que Nico las
   apruebe formalmente, igual que el cerebro y los valores.
   Mismas reglas de la casa: el id hace de prefijo, los keyframes
   llevan sufijo, y el estado BASE es igual al estado FINAL, así
   con prefers-reduced-motion alcanza con apagar las animaciones
   y el cuadro queda quieto y legible. Los delays van con
   `backwards` para que no se vea el estado final antes de que
   la animación arranque.
   ============================================================ */
.escena{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px}
.escena-tag{display:inline-block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--warn);border:1px solid var(--warn);padding:3px 7px;margin:0 0 18px}
.escena-nota{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}
.escena-nota b{color:var(--text);font-weight:600}
/* La escena en SVG se escala con el ancho, así que sin tope el texto de 9px
   terminaba en 15px y se leía como otra tipografía. Con el tope queda cerca
   del tamaño natural, como en las animaciones aprobadas, que son HTML. */
.escena svg{display:block;width:100%;max-width:780px;height:auto;margin:0 auto}
.escena text{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;fill:var(--text2)}
@media(max-width:640px){.escena{margin:12px;padding:14px}}
/* En pantallas chicas el SVG se achicaría hasta dejar su texto en 5px. Antes
   que eso, la escena scrollea sola adentro de su tarjeta y el dibujo conserva
   un ancho mínimo legible. El scroll es interno: la página nunca desborda. */
@media(max-width:700px){
  .escena.ancha{overflow-x:auto}
  .escena.ancha svg{min-width:560px}
}

/* --- b1 · cada decisión se mide sola (ventana relativa) --- */
#b1 .eje{stroke:var(--line);stroke-width:1}
#b1 .lin{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
#b1 .previo{stroke:var(--text2);opacity:.16;animation:b1apaga 13s ease-in-out infinite}
#b1 .post{stroke:var(--lime)}
#b1 .marca{stroke:var(--lime);stroke-width:1.5;stroke-dasharray:4 5}
#b1 .punto{fill:var(--lime)}
#b1 .cor{fill:none;stroke:var(--line2);stroke-width:1}
#b1 .cor.viva{stroke:var(--lime)}
#b1 .rot-viva{fill:var(--lime)}
#b1 .g-marca{animation:b1entra 13s ease-out infinite}
#b1 .g-rel{animation:b1entra2 13s ease-out infinite}
@keyframes b1apaga{0%,20%{opacity:1}40%,100%{opacity:.16}}
@keyframes b1entra{0%,15%{opacity:0}28%,100%{opacity:1}}
@keyframes b1entra2{0%,26%{opacity:0}40%,100%{opacity:1}}

/* --- b2 · los candados --- */
#b2 .fila{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#b2 .cand{color:var(--lime);border:1px solid var(--line);border-radius:12px;background:var(--card);padding:16px 10px 14px;text-align:center;animation:b2luz 13s ease-out infinite backwards;animation-delay:var(--d)}
#b2 .cand svg{width:32px;margin:0 auto 12px;overflow:visible;animation:b2vibra 13s linear infinite backwards;animation-delay:var(--d)}
#b2 .arco{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;transform-box:fill-box;transform-origin:100% 100%;rotate:-36deg;animation:b2abre 13s cubic-bezier(.6,0,.2,1) infinite backwards;animation-delay:var(--d)}
#b2 .cuerpo{fill:none;stroke:currentColor;stroke-width:1.5}
#b2 .ojo{fill:currentColor}
#b2 .ojo-t{stroke:currentColor;stroke-width:1.4;stroke-linecap:round;fill:none}
#b2 .trabado .arco{rotate:0deg;animation:none}
#b2 .rot{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.09em;line-height:1.45;color:var(--text2)}
#b2 .est{display:block;margin-top:9px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.09em;color:currentColor}
#b2 .veredicto{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:16px;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;animation:b2ver 13s ease-out infinite backwards}
#b2 .veredicto b{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.11em;color:var(--text);font-weight:700}
#b2 .veredicto span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.09em;color:var(--text2)}
@keyframes b2abre{0%,5%{rotate:0deg}15%,92%{rotate:-36deg}98%,100%{rotate:0deg}}
@keyframes b2luz{0%,5%{color:var(--line2)}13%,92%{color:var(--lime)}98%,100%{color:var(--line2)}}
@keyframes b2vibra{0%,7%{translate:0 0}8%{translate:-1.6px 0}9%{translate:1.6px 0}10%{translate:-1.2px 0}11%{translate:1.2px 0}12%{translate:-.7px 0}13%,100%{translate:0 0}}
@keyframes b2ver{0%,36%{opacity:0;translate:0 6px}45%,92%{opacity:1;translate:0 0}98%,100%{opacity:0;translate:0 6px}}
@media(max-width:620px){#b2 .fila{grid-template-columns:1fr 1fr}}

/* --- b3 · los tres modos --- */
#b3 .carril{display:grid;grid-template-columns:126px 1fr 116px;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}
/* Los hitos van sueltos y no como una fila más de la grilla: con la grilla,
   las dos celdas vacías estiraban la fila a 44px de alto sin razón. Los
   márgenes replican las columnas (126+14 a la izquierda, 116+14 a la derecha). */
#b3 .marcas{position:relative;height:14px;margin:0 130px 10px 140px}
#b3 .marcas i{position:absolute;top:0;font-family:'JetBrains Mono',monospace;font-style:normal;font-size:9px;letter-spacing:.1em;color:var(--text2);white-space:nowrap}
#b3 .m1{left:0}
#b3 .m2{left:50%;translate:-50% 0}
#b3 .m3{right:0}
#b3 .nom{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--text)}
#b3 .via{position:relative;height:12px}
#b3 .via::before{content:'';position:absolute;left:0;right:0;top:5px;height:2px;border-radius:2px;background:var(--line)}
#b3 .via i{position:absolute;left:0;top:5px;height:2px;border-radius:2px;background:var(--lime);width:var(--w);animation:b3carga 12s cubic-bezier(.5,0,.2,1) infinite backwards;animation-delay:var(--d)}
#b3 .via b{position:absolute;top:1px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line2);translate:-50% 0}
#b3 .via b.on{border-color:var(--lime)}
#b3 .res{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--lime);text-align:right;animation:b3res 12s ease-out infinite backwards;animation-delay:var(--d)}
#b3 .off .nom,#b3 .off .res{color:var(--muted)}
#b3 .off .res{animation:none}
@keyframes b3carga{0%,10%{width:0}42%,90%{width:var(--w)}97%,100%{width:0}}
@keyframes b3res{0%,34%{opacity:0}45%,90%{opacity:1}97%,100%{opacity:0}}
@media(max-width:560px){#b3 .carril{grid-template-columns:1fr;gap:8px}#b3 .res{text-align:left}#b3 .marcas{display:none}}

/* --- b4 · el freno de emergencia --- */
#b4 .caja{fill:none;stroke:var(--line);stroke-width:1}
#b4 .bus{stroke:var(--line2);stroke-width:1;fill:none}
#b4 .mot{color:var(--text2);animation:b4mot 54s linear infinite backwards;animation-delay:calc(var(--i) * 9s)}
#b4 .mot text{fill:currentColor}
#b4 .mot circle{fill:currentColor}
#b4 .cable{fill:none;stroke:var(--line2);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
#b4 .chispa{fill:none;stroke:var(--err);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18 400;stroke-dashoffset:-193;opacity:0;animation:b4chispa 9s linear infinite}
#b4 .base{fill:var(--card);stroke:var(--line2);stroke-width:1}
#b4 .palanca{color:var(--err);animation:b4rojo 9s ease-in-out infinite}
#b4 .lev{rotate:52deg;transform-box:view-box;transform-origin:478px 206px;animation:b4palanca 9s cubic-bezier(.7,0,.2,1) infinite}
#b4 .brazo{stroke:currentColor;stroke-width:5;stroke-linecap:round;fill:none}
#b4 .puno{fill:currentColor}
#b4 .cartel{fill:var(--err);font-size:11px;font-weight:700;letter-spacing:.14em;animation:b4cartel 9s ease-out infinite}
#b4 .titulito{fill:var(--muted)}
@keyframes b4palanca{0%,20%{rotate:0deg}34%,92%{rotate:52deg}98%,100%{rotate:0deg}}
@keyframes b4rojo{0%,22%{color:var(--text2)}31%,92%{color:var(--err)}98%,100%{color:var(--text2)}}
@keyframes b4cartel{0%,30%{opacity:0}39%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes b4chispa{0%,8%{stroke-dashoffset:0;opacity:0}11%{opacity:1}26%{stroke-dashoffset:-193;opacity:1}30%,100%{stroke-dashoffset:-193;opacity:0}}
@keyframes b4mot{0%,3.6%{color:var(--text2)}5.2%,15.2%{color:var(--err)}16.4%,100%{color:var(--text2)}}

/* --- b5 · anuncios ganadores (Live Ads) ---
   El podio de premiación: los tres suben desde el piso, el primero se enciende
   en lima y recién ahí se lee el ángulo y salen las propuestas. Nada de estas
   reglas declara el estado escondido: el estado base ES el podio armado, y las
   que lo esconden son solo las de 0% de cada keyframe. */
/* la línea de piso es lo que termina de leerse como podio: sin ella los tres
   pedestales quedan flotando */
#b5 .fila{display:flex;align-items:flex-end;justify-content:center;gap:18px;max-width:640px;margin:0 auto;border-bottom:1px solid var(--line2)}
#b5 .col{position:relative;display:flex;flex-direction:column;align-items:center;flex:1 1 0;max-width:190px;min-width:0}
#b5 .p1{order:2}#b5 .p2{order:1}#b5 .p3{order:3}
#b5 .ad{width:78px;max-width:100%;height:100px;border:1px solid var(--line2);border-radius:7px;background:var(--card2);padding:6px;display:flex;flex-direction:column;gap:4px;
  animation:b5ad 14s ease-out infinite backwards;animation-delay:var(--d)}
#b5 .ad .img{flex:1;border-radius:4px;background:repeating-linear-gradient(135deg,var(--bg) 0 6px,rgba(255,255,255,.05) 6px 12px)}
#b5 .ad .l{height:3px;border-radius:2px;background:var(--line2)}
#b5 .ad .l.c{width:62%}
#b5 .p1 .ad{border-color:var(--lime)}
#b5 .p1 .ad .l{background:color-mix(in srgb,var(--lime) 55%,transparent)}
#b5 .nom{margin:9px 0 8px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;color:var(--text2);text-align:center;line-height:1.4;
  animation:b5nom 14s ease-out infinite backwards;animation-delay:var(--d)}
#b5 .ped{width:100%;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:var(--card);
  transform-origin:bottom;animation:b5sube 14s cubic-bezier(.2,.85,.25,1) infinite backwards;animation-delay:var(--d)}
#b5 .num{position:absolute;left:0;right:0;text-align:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:20px;color:var(--muted);
  animation:b5num 14s ease-out infinite backwards;animation-delay:var(--d)}
#b5 .p1 .ped{height:140px;border-color:var(--lime);background:linear-gradient(180deg,rgba(163,230,53,.1),rgba(163,230,53,0) 68%),var(--card)}
#b5 .p2 .ped{height:96px}
#b5 .p3 .ped{height:66px}
#b5 .p1 .num{bottom:57px;color:var(--lime)}
#b5 .p2 .num{bottom:35px}
#b5 .p3 .num{bottom:20px}
#b5 .lee{max-width:400px;margin:20px auto 0;text-align:center;border:1px solid var(--lime);border-radius:9px;padding:9px 14px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--lime);
  animation:b5lee 14s ease-out infinite backwards}
#b5 .sug{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:12px}
#b5 .sug span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;color:var(--text2);border:1px solid var(--line);border-radius:7px;padding:7px 10px;
  animation:b5sug 14s ease-out infinite backwards;animation-delay:var(--d)}
@keyframes b5sube{0%,4%{scale:1 0}16%,92%{scale:1 1}98%,100%{scale:1 0}}
@keyframes b5num{0%,10%{opacity:0}18%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes b5nom{0%,14%{opacity:0}22%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes b5ad{0%,14%{opacity:0;translate:0 12px}22%,92%{opacity:1;translate:0 0}98%,100%{opacity:0;translate:0 12px}}
@keyframes b5lee{0%,32%{opacity:0;translate:0 8px}40%,92%{opacity:1;translate:0 0}98%,100%{opacity:0;translate:0 8px}}
@keyframes b5sug{0%,46%{opacity:0;translate:0 6px}54%,92%{opacity:1;translate:0 0}98%,100%{opacity:0;translate:0 6px}}
@media(max-width:560px){
  #b5 .fila{gap:9px}
  #b5 .ad{width:58px;height:74px}
  #b5 .nom{font-size:8px}
  #b5 .num{font-size:16px}
  #b5 .p1 .ped{height:100px}#b5 .p2 .ped{height:70px}#b5 .p3 .ped{height:48px}
  #b5 .p1 .num{bottom:40px}#b5 .p2 .num{bottom:26px}#b5 .p3 .num{bottom:15px}
  #b5 .sug{flex-direction:column}
}

/* --- b6 · las métricas del negocio (Dashboard) ---
   Los números de las cuatro fichas cierran entre sí y con los de a1: 16.800 de
   facturación sobre 5.400 de inversión da el MER 3,1; 142 clientes nuevos por
   USD 38 dan esos mismos 5.400; y 142 por el ticket de USD 82 dan los 11.600
   de ingresos nuevos, que son el 69 % de la facturación. No son cifras sueltas. */
/* Las fichas no se animan en bucle a propósito: son datos, no una escena. Con
   la entrada ciclada las cifras aparecían y desaparecían cada 15s, que en un
   panel de métricas se lee como un error. Lo único que se mueve son las barras. */
#b6 .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#b6 .kpi{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px 15px}
#b6 .kpi .k{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.11em;color:var(--text2)}
#b6 .kpi .delta{font-family:'JetBrains Mono',monospace;font-size:9px;border:1px solid var(--line);border-radius:5px;padding:2px 5px;white-space:nowrap;color:var(--ok)}
#b6 .kpi .v{display:block;margin:10px 0 6px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:25px;letter-spacing:-.02em;line-height:1}
#b6 .kpi.lider .v{color:var(--lime)}
#b6 .kpi .d{display:block;font-size:11.5px;color:var(--text2);line-height:1.45}
#b6 .top{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px 15px}
#b6 .top-t{margin:0 0 12px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.11em;color:var(--text2)}
#b6 .top ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
#b6 .top li{display:grid;grid-template-columns:150px 1fr 58px;gap:12px;align-items:center;font-size:12.5px;color:var(--text2)}
#b6 .top .barra{position:relative;height:7px;border-radius:4px;background:var(--bg);overflow:hidden}
#b6 .top .barra i{position:absolute;inset:0 auto 0 0;border-radius:4px;background:var(--line2);width:var(--w);
  animation:b6barra 15s cubic-bezier(.4,0,.2,1) infinite backwards;animation-delay:var(--d)}
#b6 .top li:first-child .barra i{background:var(--lime)}
#b6 .top .u{text-align:right;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text)}
@keyframes b6barra{0%,14%{width:0}30%,94%{width:var(--w)}98%,100%{width:0}}
@media(max-width:820px){#b6 .kpis{grid-template-columns:1fr 1fr}}
@media(max-width:520px){#b6 .kpis{grid-template-columns:1fr}#b6 .top li{grid-template-columns:1fr 46px;gap:8px}#b6 .top .barra{grid-column:1/-1}}

/* --- b7 · el mapa de calor (CRO Agent) ---
   El calor va en lima y no en la escala roja/amarilla de un mapa de calor
   clásico: esa escala rompería la paleta, y los semánticos están reservados
   para estados. Acá lo más caliente es lo más opaco. */
#b7 .marco{fill:var(--card);stroke:var(--line2);stroke-width:1}
#b7 .linea{fill:var(--line2)}
#b7 .linea.suave{fill:var(--line)}
#b7 .div{stroke:var(--line);stroke-width:1}
#b7 .foto{fill:url(#b7trama);stroke:var(--line);stroke-width:1}
#b7 .precio{fill:var(--text);font-family:'JetBrains Mono',monospace;font-size:14px}
#b7 .cta{fill:none;stroke:var(--lime);stroke-width:1}
#b7 .cta-t{fill:var(--lime);font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em}
#b7 .mancha{fill:url(#b7calor);transform-box:fill-box;transform-origin:50% 50%;
  animation:b7mancha 13s cubic-bezier(.3,.9,.4,1) infinite backwards;animation-delay:var(--d)}
#b7 .hall{max-width:460px;margin:16px auto 0;text-align:center;border:1px solid var(--lime);border-radius:9px;padding:9px 13px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--lime);
  animation:b7hall 13s ease-out infinite backwards}
@keyframes b7mancha{0%,3%{scale:0;opacity:0}18%,90%{scale:1;opacity:1}97%,100%{scale:0;opacity:0}}
@keyframes b7hall{0%,58%{opacity:0;translate:0 6px}68%,90%{opacity:1;translate:0 0}97%,100%{opacity:0;translate:0 6px}}

/* --- b8 · la mezcla (Creación de anuncios) ---
   Las cuatro fuentes se encienden, mandan su pulso al núcleo y de ahí salen
   las tres variantes, que quedan esperando la aprobación. El sello va en
   `--warn` porque «esperando» es un estado, que es justo para lo que el manual
   reserva los semánticos. */
#b8 .caja{fill:var(--card);stroke:currentColor;stroke-width:1}
#b8 .fuente{color:var(--line2);animation:b8fuente 14s ease-out infinite backwards;animation-delay:var(--d)}
#b8 .fuente text{fill:currentColor}
#b8 .cable{fill:none;stroke:var(--line2);stroke-width:1;stroke-dasharray:3 4}
#b8 .pulso{fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-dasharray:14 400;stroke-dashoffset:-320;opacity:0;
  animation:b8pulso 14s linear infinite backwards;animation-delay:var(--d)}
#b8 .nucleo{fill:var(--card);stroke:var(--lime);stroke-width:1.5}
#b8 .halo{fill:rgba(163,230,53,.12);animation:b8halo 14s ease-out infinite backwards}
#b8 .nucleo-t{fill:var(--lime);font-size:8px}
#b8 .var{animation:b8var 14s ease-out infinite backwards;animation-delay:var(--d)}
#b8 .var .m{fill:var(--card2);stroke:var(--lime);stroke-width:1}
#b8 .var .l{fill:color-mix(in srgb,var(--lime) 50%,transparent)}
#b8 .var text{fill:var(--lime);font-size:8px}
#b8 .sello{animation:b8sello 14s ease-out infinite backwards}
#b8 .sello rect{fill:none;stroke:var(--warn);stroke-width:1}
#b8 .sello text{fill:var(--warn);font-size:8.5px}
@keyframes b8fuente{0%,2%{color:var(--line2)}8%,92%{color:var(--lime)}97%,100%{color:var(--line2)}}
@keyframes b8pulso{0%,4%{stroke-dashoffset:0;opacity:0}6%{opacity:1}20%{stroke-dashoffset:-320;opacity:1}23%,100%{stroke-dashoffset:-320;opacity:0}}
@keyframes b8halo{0%,26%{opacity:0}32%{opacity:1}44%,92%{opacity:.5}97%,100%{opacity:0}}
@keyframes b8var{0%,42%{opacity:0;translate:-10px 0}52%,92%{opacity:1;translate:0 0}97%,100%{opacity:0;translate:-10px 0}}
@keyframes b8sello{0%,66%{opacity:0}74%,92%{opacity:1}97%,100%{opacity:0}}

/* Con reduced-motion se apaga todo y queda el estado final, que es el que ya
   está escrito en las reglas de arriba. Lo único que hay que forzar es cuál de
   los seis motivos queda encendido en el freno. */
@media (prefers-reduced-motion: reduce){
  #b1 *,#b2 *,#b3 *,#b4 *,#b5 *,#b6 *,#b7 *,#b8 *{animation:none !important}
  #b4 .mot.primero{color:var(--err)}
  #b8 .fuente{color:var(--lime)}
}

/* ============================================================
   Parte 2 — Las 15 animaciones aprobadas, copiadas tal cual.
   No editar: cada bloque está aislado por su id (#a1…#a15)
   y sus keyframes llevan sufijo numérico.
   ============================================================ */
/* ===== 1. Dashboard — El agente lee el panel adelante tuyo ===== */
#a1 *{box-sizing:border-box}#a1 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a1 .item{border:1px solid var(--line);background:var(--card)}#a1 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a1 .item-head .tool{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a1 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a1 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a1 .meta div{border-top:1px solid var(--line);padding-top:10px}#a1 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a1 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a1 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px}#a1 .tagex{display:inline-block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--warn);border:1px solid var(--warn);padding:3px 7px;margin-bottom:18px}#a1 .note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a1 .note b{color:var(--text);font-weight:600}#a1 .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}#a1 .kpi{border:1px solid var(--line);padding:14px;animation:flash_1 21s infinite;animation-delay:var(--d)}#a1 .kpi .top{display:flex;justify-content:space-between;align-items:center;gap:8px}#a1 .kpi .k{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9px;color:var(--text2)}#a1 .delta{font-family:'JetBrains Mono',monospace;font-size:9px;border:1px solid var(--line);padding:2px 5px;white-space:nowrap}#a1 .delta.up{color:var(--ok)}#a1 .delta.down{color:var(--err)}#a1 .kpi .v{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:23px;margin:10px 0 4px;letter-spacing:-.01em}#a1 .kpi .pv{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text2);margin-bottom:10px}#a1 .kpi svg{width:100%;height:auto;display:block;overflow:visible}#a1 .prev{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-dasharray:5 6;opacity:0;animation:fade_1 21s infinite;animation-delay:var(--d)}#a1 .now{fill:none;stroke:var(--text2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;animation:draw_1 21s infinite,tint_1 21s infinite;animation-delay:var(--d)}#a1 .head{fill:var(--lime);offset-distance:0%;offset-rotate:0deg;opacity:0;animation:ride_1 21s infinite;animation-delay:var(--d)}#a1 .kpi[data-i="0"] .head{offset-path:path("M18.0 70.7 C25.3 69.3 47.3 63.2 62.0 62.4 C76.7 61.7 91.3 68.2 106.0 66.1 C120.7 64.0 135.3 51.7 150.0 49.9 C164.7 48.0 179.3 57.8 194.0 55.1 C208.7 52.5 223.3 38.3 238.0 34.0 C252.7 29.7 274.7 30.1 282.0 29.3")}#a1 .kpi[data-i="1"] .head{offset-path:path("M18.0 60.2 C25.3 58.5 47.3 50.8 62.0 49.9 C76.7 49.1 91.3 57.6 106.0 55.1 C120.7 52.5 135.3 36.2 150.0 34.5 C164.7 32.8 179.3 45.6 194.0 44.8 C208.7 43.9 223.3 30.2 238.0 29.3 C252.7 28.5 274.7 37.9 282.0 39.6")}#a1 .kpi[data-i="2"] .head{offset-path:path("M18.0 38.6 C25.3 41.7 47.3 58.7 62.0 57.1 C76.7 55.6 91.3 27.8 106.0 29.3 C120.7 30.9 135.3 63.3 150.0 66.4 C164.7 69.5 179.3 52.5 194.0 47.9 C208.7 43.2 223.3 38.6 238.0 38.6 C252.7 38.6 274.7 46.3 282.0 47.9")}#a1 .kpi[data-i="3"] .head{offset-path:path("M18.0 65.4 C25.3 63.7 47.3 55.9 62.0 55.1 C76.7 54.2 91.3 62.8 106.0 60.2 C120.7 57.6 135.3 41.3 150.0 39.6 C164.7 37.9 179.3 50.8 194.0 49.9 C208.7 49.1 223.3 37.9 238.0 34.5 C252.7 31.1 274.7 30.2 282.0 29.3")}#a1 .kpi[data-i="4"] .head{offset-path:path("M18.0 69.2 C25.3 67.7 47.3 61.0 62.0 60.2 C76.7 59.4 91.3 66.0 106.0 64.3 C120.7 62.5 135.3 51.6 150.0 49.7 C164.7 47.8 179.3 54.8 194.0 52.9 C208.7 51.0 223.3 42.2 238.0 38.3 C252.7 34.3 274.7 30.8 282.0 29.3")}#a1 .kpi[data-i="5"] .head{offset-path:path("M18.0 62.4 C25.3 61.3 47.3 58.0 62.0 55.8 C76.7 53.6 91.3 51.4 106.0 49.2 C120.7 47.0 135.3 44.8 150.0 42.6 C164.7 40.4 179.3 36.0 194.0 36.0 C208.7 36.0 223.3 43.7 238.0 42.6 C252.7 41.5 274.7 31.5 282.0 29.3")}#a1 .leg{display:flex;gap:14px;margin-top:10px}#a1 .leg span{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8px;color:var(--text2)}#a1 .leg i{width:14px;display:block}#a1 .leg .ln{border-top:2px solid var(--text2)}#a1 .leg .lp{border-top:1px dashed var(--muted)}#a1 .read{position:relative;margin-top:16px;border:1px solid var(--line);padding:15px;min-height:92px}#a1 .read > div{position:absolute;inset:15px;opacity:0;animation:read_1 21s infinite;animation-delay:var(--d)}#a1 .read .t{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;color:var(--lime);margin-bottom:8px}#a1 .read .x{font-size:13.5px;line-height:1.5;color:var(--text2)}#a1 .read .x b{color:var(--text);font-weight:600}@keyframes flash_1{0%{border-color:var(--line)}1%,16%{border-color:var(--lime)}18%,100%{border-color:var(--line)}}@keyframes fade_1{0%,1%{opacity:0}6%,96%{opacity:1}99%,100%{opacity:0}}@keyframes draw_1{0%,1%{stroke-dashoffset:100}13%,96%{stroke-dashoffset:0}99%,100%{stroke-dashoffset:100}}@keyframes tint_1{0%,1%{stroke:var(--lime)}16%{stroke:var(--lime)}20%,100%{stroke:var(--text2)}}@keyframes ride_1{0%,1%{offset-distance:0%;opacity:0}2%{opacity:1}13%{offset-distance:100%;opacity:1}16%{offset-distance:100%;opacity:0}17%,100%{offset-distance:100%;opacity:0}}@keyframes read_1{0%{opacity:0}1%,16%{opacity:1}18%,100%{opacity:0}}@media(max-width:900px){#a1 .grid{grid-template-columns:1fr 1fr}}@media(max-width:640px){#a1 .meta{grid-template-columns:1fr}#a1 .stage{padding:14px}#a1 .grid{grid-template-columns:1fr}#a1 .read{min-height:150px}}@media (prefers-reduced-motion: reduce){#a1 *{animation:none !important}#a1 .prev{opacity:1}#a1 .now{stroke-dashoffset:0}#a1 .head{opacity:0}#a1 .read > div{opacity:0}#a1 .read > div:first-of-type{opacity:1}}/* ===== 2. Social Listening — Cada mensaje cae donde corresponde ===== */
#a2 *{box-sizing:border-box}#a2 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a2 .item{border:1px solid var(--line);background:var(--card);margin-bottom:28px}#a2 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a2 .item-head .tool{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a2 .item-head .estado{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--ok);border:1px solid var(--ok);padding:4px 8px}#a2 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a2 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a2 .meta div{border-top:1px solid var(--line);padding-top:10px}#a2 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a2 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a2 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:20px}#a2 .tagex{display:inline-block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--warn);border:1px solid var(--warn);padding:3px 7px;margin-bottom:14px}#a2 .note{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a2 .note b{color:var(--text);font-weight:600}#a2 .lbl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2)}#a2 svg{width:100%;height:auto;display:block;overflow:visible}@media(max-width:640px){#a2 .meta{grid-template-columns:1fr}#a2 .stage{padding:14px}}#a2 /* ===== GASTO DIARIO (cerrada · nivel 2) ===== */
.rail-top{stroke:var(--lime);stroke-width:1;stroke-dasharray:5 5;fill:none}#a2 .rail-bot{stroke:var(--text2);stroke-width:1;fill:none}#a2 .axis{stroke:var(--line);stroke-width:1}#a2 .tx{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;fill:var(--text2)}#a2 .tx.lime{fill:var(--lime)}#a2 .curve{fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round}#a2 .g2 .band{fill:var(--card)}#a2 .g2 .curve{stroke-dasharray:100;stroke-dashoffset:100;animation:draw2_2 11s infinite}#a2 .g2 .head{fill:var(--lime);offset-path:path("M40 170 C 80 178, 100 120, 140 112 C 180 104, 200 150, 240 158 C 280 166, 300 92, 345 82 C 390 72, 405 150, 450 160 C 495 170, 510 100, 550 92 C 575 87, 585 105, 590 112");offset-distance:0%;offset-rotate:0deg;animation:ride_2 11s infinite}#a2 .g2 .ping{fill:none;stroke:var(--lime);stroke-width:1;opacity:0;animation:ping_2 11s infinite}#a2 .g2 .cap{opacity:0;animation:cap_2 11s infinite}#a2 .g2-days{display:flex;justify-content:space-between;margin-top:10px;padding:0 4px}#a2 .g2-days span{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);animation:dayhi_2 11s infinite;animation-delay:var(--d)}@keyframes draw2_2{0%,6%{stroke-dashoffset:100}72%,90%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:100}}@keyframes ride_2{0%,6%{offset-distance:0%;opacity:0}9%{opacity:1}72%,90%{offset-distance:100%;opacity:1}94%,100%{offset-distance:100%;opacity:0}}@keyframes ping_2{0%,40%{opacity:0;r:4}44%{opacity:.9}52%{opacity:0;r:16}53%,100%{opacity:0;r:4}}@keyframes cap_2{0%,40%{opacity:0}46%,62%{opacity:1}68%,100%{opacity:0}}@keyframes dayhi_2{0%,6%{color:var(--muted)}12%{color:var(--text)}18%,100%{color:var(--muted)}}#a2 /* ===== SOCIAL LISTENING ===== */
.sl{display:grid;grid-template-columns:1fr 1fr;gap:26px}#a2 .sl-col > .lbl{display:block;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}#a2 .sl-in{position:relative;height:268px}#a2 .sl-msg{position:absolute;left:0;width:100%;border:1px solid var(--line);background:var(--card);padding:10px 12px;font-size:12.5px;line-height:1.4;color:var(--text2);opacity:0;transform:translate(0,var(--sy));animation:slmsg_2 15s infinite;animation-delay:var(--d)}#a2 .sl-msg em{font-style:normal;display:block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8.5px;color:var(--muted);margin-bottom:5px}@keyframes slmsg_2{
  0%,2%{opacity:0;transform:translate(-14px,var(--sy)) scale(1)}
  6%,20%{opacity:1;transform:translate(0,var(--sy)) scale(1)}
  30%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.35)}
  31%,100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.35)}
}#a2 .sl-row{position:relative;border:1px solid var(--line);padding:10px 12px;margin-bottom:8px;animation:slflash_2 15s infinite;animation-delay:var(--d)}#a2 .sl-row .t{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;margin-bottom:8px;color:var(--text)}#a2 .sl-row .t i{width:7px;height:7px;background:var(--c);display:block;flex:none}#a2 .sl-bar{height:4px;background:var(--bg);position:relative}#a2 .sl-bar b{position:absolute;inset:0 auto 0 0;width:var(--w0);background:var(--c);display:block;animation:slgrow_2 15s infinite;animation-delay:var(--d)}@keyframes slgrow_2{0%,28%{width:var(--w0)}34%,96%{width:var(--w1)}100%{width:var(--w0)}}@keyframes slflash_2{0%,28%{border-color:var(--line)}34%,52%{border-color:var(--c)}64%,100%{border-color:var(--line)}}@media(max-width:640px){#a2 .sl{grid-template-columns:1fr;gap:18px}#a2 .sl-msg{--tx:0px !important}}@media (prefers-reduced-motion: reduce){#a2 *{animation:none !important}#a2 .g2 .curve{stroke-dashoffset:0}#a2 .g2 .head{offset-distance:100%}#a2 .g2 .cap{opacity:1}#a2 .sl-msg{opacity:1;transform:translate(0,var(--sy))}#a2 .sl-msg:last-child{display:none}#a2 .sl-bar b{width:var(--w1)}}/* ===== 3. Ads — Anuncio por anuncio, como lo ve la gente ===== */
#a3 *{box-sizing:border-box}#a3 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a3 .item{border:1px solid var(--line);background:var(--card)}#a3 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a3 .item-head .tool{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a3 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a3 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a3 .meta div{border-top:1px solid var(--line);padding-top:10px}#a3 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a3 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a3 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px}#a3 .tagex{display:inline-block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--warn);border:1px solid var(--warn);padding:3px 7px;margin-bottom:18px}#a3 .note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a3 .note b{color:var(--text);font-weight:600}#a3 .lbl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2)}@media(max-width:640px){#a3 .meta{grid-template-columns:1fr}#a3 .stage{padding:14px}}#a3 /* ===== IPHONE ===== */
.row{display:flex;gap:28px;align-items:flex-start}#a3 .ph{width:248px;flex:none;border:1px solid var(--line);border-radius:44px;padding:10px;background:var(--card)}#a3 .scr{position:relative;height:392px;background:var(--bg);border:1px solid var(--line);border-radius:34px;overflow:hidden}#a3 .status{position:absolute;top:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;background:var(--bg);z-index:3}#a3 .status .hh{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text);letter-spacing:.02em}#a3 .status .ic{display:flex;align-items:flex-end;gap:4px}#a3 .status .sig{display:flex;align-items:flex-end;gap:1.5px}#a3 .status .sig i{width:2.5px;background:var(--text);display:block}#a3 .status .sig i:nth-child(1){height:3px}#a3 .status .sig i:nth-child(2){height:5px}#a3 .status .sig i:nth-child(3){height:7px}#a3 .status .sig i:nth-child(4){height:9px}#a3 .status .bat{width:17px;height:9px;border:1px solid var(--text);border-radius:2px;position:relative;padding:1px}#a3 .status .bat::after{content:'';position:absolute;right:-3px;top:3px;width:1.5px;height:3px;background:var(--text)}#a3 .status .bat b{display:block;height:100%;width:72%;background:var(--text)}#a3 .island{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:74px;height:20px;background:#000;border:1px solid var(--line);border-radius:12px;z-index:4}#a3 .home{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:104px;height:4px;background:var(--line);border-radius:2px;z-index:4}#a3 .igbar{position:absolute;top:30px;left:0;right:0;height:38px;display:flex;justify-content:space-between;align-items:center;padding:0 12px;background:var(--bg);border-bottom:1px solid var(--line);z-index:3}#a3 .igbar .wm{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:15px;letter-spacing:-.01em}#a3 .igbar .ic{display:flex;gap:12px;color:var(--text)}#a3 .ico{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#a3 /* feed */
.feed{position:absolute;top:68px;left:0;right:0;animation:feed_3 21s linear infinite}#a3 .post{border-bottom:1px solid var(--line)}#a3 .p-head{display:flex;align-items:center;gap:9px;padding:9px 11px}#a3 .av{width:28px;height:28px;border-radius:50%;background:var(--lime);flex:none;position:relative;display:flex;align-items:center;justify-content:center}#a3 .av span{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:#000;line-height:1}#a3 .av i{position:absolute;right:5px;top:7px;width:3px;height:3px;border-radius:50%;background:#000}#a3 .p-who{flex:1;line-height:1.25}#a3 .p-who b{display:block;font-size:11.5px;font-weight:600}#a3 .p-who em{display:block;font-style:normal;font-size:9.5px;color:var(--text2)}#a3 .p-dots{color:var(--text2);font-size:13px;letter-spacing:1px}#a3 .media{height:212px;position:relative;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}#a3 .media .art{position:absolute;inset:0}#a3 .media .art span{position:absolute;border:1px solid var(--line);display:block}#a3 .media .eb{position:relative;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:8px;color:var(--lime);margin-bottom:7px}#a3 .media .hl{position:relative;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:17px;line-height:1.15}#a3 .ctabar{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);font-size:11px;font-weight:600}#a3 .ctabar span{color:var(--text2);font-size:13px}#a3 .acts{display:flex;align-items:center;gap:13px;padding:10px 12px 6px;color:var(--text)}#a3 .acts .sp{flex:1}#a3 .cap{padding:0 12px 12px;font-size:11px;color:var(--text2);line-height:1.4}#a3 .cap b{color:var(--text);font-weight:600}#a3 .cap i{font-style:normal;color:var(--muted)}#a3 /* placa de resultado */
.hud{position:absolute;left:12px;right:12px;bottom:16px;border:1px solid var(--lime);background:var(--card);padding:9px 11px;z-index:5}#a3 .hud .sp{visibility:hidden;font-family:'JetBrains Mono',monospace;font-size:9.5px}#a3 .hud div{position:absolute;inset:9px 11px;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--text2);opacity:0;animation:hud_3 21s infinite;animation-delay:var(--d)}#a3 .hud div b{color:var(--text);font-weight:500}#a3 .hud div u{text-decoration:none;color:var(--lime)}#a3 /* panel derecho */
.right{flex:1;min-width:0}#a3 .right > .lbl{display:block;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}#a3 .lr{border:1px solid var(--line);padding:12px 14px;margin-bottom:9px;animation:lrflash_3 21s infinite;animation-delay:var(--d)}#a3 .lr .t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}#a3 .lr .t .id{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--text)}#a3 .lr .t .k{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2)}#a3 .lr .t .k b{color:var(--text);font-weight:500}#a3 .bar{height:5px;background:var(--bg);border:1px solid var(--line)}#a3 .bar span{display:block;height:100%;background:var(--text2);width:var(--w0);animation:live_3 21s infinite;animation-delay:var(--d)}#a3 .lr.win .bar span{background:var(--lime)}#a3 .lr .sub{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8.5px;color:var(--muted);margin-top:8px}@keyframes feed_3{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}@keyframes hud_3{0%,4%{opacity:0}9%,29%{opacity:1}33%,100%{opacity:0}}@keyframes lrflash_3{0%,4%{border-color:var(--line)}9%,29%{border-color:var(--text2)}33%,100%{border-color:var(--line)}}@keyframes live_3{0%{width:var(--w0)}22%{width:var(--w1)}48%{width:var(--w0)}72%{width:var(--w1)}100%{width:var(--w0)}}@media(max-width:640px){#a3 .row{flex-direction:column;align-items:center}#a3 .right{width:100%}}@media (prefers-reduced-motion: reduce){#a3 *{animation:none !important}#a3 .feed{transform:translateY(0)}#a3 .hud div{opacity:0}#a3 .hud div:first-of-type{opacity:1}#a3 .bar span{width:var(--w1)}}/* ===== 4. Meta Ads Agent — Gasto máximo y mínimo diario ===== */
#a4 *{box-sizing:border-box}#a4 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a4 .item{border:1px solid var(--line);background:var(--card);margin-bottom:28px}#a4 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a4 .item-head .tool{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a4 .item-head .estado{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--ok);border:1px solid var(--ok);padding:4px 8px}#a4 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a4 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a4 .meta div{border-top:1px solid var(--line);padding-top:10px}#a4 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a4 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a4 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:20px}#a4 .tagex{display:inline-block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--warn);border:1px solid var(--warn);padding:3px 7px;margin-bottom:14px}#a4 .note{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a4 .note b{color:var(--text);font-weight:600}#a4 .lbl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2)}#a4 svg{width:100%;height:auto;display:block;overflow:visible}@media(max-width:640px){#a4 .meta{grid-template-columns:1fr}#a4 .stage{padding:14px}}#a4 /* ===== GASTO DIARIO (cerrada · nivel 2) ===== */
.rail-top{stroke:var(--lime);stroke-width:1;stroke-dasharray:5 5;fill:none}#a4 .rail-bot{stroke:var(--text2);stroke-width:1;fill:none}#a4 .axis{stroke:var(--line);stroke-width:1}#a4 .tx{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;fill:var(--text2)}#a4 .tx.lime{fill:var(--lime)}#a4 .curve{fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round}#a4 .g2 .band{fill:var(--card)}#a4 .g2 .curve{stroke-dasharray:100;stroke-dashoffset:100;animation:draw2_4 11s infinite}#a4 .g2 .head{fill:var(--lime);offset-path:path("M40 170 C 80 178, 100 120, 140 112 C 180 104, 200 150, 240 158 C 280 166, 300 92, 345 82 C 390 72, 405 150, 450 160 C 495 170, 510 100, 550 92 C 575 87, 585 105, 590 112");offset-distance:0%;offset-rotate:0deg;animation:ride_4 11s infinite}#a4 .g2 .ping{fill:none;stroke:var(--lime);stroke-width:1;opacity:0;animation:ping_4 11s infinite}#a4 .g2 .cap{opacity:0;animation:cap_4 11s infinite}#a4 .g2-days{display:flex;justify-content:space-between;margin-top:10px;padding:0 4px}#a4 .g2-days span{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);animation:dayhi_4 11s infinite;animation-delay:var(--d)}@keyframes draw2_4{0%,6%{stroke-dashoffset:100}72%,90%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:100}}@keyframes ride_4{0%,6%{offset-distance:0%;opacity:0}9%{opacity:1}72%,90%{offset-distance:100%;opacity:1}94%,100%{offset-distance:100%;opacity:0}}@keyframes ping_4{0%,40%{opacity:0;r:4}44%{opacity:.9}52%{opacity:0;r:16}53%,100%{opacity:0;r:4}}@keyframes cap_4{0%,40%{opacity:0}46%,62%{opacity:1}68%,100%{opacity:0}}@keyframes dayhi_4{0%,6%{color:var(--muted)}12%{color:var(--text)}18%,100%{color:var(--muted)}}#a4 /* ===== SOCIAL LISTENING ===== */
.sl{display:grid;grid-template-columns:1fr 1fr;gap:26px}#a4 .sl-col > .lbl{display:block;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}#a4 .sl-in{position:relative;height:268px}#a4 .sl-msg{position:absolute;left:0;width:100%;border:1px solid var(--line);background:var(--card);padding:10px 12px;font-size:12.5px;line-height:1.4;color:var(--text2);opacity:0;transform:translate(0,var(--sy));animation:slmsg_4 15s infinite;animation-delay:var(--d)}#a4 .sl-msg em{font-style:normal;display:block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8.5px;color:var(--muted);margin-bottom:5px}@keyframes slmsg_4{
  0%,2%{opacity:0;transform:translate(-14px,var(--sy)) scale(1)}
  6%,20%{opacity:1;transform:translate(0,var(--sy)) scale(1)}
  30%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.35)}
  31%,100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.35)}
}#a4 .sl-row{position:relative;border:1px solid var(--line);padding:10px 12px;margin-bottom:8px;animation:slflash_4 15s infinite;animation-delay:var(--d)}#a4 .sl-row .t{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;margin-bottom:8px;color:var(--text)}#a4 .sl-row .t i{width:7px;height:7px;background:var(--c);display:block;flex:none}#a4 .sl-bar{height:4px;background:var(--bg);position:relative}#a4 .sl-bar b{position:absolute;inset:0 auto 0 0;width:var(--w0);background:var(--c);display:block;animation:slgrow_4 15s infinite;animation-delay:var(--d)}@keyframes slgrow_4{0%,28%{width:var(--w0)}34%,96%{width:var(--w1)}100%{width:var(--w0)}}@keyframes slflash_4{0%,28%{border-color:var(--line)}34%,52%{border-color:var(--c)}64%,100%{border-color:var(--line)}}@media(max-width:640px){#a4 .sl{grid-template-columns:1fr;gap:18px}#a4 .sl-msg{--tx:0px !important}}@media (prefers-reduced-motion: reduce){#a4 *{animation:none !important}#a4 .g2 .curve{stroke-dashoffset:0}#a4 .g2 .head{offset-distance:100%}#a4 .g2 .cap{opacity:1}#a4 .sl-msg{opacity:1;transform:translate(0,var(--sy))}#a4 .sl-msg:last-child{display:none}#a4 .sl-bar b{width:var(--w1)}}/* ===== 5. Meta Ads Agent — El log corriendo ===== */
#a5 *{box-sizing:border-box}#a5 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a5 .item{border:1px solid var(--line);background:var(--card);margin-bottom:28px}#a5 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a5 .item-head .lvl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a5 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a5 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a5 .meta div{border-top:1px solid var(--line);padding-top:10px}#a5 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a5 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a5 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px;overflow:hidden}#a5 .tagex{display:inline-block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--warn);border:1px solid var(--warn);padding:3px 7px;margin-bottom:18px}#a5 .note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a5 .note b{color:var(--text);font-weight:600}#a5 /* ===== pantalla de logs (comun) ===== */
.lg-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;letter-spacing:-.02em;margin-bottom:16px}#a5 .filt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}#a5 .fl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:9px;color:var(--text2)}#a5 .sel{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--card);border-radius:20px;padding:7px 13px;font-size:12px;color:var(--text)}#a5 .sel i{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid var(--text2);display:block}#a5 .sel.on{border-color:var(--lime)}#a5 .apply{border-radius:20px;background:var(--lime);color:#000;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:700;padding:8px 15px}#a5 .actors{display:flex;gap:16px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:14px}#a5 .actors > span{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text2)}#a5 .ic{width:22px;height:22px;border-radius:50%;border:1px solid var(--lime);display:flex;align-items:center;justify-content:center;flex:none}#a5 .ic svg{width:13px;height:13px;fill:none;stroke:var(--lime);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#a5 .ic svg .f{fill:var(--lime);stroke:none}#a5 .ic.pe{border-color:var(--info)}#a5 .ic.pe svg{stroke:var(--info)}#a5 .ic.me{border-color:var(--info)}#a5 .ic.me svg{stroke:var(--info)}#a5 .ic.sm{width:18px;height:18px}#a5 .ic.sm svg{width:11px;height:11px}#a5 .day{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--text2);padding:10px 2px;border-top:1px solid var(--line)}#a5 .day b{color:var(--text);font-weight:700;margin-right:6px}#a5 .cnt, #a5 .cntbox .c{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2)}#a5 .cntbox{position:relative;display:inline-block;min-width:74px;height:14px}#a5 .cntbox .c{position:absolute;right:0;top:0;opacity:0;white-space:nowrap}#a5 .row{display:flex;align-items:flex-start;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px}#a5 .hr{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text2);padding-top:3px;white-space:nowrap;flex:none}#a5 .txt{font-size:13px;line-height:1.45}#a5 .txt b{font-weight:700}#a5 .txt u{text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text2)}#a5 .why{font-size:12px;color:var(--text2);margin-top:5px;line-height:1.45}@media(max-width:640px){#a5 .meta{grid-template-columns:1fr}#a5 .stage{padding:14px}#a5 .actors{justify-content:flex-start}#a5 .row{flex-wrap:wrap}}#a5 /* ===== NIVEL 1 ===== */
.v1 .row{opacity:0;transform:translateY(-8px);animation:in1_5 16s infinite;animation-delay:var(--d)}#a5 .v1 .cntbox .c{animation:cnt1_5 16s infinite;animation-delay:var(--d)}@keyframes in1_5{0%,3%{opacity:0;transform:translateY(-8px)}9%,92%{opacity:1;transform:none}97%,100%{opacity:0}}@keyframes cnt1_5{0%,3%{opacity:0}9%,12%{opacity:1}13%,100%{opacity:0}}#a5 .v1 .cntbox .c:last-child{animation-name:cnt1last_5}@keyframes cnt1last_5{0%,3%{opacity:0}9%,92%{opacity:1}97%,100%{opacity:0}}#a5 /* ===== NIVEL 2 ===== */
.n2{position:relative;min-height:452px}#a5 .scene{position:absolute;inset:0;opacity:0;animation:sc2_5 18s infinite;animation-delay:var(--d)}#a5 .scene .row{opacity:0;transform:translateX(-10px);animation:in2_5 18s infinite;animation-delay:var(--d)}#a5 .scene .sel.on{animation:selon_5 18s infinite;animation-delay:var(--d)}@keyframes sc2_5{0%{opacity:0}2%,31%{opacity:1}33%,100%{opacity:0}}@keyframes in2_5{0%,3%{opacity:0;transform:translateX(-10px)}8%,31%{opacity:1;transform:none}33%,100%{opacity:0}}@keyframes selon_5{0%,1%{border-color:var(--line)}4%,14%{border-color:var(--lime)}20%,100%{border-color:var(--line)}}#a5 /* ===== NIVEL 3 ===== */
.n3-wrap{position:relative;height:322px;overflow:hidden;border-top:1px solid var(--line);padding-top:10px}#a5 .n3-track{animation:feed3_5 30s linear infinite}#a5 .attr{margin-top:16px;border:1px solid var(--line);padding:14px 16px}#a5 .alab{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);display:block;margin-bottom:14px}#a5 .ab{display:flex;align-items:center;gap:12px;margin-bottom:9px}#a5 .an{display:flex;align-items:center;gap:8px;width:120px;flex:none;font-size:12px;color:var(--text2)}#a5 .at{flex:1;height:6px;background:var(--card);border:1px solid var(--line);display:block}#a5 .at b{display:block;height:100%;width:var(--w);background:var(--text2);transform:scaleX(0);transform-origin:left;animation:bar3_5 30s infinite;animation-delay:var(--d)}#a5 .ab:first-of-type .at b{background:var(--lime)}@keyframes feed3_5{0%{transform:translateY(-50%)}100%{transform:translateY(0)}}@keyframes bar3_5{0%,2%{transform:scaleX(0)}10%,96%{transform:scaleX(1)}99%,100%{transform:scaleX(0)}}@media (prefers-reduced-motion: reduce){#a5 *{animation:none !important}#a5 .v1 .row{opacity:1;transform:none}#a5 .v1 .cntbox .c{opacity:0}#a5 .v1 .cntbox .c:last-child{opacity:1}#a5 .scene{opacity:0}#a5 .scene.s1{opacity:1}#a5 .scene .row{opacity:1;transform:none}#a5 .n3-track{transform:translateY(-50%)}#a5 .at b{transform:scaleX(1)}}/* ===== 6. Meta Ads Agent — Una revisión contra veintiocho, con el error en rojo ===== */
#a6 *{box-sizing:border-box}#a6 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a6 .item{border:1px solid var(--line);background:var(--card);margin-bottom:28px}#a6 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a6 .item-head .lvl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a6 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a6 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a6 .meta div{border-top:1px solid var(--line);padding-top:10px}#a6 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a6 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a6 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px;overflow:hidden}#a6 .note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a6 .note b{color:var(--text);font-weight:600}#a6 .who{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}#a6 .who.mt{margin-top:24px}#a6 .wn{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;color:var(--text)}#a6 .wn.lime{color:var(--lime)}#a6 .wd{font-size:12px;color:var(--text2)}#a6 .wc{position:relative;margin-left:auto;min-width:190px;height:15px;text-align:right}#a6 .wc .c{position:absolute;right:0;top:0;font-family:'JetBrains Mono',monospace;font-size:10.5px;white-space:nowrap;color:var(--text2)}#a6 .wk{position:relative}#a6 .week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}#a6 .cell{border:1px solid var(--line);background:var(--card);padding:8px;position:relative}#a6 .cell em{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8px;color:var(--text2);margin-bottom:8px}#a6 .tks{display:flex;gap:5px;flex-wrap:wrap}#a6 .tk{width:9px;height:9px;border:1px solid var(--line);display:block}#a6 .tk.on{opacity:0;animation:tkin_6 16s infinite;animation-delay:var(--d)}#a6 .tk.on.hu{background:var(--text2);border-color:var(--text2)}#a6 .tk.on.ag{background:var(--lime);border-color:var(--lime)}@keyframes tkin_6{0%,1%{opacity:0}4%,92%{opacity:1}97%,100%{opacity:0}}#a6 .ed{position:absolute;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--err);z-index:2;opacity:0}#a6 .ed.h{left:calc(35.71% - 4px)}#a6 .ed.a{left:calc(35.71% - 4px)}#a6 .lab{opacity:0}#a6 .lab.bad{color:var(--err)}#a6 .lab.good{color:var(--lime)}@media(max-width:640px){#a6 .meta{grid-template-columns:1fr}#a6 .stage{padding:14px}#a6 .tk{width:7px;height:7px}#a6 .wc{min-width:140px}#a6 .wc .c{font-size:9px}}#a6 /* ===== OPCION 1: los dias se encienden ===== */
.o1 .ed.h{animation:edh1_6 16s infinite}#a6 .o1 .ed.a{animation:eda1_6 16s infinite}#a6 .o1 .cell.burn{animation:burn1_6 16s infinite;animation-delay:var(--d)}#a6 .o1 .cell.burn em{animation:burnem1_6 16s infinite;animation-delay:var(--d)}#a6 .o1 .cell.heal{animation:heal1_6 16s infinite}#a6 .o1 .lab.bad{animation:lab60_6 16s infinite}#a6 .o1 .lab.good{animation:lab30_6 16s infinite}@keyframes edh1_6{0%,20%{opacity:0}23%,90%{opacity:1}96%,100%{opacity:0}}@keyframes eda1_6{0%,20%{opacity:0}23%,27%{opacity:1}30%,100%{opacity:0}}@keyframes burn1_6{0%,1%{border-color:var(--line)}3%,90%{border-color:var(--err)}96%,100%{border-color:var(--line)}}@keyframes burnem1_6{0%,1%{color:var(--text2)}3%,90%{color:var(--err)}96%,100%{color:var(--text2)}}@keyframes heal1_6{0%,20%{border-color:var(--line)}23%,27%{border-color:var(--err)}30%,90%{border-color:var(--lime)}96%,100%{border-color:var(--line)}}@keyframes lab60_6{0%,60%{opacity:0}64%,92%{opacity:1}97%,100%{opacity:0}}@keyframes lab30_6{0%,30%{opacity:0}34%,92%{opacity:1}97%,100%{opacity:0}}#a6 /* ===== OPCION 2: el error viaja ===== */
.trip{position:absolute;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--err);z-index:2;opacity:0}#a6 .o2 .trip.h{animation:trip2_6 16s infinite}#a6 .o2 .trip.a{animation:tripa2_6 16s infinite}#a6 .stop{position:absolute;top:-7px;right:-1px;width:2px;height:15px;background:var(--text2);display:block;opacity:0;animation:stop2_6 16s infinite}#a6 .o2 .lab.bad{animation:lab66_6 16s infinite}#a6 .o2 .lab.good{animation:lab30_6 16s infinite}@keyframes trip2_6{
  0%,20%{left:calc(35.71% - 4px);opacity:0}
  22%,29%{left:calc(35.71% - 4px);opacity:1}
  30%,37%{left:calc(50% - 4px);opacity:1}
  38%,45%{left:calc(64.28% - 4px);opacity:1}
  46%,53%{left:calc(78.57% - 4px);opacity:1}
  54%,61%{left:calc(92.85% - 4px);opacity:1}
  62%,64%{left:calc(100% - 5px);opacity:1}
  66%,100%{left:calc(100% - 5px);opacity:0}
}@keyframes tripa2_6{0%,20%{opacity:0}22%,27%{opacity:1}29%,100%{opacity:0}}@keyframes stop2_6{0%,58%{opacity:0}61%,90%{opacity:1}96%,100%{opacity:0}}@keyframes lab66_6{0%,66%{opacity:0}70%,92%{opacity:1}97%,100%{opacity:0}}#a6 /* ===== OPCION 3: el contador de horas ===== */
.o3 .ed.h{animation:edh1_6 16s infinite}#a6 .o3 .ed.a{animation:eda1_6 16s infinite}#a6 .o3 .wc .hrs{opacity:0;color:var(--err);animation:hstep_6 16s infinite;animation-delay:var(--d)}#a6 .o3 .wc .hrs.last{animation-name:hlast_6}#a6 .o3 .wc .hrs.a{color:var(--lime)}@keyframes hstep_6{0%,1%{opacity:0}3%,10%{opacity:1}12%,100%{opacity:0}}@keyframes hlast_6{0%,1%{opacity:0}3%,90%{opacity:1}96%,100%{opacity:0}}@media (prefers-reduced-motion: reduce){#a6 *{animation:none !important}#a6 .tk.on{opacity:1}#a6 .ed{opacity:1}#a6 .ed.a{opacity:0}#a6 .o1 .cell.burn{border-color:var(--err)}#a6 .o1 .cell.burn em{color:var(--err)}#a6 .o1 .cell.heal{border-color:var(--lime)}#a6 .lab{opacity:1}#a6 .trip{opacity:0}#a6 .stop{opacity:1}#a6 .o3 .wc .hrs{opacity:0}#a6 .o3 .wc .hrs.last{opacity:1}}/* ===== 7. Meta Ads Agent — Modo exploración: dos pruebas, una falla y una pasa ===== */
#a7 *{box-sizing:border-box}#a7 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a7 .item{border:1px solid var(--line);background:var(--card);margin-bottom:28px}#a7 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a7 .item-head .lvl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a7 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a7 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a7 .meta div{border-top:1px solid var(--line);padding-top:10px}#a7 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a7 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a7 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px;overflow:hidden}#a7 .tagex{display:inline-block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--warn);border:1px solid var(--warn);padding:3px 7px;margin-bottom:16px}#a7 .note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a7 .note b{color:var(--text);font-weight:600}#a7 .sl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;color:var(--text2);display:block;margin-bottom:8px}#a7 .bar{display:flex;height:36px;border:1px solid var(--line)}#a7 .b80{width:80%;background:var(--card);border-right:1px solid var(--line);display:flex;align-items:center;padding:0 10px}#a7 .b20{width:20%;display:flex;align-items:center;padding:0 10px;border:1px solid var(--warn);margin:-1px;overflow:hidden}#a7 .bar em{font-style:normal;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:8.5px;color:var(--text2);white-space:nowrap}#a7 .b20 em{color:var(--warn)}#a7 .sub{font-size:12.5px;color:var(--text2);margin-top:10px;line-height:1.5}#a7 .sub b{color:var(--text);font-weight:600}@media(max-width:640px){#a7 .meta{grid-template-columns:1fr}#a7 .stage{padding:14px}}#a7 /* ===== NIVEL 1: la particion ===== */
.e1 .b80{animation:e1w_7 12s infinite}#a7 .e1 .b20{animation:e1b_7 12s infinite}#a7 .e1 .b20 em{opacity:0;animation:e1t_7 12s infinite}#a7 .e1 .sub{opacity:0;animation:e1s_7 12s infinite}@keyframes e1w_7{0%,14%{width:100%}22%,94%{width:80%}100%{width:100%}}@keyframes e1b_7{0%,14%{border-color:transparent}22%,94%{border-color:var(--warn)}100%{border-color:transparent}}@keyframes e1t_7{0%,20%{opacity:0}26%,94%{opacity:1}100%{opacity:0}}@keyframes e1s_7{0%,24%{opacity:0}30%,94%{opacity:1}100%{opacity:0}}#a7 /* ===== NIVEL 2: la prueba medida ===== */
.e2 .b80{animation:e2w_7 18s infinite}#a7 .e2 .b20{animation:e2b_7 18s infinite}#a7 .e2 .b20 em{opacity:0;animation:e2t_7 18s infinite}#a7 .chart{width:100%;height:auto;display:block;overflow:visible;margin-top:16px}#a7 .axis{stroke:var(--line);stroke-width:1}#a7 .tx{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;fill:var(--text2)}#a7 .tx.sm{font-size:9px}#a7 .tx.lime{fill:var(--lime)}#a7 .goal{stroke:var(--muted);stroke-width:1;stroke-dasharray:5 6}#a7 .ca{fill:none;stroke:var(--text2);stroke-width:2.2;stroke-linecap:round}#a7 .cb{fill:none;stroke:var(--lime);stroke-width:2.2;stroke-linecap:round}#a7 .wa{clip-path:inset(0 100% 0 0);animation:e2wa_7 18s infinite}#a7 .wb{clip-path:inset(0 100% 0 0);animation:e2wb_7 18s infinite}#a7 .hd{fill:var(--lime);offset-path:path("M60.0 52.3 C74.4 56.4 117.8 67.7 146.7 76.9 C175.6 86.2 204.4 97.4 233.3 107.7 C262.2 117.9 296.9 131.3 320.0 138.5 C343.1 145.6 357.6 146.7 372.0 150.8 C386.4 154.9 386.4 158.6 406.7 163.1 C426.9 167.6 464.4 173.7 493.3 177.8 C522.2 181.9 565.6 186.1 580.0 187.7");offset-distance:0%;offset-rotate:0deg;opacity:0;animation:e2hd_7 18s infinite}#a7 .win{opacity:0;animation:e2win_7 18s infinite}@keyframes e2w_7{0%,6%{width:100%}12%,96%{width:80%}100%{width:100%}}@keyframes e2b_7{0%,6%{border-color:transparent}12%,66%{border-color:var(--warn)}72%,96%{border-color:var(--lime)}100%{border-color:transparent}}@keyframes e2t_7{0%,10%{opacity:0}14%,66%{opacity:1;color:var(--warn)}72%,96%{opacity:1;color:var(--lime)}100%{opacity:0}}@keyframes e2wa_7{0%,16%{clip-path:inset(0 100% 0 0)}52%,94%{clip-path:inset(0 -6% 0 0)}100%{clip-path:inset(0 100% 0 0)}}@keyframes e2wb_7{0%,52%{clip-path:inset(0 100% 0 -6%)}70%,94%{clip-path:inset(0 0 0 -6%)}100%{clip-path:inset(0 100% 0 -6%)}}@keyframes e2hd_7{0%,14%{offset-distance:0%;opacity:0}17%{opacity:1}70%,92%{offset-distance:100%;opacity:1}96%,100%{offset-distance:0%;opacity:0}}@keyframes e2win_7{0%,70%{opacity:0}75%,94%{opacity:1}100%{opacity:0}}#a7 /* ===== NIVEL 3: dos pruebas, #a7 una falla ===== */
.e3{position:relative}#a7 .e3 .bar{margin-bottom:14px}#a7 .e3 .b20{animation:e3b_7 26s infinite}#a7 .e3 .b20 em{animation:e3t_7 26s infinite}#a7 .esc{position:relative;min-height:118px}#a7 .esc > div{position:absolute;inset:0;border:1px solid var(--line);background:var(--card);padding:14px 16px;opacity:0;animation:e3sc_7 26s infinite;animation-delay:var(--d)}#a7 .eh{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:9px}#a7 .en{font-size:12.5px}#a7 .en b{font-weight:600}#a7 .em2{position:relative;min-width:150px;height:14px;text-align:right}#a7 .em2 span{position:absolute;right:0;top:0;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2);white-space:nowrap;opacity:0;animation:e3v_7 26s infinite;animation-delay:var(--d)}#a7 .etr{height:6px;border:1px solid var(--line);background:var(--bg)}#a7 .etr b{display:block;height:100%;background:var(--warn);transform:scaleX(0);transform-origin:left;animation:e3p_7 26s infinite;animation-delay:var(--d)}#a7 .ver{margin-top:9px;height:15px}#a7 .ver span{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8.5px;opacity:0;animation:e3ver_7 26s infinite;animation-delay:var(--d)}#a7 .ver .bad{color:var(--err)}#a7 .ver .good{color:var(--lime)}#a7 .ex{font-size:12px;color:var(--text2);margin-top:6px;opacity:0;animation:e3ver_7 26s infinite;animation-delay:var(--d)}@keyframes e3sc_7{0%{opacity:0}2%,40%{opacity:1}44%,100%{opacity:0}}@keyframes e3v_7{0%,1%{opacity:0}3%,9%{opacity:1}11%,100%{opacity:0}}@keyframes e3vlast_7{0%,1%{opacity:0}3%,38%{opacity:1}44%,100%{opacity:0}}@keyframes e3p_7{0%,4%{transform:scaleX(0)}30%,40%{transform:scaleX(1)}44%,100%{transform:scaleX(0)}}@keyframes e3ver_7{0%,1%{opacity:0}3%,38%{opacity:1}44%,100%{opacity:0}}@keyframes e3b_7{0%,2%{border-color:var(--warn)}30%,44%{border-color:var(--err)}48%,80%{border-color:var(--warn)}84%,96%{border-color:var(--lime)}100%{border-color:var(--warn)}}@keyframes e3t_7{0%,2%{color:var(--warn)}30%,44%{color:var(--err)}48%,80%{color:var(--warn)}84%,96%{color:var(--lime)}100%{color:var(--warn)}}#a7 .em2 span.vlast{animation-name:e3vlast_7}@media (prefers-reduced-motion: reduce){#a7 *{animation:none !important}#a7 .e1 .b20 em, #a7 .e1 .sub, #a7 .e2 .b20 em{opacity:1}#a7 .wa, #a7 .wb{clip-path:inset(0 -6% 0 -6%)}#a7 .hd{opacity:0}#a7 .win{opacity:1}#a7 .e2 .b20{border-color:var(--lime)}#a7 .e2 .b20 em{color:var(--lime)}#a7 .esc > div{opacity:0}#a7 .esc > div:last-child{opacity:1}#a7 .esc > div:last-child .em2 span{opacity:0}#a7 .esc > div:last-child .em2 span.vlast{opacity:1}#a7 .esc > div:last-child .etr b{transform:scaleX(1)}#a7 .esc > div:last-child .ver span, #a7 .esc > div:last-child .ex{opacity:1}#a7 .e3 .b20{border-color:var(--lime)}#a7 .e3 .b20 em{color:var(--lime)}}/* ===== 8. Meta Ads Agent — Las cuatro pasadas del día: 2, 0, 0, 1 ===== */
#a8 *{box-sizing:border-box}#a8 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a8 .item{border:1px solid var(--line);background:var(--card);margin-bottom:28px}#a8 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a8 .item-head .lvl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a8 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a8 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a8 .meta div{border-top:1px solid var(--line);padding-top:10px}#a8 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a8 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a8 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px;overflow:hidden}#a8 .tagex{display:inline-block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--warn);border:1px solid var(--warn);padding:3px 7px;margin-bottom:16px}#a8 .note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a8 .note b{color:var(--text);font-weight:600}#a8 .hh{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text2);margin-right:4px}@media(max-width:640px){#a8 .meta{grid-template-columns:1fr}#a8 .stage{padding:14px}}#a8 /* ===== NIVEL 1: la lista revisada ===== */
.ph2{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:10px}#a8 .pt2{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}#a8 .zero{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9px;color:var(--text2);border:1px solid var(--text2);padding:3px 7px;opacity:0;animation:zin_8 14s infinite;animation-delay:var(--d)}#a8 .rw{display:flex;align-items:baseline;gap:10px;border:1px solid var(--line);background:var(--card);padding:9px 12px;margin-bottom:7px;animation:rwsc_8 14s infinite;animation-delay:var(--d)}#a8 .rn{font-size:12.5px}#a8 .rm{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2);margin-left:auto}#a8 .rk{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:8.5px;color:var(--ok);opacity:0;animation:rkin_8 14s infinite;animation-delay:var(--d);white-space:nowrap}#a8 .fin{font-size:13px;color:var(--text2);line-height:1.55;border-top:1px solid var(--line);padding-top:11px;margin-top:4px;opacity:0;animation:zin_8 14s infinite;animation-delay:var(--d)}#a8 .fin b{color:var(--text);font-weight:600}@keyframes rwsc_8{0%,1%{border-color:var(--line)}3.5%,9%{border-color:var(--text2)}12%,100%{border-color:var(--line)}}@keyframes rkin_8{0%,3.5%{opacity:0}7%,90%{opacity:1}96%,100%{opacity:0}}@keyframes zin_8{0%,1%{opacity:0}4%,90%{opacity:1}96%,100%{opacity:0}}#a8 /* ===== NIVEL 2: las cuatro pasadas del dia ===== */
.tl2{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:6px}#a8 .tl2 > i{position:absolute;left:4%;right:4%;top:37px;border-top:1px solid var(--line)}#a8 .nd{position:relative;text-align:center;opacity:.28;animation:ndin_8 17s infinite;animation-delay:var(--d)}#a8 .nt{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2);display:block;margin-bottom:8px}#a8 .nc{width:14px;height:14px;border-radius:50%;border:1px solid var(--text2);background:var(--bg);display:inline-block;position:relative;z-index:1}#a8 .nd.did .nc{border-color:var(--lime);background:var(--lime)}#a8 .nl{display:block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:9px;color:var(--text);margin-top:9px}#a8 .nd.zero .nl{color:var(--text2)}#a8 .nx{display:block;font-size:11px;color:var(--text2);margin-top:5px}#a8 .rem{margin-top:18px;font-size:13px;color:var(--text2);border-top:1px solid var(--line);padding-top:12px;opacity:0;animation:zin2_8 17s infinite;animation-delay:var(--d)}#a8 .rem b{color:var(--text);font-weight:600}@keyframes ndin_8{0%,1%{opacity:.28}4%,92%{opacity:1}97%,100%{opacity:.28}}@keyframes zin2_8{0%,1%{opacity:0}4%,92%{opacity:1}97%,100%{opacity:0}}#a8 /* ===== NIVEL 3: dos semanas ===== */
.p3{display:grid;grid-template-columns:1fr 1fr;gap:16px}#a8 .pan{border:1px solid var(--line);background:var(--card);padding:14px}#a8 .pl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;color:var(--text2);display:block;margin-bottom:10px}#a8 .pl.lme{color:var(--lime)}#a8 .c3{width:100%;height:auto;display:block;overflow:visible}#a8 .ax{stroke:var(--line);stroke-width:1}#a8 .ci{fill:none;stroke:var(--text2);stroke-width:2}#a8 .cd{fill:none;stroke:var(--lime);stroke-width:2}#a8 .w3a{clip-path:inset(0 100% 0 0);animation:w3_8 19s infinite}#a8 .w3b{clip-path:inset(0 100% 0 0);animation:w3_8 19s infinite}#a8 .mk{stroke:var(--err);stroke-width:2;opacity:0;animation:mkin_8 19s infinite;animation-delay:var(--d)}#a8 .mk.lm{stroke:var(--lime)}#a8 .px2{display:block;font-size:12px;color:var(--text2);line-height:1.5;margin-top:8px;opacity:0;animation:pxin_8 19s infinite}@keyframes w3_8{0%,5%{clip-path:inset(0 100% 0 0)}52%,94%{clip-path:inset(0 -4% 0 0)}100%{clip-path:inset(0 100% 0 0)}}@keyframes mkin_8{0%,1%{opacity:0}3%,92%{opacity:1}97%,100%{opacity:0}}@keyframes pxin_8{0%,56%{opacity:0}61%,94%{opacity:1}100%{opacity:0}}@media(max-width:640px){#a8 .p3{grid-template-columns:1fr}#a8 .tl2{grid-template-columns:1fr 1fr}#a8 .tl2 > i{display:none}}@media (prefers-reduced-motion: reduce){#a8 *{animation:none !important}#a8 .zero, #a8 .fin, #a8 .rk, #a8 .rem, #a8 .px2{opacity:1}#a8 .nd{opacity:1}#a8 .w3a, #a8 .w3b{clip-path:inset(0 -4% 0 0)}#a8 .mk{opacity:1}}/* ===== 9. Meta Ads Agent — Locación de presupuesto: la plata cambia de manos ===== */
#a9 *{box-sizing:border-box}#a9 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a9 .item{border:1px solid var(--line);background:var(--card);margin-bottom:28px}#a9 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a9 .item-head .lvl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a9 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a9 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a9 .meta div{border-top:1px solid var(--line);padding-top:10px}#a9 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a9 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a9 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px;overflow:hidden}#a9 .tagex{display:inline-block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--warn);border:1px solid var(--warn);padding:3px 7px;margin-bottom:16px}#a9 .note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a9 .note b{color:var(--text);font-weight:600}#a9 .tx{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;fill:var(--text2)}#a9 .tx.sm{font-size:9px}#a9 .tx.lime{fill:var(--lime)}#a9 .tx.errt{fill:var(--err)}@media(max-width:640px){#a9 .meta{grid-template-columns:1fr}#a9 .stage{padding:14px}}#a9 /* ===== NIVEL 1: el rebalanceo ===== */
.l1 .tot{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;color:var(--text2);margin-bottom:14px}#a9 .crow{display:grid;grid-template-columns:200px 1fr 90px;gap:12px;align-items:center;margin-bottom:12px}#a9 .cn{font-size:12.5px}#a9 .cn em{display:block;font-style:normal;position:relative;height:13px;margin-top:3px}#a9 .cn em span{position:absolute;left:0;top:0;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--text2);white-space:nowrap;opacity:0}#a9 .cn em .s0{animation:m0_9 16s infinite}#a9 .cn em .s1{animation:m1_9 16s infinite}#a9 .cn em .s1.gd{color:var(--lime)}#a9 .cn em .s1.bd{color:var(--err)}#a9 .ctr{height:12px;border:1px solid var(--line);background:var(--card)}#a9 .ctr b{display:block;height:100%;background:var(--text2);width:var(--w0);animation:bw_9 16s infinite}#a9 .crow.gan .ctr b{background:var(--lime)}#a9 .cdl{position:relative;height:13px}#a9 .cdl span{position:absolute;left:0;top:0;font-family:'JetBrains Mono',monospace;font-size:10px;white-space:nowrap;opacity:0;animation:m1_9 16s infinite}#a9 .crow.gan .cdl span{color:var(--lime)}#a9 .crow.ced .cdl span{color:var(--text2)}@keyframes m0_9{0%,30%{opacity:1}34%,100%{opacity:0}}@keyframes m1_9{0%,30%{opacity:0}34%,94%{opacity:1}100%{opacity:0}}@keyframes bw_9{0%,32%{width:var(--w0)}46%,94%{width:var(--w1)}100%{width:var(--w0)}}#a9 /* ===== NIVEL 2: el envion perseguido ===== */
.ch2{width:100%;height:auto;display:block;overflow:visible}#a9 .ax2{stroke:var(--line);stroke-width:1}#a9 .cc{fill:none;stroke:var(--text2);stroke-width:2.2;stroke-linecap:round}#a9 .cb2{fill:none;stroke:var(--lime);stroke-width:2}#a9 .wc2{clip-path:inset(0 100% 0 0);animation:wc2_9 20s infinite}#a9 .wb2{clip-path:inset(0 100% 0 0);animation:wb2_9 20s infinite}#a9 .hd2{fill:var(--text)!important;fill:var(--text2);offset-path:path("M60.0 55.7 C75.2 56.8 122.8 57.3 151.0 62.1 C179.2 67.0 200.8 77.1 229.0 84.6 C257.2 92.1 289.7 103.9 320.0 107.1 C350.3 110.4 382.8 108.2 411.0 103.9 C439.2 99.6 460.8 90.5 489.0 81.4 C517.2 72.3 564.8 54.6 580.0 49.3");offset-distance:0%;offset-rotate:0deg;opacity:0;animation:hd2_9 20s infinite}#a9 .an2{opacity:0;animation:an2a_9 20s infinite}#a9 .an2.b{animation-name:an2b_9}@keyframes wc2_9{0%,4%{clip-path:inset(0 100% 0 0)}58%,94%{clip-path:inset(0 -4% 0 0)}100%{clip-path:inset(0 100% 0 0)}}@keyframes wb2_9{0%,4%{clip-path:inset(0 100% 0 0)}58%,94%{clip-path:inset(0 -4% 0 0)}100%{clip-path:inset(0 100% 0 0)}}@keyframes hd2_9{0%,3%{offset-distance:0%;opacity:0}6%{opacity:1}58%,92%{offset-distance:100%;opacity:1}97%,100%{offset-distance:0%;opacity:0}}@keyframes an2a_9{0%,26%{opacity:0}31%,94%{opacity:1}100%{opacity:0}}@keyframes an2b_9{0%,48%{opacity:0}53%,94%{opacity:1}100%{opacity:0}}#a9 /* ===== NIVEL 3: la ola perdida y la surfeada ===== */
.l3{display:grid;grid-template-columns:1fr 1fr;gap:16px}#a9 .pan3{border:1px solid var(--line);background:var(--card);padding:14px}#a9 .pl3{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;color:var(--text2);display:block;margin-bottom:10px}#a9 .pl3.lme{color:var(--lime)}#a9 .c33{width:100%;height:auto;display:block;overflow:visible}#a9 .cw{fill:none;stroke:var(--text2);stroke-width:2}#a9 .flat{stroke:var(--muted);stroke-width:1.6;stroke-dasharray:5 6}#a9 .st3{fill:none;stroke:var(--lime);stroke-width:1.8}#a9 .lost{fill:var(--err);opacity:0;animation:lost3_9 18s infinite}#a9 .w33{clip-path:inset(0 100% 0 0);animation:w33_9 18s infinite}#a9 .ws3{clip-path:inset(0 100% 0 0);animation:w33_9 18s infinite}#a9 .lb3{opacity:0;animation:lb3_9 18s infinite}#a9 .px3{display:block;font-size:12px;color:var(--text2);line-height:1.5;margin-top:8px;opacity:0;animation:lb3_9 18s infinite}@keyframes w33_9{0%,4%{clip-path:inset(0 100% 0 0)}46%,94%{clip-path:inset(0 -4% 0 0)}100%{clip-path:inset(0 100% 0 0)}}@keyframes lost3_9{0%,48%{opacity:0}56%,94%{opacity:.14}100%{opacity:0}}@keyframes lb3_9{0%,52%{opacity:0}58%,94%{opacity:1}100%{opacity:0}}@media(max-width:640px){#a9 .l3{grid-template-columns:1fr}#a9 .crow{grid-template-columns:1fr}#a9 .cdl{display:none}}@media (prefers-reduced-motion: reduce){#a9 *{animation:none !important}#a9 .cn em .s0{opacity:0}#a9 .cn em .s1, #a9 .cdl span{opacity:1}#a9 .ctr b{width:var(--w1)}#a9 .wc2, #a9 .wb2, #a9 .w33, #a9 .ws3{clip-path:inset(0 -4% 0 0)}#a9 .hd2{opacity:0}#a9 .an2, #a9 .lb3, #a9 .px3{opacity:1}#a9 .lost{opacity:.14}}/* ===== 10. Content — De un tema salen tres piezas ===== */
#a10 *{box-sizing:border-box}#a10 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a10 .item{border:1px solid var(--line);background:var(--card);margin-bottom:28px}#a10 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a10 .item-head .lvl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a10 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a10 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a10 .meta div{border-top:1px solid var(--line);padding-top:10px}#a10 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a10 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a10 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px;overflow:hidden}#a10 .tagex{display:inline-block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--warn);border:1px solid var(--warn);padding:3px 7px;margin-bottom:18px}#a10 .note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a10 .note b{color:var(--text);font-weight:600}#a10 .lbl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2)}#a10 .fmt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:8.5px;color:var(--lime);border:1px solid var(--lime);padding:3px 6px;display:inline-block}#a10 .src{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8.5px;color:var(--text2)}@media(max-width:640px){#a10 .meta{grid-template-columns:1fr}#a10 .stage{padding:14px}}#a10 /* ===== NIVEL 1 ===== */
.c1{display:grid;grid-template-columns:34% 1fr;gap:24px}#a10 .c1 .lbl{display:block;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}#a10 .c1-t{border-left:2px solid var(--line);padding:9px 0 9px 12px;margin-bottom:10px;font-size:13px;animation:c1t_10 15s infinite;animation-delay:var(--d)}#a10 .c1-t em{font-style:normal;display:block;margin-top:4px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8.5px;color:var(--text2)}#a10 .c1-c{border:1px solid var(--line);padding:13px 14px;margin-bottom:10px;opacity:0;transform:translateX(18px);animation:c1c_10 15s infinite;animation-delay:var(--d)}#a10 .c1-c .h{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:14.5px;margin:9px 0 7px;line-height:1.25}@keyframes c1t_10{0%,3%{border-left-color:var(--line);color:var(--text2)}8%,28%{border-left-color:var(--lime);color:var(--text)}33%,100%{border-left-color:var(--line);color:var(--text2)}}@keyframes c1c_10{0%,3%{opacity:0;transform:translateX(18px)}9%,28%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateX(-10px)}}@media(max-width:640px){#a10 .c1{grid-template-columns:1fr}}#a10 /* ===== NIVEL 2 ===== */
.c2{position:relative;height:266px}#a10 .c2-set{position:absolute;inset:0;opacity:0;animation:c2set_10 18s infinite;animation-delay:var(--d)}#a10 .c2-topic{position:absolute;left:0;top:82px;width:210px;border:1px solid var(--lime);padding:13px 14px;transform:translateX(-40px);opacity:0;animation:c2in_10 18s infinite;animation-delay:var(--d)}#a10 .c2-topic .q{font-size:13.5px;line-height:1.3;margin-top:8px}#a10 .c2-topic .n{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8.5px;color:var(--text2);margin-top:9px}#a10 .c2-link{position:absolute;left:210px;top:112px;width:52px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;animation:c2link_10 18s infinite;animation-delay:var(--d)}#a10 .c2-idea{position:absolute;left:262px;right:0;border:1px solid var(--line);padding:11px 13px;opacity:0;transform:translateY(10px);animation:c2idea_10 18s infinite}#a10 .c2-idea .h{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:14px;margin:8px 0 0;line-height:1.25}@keyframes c2set_10{0%,1%{opacity:0}2%,30%{opacity:1}32%,100%{opacity:0}}@keyframes c2in_10{0%,2%{opacity:0;transform:translateX(-40px)}7%,28%{opacity:1;transform:none}32%,100%{opacity:0;transform:translateX(-20px)}}@keyframes c2link_10{0%,7%{transform:scaleX(0)}11%,28%{transform:scaleX(1)}32%,100%{transform:scaleX(0)}}@keyframes c2idea_10{0%,10%{opacity:0;transform:translateY(10px)}15%,28%{opacity:1;transform:none}32%,100%{opacity:0;transform:translateY(-6px)}}@media(max-width:640px){#a10 .c2{height:auto;min-height:420px}#a10 .c2-topic{position:relative;top:0;width:100%;margin-bottom:12px}#a10 .c2-link{display:none}#a10 .c2-idea{position:relative;left:0;margin-bottom:8px}}#a10 /* ===== NIVEL 3 ===== */
.c3-strip{position:relative;height:158px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}#a10 .c3-track{display:flex;gap:12px;padding-left:calc(50% - 110px);height:100%;align-items:center;animation:belt_10 24s linear infinite}#a10 .c3-card{width:220px;flex:none;border:1px solid var(--line);background:var(--card);padding:13px 14px;height:124px}#a10 .c3-card .h{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:14px;margin:9px 0 8px;line-height:1.25}#a10 .c3-frame{position:absolute;left:50%;top:8px;bottom:8px;width:220px;transform:translateX(-50%);border:1px solid var(--lime);pointer-events:none}#a10 .c3-frame::after{content:'LEYENDO';position:absolute;top:-1px;left:-1px;font-family:'JetBrains Mono',monospace;letter-spacing:.14em;font-size:8px;color:#000;background:var(--lime);padding:2px 5px}#a10 .c3-brief{position:relative;margin-top:16px;border:1px solid var(--line);padding:14px;min-height:96px}#a10 .c3-brief > div{position:absolute;inset:14px;opacity:0;animation:brief_10 24s infinite;animation-delay:var(--d)}#a10 .c3-brief .t{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:15px;margin-bottom:7px}#a10 .c3-brief .d{font-size:13px;color:var(--text2);line-height:1.45}@keyframes belt_10{0%{transform:translateX(0)}100%{transform:translateX(-928px)}}@keyframes brief_10{0%{opacity:0}1%,22%{opacity:1}25%,100%{opacity:0}}@media(max-width:640px){#a10 .c3-brief{min-height:180px}}@media (prefers-reduced-motion: reduce){#a10 *{animation:none !important}#a10 .c1-c, #a10 .c2-set, #a10 .c2-topic, #a10 .c2-idea{opacity:1;transform:none}#a10 .c1-t:first-of-type{border-left-color:var(--lime)}#a10 .c2-set{position:relative;display:none}#a10 .c2-set:first-of-type{display:block;position:relative;height:266px}#a10 .c2-link{transform:scaleX(1)}#a10 .c3-track{transform:translateX(0)}#a10 .c3-brief > div{opacity:0}#a10 .c3-brief > div:first-of-type{opacity:1}}/* ===== 11. Copy — Un pedido, tres formatos a la vez ===== */
#a11 *{box-sizing:border-box}#a11 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a11 .item{border:1px solid var(--line);background:var(--card);margin-bottom:28px}#a11 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a11 .item-head .lvl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a11 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a11 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a11 .meta div{border-top:1px solid var(--line);padding-top:10px}#a11 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a11 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a11 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px;overflow:hidden}#a11 .note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a11 .note b{color:var(--text);font-weight:600}#a11 .lbl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2)}#a11 .fmt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:8.5px;color:var(--lime);border:1px solid var(--lime);padding:3px 6px;display:inline-block}@media(max-width:640px){#a11 .meta{grid-template-columns:1fr}#a11 .stage{padding:14px}}#a11 /* ===== NIVEL 1 ===== */
.k1{display:grid;grid-template-columns:210px 1fr;gap:24px}#a11 .k1-voice{border-right:1px solid var(--line);padding-right:20px}#a11 .k1-voice .lbl{display:block;margin-bottom:12px}#a11 .k1-voice ul{margin:0;padding:0}#a11 .k1-voice li{list-style:none;font-size:12.5px;color:var(--text2);padding:8px 0;border-bottom:1px solid var(--line)}#a11 .k1-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}#a11 .k1-tab{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--text2);border:1px solid var(--line);padding:5px 9px;animation:k1tab_11 13.5s infinite;animation-delay:var(--d)}#a11 .k1-out{position:relative;min-height:120px}#a11 .k1-copy{position:absolute;inset:0;opacity:0;animation:k1copy_11 13.5s infinite;animation-delay:var(--d)}#a11 .k1-copy strong{display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:17px;margin-bottom:9px}#a11 .k1-copy p{margin:0;font-size:13.5px;color:var(--text2);line-height:1.55}#a11 .k1-copy p i{font-style:normal;color:var(--text)}@keyframes k1tab_11{0%,1%{color:var(--text2);border-color:var(--line)}4%,29%{color:var(--lime);border-color:var(--lime)}33%,100%{color:var(--text2);border-color:var(--line)}}@keyframes k1copy_11{0%,2%{opacity:0}6%,28%{opacity:1}32%,100%{opacity:0}}@media(max-width:640px){#a11 .k1{grid-template-columns:1fr}#a11 .k1-voice{border-right:none;border-bottom:1px solid var(--line);padding:0 0 16px}#a11 .k1-out{min-height:170px}}#a11 /* ===== NIVEL 2 ===== */
.k2{display:grid;grid-template-columns:230px 1fr;gap:26px}#a11 .k2 .lbl{display:block;margin-bottom:12px}#a11 .k2-ask{border:1px solid var(--line);padding:12px 14px;font-size:13px;margin-bottom:20px;opacity:0;transform:translateY(-8px);animation:k2ask_11 17s infinite}#a11 .k2-rule{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted);animation:k2rule_11 17s infinite;animation-delay:var(--d)}#a11 .k2-box{width:13px;height:13px;border:1px solid var(--line);flex:none;position:relative}#a11 .k2-box::after{content:'';position:absolute;inset:3px;background:var(--lime);opacity:0;animation:k2fill_11 17s infinite;animation-delay:var(--d)}#a11 .k2-draft{border:1px solid var(--line);padding:14px;margin-bottom:16px;opacity:0;animation:k2draft_11 17s infinite}#a11 .k2-draft p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--text2)}#a11 .k2-draft p u{text-decoration:none;position:relative;color:var(--text2);animation:dim_11 17s infinite;animation-delay:var(--d)}#a11 .k2-draft p u::after{content:'';position:absolute;left:0;right:0;top:52%;height:1px;background:var(--err);transform:scaleX(0);transform-origin:left;animation:cross_11 17s infinite;animation-delay:var(--d)}#a11 .k2-final{border:1px solid var(--line);border-left:2px solid var(--lime);padding:14px;opacity:0;transform:translateY(10px);animation:k2final_11 17s infinite}#a11 .k2-final p{margin:8px 0 0;font-size:14.5px;line-height:1.6}#a11 .k2-final p span{color:var(--text2)}@keyframes k2ask_11{0%,2%{opacity:0;transform:translateY(-8px)}7%,90%{opacity:1;transform:none}97%,100%{opacity:0}}@keyframes k2draft_11{0%,10%{opacity:0}15%,90%{opacity:1}97%,100%{opacity:0}}@keyframes k2rule_11{0%,14%{color:var(--muted)}20%,90%{color:var(--text)}97%,100%{color:var(--muted)}}@keyframes k2fill_11{0%,14%{opacity:0}20%,90%{opacity:1}97%,100%{opacity:0}}@keyframes cross_11{0%,16%{transform:scaleX(0)}22%,90%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}@keyframes dim_11{0%,18%{color:var(--text2)}26%,90%{color:var(--muted)}97%,100%{color:var(--text2)}}@keyframes k2final_11{0%,52%{opacity:0;transform:translateY(10px)}60%,90%{opacity:1;transform:none}97%,100%{opacity:0}}@media(max-width:640px){#a11 .k2{grid-template-columns:1fr}}#a11 /* ===== NIVEL 3 ===== */
.k3{position:relative;min-height:290px}#a11 .k3-set{position:absolute;inset:0;opacity:0;animation:k3set_11 19s infinite;animation-delay:var(--d)}#a11 .k3-ask{border:1px solid var(--line);padding:12px 14px;font-size:13.5px;margin-bottom:18px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}#a11 .k3-ask .lbl{flex:none}#a11 .k3-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}#a11 .k3-col{border:1px solid var(--line);padding:14px;min-height:196px}#a11 .k3-col h4{margin:12px 0 10px;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:15px;line-height:1.25;opacity:0;animation:k3line_11 19s infinite;animation-delay:var(--d)}#a11 .k3-col p{margin:0 0 8px;font-size:12.5px;color:var(--text2);line-height:1.5;opacity:0;animation:k3line_11 19s infinite;animation-delay:var(--d)}#a11 .k3-col p i{font-style:normal;color:var(--text)}@keyframes k3set_11{0%{opacity:0}1%,48%{opacity:1}50%,100%{opacity:0}}@keyframes k3line_11{0%,1%{opacity:0;transform:translateY(8px)}6%,48%{opacity:1;transform:none}50%,100%{opacity:0}}@media(max-width:640px){#a11 .k3-cols{grid-template-columns:1fr}#a11 .k3{min-height:640px}#a11 .k3-col{min-height:0}}@media (prefers-reduced-motion: reduce){#a11 *{animation:none !important}#a11 .k1-copy{opacity:0}#a11 .k1-copy:first-of-type{opacity:1}#a11 .k1-tab:first-of-type{color:var(--lime);border-color:var(--lime)}#a11 .k2-ask, #a11 .k2-draft, #a11 .k2-final{opacity:1;transform:none}#a11 .k2-draft p u::after{transform:scaleX(1)}#a11 .k2-draft p u{color:var(--muted)}#a11 .k2-rule{color:var(--text)}#a11 .k2-box::after{opacity:1}#a11 .k3-set{opacity:0}#a11 .k3-set:first-of-type{opacity:1}#a11 .k3-col h4, #a11 .k3-col p{opacity:1;transform:none}}/* ===== 12. Identity — Cada agente toma lo que necesita ===== */
#a12 *{box-sizing:border-box}#a12 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a12 .item{border:1px solid var(--line);background:var(--card);margin-bottom:28px}#a12 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a12 .item-head .lvl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a12 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a12 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a12 .meta div{border-top:1px solid var(--line);padding-top:10px}#a12 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a12 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a12 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px;overflow:hidden}#a12 .note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a12 .note b{color:var(--text);font-weight:600}#a12 .lbl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2)}#a12 /* ===== NIVEL 1 ===== */
.i1{display:grid;grid-template-columns:1fr 210px;gap:26px}#a12 .i1 .lbl{display:block;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}#a12 .i1-step{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--text2);animation:i1txt_12 14s infinite;animation-delay:var(--d)}#a12 .i1-box{width:14px;height:14px;border:1px solid var(--line);flex:none;position:relative}#a12 .i1-box::after{content:'';position:absolute;inset:3px;background:var(--lime);opacity:0;animation:i1fill_12 14s infinite;animation-delay:var(--d)}#a12 .i1-ag{border:1px solid var(--line);padding:11px 12px;margin-bottom:8px;animation:i1ag_12 14s infinite;animation-delay:var(--d)}#a12 .i1-ag .n{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px}#a12 .i1-ag .s{position:relative;height:12px;margin-top:6px}#a12 .i1-ag .s span{position:absolute;left:0;top:0;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8px;white-space:nowrap}#a12 .i1-ag .s .a{color:var(--muted);animation:i1off_12 14s infinite;animation-delay:var(--d)}#a12 .i1-ag .s .b{color:var(--ok);opacity:0;animation:i1on_12 14s infinite;animation-delay:var(--d)}@keyframes i1txt_12{0%,6%{color:var(--text2)}12%,90%{color:var(--text)}97%,100%{color:var(--text2)}}@keyframes i1fill_12{0%,6%{opacity:0}12%,90%{opacity:1}97%,100%{opacity:0}}@keyframes i1ag_12{0%,8%{border-color:var(--line)}16%,90%{border-color:var(--text2)}97%,100%{border-color:var(--line)}}@keyframes i1off_12{0%,8%{opacity:1}16%,90%{opacity:0}97%,100%{opacity:1}}@keyframes i1on_12{0%,8%{opacity:0}16%,90%{opacity:1}97%,100%{opacity:0}}@media(max-width:640px){#a12 .i1{grid-template-columns:1fr}}#a12 /* ===== NIVEL 2 ===== */
.i2{position:relative;height:372px}#a12 .i2-scene{position:absolute;inset:0;opacity:0;animation:i2sc_12 22s infinite;animation-delay:var(--d)}#a12 .i2-grid{display:grid;grid-template-columns:1fr 80px 250px;gap:0;height:100%}#a12 .i2-f{border:1px solid var(--line);padding:11px 13px;height:62px;margin-bottom:10px;font-size:13px;color:var(--text2)}#a12 .i2-f em{font-style:normal;display:block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8px;color:var(--muted);margin-top:5px}#a12 .i2-f.on{border-color:var(--lime);color:var(--text)}#a12 .i2-bus{position:relative}#a12 .i2-spine{position:absolute;left:38px;top:31px;bottom:53px;width:1px;background:var(--line)}#a12 .i2-stub{position:absolute;left:0;width:38px;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:left;animation:stub_12 22s infinite;animation-delay:var(--d)}#a12 .i2-in{position:absolute;left:38px;top:186px;width:42px;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:left;animation:stub_12 22s infinite;animation-delay:var(--d)}#a12 .i2-ag{align-self:center;border:1px solid var(--lime);padding:16px}#a12 .i2-ag .n{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:17px;margin:8px 0 8px}#a12 .i2-ag .d{font-size:12.5px;color:var(--text2);line-height:1.5}@keyframes i2sc_12{0%{opacity:0}1%,23.5%{opacity:1}25%,100%{opacity:0}}@keyframes stub_12{0%,2%{transform:scaleX(0)}4%,23.5%{transform:scaleX(1)}25%,100%{transform:scaleX(0)}}@media(max-width:640px){#a12 .i2{height:auto;min-height:900px}#a12 .i2-grid{grid-template-columns:1fr}#a12 .i2-bus{display:none}#a12 .i2-ag{margin-top:14px}}#a12 /* ===== NIVEL 3 ===== */
.i3{display:grid;grid-template-columns:1fr 226px;gap:26px}#a12 .i3 .lbl{display:block;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}#a12 .i3-sec{border:1px solid var(--line);padding:12px 14px;margin-bottom:9px;opacity:0;transform:translateX(-14px);animation:i3in_12 19s infinite;animation-delay:var(--d);position:relative}#a12 .i3-sec .h{font-size:13.5px}#a12 .i3-sec .v{font-size:12px;color:var(--text2);margin-top:6px;line-height:1.45}#a12 .i3-sec .st{position:absolute;right:12px;top:12px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:7.5px;color:#000;background:var(--lime);padding:2px 5px;opacity:0;animation:i3stamp_12 19s infinite;animation-delay:var(--d)}#a12 .i3-side{border:1px solid var(--line);padding:16px}#a12 .i3-ag{padding:11px 0;border-bottom:1px solid var(--line)}#a12 .i3-ag:last-child{border-bottom:none}#a12 .i3-ag .n{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;color:var(--text)}#a12 .i3-ag .s{position:relative;height:13px;margin-top:6px}#a12 .i3-ag .s span{position:absolute;left:0;top:0;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8px;white-space:nowrap}#a12 .i3-ag .s .a{color:var(--muted);animation:i3off_12 19s infinite;animation-delay:var(--d)}#a12 .i3-ag .s .b{color:var(--ok);opacity:0;animation:i3on_12 19s infinite;animation-delay:var(--d)}@keyframes i3in_12{0%,3%{opacity:0;transform:translateX(-14px)}9%,92%{opacity:1;transform:none}97%,100%{opacity:0}}@keyframes i3stamp_12{0%,9%{opacity:0}13%,92%{opacity:1}97%,100%{opacity:0}}@keyframes i3off_12{0%,10%{opacity:1}15%,92%{opacity:0}97%,100%{opacity:1}}@keyframes i3on_12{0%,10%{opacity:0}15%,92%{opacity:1}97%,100%{opacity:0}}@media(max-width:640px){#a12 .i3{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){#a12 *{animation:none !important}#a12 .i1-box::after{opacity:1}#a12 .i1-step{color:var(--text)}#a12 .i1-ag{border-color:var(--text2)}#a12 .i1-ag .s .a{opacity:0}#a12 .i1-ag .s .b{opacity:1}#a12 .i2-scene{opacity:0}#a12 .i2-scene:first-of-type{opacity:1}#a12 .i2-stub, #a12 .i2-in{transform:scaleX(1)}#a12 .i3-sec{opacity:1;transform:none}#a12 .i3-sec .st{opacity:1}#a12 .i3-ag .s .a{opacity:0}#a12 .i3-ag .s .b{opacity:1}}/* ===== 13. CRO Agent — El agente recorre tu tienda ===== */
#a13 *{box-sizing:border-box}#a13 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a13 .item{border:1px solid var(--line);background:var(--card)}#a13 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a13 .item-head .tool{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a13 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a13 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a13 .meta div{border-top:1px solid var(--line);padding-top:10px}#a13 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a13 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a13 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px;overflow:hidden}#a13 .tagex{display:inline-block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--warn);border:1px solid var(--warn);padding:3px 7px;margin-bottom:18px}#a13 .note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a13 .note b{color:var(--text);font-weight:600}#a13 /* navegador */
.br{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--card)}#a13 .br-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line)}#a13 .br-dots{display:flex;gap:5px}#a13 .br-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}#a13 .br-url{flex:1;position:relative;height:20px;border:1px solid var(--line);background:var(--bg);border-radius:4px}#a13 .br-url span{position:absolute;left:9px;top:4px;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--text2);opacity:0;animation:url_13 21s infinite;animation-delay:var(--d)}#a13 .br-view{position:relative;height:352px;overflow:hidden;background:var(--w)}#a13 .track{display:flex;width:500%;height:100%;animation:slide_13 21s infinite}#a13 .sc{width:20%;height:100%;position:relative;background:var(--w);color:var(--wt)}#a13 /* tienda */
.sh{display:flex;align-items:center;gap:16px;padding:0 18px;height:44px;border-bottom:1px solid var(--wl)}#a13 .sh .logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em}#a13 .sh nav{display:flex;gap:14px;font-size:11px;color:var(--wm)}#a13 .sh .right{margin-left:auto;display:flex;align-items:center;gap:12px}#a13 .sh .cart{position:relative;width:15px;height:14px;border:1.4px solid var(--wt);border-radius:0 0 3px 3px}#a13 .sh .cart::before{content:'';position:absolute;top:-5px;left:3px;width:7px;height:6px;border:1.4px solid var(--wt);border-bottom:none;border-radius:4px 4px 0 0}#a13 .sh .mag{width:13px;height:13px;border:1.4px solid var(--wm);border-radius:50%;position:relative}#a13 .sh .mag::after{content:'';position:absolute;right:-4px;bottom:-2px;width:5px;height:1.4px;background:var(--wm);transform:rotate(45deg)}#a13 .body{padding:16px 18px}#a13 .hero{display:flex;align-items:center;gap:16px;background:var(--w2);border:1px solid var(--wl);padding:14px 16px;margin-bottom:14px}#a13 .hero h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;margin:0 0 6px;letter-spacing:-.01em}#a13 .hero p{margin:0 0 10px;font-size:11.5px;color:var(--wm)}#a13 .btn{display:inline-block;background:var(--wt);color:var(--w);font-size:11px;font-weight:600;padding:8px 14px}#a13 .btn.o{background:var(--w);color:var(--wt);border:1px solid var(--wt)}#a13 .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}#a13 .pc{border:1px solid var(--wl)}#a13 .pc .im{background:var(--w2);padding:10px 8px 4px}#a13 .pc .tt{font-size:11.5px;font-weight:600;padding:8px 10px 2px}#a13 .pc .pr{font-size:11.5px;color:var(--wm);padding:0 10px 10px}#a13 .sn{width:100%;height:auto;display:block}#a13 .hero .sn{width:160px;height:88px}#a13 .pc .im .sn{height:66px}#a13 .line .th .sn{height:34px}#a13 .gal .sn{height:120px}#a13 .two{display:flex;gap:18px}#a13 .gal{width:47%;background:var(--w2);border:1px solid var(--wl);padding:14px}#a13 .det h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;margin:2px 0 6px}#a13 .det .pr{font-size:17px;font-weight:700;margin-bottom:12px}#a13 .sizes{display:flex;gap:6px;margin-bottom:12px}#a13 .sizes i{width:28px;height:24px;border:1px solid var(--wl);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10px;color:var(--wm)}#a13 .sizes i.on{border-color:var(--wt);color:var(--wt)}#a13 .gap{height:34px;border:1px dashed var(--wl);margin-top:10px}#a13 .line{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--wl);padding:9px 0}#a13 .line .th{width:64px;background:var(--w2);border:1px solid var(--wl);padding:5px 4px 2px}#a13 .line .nm{flex:1;font-size:11.5px;font-weight:600}#a13 .line .nm em{display:block;font-style:normal;font-weight:400;font-size:10px;color:var(--wm);margin-top:3px}#a13 .line .pp{font-size:11.5px;font-weight:600}#a13 .tot{margin-top:12px;margin-left:auto;width:56%;border:1px solid var(--wl);padding:11px 12px}#a13 .tot div{display:flex;justify-content:space-between;font-size:11.5px;padding:4px 0;color:var(--wm)}#a13 .tot div.big{color:var(--wt);font-weight:700;border-top:1px solid var(--wl);margin-top:5px;padding-top:8px}#a13 .form{width:66%}#a13 .form .fl{font-size:10.5px;color:var(--wm);margin:0 0 4px}#a13 .form .in{height:26px;border:1px solid var(--wl);background:var(--w);margin-bottom:9px}#a13 .acct{border:1px solid var(--wl);background:var(--w2);padding:10px 11px;margin-bottom:9px}#a13 .acct p{margin:0 0 7px;font-size:11px;font-weight:600}#a13 /* marcas del agente */
.mark{position:absolute;border:1.5px solid var(--warn);opacity:0;animation:mark_13 21s infinite;animation-delay:var(--d)}#a13 .mark b{position:absolute;top:-10px;left:8px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:7.5px;color:#000;background:var(--warn);padding:2px 6px;white-space:nowrap}#a13 .find{position:relative;margin-top:16px;border:1px solid var(--line);padding:15px;min-height:90px}#a13 .find > div{position:absolute;inset:15px;opacity:0;animation:find_13 21s infinite;animation-delay:var(--d)}#a13 .find .t{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;margin-bottom:8px}#a13 .find .x{font-size:13.5px;color:var(--text2);line-height:1.5}#a13 .find .x b{color:var(--text);font-weight:600}@keyframes slide_13{0%,20%{transform:translateX(0)}25%,45%{transform:translateX(-20%)}50%,70%{transform:translateX(-40%)}75%,96%{transform:translateX(-60%)}96.5%,100%{transform:translateX(-80%)}}@keyframes url_13{0%{opacity:0}2%,23%{opacity:1}25%,100%{opacity:0}}@keyframes mark_13{0%,7%{opacity:0}11%,23%{opacity:1}25%,100%{opacity:0}}@keyframes find_13{0%{opacity:0}3%,23%{opacity:1}25%,100%{opacity:0}}@media(max-width:760px){#a13 .meta{grid-template-columns:1fr}#a13 .stage{padding:14px}#a13 .br-view{height:300px}#a13 .find{min-height:150px}#a13 .hero p, #a13 .sh nav{display:none}#a13 .hero .sn{width:118px;height:64px}#a13 .pc .im .sn{height:46px}#a13 .gal .sn{height:88px}#a13 .line .th .sn{height:28px}}@media (prefers-reduced-motion: reduce){#a13 *{animation:none !important}#a13 .track{transform:translateX(-20%)}#a13 .br-url span{opacity:0}#a13 .br-url span:nth-of-type(2){opacity:1}#a13 .mark{opacity:1}#a13 .find > div{opacity:0}#a13 .find > div:nth-of-type(2){opacity:1}}/* ===== 14. PriceFIT — Cuánto sube la chance de compra con cada descuento ===== */
#a14 *{box-sizing:border-box}#a14 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a14 .item{border:1px solid var(--line);background:var(--card);margin-bottom:28px}#a14 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a14 .item-head .tool{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a14 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a14 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a14 .meta div{border-top:1px solid var(--line);padding-top:10px}#a14 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a14 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a14 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px;overflow:hidden}#a14 .tagex{display:inline-block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--warn);border:1px solid var(--warn);padding:3px 7px;margin-bottom:18px}#a14 .note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a14 .note b{color:var(--text);font-weight:600}#a14 .lbl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2)}#a14 /* curva de probabilidad */
.chart{width:100%;height:auto;display:block;overflow:visible}#a14 .axis{stroke:var(--line);stroke-width:1}#a14 .gridln{stroke:var(--line);stroke-width:1;stroke-dasharray:2 6}#a14 .tx{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;fill:var(--text2)}#a14 .tx.lime{fill:var(--lime)}#a14 .tx.small{font-size:9px}#a14 .prob{fill:none;stroke:var(--text);stroke-width:2.2;stroke-linecap:round}#a14 .wipe{clip-path:inset(0 100% 0 0);animation:wipe_14 15s infinite}#a14 .head{fill:var(--lime);offset-path:path("M50.0 188.4 C65.0 186.6 110.0 183.6 140.0 177.6 C170.0 171.6 200.0 164.4 230.0 152.4 C260.0 140.4 290.0 115.8 320.0 105.6 C350.0 95.4 380.0 94.8 410.0 91.2 C440.0 87.6 470.0 85.8 500.0 84.0 C530.0 82.2 575.0 81.0 590.0 80.4");offset-distance:0%;offset-rotate:0deg;opacity:0;animation:ride_14 15s infinite}#a14 .pick{opacity:0;animation:pick_14 15s infinite}#a14 .g0{opacity:0;animation:g0_14 15s infinite}#a14 .legend{display:flex;gap:20px;margin-top:14px;flex-wrap:wrap}#a14 .legend span{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9px;color:var(--text2)}#a14 .legend i{width:16px;display:block}@keyframes wipe_14{0%,4%{clip-path:inset(0 100% 0 0)}36%,92%{clip-path:inset(0 0 0 0)}97%,100%{clip-path:inset(0 100% 0 0)}}@keyframes ride_14{0%,8%{offset-distance:0%;opacity:0}12%{opacity:1}44%,92%{offset-distance:51.3%;opacity:1}97%,100%{offset-distance:0%;opacity:0}}@keyframes pick_14{0%,44%{opacity:0}51%,92%{opacity:1}97%,100%{opacity:0}}@keyframes g0_14{0%,10%{opacity:0}16%,92%{opacity:1}97%,100%{opacity:0}}#a14 /* dos visitantes */
.p3{display:grid;grid-template-columns:1fr 1fr;gap:16px}#a14 .p3-card{border:1px solid var(--line);overflow:hidden}#a14 .p3-who{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--line)}#a14 .p3-who .av{width:22px;height:22px;border:1px solid var(--text2);border-radius:50%;flex:none}#a14 .p3-who .n{font-size:12.5px}#a14 .p3-who .n em{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8px;color:var(--text2);margin-top:3px}#a14 .shop{background:var(--w);color:var(--wt);padding:14px}#a14 .shop .top{display:flex;align-items:center;gap:12px}#a14 .shop .im{width:96px;background:var(--w2);border:1px solid var(--wl);padding:8px 6px 4px;flex:none}#a14 .shop .sn{width:100%;height:52px;display:block}#a14 .shop h4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;margin:0 0 7px}#a14 .shop .price{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#a14 .shop .now{font-size:17px;font-weight:700}#a14 .shop .old{font-size:12px;color:var(--wm);text-decoration:line-through}#a14 .shop .off{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.06em;background:var(--wt);color:var(--w);padding:3px 6px}#a14 .shop .just{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--wt);border:1px solid var(--wt);padding:2px 6px;animation:just_14 14s infinite}#a14 .shop .btn{display:block;text-align:center;background:var(--wt);color:var(--w);font-size:11px;font-weight:600;padding:9px;margin-top:12px}#a14 .p3-log{padding:12px 13px;font-size:12.5px;color:var(--text2);line-height:1.5}#a14 .p3-log b{color:var(--text);font-weight:600}#a14 .p3-card.a{animation:ca_14 14s infinite}#a14 .p3-card.b{animation:cb_14 14s infinite}@keyframes ca_14{0%,4%{border-color:var(--line)}9%,42%{border-color:var(--lime)}47%,100%{border-color:var(--line)}}@keyframes cb_14{0%,50%{border-color:var(--line)}56%,92%{border-color:var(--lime)}97%,100%{border-color:var(--line)}}@keyframes just_14{0%,52%{opacity:0;transform:translateY(4px)}58%,92%{opacity:1;transform:none}97%,100%{opacity:0}}@media(max-width:640px){#a14 .meta{grid-template-columns:1fr}#a14 .stage{padding:14px}#a14 .p3{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){#a14 *{animation:none !important}#a14 .wipe{clip-path:inset(0 0 0 0)}#a14 .head{offset-distance:51.3%;opacity:1}#a14 .pick, #a14 .g0{opacity:1}#a14 .shop .just{opacity:1;transform:none}}/* ===== 15. PriceFIT — Dos visitantes, dos precios ===== */
#a15 *{box-sizing:border-box}#a15 .mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}#a15 .item{border:1px solid var(--line);background:var(--card);margin-bottom:28px}#a15 .item-head{padding:20px 22px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}#a15 .item-head .tool{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--lime);border:1px solid var(--line);padding:4px 8px}#a15 .item-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.01em}#a15 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 22px 0}#a15 .meta div{border-top:1px solid var(--line);padding-top:10px}#a15 .meta dt{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2);margin-bottom:5px}#a15 .meta dd{margin:0;font-size:13px;color:var(--text2);line-height:1.45}#a15 .stage{margin:20px 22px 22px;border:1px solid var(--line);background:var(--bg);padding:22px;overflow:hidden}#a15 .tagex{display:inline-block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--warn);border:1px solid var(--warn);padding:3px 7px;margin-bottom:18px}#a15 .note{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text2);line-height:1.5}#a15 .note b{color:var(--text);font-weight:600}#a15 .lbl{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--text2)}#a15 /* curva de probabilidad */
.chart{width:100%;height:auto;display:block;overflow:visible}#a15 .axis{stroke:var(--line);stroke-width:1}#a15 .gridln{stroke:var(--line);stroke-width:1;stroke-dasharray:2 6}#a15 .tx{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;fill:var(--text2)}#a15 .tx.lime{fill:var(--lime)}#a15 .tx.small{font-size:9px}#a15 .prob{fill:none;stroke:var(--text);stroke-width:2.2;stroke-linecap:round}#a15 .wipe{clip-path:inset(0 100% 0 0);animation:wipe_15 15s infinite}#a15 .head{fill:var(--lime);offset-path:path("M50.0 188.4 C65.0 186.6 110.0 183.6 140.0 177.6 C170.0 171.6 200.0 164.4 230.0 152.4 C260.0 140.4 290.0 115.8 320.0 105.6 C350.0 95.4 380.0 94.8 410.0 91.2 C440.0 87.6 470.0 85.8 500.0 84.0 C530.0 82.2 575.0 81.0 590.0 80.4");offset-distance:0%;offset-rotate:0deg;opacity:0;animation:ride_15 15s infinite}#a15 .pick{opacity:0;animation:pick_15 15s infinite}#a15 .g0{opacity:0;animation:g0_15 15s infinite}#a15 .legend{display:flex;gap:20px;margin-top:14px;flex-wrap:wrap}#a15 .legend span{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9px;color:var(--text2)}#a15 .legend i{width:16px;display:block}@keyframes wipe_15{0%,4%{clip-path:inset(0 100% 0 0)}36%,92%{clip-path:inset(0 0 0 0)}97%,100%{clip-path:inset(0 100% 0 0)}}@keyframes ride_15{0%,8%{offset-distance:0%;opacity:0}12%{opacity:1}44%,92%{offset-distance:51.3%;opacity:1}97%,100%{offset-distance:0%;opacity:0}}@keyframes pick_15{0%,44%{opacity:0}51%,92%{opacity:1}97%,100%{opacity:0}}@keyframes g0_15{0%,10%{opacity:0}16%,92%{opacity:1}97%,100%{opacity:0}}#a15 /* dos visitantes */
.p3{display:grid;grid-template-columns:1fr 1fr;gap:16px}#a15 .p3-card{border:1px solid var(--line);overflow:hidden}#a15 .p3-who{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--line)}#a15 .p3-who .av{width:22px;height:22px;border:1px solid var(--text2);border-radius:50%;flex:none}#a15 .p3-who .n{font-size:12.5px}#a15 .p3-who .n em{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:8px;color:var(--text2);margin-top:3px}#a15 .shop{background:var(--w);color:var(--wt);padding:14px}#a15 .shop .top{display:flex;align-items:center;gap:12px}#a15 .shop .im{width:96px;background:var(--w2);border:1px solid var(--wl);padding:8px 6px 4px;flex:none}#a15 .shop .sn{width:100%;height:52px;display:block}#a15 .shop h4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;margin:0 0 7px}#a15 .shop .price{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#a15 .shop .now{font-size:17px;font-weight:700}#a15 .shop .old{font-size:12px;color:var(--wm);text-decoration:line-through}#a15 .shop .off{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.06em;background:var(--wt);color:var(--w);padding:3px 6px}#a15 .shop .just{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--wt);border:1px solid var(--wt);padding:2px 6px;animation:just_15 14s infinite}#a15 .shop .btn{display:block;text-align:center;background:var(--wt);color:var(--w);font-size:11px;font-weight:600;padding:9px;margin-top:12px}#a15 .p3-log{padding:12px 13px;font-size:12.5px;color:var(--text2);line-height:1.5}#a15 .p3-log b{color:var(--text);font-weight:600}#a15 .p3-card.a{animation:ca_15 14s infinite}#a15 .p3-card.b{animation:cb_15 14s infinite}@keyframes ca_15{0%,4%{border-color:var(--line)}9%,42%{border-color:var(--lime)}47%,100%{border-color:var(--line)}}@keyframes cb_15{0%,50%{border-color:var(--line)}56%,92%{border-color:var(--lime)}97%,100%{border-color:var(--line)}}@keyframes just_15{0%,52%{opacity:0;transform:translateY(4px)}58%,92%{opacity:1;transform:none}97%,100%{opacity:0}}@media(max-width:640px){#a15 .meta{grid-template-columns:1fr}#a15 .stage{padding:14px}#a15 .p3{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){#a15 *{animation:none !important}#a15 .wipe{clip-path:inset(0 0 0 0)}#a15 .head{offset-distance:51.3%;opacity:1}#a15 .pick, #a15 .g0{opacity:1}#a15 .shop .just{opacity:1;transform:none}}