/* =========================================================================
   Sinergis — ESCENA DE DOMINIOS
   La rueda de dominios contada como una secuencia: el titular centrado, el
   anillo solo, los seis dominios de uno en uno con el anillo cambiando de
   sitio, y el aterrizaje en la maqueta de siempre.

   Todo lo mueve el scroll del visitante (js/escena-dominios.js escribe las
   variables --ed-*). Aqui NO hay @keyframes ni transition en nada que el
   guion controle: una animacion CSS avanza con su propio reloj y se
   desincroniza del dedo; ademas quien tiene "movimiento reducido" no veria
   ni un fotograma. Lo que se mueve con el scroll no es animacion: es la
   pagina respondiendo.
   Cero dependencias, corre desde file://
   ========================================================================= */

.escena-dominios{ position:relative; padding:0; margin:0 }

/* ------------------------------------------------------- SIN COSTURA ARRIBA
   El hero y la escena se veian como dos bloques pegados, con una raya
   horizontal entre medias. Dos culpables, los dos literales:

   1. `.hero` trae `border-bottom:1px solid var(--borde)`. Ese borde es
      #1e2836 sobre #0A0E14: una raya clara de un pixel a todo lo ancho. Se
      apaga AQUI y no en estilos.css porque esta hoja solo la carga la
      portada; las demas paginas se quedan como estaban.
   2. El fondo base de la escena tenia un halo azul arriba —un radial anclado
      en `50% -10%`— que encendia justo el canto donde acaba el hero, negro.
      Dos tonos distintos a un pixel de distancia es una costura por mucho que
      la raya desaparezca.

   La solucion no es tapar la juntura con un degradado de fusion: es que la
   juntura no exista. El fondo base nace y muere en `var(--fondo)` puro —el
   mismo negro con el que acaba el hero y con el que empieza la banda de
   cifras— y el color vive solo en el centro, donde el marco ya esta pegado y
   sus bordes quedan fuera de la ventana. */
/* `body .hero` y NO `.hero` a secas. Las dos reglas tenian la misma
   especificidad (0,1,0) y entonces gana la hoja que cargue la ultima. Con
   `sitio.css` movida a `enqueue_block_assets` —para que el editor la viera
   dentro de su iframe— paso a cargar DESPUES que esta, y la raya volvio
   sola, sin que nadie tocara este fichero. Medido el 20-ago-2026.
   Con 0,1,1 gana siempre, cargue cuando cargue. */
body .hero{ border-bottom:0 }

/* La pista es el alto que hay que recorrer. Un marco pegado (100vh) mas un
   tramo de scroll por cada salto del guion. Cambiar el ritmo de la secuencia
   es cambiar --ed-largo, nada mas. */
.ed-pista{
  /* Respaldo para cuando no hay JS. Con JS lo reescribe escena-dominios.js
     con las poses que existen de verdad, asi que anadir o quitar una pose no
     puede dejar la pista corta ni larga.
     --ed-largo es el mando del ritmo: cuanto scroll cuesta cada salto. */
  --ed-tramos: 10;
  --ed-largo: 72vh;
  position:relative;
  height: calc(100vh + var(--ed-tramos) * var(--ed-largo));
}
.ed-marco{
  position:sticky; top:0;
  height:100vh;
  /* Sin min-height. Un marco pegado mas alto que la ventana tiene una franja
     que NO SE PUEDE VER nunca, y medir() reparte el encogido sobre el alto
     del marco, no sobre el visible: a 1280x500 se perdian unos 73 px de
     maqueta por debajo del pliegue. Mas vale una escena apretada que una
     escena con una parte inalcanzable. */
  overflow:hidden;
  isolation:isolate;
  background:var(--fondo);
}
@supports (height: 100svh){
  .ed-marco{ height:100svh }
}

/* ----------------------------------------------------------- los fondos
   Uno por dominio, apilados y encendidos por opacidad. El de abajo (base)
   esta siempre puesto: si todos los demas estan a cero, la escena no se
   queda en negro plano. */
.ed-fondos{ position:absolute; inset:0; z-index:0 }
.ed-fondo{ position:absolute; inset:0; opacity:0 }
.ed-fondo--base{ opacity:1 }

