/* =========================================================================
   Sinergis — tema oscuro
   Fondo #0A0E14: medido del topbar de IA360 (81,6 % de sus pixeles) y el
   color mas usado en todo el codigo IA360 del equipo. Misma familia de marca.
   Estructura y ritmo de seccion tomados de doqma.com.co.
   Cero dependencias: sin fuentes remotas, sin frameworks, corre desde file://
   ========================================================================= */

:root{
  /* --- fondo y superficies, paleta IA360 --- */
  --fondo:      #0A0E14;
  --fondo-2:    #10151d;
  --fondo-3:    #151b25;
  --borde:      #1e2836;
  --borde-vivo: #2b3a4d;

  /* --- texto --- */
  --texto:      #e9eff7;
  --suave:      #93a7c1;
  --tenue:      #6a7d96;

  /* --- acentos, los azules de IA360 --- */
  --cian:       #00C2E0;
  --cian-2:     #4dd8ed;
  --cian-hondo: #0084CF;

  /* --- azules propios de Sinergis, medidos del logo --- */
  --navy:       #00418D;
  --navy-hondo: #060D55;

  --ancho: 1240px;
  --radio: 14px;
  --marca-dur: 2000ms;
  --marca-bucle: 5200ms;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--fondo) }
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font:400 17px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video,canvas{ max-width:100%; display:block }
a{ color:var(--cian); text-decoration:none }
a:hover{ text-decoration:underline }
:focus-visible{ outline:3px solid var(--cian); outline-offset:3px; border-radius:6px }
.envoltura{ width:min(var(--ancho),92vw); margin-inline:auto }
.salta{ position:absolute; left:-9999px }
.salta:focus{ left:1rem; top:1rem; position:fixed; z-index:99; background:var(--cian);
  color:#04121a; padding:.7rem 1.1rem; border-radius:8px; font-weight:700 }

h1,h2,h3{ line-height:1.12; letter-spacing:-.022em; margin:0 0 .6em; color:var(--texto) }
h1{ font-size:clamp(2.4rem,5.6vw,4.2rem); font-weight:300 }
h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); font-weight:600 }
h3{ font-size:1.1rem; font-weight:700; letter-spacing:-.01em }
p{ margin:0 0 1em }
.guia{ color:var(--suave); max-width:64ch }

/* ---------------------------------------------------------------- botones */
.boton{
  display:inline-block; background:var(--cian); color:#04121a!important;
  padding:.7rem 1.6rem; border-radius:999px; font-weight:700; font-size:.95rem;
  border:2px solid var(--cian); transition:background .18s,border-color .18s,color .18s;
}
.boton:hover{ background:var(--cian-2); border-color:var(--cian-2); text-decoration:none }
.boton.fantasma{ background:transparent; color:var(--cian)!important }
.boton.fantasma:hover{ background:var(--cian); color:#04121a!important }

/* =========================================================== HERO
   Como doqma: la cabecera va ENCIMA del hero, el logo grande arriba a la
   izquierda y el titular abajo a la izquierda. El fondo va a plena
   intensidad, sin difuminar — era la critica a la version anterior. */
.hero{ position:relative; min-height:min(88vh,760px); display:flex;
       flex-direction:column; background:var(--fondo); overflow:hidden;
       border-bottom:1px solid var(--borde) }
.cv-fondo{ position:absolute; inset:0; width:100%; height:100%; z-index:0 }
.hero-respaldo{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.55; z-index:0; display:none }
/* Velo minimo: solo lo justo para que el titular tenga contraste AA sobre la
   ola. No es un difuminado del fondo — el grafo se sigue viendo entero. */
.hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,rgba(10,14,20,.80) 0 28%,rgba(10,14,20,.14) 58%,
                             rgba(10,14,20,0) 100%) }
/* Fija a la ventana, no al hero: el vuelo nace junto a «somos» —que esta en la
   seccion de abajo— y sube hasta el logo. Como getBoundingClientRect ya
   devuelve coordenadas de ventana, position:fixed encaja sin conversiones. */
/* `inset:0` YA lo estira al viewport entero. Nada de `100vw`: esa unidad
   incluye el ancho de la barra de desplazamiento, asi que en un movil con
   barra el lienzo sobresalia 15 px y la pagina se movia de lado. Medido a
   390 px: scrollWidth 405 contra un viewport de 375. */
.cv-mariposa{ position:fixed; inset:0; z-index:50;
  pointer-events:none; transition:opacity .6s ease }
.cv-mariposa.apagado{ opacity:0 }

/* A SANGRE, no dentro del contenedor centrado: en pantallas anchas el
   contenedor dejaba mas de 600 px muertos a cada lado. El logo y el titular
   se pegan al borde izquierdo y la navegacion al derecho. */
