/* ==========================================================================
   login.css — Pantalla de ingreso (SSO)
   --------------------------------------------------------------------------
   Hoja APARTE de badge.css a propósito. La pantalla de ingreso no comparte el
   layout general (no tiene navbar, usa Layout = null) y así queda aislada de
   cualquier cambio del design system del resto del sistema.

   Prefijo de clases: lg-  (badge.css usa tc-)

   Composición: la pantalla se parte en dos, pero por densidad de luz y no por
   una línea. A la izquierda el mazo de credenciales, que gira al pasar el
   puntero; a la derecha el texto y la única acción.

   OJO con el rojo: aquí se usa #ED1848, que es el del gafete que se publica
   (ver el repo del gafete virtual). badge.css usa #d9043d. Están sin unificar
   a propósito — se decidió que mande el del gafete, porque es el que ve la
   gente. Si algún día se unifican, hay que tocar los dos lados a la vez.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Marca: igual en los dos temas. */
  --lg-rojo:   #ED1848;
  --lg-morado: #6f2e8e;

  --lg-ink:    #1f1f23;
  --lg-ink-2:  #2b2b30;
  --lg-muted:  #6d6d74;
  --lg-faint:  #9a9aa1;
  --lg-fill:   #f2f2f7;
  --lg-card:   #ffffff;
  --lg-hair:   rgba(31, 31, 35, .10);

  --lg-scroll:       rgba(31, 31, 35, .22);
  --lg-scroll-hover: rgba(31, 31, 35, .38);

  /* Fondo: una sola fuente de luz arriba a la derecha. */
  --lg-base:   #f7f7f9;
  --lg-luz:    rgba(88, 86, 98, .14);
  --lg-g1:     #fdfdfe;
  --lg-g2:     #fbfbfc;
  --lg-g3:     #f9f9fb;
  --lg-g4:     #fcfbfc;
  --lg-g5:     #f3f3f6;
  --lg-g6:     #eeeef1;
  --lg-patron: .30;

  --lg-gafete-sombra: 0 1px 2px rgba(40, 40, 46, .05), 0 14px 36px -14px rgba(40, 40, 46, .18);
  --lg-piso:   rgba(40, 40, 46, .11);

  /* La credencial. Su patrón es arte gris sobre blanco: en oscuro hay que
     invertirlo y componerlo en screen, si no queda como un manchón claro.
     Mismo recurso que usa el gafete que se publica (gafete.css). */
  --lg-gafete-bg:     #ffffff;
  --lg-carnet-bg:     #ffffff;
  --lg-gafete-ink:    #2b2b30;
  --lg-gafete-sub:    #97979e;
  --lg-ranura-bg:     #e4e4e8;
  --lg-ranura-inset:  rgba(40, 40, 46, .20);
  --lg-patron-op:     .58;
  --lg-patron-filtro: none;
  --lg-patron-blend:  multiply;
  --lg-valores-filtro: none;

  /* El botón principal se invierte con el tema: no puede colgar de --lg-ink,
     porque ese token se aclara en oscuro y dejaría texto blanco sobre claro. */
  --lg-cta-bg:        #1f1f23;
  --lg-cta-ink:       #ffffff;
  --lg-cta-sombra:    0 1px 2px rgba(31,31,35,.20), 0 10px 30px -12px rgba(31,31,35,.52);
  --lg-cta-hover-bg:  var(--lg-rojo);
  --lg-cta-hover-ink: #ffffff;
  --lg-cta-hover-sombra: 0 2px 4px rgba(237,24,72,.22), 0 18px 40px -14px rgba(237,24,72,.55);

  --lg-fill-hover: #e8e8ed;
  --lg-aviso-ink:  #8a5a00;

  /*
    Los tres módulos. Cada uno tiene su color y no cambia nunca, que es la regla
    del sistema: el ojo aprende el color antes que la palabra.

    Los papeles salen del brief y no del gusto — ROJO para la entidad principal,
    MOSTAZA para lo que vence o queda pendiente (certificaciones), MORADO para
    lo informativo y de navegación (gafetes).

    El tinte va al 10-18 % y la tinta al color pleno. Ojo con el mostaza: #fdb813
    sobre blanco no alcanza contraste para un trazo de 1.8, así que el ícono usa
    una versión quemada del mismo tono y el tinte se queda con el original.
  */
  --lg-mod-emp-bg:  rgba(237, 24, 72, .10);
  --lg-mod-emp-ink: #ED1848;
  --lg-mod-cert-bg: rgba(253, 184, 19, .18);
  --lg-mod-cert-ink:#a97505;
  --lg-mod-gaf-bg:  rgba(111, 46, 142, .11);
  --lg-mod-gaf-ink: #6f2e8e;

  /*
    Minigafetes del fondo. El reparto de fuerza importa más que los valores:
    la tarjeta —cuerpo, sombra y filo— tiene que pesar más que la franja de
    color, si no la pieza se lee como una barrita de color y no como una
    credencial. Por eso el cuerpo va casi sólido y el color muy bajo (ver la
    opacidad de .lg-mini::before), y la pieza entera se atenúa una sola vez
    con --lg-mini-op en lugar de aguar cada capa por su lado.
  */
  /*
    El cuerpo va en degradado, no en un plano: es lo que reemplaza al contorno.
    Una tarjeta de verdad nunca se recorta contra el fondo con una raya, se
    separa porque su cara toma la luz distinto. Aquí baja de blanco a un gris
    apenas más oscuro y con eso ya tiene cara.
  */
  --lg-mini-papel-a: #ffffff;
  --lg-mini-papel-b: #eeeef4;

  /* En claro no se dibuja ningún canto: sobre papel blanco, una línea de luz no
     existe y se ve como un trazo. En oscuro sí (ver el bloque del tema). */
  --lg-mini-luz:     transparent;

  --lg-mini-ranura:  rgba(31, 31, 35, .20);
  --lg-mini-linea:   rgba(31, 31, 35, .13);
  --lg-mini-foto:    rgba(31, 31, 35, .17);
  --lg-mini-op:      .8;

  /* Tres capas: contacto, apoyo y difusa. La primera es la que hace de borde
     —marca dónde termina la tarjeta— sin necesidad de dibujar ninguna línea. */
  --lg-mini-sombra:
    0 1px 1.5px rgba(40, 40, 46, .11),
    0 4px 10px -4px rgba(40, 40, 46, .15),
    0 16px 28px -16px rgba(40, 40, 46, .26);

  --lg-ease:   cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --lg-ink:    #f4f2f7;
    --lg-ink-2:  #e2dfe8;
    --lg-muted:  #a49dae;
    --lg-faint:  #857e90;
    --lg-fill:   #262230;
    --lg-card:   #1c1a22;
    --lg-hair:   rgba(255, 255, 255, .12);

    --lg-scroll:       rgba(255, 255, 255, .16);
    --lg-scroll-hover: rgba(255, 255, 255, .30);

    --lg-base:   #131118;
    --lg-luz:    rgba(255, 252, 253, .11);
    --lg-g1:     #24202c;
    --lg-g2:     #201d28;
    --lg-g3:     #1b1823;
    --lg-g4:     #17151e;
    --lg-g5:     #141219;
    --lg-g6:     #100e15;
    --lg-patron: .12;

    --lg-gafete-sombra: 0 1px 2px rgba(0, 0, 0, .40), 0 18px 44px -14px rgba(0, 0, 0, .62);
    --lg-piso:   rgba(0, 0, 0, .40);

    --lg-gafete-bg:     #1d1b26;
    --lg-carnet-bg:     #dbdbdb;
    --lg-gafete-ink:    #ece9f2;
    --lg-gafete-sub:    #8d879a;
    --lg-ranura-bg:     #100e15;
    --lg-ranura-inset:  rgba(0, 0, 0, .70);
    --lg-patron-op:     .30;
    --lg-patron-filtro: invert(1);
    --lg-patron-blend:  screen;
    --lg-valores-filtro: brightness(.86) saturate(1.05);

    /* El botón se invierte, como en claro pero al revés: papel casi blanco y tinta
       casi negra. Y al pasar el puntero toma el color de marca, que es el mismo
       gesto de la versión clara — solo que acá el rojo pleno no sirve de relleno
       (sobre él ningún texto llega al contraste que pide un cuerpo de 15 px), así
       que entra el rosa de marca, que es el rojo subido de luminosidad y ya vive en
       este tema como tinta del acento.

       Estuvo en dorado champagne. Se leía bien, pero ponía un bloque mostaza de
       200 px en la única acción de la pantalla, y en este sistema el mostaza
       significa "por vencer": el ojo lo lee como aviso antes que como botón. */
    --lg-cta-bg:        #f0edf4;
    --lg-cta-ink:       #17151d;
    --lg-cta-sombra:    0 1px 2px rgba(0,0,0,.34), 0 10px 30px -12px rgba(0,0,0,.55);
    --lg-cta-hover-bg:  #ff8ba7;
    --lg-cta-hover-ink: #2a0512;
    --lg-cta-hover-sombra: 0 2px 4px rgba(0,0,0,.30), 0 18px 40px -14px rgba(255,139,167,.42);

    --lg-fill-hover: #322d3c;
    --lg-aviso-ink:  #f5c451;

    /* Los mismos tres colores, subidos de luminosidad: los plenos de marca sobre
       una tarjeta oscura se ven como manchas y el trazo se pierde. */
    --lg-mod-emp-bg:  rgba(237, 24, 72, .17);
    --lg-mod-emp-ink: #ff6b88;
    --lg-mod-cert-bg: rgba(253, 184, 19, .15);
    --lg-mod-cert-ink:#f5c451;
    --lg-mod-gaf-bg:  rgba(160, 113, 196, .18);
    --lg-mod-gaf-ink: #c197de;

    /* En oscuro el papel se vuelve luz: un blanco muy bajo, no un gris sólido
       —una tarjeta clara del tamaño de estas se leería como suciedad. El filo
       es el que dibuja la silueta, porque la sombra casi no se ve sobre negro. */
    --lg-mini-papel-a: rgba(255, 255, 255, .115);
    --lg-mini-papel-b: rgba(255, 255, 255, .042);
    --lg-mini-luz:     rgba(255, 255, 255, .14);
    --lg-mini-ranura:  rgba(255, 255, 255, .24);
    --lg-mini-linea:   rgba(255, 255, 255, .17);
    --lg-mini-foto:    rgba(255, 255, 255, .22);
    --lg-mini-op:      .82;
    --lg-mini-sombra:
      0 1px 2px rgba(0, 0, 0, .26),
      0 4px 10px -4px rgba(0, 0, 0, .34),
      0 16px 28px -16px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --lg-ink:    #f4f2f7;
  --lg-ink-2:  #e2dfe8;
  --lg-muted:  #a49dae;
  --lg-faint:  #857e90;
  --lg-fill:   #262230;
  --lg-card:   #1c1a22;
  --lg-hair:   rgba(255, 255, 255, .12);

  --lg-scroll:       rgba(255, 255, 255, .16);
  --lg-scroll-hover: rgba(255, 255, 255, .30);

  --lg-base:   #131118;
  --lg-luz:    rgba(255, 252, 253, .11);
  --lg-g1:     #24202c;
  --lg-g2:     #201d28;
  --lg-g3:     #1b1823;
  --lg-g4:     #17151e;
  --lg-g5:     #141219;
  --lg-g6:     #100e15;
  --lg-patron: .12;

  --lg-gafete-sombra: 0 1px 2px rgba(0, 0, 0, .40), 0 18px 44px -14px rgba(0, 0, 0, .62);
  --lg-piso:   rgba(0, 0, 0, .40);

  --lg-gafete-bg:     #1d1b26;
  --lg-carnet-bg:     #dbdbdb;
  --lg-gafete-ink:    #ece9f2;
  --lg-gafete-sub:    #8d879a;
  --lg-ranura-bg:     #100e15;
  --lg-ranura-inset:  rgba(0, 0, 0, .70);
  --lg-patron-op:     .30;
  --lg-patron-filtro: invert(1);
  --lg-patron-blend:  screen;
  --lg-valores-filtro: brightness(.86) saturate(1.05);

  --lg-cta-bg:        #f0edf4;
  --lg-cta-ink:       #17151d;
  --lg-cta-sombra:    0 1px 2px rgba(0,0,0,.34), 0 10px 30px -12px rgba(0,0,0,.55);
  --lg-cta-hover-bg:  #ff8ba7;
  --lg-cta-hover-ink: #2a0512;
  --lg-cta-hover-sombra: 0 2px 4px rgba(0,0,0,.30), 0 18px 40px -14px rgba(255,139,167,.42);

  --lg-fill-hover: #322d3c;
  --lg-aviso-ink:  #f5c451;

  --lg-mod-emp-bg:  rgba(237, 24, 72, .17);
  --lg-mod-emp-ink: #ff6b88;
  --lg-mod-cert-bg: rgba(253, 184, 19, .15);
  --lg-mod-cert-ink:#f5c451;
  --lg-mod-gaf-bg:  rgba(160, 113, 196, .18);
  --lg-mod-gaf-ink: #c197de;

  --lg-mini-papel-a: rgba(255, 255, 255, .115);
  --lg-mini-papel-b: rgba(255, 255, 255, .042);
  --lg-mini-luz:     rgba(255, 255, 255, .14);
  --lg-mini-ranura:  rgba(255, 255, 255, .24);
  --lg-mini-linea:   rgba(255, 255, 255, .17);
  --lg-mini-foto:    rgba(255, 255, 255, .22);
  --lg-mini-op:      .82;
  --lg-mini-sombra:
    0 1px 2px rgba(0, 0, 0, .26),
    0 4px 10px -4px rgba(0, 0, 0, .34),
    0 16px 28px -16px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  background: var(--lg-base);
  color: var(--lg-ink);
  -webkit-font-smoothing: antialiased;
}

