/**
 * Seguridad — el control que rodea a la autonomía.
 *
 * La página tiene una sola idea y la repite en cinco formas: algo envuelve al
 * agente. Primero como anillos, después como una política que deja pasar una
 * cosa y no la otra, después como una pausa en el medio de una ejecución,
 * después como un registro de lo que pasó, y al final como dos recintos que no
 * se tocan: lo que envuelve al agente también envuelve los datos.
 *
 * El vocabulario está en `escenas.css` —el mismo que usan Producto y
 * Soluciones—; acá viven solo las composiciones y las tres animaciones que este
 * relato necesita y que ninguna otra página pidió todavía: un anillo que se
 * enciende, un punto que espera y un eje que baja.
 *
 * Ninguna de las escenas habla de certificaciones. Lo que se cuenta es cómo
 * está diseñado el producto, y eso se muestra: no se afirma.
 */

/* --- 1 · Portada: tres capas alrededor del núcleo -------------------------
   Anillos concéntricos, no una lista de garantías: lo que gobierna al agente.
   Son tres porque la página desarrolla tres —permisos, aprobaciones,
   trazabilidad— y el dibujo no promete lo que después nadie explica. Toda la
   geometría cuelga de dos números —el radio del primer anillo y el salto entre
   anillos— y las etiquetas se apoyan en la circunferencia de su propia capa
   con la misma cuenta. Cambiar `--salto` mueve los tres anillos y las tres
   etiquetas juntos; escribir cada posición a mano garantizaba que a la tercera
   corrección una etiqueta quedara flotando lejos de su anillo. */

.seg-capas-escena {
  display: grid;
  place-items: center;
  min-height: 620px;
  /* La portada apoya la escena debajo del titular, y sin este aire el canto del
     lienzo queda pegado al botón. */
  margin-top: clamp(40px, 6vh, 72px);
}

.seg-constelacion {
  --r1: 104px;
  --salto: 78px;
  position: relative;
  width: calc(2 * (var(--r1) + 2 * var(--salto)));
  aspect-ratio: 1;
}

.seg-capa {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid rgba(124, 58, 237, .2);
  border-radius: 50%;
}

/* El tinte se apaga hacia afuera: la capa más cercana al agente es la que más
   pesa, y la profundidad la da eso y no una sombra. */
.seg-capa--1 { width: calc(2 * var(--r1)); border-color: rgba(124, 58, 237, .28); background: radial-gradient(circle, rgba(124, 58, 237, .07), transparent 72%); }
.seg-capa--2 { width: calc(2 * (var(--r1) + var(--salto))); border-color: rgba(124, 58, 237, .22); }
/* La última capa es la traza, y la traza es dato: cian y punteada, como
   `.esc-linea--dato` en todo el sistema. */
.seg-capa--3 { width: calc(2 * (var(--r1) + 2 * var(--salto))); border-color: rgba(8, 145, 178, .18); border-style: dashed; }

.seg-nucleo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  translate: -50% -50%;
}

.seg-nucleo .cara { --cara: 92px; filter: drop-shadow(0 18px 38px rgba(76, 29, 149, .22)); }

/* Cada etiqueta se ancla en el centro de la constelación y se corre hasta un
   punto de su propia circunferencia. Los ángulos van de ciento veinte en
   ciento veinte —arriba, abajo a la derecha, abajo a la izquierda— para que
   ninguna caiga encima de otra: 0,866 y 0,5 son el coseno y el seno de 30°. */
.seg-nombre {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: calc(-50% + var(--dx)) calc(-50% + var(--dy));
  min-height: 30px;
  padding-inline: 11px;
  font-size: 11.5px;
}

.seg-nombre i {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--violet-soft);
}

.seg-capa--3 .seg-nombre i { background: var(--cian); }

.seg-capa--1 .seg-nombre { --dx: 0px; --dy: calc(-1 * var(--r1)); }
.seg-capa--2 .seg-nombre { --dx: calc(.866 * (var(--r1) + var(--salto))); --dy: calc(.5 * (var(--r1) + var(--salto))); }
.seg-capa--3 .seg-nombre { --dx: calc(-.866 * (var(--r1) + 2 * var(--salto))); --dy: calc(.5 * (var(--r1) + 2 * var(--salto))); }