.hero-contenido{ position:relative; z-index:3; display:flex; flex-direction:column;
  flex:1; width:100%; padding:1.6rem clamp(1.4rem,3.2vw,3.4rem) 4.5rem }
.barra{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:2rem; flex-wrap:wrap }

/* El logo, grande y con fondo transparente, en la esquina superior izquierda */
.logo-grande{ position:relative; display:block; width:clamp(230px,23vw,320px);
  flex:0 0 auto; isolation:isolate }
.logo-grande:hover{ text-decoration:none }
.logo-grande .logo{ position:relative; z-index:1 }

/* AURA. Resplandor cian detras del logo, en el color exacto de la muestra
   (#00C2E0, el mismo de IA360). Nace apagada: la enciende el script en el
   instante en que la mariposa empieza a fundirse con el isotipo, y a partir
   de ahi late sin parar. */
.aura{ position:absolute; left:-20%; top:-62%; width:150%; height:236%;
  z-index:0; pointer-events:none; opacity:0; transform:scale(.92);
  --pico:1.17; --medio:1.09; --ritmo:1900ms;
  background:radial-gradient(closest-side,
              rgba(0,194,224,.58) 0%, rgba(0,194,224,.22) 52%, transparent 76%);
  filter:blur(20px) }

/* Latido de corazon: dos golpes, uno fuerte y otro menor, y reposo. Un pulso
   senoidal simple no se lee como latido — se lee como parpadeo. */
@keyframes sg-latido{
  0%   { transform:scale(.92); opacity:.30 }
  7%   { transform:scale(var(--pico));  opacity:.88 }
  15%  { transform:scale(.99);           opacity:.44 }
  24%  { transform:scale(var(--medio));  opacity:.68 }
  36%  { transform:scale(.92);  opacity:.32 }
  100% { transform:scale(.92);  opacity:.32 }
}
.logo-grande.late .aura{ animation:sg-latido var(--ritmo) ease-in-out infinite }
/* Con movimiento reducido el aura SIGUE latiendo: apagarla dejaba sin ver lo
   que se habia pedido a quien tiene la preferencia activada de forma
   permanente. Late mas lento y con menos recorrido. */
@media (prefers-reduced-motion:reduce){
  html:not(.forzar-movimiento) .aura{ --pico:1.07; --medio:1.03; --ritmo:3400ms }
}

.nav{ display:flex; gap:1.7rem; align-items:center; flex-wrap:wrap; padding-top:.5rem }
.nav a{ color:var(--texto); font-size:.86rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:.3rem 0; border-bottom:2px solid transparent }
.nav a:hover,.nav a[aria-current]{ color:var(--cian); border-bottom-color:var(--cian);
  text-decoration:none }

.hero-texto{ margin-top:auto; max-width:56ch }
.antetitulo{ display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cian); margin-bottom:1.1rem }
.hero-texto p{ font-size:clamp(1rem,1.5vw,1.2rem); color:#c3d2e6; max-width:52ch }
.hero-acciones{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem }

/* ---------------------------------------------------------------- secciones */
.seccion{ padding:6rem 0; position:relative }

/* Bandas de fondo. Sustituyen al color plano: una seccion de cifras sobre un
   rectangulo liso se lee como un hueco, no como una seccion. Referencia: la
   banda de puntos que doqma pone detras de 'Experiencia y calidad'. */
.banda{ background-repeat:no-repeat; background-position:center;
  background-size:cover; isolation:isolate }
.banda::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,var(--fondo) 0%,rgba(10,14,20,.66) 20%,
                             rgba(10,14,20,.52) 60%,rgba(10,14,20,.72) 88%,
                             var(--fondo) 100%) }
/* Sobre la banda el texto de apoyo necesita subir de tono: el gris normal
   compite con los puntos brillantes de la ola y deja de leerse. */
