/* st-core v70 (6 sep 2026): v69 con PROP-06 rehecho. La version anterior apuntaba a «section.st-planes» y el bloque es un div, asi que la regla que quitaba el filete nunca engancho y quedaban dos rayas a 1px con el chip del Cap. VII colgando. Ahora sigue el patron del Acto II del Home: chip con translateY(-50%) y z-index 6, pseudos a top 50%. Cap. VI sin tocar por indicacion de Tono. */
/* st-core v56 (5 sep 2026): v55 con el padding-top de 14 px de la regla v31 (atalayas) en 0: el arte ya se muestra completo a su proporcion natural y no hace falta el aire.
/* st-core v55 (5 sep 2026): v54 con R26 sin padding-top (hueco) y sin las reglas de Acto V (las pisaba el inline de st-pages).
/* st-core v54 (5 sep 2026): v53 + pie centrado al inset del nav, Acto V del Home invertido en noche, agentes LP a 8:5, R26 relleno, Planes al estilo Home (numerales, rombos, sin línea sobrante).
/* st-core v53 (5 sep 2026): v52 sin subrayado en el hover de los chips del nav + object-fit:cover para 09-athena-cysure */
/* ============================================================
Cysure Stealth, CSS del sistema para Webflow
Pegar en el Custom Code global del sitio (antes de cierre de head)
o cargar como hoja externa. Valores idénticos a los .dc.html.
============================================================ */
/* --- 1. Tokens, día --------------------------------------- */
:root{
--cy-bg:#EAF0FB; --cy-card:#FFFFFF; --cy-paper:#FFFFFF;
--cy-ink:#0E1116; --cy-body:#3D4654; --cy-mut:#5A6068; --cy-faint:#8A8F98;
--cy-ln:#C4CFE4; --cy-ln-soft:#DCE3F2;
--cy-link:#3B5BFF; --cy-kicker:#2740C9; --cy-emph:#2740C9;
--st-ser:#29487B; --st-rombo:#29487B; --st-tag:#3B5BFF;
--st-prog:#29487B; --st-prog-tr:rgba(41,72,123,.16);
--cy-chip:rgba(59,91,255,.07); --cy-sand:#FBF6EA; --cy-ln-sand:#C9B58E;
--st-nodo:11px; --grid-line-width:1px;
--grid-frame-x:clamp(24px,5.6vw,134px);
--grid-content-pad:clamp(24px,2.25vw,44px);
--grid-grain-band:clamp(104px,8vw,148px);
--st-veil-1:rgba(255,255,255,.97); --st-veil-2:rgba(255,255,255,.66);
--st-cue:#5A6068; --st-cue-ln:rgba(90,96,104,.3); --st-tagvelo:rgba(234,240,251,.42);
}
/* --- 2. Tokens, noche ------------------------------------- */
html:root[data-cy-theme="noche"]{
--cy-bg:#070B12; --cy-card:#0E1936; --cy-paper:#16204A;
--cy-ink:#E8ECF8; --cy-body:#BAC3D8;
--cy-ln:#2B2E32; --cy-ln-soft:#23262D;
--cy-link:#9FB0FF; --cy-kicker:#8FA3FF; --cy-emph:#7C92FF;
--st-ser:#7C92FF; --st-rombo:#8FA3FF; --st-tag:#7C92FF;
--st-prog:#7C92FF; --st-prog-tr:rgba(124,146,255,.18);
--cy-chip:rgba(124,146,255,.12); --cy-sand:#141008; --cy-ln-sand:#5C4C22;
--st-veil-1:rgba(7,11,18,.96); --st-veil-2:rgba(7,11,18,.62);
--st-cue:#A6B0C4; --st-cue-ln:rgba(166,176,196,.32); --st-tagvelo:rgba(7,11,18,.38);
}
@media (max-width:680px){:root{--st-nodo:9px; --grid-grain-band:40px}}
/* --- 3. Bloques y nodos rombo ----------------------------- */
.st-blq,[data-st-blq]{position:relative;display:grid;gap:var(--grid-line-width,1px);
background:var(--cy-ln);border:var(--grid-line-width,1px) solid var(--cy-ln);
border-radius:18px;overflow:hidden}
.st-blq>*:not(.st-n),[data-st-blq]>*:not(.st-n){background:var(--cy-card);position:relative}
.st-n{position:absolute;left:50%;top:50%;
width:var(--st-nodo,11px);height:var(--st-nodo,11px);box-sizing:border-box;
border:var(--grid-line-width,1px) solid var(--st-rombo,#29487B);
background:var(--cy-card,#FFFFFF);
transform:translate(-50%,-50%) rotate(45deg);
pointer-events:none;z-index:4}
.st-x25{left:calc(25% - .25px)}
.st-x33{left:calc(33.3333% - .167px)}
.st-x50{left:50%}
.st-x67{left:calc(66.6667% + .167px)}
.st-x75{left:calc(75% + .25px)}
.st-nt{top:0}.st-nb{top:100%}.st-y50{top:50%}.st-nl{left:0}.st-nr{left:100%}
/* fronteras de fila cuando el bloque se apila o se reacomoda */
[data-st-blq]>*:not(.st-n)+*:not(.st-n)::before,
[data-st-blq]>*:not(.st-n)+*:not(.st-n)::after{content:"";position:absolute;top:-.5px;
width:var(--st-nodo);height:var(--st-nodo);box-sizing:border-box;
border:var(--grid-line-width) solid var(--st-rombo);background:var(--cy-card);
transform:translate(-50%,-50%) rotate(45deg);pointer-events:none;z-index:4}
[data-st-blq]>*:not(.st-n)+*:not(.st-n)::before{left:0}
[data-st-blq]>*:not(.st-n)+*:not(.st-n)::after{left:100%}
[data-st-blq="borde"]>*:not(.st-n)+*:not(.st-n)::before,
[data-st-blq="borde"]>*:not(.st-n)+*:not(.st-n)::after{top:calc(var(--grid-line-width) / 2)}
/* el apilado solo aplica cuando el bloque es de una columna: en desktop se apaga */
@media (min-width:681px){
[data-st-blq]:not([data-st-blq="borde"]):not([data-st-apilado])>*:not(.st-n)+*:not(.st-n)::before,
[data-st-blq]:not([data-st-blq="borde"]):not([data-st-apilado])>*:not(.st-n)+*:not(.st-n)::after{display:none}
}
/* --- 4. Bilingüe ----------------------------------------- */
[data-cy-lang]:not([data-cy-lang="es"]) .lang-es{display:none!important}
[data-cy-lang="es"] .lang-en{display:none!important}
/* --- 5. Reveal y enfoque de títulos ---------------------- */
[data-st-rev]{transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
[data-st-rev="off"]{opacity:0;transform:translateY(14px)}
[data-st-wipe]{will-change:filter,opacity,transform;clip-path:none}
[data-st-wipe="off"]{opacity:0;filter:blur(17px);transform:translateY(13px) scale(1.014);
text-shadow:.13em 0 0 rgba(59,91,255,.5),-.09em 0 0 rgba(229,170,164,.44)}
[data-st-wipe="on"]{opacity:1;filter:blur(0);transform:none;
text-shadow:0 0 0 rgba(59,91,255,0),0 0 0 rgba(229,170,164,0);
transition:filter 1.15s cubic-bezier(.2,.7,.2,1),text-shadow 1s cubic-bezier(.2,.7,.2,1),
transform 1.15s cubic-bezier(.2,.7,.2,1),opacity .6s ease}
@media (max-width:680px){
h2[data-st-rev]{transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1),filter 1s cubic-bezier(.2,.7,.2,1),text-shadow .9s cubic-bezier(.2,.7,.2,1)}
h2[data-st-rev="off"]{filter:blur(13px);text-shadow:.1em 0 0 rgba(59,91,255,.45),-.07em 0 0 rgba(229,170,164,.4)}
h2[data-st-rev="on"]{filter:blur(0);text-shadow:0 0 0 rgba(59,91,255,0),0 0 0 rgba(229,170,164,0)}
}
/* --- 6. Nav y barra de progreso -------------------------- */
[data-st-nav]{transition:background .25s ease,box-shadow .25s ease}
[data-st-nav][data-scrolled="0"]{background:transparent!important;box-shadow:none!important}
[data-st-nav][data-scrolled="1"]{box-shadow:0 1px 0 rgba(14,17,22,.07),0 12px 30px rgba(14,17,22,.05)}
/* desktop: barra fija arriba del viewport */
[data-st-progreso]{position:fixed;left:0;top:0;height:4px;width:0;z-index:200;
background:var(--st-prog);box-shadow:0 0 0 1px var(--st-prog-tr);
pointer-events:none;transition:width .12s linear}
/* mobile: dentro de la nav, borde superior, de extremo a extremo */
[data-st-pista]{position:absolute;left:0;right:0;top:0;height:3px;overflow:hidden;
background:var(--st-prog-tr);pointer-events:none;z-index:5}
[data-st-pista] [data-st-progreso]{position:absolute;left:0;top:0;height:100%;
box-shadow:none;transition:width .12s linear}
[data-st-nav][data-scrolled="0"] [data-st-pista]{background:transparent!important}
/* --- 7. Hover dither de CTAs ----------------------------- */
a[data-st-cta],[data-st-hoverdither]{transition:background-color .2s ease,color .2s ease}
a[data-st-cta]:hover,[data-st-hoverdither]:hover,[data-st-hoverdither]:focus-visible{
background-image:var(--st-cta-ramp,none)!important;
background-origin:border-box!important;background-clip:border-box!important;
background-size:100% 100%!important;background-repeat:no-repeat!important;
background-position:left center!important;
background-color:var(--st-ser)!important;color:#FFFFFF!important;
border-color:transparent!important;image-rendering:pixelated}
html:root[data-cy-theme="noche"] a[data-st-cta]:hover,
html:root[data-cy-theme="noche"] [data-st-hoverdither]:hover{color:#070B12!important}
/* --- 8. Acto III, cards pegajosas ------------------------ */
[data-st-a3-head]{transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
[data-st-a3-head][data-st-a3="off"]{opacity:0;transform:translateY(-18px);pointer-events:none}
[data-st-a3-cards]>*:not([aria-hidden="true"]){transition:top .5s cubic-bezier(.2,.7,.2,1)}
[data-st-a3z="off"] [data-st-a3-cards]>*:not([aria-hidden="true"]){top:92px!important}
/* --- 9. Carruseles mobile -------------------------------- */
@media (max-width:680px){
[data-st-carr],[data-st-pubs]{display:flex!important;flex-wrap:nowrap!important;
overflow-x:auto!important;scroll-snap-type:x mandatory;gap:12px!important;
background:transparent!important;border:0!important}
[data-st-carr]::-webkit-scrollbar,[data-st-pubs]::-webkit-scrollbar{display:none}
[data-st-carr]>*,[data-st-pubs]>*{flex:0 0 78%!important;scroll-snap-align:center;
box-sizing:border-box!important;border:1px solid var(--cy-ln)!important;
border-radius:14px!important;background:var(--cy-card)!important}
}
[data-st-dot]{width:7px;height:7px;flex:none;border-radius:99px;background:var(--cy-ln);
transition:width .22s ease,background .22s ease}
[data-st-dot][data-on]{width:22px;background:var(--st-rombo)}
/* --- 10. Logos de integraciones -------------------------- */
.st-lg{position:relative;display:inline-block;line-height:0}
.st-lg img{display:block;transition:opacity .22s ease}
@supports ((-webkit-mask-image:url("a.svg")) or (mask-image:url("a.svg"))){
.st-lg img{opacity:0}
.st-lg::before{content:"";position:absolute;inset:0;background-color:var(--st-ser);
-webkit-mask-image:var(--st-lg-src);mask-image:var(--st-lg-src);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;transition:opacity .22s ease}
.st-lg:hover img{opacity:1}
.st-lg:hover::before{opacity:0}
}
html:root[data-cy-theme="noche"] .st-lg.st-lg-mono:hover img{filter:brightness(0) invert(1)}
/* --- 11. Movimiento reducido ----------------------------- */
@media (prefers-reduced-motion: reduce){
[data-st-rev]{opacity:1!important;transform:none!important;transition:none}
[data-st-wipe],h2[data-st-rev]{clip-path:none!important;opacity:1!important;
filter:none!important;transform:none!important;text-shadow:none!important}
[data-st-scrollfill]{animation:none!important}
}
/* === variantes desktop/mobile === */
.st-mb{display:none}
@media (max-width:680px){.st-dt{display:none}.st-mb{display:block}}
/* formularios decorativos: el wrapper de Webflow no participa en el layout */
.st-dt .w-form,.st-mb .w-form{display:contents;margin:0}
/* ===== v3 — hover de marca en los botones del footer (30 ago) =====
Antes todos se prendían en el mismo periwinkle (.st-h-b88aa82f:hover).
Ahora cada botón se prende en el color de su red.
Voy por [aria-label] y no por la clase de hover porque ese es el único
gancho que existe en las 6 páginas: los iconos de la LP perdieron
.st-h-b88aa82f en el port, así que un selector basado en ella los dejaría
fuera. Con [aria-label] la especificidad sube a (0,3,0) y gana sin depender
del orden de carga.
La banda del footer es oscura en día Y en noche (el icono base es
#F2F4F8 al 75% en los dos temas), por eso X se prende en blanco: su negro
de marca sería invisible ahí. */
.st-i-9be88b5c,.st-i-b37884fb{transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.st-i-9be88b5c[aria-label="LinkedIn"]:hover{color:#0A66C2!important;border-color:#0A66C2!important;background-color:rgba(10,102,194,.16)!important}
.st-i-9be88b5c[aria-label="X"]:hover{color:#FFFFFF!important;border-color:#FFFFFF!important;background-color:rgba(255,255,255,.14)!important}
.st-i-9be88b5c[aria-label="Instagram"]:hover{color:#E1306C!important;border-color:#E1306C!important;background-color:rgba(225,48,108,.16)!important}
.st-i-9be88b5c[aria-label="YouTube"]:hover{color:#FF0000!important;border-color:#FF0000!important;background-color:rgba(255,0,0,.16)!important}
/* Los de «Verifícanos con IA» ya traen fondo negro propio: ahí solo se
prenden el borde y el icono, para no ensuciar el chip. */
.st-i-b37884fb[aria-label="ChatGPT"]:hover{color:#10A37F!important;border-color:#10A37F!important}
.st-i-b37884fb[aria-label="Claude"]:hover{color:#D97757!important;border-color:#D97757!important}
.st-i-b37884fb[aria-label="Gemini"]:hover{color:#4285F4!important;border-color:#4285F4!important}
.st-i-b37884fb[aria-label="Perplexity"]:hover{color:#20808D!important;border-color:#20808D!important}
/* ===== v4 — caja explicita para los logos de integraciones =====
Los SVG de marca solo traen viewBox, sin width/height. Sin ancho intrinseco
el dentro del ; la LP la
perdio en el port y se resolvio con un ::after enmascarado en su hoja. Se
sube la regla al core con :not(:has(svg)) para que CUALQUIER link del menu
(incluidos los que se inserten por API, donde el svg puede no sobrevivir)
tenga flecha, sin duplicarla en los que ya la traen. */
.st-i-27587d51:not(:has(svg))::after{content:"";flex:none;width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 10.4 10.4 3.6M4.9 3.6h5.5v5.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 10.4 10.4 3.6M4.9 3.6h5.5v5.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* ===== v7: barra de progreso por TRANSFORM, no por width =====
El scroll escribia `width` en la barra en CADA frame (desde el inline del
head Y desde el motor): eso fuerza un LAYOUT completo por frame. En iOS ese
layout por frame es justo lo que hace que los elementos `sticky` (titulo y
tarjetas del Acto III) se vean temblando, porque el compositor y el main
thread quedan desfasados. Con scaleX el cambio vive solo en el compositor. */
[data-st-progreso]{width:100%!important;transform:scaleX(0);transform-origin:0 50%;transition:transform .12s linear!important;will-change:transform;backface-visibility:hidden}
/* ===== v7: guia de seccion actual en nav y menu =====
Toño: "la nav bar debe de ser igual siempre en mobile. Puede haber un cambio
ligero de color en la seccion en la que se encuentre el usuario como guia."
st-pages marca el link de la pagina actual con data-st-here. */
[data-st-menu] a[data-st-here]{color:var(--st-tag,#3B5BFF)}
[data-st-nav][data-scrolled="1"] [data-st-navmid] a[data-st-here]{color:var(--st-tag,#3B5BFF)}
[data-st-nav][data-scrolled="0"] [data-st-navmid] a[data-st-here]{color:#FFFFFF!important;opacity:1}
/* v8: el bloque :has([data-st-hero-dark]) pinta los chips del nav con
(0,6,0)+!important, asi que la marca de pagina actual necesitaba mas peso.
Se repite el atributo para subir especificidad sin inventar ancestros. */
[data-st-nav][data-scrolled="0"] [data-st-navmid] a[data-st-here][data-st-here][data-st-here][data-st-here][data-st-here]{color:#FFFFFF!important;opacity:1!important}
[data-st-nav][data-scrolled="1"] [data-st-navmid] a[data-st-here][data-st-here][data-st-here]{color:var(--st-tag,#3B5BFF)!important}
[data-st-menu] a[data-st-here][data-st-here][data-st-here]{color:var(--st-tag,#3B5BFF)!important}
/* ============================================================
v6 · accesibilidad y geometria del header (auditoria 1-sep)
============================================================ */
/* --- (1) Header desktop: layout real, sin posicionamiento independiente ---
Causa raiz de la colision 1180-1409px: a partir de 1180 el nav se sacaba del
flujo con position:absolute;left:50%;transform:translateX(-50%), mientras el
grupo de herramientas seguia en flujo. Dos cajas posicionadas por sistemas
distintos no se empujan: se montan (medido: 35.2px de solape a 1280px).
Rejilla de 3 columnas con laterales iguales: conserva el centrado optico
REAL del nav (que era el motivo del absolute) y ademas garantiza el gap. */
@media (min-width:992px){
.st-dt [data-st-nav]{display:grid!important;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
align-items:center!important;column-gap:16px!important}
.st-dt [data-st-nav]>*{min-width:0}
.st-dt [data-st-nav]>:first-child{justify-self:start}
.st-dt [data-st-navmid]{position:static!important;left:auto!important;
transform:none!important;justify-self:center!important;min-width:0!important}
.st-dt [data-st-nav]>:last-child{justify-self:end}
/* los chips no traian white-space: al apretarse partian en dos lineas y
empujaban el alto del header antes de que la rejilla pudiera repartir */
.st-dt [data-st-navmid] a.cy-dchip{white-space:nowrap}
}
/* --- (2) Dianas tactiles a 44x44 ---
El glifo pintado NO cambia: el area se gana con un ::after de inset
negativo, salvo donde el ancestro recorta (ver toggles mas abajo). */
[data-ody-logo],[data-st-burger],[data-st-nav-cta],
.st-i-9be88b5c,.st-i-b37884fb,[data-st-dot]{position:relative}
[data-ody-logo]::after,[data-st-burger]::after,
.st-i-9be88b5c::after,.st-i-b37884fb::after{
content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:max(100%,44px);height:max(100%,44px);pointer-events:auto}
/* el logo es un : el area va en el ancla */
a:has(>[data-ody-logo]){position:relative;display:inline-flex;align-items:center}
a:has(>[data-ody-logo])::after{content:"";position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);width:max(100%,44px);height:44px}
/* burger y CTA de la nav: alto real, no solo area invisible */
.st-mb [data-st-burger]{min-height:44px!important;min-width:44px!important}
.st-mb [data-cy-lang] nav a[data-st-cta][data-st-cta][data-st-cta]{min-height:44px!important}
/* los dots del carrusel median 7x7: se les da alto de diana sin repintarlos */
[data-st-dot]{padding:18px 6px!important;background-clip:content-box!important}
/* --- (3) Toggles de tema e idioma ---
Estan pegados dentro de una caja con borde y overflow:hidden, asi que un
::after expandido se recorta. Aqui el area se gana con alto real de la caja. */
[role="group"][aria-label="Tema"],[role="group"][aria-label="Idioma"]{
min-height:44px!important}
[role="group"][aria-label="Tema"] .cy-tgb,
[role="group"][aria-label="Idioma"] .cy-lang-btn{min-height:44px!important}
/* --- (4) Foco visible: no existia ninguna regla de :focus-visible ---
Sin esto, navegar con teclado por el sitio es invisible en ambos temas. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
[data-st-cta]:focus-visible,[data-lang-btn]:focus-visible,[data-cy-tema]:focus-visible,
[data-st-burger]:focus-visible,[data-st-dot]:focus-visible{
outline:2px solid var(--st-tag,#3B5BFF)!important;outline-offset:3px!important;
border-radius:6px}
html[data-cy-theme="noche"] a:focus-visible,
html[data-cy-theme="noche"] button:focus-visible,
html[data-cy-theme="noche"] [data-st-cta]:focus-visible,
html[data-cy-theme="noche"] [data-lang-btn]:focus-visible,
html[data-cy-theme="noche"] [data-cy-tema]:focus-visible,
html[data-cy-theme="noche"] [data-st-burger]:focus-visible{
outline-color:#9FB0FF!important}
/* --- (5) Input del formulario: 38px es el default de fabrica de Webflow
(.w-input), no vive en ninguna hoja del proyecto. */
.st-dt .w-input,.st-mb .w-input,.st-dt .w-select,.st-mb .w-select{
min-height:44px!important}
/* --- (6) Skip link: primer foco del documento, oculto hasta recibirlo --- */
[data-cys-skip]{position:absolute;left:-9999px;top:0;z-index:9999;
padding:12px 18px;min-height:44px;display:inline-flex;align-items:center;
background:var(--cy-card,#FFFFFF);color:var(--cy-ink,#0E1116);
border:1px solid var(--cy-ln,#C4CFE4);border-radius:0 0 10px 0;
font:600 14px 'DM Sans',sans-serif;text-decoration:none}
[data-cys-skip]:focus{left:0}
/* ============================================================
v10 · el fix del header necesita ganarle a la hoja de PAGINA
El bloque v6 se escribio con especificidad (0,2,0), la misma que
"@media (min-width:1180px){.st-dt [data-st-navmid]{position:absolute...}}"
que vive en home/tesis/plataforma. Como la hoja de pagina se carga
DESPUES del core, ganaba ella y el nav seguia sacado del flujo.
Aqui se repiten los atributos para subir a (0,4,0) y ganar por
especificidad, no por orden de carga.
============================================================ */
@media (min-width:992px){
.st-dt [data-st-nav][data-st-nav]{display:grid!important;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
align-items:center!important;column-gap:16px!important}
.st-dt [data-st-nav][data-st-nav]>*{min-width:0}
.st-dt [data-st-nav][data-st-nav]>:first-child{justify-self:start}
.st-dt [data-st-nav][data-st-nav] [data-st-navmid][data-st-navmid]{
position:static!important;left:auto!important;transform:none!important;
width:auto!important;flex:0 1 auto!important;
justify-self:center!important;min-width:0!important}
.st-dt [data-st-nav][data-st-nav]>:last-child{justify-self:end}
.st-dt [data-st-nav][data-st-nav] [data-st-navmid] a.cy-dchip{white-space:nowrap}
}
/* ============================================================
v11 · header desktop: flex, no rejilla
La rejilla de v10 fallaba por una razon concreta y medible: la caja
de herramientas mide 386px y su columna 1fr quedaba en 330px, asi que
con justify-self:end el contenido se salia 56px HACIA LA IZQUIERDA y
volvia a montarse sobre "Blog" (medido: x=775 cuando su columna
empezaba en 830). Una columna de rejilla no impide que su contenido
la desborde; un item flex si empuja a su vecino.
Se vuelve a flex space-between (que es como funcionaba por debajo de
1180 sin colisiones) y lo unico que se hace es NEUTRALIZAR el
position:absolute que la hoja de pagina aplica desde 1180.
============================================================ */
@media (min-width:992px){
.st-dt [data-st-nav][data-st-nav]{display:flex!important;align-items:center!important;
justify-content:space-between!important;column-gap:16px!important;
flex-wrap:nowrap!important}
.st-dt [data-st-nav][data-st-nav]>*{min-width:0}
.st-dt [data-st-nav][data-st-nav] [data-st-navmid][data-st-navmid]{
position:static!important;left:auto!important;transform:none!important;
width:auto!important;flex:0 1 auto!important;min-width:0!important;
justify-self:auto!important}
.st-dt [data-st-nav][data-st-nav] [data-st-navmid] a.cy-dchip{white-space:nowrap}
}
/* ============================================================
v12 · las dos dianas que faltaban
Ambas fallaban por lo mismo: mis reglas de v6 tenian la misma
especificidad que las de la hoja de PAGINA, que carga despues.
Aqui se suben por encima. El glifo pintado NO cambia en ninguna
de las dos: solo crece el area que recibe el dedo.
============================================================ */
/* CTA de la nav movil: la hoja de pagina lo fija en 126x36 con
height + min-height !important (0,6,0) y esa medida esta homologada
con el Home, asi que no se toca. El area va en un ::before absoluto
(el ::after ya lo usa la flecha del boton). */
html .st-mb [data-cy-lang] nav a[data-st-cta][data-st-cta][data-st-cta][data-st-cta]{position:relative}
html .st-mb [data-cy-lang] nav a[data-st-cta][data-st-cta][data-st-cta][data-st-cta]::before{
content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:100%;height:44px;pointer-events:auto;z-index:0}
/* Dots del carrusel: 7x7 pintados. El padding de v6 perdia contra
".st-mb [data-st-dot]" de la hoja de pagina. Se conserva el punto de
7px (y su animacion a 22px al estar activo) y se le da alto de diana
con padding + background-clip, que no repinta el fondo del padding. */
html .st-mb [data-st-dot][data-st-dot]{
box-sizing:content-box!important;
padding:18px 8px!important;
background-clip:content-box!important;
margin:0!important}
html .st-mb [data-st-dots],html .st-mb [data-st-dots][data-st-dots]{
gap:0!important;align-items:center!important}
/* ===== core v13 (1 sep 2026) ===== */
/* 1) Toggles de tema e idioma: mismo render en TODAS las páginas. Copia del set de reglas de Home elevada con html/html:root para ganar empates contra las hojas de página. */
html .st-dt [data-lang-btn]{cursor:pointer;border:none;background:transparent;display:inline-flex;align-items:center;gap:6px;padding:0 10px;font:700 10.5px 'Space Grotesk',sans-serif;letter-spacing:.08em;color:var(--cy-faint,#8A8F98)}
html .st-dt [data-cy-lang]:not([data-cy-lang="es"]) [data-lang-btn="en"],html .st-dt [data-cy-lang="es"] [data-lang-btn="es"]{color:var(--cy-ink,#0E1116)}
html .st-dt [data-cy-lang] div[role="group"][aria-label="Idioma"]{display:inline-flex!important}
html .st-dt [data-cy-lang] div[role="group"][aria-label="Idioma"]{width:auto!important;min-width:126px!important;flex:none!important}
html .st-dt [data-cy-lang] div[role="group"][aria-label="Idioma"] .cy-lang-btn{flex:1 1 0!important;justify-content:center!important;padding:0 12px!important;gap:8px!important}
html .st-dt [data-cy-lang] nav .cy-tgw{width:76px!important;flex:none!important}
html .st-dt [data-cy-lang] nav .cy-tgw .cy-tgb{flex:1 1 0!important;width:auto!important}
html .st-dt [data-cy-lang] nav .cy-tgw,html .st-dt [data-cy-lang] nav div[role="group"][aria-label="Idioma"],html .st-dt [data-cy-lang] nav a[data-st-cta][data-st-nav-cta]{height:46px!important;min-height:46px!important;box-sizing:border-box!important;border-radius:11px!important}
html .st-dt [data-cy-lang] div[role="group"][aria-label="Idioma"]{background:var(--cy-card,#FFFFFF)!important}
html .st-dt [data-cy-lang] [data-lang-btn]{background:transparent!important;color:var(--cy-mut,#5A6068)!important}
html .st-dt [data-cy-lang]:not([data-cy-lang="es"]) [data-lang-btn="en"],html .st-dt [data-cy-lang="es"] [data-lang-btn="es"]{background:#0E1116!important;background-image:none!important;color:#FFFFFF!important}
html:root[data-cy-theme="noche"] .st-dt [data-cy-lang]:not([data-cy-lang="es"]) [data-lang-btn="en"],html:root[data-cy-theme="noche"] .st-dt [data-cy-lang="es"] [data-lang-btn="es"]{background:#E9EDFB!important;background-image:none!important;color:#0E1116!important}
html .st-mb [data-lang-btn]{cursor:pointer;border:none;background:transparent;display:inline-flex;align-items:center;gap:6px;padding:0 10px;font:700 10.5px 'Space Grotesk',sans-serif;letter-spacing:.08em;color:var(--cy-faint,#8A8F98)}
html .st-mb [data-cy-lang]:not([data-cy-lang="es"]) [data-lang-btn="en"],html .st-mb [data-cy-lang="es"] [data-lang-btn="es"]{color:var(--cy-ink,#0E1116)}
html .st-mb [data-cy-lang] div[role="group"][aria-label="Idioma"]{display:inline-flex!important}
html .st-mb [data-cy-lang] div[role="group"][aria-label="Idioma"]{width:auto!important;min-width:126px!important;flex:none!important}
html .st-mb [data-cy-lang] div[role="group"][aria-label="Idioma"] .cy-lang-btn{flex:1 1 0!important;justify-content:center!important;padding:0 12px!important;gap:8px!important}
html .st-mb [data-cy-lang] nav .cy-tgw{width:76px!important;flex:none!important}
html .st-mb [data-cy-lang] nav .cy-tgw .cy-tgb{flex:1 1 0!important;width:auto!important}
html .st-mb [data-cy-lang] nav .cy-tgw,html .st-mb [data-cy-lang] nav div[role="group"][aria-label="Idioma"],html .st-mb [data-cy-lang] nav a[data-st-cta][data-st-nav-cta]{height:46px!important;min-height:46px!important;box-sizing:border-box!important;border-radius:11px!important}
html .st-mb [data-cy-lang]:not([data-cy-lang="es"]) [data-lang-btn="en"],html .st-mb [data-cy-lang="es"] [data-lang-btn="es"]{background:#0E1116!important;background-image:none!important;color:#FFFFFF!important}
html:root[data-cy-theme="noche"] .st-mb [data-cy-lang]:not([data-cy-lang="es"]) [data-lang-btn="en"],html:root[data-cy-theme="noche"] .st-mb [data-cy-lang="es"] [data-lang-btn="es"]{background:#E9EDFB!important;background-image:none!important;color:#0E1116!important}
html:root[data-cy-theme="noche"] .st-mb [data-cy-lang] div[role="group"][aria-label="Idioma"]{background:var(--cy-card,#0E1936)!important}
html:root[data-cy-theme="noche"] .st-mb [data-cy-lang] [data-lang-btn]{color:var(--cy-mut,#8A93A6)!important;background:transparent!important}
html:root[data-cy-theme="noche"] .st-mb [data-cy-lang]:not([data-cy-lang="es"]) [data-lang-btn="en"],html:root[data-cy-theme="noche"] .st-mb [data-cy-lang="es"] [data-lang-btn="es"]{color:#FFFFFF!important}
html .st-mb [data-cy-lang] nav .cy-tgw,html .st-mb [data-cy-lang] nav div[role="group"][aria-label="Idioma"],html .st-mb [data-cy-lang] nav a[data-st-cta][data-st-nav-cta]{height:32px!important;min-height:32px!important;border-radius:9px!important}
html .st-mb [data-cy-lang] nav .cy-tgw{width:58px!important}
html .st-mb [data-cy-lang] nav div[role="group"][aria-label="Idioma"]{min-width:78px!important}
html .st-mb [data-cy-lang] nav div[role="group"][aria-label="Idioma"] .cy-lang-btn{padding:0 6px!important;gap:4px!important;font-size:11.5px!important}
html .st-mb [data-cy-lang] nav>div[data-st-nav] .cy-tgw{display:none!important}
html .st-mb [data-cy-lang] nav [data-st-menu] .cy-tgw{display:inline-flex!important}
html .st-mb [data-cy-lang]:not([data-cy-lang="es"]) [data-lang-btn="en"],html .st-mb [data-cy-lang="es"] [data-lang-btn="es"]{background:#0E1116!important;background-image:none!important;color:#FFFFFF!important}
html:root[data-cy-theme="noche"] .st-mb [data-cy-lang]:not([data-cy-lang="es"]) [data-lang-btn="en"],html:root[data-cy-theme="noche"] .st-mb [data-cy-lang="es"] [data-lang-btn="es"]{background:#E9EDFB!important;background-image:none!important;color:#0E1116!important}
html .st-mb [data-cy-lang] nav .cy-tgw,html .st-mb [data-cy-lang] nav div[role="group"][aria-label="Idioma"],html .st-mb [data-cy-lang] nav a[data-st-cta][data-st-nav-cta]{height:36px!important;min-height:36px!important}
html .st-dt div[role="group"][aria-label="Idioma"]{display:inline-flex!important;align-items:stretch!important}
html .st-dt div[role="group"][aria-label="Idioma"] [data-lang-btn]{align-self:stretch!important;height:auto!important;min-height:44px!important;display:inline-flex!important;align-items:center!important;box-sizing:border-box}
html .st-mb div[role="group"][aria-label="Idioma"]{height:36px!important;border-radius:9px!important;overflow:hidden!important;display:flex!important;align-items:stretch!important;box-sizing:border-box}
html .st-mb div[role="group"][aria-label="Idioma"] [data-lang-btn]{align-self:stretch!important;height:auto!important;min-height:0!important;display:flex!important;align-items:center!important;box-sizing:border-box}
html .cy-tgb[data-st-hoverdither][data-st-hoverdither][data-st-hoverdither]:focus-visible:not(:hover),html [data-lang-btn][data-st-hoverdither][data-st-hoverdither][data-st-hoverdither]:focus-visible:not(:hover){background-image:none!important;background-color:transparent!important;color:inherit!important}
html .st-dt [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] .cy-tgw,html .st-dt [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] div[role="group"][aria-label="Idioma"]{background:rgba(11,16,25,.42)!important;border-color:rgba(255,255,255,.3)!important}
html .st-dt [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] [data-lang-btn]{color:rgba(255,255,255,.6)!important;background:transparent!important}
html .st-dt [data-cy-lang="es"]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] [data-lang-btn="es"],html .st-dt [data-cy-lang]:not([data-cy-lang="es"]):has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] [data-lang-btn="en"]{background:#000000!important;color:#FFFFFF!important}
html .st-dt [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] .cy-tgw,html .st-dt [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] div[role="group"][aria-label="Idioma"]{background:var(--cy-card,#FFFFFF)!important;border-color:var(--cy-ln,#C4CFE4)!important}
html .st-dt [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] .cy-tgw span[aria-hidden="true"],html .st-dt [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] div[role="group"][aria-label="Idioma"] span[aria-hidden="true"]{background:var(--cy-ln,#C4CFE4)!important}
html .st-dt [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] [data-lang-btn]{color:var(--cy-mut,#5A6068)!important;background:transparent!important}
html .st-dt [data-cy-lang="es"]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] [data-lang-btn="es"],html .st-dt [data-cy-lang]:not([data-cy-lang="es"]):has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] [data-lang-btn="en"]{background:var(--cy-ink,#0E1116)!important;color:var(--cy-card,#FFFFFF)!important}
html .st-mb [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] .cy-tgw,html .st-mb [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] div[role="group"][aria-label="Idioma"]{background:rgba(11,16,25,.42)!important;border-color:rgba(255,255,255,.3)!important}
html .st-mb [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] [data-lang-btn]{color:rgba(255,255,255,.6)!important;background:transparent!important}
html .st-mb [data-cy-lang="es"]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] [data-lang-btn="es"],html .st-mb [data-cy-lang]:not([data-cy-lang="es"]):has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] [data-lang-btn="en"]{background:#000000!important;color:#FFFFFF!important}
html:root[data-cy-theme="dia"] .st-mb [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] .cy-tgw,html:root[data-cy-theme="dia"] .st-mb [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] div[role="group"][aria-label="Idioma"]{background:var(--cy-card,#FFFFFF)!important;border-color:var(--cy-ln,#C4CFE4)!important}
html:root[data-cy-theme="dia"] .st-mb [data-cy-lang]:has([data-st-hero-dark]) [data-st-nav][data-scrolled="0"] [data-lang-btn]{color:var(--cy-mut,#5A6068)!important}
/* 2) Hover del toggle: el icono/texto siempre contrasta con la rampa dither, también con la nav transparente sobre hero oscuro (scrolled=0). Día: rampa azul → icono blanco. Noche: rampa clara → icono oscuro. */
html .st-dt [data-cy-lang] nav [data-st-nav] .cy-tgw .cy-tgb[data-st-hoverdither][data-st-hoverdither]:hover,html .st-dt [data-cy-lang] nav [data-st-nav] .cy-tgw .cy-tgb[data-st-hoverdither][data-st-hoverdither]:focus-visible,html .st-mb [data-cy-lang] nav .cy-tgw .cy-tgb[data-st-hoverdither][data-st-hoverdither]:hover,html .st-mb [data-cy-lang] nav .cy-tgw .cy-tgb[data-st-hoverdither][data-st-hoverdither]:focus-visible,html .st-dt [data-cy-lang] nav [data-st-nav] [data-lang-btn][data-st-hoverdither][data-st-hoverdither]:hover,html .st-dt [data-cy-lang] nav [data-st-nav] [data-lang-btn][data-st-hoverdither][data-st-hoverdither]:focus-visible,html .st-mb [data-cy-lang] nav [data-lang-btn][data-st-hoverdither][data-st-hoverdither]:hover,html .st-mb [data-cy-lang] nav [data-lang-btn][data-st-hoverdither][data-st-hoverdither]:focus-visible{color:#FFFFFF!important}
html:root[data-cy-theme="noche"] .st-dt [data-cy-lang] nav [data-st-nav] .cy-tgw .cy-tgb[data-st-hoverdither][data-st-hoverdither]:hover,html:root[data-cy-theme="noche"] .st-dt [data-cy-lang] nav [data-st-nav] .cy-tgw .cy-tgb[data-st-hoverdither][data-st-hoverdither]:focus-visible,html:root[data-cy-theme="noche"] .st-mb [data-cy-lang] nav .cy-tgw .cy-tgb[data-st-hoverdither][data-st-hoverdither]:hover,html:root[data-cy-theme="noche"] .st-mb [data-cy-lang] nav .cy-tgw .cy-tgb[data-st-hoverdither][data-st-hoverdither]:focus-visible,html:root[data-cy-theme="noche"] .st-dt [data-cy-lang] nav [data-st-nav] [data-lang-btn][data-st-hoverdither][data-st-hoverdither]:hover,html:root[data-cy-theme="noche"] .st-dt [data-cy-lang] nav [data-st-nav] [data-lang-btn][data-st-hoverdither][data-st-hoverdither]:focus-visible,html:root[data-cy-theme="noche"] .st-mb [data-cy-lang] nav [data-lang-btn][data-st-hoverdither][data-st-hoverdither]:hover,html:root[data-cy-theme="noche"] .st-mb [data-cy-lang] nav [data-lang-btn][data-st-hoverdither][data-st-hoverdither]:focus-visible{color:#070B12!important}
/* el foco por teclado sin hover conserva el estado base (regla ya existente en las hojas de página, replicada aquí) */
html .cy-tgb[data-st-hoverdither][data-st-hoverdither][data-st-hoverdither]:focus-visible:not(:hover),html [data-lang-btn][data-st-hoverdither][data-st-hoverdither][data-st-hoverdither]:focus-visible:not(:hover){background-image:none!important;background-color:transparent!important;color:inherit!important}
/* 3) Bloques de dos columnas (texto + ilustración): centrados verticalmente entre sí en desktop, en todas las landings. */
html .st-dt [data-cy-lang] [data-st-2col][data-st-2col]{align-items:center!important}
html .st-dt [data-cy-lang] [data-st-2col][data-st-2col]>*{align-self:center!important}
/* ===== core v14 (1 sep 2026) ===== */
/* 4) Menú móvil: grupos de idioma y tema idénticos en todas las páginas. 44px de alto (diana táctil), radio 11 como en desktop, botones de 42. Antes: Home 36/34, Tesis 34/32 con fuente 10px, LP con padding 14px y borde superior distinto. */
html .st-mb [data-cy-lang] nav [data-st-menu] .cy-tgw,html .st-mb [data-cy-lang] nav [data-st-menu-root] .cy-tgw,html .st-mb [data-cy-lang] nav [data-st-menu] div[role="group"][aria-label],html .st-mb [data-cy-lang] nav [data-st-menu-root] div[role="group"][aria-label]{height:44px!important;min-height:44px!important;padding:0!important;margin:0!important;border-radius:11px!important;border-width:1px!important;border-style:solid!important;border-color:var(--cy-ln,#C4CFE4)!important;box-sizing:border-box!important;display:inline-flex!important;align-items:stretch!important}
html:root[data-cy-theme="noche"] .st-mb [data-cy-lang] nav [data-st-menu] .cy-tgw,html:root[data-cy-theme="noche"] .st-mb [data-cy-lang] nav [data-st-menu-root] .cy-tgw,html:root[data-cy-theme="noche"] .st-mb [data-cy-lang] nav [data-st-menu] div[role="group"][aria-label],html:root[data-cy-theme="noche"] .st-mb [data-cy-lang] nav [data-st-menu-root] div[role="group"][aria-label]{border-color:#2B2E32!important}
html .st-mb [data-cy-lang] nav [data-st-menu] .cy-tgw .cy-tgb,html .st-mb [data-cy-lang] nav [data-st-menu-root] .cy-tgw .cy-tgb{height:42px!important;min-height:42px!important;max-height:42px!important;width:28px!important;min-width:28px!important;padding:0!important;align-self:stretch!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
html .st-mb [data-cy-lang] nav [data-st-menu] .cy-tgw .cy-tgb svg,html .st-mb [data-cy-lang] nav [data-st-menu-root] .cy-tgw .cy-tgb svg{width:14px!important;height:14px!important;flex:0 0 auto!important}
html .st-mb [data-cy-lang] nav [data-st-menu] [data-lang-btn],html .st-mb [data-cy-lang] nav [data-st-menu-root] [data-lang-btn]{height:42px!important;min-height:42px!important;max-height:42px!important;font-size:11.5px!important;letter-spacing:.08em!important;padding:0 10px!important;align-self:stretch!important;display:inline-flex!important;align-items:center!important;gap:6px!important}
/* ===== core v15 (1 sep 2026) ===== */
/* 5) Barra móvil: nunca muestra toggles, viven en el menú. Las hojas de página filtraban por aria-label="Idioma" y el label pasa a "Language" en EN, así que en /en/tesis el grupo de idioma se colaba en la barra. Selectores sin depender del label. */
html .st-mb [data-cy-lang] nav>div[data-st-nav] .cy-tgw,html .st-mb [data-cy-lang] nav>div[data-st-nav] div[role="group"]{display:none!important}
html .st-mb [data-cy-lang] nav [data-st-menu] .cy-tgw,html .st-mb [data-cy-lang] nav [data-st-menu] div[role="group"],html .st-mb [data-cy-lang] nav [data-st-menu-root] .cy-tgw,html .st-mb [data-cy-lang] nav [data-st-menu-root] div[role="group"]{display:inline-flex!important}
/* ===== core v16 (1 sep 2026) ===== */
/* 6) Menú móvil de /como-funciona: su grid ordenaba los grupos por aria-label="Idioma"/"Tema" y en EN (Language/Theme) se desordenaba. Orden por clase y filas de 72px como en Home/Tesis. */
html .st-mb [data-cy-lang] nav [data-st-menu] div:has(>div[role="group"].cy-tgw):has(>div[role="group"]:not(.cy-tgw)){display:grid!important;grid-template-columns:1fr auto!important;grid-auto-rows:72px!important;align-items:center!important;row-gap:0!important;column-gap:12px!important}
html .st-mb [data-cy-lang] nav [data-st-menu] div:has(>div[role="group"].cy-tgw)>div[role="group"]:not(.cy-tgw){order:2!important;justify-self:end!important}
html .st-mb [data-cy-lang] nav [data-st-menu] div:has(>div[role="group"].cy-tgw)>div[role="group"].cy-tgw{order:4!important;justify-self:end!important}
/* ===== core v17 (1 sep 2026) ===== */
/* 7) Menú móvil de /como-funciona: filas de 72/73px con separador, igual que las filas de Home y Tesis (la hoja de página fijaba 64px 64px). */
html .st-mb [data-cy-lang] nav [data-st-menu] div:has(>div[role="group"].cy-tgw):has(>div[role="group"]:not(.cy-tgw)){grid-template-rows:72px 73px!important;background-image:linear-gradient(var(--cy-ln-soft,#DCE3F2),var(--cy-ln-soft,#DCE3F2))!important;background-repeat:no-repeat!important;background-size:100% 1px!important;background-position:0 72px!important}
html:root[data-cy-theme="noche"] .st-mb [data-cy-lang] nav [data-st-menu] div:has(>div[role="group"].cy-tgw):has(>div[role="group"]:not(.cy-tgw)){background-image:linear-gradient(#2B2E32,#2B2E32)!important}
/* ===== core v18 (2 sep 2026) ===== */
/* 8) Formulario de contacto en desktop: la tarjeta ya no reserva alto mínimo (dejaba ~158px de hueco bajo «Enviar»), sin margen superior y centrada en su fila. Textarea más baja. */
html .st-dt [data-cy-lang] [data-st-2col][data-st-2col]>*:has(form){min-height:0!important;height:auto!important;margin-top:0!important;margin-bottom:0!important;align-self:center!important}
html .st-dt [data-cy-lang] [data-st-2col] *:has(form) textarea{min-height:140px!important;height:150px!important}
/* v19: textarea del formulario de contacto — Webflow lo estira con flex:1 dentro del label; fijar alto */
html .st-dt [data-cy-lang] [data-st-2col] *:has(form) textarea,html .st-dt [data-cy-lang] [data-st-2col] *:has(form) label:has(>textarea){flex:0 0 auto!important}
html .st-dt [data-cy-lang] [data-st-2col] *:has(form) label:has(>textarea){min-height:0!important;height:auto!important}
html .st-dt [data-cy-lang] [data-st-2col] *:has(form) textarea{min-height:140px!important;height:150px!important;max-height:150px!important}
/* v20: bandas de constelación — quitar el PNG estático de estrellas (.cy-grain/.cy-stars-* inyectado por cy-dither-ui); solo queda el canvas dinámico */
html div.cy-grain:has(>canvas[data-st-band]),html[data-cy-theme] div.cy-grain:has(>canvas[data-st-band]),html div.cy-grain:has(>canvas[data-st-band]):hover{background-image:none!important}
/* ===== v21: capa TABLET (681-991px) — árbol desktop con composición propia ===== */
@media (min-width:681px) and (max-width:991px){
/* Header compacto: una sola línea, sin envolver */
html .st-dt nav>div[data-st-nav]{padding-left:22px!important;padding-right:22px!important;gap:12px!important;flex-wrap:nowrap!important}
html .st-dt nav>div[data-st-nav]>a:first-child{flex:0 0 auto!important}
html .st-dt nav>div[data-st-nav] img[data-ody-logo]{width:auto!important;height:22px!important}
html .st-dt nav>div[data-st-nav] div[data-st-navmid]{flex:1 1 auto!important;justify-content:center!important;flex-wrap:nowrap!important;gap:0!important;min-width:0!important}
html .st-dt nav>div[data-st-nav] div[data-st-navmid]>a{padding-left:6px!important;padding-right:6px!important;font-size:12.5px!important;white-space:nowrap!important;height:34px!important}
html .st-dt nav>div[data-st-nav] div[data-st-navmid]>a>span{white-space:nowrap!important}
html .st-dt nav>div[data-st-nav]>div:last-child{gap:6px!important;flex:0 0 auto!important}
html .st-dt nav>div[data-st-nav] div[role="group"]{height:38px!important}
html .st-dt nav>div[data-st-nav] div[role="group"]>a{height:36px!important;min-width:36px!important;padding-left:8px!important;padding-right:8px!important}
html .st-dt nav>div[data-st-nav] div[role="group"]>a[data-lang-btn] span{display:none!important}
html .st-dt nav>div[data-st-nav] div[role="group"]>a[data-lang-btn]{width:40px!important;min-width:40px!important;justify-content:center!important;gap:0!important}
html .st-dt nav>div[data-st-nav]>div:last-child>a:last-child{height:38px!important;padding-left:14px!important;padding-right:14px!important;font-size:13px!important;white-space:nowrap!important}
/* Hero: bloque de texto en la mitad superior (zona segura del arte 3:4) */
html .st-dt [data-st-hero] h1{font-size:min(6.8vw,54px)!important;line-height:1.06!important}
html .st-dt [data-st-hero] h1 ~ p{font-size:17px!important;line-height:1.5!important;max-width:38em!important}
/* Arte de hero 3:4 (el src lo asigna el boot del head por viewport y densidad); encuadre */
html .st-dt [data-st-hero] img{object-fit:cover!important}
html .st-dt [data-st-hero] img[src*="E1-hero-odiseo-v3"],html .st-dt [data-st-hero] img[src*="PL-hero-flota"]{object-position:50% 100%!important}
html .st-dt [data-st-hero] img[src*="R40-tesis-carta"]{object-position:50% 62%!important}
/* Secciones: filas de dos columnas apiladas con ritmo de tablet */
html .st-dt [data-cy-lang] [data-st-2col]{gap:28px!important}
html .st-dt [data-cy-lang] [data-st-2col]>*>img{margin-top:0!important}
/* Header compacto: especificidad por encima de las reglas de toggles del core */
html:root .st-dt nav>div[data-st-nav] div[role="group"][role="group"]{height:38px!important}
html:root .st-dt nav>div[data-st-nav] div[role="group"]>a[aria-label][aria-label]{height:36px!important;min-width:36px!important}
html:root .st-dt nav>div[data-st-nav] div[role="group"]>span{height:36px!important}
html:root .st-dt nav>div[data-st-nav] a[data-lang-btn][data-lang-btn]{font-size:0!important;width:40px!important;min-width:40px!important;padding:0!important;justify-content:center!important}
html:root .st-dt nav>div[data-st-nav] a[data-lang-btn] svg{width:18px!important;height:12px!important}
html:root .st-dt nav>div[data-st-nav] a[data-st-nav-cta][data-st-nav-cta]{height:38px!important;padding:0 14px!important;font-size:13px!important}
html:root .st-dt nav>div[data-st-nav] div[role="group"][role="group"]{min-height:38px!important;max-height:38px!important}
html:root .st-dt nav>div[data-st-nav] div[role="group"]>a[aria-label][aria-label]{min-height:36px!important;max-height:36px!important}
html:root .st-dt nav>div[data-st-nav] a[data-st-nav-cta][data-st-nav-cta]{min-height:38px!important;max-height:38px!important}
html:root .st-dt nav>div[data-st-nav]{height:64px!important}
}
/* ===== v22: 431-680px (phablet / tablet chica) — sin cap de 430px; arte de hero 3:4 y CTAs en fila ===== */
@media (min-width:431px) and (max-width:680px){
html .st-mb [data-cy-lang]{max-width:none!important;box-shadow:none!important}
html .st-mb [data-st-hero]:has(>img){aspect-ratio:3/4!important}
html .st-mb [data-st-hero] img{object-fit:cover!important}
html .st-mb [data-st-hero] img[src*="E1-hero-odiseo-v3-t"],html .st-mb [data-st-hero] img[src*="PL-hero-flota-t"]{object-position:50% 100%!important}
html .st-mb [data-st-hero] img[src*="R40-tesis-carta-t"]{object-position:50% 62%!important}
html .st-mb [data-st-hero] h1{font-size:34px!important}
html .st-mb [data-st-hero] div:has(>a[data-st-cta]){flex-direction:row!important;justify-content:center!important;gap:12px!important;flex-wrap:wrap!important}
html .st-mb [data-st-hero] a[data-st-cta]{width:auto!important;min-width:230px!important}
}
/* ===== v22: 992-1199px (iPad horizontal, laptops chicas) — la bajada no debe alcanzar al sujeto del arte 16:9 ===== */
@media (min-width:992px) and (max-width:1199px){
html .st-dt [data-st-hero] h1 ~ p{max-width:30em!important}
}
/* ===== v22: pedidos de Toño (2 sep) ===== */
/* Cómo funciona: sin CTAs en el hero (ambos árboles, ambos idiomas) */
html [data-screen-label^="Hero, Ítaca"] [data-st-hero] div:has(>a[data-st-cta]),html [data-screen-label^="Hero, Ítaca"] div:has(>a[data-st-cta]){display:none!important}
/* Móvil: logo y CTA del header blancos al inicio; al hacer scroll, CTA negro (modo día) */
@media (max-width:680px){
html:root:not([data-cy-theme="noche"]) .st-mb [data-cy-lang] [data-st-nav][data-scrolled="1"] a[data-st-cta][data-st-nav-cta]{background:#0E1116!important;color:#FFFFFF!important;border-color:#0E1116!important;opacity:1!important}
html:root:not([data-cy-theme="noche"]) .st-mb [data-cy-lang] [data-st-nav][data-scrolled="1"] a[data-st-cta][data-st-nav-cta] svg{color:#FFFFFF!important}
html:root:not([data-cy-theme="noche"]) .st-mb [data-cy-lang] [data-st-nav][data-scrolled="1"] img[data-ody-logo]{filter:none!important}
html .st-mb [data-cy-lang] [data-st-nav][data-scrolled="0"] a[data-st-cta][data-st-nav-cta]{background:#FFFFFF!important;color:#0E1116!important;border-color:#FFFFFF!important}
html .st-mb [data-cy-lang] [data-st-nav][data-scrolled="0"] img[data-ody-logo]{filter:brightness(0) invert(1)!important}
}
/* Carrusel móvil de bloques con rombos: tarjetas a hueso (1px, misma línea que en desktop) */
html:root .st-mb [data-cy-lang] [data-st-blq][data-st-carr][data-st-carr]{gap:0!important;column-gap:0!important;row-gap:0!important}
/* Rombos y línea entre tarjetas en noche: mismo relleno que las tarjetas */
html[data-cy-theme="noche"] [data-cy-lang] [data-st-blq] .st-n{background-color:var(--cy-card,#0E1936)!important;border-color:var(--st-rombo,#8FA3FF)!important}
/* ===== v23: header móvil — CTA cuadrado del mismo ancho que el botón de menú (solo icono; el texto sigue accesible) ===== */
@media (max-width:680px){
html:root .st-mb [data-cy-lang] nav a[data-st-cta][data-st-nav-cta]{width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;font-size:0!important;line-height:0!important;letter-spacing:0!important;justify-content:center!important;align-items:center!important;border-radius:9px!important;gap:0!important}
html:root .st-mb [data-cy-lang] nav a[data-st-cta][data-st-nav-cta] svg{display:block!important;width:18px!important;height:18px!important;margin:0!important}
html:root .st-mb [data-cy-lang] nav a[data-st-cta][data-st-nav-cta] span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
}
/* ===== v24: footer — iconos de redes y de asistentes de IA con la misma intensidad que en Inicio (Tesis los traía en #9AA3B8 por una clase inline) ===== */
/* v25: aplica en ambos temas (Inicio ya los tiene en .75 blanco también en noche) */
html:root [data-cy-lang] footer a[aria-label]:not(:hover):not(:focus-visible){color:rgba(242,244,248,.75)!important}
html:root [data-cy-lang] footer a[aria-label]:not(:hover):not(:focus-visible) svg{color:inherit!important}
/* ===== v26: header desktop — enlaces centrados exactamente en la pantalla (cuando hay espacio) ===== */
@media (min-width:1400px){
html:root .st-dt nav>div[data-st-nav]{position:relative!important}
html:root .st-dt nav>div[data-st-nav] div[data-st-navmid]{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;flex:none!important}
}
/* ===== v26: enlace de la página actual en hover — legible en cada estado del header ===== */
html:root .st-dt [data-st-nav][data-scrolled="0"] div[data-st-navmid] a[data-st-here]:hover,html:root .st-dt [data-st-nav][data-scrolled="0"] div[data-st-navmid] a[data-st-here]:focus-visible{color:#FFFFFF!important}
html:root[data-cy-theme="noche"] .st-dt [data-st-nav] div[data-st-navmid] a[data-st-here]:hover,html:root[data-cy-theme="noche"] .st-dt [data-st-nav] div[data-st-navmid] a[data-st-here]:focus-visible{color:#FFFFFF!important}
html:root:not([data-cy-theme="noche"]) .st-dt [data-st-nav][data-scrolled="1"] div[data-st-navmid] a[data-st-here]:hover,html:root:not([data-cy-theme="noche"]) .st-dt [data-st-nav][data-scrolled="1"] div[data-st-navmid] a[data-st-here]:focus-visible{color:#0E1116!important}
/* ===== v26: toggles en modo día — el segmento activo del tema usa el mismo relleno negro que el de idioma (sin rampa azul) ===== */
html:root:not([data-cy-theme="noche"]) [data-cy-lang] [data-st-nav] div[role="group"] a[data-cy-tema][aria-pressed="true"]{background-image:none!important;background-color:#0E1116!important;color:#FFFFFF!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] [data-st-nav] div[role="group"] a[data-cy-tema][aria-pressed="true"] svg{color:#FFFFFF!important}
/* ===== v26: blog — el contenedor de publicaciones deja ver los rombos completos (antes overflow:hidden los cortaba en triángulo); las esquinas de tarjetas e imágenes las ajusta st-pages (esquinasBlq) ===== */
html:root [data-cy-lang] [data-screen-label="Recursos, publicaciones"] [data-st-blq]{overflow:visible!important}
/* ===== v27: header desktop — el centrado ≥1400 debe ganar a la capa laptop (selectores dobles [data-st-nav][data-st-nav]) ===== */
@media (min-width:1400px){
html:root .st-dt nav>div[data-st-nav][data-st-nav][data-st-nav]{position:relative!important}
html:root .st-dt nav>div[data-st-nav][data-st-nav] div[data-st-navmid][data-st-navmid][data-st-navmid]{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;flex:none!important;justify-self:auto!important;width:auto!important}
}
/* ===== v28: header desktop — el enlace de la página actual, al hover/focus, SIEMPRE en blanco.
En día con scroll la pastilla de hover es #294779 sólida (medido sin transiciones): tinta sobre eso era ilegible. ===== */
html:root .st-dt [data-st-nav][data-st-nav] div[data-st-navmid] a[data-st-here][data-st-here]:hover,
html:root .st-dt [data-st-nav][data-st-nav] div[data-st-navmid] a[data-st-here][data-st-here]:focus-visible{color:#FFFFFF!important}
html:root .st-dt [data-st-nav][data-st-nav] div[data-st-navmid] a[data-st-here][data-st-here]:hover span,
html:root .st-dt [data-st-nav][data-st-nav] div[data-st-navmid] a[data-st-here][data-st-here]:focus-visible span{color:#FFFFFF!important}
/* ===== v29: header móvil del Home al tope en modo día — logo y CTA blancos sobre la portada (azul medio).
La LP ya lo hace desde su hoja; Tesis mantiene logo/CTA oscuros porque su portada diurna arranca en cielo claro.
Pisa las reglas día-top de st-home (html[data-cy-theme="dia"] .st-mb [data-cy-lang]:has([data-st-hero-dark]) … = 0,7,x). ===== */
html:root[data-cy-theme="dia"][data-wf-page="6a553f8e569e3148ffc68445"] .st-mb [data-cy-lang][data-cy-lang] nav [data-st-nav][data-scrolled="0"] img[data-ody-logo]{filter:brightness(0) invert(1)!important}
html:root[data-cy-theme="dia"][data-wf-page="6a553f8e569e3148ffc68445"] .st-mb [data-cy-lang][data-cy-lang] nav [data-st-nav][data-scrolled="0"] a[data-st-cta][data-st-nav-cta]{background:#FFFFFF!important;background-image:none!important;color:#0E1116!important;border-color:rgba(255,255,255,.7)!important}
html:root[data-cy-theme="dia"][data-wf-page="6a553f8e569e3148ffc68445"] .st-mb [data-cy-lang][data-cy-lang] nav [data-st-nav][data-scrolled="0"] a[data-st-cta][data-st-nav-cta] svg{color:#0E1116!important}
/* ===== v30–v32 (2 sep, tarde): LP Cómo funciona — mockups, Cap IV, botón Enviar en noche ===== */
/* Cap II: los mockups de UI de los agentes con esquinas curvas (el color lo homologa st-pages v19 por tema) */
html:root [data-cy-lang] .st-i-0ec5a772{border-radius:12px!important;overflow:hidden!important}
/* Cap VII: en noche el botón Enviar es claro (#E9EDFB); el texto debe ser tinta, no blanco */
html:root[data-cy-theme="noche"] [data-cy-lang] [data-st-form] a.cy-dbtn,
html:root[data-cy-theme="noche"] [data-cy-lang] [data-st-form] a.cy-dbtn span,
html:root[data-cy-theme="noche"] [data-cy-lang] [data-st-form] a.cy-dbtn svg{color:#0E1116!important}
html:root[data-cy-theme="noche"] [data-cy-lang] [data-st-form] a.cy-dbtn:hover,
html:root[data-cy-theme="noche"] [data-cy-lang] [data-st-form] a.cy-dbtn:hover span,
html:root[data-cy-theme="noche"] [data-cy-lang] [data-st-form] a.cy-dbtn:hover svg{color:#0E1116!important}
/* Cap IV (desktop ≥992): el mockup del Risk Score baja debajo de los logotipos y la ilustración ocupa la columna derecha
completa. Sin mover el DOM: la columna izquierda pasa a display:contents y sus hijos se colocan en la retícula de la fila. */
@media (min-width:992px){
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col].st-i-fc4e934f{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto auto auto auto minmax(0,1fr)!important;column-gap:40px!important;row-gap:22px!important;align-items:start!important}
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col] > .st-i-b5a98edb{display:contents!important}
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col] .st-i-cc11c3f7{grid-column:1!important;grid-row:1!important}
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col] p.st-i-ff663dcc:nth-of-type(1){grid-column:1!important;grid-row:2!important;margin:0!important}
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col] p.st-i-ff663dcc:nth-of-type(2){grid-column:1!important;grid-row:3!important;margin:0!important}
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col] .st-i-29d06dd0{grid-column:1!important;grid-row:4!important}
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col] > .st-i-88bffc68{grid-column:1!important;grid-row:5!important;align-self:start!important;width:100%!important;max-width:none!important;margin:6px 0 0!important}
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col] .st-i-47aec4c2{grid-column:2!important;grid-row:1 / span 5!important;align-self:stretch!important;display:flex!important;margin:0!important;min-height:0!important}
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col] .st-i-47aec4c2 .st-i-c53288ea{position:relative!important;display:block!important;flex:1 1 auto!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;min-height:0!important;overflow:hidden!important}
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col] .st-i-47aec4c2 img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:100%!important;max-height:none!important;object-fit:cover!important;object-position:50% 45%!important}
}
/* ===== v31: Cap II, ilustración de las atalayas — anclada arriba para que el vigía con el catalejo salga entero
(la hoja recorta con height:clamp(220px,26vw,360px) y object-position:center: en laptop le cortaba la cabeza) ===== */
html:root .st-dt [data-cy-lang] [data-screen-label^="Capítulo II"] [data-st-rev]>img[src*="R26-agentes"]{object-position:50% 0%!important;padding-top:0!important;box-sizing:content-box!important;background:transparent!important}
/* (la hoja fija aspect-ratio 7/3 con !important, así que el arte nunca se recorta: el vigía nace pegado al borde superior
del propio archivo. Los 14px de aire arriba lo "bajan" dentro de su marco; el selector iguala el de la hoja + html:root.) */
/* ============================================================================
v33 (3 sep) — Toño: heroes homologados, Cap IV, hero del blog, CTA móvil y puntos del carrusel
============================================================================ */
/* --- A. Heroes homologados: Inicio, Cómo funciona y Tesis (desktop) ---
Los tres heroes van sobre ilustración oscura, así que la referencia es el tratamiento de Tesis/LP:
chip lavanda translúcido, título blanco y bajada blanca al 85%. El Home venía con tinta/gris en día.
Solo cambian chip, título y bajada: los CTAs siguen existiendo únicamente en Inicio. */
html:root .st-dt [data-cy-lang] .st-i-e8cb974b.st-i-e8cb974b,
html:root .st-dt [data-cy-lang] .st-i-10d9daec.st-i-10d9daec,
html:root .st-dt [data-cy-lang] .st-i-50618151.st-i-50618151{
display:inline-flex!important;align-items:center!important;width:fit-content!important;
font:600 12px 'Space Grotesk',sans-serif!important;letter-spacing:.17em!important;
color:#9FB0FF!important;border:1px solid rgba(159,176,255,.42)!important;
background:rgba(159,176,255,.1)!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
padding:9px 14px!important;border-radius:10px!important}
html:root .st-dt [data-cy-lang] h1.st-i-0ce7b039.st-i-0ce7b039,
html:root .st-dt [data-cy-lang] h1.st-i-d6ae7b3e.st-i-d6ae7b3e,
html:root .st-dt [data-cy-lang] h1.st-i-47c4d65a.st-i-47c4d65a,
html:root .st-dt [data-cy-lang] h1.st-i-0ce7b039 > span:not([class*="dser"]),
html:root .st-dt [data-cy-lang] h1.st-i-d6ae7b3e > span:not([class*="dser"]),
html:root .st-dt [data-cy-lang] h1.st-i-47c4d65a > span:not([class*="dser"]){
color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important}
html:root .st-dt [data-cy-lang] p.st-i-2c883a74.st-i-2c883a74,
html:root .st-dt [data-cy-lang] p.st-i-867d382e.st-i-867d382e,
html:root .st-dt [data-cy-lang] p.st-i-adc4c51c.st-i-adc4c51c,
html:root .st-dt [data-cy-lang] p.st-i-2c883a74 span,html:root .st-dt [data-cy-lang] p.st-i-2c883a74 strong,html:root .st-dt [data-cy-lang] p.st-i-2c883a74 b,
html:root .st-dt [data-cy-lang] p.st-i-867d382e span,html:root .st-dt [data-cy-lang] p.st-i-867d382e strong,html:root .st-dt [data-cy-lang] p.st-i-867d382e b,
html:root .st-dt [data-cy-lang] p.st-i-adc4c51c span,html:root .st-dt [data-cy-lang] p.st-i-adc4c51c strong,html:root .st-dt [data-cy-lang] p.st-i-adc4c51c b{
color:rgba(242,244,248,.85)!important;-webkit-text-fill-color:rgba(242,244,248,.85)!important}
html:root .st-dt [data-cy-lang] p.st-i-867d382e.st-i-867d382e{font:400 21px/1.55 'DM Sans',sans-serif!important}
/* --- B. Cap IV: la ilustración baja bajo la línea del chip y se ensancha hasta el borde de la pantalla --- */
@media (min-width:992px){
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col].st-i-fc4e934f{
grid-template-columns:minmax(0,0.93fr) minmax(0,1.07fr)!important;column-gap:36px!important}
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col] .st-i-47aec4c2{
grid-row:2 / span 4!important;
margin-right:0!important}
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col] .st-i-47aec4c2 .st-i-c53288ea{
border-radius:18px!important;overflow:hidden!important}
html:root .st-dt [data-screen-label^="Capítulo IV"] [data-st-2col] .st-i-47aec4c2 img{border-radius:0!important}
}
/* --- C. Hero del blog: bajo la barra de navegación y pegado a la línea divisora ---
El elemento trae margin-top:-36px y align-self:start en estilo inline de Webflow: solo !important lo vence. */
@media (min-width:992px){
html:root .st-dt [data-cy-lang] [data-screen-label="Recursos, portada"] .st-i-498f1b7f{
margin-top:0!important;align-self:stretch!important;min-height:0!important}
html:root .st-dt [data-cy-lang] [data-screen-label="Recursos, portada"] .st-i-498f1b7f>img{
width:100%!important;height:100%!important;object-fit:cover!important}
}
/* --- D. CTA móvil de la barra: vuelve a ser pastilla ancha con la palabra visible --- */
@media (max-width:680px){
html:root .st-mb [data-cy-lang] nav a[data-st-cta][data-st-nav-cta][data-st-nav-cta]{
width:auto!important;min-width:0!important;max-width:none!important;
height:44px!important;min-height:44px!important;max-height:44px!important;
padding:0 14px!important;gap:7px!important;
display:inline-flex!important;align-items:center!important;justify-content:center!important;
font:600 13.5px/1 'DM Sans',sans-serif!important;letter-spacing:0!important;border-radius:11px!important}
html:root .st-mb [data-cy-lang] nav a[data-st-cta][data-st-nav-cta][data-st-nav-cta] span{
position:static!important;width:auto!important;height:auto!important;
overflow:visible!important;clip:auto!important;clip-path:none!important;
white-space:nowrap!important;margin:0!important;padding:0!important}
html:root .st-mb [data-cy-lang] nav a[data-st-cta][data-st-nav-cta][data-st-nav-cta] svg{
display:block!important;width:15px!important;height:15px!important;flex:none!important;margin:0!important;order:2!important}
}
/* --- E. Indicadores del carrusel: punto redondo y barra recta de esquinas curvas ---
La forma se rompía porque el fondo se pintaba con background-clip:content-box y el radio vive en el borde
exterior: el radio efectivo del área pintada quedaba en 0 y salían cuadrados. Ahora la marca es un ::before. */
html:root [data-cy-lang] [data-st-dot][data-st-dot][data-st-dot]{
background:transparent!important;background-image:none!important;background-clip:border-box!important;
position:relative!important;border-radius:0!important;opacity:1!important;border:0!important}
html:root [data-cy-lang] [data-st-dot][data-st-dot][data-st-dot]::before{
content:""!important;position:absolute!important;top:50%!important;left:50%!important;
transform:translate(-50%,-50%)!important;width:7px!important;height:7px!important;
border-radius:50%!important;background:var(--cy-ln,#C4CFE4)!important;pointer-events:none!important}
html:root [data-cy-lang] [data-st-dot][data-on][data-on][data-on]::before{
width:22px!important;height:7px!important;border-radius:99px!important;background:var(--st-rombo,#29487B)!important}
/* ============================================================================
v35 (3 sep) — Toño: líneas del rombo en móvil oscuro, carrusel del blog en un solo bloque,
indicadores completos y más juntos, numerales del Acto V homologados
============================================================================ */
/* --- A. Carruseles móviles: una sola pieza. Sin aire arriba/abajo (el relleno del bloque solo debe verse
como línea entre tarjetas) y con las esquinas del extremo redondeadas. --- */
@media (max-width:680px){
html:root .st-mb [data-cy-lang] [data-st-blq][data-st-carr],
html:root .st-mb [data-cy-lang] [data-st-carr][data-st-blq],
html:root .st-mb [data-cy-lang] [data-st-carr][data-st-carr]{
padding-top:0!important;padding-bottom:0!important;border-radius:15px!important}
/* el carrusel del blog venía con tarjetas sueltas (gap 12px): se unen como cualquier bloque.
Este bloque no lleva data-st-carr (su fila de puntos es la nativa), así que se apunta por sección. */
html:root .st-mb [data-cy-lang] [data-screen-label*="Blog"] [data-st-blq][data-st-blq],
html:root .st-mb [data-cy-lang] [data-screen-label*="Blog"] [data-st-carr][data-st-carr]{
gap:1px!important;column-gap:1px!important;
padding:0!important;border-radius:15px!important}
}
/* --- B. Indicadores del carrusel: círculos completos y más juntos.
En noche el punto en reposo usaba --cy-ln (#2B2E32) y se perdía contra el fondo: pasa al color del rombo. --- */
html:root [data-cy-lang] [data-st-dot][data-st-dot][data-st-dot]{padding-left:4px!important;padding-right:4px!important}
html:root[data-cy-theme="noche"] [data-cy-lang] [data-st-dot][data-st-dot][data-st-dot]::before{
background:rgba(143,163,255,.45)!important}
html:root[data-cy-theme="noche"] [data-cy-lang] [data-st-dot][data-on][data-on][data-on]::before{
background:#8FA3FF!important}
/* --- C. Acto V móvil: los numerales I, II y III con el mismo color (el tercero salía con otra rampa) --- */
html:root[data-cy-theme="noche"] .st-mb [data-cy-lang] .st-i-9e80f55c{
background-image:none!important;-webkit-text-fill-color:#7C92FF!important;color:#7C92FF!important}
/* ============================================================================
st-core v36 (3 sep 2026) - ronda de lanzamiento con las decisiones de Toño.
Todo va con html:root para ganar a las hojas de pagina (que cargan despues).
============================================================================ */
/* [P0-3] Tablet: el wrapper de idioma pierde el clip en Home y las divisorias de los chips (768/980px) hacen scroll horizontal. Clip en las 5 paginas. */
@media (min-width:681px) and (max-width:991px){
html:root .st-dt [data-cy-lang][data-cy-lang]{overflow-x:clip!important}
/* [P0-1] Tesis: la figura tenia ancho fijo clamp(520px,36vw,720px) y la columna de texto colapsaba a ~70px. */
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-dt [data-cy-lang] [data-screen-label^="Acto"] [data-st-2col][data-st-2col][data-st-2col]{grid-template-columns:minmax(0,1fr) minmax(0,clamp(240px,40vw,340px))!important}
/* [P1-5] Como funciona: los 9 agentes a 2 columnas en tablet (antes 1 columna, seccion de 6,500px). */
html:root .st-dt [data-cy-lang] [data-st-flota][data-st-blq]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* [P1-4] Home, equipo: los 3 retratos a 3 columnas iguales (antes 300px fijos con hueco a la derecha; en tablet una sola columna). */
@media (min-width:681px){
html:root .st-dt [data-cy-lang] .st-i-d688cd0e{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;align-items:stretch!important}
html:root .st-dt [data-cy-lang] .st-i-d688cd0e>.st-i-fd9273fa{width:auto!important;max-width:none!important;flex:none!important}
}
/* [P0-4] Nav movil al tope (scroll 0) en paginas SIN hero oscuro (Blog, Agenda, publicaciones): CTA negro y logo en tinta. Regla unica: sobre hero oscuro blanco, sobre fondo claro negro, nunca fantasma. */
html:root:not([data-cy-theme="noche"]) .st-mb [data-cy-lang]:not(:has([data-st-hero-dark])) [data-st-nav][data-scrolled="0"] a[data-st-cta][data-st-nav-cta]{background:#0E1116!important;background-image:none!important;color:#FFFFFF!important;border-color:#0E1116!important;opacity:1!important}
html:root:not([data-cy-theme="noche"]) .st-mb [data-cy-lang]:not(:has([data-st-hero-dark])) [data-st-nav][data-scrolled="0"] img[data-ody-logo]{filter:none!important}
/* [P0-5a] Como funciona, Cap V: el parrafo corria a todo el ancho debajo de la ilustracion absoluta (344px de solape). */
@media (min-width:992px){
html:root .st-dt [data-cy-lang] [data-screen-label^="Capítulo V"] .st-i-e4930d6a>.st-i-a8f6527c{max-width:calc(100% - 470px)!important}
}
/* [P1-1] Carruseles moviles: los rombos pseudo-elemento de las tarjetas quedan medio fuera del scroll-container y se ven como chevrones; en movil los rombos los pone st-pages (data-st-auton) por dentro. Gap 1px en TODOS los carruseles (Tesis Acto VIII tenia 12px y en noche se veia una barra periwinkle). */
html:root .st-mb [data-cy-lang] [data-st-carr]>*:not(.st-n)::before,html:root .st-mb [data-cy-lang] [data-st-carr]>*:not(.st-n)::after{display:none!important}
html:root .st-mb [data-cy-lang] [data-st-carr][data-st-carr]{gap:0!important;column-gap:0!important;row-gap:0!important;background-clip:content-box!important}
/* [P1-3] Home, Acto IX movil: la tarjeta del formulario heredaba min-height clamp(420px,52vh,...) y position:sticky del desktop -> 150px vacios bajo Enviar. */
html:root .st-mb [data-cy-lang] .st-i-f975453d{min-height:0!important;position:static!important;top:auto!important}
/* [Decision 3] Una sola paleta de bandas de constelaciones: la banda "sand" (crema/dorada) pasa a la neutra (azul). st-pages v25 ignora el flag sand. */
html:root [data-cy-lang] .cy-grain.cy-stars-sand{background-color:transparent!important;background-image:none!important}
html:root [data-cy-lang] .cy-jp-sand{--cyj-bg:#EFF4FF;--cyj-ln:#AEBEFF}
html:root[data-cy-theme="noche"] [data-cy-lang] .cy-jp-sand{--cyj-bg:#0E1730;--cyj-ln:#3A4C8F}
html:root [data-cy-lang] .cy-hp-sand{--cyh-ln:var(--cy-ln,#E2E2E3)}
/* [Decision 5] Mockups: en dia todos claros. El "portal" de Como funciona (Cap III) era una tarjeta negra. */
html:root:not([data-cy-theme="noche"]) [data-cy-lang] .st-i-9f1af41b,html:root:not([data-cy-theme="noche"]) [data-cy-lang] .st-i-adae66cb{background:#FFFFFF!important;border:1px solid #C4CFE4!important;box-shadow:0 24px 60px rgba(14,17,22,.08)!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-9f1af41b,.st-i-adae66cb) .st-i-067f2af5{color:#5A6068!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-9f1af41b,.st-i-adae66cb) .st-i-ef87add3{color:#0E1116!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-9f1af41b,.st-i-adae66cb) .st-i-68ba5ca7,html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-9f1af41b,.st-i-adae66cb) .st-i-fcab43a9{color:#8A8F98!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-9f1af41b,.st-i-adae66cb) .st-i-5c56af9d{color:#0E1116!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-9f1af41b,.st-i-adae66cb) .st-i-f1cb7812{color:#3D4654!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-9f1af41b,.st-i-adae66cb) :is(.st-i-c475532c,.st-i-40a252c9){border-color:#E3E8F3!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-9f1af41b,.st-i-adae66cb) .st-i-36533e6b{border-color:#E3E8F3!important;background:#F5F7FC!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-9f1af41b,.st-i-adae66cb) .st-i-0a8e8a1d{background:#E9EDFB!important;color:#2740C9!important}
/* [Decision 1] Red de seguridad CSS: en noche TODOS los bloques con la referencia (linea #26397A, tarjeta #0C1D4B, rombo #8FA3FF). Sin !important para que st-pages (inline) siga mandando en las secciones invertidas. La Tesis desktop mostraba la paleta vieja #2B2E32/#0E1936. */
html:root[data-cy-theme="noche"] [data-cy-lang] [data-screen-label] :is([data-st-blq],[data-st-blqx]){background-color:#8FA3FF;border-color:#8FA3FF}
html:root[data-cy-theme="noche"] [data-cy-lang] [data-screen-label] :is([data-st-blq],[data-st-blqx])>*:not(.st-n){background-color:#0C1D4B}
html:root[data-cy-theme="noche"] [data-cy-lang] [data-screen-label] :is([data-st-blq],[data-st-blqx]) .st-n,html:root[data-cy-theme="noche"] [data-cy-lang] [data-screen-label] :is([data-st-blq],[data-st-blqx])+.st-n{background-color:#0C1D4B;border-color:#8FA3FF}
/* [Decision 2] Tesis movil: hero homologado con Home y LP (velo oscuro sobre la franja del copy, copy blanco, nav al tope blanca). Antes: velo claro, copy en tinta y CTA negro. */
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-mb [data-cy-lang] [data-st-herocopy]::before{background:linear-gradient(180deg,#071433 0%,#071433 46%,rgba(7,20,51,.62) 74%,rgba(7,20,51,0) 100%)!important;opacity:1!important;height:100%!important;-webkit-mask-image:none!important;mask-image:none!important}
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-mb [data-cy-lang] [data-st-herocopy] h1{color:#FFFFFF!important}
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-mb [data-cy-lang] [data-st-herocopy] h1 em{color:#B4C2FF!important}
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-mb [data-cy-lang] [data-st-herocopy] p{color:rgba(242,244,248,.9)!important}
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-mb [data-cy-lang] [data-st-herocopy]>span:first-child{color:#FFFFFF!important;border-color:rgba(255,255,255,.55)!important;background:rgba(255,255,255,.12)!important}
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-mb [data-cy-lang] [data-st-herocopy]>span:last-child{color:rgba(242,244,248,.72)!important}
html:root:not([data-cy-theme="noche"])[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-mb [data-cy-lang] [data-st-nav][data-scrolled="0"] a[data-st-cta][data-st-nav-cta]{background:#FFFFFF!important;background-image:none!important;color:#0E1116!important;border-color:#FFFFFF!important}
html:root:not([data-cy-theme="noche"])[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-mb [data-cy-lang] [data-st-nav][data-scrolled="0"] img[data-ody-logo]{filter:brightness(0) invert(1)!important}
/* ===== v37 (3 sep 2026): homologación Agenda nav, grids tablet Home, tarjeta Blog tablet ===== */
/* Agenda: misma nav que el resto (transparente al tope, mismo padding de rejilla) */
html[data-wf-page="6a6a838901e497c438313620"] .st-dt .st-i-8b3b022b>div{padding:0 calc(var(--grid-frame-x) + var(--grid-content-pad,42px))!important}
html[data-wf-page="6a6a838901e497c438313620"] [data-cy-lang] nav [data-st-nav][data-scrolled="0"]{background:transparent!important;box-shadow:none!important}
/* Home tablet: los tríos de 3 columnas se apilan (150px de texto por columna no se lee) */
@media (min-width:681px) and (max-width:991px){
.st-dt .st-i-8068262f,.st-dt .st-i-f9c72c11{grid-template-columns:minmax(0,1fr)!important}
.st-dt .st-i-8068262f>.st-n,.st-dt .st-i-f9c72c11>.st-n{display:none!important}
.st-dt .st-i-f9c72c11>:not(.st-n):nth-child(1){border-radius:17px 17px 0 0!important}
.st-dt .st-i-f9c72c11>:not(.st-n):nth-child(3){border-radius:0 0 17px 17px!important}
/* Blog tablet: la portada de 400px dejaba 138px al texto */
.st-dt .st-i-3015680d{grid-template-columns:minmax(0,1fr) clamp(220px,34vw,300px)!important;gap:28px!important}
}
/* Form nativo: el hereda el look del CTA .cy-dbtn (antes era un ) */
.st-dt button.cy-dbtn,.st-mb button.cy-dbtn{display:inline-flex!important;align-items:center!important;gap:7px!important;height:46px!important;padding:0 14px!important;border:0!important;border-radius:11px!important;font:600 14.5px/1 'DM Sans',sans-serif!important;background:#0E1116!important;color:#FFFFFF!important;cursor:pointer;appearance:none;-webkit-appearance:none;line-height:1}
html[data-cy-theme="noche"] .st-dt button.cy-dbtn,html[data-cy-theme="noche"] .st-mb button.cy-dbtn{background:#E9EDFB!important;color:#0E1116!important}
.st-dt button.cy-dbtn:hover,.st-mb button.cy-dbtn:hover{background:var(--st-ser,#29487B)!important;color:#FFFFFF!important}
/* v38/v39: las 4 tarjetas del Blog en tablet ganan la especificidad de st-recursos (a[data-st-2col][data-st-2col] con 440px) */
@media (min-width:681px) and (max-width:991px){
html:root .st-dt [data-cy-lang] [data-screen-label="Recursos, publicaciones"] a[data-st-2col][data-st-2col]{grid-template-columns:minmax(0,1fr) clamp(220px,34vw,300px)!important;gap:28px!important}
}
/* ===== v40 (4 sep 2026): rombos JS de los carruseles moviles (i.st-n[data-st-auton]). En Home la regla
.st-mb [data-st-carr][data-st-carr]>*{position:relative} los metia al flujo como slides de 78% (tarjeta vacia
con una diagonal) y triplicaba el scroll. Siempre absolutos, tamano de nodo, sin snap, centrados en la linea. ===== */
html:root .st-mb [data-cy-lang] :is([data-st-carr],[data-st-pubs],[data-st-blq])>.st-n[data-st-auton]{position:absolute!important;flex:none!important;width:var(--st-nodo,9px)!important;height:var(--st-nodo,9px)!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;border-width:var(--grid-line-width,1px)!important;border-style:solid!important;border-color:var(--st-rombo,#29487B)!important;border-radius:0!important;background-color:var(--cy-card,#FFFFFF)!important;background-image:none!important;overflow:visible!important;transform:translate(-50%,-50%) rotate(45deg)!important;scroll-snap-align:none!important;box-shadow:none!important;z-index:4!important;pointer-events:none!important}
html:root[data-cy-theme="noche"] .st-mb [data-cy-lang] :is([data-st-carr],[data-st-pubs],[data-st-blq])>.st-n[data-st-auton]{border-color:#8FA3FF!important;background-color:#0C1D4B!important}
html:root .st-mb [data-cy-lang] :is([data-st-carr][data-st-carr],[data-st-pubs][data-st-pubs]){padding-top:6px!important;padding-bottom:6px!important}
/* ===== v41 (4 sep 2026, Toño con capturas): (1) los rombos JS heredaban los pseudo-rombos ::before/::after que
st-home pone a todo hijo del carrusel (>*+*), y se veian dos cuadros encimados por esquina; (2) las lineas de
carrusel pasan a ser bordes de tarjeta (st-pages v29), ya sin fondo de contenedor detras: gap 0;
(3) en noche la linea de bloque lleva el color del rombo (#8FA3FF), como en dia (#C4CFE4 = linea = rombo). ===== */
html:root .st-mb [data-cy-lang] .st-n[data-st-auton]::before,html:root .st-mb [data-cy-lang] .st-n[data-st-auton]::after{display:none!important;content:none!important}
/* v41b: en bloques con scroll horizontal que ya llevan rombos JS, las celdas no dibujan sus pseudo-rombos CSS (doble rombo en la junta) */
html:root .st-mb [data-cy-lang] [data-st-blq]:has(>.st-n[data-st-auton])>*:not(.st-n)::before,html:root .st-mb [data-cy-lang] [data-st-blq]:has(>.st-n[data-st-auton])>*:not(.st-n)::after{display:none!important;content:none!important}
/* ===== v42 (4 sep 2026, barrido movil): cierre de la Carta en movil: .st-cierre-in es grid de 2 columnas y la de
texto colapsaba a 0px (una palabra por linea); en .st-mb una sola columna. ===== */
html:root .st-mb [data-cy-lang] .st-cierre-in{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:22px!important}
html:root .st-mb [data-cy-lang] .st-cierre-col{min-width:0!important;max-width:none!important}
/* ===== v43 (4 sep 2026, bloque 2 de pendientes de la auditoria) =====
(1) Como funciona: bloques con radio 14px (st-plataforma) frente a 18px en Home y Carta → 18px (las esquinas
interiores las recalcula esquinasBlq). (2) Tablet 681–991: las filas de 4 stats de 157px (Home Acto II y VI,
LP Cap II) pasan a 2×2. (3) Blog en escritorio y dia: el contenedor de publicaciones era blanco y las costuras de
1px no se veian; misma linea que el Home (#C4CFE4). */
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] .st-dt [data-cy-lang] :is([data-st-blq],[data-st-blqx]){border-radius:18px!important}
@media (min-width:681px) and (max-width:991px){
html:root .st-dt [data-cy-lang] :is(.st-i-252598a6,.st-i-e664428b,.st-i-f2aded81){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
html:root:not([data-cy-theme="noche"]) .st-dt [data-cy-lang] .st-i-ce81cab4{background-color:#C4CFE4!important}
/* v44: H2 de seccion homologados al Home (clamp(44px,4.2vw,60px)/1.08 Space Grotesk): Como funciona iba en
clamp(40px,3.8vw,54px) y la Carta en 3.7vw (53.8 / 48.6 / 47.4 px medidos a 1280). */
html:root .st-dt [data-cy-lang] :is(.st-i-93072437,.st-i-7a2f418e,.st-i-b1536526,.st-i-60b3ae02,.st-i-b5565cbb){font-size:clamp(44px,4.2vw,60px)!important;line-height:1.08!important}
/* ===== v45 (4 sep 2026, Toño): CTAs sin dither. Antes el hover pintaba una rampa Bayer (canvas → --st-cta-ramp);
ahora los botones llevan degradado liso de colores: base en el color del boton (negro/blanco de dia, claro de noche)
y hover con la misma rampa navy→azul (dia) o periwinkle→palido (noche) pero continua. El nav conserva sus estados
de color solido en reposo. ===== */
html:root :is(.st-dt,.st-mb) [data-cy-lang] :is(a[data-st-cta].cy-dbtn,button.cy-dbtn):not([data-st-nav-cta]){background-color:#0E1116!important;background-image:linear-gradient(135deg,#0E1116 0%,#1C2A4A 100%)!important;color:#FFFFFF!important;border-color:transparent!important}
html:root :is(.st-dt,.st-mb) [data-cy-lang] a[data-st-cta].cy-dbtn-white:not([data-st-nav-cta]){background-color:#FFFFFF!important;background-image:linear-gradient(135deg,#FFFFFF 0%,#E9EDFB 100%)!important;color:#0E1116!important;border-color:transparent!important}
html:root[data-cy-theme="noche"] :is(.st-dt,.st-mb) [data-cy-lang] :is(a[data-st-cta].cy-dbtn,a[data-st-cta].cy-dbtn-white,button.cy-dbtn):not([data-st-nav-cta]){background-color:#E9EDFB!important;background-image:linear-gradient(135deg,#FFFFFF 0%,#DDE3F7 100%)!important;color:#0E1116!important;border-color:transparent!important}
html:root :is(.st-dt,.st-mb) [data-cy-lang] :is(a[data-st-cta][data-st-cta][data-st-cta][data-st-cta],[data-st-hoverdither][data-st-hoverdither][data-st-hoverdither][data-st-hoverdither],button.cy-dbtn.cy-dbtn.cy-dbtn):is(:hover,:focus-visible){background-color:#4066A3!important;background-image:linear-gradient(135deg,#29487B 0%,#4066A3 55%,#6489C2 100%)!important;background-size:100% 100%!important;background-repeat:no-repeat!important;color:#FFFFFF!important;border-color:transparent!important}
html:root[data-cy-theme="noche"] :is(.st-dt,.st-mb) [data-cy-lang] :is(a[data-st-cta][data-st-cta][data-st-cta][data-st-cta],[data-st-hoverdither][data-st-hoverdither][data-st-hoverdither][data-st-hoverdither],button.cy-dbtn.cy-dbtn.cy-dbtn):is(:hover,:focus-visible){background-color:#9FB0FF!important;background-image:linear-gradient(135deg,#7C92FF 0%,#9FB0FF 55%,#CBD6FF 100%)!important;color:#070B12!important}
html:root :is(.st-dt,.st-mb) [data-cy-lang] :is(a[data-st-cta],[data-st-hoverdither],button.cy-dbtn):is(:hover,:focus-visible) svg{color:inherit!important}
/* v45b: el H2 del cierre de la Carta al mismo tamano que los H2 de seccion */
html:root .st-dt [data-cy-lang] .st-cierre-h2{font-size:clamp(44px,4.2vw,60px)!important;line-height:1.08!important}
/* ===== v46 (4 sep 2026, Toño): "el dither era solo en hover". El reposo vuelve al color solido original del boton
(negro de dia, blanco para .cy-dbtn-white, claro #E9EDFB de noche); el degradado liso de colores queda solo en
hover/focus (reglas v45), que es donde antes iba la rampa Bayer. ===== */
html:root :is(.st-dt,.st-mb) [data-cy-lang] :is(a[data-st-cta].cy-dbtn,button.cy-dbtn):not([data-st-nav-cta]){background-image:none!important;background-color:#0E1116!important}
html:root :is(.st-dt,.st-mb) [data-cy-lang] a[data-st-cta].cy-dbtn-white:not([data-st-nav-cta]){background-image:none!important;background-color:#FFFFFF!important}
html:root[data-cy-theme="noche"] :is(.st-dt,.st-mb) [data-cy-lang] :is(a[data-st-cta].cy-dbtn,a[data-st-cta].cy-dbtn-white,button.cy-dbtn):not([data-st-nav-cta]){background-image:none!important;background-color:#E9EDFB!important}
/* ===== v47 (4 sep 2026, decisiones delegadas por Toño): (a) carruseles móviles con un solo modelo de navegación:
solo puntos; las flechas Anterior/Siguiente del Acto VIII de Home se ocultan en ≤680. (b) Chips de capítulo de la LP
en móvil a 11 px / nowrap como el del Cap V, para que "CAPÍTULO III: EL MOTOR Y TU RESILIENCE LEAD" quepa en una línea.
(c) Rombos huérfanos de la LP móvil (nodos de bloques sin línea, en div sin clase) ocultos. (d) H1 del hero en tablet
homologado al Home (6.8vw) en LP y Carta. ===== */
@media (max-width:680px){
html:root[data-wf-page="6a553f8e569e3148ffc68445"] .st-mb [data-cy-lang] a.st-i-13eaa527[aria-label]{display:none!important}
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] .st-mb [data-cy-lang] :is(.st-i-2e999158,.st-i-2e999158>*){font-size:11px!important;letter-spacing:1.6px!important;white-space:nowrap!important}
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] .st-mb [data-cy-lang] div:not([class])>.st-n.st-x50{display:none!important}
}
@media (min-width:681px) and (max-width:991px){
html:root:is([data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) .st-dt [data-cy-lang] h1{font-size:6.8vw!important;line-height:1.06!important}
}
/* ===== v48 (4 sep 2026, Toño: "para el hover toma como base los colores del dither que ya están"): el degradado de hover
usa las 5 paradas exactas de la rampa dither de stealth-webflow-wf-v11 (PAL_D día, PAL_N noche), sin colores nuevos.
También el chip del Cap VI de la LP (clase distinta, st-i-89390c51) entra en la regla móvil de 11 px. ===== */
html:root :is(.st-dt,.st-mb) [data-cy-lang] :is(a[data-st-cta][data-st-cta][data-st-cta][data-st-cta],[data-st-hoverdither][data-st-hoverdither][data-st-hoverdither][data-st-hoverdither],button.cy-dbtn.cy-dbtn.cy-dbtn):is(:hover,:focus-visible){background-image:linear-gradient(135deg,#29487B 0%,#33578F 25%,#4066A3 50%,#5077B4 75%,#6489C2 100%)!important}
html:root[data-cy-theme="noche"] :is(.st-dt,.st-mb) [data-cy-lang] :is(a[data-st-cta][data-st-cta][data-st-cta][data-st-cta],[data-st-hoverdither][data-st-hoverdither][data-st-hoverdither][data-st-hoverdither],button.cy-dbtn.cy-dbtn.cy-dbtn):is(:hover,:focus-visible){background-image:linear-gradient(135deg,#7C92FF 0%,#8CA0FF 25%,#9FB0FF 50%,#B4C2FF 75%,#CBD6FF 100%)!important}
@media (max-width:680px){
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] .st-mb [data-cy-lang] :is(.st-i-89390c51,.st-i-89390c51>*){font-size:11px!important;letter-spacing:1.6px!important;white-space:nowrap!important}
}
/* ===== v49 (4 sep 2026) ===== */
/* [A] Noche: lineas de bloques en #26397A (referencia del disenador), rombos siguen en #8FA3FF. Mismo grosor que dia (1px), distinto color. */
html:root[data-cy-theme="noche"] [data-cy-lang] [data-screen-label] :is([data-st-blq],[data-st-blqx]){background-color:#26397A;border-color:#26397A}
html:root[data-cy-theme="noche"] [data-cy-lang] :is([data-st-blq],[data-st-blqx],[data-st-carr],[data-st-pubs]){--st-ln-noche:#26397A}
/* [B] LP Cap II, tarjetas de agentes: titulo -> texto -> mockup -> ilustracion a sangre en la base de la tarjeta (dt y mb). */
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] [data-cy-lang] .st-i-262587c7{padding-bottom:0!important}
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] [data-cy-lang] .st-i-ec3a19e5{padding-bottom:0!important}
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] [data-cy-lang] :is(.st-i-262587c7,.st-i-ec3a19e5)>.st-i-0b88922d{order:1}
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] [data-cy-lang] :is(.st-i-262587c7,.st-i-ec3a19e5)>.st-i-064c80d7{order:2}
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] [data-cy-lang] :is(.st-i-262587c7,.st-i-ec3a19e5)>.st-i-0ec5a772{order:3}
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] [data-cy-lang] :is(.st-i-262587c7,.st-i-ec3a19e5)>.st-i-1eaf4e91{order:4;flex:0 0 auto!important;margin-top:auto!important;margin-bottom:0!important;border-radius:0!important;border-bottom-left-radius:inherit!important;border-bottom-right-radius:inherit!important;overflow:hidden!important;max-width:none!important}
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] [data-cy-lang] .st-i-262587c7>.st-i-1eaf4e91{margin-left:-20px!important;margin-right:-20px!important;width:calc(100% + 40px)!important}
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] [data-cy-lang] .st-i-ec3a19e5>.st-i-1eaf4e91{margin-left:-16px!important;margin-right:-16px!important;width:calc(100% + 32px)!important}
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] [data-cy-lang] :is(.st-i-262587c7,.st-i-ec3a19e5)>.st-i-1eaf4e91>img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important}
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] [data-cy-lang] .st-i-262587c7>.st-i-1eaf4e91{height:200px!important}
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] [data-cy-lang] .st-i-ec3a19e5>.st-i-1eaf4e91{height:190px!important}
/* ===== v50 (4 sep 2026) ===== */
/* [C] Mascaras de reposo para los logos nuevos de la franja de integraciones (el span heredaba la de Google). */
.st-lg:has(> img[alt="CrowdStrike"]){--st-lg-src:url("https://cdn.prod.website-files.com/6a553f8c569e3148ffc68415/6a9c0ab460e0201522b98e64_crowdstrike-v2.png")}
.st-lg:has(> img[alt="SentinelOne"]){--st-lg-src:url("https://cdn.prod.website-files.com/6a553f8c569e3148ffc68415/6a9c0ab4920a7ddd523a8758_sentinelone-v2.png")}
/* ===== v51 (2026-09-05, lote A) =====
Solo se anaden reglas al final de la base v50. Donde una regla pisa el efecto de una version anterior se dice
explicitamente ("pisa vNN"). Toda regla condicionada por tema cambia SOLO color/filtro/sombra: misma geometria
en dia y noche. Selectores verificados contra los arboles DOM (scratchpad/trees, archivos .raw), las hojas de pagina del CDN y el HTML
publicado de la 404 (scratchpad/404.html, 4 sep 14:19 UTC). Revision adversarial del 4 sep aplicada: N05 movil sin inset
duplicado, Q17 acotada a la LP, 404 por id de pagina + href, Q15 chips del nav sin guardian, N02 linea de 11px con relleno. */
/* T4: el portal del Cap III (Decision 5, v36) llevaba borde de 1px solo en dia y el contenido saltaba 2px al pasar a
noche en tablet y movil. Mismo borde en noche con la linea nocturna (#26397A). */
html:root[data-cy-theme="noche"] [data-cy-lang] .st-i-9f1af41b,html:root[data-cy-theme="noche"] [data-cy-lang] .st-i-adae66cb{border:1px solid #26397A!important}
/* Q10: logo del footer invisible en /como-funciona (SVG con fill=currentColor sobre footer negro). La regla con el
filtro vivia solo en st-home; sube al core para las 5 paginas y la plantilla de post. El footer es negro en ambos temas. */
html:root [data-cy-lang] footer img.st-i-9386719a{filter:brightness(0) invert(1)!important;opacity:1!important}
/* N07 (+ sintoma tablet de Q09): la tarjeta manifiesto "Por que nosotros" era una celda mas de la reticula del equipo
(1/3 en desktop, 200px en tablet). Ocupa toda la fila bajo los 3 retratos en >=681 (en movil ya lo hacia st-home). */
@media (min-width:681px){
html:root .st-dt [data-cy-lang] .st-i-d688cd0e>.st-i-deb3debc{grid-column:1 / -1!important;min-width:0!important;width:auto!important;max-width:none!important}
}
/* Q22: cabecera del Acto III sin el pad de contenido (padding 12px 0 16px en st-home): quedaba 37px (desktop) /
24px (tablet) a la izquierda de la columna. Mismo pad horizontal que el resto de cabeceras. */
html:root .st-dt [data-cy-lang] .st-i-c6ee35da{padding-left:var(--grid-content-pad,42px)!important;padding-right:var(--grid-content-pad,42px)!important}
/* Q22: ritmo vertical: el chip del Acto III arrancaba 12px bajo la banda del Acto II frente a 84px en los demas actos. */
html:root .st-dt [data-cy-lang] [data-screen-label^="Acto III"].st-i-7af49ec3{padding-top:72px!important}
/* Q22: separacion chip -> titulo homologada a 20px en las cabeceras de acto del Home desktop (antes 6/20/22/30/18 segun
el contenedor). Acto II no se toca: su chip va a caballo de la banda por diseno. Solo Home, por id de pagina. */
html:root[data-wf-page="6a553f8e569e3148ffc68445"] .st-dt [data-cy-lang] .st-i-c6ee35da>.st-i-61cdc545{margin-bottom:14px!important}
html:root[data-wf-page="6a553f8e569e3148ffc68445"] .st-dt [data-cy-lang] :is(.st-i-ca1f08ce,.st-i-2ea12e4f)>.st-i-61cdc545{margin-bottom:-2px!important}
html:root[data-wf-page="6a553f8e569e3148ffc68445"] .st-dt [data-cy-lang] .st-i-2e1ddf46>.st-i-61cdc545{margin-bottom:-10px!important}
html:root[data-wf-page="6a553f8e569e3148ffc68445"] .st-dt [data-cy-lang] .st-i-812669b6>.st-i-61cdc545{margin-bottom:2px!important}
/* Q22: fila de stats del Acto VI con padding lateral 26px frente a 30px de las tarjetas de arriba (4px de escalon). */
html:root[data-wf-page="6a553f8e569e3148ffc68445"] [data-cy-lang] .st-i-e247ae48{padding-left:30px!important;padding-right:30px!important}
/* Q22: bio de los fundadores en movil a 11px -> 12px. */
html:root .st-mb [data-cy-lang] .st-bio{font-size:12px!important;line-height:1.45!important}
/* Q22: icono LinkedIn de la 3a tarjeta 9px mas bajo (nombre a dos lineas, icono centrado): alineado al inicio en las 3. */
@media (min-width:681px){
html:root .st-dt [data-cy-lang] .st-i-d688cd0e .st-i-45dd50eb{align-items:flex-start!important}
}
/* Q23: Carta desktop: core v13 centraba verticalmente las dos columnas y la distancia H2 -> primer parrafo variaba
43-113px segun la altura de la imagen. Alineadas al inicio (st-fig sigue colocando la figura con margin-top inline).
Acto VIII: misma anchura de columna de imagen y mismo gap que los Actos V-VII (antes 42%/64px: imagen 10px mas
estrecha y 10px a la derecha). */
@media (min-width:992px){
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-dt [data-cy-lang] [data-screen-label^="Acto"] [data-st-2col][data-st-2col][data-st-2col]{align-items:start!important}
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-dt [data-cy-lang] [data-screen-label^="Acto"] [data-st-2col][data-st-2col][data-st-2col]>*{align-self:start!important}
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-dt [data-cy-lang] [data-screen-label="Acto VIII, La vertical"] .st-i-ca1f08ce{grid-template-columns:minmax(0,1fr) minmax(0,clamp(520px,36vw,720px))!important;column-gap:clamp(32px,3vw,52px)!important}
}
/* N02: eyebrow del hero sobre el horizonte claro de la ilustracion. Desktop/tablet (chips v33-A de Home, LP y Carta):
fondo navy translucido rgba(7,20,51,.72) y texto lavanda #C9D3FF (~5.0:1 compuesto sobre blanco, el peor fondo posible;
mas sobre el arte). Movil: el chip de [data-st-herocopy] con el mismo fondo y texto blanco (~7.4:1 sobre blanco); la
linea de 11px de la Carta ("SEGURO DE RIESGO CYBER...") lleva ese mismo relleno como chip (padding 5px 10px, radio 6px):
el ::before de v42 llega a rgba(7,20,51,0) al pie del bloque, justo donde va esa linea, y una sombra de texto no
garantiza 4.5:1 en la medicion color-vs-fondo. Solo Carta por id (Home y LP cierran el herocopy con un div de CTAs).
Igual en ambos temas porque el arte es oscuro en los dos. */
/* v65 · sustituida por el bloque E1 del final (chip del hero con scope de tema) */
/* v65 · sustituida por el bloque E1 del final (chip del hero con scope de tema) */
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-mb [data-cy-lang][data-cy-lang] [data-st-herocopy][data-st-herocopy]>span:last-child{color:#FFFFFF!important;text-shadow:none!important;background:rgba(7,20,51,.72)!important;padding:5px 10px!important;border-radius:6px!important;max-width:100%!important;box-sizing:border-box!important}
/* N13: toggle de tema activo en noche (luna sobre pastilla clara #E9EDFB): el svg heredaba la tinta nocturna
(#E8ECF8) y desaparecia. Icono en tinta oscura sobre la pastilla clara; simetrico en dia (sol blanco sobre negro).
Aplica a barra y menu movil. */
html:root[data-cy-theme="noche"] [data-cy-lang][data-cy-lang] nav .cy-tgb[data-cy-tema="noche"][aria-pressed="true"][aria-pressed],
html:root[data-cy-theme="noche"] [data-cy-lang][data-cy-lang] nav .cy-tgb[data-cy-tema="noche"][aria-pressed="true"][aria-pressed] svg{color:#0E1116!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang][data-cy-lang] nav .cy-tgb[data-cy-tema="dia"][aria-pressed="true"][aria-pressed],
html:root:not([data-cy-theme="noche"]) [data-cy-lang][data-cy-lang] nav .cy-tgb[data-cy-tema="dia"][aria-pressed="true"][aria-pressed] svg{color:#FFFFFF!important}
/* N09: nav con scroll siempre solida (la Carta la tenia en rgba(255,255,255,.77) y el cue DESPLAZATE se leia a traves);
el cue se apaga en cuanto hay scroll. Agenda: al tope la nav toma el blanco del hero en vez de transparente sobre el
fondo lavanda de la pagina (costura de 64px). Pisa v37 solo en Agenda. */
html:root [data-cy-lang] nav [data-st-nav][data-scrolled="1"]{background-color:var(--cy-card,#FFFFFF)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:root [data-cy-lang]:has([data-st-nav][data-scrolled="1"]) [data-st-scroll]{opacity:0!important;pointer-events:none!important}
html:root[data-wf-page="6a6a838901e497c438313620"] [data-cy-lang] nav [data-st-nav][data-scrolled="0"]{background-color:var(--cy-card,#FFFFFF)!important}
/* N06: enlace fantasma apilado bajo el CTA primario sin padding lateral (Cierre de la Carta en movil y 404). La 404 se
acota por id de pagina y href (a[href="/tesis"]) ademas de la clase .st404-lnk del HTML publicado (scratchpad/404.html). */
html:root .st-mb [data-cy-lang] .st-cierre-lnk{padding-left:0!important;padding-right:0!important}
@media (max-width:680px){
html:root[data-wf-page="6a5e7c5e6b5ceb656aa97657"] main :is(a.st404-lnk,a[href="/tesis"]){padding-left:0!important;padding-right:0!important}
}
/* N01: reveal mas corto (.55s -> .4s; titulos moviles .85-1s -> .45-.5s). El estado "off" lo pone el JS: sin script
nada arranca en opacity:0. */
html:root :is(.st-dt,.st-mb) [data-st-rev]{transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1)}
html:root .st-mb h2[data-st-rev]{transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1),filter .5s cubic-bezier(.2,.7,.2,1),text-shadow .5s cubic-bezier(.2,.7,.2,1)}
/* Q14 (parte CSS; el emparejado for/id, aria-invalid y los mensajes los pone st-pages v33): campo enfocado visible bajo
la nav sticky; textarea sin asa de redimension; estado invalido con borde y halo (sin cambiar caja); mensaje .st-err
y marca .st-req; placeholder con elipsis en movil en vez de corte seco; textarea desktop 15px como los inputs; boton
Enviar con el radio de los inputs (12px; pisa v37 que lo dejaba en 11). */
html:root [data-cy-lang] form :is(input,textarea,select){scroll-margin-top:96px}
html:root [data-cy-lang] form textarea{resize:none!important}
html:root .st-dt [data-cy-lang] form textarea{font-size:15px!important}
html:root :is(.st-dt,.st-mb) [data-cy-lang] form button.cy-dbtn{border-radius:12px!important}
html:root [data-cy-lang] form [aria-invalid="true"]{border-color:#B3261E!important;box-shadow:0 0 0 3px rgba(179,38,30,.14)!important}
html:root[data-cy-theme="noche"] [data-cy-lang] form [aria-invalid="true"]{border-color:#FF8A80!important;box-shadow:0 0 0 3px rgba(255,138,128,.18)!important}
html:root [data-cy-lang] form .st-err{margin:6px 0 0;font:12.5px/1.3 'DM Sans',sans-serif;color:#B3261E}
html:root[data-cy-theme="noche"] [data-cy-lang] form .st-err{color:#FF8A80!important}
html:root [data-cy-lang] form label{position:relative}
html:root [data-cy-lang] form label .st-req{color:var(--st-tag,#3B5BFF);font-weight:700;margin-left:2px}
/* si st-pages anexa .st-req como hijo directo del label (flex column) no debe abrir una fila nueva */
html:root [data-cy-lang] form label>.st-req{position:absolute;top:0;right:0;margin:0}
html:root .st-mb [data-cy-lang] form :is(input,textarea)::placeholder{text-overflow:ellipsis}
/* Q18 (parte CSS; puntos clicables y "Desplazate" con scroll los hace st-pages v33): el tramo muerto del Acto III era el
espaciador final de 70vh (~660px con la 3a tarjeta fija) -> 96px; al salir, la cabecera que se desvanece queda debajo
de las tarjetas en vez de pintarse encima de la imagen; puntos con role=tab y cue con role=button reciben cursor. */
html:root .st-dt [data-cy-lang] [data-screen-label^="Acto III"] .st-i-16c6b720{height:96px!important}
html:root .st-dt [data-cy-lang] [data-screen-label^="Acto III"] .st-i-c6ee35da[data-st-a3="off"]{z-index:0!important}
html:root [data-cy-lang] [data-st-dot][role="tab"]{cursor:pointer!important}
html:root [data-cy-lang] [data-st-scroll][role="button"]{pointer-events:auto!important;cursor:pointer!important}
/* Q11 (parte CSS; el scroll-lock sin colapso lo hace st-pages/a11y): con el menu abierto (burger aria-expanded=true) en
dia la barra se vuelve solida, el logo pierde el filtro invert, el CTA vuelve a ser negro con forma y el burger pasa a
tinta; en noche solo se solidifica la barra (logo y CTA ya contrastan). El burger dibuja una X con ::before enmascarado
(el ::after es la diana de 44px de v6); mismo tamano que las tres lineas (17x12). */
@media (max-width:680px){
html:root .st-mb [data-cy-lang][data-cy-lang] nav:has([data-st-burger][aria-expanded="true"]) [data-st-nav][data-scrolled]{background:var(--cy-card,#FFFFFF)!important}
html:root:not([data-cy-theme="noche"]) .st-mb [data-cy-lang][data-cy-lang][data-cy-lang] nav:has([data-st-burger][aria-expanded="true"]) [data-st-nav][data-scrolled] img[data-ody-logo][data-ody-logo]{filter:none!important}
html:root:not([data-cy-theme="noche"]) .st-mb [data-cy-lang][data-cy-lang][data-cy-lang] nav:has([data-st-burger][aria-expanded="true"]) [data-st-nav][data-scrolled] a[data-st-cta][data-st-nav-cta][data-st-nav-cta]{background:#0E1116!important;background-image:none!important;color:#FFFFFF!important;border-color:#0E1116!important;opacity:1!important}
html:root:not([data-cy-theme="noche"]) .st-mb [data-cy-lang][data-cy-lang][data-cy-lang] nav:has([data-st-burger][aria-expanded="true"]) [data-st-nav][data-scrolled] a[data-st-cta][data-st-nav-cta][data-st-nav-cta] svg{color:#FFFFFF!important}
html:root:not([data-cy-theme="noche"]) .st-mb [data-cy-lang][data-cy-lang][data-cy-lang] nav:has([data-st-burger][aria-expanded="true"]) [data-st-burger]{color:#0E1116!important;border-color:rgba(14,17,22,.35)!important}
}
html:root [data-cy-lang] [data-st-burger][aria-expanded="true"]>svg{opacity:0!important}
html:root [data-cy-lang] [data-st-burger][aria-expanded="true"]::before{content:"";position:absolute;left:50%;top:50%;width:17px;height:12px;transform:translate(-50%,-50%);background:currentColor;pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Cpath d='M1.5 1 15.5 11M15.5 1 1.5 11' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Cpath d='M1.5 1 15.5 11M15.5 1 1.5 11' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* Q07: dianas de 44px por ::after transparente, sin cambiar el trazo. Chips del nav (34-36px de alto) en el arbol
desktop; LinkedIn del equipo (36/28px), "Todo el blog" (21px), mailto en texto, enlaces de FUENTES (17px); toggles del
menu movil (+2px vertical; el ancho de 28px del toggle de tema lo recorta el overflow:hidden del grupo, ver riesgos).
Chips del footer, burger, logo y CTA movil ya tenian diana en v6/v12. */
@media (min-width:681px){
html:root .st-dt [data-cy-lang] nav [data-st-navmid]>a{position:relative}
html:root .st-dt [data-cy-lang] nav [data-st-navmid]>a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);pointer-events:auto}
}
html:root [data-cy-lang] :is(.st-i-71b31e47,.st-i-cce64ed4,.st-i-b00027c5 a,a[href^="mailto:"]:not(.cy-dbtn):not([data-st-cta])){position:relative}
html:root [data-cy-lang] :is(.st-i-71b31e47,.st-i-cce64ed4,.st-i-b00027c5 a,a[href^="mailto:"]:not(.cy-dbtn):not([data-st-cta]))::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px);pointer-events:auto}
html:root .st-mb [data-cy-lang] nav [data-st-menu] :is(.cy-tgb,[data-lang-btn]){position:relative}
html:root .st-mb [data-cy-lang] nav [data-st-menu] :is(.cy-tgb,[data-lang-btn])::after{content:"";position:absolute;top:-2px;bottom:-2px;left:-8px;right:-8px;pointer-events:auto}
/* Q15: hover/focus-visible que faltaban. Tarjetas de blog (Home Acto VIII, /blog, relacionadas del post): tinte del chip
por background-image (st-pages pinta background-color inline, asi que el fondo no servia) y titulo en azul. Chips del
nav: los 4 del arbol desktop llevan data-st-hoverdither y aun asi el QA midio su hover en 'none' (la rampa v45/v48 no
se manifesto), los del menu movil no lo llevan; subrayado en :hover y :focus-visible para todos, independiente del
fondo. CTA y enlace del Cierre de la Carta y de la 404 (por id de pagina 6a5e7c5e6b5ceb656aa97657 + href, con las
clases .st404-btn/.st404-lnk del HTML publicado como refuerzo): misma rampa v48 que los CTAs (dia navy->azul, noche
periwinkle) y subrayado en el enlace. "Desplazate": ver Q18. */
html:root [data-cy-lang] :is(a.st-h-b53de0cd,[data-st-pubs]>a,[data-screen-label="Publicación, cierre"] a[href*="/recursos/"]){transition:background-image .2s ease,background-color .2s ease}
html:root [data-cy-lang] :is(a.st-h-b53de0cd,[data-st-pubs]>a,[data-screen-label="Publicación, cierre"] a[href*="/recursos/"]):is(:hover,:focus-visible){background-image:linear-gradient(var(--cy-chip,rgba(59,91,255,.07)),var(--cy-chip,rgba(59,91,255,.07)))!important}
html:root [data-cy-lang] :is(a.st-h-b53de0cd,[data-st-pubs]>a,[data-screen-label="Publicación, cierre"] a[href*="/recursos/"]):is(:hover,:focus-visible) h3{color:var(--cy-link,#3B5BFF)!important;-webkit-text-fill-color:var(--cy-link,#3B5BFF)!important}
html:root [data-cy-lang] nav [data-st-navmid]>a.cy-dchip.cy-dchip:is(:hover,:focus-visible){text-decoration:none!important;text-decoration-thickness:1.5px!important;text-underline-offset:5px!important;text-decoration-color:currentColor!important}
html:root [data-cy-lang] .st-cierre-btn,html:root[data-wf-page="6a5e7c5e6b5ceb656aa97657"] main :is(a.st404-btn,a[href="/"]:not([aria-label])){transition:background-color .2s ease,color .2s ease}
html:root [data-cy-lang] .st-cierre-btn:is(:hover,:focus-visible),html:root[data-wf-page="6a5e7c5e6b5ceb656aa97657"] main :is(a.st404-btn,a[href="/"]:not([aria-label])):is(:hover,:focus-visible){background-color:#4066A3!important;background-image:linear-gradient(135deg,#29487B 0%,#33578F 25%,#4066A3 50%,#5077B4 75%,#6489C2 100%)!important;color:#FFFFFF!important;border-color:transparent!important}
html:root[data-cy-theme="noche"] [data-cy-lang] .st-cierre-btn:is(:hover,:focus-visible),html:root[data-cy-theme="noche"][data-wf-page="6a5e7c5e6b5ceb656aa97657"] main :is(a.st404-btn,a[href="/"]:not([aria-label])):is(:hover,:focus-visible){background-color:#9FB0FF!important;background-image:linear-gradient(135deg,#7C92FF 0%,#8CA0FF 25%,#9FB0FF 50%,#B4C2FF 75%,#CBD6FF 100%)!important;color:#070B12!important}
html:root [data-cy-lang] .st-cierre-btn:is(:hover,:focus-visible) *,html:root[data-wf-page="6a5e7c5e6b5ceb656aa97657"] main :is(a.st404-btn,a[href="/"]:not([aria-label])):is(:hover,:focus-visible) *{color:inherit!important}
html:root [data-cy-lang] .st-cierre-lnk:is(:hover,:focus-visible),html:root[data-wf-page="6a5e7c5e6b5ceb656aa97657"] main :is(a.st404-lnk,a[href="/tesis"]):is(:hover,:focus-visible){text-decoration:underline!important;text-decoration-thickness:1.5px!important;text-underline-offset:4px!important;color:var(--cy-kicker,#2740C9)!important}
/* Q21: tarjetas del blog (/blog, arbol desktop, >=681): la columna de texto no tenia padding vertical y se centraba contra
la imagen (pt/pb 29/57/30/11 segun el largo del titulo). Padding fijo de 28px, contenido al inicio y "Leer la
publicacion" pegado al pie. Home Acto VIII: el cuerpo de la tarjeta crece y la linea de autor/fecha va al pie, a la
misma altura en las tarjetas de la fila. Hero del blog en tablet: la seccion tenia padding-right 0 (sangrado de la
portada pensado para 2 columnas) y a una columna la imagen pegaba al borde derecho. */
@media (min-width:681px){
html:root .st-dt [data-cy-lang] [data-screen-label="Recursos, publicaciones"] a[data-st-2col]>.st-i-cc11c3f7{padding-top:28px!important;padding-bottom:28px!important;justify-content:flex-start!important;align-self:stretch!important}
html:root .st-dt [data-cy-lang] [data-screen-label="Recursos, publicaciones"] a[data-st-2col]>.st-i-cc11c3f7>:last-child{margin-top:auto!important}
}
html:root [data-cy-lang] [data-st-pubs]>a>.st-i-a077dd8c{flex:1 1 auto!important}
html:root [data-cy-lang] [data-st-pubs]>a>.st-i-a077dd8c>:last-child{margin-top:auto!important}
@media (min-width:681px) and (max-width:991px){
html:root .st-dt [data-cy-lang] [data-screen-label="Recursos, portada"].st-i-2b17fbfd{padding-right:var(--grid-frame-x)!important}
}
/* Q17 (parcial; el CTA del hero espera decision de Tono): Cap VI desktop: la ilustracion arrancaba a media altura del
titulo (margin-top fijo de 58px). Misma tecnica que el Cap IV (v30/v33-B): la columna de texto pasa a display:contents y
la figura ocupa la columna 2 desde la fila del parrafo. Cap VII: ilustracion al ancho de la columna (antes 560px fijos)
y parrafo intro sin tope de 46ch en tablet. Cuerpo de texto de Cap VI/VII a 19px como Cap IV/V, solo en la LP
por id de pagina (p.st-i-651ce9d3 es tambien el intro del Acto IX de la Home, que conserva sus 18px/1.66 de st-home).
Tira de logos en movil: reticula de 3 columnas centrada (antes 7 + 2 huerfanos a la izquierda). */
@media (min-width:992px){
html:root .st-dt [data-cy-lang] [data-screen-label^="Capítulo VI,"] .st-i-95bd352f.st-i-95bd352f{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(400px,42%)!important;grid-template-rows:auto auto auto minmax(0,1fr)!important;column-gap:56px!important;row-gap:22px!important;align-items:start!important}
html:root .st-dt [data-cy-lang] [data-screen-label^="Capítulo VI,"] .st-i-95bd352f>.st-i-ac0225b3{display:contents!important}
html:root .st-dt [data-cy-lang] [data-screen-label^="Capítulo VI,"] .st-i-95bd352f .st-i-ac0225b3>.st-i-7e6993ef{grid-column:1!important;grid-row:1!important}
html:root .st-dt [data-cy-lang] [data-screen-label^="Capítulo VI,"] .st-i-95bd352f .st-i-ac0225b3>h2{grid-column:1!important;grid-row:2!important;margin:0!important}
html:root .st-dt [data-cy-lang] [data-screen-label^="Capítulo VI,"] .st-i-95bd352f .st-i-ac0225b3>p{grid-column:1!important;grid-row:3!important;margin:0!important}
html:root .st-dt [data-cy-lang] [data-screen-label^="Capítulo VI,"] .st-i-95bd352f .st-i-ac0225b3>.st-i-c367548a{grid-column:1!important;grid-row:4!important;align-self:start!important}
html:root .st-dt [data-cy-lang] [data-screen-label^="Capítulo VI,"] .st-i-95bd352f>.st-i-459fe4b3{grid-column:2!important;grid-row:3 / span 2!important;margin-top:0!important;align-self:start!important}
}
@media (min-width:681px){
html:root .st-dt [data-cy-lang] [data-screen-label^="Capítulo VII"] .st-i-0f57a2ac{width:100%!important;max-width:none!important}
html:root[data-wf-page="6a945828e0a2510ab8ed4069"] .st-dt [data-cy-lang] :is(p.st-i-42b49219,p.st-i-651ce9d3){font-size:19px!important;line-height:1.7!important}
}
@media (min-width:681px) and (max-width:991px){
html:root .st-dt [data-cy-lang] [data-screen-label^="Capítulo VII"] p.st-i-651ce9d3{max-width:none!important}
}
@media (max-width:680px){
html:root .st-mb [data-cy-lang] .st-i-f9614bed[data-st-logos]{display:grid!important;grid-template-columns:repeat(3,max-content)!important;justify-content:center!important;justify-items:center!important;gap:16px 22px!important}
}
/* Q09: tablet 681-991. Home Acto III: st-pages (igualaCards3) fija el ancho de las tarjetas con clientWidth-2 de la
columna, que incluye el padding: 680px en una columna de 634 -> 46px fuera. La columna pierde el padding lateral y lo
recupera como margen (menos 1px), asi la medida del JS coincide con el ancho util. LP flota: la 9a tarjeta ocupa las 2
columnas (no queda celda tenida) y los rombos calculados para 3 columnas se ocultan. Stats 2x2 (Home Acto II y VI,
LP Cap II) y cobertura (LP Cap V, 5a tarjeta a todo el ancho): rombos de 20/25/40/60/75/80% ocultos. Carta: todos los
actos a una columna (texto de 299/220px no se lee; pisa v36 P0-1), Acto VIII y Cierre incluidos. Nav: 22px de padding
tambien en Agenda (v37 le devolvia 67px y el logo pisaba "Inicio") y grupo de idioma sin minimo de 126px. */
@media (min-width:681px) and (max-width:991px){
html:root .st-dt [data-cy-lang] .st-i-4184068a{padding-left:0!important;padding-right:0!important;margin-left:calc(var(--grid-content-pad,24px) - 1px)!important;margin-right:calc(var(--grid-content-pad,24px) - 1px)!important}
html:root .st-dt [data-cy-lang] [data-st-flota][data-st-blq]>:nth-child(9):not(.st-n){grid-column:1 / -1!important}
html:root .st-dt [data-cy-lang] .st-i-bf3de33c>.st-n{display:none!important}
html:root .st-dt [data-cy-lang] :is(.st-i-252598a6,.st-i-e664428b,.st-i-f2aded81)>.st-n:is(.st-x25,.st-x75),
html:root .st-dt [data-cy-lang] :is(.st-i-252598a6,.st-i-e664428b,.st-i-f2aded81)~.st-n:is(.st-x25,.st-x75),
html:root .st-dt [data-cy-lang] .st-i-c451fdb0>.st-n:is(.st-x25,.st-x75,.st-x20,.st-x40,.st-x60,.st-x80){display:none!important}
html:root .st-dt [data-cy-lang] [data-st-riesgos][data-st-blq]>:nth-child(5):not(.st-n){grid-column:1 / -1!important}
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-dt [data-cy-lang] [data-screen-label^="Acto"] [data-st-2col][data-st-2col][data-st-2col][data-st-2col]{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-dt [data-cy-lang] [data-screen-label="Acto VIII, La vertical"] .st-i-ca1f08ce{grid-template-columns:minmax(0,1fr)!important}
html:root[data-wf-page="6a70a47f984c1cfa9f999a5e"] .st-dt [data-cy-lang] [data-screen-label="Acto VIII, La vertical"] .st-a8fig{grid-column:1!important;grid-row:auto!important;margin-top:10px!important}
html:root .st-dt [data-cy-lang] .st-cierre-in{grid-template-columns:minmax(0,1fr)!important}
html:root .st-dt nav>div[data-st-nav][data-st-nav]{padding-left:22px!important;padding-right:22px!important}
html:root .st-dt nav>div[data-st-nav] div[role="group"][role="group"]{min-width:0!important;width:auto!important}
}
/* Q25: (a) el CTA del nav (Contactanos) no lleva degradado: hover/focus solido navy (#29487B) en dia y periwinkle
(#9FB0FF) en noche, pisa la rampa de v45/v48 solo en [data-st-nav-cta]. (b) CTA blanco: reposo declarado en la hoja
sin depender de data-st-cta ni del JS (blanco, tinta) y con borde visible (#C4CFE4) para que se lea como boton sobre
tarjeta blanca; el borde ya existia (1px transparente), solo cambia de color. En noche sigue #E9EDFB sin borde. */
html:root :is(.st-dt,.st-mb) [data-cy-lang] a[data-st-cta][data-st-nav-cta][data-st-nav-cta][data-st-nav-cta][data-st-nav-cta]:is(:hover,:focus-visible){background-image:none!important;background-color:#29487B!important;color:#FFFFFF!important;border-color:#29487B!important}
html:root[data-cy-theme="noche"] :is(.st-dt,.st-mb) [data-cy-lang] a[data-st-cta][data-st-nav-cta][data-st-nav-cta][data-st-nav-cta][data-st-nav-cta]:is(:hover,:focus-visible){background-color:#9FB0FF!important;color:#070B12!important;border-color:#9FB0FF!important}
html:root :is(.st-dt,.st-mb) [data-cy-lang] a[data-st-cta][data-st-nav-cta]:is(:hover,:focus-visible) svg{color:inherit!important}
html:root [data-cy-lang] a.cy-dbtn-white.cy-dbtn-white:not([data-st-nav-cta]):not(:hover):not(:focus-visible){background-color:#FFFFFF!important;background-image:none!important;color:#0E1116!important;border-color:#C4CFE4!important}
html:root[data-cy-theme="noche"] [data-cy-lang] a.cy-dbtn-white.cy-dbtn-white:not([data-st-nav-cta]):not(:hover):not(:focus-visible){background-color:#E9EDFB!important;color:#0E1116!important;border-color:transparent!important}
/* Q08 (parcial; el tono del gris secundario espera decision de Tono): numeral III de la tarjeta navy del Acto V en dia
(#29487B sobre #0E1936, 1.9:1) -> #8FA3FF; micro-textos del footer (copyright, HECHO EN LATAM, etiqueta de la
constelacion) de blanco al 42-45% a 72% sobre negro (>=9:1). Solo color. */
html:root:not([data-cy-theme="noche"]) [data-cy-lang] [data-screen-label="Acto V, La ruta"] .st-i-47b2561f.sx2>span:first-child{color:#8FA3FF!important;-webkit-text-fill-color:#8FA3FF!important;background-image:none!important}
html:root [data-cy-lang] footer :is(.st-i-d2faa023,.st-i-7cd3ff79,.st-i-81fd80a4){color:rgba(242,244,248,.72)!important}
/* N05 (absorbe "footer con 3 bordes" de Q17): el footer se alinea a la columna de contenido con un token compartido
(--st-footer-x = marco + pad de contenido: 131px a 1672, 67px a 768; en movil marco + 18px, que vale 18px donde la
pagina pone --grid-frame-x:0 a <=680 -las hojas de Home, Carta, Blog, Agenda y post lo hacen- y 42px con el marco de
24px del core). Columnas superiores, barra inferior (antes 18px) y etiqueta de la constelacion (antes solo el marco)
usan el mismo inset. Movil: solo las dos columnas superiores (.st-i-2f7a652f) y los extremos de la barra (padding-left
en el (c), padding-right en HECHO EN LATAM); la celda central 1fr (.st-i-d1b2a89b) no lleva inset. Fuera de Home la
barra sigue siendo grid auto 1fr auto de 58px: con el inset duplicado en las tres celdas media ~438px a 390 y
desbordaba; asi mide ~258px (inset 18) o ~306px (inset 42) y cabe a 360. Glifos de los chips sociales/IA a 15x15
(X iba a 13, YouTube a 16). */
:root{--st-footer-x:calc(var(--grid-frame-x) + var(--grid-content-pad,42px))}
@media (max-width:680px){:root{--st-footer-x:calc(var(--grid-frame-x) + 18px)}}
@media (min-width:681px){
html:root [data-cy-lang] footer .st-i-ed3db7a7>.st-i-2f7a652f:first-child{padding-left:var(--st-footer-x)!important}
html:root [data-cy-lang] footer .st-i-ed3db7a7>.st-i-2f7a652f:last-child{padding-right:var(--st-footer-x)!important}
html:root [data-cy-lang] footer .st-i-e32ff292>.st-i-d2faa023{padding-left:var(--st-footer-x)!important}
html:root [data-cy-lang] footer .st-i-e32ff292>.st-i-7cd3ff79{padding-right:var(--st-footer-x)!important}
html:root [data-cy-lang] footer .st-i-22ea643f>span.st-i-81fd80a4{left:var(--st-footer-x)!important}
}
@media (max-width:680px){
html:root .st-mb [data-cy-lang] footer .st-i-ed3db7a7>.st-i-2f7a652f{padding-left:var(--st-footer-x)!important;padding-right:var(--st-footer-x)!important}
html:root .st-mb [data-cy-lang] footer .st-i-e32ff292>.st-i-d2faa023{padding-left:var(--st-footer-x)!important}
html:root .st-mb [data-cy-lang] footer .st-i-e32ff292>.st-i-7cd3ff79{padding-right:var(--st-footer-x)!important}
html:root .st-mb [data-cy-lang] footer [data-stf-cielo-host]>span.st-i-81fd80a4:not([aria-hidden]){left:var(--st-footer-x)!important}
}
html:root [data-cy-lang] footer a[aria-label]>svg{width:15px!important;height:15px!important}
/* Q20 (parcial; nav/footer/toggle de idioma en la 404 son Webflow y esperan decision de Tono): los CTAs de la 404 ya
reciben hover/focus con el patron del sitio en Q15 (CTA rampa v48, enlace subrayado) y N06 (enlace sin padding lateral
apilado), seleccionados por html[data-wf-page="6a5e7c5e6b5ceb656aa97657"] main + href (a[href="/"]:not([aria-label])
excluye el logo; a[href="/tesis"]) con las clases .st404-btn/.st404-lnk del HTML publicado como refuerzo. Nota: la 404
enlaza el core por su propio head (hoy st-core-v42.css fijo): nada de esto aplica hasta apuntarlo a v51. */
/* v51 logos v2 (5 sep 2026): CrowdStrike y SentinelOne con los archivos oficiales entregados por Toño (PNG con alfa, mascara en reposo). */
/* ===== v52 (5 sep 2026) ===== */
/* Planes (LP): el contenedor propio alinea con la columna de los capitulos vecinos (32px de inset interno en desktop) */
html:root .st-dt [data-cy-lang] .st-planes .st-planes-wrap{padding-left:32px!important;padding-right:32px!important}
/* v53 */
img[src*="athena-cysure"]{object-fit:cover!important}
/* ===== v54 (5 sep 2026, pedidos de Toño) ===== */
/* (1) Pie: las celdas "© 2026 Cysure" y "HECHO EN LATAM" miden lo mismo que el inset del nav (7.85vw en escritorio) y centran su texto */
@media (min-width:992px){
html:root .st-dt [data-cy-lang] .st-i-e32ff292{grid-template-columns:minmax(max-content,7.85vw) minmax(0,1fr) minmax(max-content,7.85vw)!important}
html:root .st-dt [data-cy-lang] .st-i-e32ff292>.st-i-d2faa023,html:root .st-dt [data-cy-lang] .st-i-e32ff292>.st-i-7cd3ff79{padding:0 10px!important;justify-content:center!important;text-align:center!important;white-space:nowrap!important}
}
/* (2) Home Acto V: la inversion nocturna la pinta la hoja del Home (#1B2A55 / #FFFFFF); st-pages v35 deja de pisar esas dos tarjetas con el color inline de tarjeta */
/* (3) LP Cap II: el arte de cada agente se ve completo (8:5) en escritorio; tope de alto por si una tarjeta ocupa toda la fila */
@media (min-width:992px){
html:root .st-dt [data-cy-lang] .st-i-262587c7 .st-i-1eaf4e91{aspect-ratio:8/5!important;height:auto!important;max-height:420px!important}
html:root .st-dt [data-cy-lang] .st-i-262587c7 .st-i-1eaf4e91>img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important}
}
/* (4) LP Cap II: las atalayas (R26) llenan su bloque; el hueco superior era un padding-top de 14 px del img */
html:root .st-dt [data-cy-lang] .st-i-49476a32>img{padding:0!important;margin:0!important;height:auto!important;aspect-ratio:auto!important;max-height:none!important;width:100%!important;display:block!important;object-fit:cover!important}
/* (5) LP Cap VII Planes: numerales como los bloques del Home (Space Grotesk 700 28px), rombos en las intersecciones y sin la línea gris del bloque siguiente */
html:root [data-cy-lang] .st-planes .st-planes-k{display:block!important;font:700 28px/28px "Space Grotesk",sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#29487B!important;margin:0 0 14px!important}
html:root[data-cy-theme="noche"] [data-cy-lang] .st-planes .st-planes-k{color:#7C92FF!important}
html:root [data-cy-lang] .st-planes .st-planes-grid{position:relative!important;overflow:visible!important}
html:root [data-cy-lang] .st-planes+[data-screen-label]{border-top:0!important}
/* st-core v61 (5 sep 2026): v56 + hero del Home (bloque v58/v59) + palabra serif mb en día (v60). SIN la etiqueta de mockups de v57 (revertida). */
/* v58 (Toño, 5 sep, hero del Home): (1) en día la palabra serif del H1 lleva el mismo dither cobalto que el resto de serifs del sitio
(la hoja del Home la forzaba a #CBD6FF); (2) el chip del hero va claro en día y oscuro en noche (el core v56 lo forzaba oscuro en ambos);
(3) en noche los dos CTAs del hero van en reposo con la paleta clara del hover (PAL_N) para destacar. Misma geometría, distinto color. */
html:root:not([data-cy-theme="noche"]) body .st-dt [data-cy-lang] em.st-i-b1b66e44.st-i-b1b66e44,html:root:not([data-cy-theme="noche"]) body .st-mb [data-cy-lang] em.st-i-b1b66e44.st-i-b1b66e44{color:transparent!important;-webkit-text-fill-color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important}
/* v65 · sustituida por el bloque E1 del final (chip del hero con scope de tema) */
/* v65 · sustituida por el bloque E1 del final (chip del hero con scope de tema) */
html:root[data-cy-theme="noche"] body :is(.st-dt,.st-mb) [data-cy-lang] :is(a.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18,a.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb):not([data-st-nav-cta]){background-color:#9FB0FF!important;background-image:linear-gradient(135deg,#7C92FF 0%,#8CA0FF 25%,#9FB0FF 50%,#B4C2FF 75%,#CBD6FF 100%)!important;background-size:100% 100%!important;background-repeat:no-repeat!important;color:#070B12!important;border-color:transparent!important}
html:root[data-cy-theme="noche"] body :is(.st-dt,.st-mb) [data-cy-lang] :is(a.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18,a.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb):not([data-st-nav-cta]):is(:hover,:focus-visible){background-color:#CBD6FF!important;background-image:linear-gradient(135deg,#9FB0FF 0%,#CBD6FF 60%,#E9EDFB 100%)!important;color:#070B12!important}
html:root[data-cy-theme="noche"] body [data-cy-lang] :is(a.st-i-34d95c18,a.st-i-49632bdb) span,html:root[data-cy-theme="noche"] body [data-cy-lang] :is(a.st-i-34d95c18,a.st-i-49632bdb) svg{color:#070B12!important}
/* v60: hero mb dia — palabra serif en cobalto solido (pisa el data-st-hielo #CBD6FF de st-home) */
html:root:not([data-cy-theme="noche"]) body .st-mb [data-st-hero] h1 em[data-st-hielo]{color:#29487B!important;-webkit-text-fill-color:#29487B!important}
/* st-core v62 (Toño, 5 sep 2026, Home movil): (1) chip del hero claro en dia (core v56 lo forzaba oscuro en ambos temas via [data-st-herocopy]>span:first-child);
(2) la palabra serif del H1 del hero movil con el mismo dither cobalto que "coberturas" (misma rampa ser-ramp2 que usa st-home en .st-mb);
(3) los CTAs del hero movil mas pegados al subtitulo (la columna del hero tiene gap:24px). Misma geometria, distinto color. */
/* v65 · sustituida por el bloque E1 del final (chip del hero con scope de tema) */
/* v65 · sustituida por el bloque E1 del final (chip del hero con scope de tema) */
html:root:not([data-cy-theme="noche"]) body .st-mb [data-st-hero] h1 em[data-st-hielo].st-i-a2dae512{background-image:url("https://cdn.prod.website-files.com/6a553f8c569e3148ffc68415/6a9110e470322eac578c71b2_ser-ramp2.png")!important;background-size:100% 100%!important;background-repeat:no-repeat!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
html:root body .st-mb [data-st-hero] .st-i-e7a09ba3.st-i-e7a09ba3{margin-top:-12px!important}
/* ============================================================================
st-core v66 — DIA HOMOLOGADO en las tres paginas de arte de cielo:
Inicio (6a553f8e569e3148ffc68445), Nuestra propuesta (6a945828e0a2510ab8ed4069)
y Por que Cysure (6a70a47f984c1cfa9f999a5e). Sustituye al bloque v63, que
estaba acotado al Home. SOLO COLOR (ni caja, ni tipografia, ni posicion) y
SOLO DIA (todo cuelga de :not([data-cy-theme="noche"])).
El grupo de paginas va en un :is(...) de tres atributos: :is() toma la
especificidad de su argumento mas alto, un unico selector de atributo, asi
que la especificidad de cada regla es EXACTAMENTE la misma que tenia con el
[data-wf-page="..."] suelto de v63. Nada cambia de peso al ampliar el alcance.
POR QUE AHORA SI ENTRAN LAS OTRAS DOS. v63 las dejo fuera porque su arte
diurno era oscuro arriba. Ya no lo es: cy-arte-map v19 cambio la ilustracion
y G-05 (v65) retiro los cuatro velos que la tapaban. Fondo real medido con
PIL sobre el staging, elemento oculto y pixel muestreado del arte (no del
background declarado, que miente), promedio de la caja de cada pieza:
Inicio H1 #89B1E1 dt / #6F9FDA mb · bajada #9CB9DD / #7AA7DC
franja de nav #74A3DF / #6296D6
N. propuesta H1 #9ABEE7 dt / #87B6ED mb · bajada #CEC8CA / #9DC0E9
franja de nav #7CADEB / #7CAFED
Por que C. H1 #94C0EA dt / #D7CFCA mb · bajada #C8D0D7 / #F5CEA1
franja de nav #6BA4E3 / #9EC7EB
Con el blanco de hoy el titular da 1.53-2.73:1 y la bajada 1.36-2.27:1 en
las seis combinaciones. Con tinta suben a 6.94-12.36:1 y 6.18-9.91:1.
LO QUE NO SE PINTA. Las palabras en serif (em.cy-dser / .cy-dser-cobalto /
.cy-dser-claro) llevan un PNG de tramado recortado al texto con
color:transparent!important y -webkit-text-fill-color:transparent!important
(cy-dither-ui-wf-v4, especificidad (0,1,0) pero con !important, asi que una
regla nuestra la ganaria). Por eso NINGUN selector de este bloque desciende
dentro de un : todas las cadenas de texto usan el combinador hijo ">" y
pasan por "span" o "strong", nunca por "em", y ademas llevan :not(.cy-dser).
Verificar siempre despues de publicar: «detectamos» (Inicio), «respondemos»
(Nuestra propuesta) y «senal» (Por que Cysure) siguen tramadas.
QUE PISA CADA REGLA
1) H1 — core v62 L678-684 (0,5,2) y L681 (0,5,3, el span de idioma, que es
donde vive de verdad el texto sans) + st-home v52 L262 (0,2,1, mb)
y sus equivalentes en st-plataforma-v14n y st-tesis-v31.
2) Bajada — core v62 L685-691 (0,5,2 / 0,4,3) + st-home v52 L264-265 (0,2,1).
3) Nav — st-home v52 L40/L147/L268, L862 (chips), L872/L888 y core L629
(CTA), L864/L880 y core L584/L628 (logo), L270 (hamburguesa),
core L469 (borde de las pastillas) y core L260 (chip "aqui",
(0,8,1), el peso mas alto del grupo).
4) Cue movil — st-home v52 L359-360 (0,1,0, sin !important).
5) Negrita blanca de las tarjetas — st-plataforma-v14n L7
«.st-dt .st-i-0819511f{font-weight:600;color:#FFFFFF}» (0,2,0, sin
!important). Ver la nota de la regla 10.
============================================================================ */
/* --- 1) Titular del hero: la parte sans en tinta ---------------------------
#0E1116 = --cy-ink. Estructura real de los tres H1:
h1 > span.lang-XX > [ texto | span | em.cy-dser ]
Se pintan el h1, sus spans de idioma y los spans internos, SIEMPRE con ">".
El del serif no aparece en ninguna cadena, asi que conserva su tramado.
Medido: Inicio 8.51 dt / 6.94 mb · Propuesta 9.84 / 8.97 · Carta 9.92 / 12.36.
Peor pixel de las seis: 6.32:1. Hoy en blanco: 1.53-2.73:1. */
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] [data-st-hero][data-st-hero][data-st-hero] h1:not(.cy-dser):not([data-st-hielo]),
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] [data-st-hero][data-st-hero][data-st-hero] h1 > span:not(.cy-dser):not([data-st-hielo]),
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] [data-st-hero][data-st-hero][data-st-hero] h1 > span > span:not(.cy-dser):not([data-st-hielo]),
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] [data-st-hero][data-st-hero][data-st-hero] h1 > :is(strong,b):not(.cy-dser),
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] [data-st-hero][data-st-hero][data-st-hero] h1 > span > :is(strong,b):not(.cy-dser){
color:#0E1116!important;-webkit-text-fill-color:#0E1116!important}
/* --- 2) Bajada del hero y su negrita ---------------------------------------
#1B2534 para el cuerpo: es el gris mas claro que aguanta AA en el PEOR pixel
del arbol movil de Inicio (5.58:1). Se descartan --cy-body #3D4654 y #333B4A.
#0E1116 para la negrita, que ademas abre un escalon de jerarquia.
TRAMPA CONFIRMADA EN LAS TRES: el vive DENTRO del span de idioma
(p > span.lang-es > strong), y en ingles hay ademas spans hermanos sueltos
(p > span.lang-en > span). Por eso las seis ramas, todas con ">".
Medido en el cuerpo: Inicio 7.67 dt / 6.18 mb · Propuesta 9.45 / 8.25 ·
Carta 9.91 / 10.58. Hoy: 1.36-2.27:1. */
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] [data-st-hero][data-st-hero][data-st-hero] p:not(.cy-dser),
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] [data-st-hero][data-st-hero][data-st-hero] p > span:not(.cy-dser),
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] [data-st-hero][data-st-hero][data-st-hero] p > span > span:not(.cy-dser){
color:#1B2534!important;-webkit-text-fill-color:#1B2534!important}
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] [data-st-hero][data-st-hero][data-st-hero] p > :is(strong,b):not(.cy-dser),
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] [data-st-hero][data-st-hero][data-st-hero] p > :is(strong,b) > span:not(.cy-dser),
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] [data-st-hero][data-st-hero][data-st-hero] p > span > :is(strong,b):not(.cy-dser),
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] [data-st-hero][data-st-hero][data-st-hero] p > span > :is(strong,b) > span:not(.cy-dser){
color:#0E1116!important;-webkit-text-fill-color:#0E1116!important}
/* --- 3) El CTA secundario claro del hero recibe un canto real ---------------
a.cy-dbtn-white es una superficie BLANCA con borde --cy-ln #C4CFE4 sobre el
arte claro: el borde mide 1.19-1.42:1, por debajo del 3:1 de 1.4.11, y el
boton se lee como un hueco. NO se cambia el relleno (su texto #0E1116 encima
del blanco va a 18.9:1): se le da un canto en #29487B (--st-ser).
Generico por clase, asi cubre «Lee la carta» (Inicio) y «Ver los agentes»
(Nuestra propuesta) sin depender de ningun st-i-. */
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] [data-st-hero] a[data-st-cta].cy-dbtn-white.cy-dbtn-white.cy-dbtn-white:not([data-st-nav-cta]):not(:hover):not(:focus-visible){
border-color:#29487B!important}
/* --- 4) LA BARRA EN REPOSO: SIN SUPERFICIE ---------------------------------
ESTE ES EL CAMBIO QUE PIDE TONO. v63 le habia puesto a la nav del Inicio un
velo rgba(234,240,251,.84) + blur(3px) + filete inset para que su texto
tuviera un fondo estable. Arriba del todo la barra tiene que ser 100%
transparente: se retira la superficie ENTERA (color, imagen, desenfoque y
filete) y se conservan intactos los colores de contenido de las reglas 5-8,
que son los que la hacen legible sobre el arte. En /como-funciona y /tesis
la barra YA estaba transparente en reposo: con esto las tres quedan iguales.
El estado con scroll ([data-scrolled="1"]) NO se toca: lo fija core L1020.
COSTE MEDIDO Y REPORTADO, no compensado aqui: el chip de la pagina actual
#2740C9 sobre el velo daba 6.13:1 y sobre el cielo desnudo cae a 3.02:1 dt
en Inicio, 3.40:1 en Nuestra propuesta y 2.99:1 en Por que Cysure. Los
demas elementos de la barra suben o se mantienen muy por encima de AA. */
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] nav [data-st-nav][data-st-nav][data-scrolled="0"]{
background-color:transparent!important;background-image:none!important;
box-shadow:none!important;border-color:transparent!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* --- 5) Chips de la nav ----------------------------------------------------
Inactivos en --cy-ink #0E1116 (7.16-8.15:1 sobre el cielo desnudo) y la
pagina actual en --cy-kicker/--cy-emph #2740C9: son los dos roles que la
barra YA usa con scroll. El chip activo tiene que pasar core v62 L260,
que pesa (0,8,1). AVISO: sin el velo el activo se queda en 2.99-3.40:1;
ver la nota de la regla 4. */
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] nav [data-st-nav][data-scrolled="0"] a.cy-dchip.cy-dchip.cy-dchip:not(:hover):not(:focus-visible),
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] nav [data-st-nav][data-scrolled="0"] a.cy-dchip.cy-dchip.cy-dchip:not(:hover):not(:focus-visible) span{
color:#0E1116!important;-webkit-text-fill-color:#0E1116!important}
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] nav [data-st-nav][data-scrolled="0"] [data-st-navmid] a.cy-dchip[data-st-here][data-st-here].cy-dchip.cy-dchip.cy-dchip:not(:hover):not(:focus-visible),
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] nav [data-st-nav][data-scrolled="0"] [data-st-navmid] a.cy-dchip[data-st-here][data-st-here].cy-dchip.cy-dchip.cy-dchip:not(:hover):not(:focus-visible) span{
color:#2740C9!important;-webkit-text-fill-color:#2740C9!important}
/* --- 6) CTA de la nav «Contactanos» ----------------------------------------
Hoy al tope es BLANCO con texto tinta en las tres paginas. Su superficie
blanca mide 1.78-3.15:1 contra el cielo: sobre un arte claro un boton blanco
desaparece. Pasa a negro solido con texto blanco, que es lo que ya muestra
con scroll: superficie 6.02-10.63:1, texto interior 18.91:1. */
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] nav [data-st-nav][data-scrolled="0"] a[data-st-cta][data-st-nav-cta][data-st-nav-cta][data-st-nav-cta]:not(:hover):not(:focus-visible){
background-color:#0E1116!important;background-image:none!important;color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important;border-color:transparent!important}
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] nav [data-st-nav][data-scrolled="0"] a[data-st-cta][data-st-nav-cta][data-st-nav-cta][data-st-nav-cta]:not(:hover):not(:focus-visible) :is(span,svg){
color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important}
/* --- 7) Logotipo -----------------------------------------------------------
Es un por arbol dentro de las
tarjetas de Nuestra propuesta, cuyo fondo es var(--cy-card) #FFFFFF.
Contraste medido: 1.00:1. El texto no esta apagado: esta literalmente
invisible, y lleva asi desde que se escribio la hoja. En noche la tarjeta si
es oscura, por eso el bloque entero cuelga de :not([data-cy-theme="noche"])
y la noche no se toca. La misma clase la usa el del hero, donde la
regla 2 ya lo lleva a tinta: los dos coinciden en #0E1116. */
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] :is(strong,b).st-i-0819511f.st-i-0819511f,
html:root:not([data-cy-theme="noche"]):is([data-wf-page="6a553f8e569e3148ffc68445"],[data-wf-page="6a945828e0a2510ab8ed4069"],[data-wf-page="6a70a47f984c1cfa9f999a5e"]) body :is(.st-dt,.st-mb) [data-cy-lang] :is(strong,b).st-i-0819511f.st-i-0819511f > span:not(.cy-dser){
color:#0E1116!important;-webkit-text-fill-color:#0E1116!important}
/* --- 11) NO SE TOCA: el rotulo de 11px del herocopy de Por que Cysure -------
span.st-i-5367a63c (solo existe en /tesis, arbol movil) parecia texto claro
sobre fondo claro, pero el arte que tiene DETRAS no es el cielo: es la franja
de mar, medida en (87,116,147). Medicion real de sus 840 pixeles:
BLANCO (como esta hoy) media 5.34:1 peor 1.49:1
TINTA #0E1116 media 4.11:1 peor 1.45:1
El blanco gana, asi que se deja como esta. NOTA PARA TONO: en los dos colores
el PEOR pixel se queda en ~1.45:1, porque el rotulo cruza la linea de
horizonte del arte. Eso no se arregla con color: pide mover el rotulo unos
px o una version del arte con esa banda mas uniforme. Reportado, sin tocar. */
/* ============================================================================
HOME-01 y HOME-02 · el CTA «Habla con los fundadores» del hero toma el color
real de la palabra «detectamos», medido pixel a pixel sobre el dither:
DIA reposo #4066A3 (parada central de PAL_D) · hover #33578F, el mismo
azul una parada mas intenso, nunca otro color.
NOCHE reposo #9FB0FF (parada central de PAL_N) · hover blanco.
Seis repeticiones de la clase para ganar a L900 (reposo dia), a L892/L919
(hover global de dia) y a L1252/L1253 (noche por id, que usan cinco).
Solo el CTA primario del hero: el :not([data-st-nav-cta]) deja fuera el de
la barra, y «Lee la carta» conserva su tratamiento de L1252.
============================================================================ */
html:root:not([data-cy-theme="noche"]) body :is(.st-dt,.st-mb) [data-cy-lang] a.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18:not([data-st-nav-cta]){background-color:#4066A3!important;background-image:none!important;color:#FFFFFF!important;border-color:transparent!important}
html:root:not([data-cy-theme="noche"]) body :is(.st-dt,.st-mb) [data-cy-lang] a.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18:not([data-st-nav-cta]):is(:hover,:focus-visible){background-color:#33578F!important;background-image:none!important;color:#FFFFFF!important;border-color:transparent!important}
html:root:not([data-cy-theme="noche"]) body [data-cy-lang] a.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18:not([data-st-nav-cta]) :is(span,svg){color:#FFFFFF!important}
html:root[data-cy-theme="noche"] body :is(.st-dt,.st-mb) [data-cy-lang] a.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18:not([data-st-nav-cta]){background-color:#9FB0FF!important;background-image:none!important;color:#070B12!important;border-color:transparent!important}
html:root[data-cy-theme="noche"] body :is(.st-dt,.st-mb) [data-cy-lang] a.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18:not([data-st-nav-cta]):is(:hover,:focus-visible){background-color:#FFFFFF!important;background-image:none!important;color:#070B12!important;border-color:transparent!important}
html:root[data-cy-theme="noche"] body [data-cy-lang] a.st-i-34d95c18.st-i-34d95c18.st-i-34d95c18:not([data-st-nav-cta]) :is(span,svg){color:#070B12!important}
/* ══════════════════════════════════════════════════════════════════════
v65 · Lote 2026-09-05 · bloque 1
G-02 · G-03 · MOB-04 · G-05 · PROP-06 · PROP-07 · nav 1400-1479
══════════════════════════════════════════════════════════════════════ */
/* ── G-02 + MOB-04 · una sola altura de banda de constelacion ──────────
cy-dither-ui-wf-v4.js:317 inyecta un :root con --grid-grain-band:
clamp(36px,2.6vw,48px) DESPUES de la hoja de pagina. Inicio y Por que
Cysure tienen un
es transparente y el circulo lo dibuja su ::before, centrado con
top:50%/left:50% + translate(-50%,-50%) sobre una caja de padding de
15 x 43 (o 30 x 43 en el activo). Medido: inset 21.5 / 0.5 / 14.5 / 7.5
y translate de -3.5px. A dpr 2 y 3 el borde cae a mitad de pixel de
dispositivo y el antialias aplana un lado del circulo; en el indicador
largo se nota en los dos extremos redondeados.
Se quita la fraccion de raiz: el centra por flex y el ::before
deja de estar posicionado. Las cajas de padding son 7 y 22 de ancho por
7 de alto, justo el tamano del ::before, asi que el centrado sale exacto
y todos los rects quedan enteros. Afecta a los dos carruseles, el de
/como-funciona y el de Inicio. */
html:root [data-cy-lang] [data-st-dot][data-st-dot][data-st-dot]{
display:flex!important;align-items:center!important;justify-content:center!important}
html:root [data-cy-lang] [data-st-dot][data-st-dot][data-st-dot]::before{
position:static!important;top:auto!important;left:auto!important;
right:auto!important;bottom:auto!important;
transform:none!important;flex:0 0 auto!important}
/* ── MB-05 · el mockup del Capitulo IV con el tratamiento del III ──────
El del Cap. III (.st-i-9f1af41b dt / .st-i-adae66cb mb) es una tarjeta:
fondo plano, filete exterior, radio 18px, sombra 0 24px 60px, padding
26/28 dt y 22/20 mb, gap 16px y filas separadas por filetes de 1px.
Ademas el core ya le parte el color en dia y noche.
El del Cap. IV (.st-i-88bffc68 dt / .st-i-d320ee97 mb) era una tabla:
sin sombra, sin padding, gap de 1px que ensena el fondo del contenedor
como separador, y bandas var(--cy-bg) en cabecera y pie. Ademas sus
textos secundarios usan var(--cy-mut), que el bloque de noche del core
NO redefine: en noche quedaban #5A6068 sobre carta oscura.
Aqui el IV adopta la caja, los filetes, los tamanos y los colores del
III, en dia y noche y en los dos arboles. El contenido no se toca: la
chapa EN VIVO ya comparte clase (.st-i-e7f14d2a + .st-i-0fb8c9ce) y el
verde de los deltas (.st-i-737ad753) ya es el mismo 600 12.5px Space
Grotesk #10B981 que el «+9» del III, asi que ninguno de los dos cambia. */
/* caja, dia */
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97){
background:#FFFFFF!important;border:1px solid #C4CFE4!important;
box-shadow:0 24px 60px rgba(14,17,22,.08)!important}
/* caja, noche */
html:root[data-cy-theme="noche"] [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97){
background:#0E1116!important;border:1px solid #26397A!important;
box-shadow:0 24px 60px rgba(14,17,22,.18)!important}
/* geometria de la caja, la misma del III en cada arbol */
html:root .st-dt [data-cy-lang] .st-i-88bffc68{border-radius:18px!important;padding:26px 28px!important;gap:16px!important}
html:root .st-mb [data-cy-lang] .st-i-d320ee97{border-radius:18px!important;padding:22px 20px!important;gap:16px!important}
/* filas: fuera las bandas y el sangrado de tabla */
html:root [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) :is(.st-i-ce8fc688,.st-i-b84f48ab,.st-i-8e012616,.st-i-bf634d55){
background:transparent!important;padding-left:0!important;padding-right:0!important}
html:root [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-ce8fc688{padding-top:0!important;padding-bottom:0!important}
html:root [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-b84f48ab{padding-top:0!important;padding-bottom:16px!important;border-bottom:1px solid transparent!important}
html:root [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-8e012616{padding-top:0!important;padding-bottom:13px!important;border-bottom:1px solid transparent!important}
html:root [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-8e012616:has(+ .st-i-bf634d55){border-bottom:0!important;padding-bottom:0!important}
html:root [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-bf634d55{
margin-top:4px!important;padding:12px 14px!important;
border:1px solid transparent!important;border-radius:12px!important}
/* filetes y pie, dia */
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) :is(.st-i-b84f48ab,.st-i-8e012616){border-bottom-color:#E3E8F3!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-bf634d55{border-color:#E3E8F3!important;background:#F5F7FC!important}
/* filetes y pie, noche */
html:root[data-cy-theme="noche"] [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-b84f48ab{border-bottom-color:rgba(242,244,248,.14)!important}
html:root[data-cy-theme="noche"] [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-8e012616{border-bottom-color:rgba(242,244,248,.1)!important}
html:root[data-cy-theme="noche"] [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-bf634d55{border-color:rgba(242,244,248,.14)!important;background:transparent!important}
/* tipografia: los tamanos del III */
html:root [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-de10bdbe{letter-spacing:.16em!important}
html:root .st-dt [data-cy-lang] .st-i-88bffc68 .st-i-49870338{font-size:46px!important;line-height:normal!important;letter-spacing:-0.02em!important}
html:root .st-mb [data-cy-lang] .st-i-d320ee97 .st-i-d537d0fa{font-size:40px!important;line-height:normal!important;letter-spacing:-0.02em!important}
html:root [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-6fba646a{font-size:17px!important}
html:root [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-a2e47e38{font-size:12.5px!important}
html:root [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-2e6999b0{font-size:14px!important}
html:root [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-14e11a22{font:12.5px/1.45 'DM Sans',sans-serif!important}
/* color, dia */
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-de10bdbe{color:#5A6068!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) :is(.st-i-49870338,.st-i-d537d0fa){color:#0E1116!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-6fba646a{color:#8A8F98!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-2e6999b0{color:#0E1116!important}
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-14e11a22{color:#3D4654!important}
/* color, noche */
html:root[data-cy-theme="noche"] [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-de10bdbe{color:rgba(242,244,248,.55)!important}
html:root[data-cy-theme="noche"] [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) :is(.st-i-49870338,.st-i-d537d0fa){color:#FFFFFF!important}
html:root[data-cy-theme="noche"] [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-6fba646a{color:rgba(242,244,248,.5)!important}
html:root[data-cy-theme="noche"] [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-2e6999b0{color:rgba(242,244,248,.85)!important}
html:root[data-cy-theme="noche"] [data-cy-lang] :is(.st-i-88bffc68,.st-i-d320ee97) .st-i-14e11a22{color:rgba(242,244,248,.7)!important}
/* remate del III · en movil y de dia la cifra se quedaba blanca sobre
blanco: el bloque de dia del core solo repinta .st-i-ef87add3, que es
la cifra de ESCRITORIO; la de movil es .st-i-3c27cc62 y conserva el
color:#FFFFFF de la hoja de pagina, pensado para la tarjeta oscura.
Sin esto las dos cajas no pueden coincidir, porque la del III no
ensena su numero. */
html:root:not([data-cy-theme="noche"]) [data-cy-lang] :is(.st-i-9f1af41b,.st-i-adae66cb) .st-i-3c27cc62{color:#0E1116!important}
/* Toño 6 sep: el CTA secundario del hero va BLANCO en noche.
La regla de la v58 (~L1252) agrupa los dos CTAs; se saca este de ahi
repitiendo la clase seis veces, que gana a las cinco de aquella. */
html:root[data-cy-theme="noche"] body :is(.st-dt,.st-mb) [data-cy-lang] a.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb:not([data-st-nav-cta]){background-color:#FFFFFF!important;background-image:none!important;color:#070B12!important;border-color:transparent!important}
html:root[data-cy-theme="noche"] body :is(.st-dt,.st-mb) [data-cy-lang] a.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb:not([data-st-nav-cta]):is(:hover,:focus-visible){background-color:#E9EDFB!important;background-image:none!important;color:#070B12!important;border-color:transparent!important}
html:root[data-cy-theme="noche"] body [data-cy-lang] a.st-i-49632bdb.st-i-49632bdb.st-i-49632bdb:not([data-st-nav-cta]) :is(span,svg){color:#070B12!important}