/* --- 2 · La política: llega a uno y no llega al otro ----------------------
   El trazo permitido cruza por detrás del panel de la política —que es opaco— y
   sale del otro lado: eso es "lo revisó y lo dejó pasar" sin una palabra. El
   otro trazo termina en el canto del panel, y su pulso muere ahí.

   Las tarjetas miden en porcentaje, no en píxeles. Es la única forma de que sus
   cantos caigan siempre en la coordenada del `viewBox` donde las líneas los
   esperan: un `min(…, 320px)` desplazaría el canto en cuanto el lienzo se
   angostara y la línea llegaría a treinta píxeles de la tarjeta. */

.seg-limites { min-height: 480px; }

.seg-linea--detenida { stroke: var(--line); stroke-dasharray: 3 6; }

/* El pulso que no pasa no es una alarma: pierde el violeta y el brillo, y se
   apaga contra la política como se apaga un pedido que no correspondía. */
.seg-pulso--frena { stroke: var(--rotulo); filter: none; }

.seg-agente { left: 15%; top: 50%; translate: -50% -50%; }
.seg-agente .cara { --cara: 66px; }
/* El nombre parte en dos renglones a propósito: en una sola línea la caja del
   agente se estira hasta donde arranca la línea y las dos cosas se tocan. */
.seg-agente span { max-width: 9ch; text-align: center; line-height: 1.35; }

.seg-politica {
  left: 44%;
  top: 50%;
  width: 22%;
  translate: -50% -50%;
}

.seg-politica dl { display: grid; gap: 13px; margin: 0; }
.seg-politica dt { color: var(--rotulo); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.seg-politica dd { margin: 4px 0 0; color: var(--tinta-suave); font-size: 13px; line-height: 1.4; }

.seg-tope {
  left: 33%;
  top: 62%;
  width: 2px;
  height: 24px;
  translate: -50% -50%;
  border-radius: 2px;
  background: var(--line);
}

/* En ancho las dos tarjetas flotan sueltas sobre el lienzo; el envoltorio solo
   existe para poder ponerlas lado a lado cuando la escena se recompone. */
.seg-recursos { display: contents; }

.seg-recurso { top: 27%; left: 79%; width: 26%; translate: -50% -50%; }
.seg-bloqueado { top: 73%; }
.seg-recurso b { margin-bottom: 12px; }

/* `.esc-tarjeta p` gana por especificidad sobre `.esc-chip`, así que el chip
   dentro de una tarjeta perdía su medida y su color. Se los devolvemos acá. */
.seg-recurso .esc-chip { font-size: 12.5px; }
.seg-permitido .esc-chip { color: var(--violet-deep); }

.seg-bloqueado {
  border-color: var(--line-soft);
  background: var(--panel-suave);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.seg-bloqueado b,
.seg-bloqueado small,
.seg-bloqueado .esc-chip { color: var(--rotulo); }

.seg-chip--fuera {
  border-color: var(--line-soft);
  background: rgba(255, 255, 255, .6);
  color: var(--rotulo);
  font-weight: 560;
}

/* --- 3 · La pausa humana: cinco momentos sobre un riel --------------------- */

.seg-humano { display: grid; align-items: center; min-height: 300px; padding: clamp(28px, 3.4vw, 56px); }

.seg-momentos {
  --hueco: clamp(12px, 1.6vw, 28px);
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: var(--hueco);
}

/* El riel va del eje de la primera marca al de la última: con cinco columnas
   iguales y cuatro huecos, ese eje está a media columna del borde. La altura es
   la mitad de los 34 px de la marca. */
.seg-momentos .esc-riel {
  left: calc((100% - 4 * var(--hueco)) / 10);
  right: calc((100% - 4 * var(--hueco)) / 10);
  top: 17px;
}

.seg-momento { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; text-align: center; }

.seg-marca {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(124, 58, 237, .3);
  border-radius: 50%;
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(76, 29, 149, .08);
  color: var(--violet-deep);
}

.seg-marca svg { width: 17px; height: 17px; }

/* Esperar no es un estado con color: es la ausencia de uno. Borde punteado y
   gris, y por eso se distingue de los cuatro momentos que sí avanzan. */
.seg-marca--espera { border-style: dashed; border-color: var(--line); background: var(--panel-suave); box-shadow: none; color: var(--rotulo); }
.seg-marca--decide { border-color: rgba(124, 58, 237, .5); background: rgba(124, 58, 237, .09); }

.seg-momento b { font-size: 13.5px; font-weight: 640; letter-spacing: -.015em; }
.seg-momento small { max-width: 24ch; color: var(--muted); font-size: 11.5px; line-height: 1.5; }

/* --- 4 · El registro: una ejecución contada línea por línea ----------------
   Un eje y entradas colgadas de él. No es una tabla: no hay encabezados ni
   columnas que se lean de arriba abajo, se lee de una entrada a la siguiente
   como se lee una bitácora. */

.seg-registro { padding: clamp(26px, 3.4vw, 52px); }

.seg-bitacora { position: relative; }

.seg-eje {
  position: absolute;
  left: 7px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(124, 58, 237, .3) 6%, rgba(124, 58, 237, .3) 94%, transparent);
  transform-origin: top center;
}

.seg-lista { display: grid; margin: 0; padding: 0; list-style: none; }

.seg-entrada {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px clamp(18px, 2vw, 30px);
  padding: 15px 0;
}

.seg-punto {
  width: 9px;
  height: 9px;
  margin: 6px 0 0 2.5px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .12);
}