/* ===== Escena ============================================================ */

/*
  Alto fijo y no mínimo: la pantalla de ingreso no se desplaza.

  Con min-height la rejilla crece con su contenido, y desde que la columna derecha
  ganó la lista de módulos eso alcanzaba para pasarse de la ventana y sacar una
  barra de desplazamiento por unos pocos píxeles. Un ingreso que se desplaza se ve
  roto: no hay nada abajo que valga la pena buscar.

  Fijarlo obliga a decidir qué pasa si el contenido no cabe, y la respuesta está en
  .lg-der, que se desplaza por dentro. Así lo que se mueve es la columna del texto
  y nunca la escena entera con el mazo.

  dvh primero para los navegadores que lo entienden —en móvil 100vh incluye la
  franja de la barra del navegador y deja la pantalla más alta de lo que se ve—, con
  vh de respaldo antes por si no.
*/
.lg-esc {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  overflow: hidden;
}

/*
  UNA sola fuente de luz para toda la escena, arriba a la derecha, con el rojo
  naciendo de ella. Tener varios focos —uno por mitad— hacía que las dos partes
  se leyeran como paneles distintos aunque no hubiera ninguna línea entre ellas.

  El radial mide más que el lienzo (150% x 130%) y su centro cae fuera de la
  pantalla, para que ninguna de sus paradas quede a la vista como un anillo.
*/
.lg-esc::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(44% 38% at 102% -12%, var(--lg-luz), transparent 64%),
    radial-gradient(150% 130% at 86% -18%,
      var(--lg-g1) 0%,
      var(--lg-g2) 12%,
      var(--lg-g3) 28%,
      var(--lg-g4) 46%,
      var(--lg-g5) 66%,
      var(--lg-g6) 100%);
  pointer-events: none;
}

/*
  El patrón de la marca al 190 % de escala: a ese tamaño la T se lee como
  textura y no como dibujo, así que no compite con el patrón del gafete, que es
  el mismo arte pero mucho más chico. La máscara lo mantiene en la mitad derecha
  y lo apaga del todo detrás del mazo.

  Va en ::after y no como otra capa del background de ::before porque necesita
  su propia opacidad y su propia máscara, y eso no se puede aplicar a una capa
  suelta dentro de un background múltiple.
*/
.lg-esc::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background-image: url("../img/fondo-telecable-patron.jpg");

  /* Igual que en badge.css: cover es la base segura —la imagen es apaisada
     (1200×675) y con el alto en auto dejaba un hueco sin patrón en cualquier
     pantalla más alta que ancha— y el 190 % vuelve en apaisado, más abajo. */
  background-size: cover;
  background-position: 82% 30%;
  background-repeat: no-repeat;
  opacity: var(--lg-patron);
  -webkit-mask-image: linear-gradient(118deg, transparent 6%, rgba(0,0,0,.45) 44%, rgba(0,0,0,.9) 88%);
  mask-image: linear-gradient(118deg, transparent 6%, rgba(0,0,0,.45) 44%, rgba(0,0,0,.9) 88%);
  pointer-events: none;
}

/* En apaisado el patrón recupera su escala grande. */
@media (min-aspect-ratio: 1/1) {
  .lg-esc::after { background-size: 190% auto; }
}

/* z-index explícito: los pseudo-elementos no son hijos, así que sin esto el
   ::after se pintaría por encima del gafete y del texto. */
.lg-esc > * { position: relative; z-index: 1; }

.lg-izq { display: grid; place-items: center; padding: clamp(20px, 3vw, 56px); }

/* min-height: 0 y overflow: si en una ventana muy baja el texto no cabe, se
   desplaza ESTA columna y no la página. Sin el min-height no serviría de nada: un
   elemento de rejilla arranca en min-height auto y crece con su contenido en vez
   de recortarlo. */
.lg-der {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 68px) clamp(26px, 5.2vw, 88px);
  min-height: 0;
  overflow-y: auto;
}

/* ===== Barra de desplazamiento ===========================================
   La misma pieza que en badge.css, repetida acá porque el ingreso no carga
   esa hoja: fina, sin riel y con el pulgar separado del borde. Los colores
   salen de las variables del propio login, que ya tiene su claro y oscuro. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--lg-scroll) transparent;
  }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-button { display: none; }

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }

::-webkit-scrollbar-thumb {
  background-color: var(--lg-scroll);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  transition: background-color .22s var(--lg-ease);
}

::-webkit-scrollbar-thumb:hover { background-color: var(--lg-scroll-hover); }

/* ===== Columna derecha =================================================== */