.banda .guia{ color:#cfdcee }
.banda .encabezado{ position:relative }
/* `overflow-x:clip` y no `hidden`: los dos recortan, pero `hidden` convierte
   la seccion en un contenedor de scroll y eso rompe cualquier `sticky` que
   se ponga dentro mas adelante. `clip` recorta y ya.

   Hace falta porque el halo de abajo se sale 2,4rem —38 px— por cada lado.
   En una pantalla ancha eso cae en el margen y no se nota; en un movil de
   375 px la envoltura ya ocupa 359, asi que el halo empujaba el ancho a 405
   y la pagina se movia de lado. Medido a 390. Se recorta en vez de
   encogerlo: es un degradado que se desvanece, y cortarlo en el borde no se
   ve, mientras que estrecharlo si dejaria el texto sin fondo donde importa. */
.banda{ overflow-x:clip }
.banda .encabezado::before{ content:""; position:absolute; z-index:-1;
  inset:-1.6rem -2.4rem; border-radius:22px;
  background:radial-gradient(ellipse at 30% 50%,rgba(10,14,20,.86) 0%,
                             rgba(10,14,20,.55) 55%,transparent 78%) }
/* Cuatro fondos con COMPOSICIONES distintas, no variaciones de la misma ola:
   antes las tres salieron con la misma semilla y apiladas se leian como una
   imagen repetida. Se asignan segun lo que lleve encima cada seccion. */
.banda-ola{ background-image:url(../img/banda-cifras.webp) }      /* cifras */
.banda-red{ background-image:url(../img/banda-sectores.webp) }    /* constelacion */
.banda-foco{ background-image:url(../img/banda-cta.webp) }        /* convergencia:
   tiene el centro muy brillante, asi que solo va donde el contenido lo tapa */
.seccion.alt{ background:var(--fondo-2); border-block:1px solid var(--borde) }
.encabezado{ max-width:72ch; margin-bottom:3.2rem }
.encabezado.centrado{ margin-inline:auto; text-align:center }
.encabezado.centrado .guia{ margin-inline:auto }

/* Tarjetas anchas: la imagen manda a la izquierda y el texto respira a la
   derecha. Con el icono pequeño arriba, la ilustracion era un adorno; asi es
   parte de la tarjeta. Dos columnas en pantalla ancha, una en estrecha. */
/* `min(460px,100%)` y no `460px` a secas. Con el minimo fijo, en cuanto el
   contenedor baja de 460 la pista SIGUE midiendo 460 y la rejilla se sale de
   la pagina: no hay ningun `@media` que lo salve porque no es cuestion del
   viewport sino de la propia pista. Medido a 390 px: ocho de las diez
   paginas se desplazaban 93 px de lado. `min()` hace que la pista nunca
   pueda ser mas ancha que su contenedor. */
.rejilla{ display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr)) }
.tarjeta{
  background:var(--fondo-2); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1.7rem; display:grid; grid-template-columns:minmax(150px,38%) 1fr;
  gap:1.5rem; align-items:start;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.tarjeta.sin-media{ grid-template-columns:1fr }
.tarjeta .media{ aspect-ratio:1; border-radius:14px; overflow:hidden;
  background:var(--fondo-3); border:1px solid var(--borde) }
.tarjeta .media img,.tarjeta .media video{ width:100%; height:100%;
  object-fit:cover; display:block }
.tarjeta .cuerpo{ display:flex; flex-direction:column; min-height:100%;
  align-self:stretch }
.tarjeta .accion{ margin-top:auto; padding-top:1.1rem; text-align:right;
  color:var(--cian); font-size:.9rem; font-weight:700 }
a.tarjeta:hover .accion{ text-decoration:underline }
/* La tarjeta lleva la ilustracion a la izquierda y el texto a la derecha. Por
   debajo de 560 px esas dos columnas dejan al texto en una tira de 6-7
   palabras: se apilan. */
@media (max-width:560px){
  .tarjeta{ grid-template-columns:1fr }
  .tarjeta .media{ max-width:210px }

  .tarjeta{ grid-template-columns:1fr }
  .tarjeta .media{ max-width:200px }
}
.seccion.alt .tarjeta{ background:var(--fondo-3) }
.tarjeta:hover{ transform:translateY(-4px); border-color:var(--cian);
  background:var(--fondo-3) }

.tarjeta ul{ margin:.7rem 0 0; padding-left:1.1rem; color:var(--suave);
  font-size:.94rem; line-height:1.85 }
.tarjeta li::marker{ color:var(--cian) }
.tarjeta h3{ color:var(--cian-2) }
/* Una tarjeta que ademas es enlace no debe subrayarse ni cambiar de color:
   ya tiene su propia senal de foco al pasar por encima. */
/* display:grid, no block: `a.tarjeta` gana por especificidad a `.tarjeta` y
   con block anulaba la rejilla de dos columnas — la imagen se comia el ancho
   entero y el texto caia debajo. */
a.tarjeta{ display:grid; color:inherit }
a.tarjeta:hover{ text-decoration:none }

/* ---------------------------------------------------------------- cifras */
.cifras{ display:grid; gap:1.3rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-top:2.6rem }
.cifra{ text-align:center; padding:2rem 1rem; background:var(--fondo-2);
  border:1px solid var(--borde); border-radius:var(--radio) }
.cifra b{ display:block; font-size:clamp(2.6rem,5vw,3.4rem); font-weight:300;
  color:var(--cian); line-height:1; letter-spacing:-.03em }
.cifra span{ display:block; margin-top:.6rem; font-size:.9rem; color:var(--suave) }

/* ---------------------------------------------------------------- dos columnas */
.dos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:3.4rem; align-items:center }
.dos img,.dos video{ width:100%; border-radius:var(--radio);
  border:1px solid var(--borde) }