/* Ni un gramo de color en los cantos: los dos radiales se apagan antes de
   llegar arriba y abajo, asi que los bordes del marco son `var(--fondo)`
   exacto. Es lo que hace que la juntura con el hero —y con la banda de
   cifras que viene despues— no se vea. */
.ed-fondo--base{
  background:
    radial-gradient(76% 50% at 50% 52%, rgba(0,65,141,.26), transparent 74%),
    radial-gradient(58% 32% at 50% 74%, rgba(0,194,224,.07), transparent 72%),
    var(--fondo);
}
/* ------------------------------------------------- LOS FONDOS DE DOMINIO
   Seis imagenes generadas en local con ComfyUI (Qwen-Image 2512), una por
   dominio, con el MISMO lenguaje visual y la MISMA semilla:
   `herramientas/generar-fondos-dominios.py`.

   Antes esto eran degradados CSS. Servian para distinguir un dominio de otro,
   pero no decian nada: un resplandor azul no cuenta que estas mirando
   arquitectura empresarial. Ahora el fondo es parte del mensaje —planos
   acotados, tuberias de proceso, bastidores de servidores, un nucleo de
   datos— y de paso llena el hueco que dejaba la escena a los lados de la
   tarjeta.

   El color del dominio sigue llegando como componentes (--tono-rgb) para el
   tinte que ata cada imagen a la paleta de la casa. */
/* La imagen la escribe render.php en --ed-imagen, a partir del
   atributo del bloque. En el sitio estatico estaba escrita en
   esta hoja, y eso hacia imposible cambiar el fondo de un
   dominio desde el admin. */
.ed-fondo[data-dominio]{
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}
.escena-dominios[data-fondos="si"] .ed-fondo[data-dominio]{
  background-image:var(--ed-imagen,none);
}
/* El velo. La imagen es un FONDO, no una ilustracion: sin esto le come el
   contraste al titulo y compite con el anillo. Tres capas —los cantos
   apagados (que ademas le dan al anillo algo contra lo que cortarse), el
   tinte del dominio, y un rebaje general— y la tarjeta encima difumina lo
   que le queda detras con backdrop-filter. */
.ed-fondo[data-dominio]::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,14,20,.95) 0, rgba(10,14,20,.08) 26%,
                            rgba(10,14,20,.08) 74%, rgba(10,14,20,.95) 100%),
    radial-gradient(88% 66% at 50% 50%, rgba(var(--tono-rgb),.24), transparent 74%),
    rgba(10,14,20,.44);
}

/* Las seis URLs cuelgan de `data-fondos="si"`, que pone el JS en el evento
   `load`. Un background-image se descarga en cuanto su elemento existe y es
   visible —la opacidad 0 no lo impide—, asi que sin esta guarda la portada se
   traeria 1,19 MB de fondos que no se ven hasta pantalla y media mas abajo,
   compitiendo con el hero por el ancho de banda. */

/* Vineta: pega los bordes al fondo del sitio para que el anillo se corte
   contra algo, no contra un canto duro. */
.ed-velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 42%, rgba(10,14,20,.55) 88%),
    linear-gradient(180deg, rgba(10,14,20,.55), transparent 18%, transparent 82%, rgba(10,14,20,.55));
}

/* ------------------------------------------------------------- el titular
   Centrado de verdad: rejilla que centra en los dos ejes y texto centrado.
   No es la version de la maqueta final (esa vive dentro de .ed-final y sigue
   alineada a la izquierda, como en el sitio). */
.ed-titulo{
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center; text-align:center;
  padding-inline:6vw; pointer-events:none;
}
.ed-titulo__caja{ max-width:60ch; will-change:transform,opacity }
.ed-titulo p{
  color:var(--suave); font-size:clamp(1rem,1.5vw,1.2rem);
  margin:0 auto; max-width:56ch;
}
/* Parece un h2 y no lo es: el h2 de verdad es el de la maqueta final, y dos
   encabezados con el mismo texto en la misma seccion no son un titular, son
   un titular duplicado. */
.ed-titulo .ed-titulo__h{
  font-size:clamp(2rem,4.4vw,3.4rem); font-weight:600;
  line-height:1.12; letter-spacing:-.022em; color:var(--texto);
  max-width:none; margin:0 0 .55em;
}