.lg-marca { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lg-marca-id { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.lg-marca-id img { width: 88px; height: auto; display: block; }

.lg-marca-et {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lg-faint); white-space: nowrap;
}

.lg-hero { max-width: 34rem; }

/* Único eco del rojo fuera del gafete, además del titular. */
.lg-eyebrow {
  margin: 0 0 20px; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--lg-rojo);
}

.lg-titulo {
  margin: 0;
  font-size: clamp(2.1rem, 4.2vw, 4rem);
  font-weight: 600; line-height: 1.04; letter-spacing: -.038em;
  color: var(--lg-ink); text-wrap: balance;
}

/* Igual que el login de PMO: solo una parte del titular lleva color, recortado
   sobre el texto mismo. Un titular entero en color de marca se lee como banner.
   El color de respaldo cubre a los navegadores que no recortan el fondo. */
.lg-titulo em {
  font-style: normal;
  color: var(--lg-rojo);
  background: linear-gradient(90deg, #ED1848 0%, #E39A0B 52%, #6f2e8e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lg-sub {
  margin: clamp(18px, 2vw, 28px) 0 0; max-width: 40ch;
  font-size: clamp(1rem, 1.15vw, 1.16rem); line-height: 1.6; color: var(--lg-muted);
}

/* Aviso de sesión vencida (llega desde /Account/Login?expirada=1). */
.lg-aviso {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 38ch; margin: 22px 0 0;
  padding: 12px 15px; border-radius: 14px;
  background: var(--lg-card);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), inset 3px 0 0 #fdb813;
  font-size: 13px; line-height: 1.45; color: var(--lg-aviso-ink);
}

.lg-aviso i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ===== Los tres módulos ================================================== */

/*
  Lista inset agrupada, el patrón de Ajustes de iOS: una tarjeta con filas
  adentro y el separador arrancando después del ícono, nunca de borde a borde.

  Sin chevron y sin hover: estas filas no llevan a ninguna parte —antes de
  entrar no hay a dónde ir—, y en iOS el chevron es la promesa de un toque. Es
  una lista que informa, no un menú.
*/
.lg-modulos {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 27rem;
  border-radius: 18px;
  background: var(--lg-card);
  box-shadow: 0 1px 2px rgba(40, 40, 46, .05), 0 14px 34px -20px rgba(40, 40, 46, .30);
  overflow: hidden;
}

.lg-modulo {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 12px 16px;
}

/* El separador arranca a la altura del texto: 16 de sangría + 34 de ícono + 13
   de hueco. Si tocara el borde izquierdo, la lista dejaría de leerse como un
   bloque y pasarían a verse tres tarjetas apiladas. */
.lg-modulo + .lg-modulo::before {
  content: "";
  position: absolute; top: 0; left: 63px; right: 0;
  height: 1px; background: var(--lg-hair);
}

/* Squircle: radio 11 sobre 34 px es la proporción de un ícono de app. */
.lg-modulo-icono {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
}

.lg-modulo-icono svg { width: 19px; height: 19px; display: block; }

.lg-modulo-icono.emp  { background: var(--lg-mod-emp-bg);  color: var(--lg-mod-emp-ink); }
.lg-modulo-icono.cert { background: var(--lg-mod-cert-bg); color: var(--lg-mod-cert-ink); }
.lg-modulo-icono.gaf  { background: var(--lg-mod-gaf-bg);  color: var(--lg-mod-gaf-ink); }

.lg-modulo-txt { min-width: 0; }

.lg-modulo b {
  display: block;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.012em;
  color: var(--lg-ink); line-height: 1.25;
}

.lg-modulo small {
  display: block; margin-top: 1px;
  font-size: 12.5px; line-height: 1.35; color: var(--lg-faint);
}

.lg-acciones { margin-top: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* Oscuro y no rojo: la curva del gafete ya es un bloque de rojo grande y dos
   rojos a un palmo se pelean. Toma el rojo al pasar el puntero, que es el único
   momento en que hace falta. */
.lg-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 28px; border: 0; border-radius: 999px;
  background: var(--lg-cta-bg); color: var(--lg-cta-ink);
  font: inherit; font-size: .98rem; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--lg-cta-sombra);
  transition: background .35s var(--lg-ease), transform .35s var(--lg-ease), box-shadow .35s var(--lg-ease);
}

.lg-cta:hover {
  background: var(--lg-cta-hover-bg);
  color: var(--lg-cta-hover-ink);
  transform: translateY(-2px);
  box-shadow: var(--lg-cta-hover-sombra);
}

.lg-cta:active { transform: translateY(0); }
.lg-cta:focus-visible { outline: 2px solid var(--lg-rojo); outline-offset: 3px; }
.lg-cta.is-loading { pointer-events: none; opacity: .78; }

.lg-cta i { transition: transform .35s var(--lg-ease); }
.lg-cta:hover i { transform: translateX(4px); }

/* El aro toma la tinta del botón y no un blanco fijo: desde que el botón se
   invierte con el tema, un spinner blanco desaparecía sobre el papel claro del modo
   oscuro. El anillo de fondo va en un gris neutro, que funciona sobre los dos. */
.lg-spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(127,127,127,.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: lg-girar .7s linear infinite;
}

.lg-nota { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: .8rem; color: var(--lg-faint); }

/* ===== Gafo, asomado por la esquina del botón ============================

   La mascota (dibujo en _GafoSimbolos.cshtml) asomándose por detrás de la
   esquina derecha del CTA, inclinada hacia él y saludando. Las reglas de Gafo
   vuelven a escribirse acá, con prefijo lg-, porque el ingreso no carga
   badge.css.

   Diferencia con el riel del layout: allá está partido en dos capas para
   agarrarse del borde de la credencial; acá es un SVG entero.

   La escena: Gafo está ESCONDIDO DENTRO del botón y se inclina hacia afuera
   para asomar la cara por el canto derecho. No está posado encima del pill ni
   parado al lado: sale de él. Las cuatro decisiones que arman esa lectura van
   juntas y hay que moverlas juntas:

     · z-index 0, debajo del botón. Es lo que lo esconde: el pill le tapa
       más de la mitad del cuerpo, y eso es el escondite. Sin esto no hay
       nada de dónde asomarse.
     · right ≈ −0.78 del lado: casi todo el dibujo sale del canto derecho, que
       es lo que deja ver la cara entera —con menos, el filo la parte por la
       mitad—. Lo que alcanza el botón no es el cuerpo sino el brazo, que por
       eso va estirado (ver #gafo-brazo-alzado-i): el canto derecho del pill es
       una semicircunferencia y a la altura del hombro ya se metió unos 9 px
       hacia la izquierda respecto de su punto más saliente, así que una mano
       pegada al cuerpo queda en ese hueco, flotando al lado del botón sin
       tocarlo. Estirar el brazo resuelve el agarre sin tener que hundir a
       Gafo, que era el otro camino y costaba la cara.
     · top ≈ −0.30 del lado: el cuerpo vive a la altura del botón —ahí es
       donde el pill lo tapa— y lo único que sobresale por arriba es el
       cordón. Si sube más, se asoma por encima del botón en vez de por el
       costado, que es otra escena.
     · la inclinación a la DERECHA (ver el ladeo, más abajo): es el gesto.
       Un cuerpo vertical apenas descubierto por el borde parece a medio
       tapar; el mismo cuerpo ladeado hacia afuera se lee como alguien que
       se asoma.

   Las medidas van en fracción del lado y no en píxeles fijos: así la escena
   se mantiene igual si cambia el tamaño.

   62 px, un poco más que el alto del botón (unos 52) y bastante más que los
   56 del riel: a 56 la cara —un tercio del dibujo— quedaba en 18 px y la
   sonrisa se empastaba. Más grande empieza a pesar más que la acción de la
   que se asoma.

   A la derecha: la esquina libre. Del lado izquierdo empieza el texto del
   botón y Gafo le caería encima. */
.lg-cta-wrap {
  --lg-gafo-lado: 62px;
  --lg-gafo-derecha: calc(var(--lg-gafo-lado) * -.78);   /* lo que asoma; el resto queda tapado */
  position: relative;
  display: inline-flex;
}

.lg-cta { position: relative; z-index: 1; }

/* Las dos capas comparten TODO menos el z-index: la misma caja, el mismo
   tamaño y el mismo sitio. Es lo que garantiza que la manita de adelante caiga
   donde termina el brazo de atrás. Si se toca una medida acá, se toca para las
   dos a la vez, que es justamente la idea. */
.lg-gafo {
  position: absolute;
  right: var(--lg-gafo-derecha);
  top: calc(var(--lg-gafo-lado) * -.26);
  width: var(--lg-gafo-lado);
  height: var(--lg-gafo-lado);
  overflow: visible;          /* el brazo que saluda se sale de la caja */
  pointer-events: none;       /* el botón de al lado no pierde un solo píxel de área */
  transition: transform .35s var(--lg-ease);

  /* La sombra es lo que lo despega del fondo. Va en el filtro y no en un
     box-shadow porque tiene que seguir la silueta del dibujo, no su caja. En la
     capa de la mano es la que la levanta del pill: sin ella la manita se lee
     como un dibujo estampado en el botón y no como algo apoyado encima. */
  filter: drop-shadow(0 3px 6px rgba(20, 18, 26, .22));
}