/* ---------------------------------------------------------------- pastillas */
.pastillas{ display:flex; flex-wrap:wrap; gap:.65rem; justify-content:center }
.pastillas span{ border:1px solid var(--borde-vivo); background:var(--fondo-2);
  border-radius:999px; padding:.55rem 1.2rem; font-size:.9rem; font-weight:600;
  color:var(--suave) }

/* ---------------------------------------------------------------- pasos */
.pasos{ counter-reset:paso; display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.paso{ position:relative; padding:1.7rem 1.7rem 1.7rem 3.6rem;
  background:var(--fondo-2); border:1px solid var(--borde); border-radius:var(--radio) }
.paso::before{ counter-increment:paso; content:counter(paso,decimal-leading-zero);
  position:absolute; left:1.4rem; top:1.55rem; color:var(--cian);
  font-weight:800; font-size:.9rem; letter-spacing:.05em }
.paso h3{ margin-bottom:.35rem }
.paso p{ margin:0; color:var(--suave); font-size:.95rem }

/* ---------------------------------------------------------------- cta */
.cta{ position:relative; overflow:hidden; text-align:center; padding:7rem 0;
  border-block:1px solid var(--borde);
  background:url(../img/banda-cortina.webp) center/cover no-repeat var(--fondo-2) }
/* La cortina y no la convergencia: el CTA lleva titular, parrafo y boton
   centrados, y el nucleo de luz de la convergencia se los comia. */
.cta::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,var(--fondo) 0%,rgba(10,14,20,.35) 30%,
                             rgba(10,14,20,.35) 70%,var(--fondo) 100%) }
/* Velo detras del texto del CTA: sobre las crestas brillantes de la banda el
   parrafo baja de 4,5:1 y deja de cumplir AA. */
.cta .envoltura::before{ content:""; position:absolute; z-index:-1;
  inset:-2.6rem -3rem; border-radius:28px;
  background:radial-gradient(ellipse at 50% 50%,rgba(10,14,20,.90) 0%,
                             rgba(10,14,20,.62) 52%,transparent 76%) }
.cta .envoltura{ position:relative; z-index:2; isolation:isolate }
.cta p{ color:var(--suave); max-width:58ch; margin-inline:auto }

/* ---------------------------------------------------------------- pie */
.pie{ background:var(--fondo); border-top:1px solid var(--borde);
  padding:4rem 0 2rem; font-size:.94rem; color:var(--suave) }
.pie .envoltura{ display:grid; gap:2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) }
.pie h3{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tenue) }
.pie ul{ list-style:none; margin:0; padding:0; line-height:2.1 }
.pie a{ color:var(--suave) }
.pie a:hover{ color:var(--cian) }
.pie .legal{ grid-column:1/-1; border-top:1px solid var(--borde);
  padding-top:1.5rem; margin-top:.6rem; font-size:.85rem; color:var(--tenue) }

/* ---------------------------------------------------------------- responsive */
@media (max-width:900px){
  .nav{ gap:1rem }
  .nav a{ font-size:.78rem }
  .hero{ min-height:auto; padding-bottom:1rem }
  .hero-texto{ margin-top:3.5rem }
}
/* ------------------------------------------------------------- movil
   Aqui habia `\.nav a:not(.boton){ display:none }`: escondia TRES de los
   cuatro enlaces y no ponia nada en su lugar. En un telefono el sitio se
   quedaba con un solo boton y las diez paginas solo se alcanzaban bajando
   hasta el pie.

   No se cambia por un menu de hamburguesa: son tres enlaces cortos que
   caben. Un desplegable exigiria JavaScript, foco atrapado y un boton mas
   que explicar, para esconder algo que entra de sobra en 375 px. */
@media (max-width:620px){
  .barra{ flex-wrap:wrap; row-gap:.9rem }
  .nav{ width:100%; gap:1.15rem; padding-top:0; justify-content:flex-start;
        align-items:center }
  .nav a{ font-size:.72rem; letter-spacing:.03em }
  .nav a.boton{ margin-left:auto }
  .logo-grande{ width:200px }
}

/* Movil estrecho de verdad (iPhone SE y similares). */
@media (max-width:400px){
  .nav{ gap:.85rem }
  .nav a{ font-size:.68rem }
  .nav a.boton{ font-size:.68rem; padding-inline:.7rem }
}

