/* ==========================================================================
   CLIENT LOGIN — LA PUERTA DE RUN (14/9/2026)

   Una pagina sin formulario: las credenciales las emite Rede y el panel
   vive fuera de esta web. Su trabajo es decir donde esta la puerta, como
   se consigue la llave y a quien llamar si no abre.

   LA IDEA

   La corriente recorre el circuito y llega a la tarjeta de acceso. La
   animacion no decora: dice lo que la pagina hace.

   Es el lenguaje que el proyecto ya tiene. El pulso de Rutas lo dejo
   escrito: "si el pulso es una senal electrica que recorre el circuito,
   pasar el raton sobre un paso es ENERGIZAR ese nodo. No encenderlo de
   golpe: cargarlo."

   LA TECNICA, Y POR QUE ESTA

   1. GUION VIAJERO sobre los trazos. Un dash corto con hueco largo y
      stroke-dashoffset animado en bucle. pathLength="100" normaliza cada
      trazo, asi que el dasharray se escribe en porcentaje y no hay que
      medir nada con getTotalLength() ni recalcular al redimensionar.

   2. EL RESPLANDOR con feGaussianBlur + feColorMatrix. El alfa por 19
      menos 9 devuelve el borde duro que el desenfoque se come: sin eso
      es una mancha, no un brillo.

      La region del filtro va ampliada en el marcado. Por defecto es
      x=-10% y=-10% w=120% h=120% y el resplandor se CORTA ahi.

   3. mix-blend-mode: plus-lighter donde la luz se superpone. Es suma
      real de canales --el modelo fisico de la luz-- y por eso parece luz
      y no una capa pegada encima. Soporte 96.36%, Firefox incluido.

   LO QUE NO SE USA, Y POR QUE

   - offset-path para mover particulas: NO es compositable. Se queda en
     el hilo principal y con varias a la vez se nota.
   - WebGPU y los tubos de luz con bloom selectivo: Firefox no lo ha
     implementado. No hay alternativa que degrade bien.
   - feTurbulence: su coste real es asumible --el bug de Firefox se cerro
     en 2021-- pero aqui no aporta nada que el guion viajero no de mas
     barato.

   ACCESIBILIDAD

   Todo el movimiento va dentro de @media (prefers-reduced-motion:
   no-preference). En reposo el circuito se ve entero y quieto: no
   desaparece informacion, solo deja de moverse.

   El bucle dura 4.2s, por debajo de los 5 que activan el criterio 2.2.2
   de WCAG. Y el SVG lleva aria-hidden, aunque eso por si solo NO exime
   de 2.2.2 -- la duracion es lo que lo resuelve.
   ========================================================================== */

/* El token que anima la corriente. Sin @property el navegador no sabe que
   es una longitud y salta del principio al final sin transicion. */