/* --------------------------------------------------------------- el anillo
   Caja cuadrada: ancho y alto salen de la MISMA variable, asi que no puede
   ovalarse por mucho que cambie la ventana. Gira solo el SVG; el texto del
   centro se queda derecho. */
.ed-anillo{
  position:absolute; z-index:4;
  left:var(--ed-x,50%); top:var(--ed-y,50%);
  width:var(--ed-d,60vmin); height:var(--ed-d,60vmin);
  margin-left:calc(var(--ed-d,60vmin) / -2);
  margin-top:calc(var(--ed-d,60vmin) / -2);
  opacity:var(--ed-anillo-op,1);
  pointer-events:none;
  /* Sin will-change a proposito. left/top/width/height no los puede animar el
     compositor —cada fotograma hay layout de todos modos— y poner `opacity`
     ahi si promueve el elemento a capa propia: una capa cuyo tamano cambia en
     cada fotograma y hay que reasignar sesenta veces por segundo. El peor
     caso posible para una capa promovida. */
}
.ed-aro{ width:100%; height:100%; display:block;
  transform:rotate(calc(-90deg + var(--ed-giro,0deg))) }
.ed-aro .pista{ stroke:var(--borde) }
.ed-aro .tramo{ stroke-linecap:butt }
.ed-centro{
  position:absolute; inset:24%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.5rem; opacity:var(--ed-centro-op,1);
}
.ed-centro strong{
  font-size:clamp(1.3rem,2.6vw,2.2rem); font-weight:600;
  color:var(--cian); letter-spacing:-.02em; line-height:1.1;
}
.ed-centro span{
  font-size:clamp(.95rem,1.6vw,1.25rem); color:var(--texto); line-height:1.35;
}

/* -------------------------------------------------------------- los paneles
   La caja se coloca con inset (estatico) y se mueve con transform (el guion).
   Separado a proposito: si el JS escribiera tambien la colocacion, un fallo
   de medida dejaria la tarjeta fuera de la pantalla. */
/* Las tarjetas viven en una banda centrada, no en el ancho entero de la
   ventana. En un monitor de 2560 px una tarjeta pegada al 4,5% queda a medio
   kilometro del anillo y la escena se deshace. El anillo SI usa la ventana
   entera: tiene que morder el borde, que es lo que hace que se lea como algo
   que sigue existiendo fuera de la pantalla. */
.ed-paneles{
  position:absolute; top:0; bottom:0; left:50%;
  width:min(93vw,1720px); transform:translateX(-50%);
  z-index:5; pointer-events:none;
}
.ed-panel{ position:absolute; display:flex }
.ed-panel[data-lado="izq"]{
  left:0; top:0; bottom:0; width:min(62%,1120px); align-items:center }
.ed-panel[data-lado="der"]{
  right:0; top:0; bottom:0; width:min(62%,1120px); align-items:center;
  justify-content:flex-end }
/* Al 10% y no al 7%: en las poses verticales el anillo entra por el borde y
   deja mucho menos trazo a la vista que en las laterales. Medido a 1440x900,
   con el anillo en y=.05 y la tarjeta al 7% quedaba una banda vacia de ~245
   px entre los dos —el 27% del alto— frente a los ~160 px de las laterales, y
   la escena se aflojaba justo en esos dos tiempos. Con el anillo a .14/.86 y
   la tarjeta al 10% el hueco baja a ~155 px: los cuatro tiempos respiran
   igual. */
.ed-panel[data-lado="abajo"]{
  left:0; right:0; bottom:10%; align-items:flex-end }
.ed-panel[data-lado="arriba"]{
  left:0; right:0; top:10%; align-items:flex-start }

/* La tarjeta ocupa media pantalla: tiene que pesar como media pantalla. Con
   el tamano anterior (820 px de tope, imagen de 190 y titulo de 1,9rem) se
   leia como una tarjetita perdida en un descampado — mucho sitio para poco.
   Ahora la caja es mas ancha, la imagen mas grande y la tipografia sube un
   escalon entero. El fondo, ademas, ya no esta vacio. */