.seg-punto--dato { background: var(--cian); box-shadow: 0 0 0 4px rgba(8, 145, 178, .12); }
/* La intervención humana se marca con un hueco, no con otro color: es la única
   entrada que no la escribió un agente. */
.seg-punto--humano { background: var(--panel); border: 2px solid var(--violet); box-shadow: 0 0 0 4px rgba(124, 58, 237, .1); }
.seg-punto--fin { background: var(--violet-deep); box-shadow: 0 0 0 5px rgba(124, 58, 237, .16); }

.seg-entrada b { font-size: 14px; font-weight: 640; letter-spacing: -.015em; }
.seg-entrada p { margin: 5px 0 0; max-width: 62ch; color: var(--muted); font-size: 13px; line-height: 1.55; }

.seg-dato {
  align-self: center;
  color: var(--rotulo);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.seg-resumen {
  margin: clamp(26px, 3.4vh, 40px) 0 0;
  padding-top: clamp(22px, 2.8vh, 32px);
  border-top: 1px solid var(--line-soft);
  color: var(--tinta-suave);
  font-size: clamp(14px, 1.2vw, 15.5px);
  line-height: 1.65;
}

/* Las dos cifras del cierre son chips dentro de la entrada final, no prosa: un
   rótulo y un valor que se leen de un vistazo. El costo va en dinero porque en
   dinero se decide; la versión, porque el documento pasó por una vuelta de
   corrección y ésta es la que quedó. */
.seg-cifras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.seg-cifra { gap: 7px; min-height: 30px; padding-inline: 11px; }
.seg-cifra small { color: var(--rotulo); font-size: 9.5px; font-weight: 720; letter-spacing: .12em; text-transform: uppercase; }
.seg-cifra b { color: var(--tinta-suave); font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; }

/* --- 5 · Tus datos: dos recintos y ni una línea entre ellos ----------------
   La escena no dibuja la separación: la deja. Todo lo que conecta algo con
   algo —el hilo que baja del equipo a su conocimiento— vive adentro de cada
   recinto, y el espacio del medio queda vacío a propósito. Dibujar ahí un muro
   o un candado sería afirmar; que no haya nada que cruzar es mostrar. Los dos
   recintos son idénticos porque la paridad es el mensaje: el compartimento que
   tenés vos es el mismo que tiene cualquier otro cliente. */

.seg-datos { padding: clamp(26px, 3.4vw, 52px); }

.seg-recintos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* El hueco del medio es la pieza principal: más ancho que cualquier aire
     interno, para que el vacío se lea como decisión y no como sobrante. */
  gap: clamp(24px, 6vw, 96px);
}

.seg-recinto {
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: clamp(20px, 2.6vw, 32px) clamp(16px, 2.2vw, 28px) clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(124, 58, 237, .22);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 20px 50px rgba(76, 29, 149, .08);
  text-align: center;
}

.seg-recinto-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 2px;
  color: var(--rotulo);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.seg-recinto-rotulo i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--violet-soft); }

.seg-recinto-equipo { display: grid; justify-items: center; gap: 8px; }

/* Dos rostros apenas solapados leen "equipo" sin ocupar el ancho de dos. */
.seg-caras { display: inline-flex; }
.seg-caras .cara { --cara: 46px; }
.seg-caras .cara + .cara { margin-left: -10px; }

.seg-recinto-quien { color: var(--muted); font-size: 12px; font-weight: 560; }

/* El único conector de toda la escena: corto, vertical y adentro del recinto. */
.seg-hilo { width: 1px; height: 22px; background: linear-gradient(180deg, rgba(124, 58, 237, .5), rgba(124, 58, 237, .15)); }

.seg-conocimiento { width: 100%; max-width: 300px; }
.seg-conocimiento b { font-size: 13.5px; }