@property --lg-avance {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.d2 .d2-acceso {
  position: relative;
  overflow: hidden;
  /* Fondo oscuro: el circuito necesita contraste para leerse, y ademas
     separa esta pagina del resto del sitio, que es lo correcto para una
     puerta de acceso. */
  background: #111111;
  color: #FFFFFF;
  padding-block: clamp(64px, 8vw, 116px);
  /* Que la pagina llene la ventana aunque el contenido sea corto: sin
     esto el pie sube y queda una franja clara bajo el circuito. */
  min-height: clamp(560px, 78vh, 900px);
  display: flex;
  align-items: center;
}

/* --- EL CIRCUITO -------------------------------------------------------- */

.d2 .d2-acceso__circuito {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Los rieles: el trazado completo, siempre visible y muy tenue. Son la
   ruta por la que va a pasar la corriente. */
.d2 .d2-acceso__riel path {
  fill: none;
  stroke: rgba(255, 255, 255, .09);
  stroke-width: 1.4;
}

/* La corriente. En reposo --sin animacion-- se ve el trazo entero al 22%,
   asi que la pagina nunca queda vacia. */
.d2 .d2-acceso__senal path {
  fill: none;
  stroke: var(--c-verde-marca, #39B54A);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .22;
}

.d2 .d2-acceso__nodo circle {
  fill: #111111;
  stroke: var(--c-verde-marca, #39B54A);
  stroke-width: 1.8;
  opacity: .5;
}

@media (prefers-reduced-motion: no-preference) {
  /* EL GUION VIAJERO

     dasharray "14 86" sobre pathLength 100: un segmento del 14% de la
     ruta y un hueco del 86%. Es una senal corta, no una linea a medias.

     El offset va de 100 a 0 --no al reves-- para que la corriente viaje
     en el sentido en que se dibujo el trazo, que es hacia la tarjeta.

     linear y no una curva: una senal electrica no acelera ni frena. Con
     ease se lee como un objeto moviendose, que es otra cosa. */
  .d2 .d2-acceso__senal path {
    opacity: 1;
    stroke-dasharray: 14 86;
    animation: lg-corriente 4.2s linear infinite;
    /* Cada trazo entra escalonado: el circuito late en vez de parpadear
       los cuatro a la vez. */
    animation-delay: calc(var(--i, 0) * -1.05s);
  }

  /* El nodo se enciende cuando la corriente llega. El retardo lo alinea
     con el final del recorrido de su trazo. */
  .d2 .d2-acceso__nodo circle {
    animation: lg-nodo 4.2s ease-out infinite;
    animation-delay: calc(var(--i, 0) * -1.05s);
  }
}

@keyframes lg-corriente {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@keyframes lg-nodo {
  0%, 62%  { opacity: .35; r: 6; }
  /* El destello es corto y no cambia de tamano bruscamente: medio pixel
     de radio basta para que se lea como un encendido. */
  72%      { opacity: 1;   r: 7; }
  88%, 100% { opacity: .35; r: 6; }
}

/* --- LA REJILLA --------------------------------------------------------- */

.d2 .d2-acceso__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--d2-ancho, 1280px);
  margin-inline: auto;
  padding-inline: var(--d2-gutter, clamp(20px, 4vw, 40px));

  display: grid;
  /* Dos columnas: el argumento a la izquierda, la puerta a la derecha.
     1.05fr / .95fr y no 1fr/1fr: el titular manda el bloque y con columnas
     iguales caia en cuatro lineas. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas:
    "copy  puerta"
    "apoyo puerta";
  align-items: start;
  gap: clamp(28px, 4vw, 64px);
}

.d2 .d2-acceso__copy  { grid-area: copy; }
.d2 .d2-acceso__puerta { grid-area: puerta; }
.d2 .d2-acceso__apoyo { grid-area: apoyo; align-self: end; }

/* --- LA COLUMNA DE ARGUMENTO -------------------------------------------- */

.d2 .d2-acceso .eyebrow {
  /* Sobre este fondo el verde de marca da 7.09:1, muy por encima del
     minimo. Es el verde que identifica a Rede y aqui si se puede usar. */
  color: var(--c-verde-marca, #39B54A);
}

.d2 .d2-acceso__titulo {
  margin: 14px 0 0;
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -.028em;
  font-weight: var(--fw-extrabold, 800);
  color: #FFFFFF;
  text-wrap: balance;
}

.d2 .d2-acceso__lead {
  margin: 20px 0 0;
  max-width: 52ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #D8D8D8;
}

/* --- LA PUERTA ---------------------------------------------------------- */

.d2 .d2-acceso__puerta {
  position: relative;
  padding: clamp(28px, 3vw, 44px);
  background: #FFFFFF;
  border-radius: 6px;
  /* El filete verde arriba: es donde la corriente entra a la tarjeta. */
  border-top: 3px solid var(--c-verde-marca, #39B54A);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  color: var(--c-texto, #333333);
}

/* El halo alrededor de la tarjeta: la energia que ha llegado por el
   circuito. plus-lighter porque la luz SUMA, no tapa: es el modelo
   fisico correcto y por eso no parece una capa pegada encima. */
.d2 .d2-acceso__puerta::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 8px;
  background: radial-gradient(120% 80% at 50% 0%,
    rgba(57, 181, 74, .55), transparent 70%);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .d2 .d2-acceso__puerta::before {
    animation: lg-halo 4.2s ease-in-out infinite;
  }
}

@keyframes lg-halo {
  0%, 55%  { opacity: .35; }
  /* El halo sube cuando la corriente llega, en fase con los nodos. */
  72%      { opacity: 1; }
  92%, 100% { opacity: .35; }
}

/* --- EL SIMBOLO DE ENERGIA ---------------------------------------------- */

.d2 .d2-acceso__marca {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  color: var(--c-verde-hover, #026F00);
}

.d2 .d2-acceso__marca svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.d2 .d2-acceso__aro-base {
  fill: none;
  stroke: rgba(2, 111, 0, .16);
  stroke-width: 3;
}

/* El aro que se carga. dasharray 100 sobre pathLength 100: una vuelta
   completa, y el offset dice cuanto lleva dibujado. */
.d2 .d2-acceso__aro {
  fill: none;
  stroke: var(--c-verde-marca, #39B54A);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  /* Arranca arriba, no a la derecha, que es donde empieza un circulo SVG
     por defecto. */
  transform: rotate(-90deg);
  transform-origin: center;
}

.d2 .d2-acceso__rayo {
  fill: var(--c-verde-hover, #026F00);
}

@media (prefers-reduced-motion: no-preference) {
  /* Se dibuja UNA vez al cargar: es un gesto de bienvenida, no un bucle.
     Un aro girando sin parar seria un indicador de carga, y aqui no hay
     nada cargando. */
  .d2 .d2-acceso__aro {
    animation: lg-aro 1.4s cubic-bezier(.32, .72, 0, 1) .25s both;
  }

  /* El rayo entra cuando el aro se cierra. */
  .d2 .d2-acceso__rayo {
    animation: lg-rayo .5s cubic-bezier(.32, .72, 0, 1) 1.35s both;
  }
}

@keyframes lg-aro {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@keyframes lg-rayo {
  from { opacity: 0; transform: scale(.7); transform-origin: center; }
  to   { opacity: 1; transform: none; }
}

/* --- EL TEXTO DE LA PUERTA ---------------------------------------------- */

.d2 .d2-acceso__eti {
  margin: 0;
  font-size: var(--fs-small, 12px);
  font-weight: var(--fw-bold, 700);
  letter-spacing: var(--ls-eyebrow, .08em);
  text-transform: uppercase;
  /* Dentro de la tarjeta blanca el verde de marca se queda en 2.66:1.
     Aqui va el oscuro, que da 6.41. */
  color: var(--c-verde-hover, #026F00);
}

.d2 .d2-acceso__puerta-titulo {
  margin: 10px 0 0;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: var(--fw-extrabold, 800);
  color: var(--c-texto, #333333);
}

.d2 .d2-acceso__puerta-texto {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--c-texto-cuerpo, #333333);
}

.d2 .d2-acceso__cta {
  width: 100%;
  justify-content: center;
  margin-top: 24px;
}

.d2 .d2-acceso__nota {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-texto-suave, #6B6B6B);
}

/* --- SOPORTE ------------------------------------------------------------ */

.d2 .d2-acceso__apoyo {
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.d2 .d2-acceso__apoyo-eti {
  margin: 0;
  font-size: var(--fs-small, 12px);
  font-weight: var(--fw-bold, 700);
  letter-spacing: var(--ls-eyebrow, .08em);
  text-transform: uppercase;
  color: var(--c-verde-marca, #39B54A);
}

.d2 .d2-acceso__apoyo-texto {
  margin: 10px 0 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: #BFBFBF;
}

.d2 .d2-acceso__vias {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.d2 .d2-acceso__vias a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* 44px de alto: el objetivo tactil de WCAG 2.5.8. Con solo el texto se
     queda en 24 y en movil es dificil de acertar. */
  min-height: 44px;
  font-size: 14.5px;
  font-weight: var(--fw-bold, 700);
  color: #FFFFFF;
  text-decoration: none;
  transition: color .18s ease;
}

.d2 .d2-acceso__vias svg {
  flex: none;
  color: var(--c-verde-marca, #39B54A);
  transition: transform .2s cubic-bezier(.32, .72, 0, 1);
}

.d2 .d2-acceso__vias a:hover,
.d2 .d2-acceso__vias a:focus-visible {
  color: var(--c-verde-marca, #39B54A);
}

.d2 .d2-acceso__vias a:hover svg {
  transform: translateX(2px);
}

/* --- ADAPTACION --------------------------------------------------------- */

@media (max-width: 900px) {
  .d2 .d2-acceso__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "puerta"
      "apoyo";
    gap: 32px;
  }

  .d2 .d2-acceso__apoyo { align-self: auto; }

  /* El circuito se atenua: en una columna los trazos pasan por detras del
     texto y compiten con el. */
  .d2 .d2-acceso__circuito { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  /* Nada se mueve, pero nada desaparece: el circuito se ve entero y el
     aro cerrado. */
  .d2 .d2-acceso__senal path { opacity: .5; }
  .d2 .d2-acceso__nodo circle { opacity: .6; }
  .d2 .d2-acceso__aro { stroke-dashoffset: 0; }
  .d2 .d2-acceso__rayo { opacity: 1; }
  .d2 .d2-acceso__puerta::before { opacity: .6; }
}