.ed-panel__caja{
  width:100%;
  display:grid; grid-template-columns:minmax(210px,36%) 1fr;
  gap:2rem; padding:1.9rem;
  border-radius:20px;
  background:linear-gradient(150deg, rgba(18,24,34,.90), rgba(12,17,24,.84));
  border:1px solid var(--borde-vivo);
  box-shadow:0 34px 90px -34px #000;
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  will-change:transform,opacity;
}
.ed-panel__media{
  position:relative; align-self:stretch; min-height:250px;
  border-radius:16px; overflow:hidden;
  background:var(--fondo-3); border:1px solid var(--borde);
}
/* Los iconos se dibujaron para el recuadro de 56 px de la maqueta y traen
   bastante margen alrededor. A 250 px ese margen se ve como un recuadro medio
   vacio. El 1.3 no es a ojo: medido con umbral de luminancia, el objeto ocupa
   entre el 50% y el 67% de su lamina, asi que a 1.3 el mas grande se queda en
   el 87% y NINGUNO llega a cortarse. */
.ed-panel__media video,
.ed-panel__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.3);
}
/* Todo lo que sea TEXTO usa --tono-claro, no --tono.

   El tono crudo del dominio esta pensado para un arco de 26 px de grosor
   sobre negro, no para 13,6 px de letra. Medido contra el panel real (que
   compone a rgb(13,19,27)): infraestructura da 1,75:1, procesos 1,96:1,
   negocio 2,63:1 y empresarial 3,34:1 — cuatro de los seis por debajo del
   4,5:1 que exige WCAG, y 13,6 px en negrita NO cuenta como texto grande.
   --tono-claro es el mismo matiz y la misma saturacion con la luminosidad
   subida hasta pasar de 4,80:1; cada panel lo trae escrito en su `style`.
   La barra de acento y las viñetas van igual: con el tono crudo,
   infraestructura era una barra invisible. */
.ed-panel__texto{
  display:flex; flex-direction:column; justify-content:center;
  border-left:4px solid var(--tono-claro,var(--cian));
  padding-left:1.5rem;
}
.ed-panel__n{
  margin:0 0 .6rem; font-size:.85rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tono-claro,var(--cian));
}
.ed-panel__texto h3{
  margin:0 0 1rem; font-size:clamp(1.5rem,2.6vw,2.4rem);
  font-weight:600; letter-spacing:-.02em; line-height:1.12;
}
.ed-panel__texto ul{
  margin:0; padding-left:1.25rem; color:#c3d2e6;
  font-size:clamp(1rem,1.25vw,1.2rem); line-height:1.9;
}
.ed-panel__texto li::marker{ color:var(--tono-claro,var(--cian)) }

/* En horizontal (anillo arriba o abajo) la tarjeta es ancha y baja: la
   imagen se estrecha y las viñetas pasan a dos columnas para no estirar una
   linea de 120 caracteres. */
.ed-panel[data-lado="arriba"] .ed-panel__caja,
.ed-panel[data-lado="abajo"] .ed-panel__caja{
  grid-template-columns:minmax(180px,22%) 1fr;
}
.ed-panel[data-lado="arriba"] .ed-panel__media,
.ed-panel[data-lado="abajo"] .ed-panel__media{ min-height:210px }
.ed-panel[data-lado="arriba"] .ed-panel__texto ul,
.ed-panel[data-lado="abajo"] .ed-panel__texto ul{
  columns:2; column-gap:2.4rem;
}
.ed-panel[data-lado="arriba"] .ed-panel__texto li,
.ed-panel[data-lado="abajo"] .ed-panel__texto li{
  break-inside:avoid;
}

/* --------------------------------------------------------- la maqueta final
   Es el .rueda de siempre, intacto: mismo HTML, mismas clases, mismos hilos
   que dibuja sitio.js. Aqui solo se aprieta un poco para que quepa entera en
   una pantalla, y se le da una escala uniforme (--ed-ajuste) si aun asi no
   cabe. Uniforme: nunca deforma, solo aleja. */
.ed-final{
  position:absolute; inset:0; z-index:6;
  opacity:var(--ed-final-op,0);
  pointer-events:none;
}
.ed-final[data-tocable="si"]{ pointer-events:auto }