.seg-llave { margin-top: 2px; min-height: 32px; font-size: 12px; }
.seg-llave svg { flex: none; color: var(--violet-deep); }
/* Los puntos son la credencial: entró una vez, se guardó cifrada y así se
   muestra desde entonces. */
.seg-llave b { color: var(--rotulo); font-weight: 700; letter-spacing: .12em; }

.seg-llave-nota { max-width: 30ch; color: var(--rotulo); font-size: 11px; line-height: 1.5; }

/* --- Movimiento propio de esta página --------------------------------------
   Tres piezas que `escenas.css` no tenía porque ninguna otra página las pidió.

   Van con `animation-name` y compañía en longhand, nunca con el atajo
   `animation:`. El atajo reinicia `animation-delay`, y el escalonado por
   `data-paso` de `escenas.css` —que se carga antes— vive justo en esa
   propiedad: escrito con el atajo, las tres capas entrarían todas juntas. */

.visto .seg-capa {
  animation-name: seg-capa-enciende;
  animation-duration: .95s;
  animation-timing-function: var(--curva-blanda);
  animation-fill-mode: both;
}

.visto .seg-eje {
  animation-name: seg-eje-baja;
  animation-duration: 1.1s;
  animation-timing-function: var(--curva);
  animation-fill-mode: both;
}

/* El punto del riel no cruza de un tirón. Llega a la pausa, entra en la espera
   y se queda quieto un tercio del recorrido antes de que la aprobación lo
   suelte. Con cinco columnas, los ejes de las marcas caen en 0, 25, 50, 75 y
   100 % del riel. */