/* ------------------------------------------------- movimiento reducido
   La animacion arranca SIEMPRE, tambien aqui: se pidio expresamente que se
   vea al abrir la pagina. El VUELO de la mariposa es identico para todos —
   sustituirlo por una version corta hacia que quien tiene esta preferencia
   activada de forma permanente no viera nunca la animacion real. Lo que se
   suaviza es el aleteo, el balanceo y la velocidad de la ola. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
}


/* La palabra que ancla el arranque del vuelo. No se decora: solo sirve de
   referencia geometrica para el script. */
#ancla-mariposa{ color:inherit }

/* ------------------------------------------------- subnav de Academia
   Las seis secciones de la Academia son hermanas, no hijas: navegar entre
   ellas por el menu principal obligaria a volver siempre al indice. */
.subnav{ border-bottom:1px solid var(--borde); background:var(--fondo-2);
  position:sticky; top:0; z-index:30 }
.subnav .envoltura{ display:flex; gap:.4rem; overflow-x:auto; padding:.2rem 0 }
.subnav a{ flex:0 0 auto; padding:.9rem 1.1rem; font-size:.86rem; font-weight:600;
  color:var(--suave); border-bottom:2px solid transparent; white-space:nowrap }
.subnav a:hover{ color:var(--texto); text-decoration:none }
.subnav a.aqui{ color:var(--cian); border-bottom-color:var(--cian) }
/* La subnav es sticky, asi que un salto a #contenido dejaba el titular de la
   seccion justo debajo de ella y tapado. Se reserva su alto. */
[id]{ scroll-margin-top:4.5rem }

/* Etiqueta de duracion o nivel dentro de una tarjeta */
.etiqueta{ display:inline-block; margin-bottom:.7rem; padding:.2rem .7rem;
  border:1px solid var(--borde-vivo); border-radius:999px;
  font-size:.74rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--cian) }

/* ==================================================== RUEDA DE DOMINIOS
   Anillo de seis tramos con las tarjetas alrededor. Cada tramo es un elemento
   del SVG, asi que se puede encender desde su tarjeta sin escribir un bucle
   de dibujo ni deteccion de raton. */
.rueda-seccion{ padding-block:5rem 2rem }
.rueda{ position:relative; display:grid;
  grid-template-columns:1fr minmax(300px,400px) 1fr;
  gap:2.4rem; align-items:center }

/* Los hilos van DEBAJO de las tarjetas (z-index 0 contra 1) para que la curva
   se meta bajo el borde en vez de morir a un pixel de el. Y sin
   pointer-events: si no, se comerian el :hover de la tarjeta que cruzan. */
.hilos{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible; z-index:0 }
.hilo{ fill:none; stroke-width:1.5; stroke-dasharray:2 6; stroke-linecap:round;
  opacity:.45; transition:opacity .22s ease, stroke-width .22s ease }
.hilo.activo{ opacity:1; stroke-width:2.5 }
.lado{ display:flex; flex-direction:column; gap:1.5rem }
.lado.der{ text-align:left }

.nodo{ position:relative; z-index:1;
  background:var(--fondo-2); border:1px solid var(--borde);
  border-radius:12px; padding:1.1rem 1.3rem; outline:none;
  display:grid; grid-template-columns:66px 1fr; gap:1rem; align-items:start;
  transition:border-color .22s ease, transform .22s ease, background .22s ease }
.nodo .media{ aspect-ratio:1; border-radius:10px; overflow:hidden;
  background:var(--fondo-3); border:1px solid var(--borde) }
.nodo .media video{ width:100%; height:100%; object-fit:cover; display:block }
.nodo h3{ margin:0 0 .5rem; color:var(--texto); font-size:1.02rem }
.nodo ul{ margin:0; padding-left:1.05rem; color:var(--suave);
  font-size:.9rem; line-height:1.7 }
.nodo li::marker{ color:var(--cian) }

/* Barra lateral de color: la pista visual que ata la tarjeta con su tramo */
.nodo::before{ content:""; position:absolute; top:14%; bottom:14%; width:4px;
  border-radius:4px; background:var(--tono,var(--cian));
  transition:top .22s ease, bottom .22s ease, box-shadow .22s ease }
.nodo.izq::before{ right:-1px }
.nodo.der::before{ left:-1px }

/* Aqui vivia un `::after` con una linea de puntos de ancho fijo colgando del
   borde de la tarjeta. No conectaba nada: solo la fila del medio queda a la
   altura del anillo, asi que las otras cuatro morian en el aire. Un ancho de
   caja no puede alcanzar un punto de una circunferencia. Lo hace .hilos. */

.nodo:hover,.nodo:focus-visible,.nodo.activo{
  border-color:var(--tono,var(--cian)); transform:translateY(-2px);
  background:var(--fondo-3) }
.nodo:hover::before,.nodo:focus-visible::before,.nodo.activo::before{
  top:6%; bottom:6%; box-shadow:0 0 18px -2px var(--tono,var(--cian)) }