.lg-gafo--cuerpo { z-index: 0; }   /* detrás del botón: ahí es donde se esconde */
.lg-gafo--manos  { z-index: 2; }   /* .lg-cta va en 1 */

/* Se levanta con el botón: está agarrado de él, y si el CTA sube 2 px al pasar
   el puntero y Gafo se queda, la manita se despega del canto. */
.lg-cta-wrap:hover .lg-gafo,
.lg-cta-wrap:focus-within .lg-gafo { transform: translateY(-2px); }

.lg-cta-wrap:active .lg-gafo { transform: none; }   /* y baja con él al presionarlo */

/* El gesto de asomarse: ladeado 14° hacia la DERECHA, hacia afuera del botón.
   Un cuerpo derecho apenas descubierto por el borde se lee como algo a medio
   tapar; el mismo cuerpo ladeado hacia afuera se lee como alguien que se asoma.

   Gira desde la manita (11, 44), la que está agarrada del filo. Es
   el punto del que cuelga, y por eso es el pivote: el cuerpo pende de ahí y se
   va hacia afuera, que es como se ladea algo colgado de una mano. Con el
   origen abajo el cuerpo se apoyaba en su propio pie —otra escena— y con el
   origen en el centro parecía un dibujo rotando.

   La regla la comparten las DOS capas —el cuerpo y la manita de adelante— y
   por eso es la misma clase en las dos: cualquier diferencia entre ellas
   despega la mano del brazo.

   Fija y sin balanceo, a diferencia del riel. Allá Gafo cuelga y mecerse es su
   peso; acá está agarrado del filo del botón, y una cosa agarrada no se
   bambolea. Además el vaivén tendría que correr idéntico en las dos capas para
   no partirlo en dos, y la quietud sale gratis. */
.lg-gafo-cuerpo {
  transform-box: view-box;
  transform-origin: 11px 44px;
  transform: rotate(14deg);
}

/* El saludo, cuando le ponen el puntero al botón.

   Es una reacción y no un estado: Gafo está escondido, y lo que lo hace
   aparecer es que alguien se acerque a la acción. Saludando todo el tiempo
   sería un adorno agitándose al lado del único botón de la pantalla; saludando
   al acercarse, es una respuesta.

   Sin JavaScript: son dos dibujos del mismo brazo, uno abajo y otro arriba, y
   el hover cambia cuál está encendido. Los 0.16 s del cruce son lo que hace
   que se lea como que lo levanta y no como que cambió de dibujo.

   El vaivén gira desde el hombro (77, 57), que es donde el brazo nace. Girar
   desde otro punto lo despega del cuerpo. La amplitud, de −15° a +9°, mantiene
   la mano dentro de lo que se lee como saludo.

   Corre mientras el puntero esté encima —de ahí el infinite—: dura lo que dure
   el interés, y se apaga solo cuando el brazo vuelve a bajar. */
.lg-gafo-brazo {
  transform-box: view-box;
  transform-origin: 77px 57px;
  transition: opacity .16s var(--lg-ease);
}

.lg-gafo-brazo--saluda { opacity: 0; }

.lg-cta-wrap:hover .lg-gafo-brazo--quieto,
.lg-cta-wrap:focus-within .lg-gafo-brazo--quieto { opacity: 0; }

.lg-cta-wrap:hover .lg-gafo-brazo--saluda,
.lg-cta-wrap:focus-within .lg-gafo-brazo--saluda {
  opacity: 1;
  animation: lg-gafo-saludo 1.4s ease-in-out infinite;
}

@keyframes lg-gafo-saludo {
  0%, 100% { transform: rotate(9deg); }
  25%      { transform: rotate(-15deg); }
  50%      { transform: rotate(7deg); }
  75%      { transform: rotate(-13deg); }
}

/* ---- El "¡Hola!" ----

   Aparece al pasar el puntero por el botón o al enfocarlo con el teclado, y
   solo entonces: un globo permanente sería un cartel más en la pantalla, y lo
   que se quiere es que Gafo conteste cuando lo miran.

   Sale hacia la DERECHA, del lado hacia el que Gafo se inclina: es hacia donde
   mira, y un globo del lado contrario obliga a leer al revés del gesto. El
   anclaje sale de la misma variable que dice cuánto asoma —restarle un
   negativo es sumarle lo que sobresale—, así que si cambia su tamaño o su
   posición, el globo lo sigue solo.

   A la altura de la cara y pegado al cuerpo, no flotando sobre el botón: sale
   de la boca de Gafo, así que nace donde está su boca. Por eso el bottom cae
   por DEBAJO del reborde del pill (el 100% menos unos píxeles) — a esa altura
   el botón ya terminó hacia la izquierda y no hay nada que tapar— y el left
   arranca donde termina lo que Gafo asoma, con la colita a un par de píxeles
   de su costado.

   Nace desde su lado izquierdo —el de la colita— para que crezca desde donde
   está Gafo y se lea como algo que él dice. */
.lg-gafo-globo {
  position: absolute;
  z-index: 3;
  left: calc(100% - var(--lg-gafo-derecha) - 2px);
  bottom: calc(100% - 16px);

  padding: 6px 12px;
  border-radius: 15px;
  background: var(--lg-card);
  color: var(--lg-ink);
  font-size: .82rem; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20, 18, 26, .10), 0 10px 26px -10px rgba(20, 18, 26, .38);

  opacity: 0;
  transform: translateX(-6px) scale(.86);
  transform-origin: 0 50%;
  transition: opacity .2s var(--lg-ease), transform .28s var(--lg-ease);
  pointer-events: none;   /* nunca le roba el clic al botón */
}

/* La colita, en el costado y no abajo: Gafo está AL LADO del globo, a la misma
   altura, no debajo. Una colita apuntando al piso mandaría a mirar al botón.

   Recortada de un rectángulo y no rotada 45°: un cuadrado girado asoma sus dos
   vértices por los lados del globo y deja dos muescas. */
.lg-gafo-globo::after {
  content: "";
  position: absolute;
  left: -6px; top: 50%;
  width: 7px; height: 12px;
  margin-top: -6px;
  background: inherit;
  clip-path: polygon(100% 0, 0 45%, 100% 100%);
}

.lg-cta-wrap:hover .lg-gafo-globo,
.lg-cta-wrap:focus-within .lg-gafo-globo {
  opacity: 1;
  transform: none;
}

/* Quieto, pero presente: la mascota no desaparece, deja de moverse. Se queda
   asomada, agarrada y ladeada hacia afuera —esa es su postura, no un
   movimiento, y por eso se conserva—, y sigue levantando el brazo y sacando el
   globo al pasar el puntero: lo que se apaga es el vaivén de la mano y el
   deslizamiento del globo, no la respuesta. Quien pidió menos movimiento pidió
   eso, no menos información. */
@media (prefers-reduced-motion: reduce) {
  .lg-gafo,
  .lg-gafo-brazo,
  .lg-cta-wrap:hover .lg-gafo-brazo--saluda,
  .lg-cta-wrap:focus-within .lg-gafo-brazo--saluda,
  .lg-gafo-globo {
    animation: none;
    transition: none;
  }

  .lg-gafo-globo { transform: none; }
}

.lg-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 18px; border-top: 1px solid var(--lg-hair);
  font-size: .78rem; color: var(--lg-faint);
}

/* Entrada en cascada, una sola vez, en orden de lectura. */
@keyframes lg-sube { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.lg-marca, .lg-eyebrow, .lg-titulo, .lg-sub, .lg-modulos, .lg-aviso, .lg-acciones, .lg-pie {
  animation: lg-sube .9s var(--lg-ease) both;
}
.lg-marca    { animation-delay: .05s; }
.lg-eyebrow  { animation-delay: .18s; }
.lg-titulo   { animation-delay: .26s; }
.lg-sub      { animation-delay: .36s; }
.lg-modulos  { animation-delay: .42s; }
.lg-aviso    { animation-delay: .58s; }
.lg-acciones { animation-delay: .62s; }
.lg-pie      { animation-delay: .72s; }

/*
  La lista entra en dos tiempos, como una tabla de iOS: primero la tarjeta, y
  encima las filas subiendo de a una con 40 ms de diferencia. El escalonado es
  lo que hace que se lea como una lista y no como una imagen que apareció.

  Los íconos van aparte y con rebote: entran encogidos y se pasan un pelo de su
  tamaño antes de asentarse. Es el gesto con que iOS pinta los íconos de app, y
  la curva —cubic-bezier con el tercer valor arriba de 1— es la que produce ese
  pasarse de rosca. Solo se puede hacer en el ícono: si rebotara la fila entera,
  el texto daría un salto y se leería como un error de maquetación.
*/
@keyframes lg-mod-fila { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lg-mod-icono { from { opacity: 0; transform: scale(.68); } to { opacity: 1; transform: scale(1); } }

.lg-modulo { animation: lg-mod-fila .55s var(--lg-ease) both; }
.lg-modulo:nth-child(1) { animation-delay: .48s; }
.lg-modulo:nth-child(2) { animation-delay: .52s; }
.lg-modulo:nth-child(3) { animation-delay: .56s; }

.lg-modulo-icono { animation: lg-mod-icono .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.lg-modulo:nth-child(1) .lg-modulo-icono { animation-delay: .52s; }
.lg-modulo:nth-child(2) .lg-modulo-icono { animation-delay: .56s; }
.lg-modulo:nth-child(3) .lg-modulo-icono { animation-delay: .60s; }

/* ===== El mazo =========================================================== */

/*
  El ancho del mazo, en un solo lugar: lo comparten el gafete y los dos carnés.

  Crece con el ancho de la ventana (23vw) pero se frena si no hay alto: la
  credencial es 34:55, así que a 380 px de ancho pide 615 px de alto. El
  segundo término del min() la limita al alto disponible para que nunca se
  desborde ni haya que hacer scroll en la pantalla de ingreso.
*/
.lg-zona {
  --lg-ancho-mazo: min(clamp(230px, 23vw, 380px), calc((100vh - 190px) * 34 / 55));
  padding: 30px 44px;
  display: grid; place-items: center;
  perspective: 1800px;
}

/* Sombra ambiental: apoya el mazo sobre la superficie sin dibujar ningún borde. */
.lg-zona::after {
  content: "";
  position: absolute;
  width: 66%; height: 26px;
  bottom: 8px; left: 44%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--lg-piso), transparent 72%);
  filter: blur(12px);
  pointer-events: none;
}

/* Proporción 34:55 y unidades cqw, igual que el gafete que se publica: así el
   contenido escala solo y las dos piezas se ven como la misma credencial. */
.lg-gafete {
  width: var(--lg-ancho-mazo);
  aspect-ratio: 34 / 55;
  container-type: inline-size;
  position: relative;
  border: 0; padding: 0; background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 3;
}

.lg-gafete-in {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, .1, .2, 1);
}

