/*
 * AyJ Informática · diseño «Hilo» (26/10/2026), encima de styles.css.
 * Idea: todo está enlazado por la IA. Una red de puntos detrás de la web que se enciende bajo el ratón,
 * un núcleo en la portada por el que pasan las tareas y la historia «Así trabaja cada tarea» contada con el scroll.
 * Eléctrico = la IA. Lima = la persona que revisa. Sin JS se ve todo en su estado final y
 * con «reducir movimiento» no se anima nada.
 */

@property --vis { syntax: "<number>"; inherits: true; initial-value: 9999; }

:root { --noche: #0f1220; --noche-2: #1a1e33; --borde-noche: rgb(255 255 255 / .14); }

/* ---------- Red de fondo (main.js la dibuja en el canvas) ---------- */
.red { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
html:not(.js) .red { display: none; }

/* Texto que se escribe solo: main.js parte el texto en letras .ch con --n y el contenedor marca cuántas se ven (--vis) */
.ch { opacity: clamp(0, var(--vis) - var(--n), 1); }

.ia-dot { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .ia-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: latidoIA 2s var(--ease) infinite; }
}
@keyframes latidoIA { 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* =====================================================================
 * Portada · hero con el núcleo
 * ===================================================================== */
.h-ia { padding-top: clamp(32px, 6vw, 80px); padding-bottom: clamp(40px, 5vw, 64px); }
.h-ia-in { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.h-copy .lead { margin-top: 22px; max-width: 54ch; }
@media (max-width: 960px) { .h-ia-in { grid-template-columns: 1fr; } }

.nucleo { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin-left: auto; font-size: clamp(12px, 1.25vw, 15px); transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
@media (max-width: 960px) { .nucleo { margin-inline: auto; } }
.n-hilos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.n-hilo, .n-pulso { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.n-hilo { stroke: #c9c5e6; stroke-width: 2; stroke-dasharray: .015 .02; }
.n-pulso { stroke: var(--electrico); stroke-width: 4; stroke-dasharray: .24 2; stroke-dashoffset: .24; }
.n-pulso.is-on { animation: viajePulso 1.1s var(--ease) forwards; }
.n-pulso[data-hilo="sale"].is-on { stroke: var(--lima); animation-duration: .7s; }
@keyframes viajePulso { to { stroke-dashoffset: -1; } }

.n-entradas { position: absolute; inset: 0 0 auto; height: 19.6%; }
.n-in { position: absolute; top: 0; width: 31%; height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: .55em; row-gap: 3px; padding: .6em .75em; border: 1.5px solid var(--tinta); border-radius: 16px; background: var(--papel); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.n-in:nth-child(1) { left: 1.6%; }
.n-in:nth-child(2) { left: 34.5%; }
.n-in:nth-child(3) { left: 67.4%; }
.n-ico { grid-row: span 2; align-self: center; width: 2.3em; height: 2.3em; display: grid; place-items: center; border-radius: 8px; background: var(--tinta); color: #fff; font: 500 .72em var(--mono); }
.n-in b { font-size: .92em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-in small { color: var(--tinta-3); font-size: .78em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-in.is-on { transform: translateY(-6px); border-color: var(--electrico); box-shadow: 5px 5px 0 var(--electrico); }
.n-in.is-on .n-ico { background: var(--electrico); }

.n-core { position: absolute; left: 50%; top: 50%; width: 23%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: var(--noche); color: #fff; box-shadow: 0 0 0 6px var(--papel), 0 0 0 7.5px var(--tinta); transition: background-color .4s, box-shadow .4s; }
.n-core b { position: relative; z-index: 1; font: 600 2em/1 var(--display); letter-spacing: -.04em; }
.n-core i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--electrico); opacity: 0; }
.n-core-t { position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0; white-space: nowrap; font: 500 .72em var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); transition: color .3s; }
.nucleo[data-fase="2"] .n-core { background: var(--electrico); }
.nucleo[data-fase="2"] .n-core-t { color: var(--electrico); }
@media (prefers-reduced-motion: no-preference) {
  .n-core i { animation: onda 3s var(--ease) infinite; }
  .n-core i:nth-child(2) { animation-delay: 1s; }
  .n-core i:nth-child(3) { animation-delay: 2s; }
  .nucleo[data-fase="2"] .n-core i { animation-duration: 1.1s; border-color: var(--electrico); }
  .nucleo[data-fase="2"] .n-core b { animation: pensar .55s ease-in-out infinite alternate; }
}
@keyframes onda { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes pensar { to { transform: scale(.9); } }

.n-salidas { position: absolute; left: 4%; right: 4%; top: 69%; bottom: 1%; }
.n-out { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .35em; padding: 1em 1.15em; border: 1.5px solid var(--tinta); border-radius: 18px; background: var(--papel); box-shadow: 7px 7px 0 var(--tinta); }
.n-out-k { display: flex; align-items: center; gap: 8px; font: 500 .74em var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--electrico); }
.n-out-txt { font-size: 1.2em; line-height: 1.45; }
.n-sello { position: absolute; right: 14px; bottom: -16px; display: inline-flex; align-items: center; gap: 6px; padding: .55em 1.05em; border: 1.5px solid var(--tinta); border-radius: 999px; background: var(--lima); box-shadow: 3px 3px 0 var(--tinta); font-weight: 700; font-size: .92em; rotate: -4deg; }
.n-mano, .esc-mano { position: absolute; left: 0; top: 0; z-index: 3; display: inline-flex; align-items: center; gap: 4px; font: 600 .78rem var(--sans); color: var(--tinta); pointer-events: none; }
.n-mano svg, .esc-mano svg { width: 20px; height: 20px; fill: var(--lima); stroke: var(--tinta); stroke-width: 1.6; stroke-linejoin: round; }
.n-mano span, .esc-mano span { margin-top: 18px; padding: 2px 9px; border: 1.5px solid var(--tinta); border-radius: 999px; background: var(--lima); white-space: nowrap; font-size: .72rem; }

/* Sin JS: el primer caso, ya aprobado. Con JS, main.js enseña un caso cada vez y lo cuenta en fases. */
.n-out + .n-out { display: none; }
.n-mano { display: none; }
.js .nucleo[data-fase] .n-out { display: flex; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s .45s; }
.js .nucleo[data-fase] .n-out.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .55s var(--ease); }
.js .nucleo[data-fase] .n-out-txt { --vis: var(--letras, 9999); transition: --vis 1.5s linear; }
.js .nucleo[data-fase] .n-out:not(.is-escrito) .n-out-txt { --vis: 0; transition: none; }
.js .nucleo[data-fase] .fix ins { display: inline-block; transition: opacity .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.js .nucleo[data-fase] .fix del { transition: color .3s, text-decoration-color .3s; }
.js .nucleo[data-fase] .n-out:not(.is-corregido) .fix ins { opacity: 0; transform: scale(.3); }
.js .nucleo[data-fase] .n-out:not(.is-corregido) .fix del { color: inherit; text-decoration-color: transparent; }
.js .nucleo[data-fase] .n-sello { transition: opacity .25s, scale .5s cubic-bezier(.3, 1.6, .5, 1); }
.js .nucleo[data-fase] .n-out:not(.is-aprobado) .n-sello { opacity: 0; scale: 1.7; }
.js .nucleo[data-fase] .n-mano { display: inline-flex; opacity: 0; transform: translate(calc(var(--mx, 0) * 1px + 60px), calc(var(--my, 0) * 1px + 60px)); transition: opacity .3s, transform .7s var(--ease); }
.js .nucleo[data-fase] .n-out.is-mano .n-mano { opacity: 1; transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px)); }
.js .nucleo[data-fase] .n-out.is-aprobado .n-mano { opacity: 0; transition-delay: .4s; }

/* =====================================================================
 * Portada · «Así trabaja cada tarea»: la sección se queda fija y la historia avanza con el scroll.
 * main.js pone .is-viva, data-cap (0-4) y --k0…--k4 (avance de cada capítulo, de 0 a 1).
 * Sin JS (o sin .is-viva) se ve la lista de pasos y la escena terminada.
 * ===================================================================== */
.historia { --k0: 1; --k1: 1; --k2: 1; --k3: 1; --k4: 1; padding-block: var(--seccion); }
.historia-in { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.historia-txt h2 { max-width: 14ch; }
.caps { display: grid; gap: 22px; margin-top: 32px; counter-reset: c; }
.cap-n { display: block; margin-bottom: 6px; font: 500 .76rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--electrico); }
.cap[data-cap="3"] .cap-n { color: var(--lima-osc); }
.cap strong { display: block; font: 600 clamp(1.15rem, 1.8vw, 1.4rem)/1.2 var(--display); letter-spacing: -.02em; }
.cap-d { display: block; margin-top: 6px; color: var(--tinta-2); }
.saltar { display: none; }
.hilo-pasos { display: none; }
@media (max-width: 960px) { .historia-in { grid-template-columns: 1fr; } }

/* La escena: una ventana oscura con rejilla, donde se ve trabajar a la IA */
.escena { position: relative; padding: clamp(14px, 2vw, 22px); border: 1.5px solid var(--tinta); border-radius: 28px; background: var(--noche) radial-gradient(rgb(255 255 255 / .08) 1px, transparent 1.2px) 0 0 / 22px 22px; color: #fff; box-shadow: 10px 10px 0 var(--electrico); overflow: hidden; }
.esc-barra { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font: 500 .72rem var(--mono); letter-spacing: .04em; color: rgb(255 255 255 / .55); }
.esc-barra i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .2); }
.esc-barra span { margin-left: 8px; }
.esc-cuerpo { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas: "mail datos" "borr borr" "env env"; gap: 14px; align-items: start; }
.esc-k { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 500 .7rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: rgb(255 255 255 / .55); }

.esc-mail { grid-area: mail; position: relative; padding: 16px 18px; border-radius: 16px; background: var(--papel); color: var(--tinta); overflow: hidden; opacity: var(--k0); transform: translateY(calc((1 - var(--k0)) * 40px)); }
.esc-de { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .9rem; }
.esc-de small { margin-left: auto; font: 500 .72rem var(--mono); color: var(--tinta-3); }
.esc-ico { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--tinta); color: #fff; font: 500 .72rem var(--mono); }
.esc-txt { font-size: 1rem; line-height: 1.5; }
.dato { padding: 0 .12em; border-radius: 4px; background: linear-gradient(var(--electrico-suave), var(--electrico-suave)) no-repeat 0 0 / calc(var(--k1) * 100%) 100%; box-shadow: inset 0 calc(var(--k1) * -2px) 0 var(--electrico); }
.esc-scan { position: absolute; left: 0; right: 0; top: calc(var(--k1) * 100%); height: 36px; translate: 0 -100%; background: linear-gradient(to bottom, transparent, rgb(91 61 245 / .22)); border-bottom: 2px solid var(--electrico); opacity: min(var(--k1) * 12, (1 - var(--k1)) * 12, 1); pointer-events: none; }

.esc-datos { grid-area: datos; }
.esc-datos > .esc-k:first-child { opacity: min(var(--k1) * 6, 1); }
.esc-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.esc-lista li { display: inline-grid; padding: 6px 10px; border: 1px solid var(--borde-noche); border-radius: 10px; background: rgb(255 255 255 / .06); font-weight: 600; font-size: .9rem; line-height: 1.2; opacity: clamp(0, var(--k1) * 6 - var(--d), 1); transform: translateY(calc((1 - clamp(0, var(--k1) * 6 - var(--d), 1)) * 8px)); }
.esc-lista small { font: 500 .62rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: rgb(255 255 255 / .5); }
.esc-tuyos li { border-color: rgb(200 241 53 / .45); color: var(--lima); }
.esc-datos > .esc-k:nth-of-type(2) { opacity: clamp(0, var(--k1) * 6 - 3, 1); }

.esc-borrador { grid-area: borr; position: relative; padding: 16px 18px 22px; border-radius: 16px; background: var(--papel); color: var(--tinta); opacity: min(var(--k2) * 5, 1); transform: translateY(calc((1 - min(var(--k2) * 5, 1)) * 24px)); transition: box-shadow .4s; }
.esc-borrador .esc-k { color: var(--electrico); }
.esc-estado { margin-left: auto; color: var(--tinta-3); text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 600; font-size: .8rem; }
.esc-estado span { display: none; }
.esc-estado .e-ok { display: inline; color: var(--lima-osc); }
.esc-escrito { font-size: 1.06rem; line-height: 1.55; }
.esc-aviso { display: none; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: #fff1e6; color: #a34700; font-size: .88rem; font-weight: 600; }
.esc-mano { display: none; }
.esc-sello { position: absolute; right: 16px; bottom: -16px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1.5px solid var(--tinta); border-radius: 999px; background: var(--lima); box-shadow: 3px 3px 0 var(--tinta); font-weight: 700; font-size: .9rem; rotate: -4deg; }
.esc-enviado { grid-area: env; justify-self: end; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 14px; border-radius: 999px; background: rgb(200 241 53 / .14); color: var(--lima); font: 500 .78rem var(--mono); letter-spacing: .03em; }

/* Con la historia viva (JS y movimiento): la sección mide cinco pantallas y la escena se queda fija */
.historia.is-viva { height: 520vh; padding-block: 0; }
.historia.is-viva .historia-pin { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3vh, 36px); overflow: hidden; }
.historia.is-viva .caps { display: grid; margin-top: clamp(16px, 3vh, 32px); }
.historia.is-viva .cap { grid-area: 1 / 1; opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .45s var(--ease), transform .55s var(--ease), filter .45s; }
.historia.is-viva .cap strong { font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.08; }
.historia.is-viva .cap-d { margin-top: 12px; font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 34ch; }
.historia.is-viva .saltar { display: inline-block; margin-top: clamp(16px, 3vh, 32px); font-size: .88rem; color: var(--tinta-3); text-decoration: underline; text-underline-offset: .2em; }
.historia.is-viva .hilo-pasos { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }
.hilo-pasos::before, .hilo-pasos::after { content: ""; position: absolute; left: 10%; right: 10%; top: 7px; height: 2px; background: var(--linea); }
.hilo-pasos::after { right: auto; width: calc(var(--avance, 0) * 80%); background: var(--electrico); }
.hilo-pasos li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; font: 500 .7rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); text-align: center; }
.hilo-pasos i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linea); background: var(--papel); transition: background-color .3s, border-color .3s, transform .3s var(--ease); }

/* Capítulo activo, escena por capítulo y puntos del hilo encendidos */
.historia.is-viva[data-cap="0"] .cap[data-cap="0"], .historia.is-viva[data-cap="1"] .cap[data-cap="1"], .historia.is-viva[data-cap="2"] .cap[data-cap="2"],
.historia.is-viva[data-cap="3"] .cap[data-cap="3"], .historia.is-viva[data-cap="4"] .cap[data-cap="4"] { opacity: 1; transform: none; filter: none; }
.historia.is-viva .hilo-pasos li:nth-child(1) i, .historia.is-viva:not([data-cap="0"]) .hilo-pasos li:nth-child(2) i,
.historia.is-viva:is([data-cap="2"], [data-cap="3"], [data-cap="4"]) .hilo-pasos li:nth-child(3) i,
.historia.is-viva:is([data-cap="3"], [data-cap="4"]) .hilo-pasos li:nth-child(4) i, .historia.is-viva[data-cap="4"] .hilo-pasos li:nth-child(5) i { background: var(--electrico); border-color: var(--electrico); transform: scale(1.15); }
.historia.is-viva:is([data-cap="3"], [data-cap="4"]) .hilo-pasos li:nth-child(4) i { background: var(--lima); border-color: var(--tinta); }
.historia.is-viva .hilo-pasos li:nth-child(1), .historia.is-viva:not([data-cap="0"]) .hilo-pasos li:nth-child(2),
.historia.is-viva:is([data-cap="2"], [data-cap="3"], [data-cap="4"]) .hilo-pasos li:nth-child(3),
.historia.is-viva:is([data-cap="3"], [data-cap="4"]) .hilo-pasos li:nth-child(4), .historia.is-viva[data-cap="4"] .hilo-pasos li:nth-child(5) { color: var(--tinta); }

.historia.is-viva .esc-estado span { display: none; }
.historia.is-viva[data-cap="2"] .esc-estado .e-ia { display: inline; color: var(--electrico); }
.historia.is-viva[data-cap="3"] .esc-estado .e-per { display: inline; color: #a34700; }
.historia.is-viva[data-cap="4"] .esc-estado .e-ok { display: inline; }
.historia.is-viva .fix ins { display: inline-block; transition: opacity .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.historia.is-viva .fix del { transition: color .3s, text-decoration-color .3s; }
.historia.is-viva:not(.is-corregido) .fix ins { opacity: 0; transform: scale(.3); }
.historia.is-viva:not(.is-corregido) .fix del { color: inherit; text-decoration-color: transparent; }
.historia.is-viva[data-cap="3"]:not(.is-corregido) .fix del { background: #fff1e6; color: #a34700; border-radius: 4px; text-decoration: underline wavy #ff7a00; text-underline-offset: 4px; }
.historia.is-viva[data-cap="3"] .esc-aviso { display: block; animation: entraSuave .4s var(--ease); }
.historia.is-viva .esc-mano { display: inline-flex; opacity: 0; transform: translate(calc(var(--hx, 0) * 1px), calc(var(--hy, 0) * 1px)); }
.historia.is-viva[data-cap="3"] .esc-mano { opacity: 1; }
.historia.is-viva .esc-sello { transition: opacity .25s, scale .5s cubic-bezier(.3, 1.6, .5, 1); }
.historia.is-viva:not(.is-aprobado) .esc-sello { opacity: 0; scale: 1.8; }
.historia.is-viva.is-aprobado .esc-borrador { box-shadow: 0 0 0 3px var(--lima); }
.historia.is-viva .esc-enviado { transition: opacity .4s var(--ease), transform .5s var(--ease); }
.historia.is-viva:not(.is-enviado) .esc-enviado { opacity: 0; transform: translateX(-20px); }
@keyframes entraSuave { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 960px) {
  .historia.is-viva .historia-in { gap: 14px; align-content: center; }
  .historia.is-viva .historia-txt h2 { font-size: 1.05rem; font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; max-width: none; }
  .historia.is-viva .historia-txt h2 mark { background: none; padding: 0; color: var(--electrico); }
  .historia.is-viva .caps { margin-top: 8px; }
  .historia.is-viva .cap-n { display: none; }
  .historia.is-viva .cap strong { font-size: clamp(1.3rem, 5.6vw, 1.7rem); }
  .historia.is-viva .cap-d { margin-top: 6px; font-size: .95rem; }
  .historia.is-viva .saltar { display: none; }
  .historia.is-viva .hilo-pasos li span { display: none; }
}
@media (max-width: 620px) {
  .escena { border-radius: 22px; box-shadow: 6px 6px 0 var(--electrico); }
  .esc-cuerpo { grid-template-columns: 1fr; grid-template-areas: "mail" "datos" "borr" "env"; gap: 10px; }
  .esc-mail, .esc-borrador { padding: 12px 14px; }
  .esc-borrador { padding-bottom: 20px; }
  .esc-txt, .esc-escrito { font-size: .92rem; }
  .esc-lista { margin-bottom: 6px; }
  .esc-lista li { font-size: .8rem; padding: 4px 8px; }
  .esc-datos .esc-k { margin-bottom: 6px; }
  .esc-barra { margin-bottom: 10px; }
  .esc-enviado { margin-top: 6px; }
  .esc-aviso { font-size: .8rem; padding: 6px 10px; }
}
@media (max-width: 620px) and (max-height: 760px) {
  .historia.is-viva .esc-datos > .esc-k { display: none; }
  .historia.is-viva .esc-barra { display: none; }
}

/* =====================================================================
 * Portada · servicios con una escena pequeña en cada bloque (solo CSS, se anima al verse)
 * ===================================================================== */
.svc a { gap: 10px; }
.mini { position: relative; display: block; height: 108px; margin: -4px 0 10px; }
.svc-procesos .mini { height: clamp(150px, 18vw, 210px); margin-bottom: 18px; }
.mini * { animation-play-state: paused; }
.svc.is-in .mini *, html:not(.js) .mini * { animation-play-state: running; }

/* Procesos: los documentos viajan por el hilo y las filas de la hoja se rellenan */
.mp-hilo { position: absolute; left: 4%; right: 36%; top: 50%; border-top: 2px dashed rgb(255 255 255 / .4); }
.mp-ia { position: absolute; left: 30%; top: 50%; z-index: 1; width: 56px; height: 56px; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: var(--tinta); color: #fff; font: 600 1rem var(--display); box-shadow: 0 0 0 5px var(--electrico), 0 0 0 6.5px rgb(255 255 255 / .5); animation: mpIa 1.5s ease-in-out infinite; }
@keyframes mpIa { 0%, 30%, 100% { scale: 1; } 40% { scale: 1.12; } }
.mp-docs i { position: absolute; left: 0; top: 50%; width: 46px; height: 58px; translate: 0 -50%; display: grid; place-items: center; border-radius: 9px; background: var(--papel); color: var(--tinta); border: 1.5px solid var(--tinta); font: 500 .62rem var(--mono); font-style: normal; animation: mpDoc 4.5s var(--ease) infinite; opacity: 0; }
.mp-docs i:nth-child(2) { animation-delay: 1.5s; }
.mp-docs i:nth-child(3) { animation-delay: 3s; }
@keyframes mpDoc { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 20% { left: 22%; scale: 1; opacity: 1; } 27% { left: 26%; scale: .3; opacity: 0; } 30% { left: 34%; scale: .3; opacity: 0; } 36% { left: 38%; scale: 1; opacity: 1; background: var(--lima); } 52% { left: 52%; opacity: 1; scale: 1; background: var(--lima); } 62%, 100% { left: 58%; opacity: 0; scale: .5; background: var(--lima); } }
.mp-hoja { position: absolute; right: 0; top: 0; bottom: 0; width: 34%; display: grid; align-content: center; gap: 9px; padding: 14px; border-radius: 14px; background: var(--papel); border: 1.5px solid var(--tinta); }
.mp-hoja i { position: relative; height: 9px; border-radius: 5px; background: #e8e6f5; overflow: hidden; }
.mp-hoja i::after { content: ""; position: absolute; inset: 0; background: var(--lima); transform-origin: 0 50%; transform: scaleX(0); animation: mpFila 9s var(--ease) infinite; animation-play-state: inherit; }
@keyframes mpFila { 0%, 22% { transform: scaleX(0); } 30%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
.mp-hoja i:nth-child(n)::after { animation-delay: calc(var(--f, 0) * 1s); }
.mp-hoja i:nth-child(1) { --f: .3; } .mp-hoja i:nth-child(2) { --f: 1.8; } .mp-hoja i:nth-child(3) { --f: 3.3; }
.mp-hoja i:nth-child(4) { --f: 4.8; } .mp-hoja i:nth-child(5) { --f: 6.3; } .mp-hoja i:nth-child(6) { --f: 7.8; }

/* Chatbot: la conversación aparece sola y al final entra una persona */
.mini-asistentes { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.ma-b { max-width: 86%; padding: 6px 11px; border-radius: 12px; font-size: .8rem; font-weight: 600; line-height: 1.25; opacity: 0; }
.ma-cli { align-self: flex-start; background: var(--papel); border: 1.5px solid var(--tinta); border-bottom-left-radius: 4px; animation: maCli 7s var(--ease) infinite; }
.ma-ia { align-self: flex-end; background: var(--tinta); color: #fff; border-bottom-right-radius: 4px; animation: maIa 7s var(--ease) infinite; }
.ma-per { align-self: center; padding: 4px 10px; border-radius: 999px; border: 1.5px dashed var(--tinta); font: 500 .66rem var(--mono); text-transform: uppercase; letter-spacing: .03em; animation: maPer 7s var(--ease) infinite; }
@keyframes maCli { 0%, 4% { opacity: 0; transform: translateY(8px); } 10%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes maIa { 0%, 22% { opacity: 0; transform: translateY(8px); } 28%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes maPer { 0%, 46% { opacity: 0; transform: scale(.8); } 52%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

/* Integraciones: dos aplicaciones unidas por un hilo con datos en las dos direcciones */
.mini-integraciones { display: flex; align-items: center; gap: 0; }
.mi-app { flex: none; width: 74px; height: 74px; display: grid; place-items: center; border: 1.5px solid var(--tinta); border-radius: 18px; background: var(--niebla); font: 500 .66rem var(--mono); text-transform: uppercase; }
.mi-app:last-child { background: var(--electrico-suave); }
.mi-hilo { position: relative; flex: 1; height: 2px; background: var(--linea); }
.mi-hilo i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--electrico); animation: miIda 2.4s var(--ease) infinite; }
.mi-hilo i + i { background: var(--lima); border: 1.5px solid var(--tinta); animation-name: miVuelta; animation-delay: 1.2s; }
@keyframes miIda { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes miVuelta { 0% { left: calc(100% - 10px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }

/* Web con SEO: la búsqueda y tu web que sube al primer puesto */
.mw-busca { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1.5px solid var(--tinta); border-radius: 999px; font-size: .78rem; color: var(--tinta-2); }
.mw-busca::before { content: ""; width: 9px; height: 9px; border: 2px solid var(--tinta); border-radius: 50%; }
.mw-res { position: relative; display: block; height: 66px; margin-top: 10px; }
.mw-res i { position: absolute; left: 0; height: 16px; border-radius: 5px; background: #e8e6f5; font-style: normal; }
.mw-res i:nth-child(1) { top: 0; width: 78%; animation: mwBaja 6s var(--ease) infinite; }
.mw-res i:nth-child(3) { top: 50px; width: 64%; }
.mw-tu { top: 25px; width: 70%; height: 18px !important; padding-left: 8px; background: var(--lima) !important; border: 1.5px solid var(--tinta); font: 600 .66rem/15px var(--sans); animation: mwSube 6s var(--ease) infinite; }
@keyframes mwSube { 0%, 30% { top: 25px; } 45%, 90% { top: 0; } 100% { top: 25px; } }
@keyframes mwBaja { 0%, 30% { top: 0; } 45%, 90% { top: 25px; } 100% { top: 0; } }

/* Redes: el calendario del mes y tu visto bueno en cada publicación */
.mr-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; height: 100%; align-content: center; }
.mr-grid i { position: relative; aspect-ratio: 1; border-radius: 10px; border: 1.5px solid var(--tinta); background: var(--niebla); }
.mr-grid i:nth-child(2n) { background: var(--electrico-suave); }
.mr-grid i::after { content: "✓"; position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--tinta); background: var(--lima); font-size: .66rem; font-weight: 800; transform: scale(0); animation: mrOk 6s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: calc(var(--r) * .5s); animation-play-state: inherit; }
.mr-grid i:nth-child(1) { --r: 0; } .mr-grid i:nth-child(2) { --r: 1; } .mr-grid i:nth-child(3) { --r: 2; }
.mr-grid i:nth-child(4) { --r: 3; } .mr-grid i:nth-child(5) { --r: 4; } .mr-grid i:nth-child(6) { --r: 5; }
@keyframes mrOk { 0%, 5% { transform: scale(0); } 12%, 85% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
@media (max-width: 600px) { .mr-grid { grid-template-columns: repeat(3, 1fr); } .mini-redes { height: 128px; } .mp-hoja { width: 38%; padding: 10px; gap: 7px; } .mp-docs i { width: 36px; height: 46px; } .mp-ia { width: 46px; height: 46px; font-size: .85rem; } }

/* =====================================================================
 * Preguntas frecuentes con lecturas al lado
 * ===================================================================== */
.faq-lee-k { margin-top: 28px; font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); }
.faq-lee { display: grid; gap: 4px; margin: 10px 0 18px; }
.faq-lee a { display: block; padding: 10px 0; border-bottom: 1px solid var(--linea); color: var(--tinta); font-weight: 600; line-height: 1.3; }
.faq-lee a:hover { color: var(--electrico); text-decoration: none; }

/* =====================================================================
 * Servicios: el ejemplo como un hilo con un pulso que baja por los pasos
 * ===================================================================== */
.ejemplo-paso:nth-child(n) { margin-left: 0; }
.ejemplo { padding-left: 34px; }
.ejemplo::before, .ejemplo::after { left: 9px; }
.ejemplo-paso { position: relative; }
.ejemplo-paso::before { content: ""; position: absolute; left: -32px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--papel); border: 2px solid var(--tinta); }
.ejemplo-paso:nth-child(2)::before { background: var(--electrico); }
.ejemplo-paso:nth-child(3)::before { background: var(--lima); }
.ejemplo-paso:nth-child(4)::before { background: var(--tinta); }
.ejemplo-caja { position: relative; padding: clamp(18px, 2.4vw, 28px) clamp(16px, 2.4vw, 28px) clamp(20px, 2.6vw, 30px); border: 1.5px solid var(--tinta); border-radius: 28px; background: var(--noche) radial-gradient(rgb(255 255 255 / .08) 1px, transparent 1.2px) 0 0 / 22px 22px; box-shadow: 10px 10px 0 var(--electrico); }
.ejemplo-k { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: rgb(255 255 255 / .6); }
.ejemplo-paso { border-color: transparent; }
.ejemplo-paso:nth-child(4) { background: #262a44; }
.ejemplo-paso::before { border-color: var(--papel); }
.ejemplo::before { background: rgb(255 255 255 / .15); }
.ejemplo-paso:nth-child(1)::before { background: var(--noche); }
.ejemplo-paso:nth-child(4)::before { background: var(--papel); }
/* Un pulso lima baja por el hilo una y otra vez cuando los pasos ya están encendidos */
.ejemplo-pulso { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .ejemplo-pulso { display: block; position: absolute; left: calc(clamp(16px, 2.4vw, 28px) + 9px - 4px); top: 70px; width: 11px; height: 11px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 4px rgb(200 241 53 / .25); opacity: 0; }
  .js .ejemplo-caja:has(.ejemplo-paso:last-child.is-on) .ejemplo-pulso { animation: bajaPulso 3.2s var(--ease) .4s infinite; }
}
@keyframes bajaPulso { 0% { top: 60px; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { top: calc(100% - 50px); opacity: 0; } }
@media (max-width: 520px) { .js .ejemplo-pulso { left: calc(16px + 6px - 4px); } }
@media (max-width: 960px) { .ejemplo::before, .ejemplo::after { display: block; } }
@media (max-width: 520px) { .ejemplo { padding-left: 28px; } .ejemplo::before, .ejemplo::after { left: 6px; } .ejemplo-paso::before { left: -28px; } }

/* =====================================================================
 * Sin movimiento: todo quieto y visible
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mini * , .mini *::after { animation: none !important; opacity: 1 !important; }
  .mp-docs i:nth-child(n) { left: calc(var(--x, 0) * 1%); }
  .mp-docs i:nth-child(2) { --x: 18; } .mp-docs i:nth-child(3) { --x: 36; }
  .mp-hoja i::after { transform: scaleX(1); }
  .mr-grid i::after { transform: scale(1); }
  .mi-hilo i { display: none; }
}