/* Centrado con top/left al 50% y translate(-50%,-50%), NO con
   `display:grid; place-items:center`.

   La rejilla no centra cuando el contenido es mas alto que el marco: la fila
   implicita es `auto`, o sea se dimensiona AL CONTENIDO, y entonces centrar
   dentro de ella no mueve nada. La caja se queda en top 0 y desborda entera
   hacia abajo. Como la escala tiene su origen en el centro de la propia caja,
   el desplazamiento sobrevive al encogido: medido, la maqueta se iba 23 px por
   debajo del recorte del marco a 901x800 —se perdia la ultima viñeta de
   «Información e IA»— mientras arriba sobraban 63 px.

   Con translate(-50%,-50%) el centro de la caja coincide SIEMPRE con el del
   marco, desborde o no, y la escala reparte lo que sobra a partes iguales. */
.ed-final__ajuste{
  position:absolute; top:50%; left:50%; width:100%;
  transform:translate(-50%,-50%) scale(var(--ed-ajuste,1));
  transform-origin:center center;
}
.ed-final .encabezado{ margin-bottom:1.6rem }
.ed-final .encabezado h2{ font-size:clamp(1.6rem,2.9vw,2.3rem); margin-bottom:.45em }
.ed-final .encabezado .guia{ font-size:.98rem; margin:0 }
.ed-final .rueda{ grid-template-columns:1fr minmax(250px,340px) 1fr; gap:1.9rem }
.ed-final .lado{ gap:1.05rem }
.ed-final .nodo{ padding:.85rem 1rem; grid-template-columns:56px 1fr; gap:.85rem }
.ed-final .nodo h3{ font-size:.95rem; margin-bottom:.35rem }
.ed-final .nodo ul{ font-size:.82rem; line-height:1.6 }

/* ------------------------------------------------------------------- movil
   Por debajo de 900 px no hay escena: no hay sitio para que el anillo se
   aparte a un lado, y clavar la pantalla en un movil mientras el dedo empuja
   es la receta del scroll roto. Se cae a la maqueta de siempre, que ya tiene
   su propia version de una columna. */
@media (max-width:900px){
  .ed-pista{ height:auto }
  .ed-marco{ position:static; height:auto; min-height:0; overflow:visible;
    padding-block:3.5rem 2rem }
  /* .ed-fondos entra aqui: en movil no se ve ni uno, y con display:none el
     navegador ni siquiera pide las imagenes. */
  .ed-titulo, .ed-paneles, .ed-anillo, .ed-velo, .ed-fondos{ display:none }
  .ed-final{ position:relative; inset:auto; opacity:1; pointer-events:auto }
  .ed-final__ajuste{ position:static; top:auto; left:auto; transform:none }
  .ed-final .encabezado h2{ font-size:clamp(1.8rem,3.6vw,2.7rem) }
  .ed-final .rueda{ grid-template-columns:1fr; gap:1.6rem }
  .ed-final .nodo{ padding:1.1rem 1.3rem; grid-template-columns:66px 1fr; gap:1rem }
  .ed-final .nodo h3{ font-size:1.02rem }
  .ed-final .nodo ul{ font-size:.9rem; line-height:1.7 }
}

/* Sin JS no hay guion, pero el contenido no puede desaparecer: la maqueta
   final se ve entera y la pista deja de ser un agujero de ocho pantallas.
   El JS pone data-guion="vivo" en cuanto toma el mando. */
.escena-dominios:not([data-guion="vivo"]) .ed-pista{ height:auto }
.escena-dominios:not([data-guion="vivo"]) .ed-marco{
  position:static; height:auto; min-height:0; overflow:visible;
  padding-block:4rem 2rem }
.escena-dominios:not([data-guion="vivo"]) .ed-titulo,
.escena-dominios:not([data-guion="vivo"]) .ed-paneles,
.escena-dominios:not([data-guion="vivo"]) .ed-anillo,
.escena-dominios:not([data-guion="vivo"]) .ed-velo{ display:none }
.escena-dominios:not([data-guion="vivo"]) .ed-final{
  position:relative; inset:auto; opacity:1; pointer-events:auto }
/* Y se repone la colocacion normal. Sin JS la variable nunca se escribe, pero
   si el JS muriera DESPUES de haberla escrito, el respaldo heredaria una
   maqueta encogida y descolocada. El respaldo tiene que valerse solo. */
.escena-dominios:not([data-guion="vivo"]) .ed-final__ajuste{
  position:static; top:auto; left:auto; transform:none }