/* .lg-demo la pone el script al cargar: reusa exactamente las mismas reglas que
   el hover, así el vistazo automático y el manual son el mismo movimiento. */
.lg-zona:hover .lg-gafete-in,
.lg-zona.lg-demo .lg-gafete-in,
.lg-gafete.volteado .lg-gafete-in { transform: rotateY(180deg); }

.lg-cara {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 6.25cqw;
  overflow: hidden;
  background: var(--lg-gafete-bg);
  box-shadow: var(--lg-gafete-sombra);
}

.lg-cara.rev { transform: rotateY(180deg); }

.lg-patron {
  position: absolute; inset: 0;
  background-image: url("../img/fondo-telecable-patron.jpg");
  background-size: cover; background-position: center;

  /* En oscuro se invierte y se compone en screen: el arte es gris sobre
     blanco, y sin eso queda como un manchon claro sobre la credencial. */
  opacity: var(--lg-patron-op);
  filter: var(--lg-patron-filtro);
  mix-blend-mode: var(--lg-patron-blend);
}

.lg-ranura {
  position: absolute; top: 4.375cqw; left: 50%; transform: translateX(-50%);
  width: 17.5cqw; height: 4.0625cqw; border-radius: 999px;
  background: var(--lg-ranura-bg);
  box-shadow: inset 0 1px 2px var(--lg-ranura-inset), 0 1px 0 rgba(255,255,255,.14);
  z-index: 5;
}

.lg-gafete-logo {
  position: absolute; top: 12cqw; left: 50%; transform: translateX(-50%);
  width: 44cqw; height: auto; display: block;
}

/* Sin retrato ni aro: el frente no habla de una persona, así que el mensaje
   ocupa todo el aire entre el logo y la curva. */
.lg-identidad {
  position: absolute;
  top: 27cqw; left: 8.75cqw; right: 8.75cqw; bottom: 45cqw;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3cqw; text-align: center;
}

.lg-identidad h2 {
  margin: 0; font-weight: 500; font-size: 8cqw;
  line-height: 1.18; letter-spacing: -.028em;
  color: var(--lg-gafete-ink); text-wrap: balance;
}

/* La parte que importa toma el rojo y sube de peso; el resto se queda en
   medium. El contraste lo dan las dos cosas juntas — solo el color, sobre un
   texto que ya es semibold, casi no se nota. */
.lg-identidad h2 em { font-style: normal; font-weight: 700; color: var(--lg-rojo); }

.lg-identidad p {
  margin: 0; font-size: 3.6cqw; letter-spacing: .09em;
  text-transform: uppercase; color: var(--lg-gafete-sub);
}

/* La firma del gafete. */
.lg-curva {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 41.25cqw; background: var(--lg-rojo);
  border-top-left-radius: 46.875cqw 20.625cqw;
}

.lg-datos {
  position: absolute; left: 8.75cqw; right: 12cqw; bottom: 6.8cqw;
  display: grid; grid-template-columns: 1fr auto;
  row-gap: 1.7cqw; column-gap: 3.75cqw;
  color: #fff;
}

.lg-datos .col { display: flex; flex-direction: column; gap: .4cqw; }
.lg-datos .col.vig { text-align: right; }

/* Etiqueta a un extremo y valor al otro, como las dos columnas de arriba. */
.lg-datos .col.ancha {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 2.4cqw;
  padding-top: 1.7cqw;
  border-top: 1px solid rgba(255,255,255,.22);
}

.lg-datos .col.ancha .val { text-align: right; }

/* La etiqueta se queda en Inter: en versalitas y a este tamaño, una cursiva se
   vuelve ilegible. El contraste entre la etiqueta técnica y el valor en cursiva
   es justamente lo que le da carácter al bloque. */
.lg-datos .et {
  font-size: 3.1cqw; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.68); line-height: 1.2;
}

/*
  Source Serif 4, pero la REDONDA inclinada por CSS y no su cursiva.

  Las cursivas tipográficas caen casi todas entre 10° y 14°, así que para bajar
  de ahí hay que dejar la cursiva dibujada y inclinar la redonda. A cambio de
  poder fijar el ángulo exacto se pierden las formas propias de la cursiva —la
  'a' y la 'e' sobre todo—; a 5° la diferencia casi no se nota y el bloque queda
  mucho más quieto.

  El skew necesita que el elemento no sea inline: aquí ya lo es porque .val es
  hijo directo de un contenedor flex, que blockifica a sus hijos.
*/
.lg-datos .val {
  font-family: "Source Serif 4", "Charter", "Georgia", "Times New Roman", serif;
  font-style: normal;
  font-size: 5.1cqw; font-weight: 500; line-height: 1.14;
  letter-spacing: .004em; color: #fff;
  transform: skewX(-5deg);
  transform-origin: 0 85%;   /* pivota cerca de la base, como una cursiva real */
}

/* En la fila ancha el valor está alineado a la derecha: si pivotara desde el
   borde izquierdo se desplazaría hacia afuera de su caja. */
.lg-datos .ancha .val {
  font-size: 4.1cqw;
  transform-origin: 100% 85%;
}


/* Reverso: la lámina de valores, igual que el gafete que se publica. */
.lg-valores {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* cover y no contain: la lamina y la credencial no tienen la misma
     proporcion, asi que con contain sobraba fondo abajo y se veia una franja.
     Con cover llena la cara entera; el recorte lateral es de un 4 % y no toca
     ningun contenido de la lamina. */
  object-fit: cover; object-position: center top;
  display: block; background: var(--lg-gafete-bg);
  filter: var(--lg-valores-filtro);
}

/* Barrido de brillo al voltear, tomado del gafete real. */
.lg-brillo { position: absolute; inset: 0; border-radius: 6.25cqw; overflow: hidden; pointer-events: none; z-index: 6; }

.lg-brillo::before {
  content: ""; position: absolute; top: -30%; left: -60%; width: 35%; height: 160%;
  background: linear-gradient(75deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); opacity: 0;
}

.lg-zona:hover .lg-brillo::before,
.lg-zona.lg-demo .lg-brillo::before { animation: lg-barrido .85s ease; }

@keyframes lg-barrido {
  0%   { left: -60%; opacity: 0; }
  15%  { opacity: .85; }
  55%  { opacity: .45; }
  100% { left: 130%; opacity: 0; }
}

/* Los carnés que asoman detrás: dicen, sin escribirlo, que por cada persona se
   administra más de un documento. */
.lg-carnet {
  position: absolute; top: 50%; left: 50%;
  /*
    Un 4 % más chicos que el gafete, para que en reposo queden completamente
    tapados. Al mismo tamaño exacto basta un píxel de diferencia —la sombra, el
    suavizado del radio, el reescalado que mete perspective sobre el contexto
    3D del gafete— para que asome el borde y se vea la franja de color.

    De paso es lo que hace un mazo de verdad: las hojas de atrás se ven algo
    más chicas.
  */
  width: calc(var(--lg-ancho-mazo) * .96);
  aspect-ratio: 34 / 55;
  container-type: inline-size;   /* para que el rótulo de adentro escale con él */

  /*
    El mismo radio del gafete, pero calculado desde la variable y NO en cqw.

    Un elemento con container-type no puede usar sus propias unidades cq para
    sus propias propiedades: ahí cqw resuelve contra el contenedor ancestro, y
    como no hay ninguno, caía al viewport — 6.25cqw pasaban a ser 6,25 % del
    ancho de la ventana, y los carnés salían mucho más redondeados que el
    gafete. Adentro, en los descendientes, cqw sí funciona bien.
  */
  border-radius: calc(var(--lg-ancho-mazo) * .06);
  /* El mismo cuerpo que muestra el reverso del gafete al girar. La lamina de
     valores es blanca, y en modo oscuro se ve a traves de brightness(.86), que
     la deja en #DBDBDB: por eso el token vale blanco en claro y ese gris en
     oscuro. Si se cambia el filtro de la lamina, hay que recalcular este valor. */
  background: var(--lg-carnet-bg);

  /* Sin sombra mientras están escondidos: la sombra se derrama fuera del
     elemento y se vería asomando alrededor del gafete aunque el carné esté
     tapado. Aparece al abrirse el abanico, que es cuando hace falta. */
  box-shadow: none;

  transform-origin: 50% 108%;
  transition: transform .62s cubic-bezier(.4,.1,.2,1), box-shadow .5s ease;
  overflow: hidden;
}