.anillo{ position:relative; aspect-ratio:1 }
.anillo svg{ width:100%; height:100%; transform:rotate(-90deg) }
.anillo .pista{ stroke:var(--borde) }
/* `stroke-width` no es el `width` de una caja: es una propiedad de pintado de
   SVG sobre un elemento dentro de un `viewBox` fijo. Engorda el trazo y
   repinta el SVG; no puede reflotar el documento. Y no hay equivalente con
   transform: escalar el circulo cambiaria el radio del anillo, no su grosor. */
.anillo .tramo{ stroke-linecap:butt; transform-origin:center;
  transition:stroke-width .22s ease, filter .22s ease }
.anillo .tramo.activo{ stroke-width:34; filter:brightness(1.35) }

.centro{ position:absolute; inset:22%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:.5rem }
.centro strong{ font-size:clamp(1.2rem,2.2vw,1.7rem); font-weight:600;
  color:var(--cian); letter-spacing:-.02em }
.centro span{ font-size:clamp(.9rem,1.5vw,1.1rem); color:var(--texto);
  line-height:1.35 }

/* Entrada: cada tramo se dibuja desde cero, escalonado. Se activa al entrar
   en pantalla anadiendo .dibuja, no al cargar: si no, nadie lo ve. */
@keyframes sg-trazo{ from{ stroke-dasharray:0 9999 } }
.rueda.dibuja .tramo{
  animation:sg-trazo 900ms cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay:var(--retraso) }

@media (max-width:900px){
  .rueda{ grid-template-columns:1fr; gap:1.6rem }
  .anillo{ order:-1; max-width:320px; margin-inline:auto }
  /* En una sola columna las tarjetas quedan bajo el anillo, no a sus lados:
     no hay recorrido que trazar. */
  .hilos{ display:none }
  .nodo.izq::before,.nodo.der::before{ left:-1px; right:auto }
}
@media (prefers-reduced-motion:reduce){
  html:not(.forzar-movimiento) .rueda.dibuja .tramo{ animation-duration:1800ms }
}


/* =====================================================================
   TRANSFORMACIÓN DIGITAL — la palabra sale de un grafo
   =====================================================================
   El encargo: que el diseño hable de transformación digital con el mismo
   lenguaje de la casa —nodos y aristas, como la ola del fondo y como la
   constelación de ia360.university— pero SIN mariposa y sin el vuelo:
   quieto.

   Va detrás de la última palabra del titular, la que nombra el destino
   («tecnología», «arquitectos», «metamodelos»…). La red es densa a la
   izquierda y se deshace hacia la derecha, así que la palabra parece salir
   de ella: es el grafo el que se convierte en lenguaje.

   El SVG va incrustado como data URI: cero peticiones y cero ficheros
   nuevos. Lo genera un guion con semilla fija, así que la constelación es
   siempre la misma y se puede volver a producir.
   ------------------------------------------------------------------ */