.visto .seg-riel i {
  animation-name: seg-riel-espera;
  animation-duration: 2.9s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

@keyframes seg-capa-enciende {
  from { opacity: 0; transform: scale(.965); }
  55% {
    opacity: 1;
    border-color: rgba(124, 58, 237, .55);
    box-shadow: 0 0 32px rgba(124, 58, 237, .14), inset 0 0 36px rgba(124, 58, 237, .06);
  }
}

@keyframes seg-eje-baja {
  from { opacity: 0; transform: scaleY(0); }
  18% { opacity: 1; }
}

@keyframes seg-riel-espera {
  from { left: 0; opacity: 0; }
  8% { opacity: 1; }
  20% { left: 25%; }
  30% { left: 50%; }
  62% { left: 50%; }
  74% { left: 75%; }
  92% { opacity: 1; }
  to { left: 100%; opacity: 0; }
}

/* Cinturón y tirantes, igual que en `escenas.css`: si `.visto` llegara alguna
   vez con el sistema pidiendo quietud, una animación frenada dejaría los
   anillos clavados en su primer cuadro —invisibles—. Apagarlas devuelve la
   escena a su estado por defecto, que es el final. */
@media (prefers-reduced-motion: reduce) {
  .visto .seg-capa,
  .visto .seg-eje,
  .visto .seg-riel i { animation: none; }
}

/* --- Escalas ---------------------------------------------------------------
   En pantalla angosta cada escena **se recompone**. La constelación pasa de
   anillos a bandas: el núcleo arriba y tres pastillas cada vez más anchas,
   que es la misma idea vista de canto —cada capa sigue pasando por fuera de la
   anterior—. La política deja de ser un panel que se cruza y pasa a ser una
   puerta por la que se baja, con los dos recursos abajo: a uno le llega la
   bajada entera, al otro se le corta a los pocos píxeles. Los cinco momentos
   dejan de ser una fila para volverse un recorrido vertical, que es como se
   lee un proceso en un teléfono. Y los dos recintos se apilan: siguen sin
   tocarse, ahora uno encima del otro. */

@media (max-width: 1000px) {
  .seg-capas-escena { min-height: 500px; }
  .seg-constelacion { --r1: 86px; --salto: 62px; }

  .seg-limites { min-height: 540px; }
  .seg-agente .cara { --cara: 56px; }
  /* Ensanchar las tarjetas mueve sus cantos hacia adentro y las líneas quedan
     un poco por debajo del canto: como la tarjeta va encima, ese sobrante se
     esconde. Angostarlas dejaría la línea corta, que sí se ve. */
  .seg-politica { width: 26%; }
  .seg-recurso { width: 30%; }
  /* El tope vive en el canto izquierdo de la política, y ese canto se corrió
     dos puntos cuando el panel se ensanchó. */
  .seg-tope { left: 31%; }

  /* Partido en dos, el riel uniría la primera mitad y mentiría sobre la
     segunda. Se retira, y el recorrido se apoya en un eje vertical que las
     marcas interrumpen igual que antes interrumpían el riel. */
  .seg-momentos .esc-riel { display: none; }
  .seg-humano { padding: clamp(24px, 4vw, 40px); }
  .seg-momentos { grid-template-columns: 1fr; gap: 0; }

  .seg-momentos::before {
    position: absolute;
    left: 17px;
    top: 34px;
    bottom: 34px;
    width: 1px;
    background: rgba(124, 58, 237, .26);
    content: "";
  }

  .seg-momento {
    grid-template-columns: 34px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 4px 18px;
    padding: 16px 0;
    text-align: left;
  }
  .seg-momento .seg-marca { grid-row: span 2; }
  .seg-momento small { max-width: 52ch; }
}

@media (max-width: 760px) {
  .esc { border-radius: 26px; }

  .seg-capas-escena {
    min-height: 0;
    padding: clamp(30px, 6vw, 44px) clamp(18px, 4vw, 28px);
  }

  .seg-constelacion {
    width: 100%;
    aspect-ratio: auto;
    display: grid;
    justify-items: center;
    gap: 8px;
  }

  .seg-nucleo { position: static; translate: none; margin-bottom: 12px; }
  .seg-nucleo .cara { --cara: 76px; }

  /* El orden visual lo pone `order`, no el HTML: en ancho conviene que los
     anillos chicos se pinten sobre los grandes, y acá conviene leerlos del
     centro hacia afuera. */
  .seg-capa {
    position: static;
    order: var(--orden);
    width: var(--ancho);
    aspect-ratio: auto;
    min-height: 46px;
    display: grid;
    place-items: center;
    translate: none;
    border-radius: 999px;
  }

  .seg-capa--1 { --ancho: 52%; --orden: 1; }
  .seg-capa--2 { --ancho: 74%; --orden: 2; }
  .seg-capa--3 { --ancho: 100%; --orden: 3; }

  /* Una pastilla dentro de otra pastilla es ruido: adentro de la banda el
     nombre se queda con el punto y el texto. */
  .seg-nombre {
    position: static;
    translate: none;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  .seg-limites {
    display: grid;
    justify-items: center;
    min-height: 0;
    padding: clamp(26px, 6vw, 40px) clamp(18px, 4vw, 26px) clamp(30px, 6vw, 44px);
  }

  .seg-red,
  .seg-tope { display: none; }

  .seg-agente,
  .seg-politica,
  .seg-recurso {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    translate: none;
  }

  .seg-politica { width: 100%; max-width: 420px; margin-top: 44px; }
  .seg-recursos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 44px; }
  .seg-recurso b { font-size: 13px; }
  .seg-recurso .esc-chip { font-size: 11.5px; min-height: 30px; padding-inline: 11px; }

  /* Las bajadas. La del recurso permitido llega hasta la tarjeta; la del otro
     se corta a doce píxeles de la política y termina contra un tope. Es la
     misma frase que en ancho contaba el trazo detenido. */
  .seg-politica::before,
  .seg-permitido::before {
    position: absolute;
    left: 50%;
    top: -36px;
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, transparent, rgba(124, 58, 237, .45));
    content: "";
  }

  .seg-bloqueado::before {
    position: absolute;
    left: 50%;
    top: -36px;
    width: 1px;
    height: 12px;
    background: var(--line);
    content: "";
  }

  .seg-bloqueado::after {
    position: absolute;
    left: 50%;
    top: -22px;
    width: 16px;
    height: 2px;
    translate: -50% 0;
    border-radius: 2px;
    background: var(--line);
    content: "";
  }

  .seg-registro { padding: clamp(24px, 5vw, 36px) clamp(18px, 4vw, 28px); }

  /* El dato de cada entrada baja debajo del texto: en una columna angosta,
     mantenerlo a la derecha le come el ancho a lo que hay que leer. */
  .seg-entrada { grid-template-columns: 14px minmax(0, 1fr); gap: 4px 14px; }
  .seg-dato { grid-column: 2; align-self: start; white-space: normal; }

  /* Los recintos se apilan sin perder el vacío entre ellos: el hueco vertical
     sigue siendo mayor que cualquier aire interno, por la misma razón. */
  .seg-datos { padding: clamp(24px, 5vw, 36px) clamp(18px, 4vw, 28px); }
  .seg-recintos { grid-template-columns: 1fr; gap: 22px; }
  .seg-llave { font-size: 11.5px; }
}