.lg-carnet .franja { position: absolute; top: 0; left: 0; right: 0; height: 26%; }
.lg-carnet.uno { transform: translate(-50%,-50%); z-index: 2; }
.lg-carnet.dos { transform: translate(-50%,-50%); z-index: 1; }
.lg-carnet.uno .franja { background: #fdb813; }
.lg-carnet.dos .franja { background: var(--lg-morado); }

.lg-carnet .et {
  position: absolute; bottom: 9%; left: 0; right: 0; text-align: center;
  font-size: 4.2cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #8a8a90;   /* fijo: el cuerpo del carne es claro en los dos temas */
}

/* El abanico se abre en proporción al mazo, no en píxeles fijos: si la
   credencial crece, el desplazamiento crece con ella.

   Ángulos y recorrido cortos a propósito: con el mazo grande, abrirlo más
   empujaba las hojas hasta invadir la columna del titular. Basta con que se
   asomen para que se entienda que hay más de un documento. */
.lg-zona:hover .lg-carnet,
.lg-zona.lg-demo .lg-carnet {
  box-shadow: 0 1px 2px rgba(40, 40, 46, .04), 0 12px 30px -14px rgba(40, 40, 46, .16);
}

.lg-zona:hover .lg-carnet.uno,
.lg-zona.lg-demo .lg-carnet.uno {
  transform: translate(-50%,-50%) rotate(5deg) translateX(calc(var(--lg-ancho-mazo) * .026));
}

.lg-zona:hover .lg-carnet.dos,
.lg-zona.lg-demo .lg-carnet.dos {
  transform: translate(-50%,-50%) rotate(10deg) translateX(calc(var(--lg-ancho-mazo) * .054));
}

@keyframes lg-girar { to { transform: rotate(360deg); } }

/* ===== Minigafetes del fondo ============================================= */

/*
  Credenciales sueltas, regadas sin orden por la escena. Son adorno: dicen "aquí
  hay muchos gafetes" sin escribirlo y le dan fondo al objeto principal.

  Hay dos campos, uno por columna. El de la izquierda va en .lg-izq y NO dentro
  de .lg-zona: esa capa tiene perspective y un contexto 3D propio para el giro
  del gafete, y meter ahí más elementos lo volvería a calcular en cada cuadro.

  overflow: hidden recorta contra el borde de la columna, que casi siempre es el
  de la ventana; donde el recorte sí se notaría —el pasillo entre las dos
  columnas— la máscara ya dejó las piezas en nada.
*/
.lg-mini-campo {
  /* Chicas a propósito: son un detalle del fondo. Si crecen empiezan a leerse
     como contenido y a discutirle el papel al mazo. */
  --lg-mini-base: clamp(22px, 2.3vw, 36px);

  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Izquierda: rodean el mazo. z-index 0 las deja debajo de él, que va en 1..3. */
.lg-mini-campo.izq {
  z-index: 0;

  /*
    El hueco del centro. Sin esto, las piezas que caen cerca del mazo compiten
    con él; con la máscara se apagan al acercarse.

    El hueco es angosto y el degradado corto —a 88 % ya está entero— porque las
    posiciones esquivan el mazo por su cuenta: si la máscara se estira hasta el
    borde, deja a TODAS las piezas a media fuerza y el fondo se ve descolorido.
  */
  -webkit-mask-image: radial-gradient(40% 44% at 50% 50%, transparent 40%, rgba(0,0,0,.6) 70%, #000 88%);
  mask-image: radial-gradient(40% 44% at 50% 50%, transparent 40%, rgba(0,0,0,.6) 70%, #000 88%);
}

/*
  Derecha: la mitad del reguero vive de este lado. Con todas las piezas en la
  columna del mazo, la escena quedaba cargada a la izquierda y vacía a la
  derecha; repartidas, el fondo se lee como uno solo y no como un rincón
  decorado.

  z-index -1 y no 0: .lg-der crea contexto propio (position: relative + z-index)
  y su contenido son cajas en flujo normal, que se pintan ANTES que cualquier
  posicionado con z-index 0 — con 0 las credenciales quedarían encima del
  titular. En negativo pasan atrás, que es donde deben estar.

  La máscara ahueca el bloque del titular, igual que la de la izquierda ahueca
  el mazo. Las piezas ya están puestas en los tres huecos que deja la columna
  —el aire entre el logo y el titular, el que queda antes del pie y el margen
  contra el borde—, así que la máscara es la red por si el texto crece.
*/
.lg-mini-campo.der {
  z-index: -1;
  -webkit-mask-image: radial-gradient(46% 30% at 42% 50%, transparent 55%, rgba(0,0,0,.6) 85%, #000 100%);
  mask-image: radial-gradient(46% 30% at 42% 50%, transparent 55%, rgba(0,0,0,.6) 85%, #000 100%);
}

/*
  ── El cuerpo, común a las tres siluetas ──────────────────────────────────

  Sin contorno. Antes llevaba un aro interno de media línea y se veía justo lo
  que no se quería: una tarjeta rodeada por una raya gris. Lo reemplazan tres
  cosas, que es como se separa una tarjeta de verdad:

    · el papel en degradado, que le da cara;
    · la sombra de contacto, que dice dónde termina;
    · en oscuro, una línea de luz en el canto de arriba (en claro es
      transparente, ver --lg-mini-luz).

  Tampoco lleva overflow: hidden. Recortar un elemento redondeado que además
  está rotado obliga al navegador a componer el recorte aparte, y las cuatro
  esquinas salen con el filo duro. En vez de eso, cada parte de adentro trae su
  propio radio y ninguna se sale sola.

  La ranura del cordón va en el fondo del elemento y no en un pseudo: es la
  señal más barata y más clara de que eso es un gafete y no una tarjeta.
*/
.lg-mini {
  --s: 1;        /* escala respecto de --lg-mini-base */
  --r: 0deg;     /* inclinación en reposo */
  --rd: 1.5deg;  /* cuánto cabecea al derivar */
  --fy: -7px;    /* cuánto sube */
  --fx: 3px;     /* cuánto corre de lado */
  --d: 0s;       /* retardo de entrada */
  --dur: 12s;

  --w:    calc(var(--lg-mini-base) * var(--s));
  --rad:  calc(var(--w) * .18);
  --foto: calc(var(--w) * .24);

  position: absolute;
  width: var(--w);
  aspect-ratio: 34 / 55;
  border-radius: var(--rad);

  background-image:
    linear-gradient(var(--lg-mini-ranura) 0 0),
    linear-gradient(168deg, var(--lg-mini-papel-a), var(--lg-mini-papel-b));
  background-size: 24% 1.5px, 100% 100%;
  background-position: 50% 6%, 0 0;
  background-repeat: no-repeat;

  box-shadow: var(--lg-mini-sombra), inset 0 1px 0 var(--lg-mini-luz);
  opacity: var(--lg-mini-op);
  transform: rotate(var(--r));

  /* Entra con la cascada de la derecha y, ya puesta, queda derivando. La
     segunda animación arranca cuando termina la primera, así no se pelean por
     el transform. */
  animation:
    lg-mini-entra .9s var(--lg-ease) var(--d) both,
    lg-mini-flota var(--dur) cubic-bezier(.45, 0, .55, 1) calc(var(--d) + .9s) infinite;
}

/*
  La zona de color. Empieza más abajo del borde para dejar ver la ranura, y por
  eso no necesita radio: a esa altura los costados de la tarjeta ya son rectos.

  El tono es bajo, pero no tanto como antes: ahora la pieza tiene ranura, foto y
  renglones, así que el color ya no es lo único que se ve y puede subir un poco
  sin volver a parecer una barrita.
*/
.lg-mini::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 15%; height: 17%;
  background: var(--lg-mini-color, var(--lg-rojo));
  opacity: .38;
}

/*
  La foto y dos renglones, centrados como en una credencial de verdad.

  Van como capas de background de un mismo pseudo-elemento —la foto es un
  radial closest-side sobre un mosaico cuadrado, así sale redonda— porque
  dibujarlos aparte pedía elementos hijos en cada pieza.
*/
.lg-mini::after {
  content: "";
  position: absolute; left: 14%; right: 14%; top: 38%; bottom: 12%;
  background-image:
    radial-gradient(closest-side, var(--lg-mini-foto) 92%, transparent),
    linear-gradient(var(--lg-mini-linea) 0 0),
    linear-gradient(var(--lg-mini-linea) 0 0);
  background-size: var(--foto) var(--foto), 78% 1.5px, 52% 1.5px;
  background-position: 50% 0, 50% 74%, 50% 100%;
  background-repeat: no-repeat;
}

/*
  ── Silueta 2: .curva, el gafete de Telecable en chiquito ─────────────────

  Repite la firma del gafete que se publica: el bloque de color abajo con la
  esquina de arriba a la izquierda redondeada en óvalo.

  Las medidas son las del original, traducidas a esta caja. El gafete grande
  lleva la curva en 41.25cqw de alto, y como la credencial mide 55/34 de alto
  por ancho, eso es el 25.5 % de su altura; los radios, 46.875cqw y 20.625cqw,
  son el 47 % del ancho del bloque y el 50 % de su alto.

  Estuvo en 38 % de alto —bastante más que el original— y con eso el bloque de
  color pasaba a ser la mancha más grande del fondo justo en la pieza más
  grande. Volver a la proporción de verdad la calla y encima la hace más fiel.

  Es la que hace que el reguero se vea de esta casa y no de una plantilla.
*/
.lg-mini.curva::before {
  top: auto; bottom: 0; height: 26%;
  border-radius: 47% 0 var(--rad) var(--rad) / 50% 0 var(--rad) var(--rad);
  opacity: .26;
}

/* Con la curva más baja cabe lo mismo que en el retrato: foto y dos renglones. */
.lg-mini.curva::after {
  top: 28%; bottom: 32%;
  background-size: var(--foto) var(--foto), 62% 1.5px, 44% 1.5px;
  background-position: 50% 0, 50% 78%, 50% 100%;
}

/*
  ── Silueta 3: .h, el gafete de evento ────────────────────────────────────

  Acostado, con la franja de color en el canto izquierdo y la foto al lado de
  los renglones. No es un capricho de variedad: los gafetes de visitante y los
  de evento son así, y tener las dos orientaciones sueltas en el fondo es lo que
  hace que el montón parezca un cajón de credenciales de verdad y no la misma
  pieza repetida siete veces.

  Radio más corto que el retrato: el mismo .18 sobre una tarjeta baja la dejaba
  con forma de pastilla.
*/
.lg-mini.h {
  aspect-ratio: 55 / 34;
  --rad:  calc(var(--w) * .1);
  --foto: calc(var(--w) * .155);
  background-size: 16% 1.5px, 100% 100%;   /* la ranura, más corta */
  background-position: 50% 7%, 0 0;
}

.lg-mini.h::before {
  top: 0; bottom: 0; left: 0; right: auto;
  width: 20%; height: auto;
  border-radius: var(--rad) 0 0 var(--rad);
  opacity: .4;
}

.lg-mini.h::after {
  left: 28%; right: 8%; top: 24%; bottom: 24%;
  background-size: var(--foto) var(--foto), 44% 1.5px, 30% 1.5px;
  background-position: 0 50%, calc(var(--foto) + 3px) 26%, calc(var(--foto) + 3px) 74%;
}

/*
  La paleta del adorno. Los tres de la marca más un verde y un azul que NO son
  del sistema y no deben salir de aquí: existen porque un cajón de credenciales
  reales tiene documentos de varios emisores, y con tres colores el reguero se
  leía como tres categorías. A 38 % de opacidad son tintes, no acentos.
*/
.lg-mini-campo {
  --lg-mc-rojo:    #ED1848;
  --lg-mc-morado:  #6f2e8e;
  --lg-mc-mostaza: #fdb813;
  --lg-mc-verde:   #1a9c7a;

  /* Azul de acero, no azul limpio. En una escena de grises cálidos y rojo, un
     azul saturado es el único frío con brillo y se lleva la mirada aunque la
     pieza sea chica. Bajándole el croma queda como un documento descolorido,
     que es lo que debe parecer. Si aun así pesa, el reemplazo natural es un
     grafito (#4a4a55): deja la pieza más grande como la más callada. */
  --lg-mc-azul:    #3f6f9e;
}

/*
  El reguero, a mano y no con una fórmula: la idea es que se vea sin orden, y
  cualquier progresión regular —una espiral, un anillo— se nota enseguida.

  Tres a la izquierda y dos a la derecha. Las inclinaciones van de 10° a 18° y
  no todas al mismo paso: unas cuantas bien torcidas y el resto casi derechas es
  lo que hace que se vean tiradas. Con todas igual de inclinadas volvería a
  leerse como un patrón, y pasados los 20° dejan de parecer caídas y parecen
  puestas así a propósito.

  Bien separadas y en alturas distintas. Antes había dos arriba casi a la misma
  altura y dos abajo casi a la misma altura, y el ojo las emparejaba en renglones
  en vez de leerlas sueltas. Ahora ninguna comparte franja con otra: bajan por la
  pantalla en 9, 14, 58, 78 y 90 %, y avanzan de izquierda a derecha sin repetir
  columna.

  Y quedan huecos sin llenar a propósito —la esquina de arriba a la derecha, el
  costado izquierdo a media altura, el medio de abajo—. Un fondo con todos los
  espacios ocupados deja de ser fondo: el vacío es lo que hace que las piezas se
  lean como sueltas y no como un marco.

  La segunda es la pieza grande y ya no va contra el borde sino en el pasillo
  entre el mazo y el titular, que es la parte más vacía de la pantalla: descarga
  los costados —donde antes se apilaban— y de paso rompe la simetría de las dos
  columnas al quedar sobre la costura. Por debajo de la mitad y no en el eje:
  centrada del todo volvería a ordenar la escena, que es lo contrario de lo que
  se busca.

  Es apenas mayor que el resto (1.12 contra ~0.9) y con eso basta para que ancle
  el reguero. Estuvo en 1.34 y a ese tamaño se le iba el ojo: en un fondo, la
  pieza más grande no debe pedir que la miren, solo sostener a las demás.

  El 89 % no es capricho: al pasar el puntero los carnés del mazo se abren en
  abanico y su esquina de arriba llega hasta media credencial más allá del borde
  del gafete. Antes esta pieza caía justo ahí y el abanico la tocaba. Por lo
  mismo bajó unos puntos: el abanico pivota cerca del piso, así que a media
  altura estorba mucho menos que arriba.

  Sin morado de este lado, por pedido. La del centro es la .curva —el gafete de
  la casa— y va en azul: es la vecina más cercana al gafete grande, y en rojo
  los dos bloques de color quedaban a un palmo repitiendo el mismo tono. En frío
  se separa sola. La de arriba es acostada; la de abajo, retrato.

  La acostada necesita más escala (1.5) para verse del mismo porte que un
  retrato: la escala manda sobre el ancho, y acostada ese ancho reparte mucho
  menos alto.
*/
.lg-mini-campo.izq .lg-mini:nth-child(1) { left:  6%; top:  9%; --r: -18deg; --s: 1.5;  --d: .50s; --dur: 11s;   --fx: -4px; --fy: -8px; --rd: 2deg;   --lg-mini-color: var(--lg-mc-verde); }
.lg-mini-campo.izq .lg-mini:nth-child(2) { left: 89%; top: 58%; --r:  10deg; --s: 1.12; --d: .54s; --dur: 14s;   --fx:  4px; --fy: -9px; --rd: 1.4deg; --lg-mini-color: var(--lg-mc-azul); }
.lg-mini-campo.izq .lg-mini:nth-child(3) { left:  8%; top: 90%; --r: -10deg; --s: .92;  --d: .70s; --dur: 12s;   --fx:  3px; --fy: -6px; --rd: 1.8deg; --lg-mini-color: var(--lg-mc-mostaza); }

/*
  Dos de este lado y no cuatro: esta columna es la que se lee, y cada pieza de
  más es una cosa más compitiendo con el titular. Quedan las dos que caen en
  hueco limpio —el aire entre el logo y el titular, y la franja libre bajo el
  botón— y se fueron las dos que vivían contra el borde de la ventana, que eran
  las más prescindibles: adorno de margen, lejos de todo.

  Entran de últimas, cuando el texto ya se acomodó.

  La de arriba se corrió al medio del hueco y no al arranque del titular: ahí
  caía justo encima del "Gestión de", a un dedo del texto, y dos cosas
  arrimadas se leen como una sola. Corrida, el ojo la toma por lo que es —algo
  que anda por el fondo— y no por un adorno pegado al título. De paso subió
  unos puntos: el hueco entre el logo y el titular es angosto y esta pieza
  necesita aire de los dos lados, no solo del que se ve más.

  Con cinco piezas en total y cinco colores, cada una lleva el suyo y ninguna se
  repite; las siluetas sí, pero nunca dos iguales juntas.
*/
.lg-mini-campo.der .lg-mini:nth-child(1) { left: 52%; top: 14%; --r: -14deg; --s: 1.4; --d: .80s; --dur: 13s;   --fx: -3px; --fy: -6px; --rd: 1.6deg; --lg-mini-color: var(--lg-mc-morado); }
.lg-mini-campo.der .lg-mini:nth-child(2) { left: 70%; top: 78%; --r:  17deg; --s: .94; --d: .88s; --dur: 11.5s; --fx:  4px; --fy: -7px; --rd: 2deg;   --lg-mini-color: var(--lg-mc-rojo); }

@keyframes lg-mini-entra {
  from { opacity: 0; transform: translateY(12px) rotate(var(--r)) scale(.9); }
  to   { opacity: var(--lg-mini-op); transform: rotate(var(--r)); }
}

/*
  La deriva. Tres paradas y no dos: con una sola ida y vuelta el recorrido es un
  vaivén y se le ve el eje; con la parada de en medio desfasada —vuelve casi al
  punto de partida pero no del todo, y cabecea al otro lado— el camino se cierra
  en un óvalo y parece que la pieza flota.

  Solo transform y opacity, que el navegador resuelve en el compositor sin
  volver a dibujar nada: siete piezas animadas así no le cuestan a la máquina ni
  encienden el ventilador. Cualquier otra propiedad —top, width, filter— pediría
  layout o pintado en cada cuadro y ahí sí se sentiría.

  Cada una con su compás y su retardo: si todas subieran a la vez el fondo
  entero respiraría y se volvería lo que se mira.
*/
@keyframes lg-mini-flota {
  0%, 100% {
    transform: rotate(var(--r));
    opacity: var(--lg-mini-op);
  }
  36% {
    transform: translate3d(var(--fx), var(--fy), 0) rotate(calc(var(--r) + var(--rd)));
    opacity: calc(var(--lg-mini-op) * .8);
  }
  68% {
    transform: translate3d(calc(var(--fx) * -.55), calc(var(--fy) * .4), 0) rotate(calc(var(--r) - var(--rd) * .7));
    opacity: calc(var(--lg-mini-op) * .94);
  }
}

/* ===== Sin acceso / Error de ingreso ===================================== */

.lg-estado {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  overflow: hidden;
}

.lg-estado::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(44% 38% at 102% -12%, var(--lg-luz), transparent 64%),
    radial-gradient(150% 130% at 86% -18%,
      var(--lg-g1) 0%, var(--lg-g2) 12%, var(--lg-g3) 28%, var(--lg-g4) 46%, var(--lg-g5) 66%, var(--lg-g6) 100%);
  pointer-events: none;
}

.lg-estado-card {
  position: relative;
  width: 100%; max-width: 440px;
  background: var(--lg-card);
  border-radius: 24px;
  padding: 40px 36px;
  text-align: center;
  box-shadow: var(--lg-gafete-sombra);
  animation: lg-sube .6s var(--lg-ease) both;
}

.lg-estado-icono {
  width: 60px; height: 60px;
  margin: 0 auto 22px;
  border-radius: 19px;
  background: var(--lg-fill);
  color: var(--lg-rojo);
  display: flex; align-items: center; justify-content: center;
  font-size: 27px;
}

.lg-estado-titulo {
  margin: 0 0 12px; font-size: 22px; font-weight: 700;
  letter-spacing: -.02em; text-wrap: balance;
}

.lg-estado-texto { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--lg-muted); }

.lg-estado-correo {
  display: inline-block; margin-bottom: 26px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--lg-fill); font-size: 13px; color: var(--lg-ink-2);
}

.lg-btn-secundario {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 24px; border-radius: 999px; border: 0;
  background: var(--lg-fill); color: var(--lg-ink);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: transform 150ms var(--lg-ease), background 150ms var(--lg-ease);
}

.lg-btn-secundario:hover { background: var(--lg-fill-hover); }
.lg-btn-secundario:active { transform: scale(.97); }
.lg-btn-secundario:focus-visible { outline: 2px solid var(--lg-rojo); outline-offset: 3px; }

/* ===== Responsive ======================================================== */

/*
  Ventana baja: la lista se compacta y suelta las descripciones.

  La columna derecha reparte su alto con space-between, y los tres módulos le
  suman unos 200 px. En una ventana de menos de 780 px de alto eso empuja al pie
  fuera de la caja, y como .lg-esc recorta lo que se sale, el pie desaparecería.
  Antes de llegar ahí, las filas pierden el renglón chico: el nombre del módulo
  es lo que informa, la descripción es cortesía.
*/
@media (min-width: 861px) and (max-height: 780px) {
  .lg-modulos { margin-top: 14px; }
  .lg-modulo { padding: 9px 14px; }
  .lg-modulo small { display: none; }
  .lg-modulo-icono { width: 30px; height: 30px; border-radius: 10px; }
  .lg-modulo-icono svg { width: 17px; height: 17px; }
  .lg-modulo + .lg-modulo::before { left: 57px; }
}

/*
  Las dos credenciales de la derecha se van antes que nada. Viven en el margen
  que le sobra al titular contra el borde de la ventana, y ese margen se acaba
  bastante antes de que la pantalla se vuelva angosta: más abajo de este ancho
  quedarían detrás del texto.
*/
@media (max-width: 1180px) {
  .lg-mini-campo.der { display: none; }
}

/*
  Y la grande del pasillo se va un poco después. El mazo tiene ancho mínimo
  (230 px) pero la columna sigue encogiendo, así que de aquí para abajo el
  pasillo entre el gafete abierto en abanico y el borde ya no da para una pieza
  de este tamaño sin que se toquen.
*/
@media (max-width: 1100px) {
  .lg-mini-campo.izq .lg-mini:nth-child(2) { display: none; }
}

/*
  Angosto: el mazo se va del todo y queda una sola tarjeta centrada.

  No se encoge la credencial: a menos de 860 px queda tan chica que su contenido
  —el mensaje y los tres datos— deja de leerse, y una credencial ilegible no
  aporta nada. En su lugar, la tarjeta blanca da la profundidad que antes daba
  el objeto.
*/
@media (max-width: 860px) {
  /* Acá sí se desplaza la página, y por eso vuelve el alto mínimo: en un teléfono
     la tarjeta puede ser más alta que la pantalla con toda legitimidad, y encerrarla
     en 100dvh la recortaría. Lo que no se desplaza por dentro es la columna, que ya
     es la tarjeta entera. */
  .lg-esc {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 24px;
  }

  .lg-der { overflow: visible; }

  .lg-esc::before {
    background:
      radial-gradient(84% 38% at 84% -6%, var(--lg-luz), transparent 66%),
      linear-gradient(180deg, var(--lg-g1) 0%, var(--lg-g3) 42%, var(--lg-g6) 100%);
  }

  .lg-esc::after {
    background-size: 300% auto;
    background-position: 70% 6%;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 58%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 58%);
  }

  .lg-izq { display: none; }

  .lg-der {
    width: 100%;
    max-width: 420px;
    justify-content: flex-start;
    gap: 26px;
    padding: 36px 28px 32px;
    border-radius: 24px;
    background: var(--lg-card);
    box-shadow: var(--lg-gafete-sombra);
    animation: lg-sube .6s var(--lg-ease) both;
  }

  /* Dentro de la tarjeta la cascada sobra: la tarjeta entra como una pieza. */
  .lg-marca, .lg-eyebrow, .lg-titulo, .lg-sub, .lg-aviso, .lg-acciones, .lg-pie,
  .lg-modulos, .lg-modulo, .lg-modulo-icono {
    animation: none;
  }

  .lg-marca { justify-content: center; gap: 12px; }
  .lg-marca-id img { width: 76px; }

  .lg-hero { max-width: none; text-align: center; }
  .lg-titulo { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .lg-sub { margin-left: auto; margin-right: auto; }
  .lg-aviso { margin-left: auto; margin-right: auto; text-align: left; }

  /* La tarjeta centra su texto; las filas de la lista no, que si no el ícono y
     el rótulo dejan de formar columna. Y la tarjeta pierde su sombra: adentro
     de otra tarjeta se leería como una caja dentro de una caja. */
  .lg-modulos {
    margin-left: auto; margin-right: auto;
    text-align: left;
    background: var(--lg-fill);
    box-shadow: none;
  }

  .lg-modulo { padding: 11px 14px; }
  .lg-modulo + .lg-modulo::before { left: 59px; }

  .lg-acciones { align-items: stretch; }
  .lg-cta { justify-content: center; }

  /* El envoltorio NO se estira, aunque sus hermanos sí. Gafo está posicionado
     contra el borde derecho de .lg-cta-wrap, así que un envoltorio más ancho que
     el botón lo deja flotando en el aire a media tarjeta de distancia: acá se
     veía separado del pill, agarrado de nada.

     align-self en el envoltorio y no quitar el stretch del contenedor, porque el
     stretch lo necesitan la nota y el pie de abajo. */
  .lg-cta-wrap { align-self: center; }
  .lg-nota { justify-content: center; }

  .lg-pie { justify-content: center; border-top: 0; padding-top: 4px; font-size: .74rem; }
}

/* ===== Movimiento reducido =============================================== */

@media (prefers-reduced-motion: reduce) {
  .lg-gafete-in, .lg-carnet { transition-duration: .001ms !important; }
  .lg-brillo::before { animation: none !important; }
  .lg-marca, .lg-eyebrow, .lg-titulo, .lg-sub, .lg-aviso, .lg-acciones, .lg-pie,
  .lg-modulos, .lg-modulo, .lg-modulo-icono,
  .lg-estado-card { animation: none; }

  /* Los minigafetes se quedan quietos donde caen: son adorno, no información. */
  .lg-mini { animation: none; }
}