h1 .muta{
  position:relative;
  background:linear-gradient(100deg,
              var(--cian) 0%, #7fd8ff 40%, var(--texto) 80%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* La red, por detrás. Los valores en `em` la atan al tamaño del titular, así
   que escala sola en los tres tamaños sin un `@media` por cada uno. */
h1 .muta::before{
  content:""; position:absolute; z-index:-1;
  inset:-.14em -.30em -.20em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 108' preserveAspectRatio='none'%3E%3Cline x1='325.0' y1='9.2' x2='340.6' y2='25.3' stroke='%2300c2e0' stroke-width='1.1' opacity='0.18'/%3E%3Cline x1='325.0' y1='9.2' x2='304.0' y2='32.6' stroke='%2300c2e0' stroke-width='1.1' opacity='0.21'/%3E%3Cline x1='213.0' y1='70.9' x2='213.0' y2='49.2' stroke='%2300c2e0' stroke-width='1.1' opacity='0.37'/%3E%3Cline x1='213.0' y1='70.9' x2='195.9' y2='86.8' stroke='%2300c2e0' stroke-width='1.1' opacity='0.39'/%3E%3Cline x1='112.7' y1='102.0' x2='127.3' y2='86.1' stroke='%2300c2e0' stroke-width='1.1' opacity='0.52'/%3E%3Cline x1='112.7' y1='102.0' x2='122.8' y2='63.0' stroke='%2300c2e0' stroke-width='1.1' opacity='0.53'/%3E%3Cline x1='357.5' y1='95.6' x2='333.6' y2='90.7' stroke='%2300c2e0' stroke-width='1.1' opacity='0.15'/%3E%3Cline x1='357.5' y1='95.6' x2='386.6' y2='93.1' stroke='%2300c2e0' stroke-width='1.1' opacity='0.11'/%3E%3Cline x1='150.1' y1='9.2' x2='202.9' y2='15.9' stroke='%2300c2e0' stroke-width='1.1' opacity='0.43'/%3E%3Cline x1='150.1' y1='9.2' x2='94.4' y2='16.4' stroke='%2300c2e0' stroke-width='1.1' opacity='0.52'/%3E%3Cline x1='386.6' y1='93.1' x2='383.6' y2='53.6' stroke='%2300c2e0' stroke-width='1.1' opacity='0.10'/%3E%3Cline x1='383.6' y1='53.6' x2='357.4' y2='42.4' stroke='%2300c2e0' stroke-width='1.1' opacity='0.11'/%3E%3Cline x1='383.6' y1='53.6' x2='381.6' y2='20.2' stroke='%2300c2e0' stroke-width='1.1' opacity='0.10'/%3E%3Cline x1='62.2' y1='91.3' x2='112.7' y2='102.0' stroke='%2300c2e0' stroke-width='1.1' opacity='0.58'/%3E%3Cline x1='62.2' y1='91.3' x2='127.3' y2='86.1' stroke='%2300c2e0' stroke-width='1.1' opacity='0.57'/%3E%3Cline x1='357.4' y1='42.4' x2='340.6' y2='25.3' stroke='%2300c2e0' stroke-width='1.1' opacity='0.15'/%3E%3Cline x1='250.7' y1='66.4' x2='259.6' y2='86.2' stroke='%2300c2e0' stroke-width='1.1' opacity='0.30'/%3E%3Cline x1='250.7' y1='66.4' x2='250.8' y2='28.8' stroke='%2300c2e0' stroke-width='1.1' opacity='0.31'/%3E%3Cline x1='94.4' y1='16.4' x2='71.5' y2='14.3' stroke='%2300c2e0' stroke-width='1.1' opacity='0.58'/%3E%3Cline x1='94.4' y1='16.4' x2='122.8' y2='63.0' stroke='%2300c2e0' stroke-width='1.1' opacity='0.54'/%3E%3Cline x1='250.8' y1='28.8' x2='213.0' y2='49.2' stroke='%2300c2e0' stroke-width='1.1' opacity='0.34'/%3E%3Cline x1='333.6' y1='90.7' x2='326.2' y2='60.7' stroke='%2300c2e0' stroke-width='1.1' opacity='0.18'/%3E%3Cline x1='213.0' y1='49.2' x2='202.9' y2='15.9' stroke='%2300c2e0' stroke-width='1.1' opacity='0.38'/%3E%3Cline x1='424.7' y1='40.1' x2='419.7' y2='16.3' stroke='%2300c2e0' stroke-width='1.1' opacity='0.10'/%3E%3Cline x1='424.7' y1='40.1' x2='435.6' y2='73.3' stroke='%2300c2e0' stroke-width='1.1' opacity='0.10'/%3E%3Cline x1='180.8' y1='69.7' x2='195.9' y2='86.8' stroke='%2300c2e0' stroke-width='1.1' opacity='0.41'/%3E%3Cline x1='180.8' y1='69.7' x2='213.0' y2='70.9' stroke='%2300c2e0' stroke-width='1.1' opacity='0.40'/%3E%3Cline x1='304.0' y1='32.6' x2='326.2' y2='60.7' stroke='%2300c2e0' stroke-width='1.1' opacity='0.20'/%3E%3Cline x1='435.6' y1='73.3' x2='386.6' y2='93.1' stroke='%2300c2e0' stroke-width='1.1' opacity='0.10'/%3E%3Cline x1='122.8' y1='63.0' x2='127.3' y2='86.1' stroke='%2300c2e0' stroke-width='1.1' opacity='0.52'/%3E%3Cline x1='326.2' y1='60.7' x2='294.5' y2='73.3' stroke='%2300c2e0' stroke-width='1.1' opacity='0.21'/%3E%3Cline x1='259.6' y1='86.2' x2='294.5' y2='73.3' stroke='%2300c2e0' stroke-width='1.1' opacity='0.27'/%3E%3Cline x1='34.5' y1='16.8' x2='71.5' y2='14.3' stroke='%2300c2e0' stroke-width='1.1' opacity='0.63'/%3E%3Cline x1='34.5' y1='16.8' x2='94.4' y2='16.4' stroke='%2300c2e0' stroke-width='1.1' opacity='0.61'/%3E%3Cline x1='381.6' y1='20.2' x2='357.4' y2='42.4' stroke='%2300c2e0' stroke-width='1.1' opacity='0.12'/%3E%3Cline x1='419.7' y1='16.3' x2='381.6' y2='20.2' stroke='%2300c2e0' stroke-width='1.1' opacity='0.10'/%3E%3Cline x1='202.9' y1='15.9' x2='250.8' y2='28.8' stroke='%2300c2e0' stroke-width='1.1' opacity='0.35'/%3E%3Ccircle cx='325.0' cy='9.2' r='2.1' fill='%237fd8ff' opacity='0.26'/%3E%3Ccircle cx='213.0' cy='70.9' r='2.5' fill='%237fd8ff' opacity='0.52'/%3E%3Ccircle cx='112.7' cy='102.0' r='2.8' fill='%237fd8ff' opacity='0.74'/%3E%3Ccircle cx='357.5' cy='95.6' r='2.0' fill='%237fd8ff' opacity='0.19'/%3E%3Ccircle cx='150.1' cy='9.2' r='2.7' fill='%237fd8ff' opacity='0.66'/%3E%3Ccircle cx='386.6' cy='93.1' r='1.9' fill='%237fd8ff' opacity='0.16'/%3E%3Ccircle cx='383.6' cy='53.6' r='1.9' fill='%237fd8ff' opacity='0.16'/%3E%3Ccircle cx='62.2' cy='91.3' r='3.0' fill='%237fd8ff' opacity='0.86'/%3E%3Ccircle cx='357.4' cy='42.4' r='2.0' fill='%237fd8ff' opacity='0.19'/%3E%3Ccircle cx='250.7' cy='66.4' r='2.3' fill='%237fd8ff' opacity='0.43'/%3E%3Ccircle cx='94.4' cy='16.4' r='2.9' fill='%237fd8ff' opacity='0.79'/%3E%3Ccircle cx='250.8' cy='28.8' r='2.3' fill='%237fd8ff' opacity='0.43'/%3E%3Ccircle cx='333.6' cy='90.7' r='2.1' fill='%237fd8ff' opacity='0.24'/%3E%3Ccircle cx='213.0' cy='49.2' r='2.5' fill='%237fd8ff' opacity='0.52'/%3E%3Ccircle cx='424.7' cy='40.1' r='1.8' fill='%237fd8ff' opacity='0.16'/%3E%3Ccircle cx='180.8' cy='69.7' r='2.6' fill='%237fd8ff' opacity='0.59'/%3E%3Ccircle cx='304.0' cy='32.6' r='2.2' fill='%237fd8ff' opacity='0.31'/%3E%3Ccircle cx='435.6' cy='73.3' r='1.7' fill='%237fd8ff' opacity='0.16'/%3E%3Ccircle cx='122.8' cy='63.0' r='2.8' fill='%237fd8ff' opacity='0.72'/%3E%3Ccircle cx='326.2' cy='60.7' r='2.1' fill='%237fd8ff' opacity='0.26'/%3E%3Ccircle cx='340.6' cy='25.3' r='2.0' fill='%237fd8ff' opacity='0.23'/%3E%3Ccircle cx='259.6' cy='86.2' r='2.3' fill='%237fd8ff' opacity='0.41'/%3E%3Ccircle cx='34.5' cy='16.8' r='3.1' fill='%237fd8ff' opacity='0.92'/%3E%3Ccircle cx='294.5' cy='73.3' r='2.2' fill='%237fd8ff' opacity='0.33'/%3E%3Ccircle cx='381.6' cy='20.2' r='1.9' fill='%237fd8ff' opacity='0.16'/%3E%3Ccircle cx='419.7' cy='16.3' r='1.8' fill='%237fd8ff' opacity='0.16'/%3E%3Ccircle cx='202.9' cy='15.9' r='2.5' fill='%237fd8ff' opacity='0.54'/%3E%3Ccircle cx='127.3' cy='86.1' r='2.8' fill='%237fd8ff' opacity='0.71'/%3E%3Ccircle cx='195.9' cy='86.8' r='2.5' fill='%237fd8ff' opacity='0.55'/%3E%3Ccircle cx='71.5' cy='14.3' r='3.0' fill='%237fd8ff' opacity='0.84'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:100% 100%;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 55%,transparent 92%);
          mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 55%,transparent 92%);
  pointer-events:none;
}

/* En móvil el titular es bastante más pequeño y la red se apelotonaba hasta
   leerse como una mancha: se ajusta el recuadro para que los nodos vuelvan a
   distinguirse como nodos. */
@media (max-width:620px){
  h1 .muta::before{ inset:-.10em -.18em -.14em }
}

/* Quieto, como se pidió: lo único que hace es aparecer una vez — y ni eso si
   la preferencia del sistema dice que no. */
@media (prefers-reduced-motion:no-preference){
  h1 .muta::before{ animation:red-aparece .9s .35s ease-out both }
}
@keyframes red-aparece{ from{ opacity:0 } to{ opacity:1 } }