x-dc{display:none!important}
html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}
html{scroll-behavior:smooth}
body{margin:0}
/* El padding entra dentro del ancho, no se suma por fuera.
Sin esto, un contenedor con width:100% + padding desborda. */
*,*::before,*::after{box-sizing:border-box}
a{color:var(--ph-heliotrope);text-decoration:none}
a:hover{color:var(--ph-bone)}
.anim-paused *{animation-play-state:paused !important}
.anim-off *{animation:none !important}
/* El sombrero se separa del borde derecho (~5 cm) y crece un 10 %.
Se dimensiona por ANCHO: el vídeo es 16:9 y el sombrero ocupa
solo parte del fotograma, así que fijar el alto lo dejaba pequeño. */
.hero-vid{position:absolute;top:50%;right:clamp(-110px,-1vw,-40px);transform:translateY(-50%);width:min(63vw,1035px);height:auto;max-height:96vh;object-fit:contain;pointer-events:none;z-index:1}
/* Los cuatro enlaces no caben en un móvil y empujan el ancho.
Se ocultan bajo 760px: el contenido de esas secciones se
alcanza igual haciendo scroll. */
@media(max-width:760px){ .hero-nav{display:none !important} }
/* El titular va en dos líneas exactas: la pregunta arriba, la
respuesta abajo. El salto lo marca el , no el ancho de caja,
así que no depende de dónde caiga el texto. */
/* ---- HEADER en tres zonas: marca | enlaces centrados | herramientas.
La línea inferior respeta el gutter y no llega a los bordes,
igual que en producción (.nav de 64 a 1343 en 1407px). ---- */
.hero-head{position:relative;z-index:3;display:grid;
grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
max-width:var(--ph-wrap);width:100%;margin:0 auto;
padding:0 var(--ph-gutter);height:77px;box-sizing:border-box}
.hero-head::after{content:"";position:absolute;left:var(--ph-gutter);
right:var(--ph-gutter);bottom:0;height:1px;background:var(--ph-line)}
.hero-nav{display:flex;align-items:center;justify-content:center;gap:30px;
font-family:var(--ph-display);font-size:.92rem}
.hero-nav a{color:var(--ph-bone-dim);transition:color var(--ph-fast)}
.hero-nav a:hover{color:var(--ph-bone)}
.hero-tools{display:flex;align-items:center;justify-content:flex-end;gap:18px}
/* toggle de idioma: la píldora de producción */
.lang{display:inline-flex;border:1px solid var(--ph-line-strong);
border-radius:var(--ph-radius-pill);overflow:hidden}
.lang button{background:none;border:0;cursor:pointer;
font-family:var(--ph-mono);font-size:.68rem;letter-spacing:.1em;
padding:6px 13px;color:var(--ph-bone-faint);
transition:background var(--ph-fast),color var(--ph-fast)}
.lang button.on{background:var(--ph-bone);color:#1B0F24}
.lang button:not(.on):hover{color:var(--ph-bone)}
.head-cta{font-family:var(--ph-display);font-size:.92rem;font-weight:600;
color:var(--ph-bone);white-space:nowrap;transition:color var(--ph-fast)}
.head-cta:hover{color:var(--ph-heliotrope)}
@media(max-width:1080px){ .head-cta{display:none} }
@media(max-width:760px){
.hero-head{grid-template-columns:1fr auto}
.hero-nav{display:none !important}
}
/* ---- cuerpo del hero ---- */
.hero-body{position:relative;z-index:2;flex:1;display:flex;
align-items:flex-start;max-width:var(--ph-wrap);width:100%;
margin:0 auto;padding:108px var(--ph-gutter) 64px}
.hero-copy{max-width:700px;display:flex;flex-direction:column;
gap:22px;align-items:flex-start}
/* El titular en dos líneas exactas: el corte lo marca el marcado,
no el ancho de caja, así que no baila al cambiar de pantalla. */
.hero-h1{font-size:clamp(2.3rem,4.9vw,4.05rem);margin:0;
max-width:none;text-wrap:nowrap}
.hero-h1 .l2{display:block;margin-top:.08em}
/* Titular de tres líneas: mismo cuerpo que los de dos, con el
interlineado un punto más apretado para que las tres quepan
sin invadir el sombrero. */
.h1-tres{line-height:1.02}
.h1-tres .l2,.h1-tres .l3{display:block;margin-top:.02em}
@media(max-width:900px){ .hero-h1{text-wrap:balance} }
/* Solo se ve la variante activa.
El estado lo llevan radios ocultos, no JavaScript: el runtime de
Claude Design re-renderiza con React y descartaba cualquier clase
que le pusiéramos desde fuera. Con :checked el CSS manda. */
/* Titular elegido: el 11. El selector de comparación y las otras
diez variantes se retiraron. */
.hv{display:block}
/* ---- ticker de cierre: hallazgos reales desplazándose ---- */
.hero-ticker{position:relative;z-index:2;border-top:1px solid var(--ph-line);
overflow:hidden;padding:14px 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hero-ticker .tk{display:flex;gap:52px;width:max-content;
animation:kfTicker 46s linear infinite}
.hero-ticker span{font-family:var(--ph-mono);font-size:.7rem;
letter-spacing:.1em;color:var(--ph-bone-faint);white-space:nowrap}
.hero-ticker b{font-weight:400}
.hero-ticker .ok{color:var(--ph-viridian)}
.hero-ticker .warn{color:var(--ph-ember)}
@keyframes kfTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* El póster ocupa el sitio del vídeo desde el primer pintado y se
desvanece en cuanto el vídeo tiene fotogramas. Ambos comparten
.hero-vid, así que coinciden en tamaño y posición. */
.hero-vid-poster{z-index:1;transition:opacity .5s var(--ph-ease)}
.hero-lista .hero-vid-poster{opacity:0}
/* ── CARRUSEL DE LA PLATAFORMA ───────────────────────────
Seis capturas apiladas son seis rectángulos oscuros que
nadie mira. De una en una, cada una tiene sitio para
explicarse. Scroll-snap nativo: se arrastra con el dedo,
con la rueda y con los puntos, sin una línea de JS. */
#plataforma{padding:clamp(22px,3.4svh,64px) 0}
/* en pantallas bajas el encabezado se aprieta antes que la
tarjeta: el argumento está en la captura, no en el intro */
#plataforma h2{font-size:clamp(1.4rem,3.4svh,2.9rem) !important}
#plataforma > div > div:first-child{gap:clamp(6px,1.2svh,18px) !important}
#plataforma > div > div:first-child p{font-size:clamp(.9rem,1.75svh,1.08rem) !important}
#plataforma > div{gap:clamp(14px,2.2svh,32px) !important}
/* La captura es 16:10. Si el carril fuera tan ancho como la
página, al limitar la altura la imagen quedaría diminuta con
un vacío enorme a los lados. El carril se estrecha a lo que
esa proporción pide y se centra. */
.cr-wrap{position:relative;display:flex;flex-direction:column;
gap:clamp(12px,1.8svh,26px);overflow:hidden;
border-radius:var(--ph-radius);
width:min(100%, calc((100svh - 250px) * 1.6), 1180px);
align-self:center}
.cr-pista{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding:4px 0 10px;scrollbar-width:none;-ms-overflow-style:none}
.cr-pista::-webkit-scrollbar{display:none}
.cr-card{scroll-snap-align:center;flex:0 0 100%;margin:0;position:relative;
background:var(--ph-card);border:1px solid var(--ph-line);
border-radius:var(--ph-radius);overflow:hidden;
display:flex;flex-direction:column;
transition:border-color var(--ph-fast),transform var(--ph-fast)}
.cr-card:hover{border-color:var(--ph-line-strong)}
.cr-shot{position:relative;background:var(--ph-void)}
/* manda el alto de pantalla, no la proporción: así la tarjeta
entera cabe sin scroll. La captura recorta por abajo, que
es donde el dashboard tiene menos información. */
/* la captura conserva su proporción: se ve entera, sin recortes
ni huecos laterales. La altura sale del ancho del carril. */
.cr-shot img{display:block;width:100%;aspect-ratio:16/10;
object-fit:contain;background:var(--ph-void)}
/* velo inferior: la captura funde con el pie en vez de cortar */
.cr-shot::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;
pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(27,16,41,.72))}
/* el pie se superpone al pie de la captura, sobre un velo:
así no roba altura a la imagen */
.cr-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:clamp(12px,2svh,22px) clamp(16px,1.4vw,26px);
display:flex;flex-direction:column;gap:clamp(4px,.8svh,8px);
background:linear-gradient(180deg,transparent,rgba(21,11,30,.82) 22%,
rgba(21,11,30,.96));
backdrop-filter:blur(3px)}
.cr-tit{font-family:var(--ph-mono);font-size:.68rem;letter-spacing:.16em;
color:var(--ph-heliotrope)}
.cr-txt{margin:0;color:var(--ph-bone-dim);
font-size:clamp(.88rem,1.7svh,1rem);text-wrap:pretty}
/* el remate es lo que convierte una captura en un argumento */
.cr-rem{margin:0;padding-top:clamp(6px,1svh,10px);
border-top:1px solid var(--ph-line);
color:var(--ph-viridian);font-size:clamp(.82rem,1.55svh,.92rem);
font-weight:600;text-wrap:pretty}
/* Flechas a los lados en vez de barras abajo: mover el carrusel
no debe desplazar la página (los enlaces ancla lo hacían). */
.cr-fl{position:absolute;top:calc(50% - 40px);transform:translateY(-50%);
z-index:4;width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(21,11,30,.72);backdrop-filter:blur(8px);
border:1px solid var(--ph-line-strong);color:var(--ph-bone);
cursor:pointer;transition:all var(--ph-fast);padding:0}
.cr-fl:hover{background:var(--ph-royal);border-color:var(--ph-heliotrope);
color:var(--ph-bone)}
.cr-fl:focus-visible{outline:2px solid var(--ph-heliotrope);outline-offset:2px}
.cr-fl-izq{left:14px}
.cr-fl-der{right:14px}
.cr-fl[disabled]{opacity:.28;cursor:default}
@media(max-width:900px){
.cr-card{flex:0 0 100%}
.cr-cap{padding:20px 20px 22px}
}
/* ══════════════════════════════════════════════════════════
MÓVIL — reestructuración, no sólo reducción
Medido en iPhone 14 (390×844): el sitio pedía 16,8 pantallas
de scroll. Tres secciones se llevaban 2 pantallas cada una
por apilar en vertical lo que en escritorio va en columnas.
Aquí esas rejillas se convierten en carriles horizontales y
los ritmos verticales se atan al alto real del teléfono.
══════════════════════════════════════════════════════════ */
@media(max-width:760px){
/* — ritmo general — 120px arriba y abajo es un cuarto de
pantalla desperdiciado en cada sección — */
section{padding-top:clamp(44px,7svh,64px) !important;
padding-bottom:clamp(44px,7svh,64px) !important}
section > div{gap:clamp(20px,3.4svh,32px) !important}
h2{font-size:clamp(1.45rem,6.4vw,1.9rem) !important;
line-height:1.15 !important}
.ph-eyebrow{font-size:.6rem !important}
/* — carril horizontal reutilizable: lo que en escritorio es
una rejilla, aquí se desliza con el pulgar — */
.m-carril{display:flex !important;
flex-direction:row !important;
grid-template-columns:none !important;
overflow-x:auto;scroll-snap-type:x mandatory;
gap:14px !important;
margin-inline:calc(var(--ph-gutter) * -1);
padding-inline:var(--ph-gutter);
padding-bottom:10px;
scrollbar-width:none;-ms-overflow-style:none}
.m-carril::-webkit-scrollbar{display:none}
.m-carril > *{scroll-snap-align:center;flex:0 0 78vw}
/* el borde derecho se desvanece: señal de que hay más */
.m-carril,.eq-grid,#diagramas > div{
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%)}
/* — EQUIPO: ni apilados (1.160px de pulgar) ni en carril
(3,5 pantallas de deslizamiento para ver a los siete).
En rejilla de tres columnas con retrato circular caben
todos a la vez, como una ficha de contacto. — */
.eq-grid{display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
max-width:100%;
gap:18px 10px !important;overflow:visible !important;
margin-inline:0 !important;padding-inline:0 !important;
mask-image:none !important;-webkit-mask-image:none !important}
.eq-p{gap:8px !important;align-items:center;text-align:center;
min-width:0}
.eq-foto{aspect-ratio:1 !important;border-radius:50% !important;
object-position:50% 18% !important}
.eq-nom{font-size:.78rem;line-height:1.2}
.eq-rol{font-size:.54rem;letter-spacing:.06em;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden}
/* — AGENTE: la tabla de 4×3 no cabe en 390px. Cada fila pasa
a ser un bloque con sus dos estados uno junto al otro — */
/* la tabla pasa de 3 columnas a 2: la clave manda sobre su
propia fila y debajo van los dos estados enfrentados */
.ag-tabla > div{grid-template-columns:1fr 1fr !important;
font-size:.86rem !important}
.ag-tabla .ag-clave{grid-column:1 / -1;
padding:12px 14px 3px !important;
font-family:var(--ph-mono);font-size:.6rem !important;
letter-spacing:.14em;text-transform:uppercase;
color:var(--ph-bone-faint);border:0 !important}
.ag-tabla .ag-antes,.ag-tabla .ag-con{
padding:3px 14px 12px !important;
border-bottom:1px solid var(--ph-line) !important;
border-left:0 !important;line-height:1.35}
.ag-tabla .ag-con{color:var(--ph-bone);
border-left:1px solid var(--ph-line) !important}
/* las dos cabeceras ANTES / CON EL AGENTE sobran: cada par ya
se lee enfrentado */
.ag-tabla > div > div:nth-child(-n+3){display:none}
#agente-chat{min-height:0 !important;padding:16px 14px !important}
#agente-chat > div[style*="flex:1"]{min-height:0 !important}
/* en móvil basta con ver la conversación; el alto lo marca el
contenido, no un mínimo fijo */
.ag-col{height:auto !important;gap:0 !important}
#agente-chat div[style*="max-width"]{font-size:.88rem !important;
padding:9px 12px !important}
.ag-av{width:38px !important}
.ag-av-msg{width:22px !important}
/* — PROBLEMA: las 3 tarjetas de síntomas, en carril — */
#problema .ph-card{padding:20px 18px !important}
#problema .ph-card h3{font-size:1rem !important;margin:8px 0 6px !important}
#problema .ph-card p{font-size:.9rem}
/* — CAPAS / LEY / CLIENTES: rejillas de tarjetas en carril — */
.m-carril .ph-card{height:100%}
/* — el pozo de sondas ocupa media pantalla sin decir nada
nuevo en móvil: se recorta — */
#contacto svg{max-width:300px;margin-inline:auto}
/* — formularios: campos más bajos, botón a todo el ancho — */
#contacto input,#contacto textarea{padding:12px 14px !important;
font-size:16px !important} /* 16px evita el zoom de iOS */
#contacto textarea{min-height:88px !important}
#contacto .ph-btn{width:100%;justify-content:center}
/* — FAQ: los desplegables se aprietan — */
#faq details summary{padding:14px 0 !important;font-size:.98rem !important}
#faq details p{font-size:.92rem}
/* — AGENTE: la lista de 3 viñetas y el párrafo de cierre dicen
lo que la tabla ya demuestra. En móvil se recortan — */
#agente ul{gap:9px !important}
#agente ul li{font-size:.9rem}
#agente > div > div:first-child > p:last-child{display:none}
/* — HERO: el sombrero ocupa pantalla sin aportar en móvil,
y el ticker de hallazgos es una línea de más — */
#hero{min-height:auto !important}
.hero-h1{font-size:clamp(1.9rem,8.4vw,2.6rem) !important}
/* — DIAGRAMAS: dos tarjetas altas con SVG; en carril ocupan
una sola pantalla — */
#diagramas > div{display:flex !important;
flex-direction:row !important;
grid-template-columns:none !important;
overflow-x:auto;scroll-snap-type:x mandatory;
gap:14px !important;
margin-inline:calc(var(--ph-gutter) * -1);
padding-inline:var(--ph-gutter);padding-bottom:10px;
scrollbar-width:none}
#diagramas > div > div{scroll-snap-align:center;
flex:0 0 84vw;padding:20px 18px !important}
/* — LEY: los cinco plazos y el bloque de multas se aprietan — */
#ley p{font-size:.94rem}
/* — CONTACTO: el formulario es lo único que importa; el pozo
de sondas pasa detrás — */
#contacto > div{gap:24px !important}
/* — el titular ocupaba 7 líneas: se aprieta el cuerpo y el
interlineado para que quepa en 4 — */
.hero-h1{font-size:clamp(1.62rem,6.9vw,2.15rem) !important;
line-height:1.12 !important;text-wrap:balance}
.hero-h1 .l2,.hero-h1 .l3{margin-top:0 !important}
/* — nada por debajo de 11px: en un teléfono no se lee — */
.ph-eyebrow{font-size:.68rem !important;letter-spacing:.12em !important}
#agente .ag-clave,.cr-tit{font-size:.66rem !important}
[style*="font-size:.68rem"],[style*="font-size:.66rem"],
[style*="font-size:.62rem"]{font-size:.7rem !important}
/* — zonas de toque: el mínimo cómodo son 44px — */
.hero-nav a,.head-cta,#faq summary,.ph-btn,
nav a,.lang a,.lang button{min-height:44px;
display:flex;align-items:center}
.lang button,.lang a{min-width:44px;min-height:44px;
display:inline-flex;align-items:center;justify-content:center}
/* — el ticker del hero se sale por la derecha: es decorativo
y en móvil solo estorba — */
.hero-ticker{display:none !important}
/* — los dos botones del hero, uno sobre otro y a todo el
ancho: "Agenda una consultoría" se salía 160px — */
#hero .ph-btn{width:100%;justify-content:center;
text-align:center;padding:14px 18px !important}
/* el div que agrupa los dos botones lleva gap:14px en línea */
#hero div[style*="gap:14px"]{flex-direction:column !important;
width:100%;gap:10px !important;align-items:stretch !important}
#hero .ph-btn{width:100% !important;box-sizing:border-box}
/* — el conmutador de idioma tenía 26px de alto — */
.lang,.lang *{min-height:44px}
/* — 10,9px sigue siendo poco para leer de un vistazo — */
.ph-eyebrow{font-size:.74rem !important}
#agente .ag-clave{font-size:.76rem !important}
/* estos cuerpos van en estilos en línea, así que se apuntan
por el propio atributo para poder subirlos */
[style*="font-size:.68rem"],[style*="font-size:.66rem"],
[style*="font-size:.7rem"],[style*="font-size:.72rem"],
[style*="font-size:.62rem"]{font-size:.74rem !important}
.ag-cab-tx i{font-size:.72rem !important}
/* — el titular en 4 líneas: cada frase en la suya — */
.hero-h1{font-size:clamp(1.5rem,6.4vw,2rem) !important}
/* el CTA de la cabecera arrancaba en x=379 de 390px: fuera de
pantalla. En móvil sobra, el mismo botón está en el hero */
.head-cta{display:none !important}
.hero-tools{gap:10px !important}
/* las etiquetas mono de 10,6px van en estilos en línea y no las
alcanzaba ningún selector: se suben por atributo exacto */
[style*="font-size:.68rem"]{font-size:.75rem !important}
[style*="font-size:.66rem"]{font-size:.75rem !important}
[style*="font-size:.72rem"]{font-size:.76rem !important}
.cr-tit,.ag-clave,.eq-rol{font-size:.76rem !important}
/* Las etiquetas mono llevan el cuerpo en estilos en línea, con
muchos valores distintos. En vez de perseguirlos, se fija un
mínimo para toda la tipografía mono: 12px, el mínimo cómodo
de lectura en un teléfono. */
[style*="var(--ph-mono)"]{font-size:max(.75rem, 1em) !important}
.ph-eyebrow,.cr-tit,.ag-clave,.eq-rol,
[style*="letter-spacing:.18em"],[style*="letter-spacing:.16em"],
[style*="letter-spacing:.14em"]{font-size:.75rem !important}
/* el SVG no hereda rem: sus textos se agrandan aparte */
svg text{font-size:12px}
/* el sombrero del hero (507px) sangra por la derecha a
propósito, pero arrastraba el ancho de la página: 58px de
scroll lateral. El hero recorta lo que sobra. */
#hero{overflow-x:clip}
body{overflow-x:hidden}
/* la rejilla del equipo se pasaba 8px: el hueco entre columnas
se descuenta del reparto, no se suma al ancho */
#equipo .eq-grid{gap:16px 8px !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
overflow:hidden !important}
#equipo .eq-p{min-width:0;max-width:100%}
#equipo .eq-foto{max-width:100%}
/* el ticker de la sección de diagramas también sobresalía */
#diagramas > div > div{min-width:0}
/* el sombrero cruzaba por detrás del titular y le restaba
legibilidad: en móvil se atenúa y se aparta */
.hero-vid{opacity:.30 !important;
right:-34% !important;width:min(96vw,430px) !important}
/* — pistas de deslizamiento: sin esto nadie sabe que hay más
tarjetas a la derecha — */
.m-pista{display:flex !important;align-items:center;gap:8px;
font-family:var(--ph-mono);font-size:.58rem;letter-spacing:.14em;
color:var(--ph-bone-faint);text-transform:uppercase;
margin-top:-6px}
.m-pista::after{content:"";flex:1;height:1px;
background:linear-gradient(90deg,var(--ph-line-strong),transparent)}
}
/* la pista sólo tiene sentido donde hay carril */
.m-pista{display:none}
/* ── EQUIPO ──────────────────────────────────────────────
Siete personas. minmax(150px) para que en escritorio
entren las siete en una fila y no quede una huérfana. */
.eq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px}
.eq-p{display:flex;flex-direction:column;gap:10px}
/* los retratos vienen cuadrados; object-fit los encaja en 4:5
sin deformar, recortando por los lados */
.eq-foto{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
border:1px solid var(--ph-line);border-radius:var(--ph-radius);display:block;
filter:saturate(.92)}
.eq-nom{font-weight:600;font-size:.98rem;line-height:1.2}
.eq-rol{font-family:var(--ph-mono);font-size:.66rem;letter-spacing:.13em;
color:var(--ph-heliotrope);line-height:1.45}
/* ── PURPLE AGENT ────────────────────────────────────────
La sección entra entera en una pantalla, sin scroll: en vez
de alturas fijas se ata al alto real del viewport (svh), así
se adapta a cualquier monitor. El padding también se encoge. */
#agente{padding:clamp(48px,6svh,90px) 0 !important}
/* las dos columnas miden lo mismo y ese alto manda sobre la sección */
#agente > div{align-items:stretch !important}
.ag-col{display:flex;flex-direction:column;gap:16px;min-height:0;
height:calc(100svh - clamp(150px,18svh,220px))}
/* El agente ya no va en un banner aparte: vive dentro del chat.
Así queda claro que él es quien contesta, y el chat ocupa
toda la columna. */
.ag-cab{display:flex;align-items:center;gap:12px;
border-bottom:1px solid var(--ph-line);padding-bottom:14px}
.ag-av{width:clamp(34px,4.6svh,46px);aspect-ratio:1;border-radius:50%;
object-fit:cover;object-position:50% 46%;flex-shrink:0;
border:1px solid var(--ph-line-strong);
box-shadow:0 0 0 3px rgba(169,107,216,.14)}
.ag-cab-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ag-cab-tx b{font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.ag-cab-tx i{font-style:normal;font-family:var(--ph-mono);
font-size:.62rem;letter-spacing:.11em;color:var(--ph-bone-faint);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* cada respuesta lleva su cara al lado: se ve de quién viene */
.ag-resp{display:flex;gap:10px;align-items:flex-start}
.ag-av-msg{width:clamp(22px,2.9svh,28px);aspect-ratio:1;border-radius:50%;
object-fit:cover;object-position:50% 46%;flex-shrink:0;margin-top:2px;
border:1px solid var(--ph-line)}
/* el chat se queda con todo el alto restante. La conversación
completa debe caber sin scroll interno: por eso el cuerpo de
letra, el relleno y los huecos se atan al alto de pantalla.
A 940px de alto se ve a tamaño pleno; en pantallas bajas se
aprieta lo justo para que los cuatro mensajes quepan. */
#agente-chat{flex:1 1 auto;min-height:0 !important;overflow:hidden;
scroll-behavior:smooth;
padding:clamp(11px,2.2svh,26px) clamp(14px,1.4vw,26px) !important;
gap:clamp(6px,1.2svh,16px) !important;
font-size:clamp(.92rem,2svh,1.16rem)}
/* la zona de mensajes es la que se desplaza, no la tarjeta */
.ag-msgs{overflow-y:auto;scroll-behavior:smooth;scrollbar-width:none;
-ms-overflow-style:none}
.ag-msgs::-webkit-scrollbar{display:none}
/* las burbujas heredan el cuerpo del contenedor en vez de 1rem fijo */
#agente-chat div[style*="max-width"]{font-size:inherit;
padding:clamp(10px,1.5svh,15px) clamp(14px,1.2vw,19px) !important;
line-height:1.5 !important}
/* el hueco entre mensajes también cede */
#agente-chat > div[style*="flex:1"]{gap:clamp(5px,1svh,14px) !important}
/* la cabecera y el campo de entrada son fijos: se encogen antes que
los mensajes, que son lo que hay que leer */
#agente-chat > div:first-child{padding-bottom:clamp(8px,1.3svh,14px) !important}
#agente-chat > div:last-child{padding:clamp(8px,1.3svh,12px) clamp(12px,1vw,16px) !important;
font-size:clamp(.78rem,1.6svh,.92rem) !important}
/* La columna de texto manda su propio alto: una barra de scroll
interna que corta la tabla es peor que una sección algo más
alta. Solo el chat se ajusta al viewport. */
#agente > div > div:first-child{min-height:0}
/* pantallas bajas: el interlineado y los huecos se aprietan */
@media(max-height:820px){
#agente h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.ag-col{gap:12px}
}
/* por debajo de 760px de alto el escalado del texto ya no alcanza:
la franja cede altura (es decorativa) para que la conversación
entera siga cabiendo sin scroll interno */
@media(max-height:760px){
#agente{padding:clamp(34px,4svh,60px) 0 !important}
.ag-col{gap:10px}
}
/* en móvil vuelve a fluir en vertical, sin límites de alto */
@media(max-width:900px){
#agente{padding:96px 0 !important}
.ag-col,#agente > div > div:first-child{max-height:none;overflow:visible}
#agente-chat{min-height:420px !important}
}
/* margin-top separa las dos líneas sin depender de un espacio
en el marcado, que se colapsa al ser display:block */
.hero-h1 .l2{display:block;margin-top:.08em}
/* Titular de tres líneas: mismo cuerpo que los de dos, con el
interlineado un punto más apretado para que las tres quepan
sin invadir el sombrero. */
.h1-tres{line-height:1.02}
.h1-tres .l2,.h1-tres .l3{display:block;margin-top:.02em}
@media(max-width:900px){ .hero-h1{text-wrap:balance} }
/* Los cinco plazos de la ANCI no caben en una fila estrecha:
se reparten en dos, y el texto se corta antes de desbordar. */
@media(max-width:560px){
.ley-hitos{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:14px 8px !important}
.ley-hitos > *{min-width:0;overflow-wrap:anywhere}
}
@media(max-width:860px){
.hero-vid{right:50%;transform:translate(50%,-50%);height:auto;width:min(130vw,600px);max-width:none;opacity:.34;
-webkit-mask-image:radial-gradient(ellipse 58% 58% at 50% 50%,#000 52%,transparent 76%);
mask-image:radial-gradient(ellipse 58% 58% at 50% 50%,#000 52%,transparent 76%)}
}
/* cadena de escalamiento */
@keyframes kfChain1{0%,3%{opacity:0;transform:translateX(-12px)}6%{opacity:1;transform:none}90%{opacity:1}95%,100%{opacity:0}}
@keyframes kfChain2{0%,10%{opacity:0;transform:translateX(-12px)}13%{opacity:1;transform:none}90%{opacity:1}95%,100%{opacity:0}}
@keyframes kfChain3{0%,17%{opacity:0;transform:translateX(-12px)}20%{opacity:1;transform:none}90%{opacity:1}95%,100%{opacity:0}}
@keyframes kfChain4{0%,24%{opacity:0;transform:translateX(-12px)}27%{opacity:1;transform:none}90%{opacity:1}95%,100%{opacity:0}}
@keyframes kfChain5{0%,31%{opacity:0;transform:translateX(-12px)}34%{opacity:1;transform:none}90%{opacity:1}95%,100%{opacity:0}}
@keyframes kfChainFin{0%,42%{opacity:0;transform:translateY(8px)}46%{opacity:1;transform:none}90%{opacity:1}95%,100%{opacity:0}}
/* ddos */
@keyframes kfBreathe{from{transform:scaleY(.9)}to{transform:scaleY(1.1)}}
@keyframes kfSpikeA{0%,28%{transform:scaleY(1);background:rgba(201,166,242,.38)}33%{transform:scaleY(2.55);background:var(--ph-ember)}40%{transform:scaleY(2.15);background:var(--ph-ember)}48%,100%{transform:scaleY(1);background:rgba(201,166,242,.38)}}
@keyframes kfSpikeB{0%,31%{transform:scaleY(1);background:rgba(201,166,242,.38)}36%{transform:scaleY(2.05);background:var(--ph-ember)}43%{transform:scaleY(1.8);background:var(--ph-ember)}52%,100%{transform:scaleY(1);background:rgba(201,166,242,.38)}}
@keyframes kfAlerta{0%,38%{opacity:0;transform:translateY(6px)}42%,72%{opacity:1;transform:none}78%,100%{opacity:0}}
/* topología */
@keyframes kfDash{to{stroke-dashoffset:-26}}
@keyframes kfTopoBad{0%,100%{fill:rgba(255,138,115,.22);stroke:var(--ph-ember)}50%{fill:rgba(255,138,115,.38);stroke:var(--ph-ember)}}
@keyframes kfLinkBad{0%,100%{stroke:var(--ph-ember);opacity:.75}50%{stroke:var(--ph-ember);opacity:1}}
@keyframes kfPulso{0%{opacity:.8;transform:scale(.5)}70%{opacity:0;transform:scale(2.2)}100%{opacity:0;transform:scale(2.2)}}
@keyframes kfEtiqueta{0%,100%{opacity:1}50%{opacity:.5}}
/* purple teaming */
@keyframes kfTeamEmber{0%{stroke-dashoffset:560;opacity:1}5%{stroke-dashoffset:560}30%{stroke-dashoffset:0}46%{opacity:1;stroke-dashoffset:0}52%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes kfTeamVir{0%,50%{stroke-dashoffset:560;opacity:0}53%{opacity:1;stroke-dashoffset:560}78%{stroke-dashoffset:0}94%{opacity:1;stroke-dashoffset:0}100%{opacity:0}}
@keyframes kfBadgeA{0%{opacity:0;transform:translateY(4px)}6%,40%{opacity:1;transform:none}45%,100%{opacity:0}}
@keyframes kfBadgeB{0%,50%{opacity:0;transform:translateY(4px)}56%,92%{opacity:1;transform:none}96%,100%{opacity:0}}
/* ley 21.663 */
@keyframes kfLey{0%,4%{width:0%;opacity:1}78%{width:100%}90%{width:100%;opacity:1}96%{opacity:0}100%{width:0%;opacity:0}}
@keyframes kfHito1{0%,3%{opacity:.35}5%,90%{opacity:1}96%,100%{opacity:.35}}
@keyframes kfHito2{0%,16%{opacity:.35}19%,90%{opacity:1}96%,100%{opacity:.35}}
@keyframes kfHito3{0%,31%{opacity:.35}34%,90%{opacity:1}96%,100%{opacity:.35}}
@keyframes kfHito4{0%,45%{opacity:.35}48%,90%{opacity:1}96%,100%{opacity:.35}}
@keyframes kfHito5{0%,74%{opacity:.35}77%,90%{opacity:1}96%,100%{opacity:.35}}
/* pozo de sondas */
/* purple teaming · el mismo camino recorrido dos veces.
0-40%: fase roja (por donde se entra)
45-90%: fase verde (el mismo trazo, ya cerrado) */
@keyframes kfTrazoA{0%{stroke-dashoffset:480;opacity:1}20%,40%{stroke-dashoffset:0;opacity:1}
46%{stroke-dashoffset:0;opacity:0}47%,100%{stroke-dashoffset:480;opacity:0}}
@keyframes kfTrazoB{0%,48%{stroke-dashoffset:480;opacity:1}68%,94%{stroke-dashoffset:0;opacity:1}
97%{opacity:0}98%,100%{stroke-dashoffset:480;opacity:0}}
@keyframes kfNodoAB{0%,10%{stroke:var(--ph-line-strong)}
16%,42%{stroke:var(--ph-ember)}46%,58%{stroke:var(--ph-line-strong)}
64%,94%{stroke:var(--ph-viridian)}98%,100%{stroke:var(--ph-line-strong)}}
@keyframes kfMal{0%,12%{opacity:0}18%,40%{opacity:1}45%,100%{opacity:0}}
@keyframes kfBien{0%,60%{opacity:0}66%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes kfTacha{0%,60%{opacity:0;transform:scale(.4)}
68%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.4)}}
@keyframes kfOrbita{to{transform:rotate(360deg)}}
/* las etiquetas de los servicios viajan con su punto pero giran al
revés sobre el mismo centro: nunca quedan del revés */
@keyframes kfOrbitaInv{to{transform:rotate(-360deg)}}
@keyframes kfReticula{to{transform:rotate(-360deg)}}
@keyframes kfHaz{to{stroke-dashoffset:-40}}
/* el pulso recorre el radio completo: de la sonda al destino */
@keyframes kfPulsoRadio{from{stroke-dashoffset:var(--largo)}
to{stroke-dashoffset:0}}
/* chat */
@keyframes kfCursor{0%,45%{opacity:1}50%,100%{opacity:0}}
@keyframes kfPensar{0%,100%{opacity:.25}40%{opacity:1}}
/* cursor y puntos del chat: antes venían del componente */
.ag-cur{display:inline-block;width:8px;height:1em;vertical-align:text-bottom;
margin-left:2px;animation:kfCursor 1s steps(1) infinite}
.ag-cur-q{background:var(--ph-heliotrope)}
.ag-cur-a{background:var(--ph-viridian)}
.ag-pt{width:6px;height:6px;border-radius:50%;background:var(--ph-heliotrope);
animation:kfPensar 1.1s ease-in-out infinite}
/* clases derivadas de los atributos style= del marcado:
la CSP de producción (style-src 'self') bloquea los estilos
en línea, así que cada declaración vive aquí */
.sccdcd6d{background: var(--ph-void); color: var(--ph-bone); font-family: var(--ph-sans)}
.s11d5a81{position: relative; min-height: min(820px, 100svh); display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(90% 80% at 88% 118%, rgba(150, 70, 190, 0.34), transparent 58%), radial-gradient(70% 60% at 96% 40%, rgba(88, 24, 74, 0.34), transparent 60%), linear-gradient(128deg, rgb(21, 11, 30) 0%, rgb(30, 16, 48) 34%, rgb(44, 22, 66) 62%, rgb(58, 28, 80) 100%)}
.s72d8565{height: 34px; aspect-ratio: 197 / 30; display: block}
.s80f1bed{display: flex; flex-direction: column; gap: 26px; align-items: flex-start}
.sc400130{margin: 0px; font-size: 1.14rem; color: var(--ph-bone-dim); max-width: 34em; text-wrap: pretty}
.s76f227b{display: flex; gap: 14px; flex-wrap: wrap}
.sd6bb13c{background: var(--ph-viridian); color: rgb(11, 33, 23); font-weight: 600}
.s7ce1062{font-family: var(--ph-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--ph-bone-faint)}
.s6caab9d{background: var(--ph-void); padding: 120px 0px}
.s279b7c2{max-width: var(--ph-wrap); margin: 0px auto; padding-inline: var(--ph-gutter); display: flex; flex-direction: column; gap: 56px}
.sf22b9cb{max-width: 720px; display: flex; flex-direction: column; gap: 18px}
.se63f13a{font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 0px; text-wrap: balance}
.sa075ba0{margin: 0px; color: var(--ph-bone-dim); font-size: 1.08rem; text-wrap: pretty}
.s5d60971{display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; align-items: stretch}
.s35b83f5{background: var(--ph-card); border: 1px solid var(--ph-line); border-radius: var(--ph-radius); padding: 34px 30px; display: flex; flex-direction: column; gap: 6px}
.sd1bd2de{font-family: var(--ph-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ph-bone-faint); margin-bottom: 14px}
.sb04fa48{display: flex; align-items: center; gap: 14px; padding: 10px 0px; border-bottom: 1px solid var(--ph-line); animation: kfChain1 7s var(--ph-ease) infinite}
.sc21ca29{font-family: var(--ph-mono); color: var(--ph-bone-faint); width: 16px}
.sa09ca68{flex: 1 1 0%}
.s45ccda3{font-family: var(--ph-mono); color: var(--ph-heliotrope)}
.s436667b{display: flex; align-items: center; gap: 14px; padding: 10px 0px; border-bottom: 1px solid var(--ph-line); animation: kfChain2 7s var(--ph-ease) infinite}
.s3a14e85{display: flex; align-items: center; gap: 14px; padding: 10px 0px; border-bottom: 1px solid var(--ph-line); animation: kfChain3 7s var(--ph-ease) infinite}
.s993cd1e{display: flex; align-items: center; gap: 14px; padding: 10px 0px; border-bottom: 1px solid var(--ph-line); animation: kfChain4 7s var(--ph-ease) infinite}
.s0277396{display: flex; align-items: center; gap: 14px; padding: 10px 0px; animation: kfChain5 7s var(--ph-ease) infinite}
.sfb88cd4{font-family: var(--ph-mono); color: var(--ph-ember); width: 16px}
.s120040f{flex: 1 1 0%; color: var(--ph-ember)}
.s098acf3{font-family: var(--ph-mono); color: var(--ph-ember); font-weight: 600}
.sd0a8da2{margin-top: 22px; padding: 14px 16px; border: 1px solid rgba(63, 217, 155, 0.35); border-radius: var(--ph-radius); display: flex; align-items: center; gap: 12px; animation: kfChainFin 7s var(--ph-ease) infinite}
.s491a9e2{width: 8px; height: 8px; border-radius: 50%; background: var(--ph-viridian); box-shadow: rgba(63, 217, 155, 0.18) 0px 0px 0px 4px; flex-shrink: 0}
.sbe732a0{color: var(--ph-viridian); font-weight: 600}
.se911df3{display: flex; flex-direction: column; gap: 18px}
.sc943e48{border-top: 2px solid var(--ph-ember)}
.sc74c10f{font-family: var(--ph-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--ph-ember)}
.s98b0a58{margin: 10px 0px 8px; font-size: 1.12rem}
.s4df5cd9{margin: 0px; color: var(--ph-bone-dim); text-wrap: pretty}
.sa0bcfa1{background: var(--ph-aubergine); padding: 120px 0px; border-top: 1px solid var(--ph-line)}
.s24449dd{max-width: var(--ph-wrap); margin: 0px auto; padding-inline: var(--ph-gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; align-items: center}
.s7356d29{display: flex; flex-direction: column; gap: 22px}
.sd002d3c{margin: 0px; padding: 0px; list-style: none; display: flex; flex-direction: column; gap: 14px; color: var(--ph-bone-dim)}
.s8f624a5{display: flex; gap: 12px}
.s08f1b09{color: var(--ph-viridian); font-family: var(--ph-mono)}
.s4ccfa43{border: 1px solid var(--ph-line); border-radius: var(--ph-radius); overflow: hidden; margin-top: 8px}
.s8970f2d{display: grid; grid-template-columns: 1.1fr 1fr 1fr; font-size: 0.86rem}
.s69036fd{padding: 11px 14px; border-bottom: 1px solid var(--ph-line); font-family: var(--ph-mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--ph-bone-faint)}
.s00153a0{padding: 11px 14px; border-bottom: 1px solid var(--ph-line); border-left: 1px solid var(--ph-line); font-family: var(--ph-mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--ph-bone-faint)}
.seb24380{padding: 11px 14px; border-bottom: 1px solid var(--ph-line); border-left: 1px solid var(--ph-line); font-family: var(--ph-mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--ph-viridian)}
.s2d44a51{padding: 11px 14px; border-bottom: 1px solid var(--ph-line); color: var(--ph-bone-faint)}
.sd79e74a{padding: 11px 14px; border-bottom: 1px solid var(--ph-line); border-left: 1px solid var(--ph-line); color: var(--ph-bone-dim)}
.s14731b2{padding: 11px 14px; border-bottom: 1px solid var(--ph-line); border-left: 1px solid var(--ph-line)}
.sfcd8b31{padding: 11px 14px; color: var(--ph-bone-faint)}
.s918f02f{padding: 11px 14px; border-left: 1px solid var(--ph-line); color: var(--ph-bone-dim)}
.s3813cbd{padding: 11px 14px; border-left: 1px solid var(--ph-line)}
.s5cb2a32{margin: 0px; font-size: 0.9rem; color: var(--ph-bone-faint); text-wrap: pretty}
.s18ad8f0{background: var(--ph-void); border: 1px solid var(--ph-line); border-radius: var(--ph-radius); padding: 26px; display: flex; flex-direction: column; gap: 16px}
.s7fd7ef7{margin-left: auto}
.s41ca66d{flex: 1 1 0%; display: flex; flex-direction: column; gap: 14px; justify-content: flex-start}
.s0f16ac8{border: 1px solid var(--ph-line-strong); border-radius: var(--ph-radius); padding: 12px 16px; color: var(--ph-bone-faint); font-size: 0.92rem; display: flex; justify-content: space-between; gap: 10px}
.sfbc11fe{background: var(--ph-aubergine); padding: 0px 0px 120px}
.sf4125a8{max-width: var(--ph-wrap); margin: 0px auto; padding-inline: var(--ph-gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px}
.sb26650c{background: var(--ph-void); border: 1px solid var(--ph-line); border-radius: var(--ph-radius); padding: 26px; display: flex; flex-direction: column; gap: 18px}
.s0e4f9b9{display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap}
.saee957a{font-family: var(--ph-mono); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--ph-bone-faint)}
.s0fe9765{font-family: var(--ph-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ph-ember); border: 1px solid rgba(255, 138, 115, 0.4); border-radius: var(--ph-radius-pill); padding: 4px 12px; animation: kfAlerta 12s var(--ph-ease) infinite}
.s4b910f3{position: relative; height: 190px}
.sa7e19a7{position: absolute; left: 0px; right: 0px; bottom: 72%; border-top: 1px dashed rgba(255, 138, 115, 0.55); z-index: 2}
.sff91a22{position: absolute; right: 0px; top: -18px; font-family: var(--ph-mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--ph-ember)}
.sf9549d0{position: absolute; inset: 0px}
.sba5877b{display: flex; gap: 4px; align-items: flex-end; height: 100%}
.s9ee7e3f{flex: 1 1 0%; height: 38%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2s ease-in-out 0s infinite alternate none running kfBreathe}
.s94de07e{flex: 1 1 0%; height: 52%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2.37s ease-in-out 0.13s infinite alternate none running kfBreathe}
.sec888a6{flex: 1 1 0%; height: 44%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2.74s ease-in-out 0.26s infinite alternate none running kfBreathe}
.s203f0f3{flex: 1 1 0%; height: 61%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 3.11s ease-in-out 0.39s infinite alternate none running kfBreathe}
.s1389777{flex: 1 1 0%; height: 47%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 3.48s ease-in-out 0.52s infinite alternate none running kfBreathe}
.s13fe77d{flex: 1 1 0%; height: 55%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2s ease-in-out 0.65s infinite alternate none running kfBreathe}
.s3eece35{flex: 1 1 0%; height: 40%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2.37s ease-in-out 0.78s infinite alternate none running kfBreathe}
.s0d4a3d5{flex: 1 1 0%; height: 63%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2.74s ease-in-out 0.91s infinite alternate none running kfBreathe}
.s7b7b4e3{flex: 1 1 0%; height: 50%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 3.11s ease-in-out 1.04s infinite alternate none running kfBreathe}
.sad4a29c{flex: 1 1 0%; height: 45%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 3.48s ease-in-out 1.17s infinite alternate none running kfBreathe}
.s55b1a3c{flex: 1 1 0%; height: 58%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2s ease-in-out 1.3s infinite alternate none running kfBreathe}
.se6bbe9f{flex: 1 1 0%; height: 42%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2.37s ease-in-out 1.43s infinite alternate none running kfBreathe}
.s34b6e36{flex: 1 1 0%; height: 66%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2.74s ease-in-out 1.56s infinite alternate none running kfBreathe}
.s80113c2{flex: 1 1 0%; height: 36%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: kfSpikeA 12s var(--ph-ease) infinite}
.sac53771{flex: 1 1 0%; height: 54%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 3.48s ease-in-out 1.82s infinite alternate none running kfBreathe}
.s3142801{flex: 1 1 0%; height: 48%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2s ease-in-out 1.95s infinite alternate none running kfBreathe}
.sa4ab8be{flex: 1 1 0%; height: 46%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: kfSpikeB 12s var(--ph-ease) infinite}
.s21ba9a5{flex: 1 1 0%; height: 60%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2.74s ease-in-out 2.21s infinite alternate none running kfBreathe}
.s2e7c137{flex: 1 1 0%; height: 52%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 3.11s ease-in-out 2.34s infinite alternate none running kfBreathe}
.sdbb2afa{flex: 1 1 0%; height: 41%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 3.48s ease-in-out 2.47s infinite alternate none running kfBreathe}
.s481c524{flex: 1 1 0%; height: 57%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2s ease-in-out 2.6s infinite alternate none running kfBreathe}
.s5698f3b{flex: 1 1 0%; height: 49%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2.37s ease-in-out 2.73s infinite alternate none running kfBreathe}
.sf9b08a9{flex: 1 1 0%; height: 44%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2.74s ease-in-out 2.86s infinite alternate none running kfBreathe}
.s43108d4{flex: 1 1 0%; height: 62%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 3.11s ease-in-out 2.99s infinite alternate none running kfBreathe}
.s1bbca4e{flex: 1 1 0%; height: 39%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 3.48s ease-in-out 3.12s infinite alternate none running kfBreathe}
.s0c83996{flex: 1 1 0%; height: 53%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2s ease-in-out 3.25s infinite alternate none running kfBreathe}
.s5b83eb8{flex: 1 1 0%; height: 47%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2.37s ease-in-out 3.38s infinite alternate none running kfBreathe}
.s78b8ef6{flex: 1 1 0%; height: 56%; border-radius: var(--ph-radius); background: rgba(201, 166, 242, 0.38); transform-origin: center bottom; animation: 2.74s ease-in-out 3.51s infinite alternate none running kfBreathe}
.sf5b81a7{margin: 0px; color: var(--ph-bone-dim); font-size: 0.94rem; text-wrap: pretty}
.s8e90f37{flex: 1 1 0%; display: flex; align-items: center}
.s7d1a7d9{width: 100%; height: auto; display: block}
.sf580e6b{animation: 1.4s linear 0s infinite normal none running kfDash}
.s4bb8e83{animation: 1.65s linear 0s infinite normal none running kfDash}
.s3d4bf93{animation: 1.9s linear 0s infinite normal none running kfDash}
.s3782d24{animation: 2.4s ease-in-out 0s infinite normal none running kfLinkBad}
.sf7ca0c8{animation: 2.15s linear 0s infinite normal none running kfDash}
.s29e19eb{animation: 2.4s linear 0s infinite normal none running kfDash}
.s1ba143f{animation: 2.65s linear 0s infinite normal none running kfDash}
.sb08c1b7{transform-box: fill-box; transform-origin: center center; animation: 2.2s ease-out 0s infinite normal none running kfPulso}
.s022b1b3{transform-box: fill-box; transform-origin: center center; animation: 2.2s ease-out 1.1s infinite normal none running kfPulso}
.sa6560d0{animation: 2.4s ease-in-out 0s infinite normal none running kfTopoBad}
.s1ea9412{animation: 2.4s ease-in-out 0s infinite normal none running kfEtiqueta}
.s66f4c8e{background: var(--ph-void); border-top: 1px solid var(--ph-line)}
.sea9c10f{max-width: var(--ph-wrap); margin: 0px auto; padding-inline: var(--ph-gutter); display: flex; flex-direction: column; gap: 48px}
.sf5c019b{max-width: 680px; display: flex; flex-direction: column; gap: 18px}
.s4bab883{background: var(--ph-void); padding: 120px 0px; border-top: 1px solid var(--ph-line)}
.sb9d54c0{max-width: 760px; display: flex; flex-direction: column; gap: 18px}
.sd1956dd{display: flex; gap: 10px}
.s75d4c17{background: var(--ph-card); border: 1px solid var(--ph-line); border-radius: var(--ph-radius); padding: 34px 30px; display: flex; flex-direction: column; gap: 10px}
.s1646b65{display: flex; gap: 10px; min-height: 30px}
.scf49e02{font-family: var(--ph-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--ph-ember); border: 1px solid rgba(255, 138, 115, 0.4); border-radius: var(--ph-radius-pill); padding: 4px 12px; animation: kfBadgeA 9s var(--ph-ease) infinite}
.sac37bfe{font-family: var(--ph-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--ph-viridian); border: 1px solid rgba(63, 217, 155, 0.4); border-radius: var(--ph-radius-pill); padding: 4px 12px; animation: kfBadgeB 9s var(--ph-ease) infinite}
.sf6fe481{animation: kfTrazoA 9s var(--ph-ease) infinite}
.sb6cafb6{animation: kfTrazoB 9s var(--ph-ease) infinite}
.s916f7cc{animation: kfNodoAB 9s var(--ph-ease) 0s infinite}
.s49f123e{opacity: 0; animation: kfMal 9s var(--ph-ease) 0s infinite}
.s04861ba{opacity: 0; animation: kfBien 9s var(--ph-ease) 0s infinite}
.sbe6ef9d{opacity: 0; animation: kfTacha 9s var(--ph-ease) 0s infinite}
.s7736755{display: flex; flex-direction: column; gap: 18px; max-width: 680px}
.s28f0c2a{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px}
.s64bd62d{display: flex; flex-direction: column; gap: 14px}
.s5f27f9d{font-family: var(--ph-mono); font-size: 1.6rem; color: var(--ph-heliotrope)}
.s05cc38a{margin: 0px; font-size: 1.3rem}
.sa67dc78{display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: end}
.se511811{display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 14px; min-width: 0px}
.s43cd338{border-left: 1px solid var(--ph-line-strong); padding-left: 16px}
.sc19020d{font-family: var(--ph-mono); font-size: 1.7rem; color: var(--ph-heliotrope); display: block}
.s7e8d0b9{font-size: 0.84rem; color: var(--ph-bone-faint)}
.s8b3915d{border-left: 1px solid var(--ph-ember); padding-left: 16px}
.scc97a21{font-family: var(--ph-mono); font-size: 1.7rem; color: var(--ph-ember); display: block}
.se30579d{background: var(--ph-card); border: 1px solid var(--ph-line); border-radius: var(--ph-radius); padding: 40px 30px 30px; display: flex; flex-direction: column; gap: 26px}
.sffcd0bb{display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 10px; font-family: var(--ph-mono); font-size: 0.68rem; letter-spacing: 0.1em}
.s6fee3cd{animation: 12s linear 0s infinite normal none running kfHito1}
.s1b8908d{color: var(--ph-viridian); display: block}
.s8d1bb36{color: var(--ph-bone-faint)}
.sfd3391b{animation: 12s linear 0s infinite normal none running kfHito2}
.s1e8aea7{color: var(--ph-ember); display: block; font-size: 0.86rem; font-weight: 600}
.sda4d80c{color: var(--ph-ember)}
.s7ffd95b{animation: 12s linear 0s infinite normal none running kfHito3}
.sf8917fe{color: var(--ph-bone); display: block}
.s659ed62{animation: 12s linear 0s infinite normal none running kfHito4}
.sd328690{text-align: right; animation: 12s linear 0s infinite normal none running kfHito5}
.s8dd16f3{position: relative; height: 10px; background: var(--ph-royal); border-radius: var(--ph-radius); overflow: hidden}
.sa225b5e{position: absolute; inset: 0px; width: 100%; background: linear-gradient(90deg,var(--ph-viridian) 0%,#D9C46A 45%,var(--ph-ember) 100%); animation: 12s linear 0s infinite normal none running kfLey}
.sae51124{position: absolute; top: 0px; bottom: 0px; left: 20%; width: 2px; background: var(--ph-ember)}
.s3084364{position: absolute; top: 0px; bottom: 0px; left: 40%; width: 1px; background: var(--ph-line-strong)}
.sc37d342{position: absolute; top: 0px; bottom: 0px; left: 60%; width: 1px; background: var(--ph-line-strong)}
.s42cb367{margin: 0px; color: var(--ph-bone-dim); font-size: 0.98rem; text-wrap: pretty}
.sd297519{display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px}
.saf97362{margin: 0px; font-size: 1.06rem; color: var(--ph-bone-dim); text-wrap: pretty}
.s6de5a7f{display: block; font-weight: 600}
.sb82f075{font-family: var(--ph-mono); font-size: 0.74rem; color: var(--ph-bone-faint)}
.sf84a4af{display: flex; flex-direction: column; gap: 14px; max-width: 440px}
.s45dbad2{background: var(--ph-void); border: 1px solid var(--ph-line-strong); border-radius: var(--ph-radius); padding: 14px 16px; color: var(--ph-bone); font-family: var(--ph-sans); font-size: 0.95rem}
.s2efbbc6{background: var(--ph-void); border: 1px solid var(--ph-line-strong); border-radius: var(--ph-radius); padding: 14px 16px; color: var(--ph-bone); font-family: var(--ph-sans); font-size: 0.95rem; resize: vertical}
.s63ecd2d{background: var(--ph-viridian); color: rgb(11, 33, 23); font-weight: 600; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; align-self: flex-start}
.s7f9b679{display: flex; flex-direction: column; gap: 16px; align-items: center}
.s2375bf2{width: min(100%, 560px); height: auto; display: block}
.sff900ae{animation: 1.9s linear 0s infinite normal none running kfPulsoRadio; --largo: 223px}
.s7f85f71{animation: 2.18s linear 0s infinite normal none running kfPulsoRadio; --largo: 223px}
.sfe9b9d0{animation: 2.46s linear 0s infinite normal none running kfPulsoRadio; --largo: 223px}
.se543d50{animation: 2.74s linear 0s infinite normal none running kfPulsoRadio; --largo: 223px}
.sc5945a9{animation: 3.02s linear 0s infinite normal none running kfPulsoRadio; --largo: 223px}
.sb92c84e{animation: 3.3s linear 0s infinite normal none running kfPulsoRadio; --largo: 223px}
.s8da4894{animation: 3.58s linear 0s infinite normal none running kfPulsoRadio; --largo: 146px}
.s5cbbf68{animation: 3.86s linear 0s infinite normal none running kfPulsoRadio; --largo: 146px}
.sf4d8f6f{animation: 4.14s linear 0s infinite normal none running kfPulsoRadio; --largo: 146px}
.seb148bb{transform-box: fill-box; transform-origin: center center; animation: 2.6s ease-out 0s infinite normal none running kfPulso}
.s2522fc1{font-family: var(--ph-mono); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--ph-bone-faint); text-align: center}
.s1500bf6{max-width: 820px; margin: 0px auto; padding-inline: var(--ph-gutter); display: flex; flex-direction: column; gap: 40px}
.s4e0ab20{font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 0px}
.se2cc18d{display: flex; flex-direction: column}
.s7fca1fa{border-top: 1px solid var(--ph-line); padding: 6px 0px}
.s5d48669{cursor: pointer; padding: 18px 0px; font-weight: 600; font-size: 1.05rem; list-style: none}
.s6cb57c6{margin: 0px 0px 20px; color: var(--ph-bone-dim); text-wrap: pretty}
.s5da47a4{border-top: 1px solid var(--ph-line); border-bottom: 1px solid var(--ph-line); padding: 6px 0px}
.s4ab0f43{background: var(--ph-aubergine); border-top: 1px solid var(--ph-line); padding: 56px 0px}
.s5be0cf0{max-width: var(--ph-wrap); margin: 0px auto; padding-inline: var(--ph-gutter); display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between}
.s28159ce{height: 26px; aspect-ratio: 197 / 30}
.scb1fb51{display: flex; gap: 22px; font-family: var(--ph-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase}
.sc6c7209{font-family: var(--ph-mono); font-size: 0.72rem; color: var(--ph-bone-faint)}
/* Mínimo de lectura en móvil. Al convertir los atributos style= en
clases, estas compiten con las reglas móviles por especificidad;
el mínimo se reafirma aquí, al final de la hoja. */
@media(max-width:760px){
[class*="s"]{font-size:inherit}
.ph-eyebrow,.cr-tit,.ag-clave,.eq-rol{font-size:.75rem !important}
#problema span,#diagramas span,#agente .ag-clave{font-size:.75rem !important}
#problema h3{font-size:1rem !important}
}
/* ── BURBUJAS DEL CHAT ─────────────────────────────────────
Las generaba el JS con style= en línea y la CSP las dejaba
sin caja: aquí van como clases. */
.ag-fila{display:flex;flex-direction:column}
.ag-q{align-self:flex-end;max-width:88%;background:var(--ph-royal);
border:1px solid var(--ph-line);border-radius:var(--ph-radius);
padding:12px 16px;font-weight:600}
.ag-a{max-width:92%;background:var(--ph-card);border:1px solid var(--ph-line);
border-left:2px solid var(--ph-viridian);border-radius:var(--ph-radius);
padding:12px 16px;color:var(--ph-bone-dim);line-height:1.55}
.ag-pensando{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;
background:var(--ph-card);border:1px solid var(--ph-line);
border-radius:var(--ph-radius)}
.ag-pt1{animation-delay:0s}
.ag-pt2{animation-delay:.2s}
.ag-pt3{animation-delay:.4s}
@media(max-width:760px){
.ag-q,.ag-a{padding:10px 13px !important;font-size:.9rem !important}
.ag-a{max-width:100%}
}
/* ══════════════════════════════════════════════════════════════
MÓVIL · SEGUNDA PASADA — cero desplazamiento lateral
Los carriles horizontales quitaban scroll vertical pero obligaban
a deslizar de lado en casi todas las secciones. Aquí se sustituyen
por composiciones que caben de una vez en 390px.
══════════════════════════════════════════════════════════════ */
@media(max-width:760px){
/* — ningún carril desliza ya: todo apilado — */
.m-carril{display:flex !important;flex-direction:column !important;
overflow:visible !important;gap:14px !important;
margin-inline:0 !important;padding-inline:0 !important;
mask-image:none !important;-webkit-mask-image:none !important}
.m-carril > *{flex:0 0 auto !important;width:100% !important;
scroll-snap-align:none !important}
/* — DIAGRAMAS: los dos paneles, uno debajo del otro — */
#diagramas > div{display:flex !important;flex-direction:column !important;
overflow:visible !important;gap:14px !important;
margin-inline:0 !important;padding-inline:0 !important;
mask-image:none !important;-webkit-mask-image:none !important}
#diagramas > div > div{flex:0 0 auto !important;width:100% !important;
padding:18px 16px !important}
/* los SVG se ajustan al ancho, nunca lo desbordan */
#diagramas svg{width:100% !important;height:auto !important;
max-width:100% !important;display:block}
/* — QUÉ CONTRATAS (capas): tarjetas apiladas — */
#capas .ph-card{width:100% !important;padding:20px 18px !important}
#capas h3{font-size:1.08rem !important}
/* — CLIENTES: las dos citas, una debajo de la otra — */
#clientes .ph-quote{width:100% !important;padding:20px 18px !important}
#clientes .ph-quote p{font-size:.96rem !important}
/* — EQUIPO: la última fila quedaba descolgada a la izquierda.
Con dos columnas, siete personas dejan una sola huérfana,
que se centra ocupando el ancho de las dos. — */
#equipo .eq-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:20px 14px !important}
#equipo .eq-p:last-child{grid-column:1 / -1;max-width:50%;
margin-inline:auto}
#equipo .eq-nom{font-size:.88rem !important}
#equipo .eq-rol{font-size:.62rem !important;-webkit-line-clamp:3}
/* — LEY 21.663: el motion graphic se amontonaba. Los plazos
pasan a lista vertical, que es como se leen de verdad. — */
#ley .m-apilar{display:flex !important;flex-direction:column !important;
gap:24px !important}
#ley .m-apilar > *{width:100% !important}
#ley [class*="s"] > div[class*="s"]{grid-template-columns:1fr !important}
/* la fila de cinco plazos: en columna, cada uno en su línea */
#ley div[class*="s"]:has(> div:nth-child(5)){
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important}
#ley svg{width:100% !important;height:auto !important}
/* — RED/BLUE TEAM: la píldora de fase se salía del recuadro y
las etiquetas de los nodos se pisaban entre sí. En móvil el
camino se lee mejor en vertical. — */
#teaming svg{width:100% !important;height:auto !important}
/* la píldora ocupa su línea completa, sin recuadro redondo */
#teaming span[class*="s"]{white-space:normal !important;
border-radius:var(--ph-radius) !important;
display:block !important;text-align:center;
padding:8px 12px !important;line-height:1.4 !important;
font-size:.66rem !important;letter-spacing:.1em !important}
#teaming > div > div:last-child{padding:18px 14px !important}
#teaming > div > div:last-child > div:first-child{
flex-direction:column !important;gap:8px !important;min-height:0 !important}
/* — PIE: en columna, enlaces en dos columnas — */
footer > div,footer > div > div{flex-direction:column !important;
align-items:flex-start !important;gap:22px !important;
text-align:left !important}
footer nav,footer ul{display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px 16px !important;width:100%}
footer a{min-height:40px;display:flex;align-items:center}
/* — red de seguridad: nada desborda por los lados — */
section > div{max-width:100% !important;overflow-x:clip}
img,svg,video,table{max-width:100% !important}
}
/* ── RED/BLUE TEAM · versión vertical para móvil ──────────────
El gráfico de escritorio reparte cuatro nodos en 620px; a 390
las etiquetas se pisaban unas con otras. En el teléfono el
camino se recorre de arriba abajo. */
.tm-movil{display:none}
@media(max-width:760px){
.tm-esc{display:none !important}
.tm-movil{display:block;width:100%;height:auto}
.tm-rojo{animation:kfTrazoA 9s var(--ph-ease) infinite}
.tm-verde{animation:kfTrazoB 9s var(--ph-ease) infinite}
.tm-nodo{animation:kfNodoAB 9s var(--ph-ease) infinite}
.tm-mal{opacity:0;animation:kfMal 9s var(--ph-ease) infinite}
.tm-bien{opacity:0;animation:kfBien 9s var(--ph-ease) infinite}
.tm-tacha{opacity:0;animation:kfTacha 9s var(--ph-ease) infinite;
transform-box:fill-box;transform-origin:center}
}
@media(max-width:760px){
/* El equipo en dos columnas ocupaba casi dos pantallas. En tres
entra en una, y el séptimo se centra en su fila. */
#equipo .eq-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:16px 8px !important}
#equipo .eq-p:last-child{grid-column:1 / -1 !important;
max-width:33% !important;margin-inline:auto !important}
#equipo .eq-nom{font-size:.76rem !important;line-height:1.15}
#equipo .eq-rol{font-size:.55rem !important;letter-spacing:.04em !important;
-webkit-line-clamp:2}
/* "15 DÍAS" quedaba descolgado en la última fila de plazos */
#ley div[class*="s"]:has(> div:nth-child(5)) > div:last-child{
grid-column:1 / -1;text-align:center}
}
@media(max-width:760px){
/* Al convertir los carriles en columnas, las tarjetas de #problema
se superponían al texto de la sección siguiente. El contenedor
recupera su flujo normal y su altura real. */
#problema .m-carril{position:static !important;height:auto !important;
min-height:0 !important;display:flex !important;
flex-direction:column !important;gap:14px !important}
#problema .m-carril > .ph-card{position:static !important;
width:100% !important;height:auto !important}
/* ninguna sección recorta a la siguiente */
section{overflow:visible !important}
section > div{overflow:visible !important}
/* salvo el hero, donde el sombrero sí debe recortarse */
#hero{overflow:hidden !important}
}
@media(max-width:760px){
/* La tarjeta de la cadena de escalamiento quedó en display:grid con
881px de alto: los cinco pasos se repartían por todo ese espacio
y la tarjeta salía casi vacía. Vuelven a apilarse pegados. */
#problema .ph-card{display:flex !important;flex-direction:column !important;
gap:0 !important;height:auto !important;min-height:0 !important}
#problema .ph-card > div{height:auto !important;min-height:0 !important}
/* la fila de cada paso: número, texto y minuto en una línea */
#problema .ph-card > div[class*="s"]{display:flex !important;
align-items:center !important;gap:12px !important;
padding:9px 0 !important}
#problema .ph-card > div[class*="s"] > span:nth-child(2){flex:1}
#problema .ph-card > div:last-child{margin-top:16px !important}
}
@media(max-width:760px){
/* En un teléfono, esperar a que entren los cinco pasos deja la
tarjeta casi vacía. Aquí se ven todos desde el principio y sólo
se resalta el recorrido. */
#problema [class*="s"][class*="s"] > div{opacity:1 !important;
transform:none !important}
#problema div[class*="s"]{animation-duration:7s}
/* la tarjeta se ajusta a su contenido */
#problema > div > div:last-child > div:first-child{
padding:22px 18px !important}
}
@media(max-width:760px){
/* ── HERO: subir el contenido sin tocar el alto de la sección ──
Medido en 390×844: el cuerpo llevaba 108px de relleno superior
y el hero acababa midiendo 828px en una pantalla de 748. El
contenido sube; la sección conserva su altura para que no
asome la siguiente. */
#hero{padding-top:22px !important;padding-bottom:22px !important;
min-height:100svh !important;justify-content:flex-start !important}
.hero-body{padding-top:34px !important;padding-bottom:24px !important;
gap:18px !important;flex:1;justify-content:center !important}
.hero-h1{margin-bottom:2px !important}
/* el pie de firma se pega abajo, donde estorba menos */
.hero-body > span:last-child{margin-top:auto;padding-top:14px}
}
/* ── CHAT · altura estable y cabecera en una línea ─────────────
La caja crecía a medida que entraban los mensajes y empujaba la
página. Se le fija de entrada el alto que pide la conversación
completa, así no se mueve nada mientras escribe. */
.ag-msgs{min-height:430px;justify-content:flex-start}
.ph-status-ok{white-space:nowrap;font-size:.68rem;letter-spacing:.12em;
flex-shrink:0}
.ag-cab-tx i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){
.ag-msgs{min-height:390px}
.ph-status-ok{font-size:.6rem !important;letter-spacing:.08em !important}
.ag-cab{gap:9px !important}
.ag-cab-tx b{font-size:.9rem !important}
.ag-cab-tx i{font-size:.62rem !important}
}
/* ── LEY 21.663 · línea de tiempo de plazos ────────────────────
Antes eran cinco celdas sueltas y una barra de cuatro colores sin
una sola etiqueta: no se entendía qué umbral marcaba cada tramo.
Ahora es una secuencia con su hora, su entrega y una barra que se
llena marcando dónde estás. */
@media(max-width:760px){
#ley p{font-size:.94rem !important}
#ley .m-apilar{gap:20px !important}
}
/* ── CHAT · ventana de alto fijo ───────────────────────────────
Con min-height la caja seguía creciendo hacia abajo y empujaba la
página entera mientras entraban los mensajes. Con alto fijo y
scroll interno, al llenarse los mensajes antiguos suben solos y
nada se mueve fuera del recuadro. */
.ag-msgs{height:430px !important;min-height:0 !important;
max-height:430px !important;overflow-y:auto;
justify-content:flex-start !important;
scrollbar-width:none;-ms-overflow-style:none}
.ag-msgs::-webkit-scrollbar{display:none}
#agente-chat{height:auto}
@media(max-width:760px){
.ag-msgs{height:330px !important;max-height:330px !important}
}
/* ── MENÚ DE SECCIONES (móvil) ─────────────────────────────────
En el teléfono la cabecera llevaba el selector ES/EN, que además
no cambia nada porque el sitio está sólo en español. Lo sustituye
el menú de secciones. Funciona con un checkbox y :checked, sin
JavaScript. */
.menu-btn,.menu-panel,.menu-velo{display:none}
@media(max-width:900px){
.hero-head{position:relative}
/* fuera el idioma y la navegación de escritorio */
.hero-tools,.hero-nav{display:none !important}
.menu-btn{display:flex;flex-direction:column;justify-content:center;
gap:5px;width:44px;height:44px;cursor:pointer;
justify-self:end;align-self:center;z-index:60;padding:0 8px}
.menu-btn span{display:block;height:2px;width:26px;
background:var(--ph-bone);border-radius:2px;
transition:transform var(--ph-fast),opacity var(--ph-fast)}
/* el botón se convierte en aspa al abrir */
.menu-chk:checked ~ .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-chk:checked ~ .menu-btn span:nth-child(2){opacity:0}
.menu-chk:checked ~ .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-velo{display:block;position:fixed;inset:0;z-index:50;
background:rgba(21,11,30,.72);backdrop-filter:blur(3px);
opacity:0;pointer-events:none;transition:opacity var(--ph-base)}
.menu-chk:checked ~ .menu-velo{opacity:1;pointer-events:auto}
.menu-panel{display:flex;flex-direction:column;gap:2px;
position:fixed;top:0;right:0;bottom:0;z-index:55;
width:min(78vw,320px);padding:88px 26px 32px;
background:var(--ph-card);border-left:1px solid var(--ph-line);
transform:translateX(100%);transition:transform var(--ph-base) var(--ph-ease);
overflow-y:auto}
.menu-chk:checked ~ .menu-panel{transform:translateX(0)}
.menu-panel a{color:var(--ph-bone);text-decoration:none;
font-size:1.06rem;padding:15px 0;min-height:48px;
display:flex;align-items:center;
border-bottom:1px solid var(--ph-line)}
.menu-panel a:last-of-type{border-bottom:0}
.menu-cta{margin-top:20px;background:var(--ph-viridian);
color:#0B2117 !important;font-weight:600;justify-content:center;
border-radius:var(--ph-radius);border-bottom:0 !important}
}
/* ── 1 · DIAGRAMAS con el margen común ─────────────────────────
La sección salía más ancha que el resto de la web porque su
contenedor no llevaba el mismo ancho máximo ni el mismo canal. */
#diagramas > div{max-width:var(--ph-wrap);margin-inline:auto;
padding-inline:var(--ph-gutter)}
/* ── 2 · La firma del hero ─────────────────────────────────────
Era una línea corrida que se partía por cualquier sitio. Ahora
las tres capacidades van juntas y el público en su propia línea. */
.hero-firma{display:flex;flex-wrap:wrap;align-items:baseline;
gap:0 10px;font-family:var(--ph-mono);font-size:.72rem;
letter-spacing:.14em;text-transform:uppercase;
color:var(--ph-bone-faint);line-height:1.7}
.hero-firma b{font-weight:400;color:var(--ph-bone-dim)}
.hero-firma i{font-style:normal;color:var(--ph-line-strong)}
.hero-firma em{font-style:normal;flex-basis:100%;
color:var(--ph-bone-faint);letter-spacing:.12em}
/* ── 3 · La tabla del agente ───────────────────────────────────
Las celdas iban apretadas y las dos columnas pesaban igual, así
que no se veía cuál es el estado bueno. */
.ag-tabla > div{font-size:.94rem}
.ag-tabla .ag-clave{padding:14px 16px 6px !important;
font-family:var(--ph-mono);font-size:.66rem !important;
letter-spacing:.14em;text-transform:uppercase;
color:var(--ph-bone-faint)}
.ag-tabla .ag-antes{padding:6px 16px 14px !important;
color:var(--ph-bone-faint);line-height:1.45}
.ag-tabla .ag-con{padding:6px 16px 14px !important;
color:var(--ph-bone);font-weight:600;line-height:1.45}
/* ── 4 · Las fases del teaming, en el mismo sitio ──────────────
Salían una debajo de otra y el recuadro daba un salto al cambiar.
Superpuestas, se turnan sin mover nada. */
.tm-fases{position:relative;min-height:34px;display:block !important}
.tm-fases > span{position:absolute;left:0;top:0;margin:0 !important}
@media(max-width:760px){
.tm-fases{min-height:56px}
.tm-fases > span{right:0;text-align:center}
#diagramas > div{padding-inline:var(--ph-gutter) !important}
.hero-firma{font-size:.66rem;gap:0 8px}
.ag-tabla > div{font-size:.88rem}
.ag-tabla .ag-clave{padding:12px 13px 4px !important}
.ag-tabla .ag-antes,.ag-tabla .ag-con{padding:4px 13px 12px !important}
}
/* ══ PIE ═══════════════════════════════════════════════════════
Estructura estándar de B2B: franja de cierre con la acción que
importa, columnas agrupadas por intención (producto / servicios /
empresa) y barra inferior con lo legal y el contacto. */
.pie{background:var(--ph-void);border-top:1px solid var(--ph-line);
padding:0 0 28px}
.pie > *{max-width:var(--ph-wrap);margin-inline:auto;
padding-inline:var(--ph-gutter)}
/* — la franja de cierre — */
.pie-cierre{display:flex;align-items:center;justify-content:space-between;
gap:32px;flex-wrap:wrap;padding-block:44px;
border-bottom:1px solid var(--ph-line)}
.pie-cierre-tx{max-width:44ch;display:flex;flex-direction:column;gap:8px}
.pie-cierre-tx p{margin:0;color:var(--ph-bone-dim);font-size:1.02rem;
text-wrap:pretty}
.pie-eyebrow{font-family:var(--ph-mono);font-size:.7rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--ph-heliotrope)}
.pie-cta{background:var(--ph-viridian);color:#0B2117;font-weight:600;
padding:14px 26px;border-radius:var(--ph-radius);text-decoration:none;
white-space:nowrap;min-height:48px;display:inline-flex;align-items:center;
transition:filter var(--ph-fast)}
.pie-cta:hover{filter:brightness(1.08)}
/* — las columnas — */
.pie-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
gap:40px;padding-block:44px}
.pie-marca{display:flex;flex-direction:column;gap:14px;max-width:34ch}
.pie-logo{height:30px;width:auto}
.pie-lema{margin:0;color:var(--ph-bone-faint);font-size:.94rem;
line-height:1.55;text-wrap:pretty}
.pie-estado{display:inline-flex;align-items:center;gap:9px;
font-family:var(--ph-mono);font-size:.68rem;letter-spacing:.13em;
text-transform:uppercase;color:var(--ph-bone-faint)}
.pie-estado i{width:7px;height:7px;border-radius:50%;
background:var(--ph-viridian);box-shadow:0 0 0 3px rgba(63,217,155,.16);
animation:kfPieLatir 2.6s ease-in-out infinite}
@keyframes kfPieLatir{0%,100%{box-shadow:0 0 0 3px rgba(63,217,155,.16)}
50%{box-shadow:0 0 0 6px rgba(63,217,155,.04)}}
.pie-col{display:flex;flex-direction:column;gap:2px}
.pie-col h3{margin:0 0 12px;font-family:var(--ph-mono);font-size:.68rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--ph-bone);
font-weight:400}
.pie-col a{color:var(--ph-bone-faint);text-decoration:none;
font-size:.94rem;padding:7px 0;transition:color var(--ph-fast)}
.pie-col a:hover{color:var(--ph-bone)}
/* — la barra legal — */
.pie-barra{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
padding-top:24px;border-top:1px solid var(--ph-line);
font-family:var(--ph-mono);font-size:.7rem;letter-spacing:.1em;
color:var(--ph-bone-faint)}
.pie-barra a{color:var(--ph-bone-faint);text-decoration:none}
.pie-barra a:hover{color:var(--ph-heliotrope)}
.pie-barra a:last-child{margin-left:auto}
@media(max-width:900px){
.pie-cols{grid-template-columns:1fr 1fr;gap:30px 24px}
.pie-marca{grid-column:1 / -1;max-width:none}
}
@media(max-width:760px){
.pie{padding-bottom:22px}
.pie-cierre{padding-block:30px;gap:20px;flex-direction:column;
align-items:flex-start}
.pie-cierre-tx p{font-size:.96rem}
.pie-cta{width:100%;justify-content:center}
.pie-cols{padding-block:30px;gap:26px 20px}
.pie-col a{padding:9px 0;min-height:40px;display:flex;align-items:center}
.pie-barra{flex-direction:column;align-items:flex-start;gap:9px;
padding-top:20px}
.pie-barra a:last-child{margin-left:0}
}
@media(max-width:760px){
/* Una regla anterior forzaba display:grid en los