/* TIAMAT login: original ZIP Zigurat geometry and epic composition, native auth. */
@property --tn-iris { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --tn-aura { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@layer tn.auth {
  :root { color-scheme: dark; }
  html[data-intro="zigurat"] { --tn-outro: 3.4s; --tn-letters: 2.4s; }

  .auth-page { background: var(--tn-surface); }
  html.has-intro:not(.is-intro-done) body { overflow: hidden; }

  /* ---------- Layout de acceso ---------- */
  .auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
  .auth__brand {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
    padding: 44px 56px 36px;
    background: var(--tn-ink); color: var(--tn-on-ink);
  }
  .auth__brand::before { /* textura de puntos muy sutil */
    content: ""; position: absolute; inset: 0; z-index: -2;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  }
  .auth__art { position: absolute; right: -170px; bottom: -190px; width: 820px; height: 820px; z-index: -1; color: var(--tn-signal); pointer-events: none; }
  .auth__brand--scenes .auth__art { opacity: .5; right: -340px; bottom: -230px; }
  .auth__lockup { width: 182px; height: auto; }
  .auth__headline { font-size: clamp(2.25rem, 1.2rem + 2.4vw, 3.25rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: var(--tn-fw-semibold); color: #fff; max-width: 14ch; }
  .auth__lede { font-size: 16px; line-height: 1.55; color: var(--tn-on-ink-3); max-width: 42ch; }
  .auth__steps { list-style: none; margin: 0; padding: 0; max-width: 400px; }
  .auth__steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.09); font-size: 14px; color: var(--tn-on-ink-2); }
  .auth__steps b { font-family: var(--tn-font-mono); font-weight: var(--tn-fw-medium); font-size: 12px; color: var(--tn-signal); padding-top: 2px; }
  .auth__foot { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--tn-ink-300); }

  .auth__form { display: flex; align-items: center; justify-content: center; padding: 48px 32px; background: var(--tn-surface); }
  .auth__card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 28px; }
  .auth__mobile-brand { display: none; }
  .auth__divider { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--tn-text-3); }
  .auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--tn-line); }

  @media (max-width: 900px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth__brand { display: none; }
    .auth__form { align-items: stretch; justify-content: flex-start; padding: 0; background: var(--tn-surface); min-height: 100vh; flex-direction: column; }
    .auth__mobile-brand { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 22px 20px 64px; background: var(--tn-ink); position: relative; overflow: hidden; }
    .auth__mobile-brand .auth__art { width: 420px; height: 420px; right: -120px; bottom: -150px; }
    .auth__card { position: relative; z-index: 1; max-width: none; margin-top: -40px; padding: 28px 20px 32px; background: var(--tn-surface); border-radius: 22px 22px 0 0; }
  }

  /* ---------- Entrada escalonada del login ---------- */
  .auth-anim { --i: 0; animation: tn-auth-in .9s var(--tn-ease-out-expo) both; animation-delay: calc(120ms + var(--i) * 70ms); }
  html.has-intro .auth__form .auth-anim { animation-delay: calc(var(--tn-outro) + 180ms + var(--i) * 70ms); }
  html.has-intro .auth__brand .auth-anim { animation-delay: calc(var(--tn-outro) + 730ms + var(--i) * 80ms); }
  /* El lockup del panel aparece sin desplazamiento: es donde "aterriza" el logo de la intro */
  html.has-intro .auth__brand .auth-anim--land { animation: tn-land .01s linear calc(var(--tn-outro) + 700ms) both; }
  html.has-intro.is-intro-skipped .auth-anim,
  html.has-intro.is-intro-skipped .auth__brand .auth-anim,
  html.has-intro.is-intro-skipped .auth__form .auth-anim { animation-name: tn-auth-in-b; animation-duration: .7s; animation-delay: calc(140ms + var(--i) * 55ms); }
  @keyframes tn-land { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tn-auth-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes tn-auth-in-b { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* El arte del panel (zig.art) se anima desde patterns.css */

  /* ==========================================================================
     INTRO · ZIGURAT  (--tn-outro 3,4 s)
     Columna determinística: marca 132 · 30 · wordmark 355 × 67,6 · 30 · descriptor · 30 · barra.
     Centro de la marca = --tn-my (50vh − 84,8 px). La marca usa la grilla de 48 a 2,75 px por unidad:
     santuario arriba a −45,1 px del centro, base abajo a +45,65 px.

     0,05  el mar primordial: trece olas se agitan (SMIL en el SVG)
     0,20–1,76  las olas se aquietan en líneas rectas, una tras otra
     1,35  las líneas se comprimen hacia la franja del zigurat y se apagan
     1,55  cuatro horizontes de ~3000 px cruzan la pantalla (base → santuario cada 80 ms)
           se contraen a su ancho (0,5 s) y toman cuerpo en blanco incandescente (0,38 s)
     1,95  onda en el suelo cuando asienta la base
     2,40  TIAMAT letra por letra · la marca brilla
     2,45  haz de luz desde el santuario, chispas que suben y el cielo se enciende
     2,40  descriptor y barra · 3,40 vuelo al lockup y la intro se repliega sobre el panel
     ========================================================================== */
  .intro { display: none; }
  html.has-intro .intro {
    --tn-my: calc(50% - 84.8px);
    position: fixed; inset: 0; z-index: var(--tn-z-intro); overflow: hidden;
    display: grid; place-items: center;
    background: radial-gradient(1200px 700px at 50% 45%, #10302C 0%, var(--tn-ink) 55%, var(--tn-ink-950) 100%);
    color: var(--tn-signal); cursor: pointer;
    clip-path: inset(0 0 0 0);
    animation: tn-intro-clip .78s cubic-bezier(.65, 0, .35, 1) calc(var(--tn-outro) + 40ms) forwards, tn-intro-fade .45s ease calc(var(--tn-outro) + 740ms) forwards;
  }
  html.has-intro.is-intro-skipped .intro { animation: tn-intro-fade .38s ease forwards; }

  .intro__grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 64px 64px; background-position: center;
    -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
    opacity: 0; animation: tn-fade-in 1.4s ease .05s forwards;
  }

  /* El cielo: se enciende cuando el haz llega arriba */
  .intro__sky { position: absolute; left: 0; right: 0; top: 0; height: 70vh; pointer-events: none; opacity: 0;
    background: radial-gradient(55% 75% at 50% 0%, rgba(200, 241, 105, .24), rgba(30, 140, 124, .1) 45%, transparent 75%);
    animation: tn-sky 1.8s ease 2.55s forwards; }

  /* El mar primordial (SMIL en el SVG) que se comprime en la franja del zigurat */
  .intro__chaos { position: absolute; left: 0; top: calc(var(--tn-my) - 330px); width: 100%; height: 660px; overflow: visible; opacity: 0;
    animation: tn-fade-in .5s ease .05s forwards; }
  .intro__chaos path { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke: rgba(200, 241, 105, .55); }
  .intro__chaos path:nth-child(even) { stroke: rgba(30, 140, 124, .75); }
  .intro__chaos path:nth-child(3n) { stroke: rgba(255, 255, 255, .35); }
  .intro__chaos g { transform-box: view-box; transform-origin: 720px 330px;
    animation: tn-chaos-collapse .5s cubic-bezier(.7, 0, .3, 1) 1.35s forwards, tn-fade-out .3s ease 1.6s forwards; }

  /* Haz de luz desde el santuario hasta el borde superior */
  .intro__beam { position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: calc(var(--tn-my) - 45.1px); pointer-events: none;
    transform-origin: 50% 100%; transform: scaleY(0); opacity: 0;
    background: linear-gradient(to top, #fff 0, var(--tn-signal) 18%, rgba(200, 241, 105, 0) 100%);
    box-shadow: 0 0 14px 1px rgba(200, 241, 105, .55);
    animation: tn-beam 1.25s cubic-bezier(.2, .8, .2, 1) 2.45s forwards; }
  .intro__beam::before { content: ""; position: absolute; left: -44px; right: -44px; top: 0; bottom: 0; filter: blur(14px);
    background: linear-gradient(to top, rgba(200, 241, 105, .32), rgba(200, 241, 105, 0) 80%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent); mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent); }

  /* Chispas que suben desde el santuario */
  .intro__sparks { position: absolute; left: 50%; top: calc(var(--tn-my) - 45.1px); width: 0; height: 0; }
  .intro__sparks i { position: absolute; left: -1.5px; top: -1.5px; width: 3px; height: 3px; border-radius: 50%; background: #F4FFE0; opacity: 0;
    box-shadow: 0 0 8px 2px rgba(200, 241, 105, .7);
    animation: tn-spark 1.2s cubic-bezier(.2, .7, .3, 1) calc(2.45s + var(--d)) forwards; }

  /* Onda en el suelo cuando asienta la base */
  .intro__ripple { position: absolute; left: 50%; top: calc(var(--tn-my) + 45.65px); width: 0; height: 0; }
  .intro__ripple span { position: absolute; left: -70px; top: -9px; width: 140px; height: 18px; border-radius: 50%; border: 1px solid rgba(200, 241, 105, .6); opacity: 0;
    animation: tn-ripple 1.5s cubic-bezier(.2, .6, .2, 1) 1.95s forwards; }
  .intro__ripple span + span { animation-delay: 2.2s; }

  .intro__center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; }
  .intro__fly { display: block; width: 132px; height: 132px; flex: none; }
  .intro__mark { display: block; width: 132px; height: 132px; overflow: visible; animation: tn-glow 1.8s ease 2.35s both; }
  /* Terrazas: la <g> se contrae en X y el <path> toma cuerpo en Y */
  .intro__tierx { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleX(var(--sx));
    animation: tn-tier-x .5s cubic-bezier(.16, 1, .3, 1) calc(1.55s + var(--t) * 80ms) forwards; }
  .intro__tier { fill: currentColor; transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(var(--sy)); opacity: 0;
    animation: tn-show .18s ease calc(1.5s + var(--t) * 80ms) forwards,
               tn-tier-y .38s cubic-bezier(.3, 1.45, .5, 1) calc(1.89s + var(--t) * 80ms) forwards,
               tn-tier-cool .9s ease calc(1.89s + var(--t) * 80ms) both; }

  .intro__word { width: min(640px, 90vw); height: 88px; flex: none; display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: 40px; line-height: 1.08; letter-spacing: -.035em; font-weight: var(--tn-fw-semibold); color: #fff; }
  .intro__word span { display: block; opacity: 0; animation: tn-letter .8s var(--tn-ease-out-expo) calc(var(--tn-letters) + var(--i, 0) * 100ms) forwards; }
  .intro__word span + span { --i: 1; }
  .intro__letter { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: tn-letter .8s var(--tn-ease-out-expo) forwards; animation-delay: calc(var(--tn-letters) + var(--i) * 65ms); }
  .intro__tag { font-family: var(--tn-font-mono); font-size: 12px; line-height: 18px; height: 18px; letter-spacing: .32em; text-transform: uppercase; color: var(--tn-ink-300); opacity: 0; margin-top: -8px; text-align: center; padding: 0 20px; white-space: nowrap;
    animation: tn-fade-up .7s var(--tn-ease-out-expo) calc(var(--tn-outro) - 1s) forwards, tn-fade-out .3s ease calc(var(--tn-outro) - .3s) forwards; }
  .intro__bar { width: 160px; height: 2px; flex: none; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; opacity: 0;
    animation: tn-fade-in .3s ease calc(var(--tn-outro) - 1s) forwards, tn-fade-out .3s ease calc(var(--tn-outro) - .3s) forwards; }
  .intro__bar i { display: block; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; animation: tn-bar .8s cubic-bezier(.65,0,.35,1) calc(var(--tn-outro) - .95s) forwards; }
  .intro__skip { position: absolute; right: 24px; bottom: 22px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--tn-ink-200); font-size: 12.5px; font-weight: var(--tn-fw-medium); opacity: 0; animation: tn-fade-in .4s ease .6s forwards; }
  .intro__skip:hover { background: rgba(255,255,255,.1); color: #fff; }

  /* ==========================================================================
     Vuelo final: sólo la marca viaja al encabezado (48 px en 56,44).
     Centro destino (80,68), escala 48/132; el nuevo descriptor no se comprime.
     ========================================================================== */
  @media (min-width: 901px) {
    html.has-intro .intro__fly { animation: tn-fly-mark .6s cubic-bezier(.7, 0, .2, 1) calc(var(--tn-outro) - 180ms) forwards; }
    html.has-intro .intro__word { animation: tn-fade-out .35s ease calc(var(--tn-outro) - 180ms) forwards; }
  }
  html.has-intro .intro { --tn-my: calc(50% - 95px); }
  @keyframes tn-fly-mark { to { transform: translate(calc(80px - 50vw), calc(163px - 50vh)) scale(.363636); } }
  @keyframes tn-fly-word { to { transform: translate(calc(174.42px - 50vw), calc(15.87px - 50vh)) scale(.3565); } }

  /* ---------- keyframes de la intro ---------- */
  @keyframes tn-chaos-collapse { to { transform: scaleY(.1375); } }
  @keyframes tn-tier-x { to { transform: none; } }
  @keyframes tn-tier-y { to { transform: none; } }
  @keyframes tn-tier-cool { 0% { fill: #F6FFE4; } 100% { fill: currentColor; } }
  @keyframes tn-beam { 0% { opacity: 1; transform: scaleY(0); } 30% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
  @keyframes tn-spark { 0% { opacity: 0; transform: translate(var(--x), 0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--x) * 1.8), calc(var(--h) * -1)) scale(.35); } }
  @keyframes tn-ripple { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(6.5, 4); } }
  @keyframes tn-sky { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: .45; } }
  @keyframes tn-show { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tn-glow { 0% { filter: drop-shadow(0 0 0 rgba(200,241,105,0)); } 35% { filter: drop-shadow(0 0 30px rgba(200,241,105,.6)); } 100% { filter: drop-shadow(0 0 14px rgba(200,241,105,.22)); } }
  @keyframes tn-letter { from { opacity: 0; transform: translateY(22px) scaleY(1.15); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes tn-fade-in { to { opacity: 1; } }
  @keyframes tn-fade-out { to { opacity: 0; } }
  @keyframes tn-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes tn-bar { to { transform: scaleX(1); } }
  @keyframes tn-intro-center-out { to { opacity: 0; transform: scale(.94) translateY(-6px); filter: blur(4px); } }
  /* La intro se repliega exactamente sobre el panel de marca (51,22 % = 1.05fr / 2.05fr) */
  @keyframes tn-intro-clip { to { clip-path: inset(0 48.78% 0 0); } }
  @keyframes tn-intro-fade { to { opacity: 0; visibility: hidden; } }

  @media (max-width: 900px) {
    /* el wordmark se achica: el centro de la marca baja la mitad de lo que se achica */
    html.has-intro .intro { --tn-my: calc(50% - 81px); }
    .intro__word { height: 60px; font-size: clamp(23px, 5.8vw, 27px); }
    .intro__tag { font-size: 10px; letter-spacing: .18em; padding: 0; }
    .intro__center { animation: tn-intro-center-out .55s var(--tn-ease) calc(var(--tn-outro) - 200ms) forwards; }
    html.has-intro .intro { animation: tn-intro-wipe .8s var(--tn-ease-out-expo) calc(var(--tn-outro) - 100ms) forwards, tn-intro-fade .4s ease calc(var(--tn-outro) + 500ms) forwards; }
    html.has-intro .auth__form .auth-anim { animation-delay: calc(var(--tn-outro) + 150ms + var(--i) * 70ms); }
    @keyframes tn-intro-wipe { to { clip-path: inset(0 0 calc(100% - 131px) 0); } }
  }

  .auth-page--epic { background: var(--tn-ink-950); color: var(--tn-on-ink); }
  .epic-bg { position: fixed; inset: 0; z-index: 0; background: var(--tn-ink); }
  .epic-bg__canvas { display: block; width: 100%; height: 100%; }
  .epic-bg__shade { position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(5,15,13,.62) 0%, rgba(5,15,13,.16) 32%, rgba(5,15,13,0) 50%, rgba(5,15,13,.3) 70%, rgba(5,15,13,.66) 100%),
      linear-gradient(0deg, rgba(5,15,13,.85) 0%, rgba(5,15,13,0) 44%),
      linear-gradient(180deg, rgba(5,15,13,.55) 0%, rgba(5,15,13,0) 20%); }
  .epic { position: relative; z-index: 1; min-height: 100vh; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); grid-template-rows: auto minmax(0, 1fr) auto auto;
    column-gap: clamp(32px, 6vw, 112px); row-gap: 22px; padding: 44px 56px 30px; }
  .epic__brand { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; display: flex; align-items: center; gap: 14px; min-width: 0; }
  .epic__mark { display: block; width: 48px; height: 48px; flex: none; }
  .epic__identity { min-width: 0; }
  .epic__identity p { margin: 0; color: #fff; font-size: clamp(16px, 1.55vw, 21px); font-weight: var(--tn-fw-semibold); line-height: 1.25; letter-spacing: -.025em; max-width: 28ch; text-wrap: balance; }
  .epic__identity > span { display: block; margin-top: 6px; color: var(--tn-ink-200); font-size: 12px; letter-spacing: .06em; }
  .epic__brand .auth__lockup { display: block; }
  .epic__storywrap { grid-column: 1; grid-row: 3; align-self: end; min-width: 0; }
  .epic__foot { grid-column: 1; grid-row: 4; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; max-width: 600px; font-size: 12px; color: var(--tn-ink-200); }
  .epic__credit { display: inline-flex; align-items: center; gap: 10px; line-height: 20px; white-space: nowrap; opacity: .92; }
  .epic__credit img { display: block; height: 20px; width: auto; }
  .epic__panel { grid-column: 2; grid-row: 1 / 5; align-self: center; width: 100%; }
  .epic__pause.epic__pause--mobile { display: none; }

  /* Textos de cada fondo */
  .epic__story { display: flex; flex-direction: column; gap: 28px; max-width: 620px; }
  .epic__caps { display: grid; }
  .epic__cap { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; align-self: end; min-width: 0; visibility: hidden; }
  .epic__cap.is-active, .epic__cap.is-out { visibility: visible; }
  .epic__kicker { display: inline-flex; flex-wrap: wrap; min-width: 0; white-space: normal; align-items: center; gap: 10px; font-size: 12px; font-weight: var(--tn-fw-medium); letter-spacing: .16em; text-transform: uppercase; color: var(--tn-ink-200); }
  .epic__kicker b { font-weight: var(--tn-fw-medium); letter-spacing: .04em; color: var(--tn-signal); }
  .epic__title { margin: 0; font-size: clamp(2.3rem, .9rem + 2.9vw, 3.9rem); line-height: 1.01; letter-spacing: -0.042em; font-weight: var(--tn-fw-semibold); color: #fff; max-width: 15ch; text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 2px 40px rgba(0,0,0,.45); }
  .epic__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--tn-ink-200); max-width: 46ch; }
  .epic__cap.is-active .epic__kicker { animation: tn-ep-in .8s var(--tn-ease-out-expo) .1s both; }
  .epic__cap.is-active .epic__title { animation: tn-ep-title 1.1s var(--tn-ease-out-expo) .18s both; }
  .epic__cap.is-active .epic__text { animation: tn-ep-in .9s var(--tn-ease-out-expo) .34s both; }
  .epic__cap.is-out { animation: tn-ep-out .5s cubic-bezier(.6, 0, .8, .3) forwards; }
  @keyframes tn-ep-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
  @keyframes tn-ep-title { from { opacity: 0; transform: translateY(26px) scale(.98); filter: blur(10px); letter-spacing: -0.01em; } }
  @keyframes tn-ep-out { to { opacity: 0; transform: translateY(-14px); filter: blur(8px); } }

  /* Selector de fondos + pausa */
  .epic__nav { display: flex; align-items: flex-end; gap: 16px; }
  .epic__tabs { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
  .epic__tab { display: flex; flex-direction: column; align-items: stretch; gap: 9px; padding: 6px 0 4px; border: 0; background: none; color: var(--tn-ink-300); font: inherit; font-size: 12px; text-align: left; cursor: pointer; border-radius: 4px; }
  .epic__tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease; }
  .epic__tab:hover { color: var(--tn-on-ink); }
  .epic__tab[aria-current="true"] { color: #fff; }
  .epic__tab i { display: block; height: 2px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
  .epic__tab i b { display: block; height: 100%; background: var(--tn-signal); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px rgba(200,241,105,.6); }
  .epic__tab.is-done i b { transform: scaleX(1); opacity: .4; box-shadow: none; }
  .epic__tab[aria-current="true"] i b { transform: scaleX(var(--p, 1)); }
  .epic__pause { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(5,15,13,.35); color: var(--tn-on-ink-2); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .epic__pause:hover { background: rgba(255,255,255,.1); color: #fff; }
  .epic__pause .ico { stroke: currentColor; }
  .epic__ico-pause { fill: none; stroke-width: 2.4; }
  .epic__ico-play { fill: currentColor; stroke-linejoin: round; stroke-width: 1.5; }
  .epic__ico-play, .epic__pause[aria-pressed="true"] .epic__ico-pause { display: none; }
  .epic__pause[aria-pressed="true"] .epic__ico-play { display: block; }
  .epic__tab:focus-visible, .epic__pause:focus-visible { outline: 2px solid var(--tn-signal); outline-offset: 3px; }
  html.is-bg-static .epic__pause { visibility: hidden; } /* reducir movimiento: el fondo ya está quieto */

  /* Tarjeta de ingreso: cristal oscuro con un aura que la recorre */
  .epic__card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 24px; padding: 34px 32px 28px; border-radius: 24px; color: var(--tn-on-ink);
    background: linear-gradient(165deg, rgba(22, 58, 52, .74), rgba(6, 18, 15, .86));
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.1), 0 50px 100px -40px rgba(0,0,0,.85);
    --tn-surface: rgba(255,255,255,.05); --tn-surface-2: rgba(255,255,255,.03); --tn-sunken: rgba(255,255,255,.09);
    --tn-line: rgba(255,255,255,.12); --tn-line-strong: rgba(255,255,255,.2);
    --tn-text: #F3F8F5; --tn-text-2: var(--tn-ink-200); --tn-text-3: var(--tn-ink-300);
    --tn-brand: var(--tn-signal); --tn-ring: 0 0 0 3px rgba(200, 241, 105, .22);
    animation: tn-card-in 1.1s var(--tn-ease-out-expo) .05s both; }
  .epic__card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--tn-aura), rgba(200,241,105,0) 0deg, rgba(200,241,105,.9) 46deg, rgba(30,140,124,.45) 96deg, rgba(200,241,105,0) 150deg, rgba(200,241,105,0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
  .epic__card .t-h1 { color: #fff; }
  .epic__card [data-remember-username] { accent-color: var(--tn-signal); }
  .epic__card .input:hover { border-color: rgba(255,255,255,.34); }
  .epic__card .input::placeholder { color: rgba(255,255,255,.35); }
  .epic__card input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 40px #12302B inset; caret-color: #fff; }
  @keyframes tn-card-in { from { opacity: 0; transform: translateY(30px) scale(.97); filter: blur(10px); } }
  @keyframes tn-aura { to { --tn-aura: 360deg; } }
  @media (prefers-reduced-motion: no-preference) {
    html.is-bg-enhanced:not(.is-bg-static) .epic__card::before { animation: tn-aura 7s linear infinite; }
  }

  /* Con intro: todo entra después de que el iris abre el fondo */
  html.has-intro .epic .auth-anim { animation-delay: calc(var(--tn-outro) + 520ms + var(--i) * 80ms); }
  html.has-intro .epic__panel .auth-anim { animation-delay: calc(var(--tn-outro) + 420ms + var(--i) * 70ms); }
  html.has-intro .epic .epic__brand.auth-anim--land { animation: tn-land .01s linear calc(var(--tn-outro) + 420ms) both; }
  html.has-intro .epic__card { animation-delay: calc(var(--tn-outro) + 200ms); }
  html.has-intro.is-intro-skipped .epic .auth-anim, html.has-intro.is-intro-skipped .epic__panel .auth-anim { animation-name: tn-auth-in-b; animation-duration: .7s; animation-delay: calc(140ms + var(--i) * 55ms); }
  html.has-intro.is-intro-skipped .epic__card { animation-delay: 60ms; }

  /* La intro se abre como un iris desde el centro de la marca y deja ver el fondo vivo (con un anillo señal) */
  html.has-intro .auth-page--epic .intro {
    -webkit-mask-image: radial-gradient(circle at 50% var(--tn-my), transparent var(--tn-iris), #000 calc(var(--tn-iris) + 1px));
    mask-image: radial-gradient(circle at 50% var(--tn-my), transparent var(--tn-iris), #000 calc(var(--tn-iris) + 1px));
    animation: tn-iris 1.15s cubic-bezier(.7, 0, .2, 1) calc(var(--tn-outro) - 80ms) forwards, tn-intro-fade .3s ease calc(var(--tn-outro) + 1.05s) forwards; }
  html.has-intro.is-intro-skipped .auth-page--epic .intro { animation: tn-intro-fade .38s ease forwards; }
  .auth-page--epic .intro::after { content: ""; position: absolute; left: calc(50% - var(--tn-iris) - 2px); top: calc(var(--tn-my) - var(--tn-iris) - 2px);
    width: calc(var(--tn-iris) * 2 + 4px); height: calc(var(--tn-iris) * 2 + 4px); border-radius: 50%; pointer-events: none;
    border: 2px solid var(--tn-signal); box-shadow: 0 0 40px 6px rgba(200, 241, 105, .45), inset 0 0 40px 6px rgba(200, 241, 105, .35); opacity: 0; }
  html.has-intro .auth-page--epic .intro::after { animation: tn-iris-ring 1.15s ease calc(var(--tn-outro) - 80ms) forwards; }
  @keyframes tn-iris { to { --tn-iris: 150vmax; } }
  @keyframes tn-iris-ring { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: .8; } 100% { opacity: 0; } }

  @media (max-width: 900px) {
    .epic { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(20px, 1fr) auto auto; row-gap: 18px; padding: 22px 16px 18px; min-height: 100vh; min-height: 100svh; }
    .epic__brand { max-width: calc(100% - 48px); gap: 10px; }
    .epic__mark { width: 38px; height: 38px; }
    .epic__identity p { font-size: 16px; }
    .epic__identity > span { font-size: 11px; letter-spacing: .02em; }
    .epic__brand .auth__lockup { width: 160px; }
    .epic__pause.epic__pause--mobile { display: grid; position: absolute; top: 22px; right: 16px; }
    .epic__storywrap { grid-row: 2; align-self: start; }
    .epic__story { gap: 0; }
    .epic__title { font-size: 1.75rem; max-width: 18ch; }
    .epic__text, .epic__nav { display: none; }
    .epic__foot { grid-column: 1; grid-row: 5; justify-content: center; text-align: center; gap: 10px 18px; }
    .epic__panel { grid-column: 1; grid-row: 4; align-self: end; margin: 0 -16px; width: auto; }
    .epic__card { border-radius: 22px 22px 0 0; padding: 26px 20px 30px; }
    html.has-intro .auth-page--epic .intro { animation: tn-iris 1s cubic-bezier(.7, 0, .2, 1) calc(var(--tn-outro) - 120ms) forwards, tn-intro-fade .3s ease calc(var(--tn-outro) + .9s) forwards; }
  }


  /* Native form remains immediately visible on skip, focus and without JS. */
  html:not(.has-intro) .epic .auth-anim, html:not(.has-intro) .epic__card { animation: none; }
  .intro[hidden], .epic__pause[hidden], .epic__tab[hidden], .epic-bg__canvas[hidden] { display: none; }
  html.is-bg-paused .epic *, html.is-bg-paused .epic *::before, html.is-bg-paused .epic *::after { animation-play-state: paused !important; }
  html.is-bg-paused .epic__cap, html.is-bg-paused .epic__cap * { animation: none !important; }
  .epic__card .btn--block { height: auto; min-height: var(--tn-control-h-md); white-space: normal; padding-block: 10px; }
  .epic__card .btn--lg { min-height: var(--tn-control-h-lg); }
  .epic__foot .mono { min-width: 0; overflow-wrap: anywhere; }
  .epic__card .field__error { color: #FFB6B1; }
  .intro__skip:focus-visible { outline: 2px solid var(--tn-signal); outline-offset: 4px; }
  .auth-page--epic .skip-link { top: 0; max-width: calc(100% - 32px); transform: translateY(-100%); transition: transform var(--tn-dur-2) var(--tn-ease); }
  .auth-page--epic .skip-link:focus { top: 12px; transform: none; }
  @media (prefers-reduced-motion: reduce) { .intro { display: none !important; } .epic *, .epic *::before, .epic *::after { animation: none !important; } }
}

/* Campo de contraseña del ingreso: puntos legibles, ojo que cambia, autocompletado del color del campo y error visible. */
.epic__card .input-group > input[type="password"] { font-family: Verdana, "DejaVu Sans", system-ui, sans-serif; letter-spacing: .12em; }
[data-tn-password-toggle] .tn-eye-on { display: contents; }
[data-tn-password-toggle] .tn-eye-off { display: none; }
[data-tn-password-toggle][aria-pressed="true"] .tn-eye-on { display: none; }
[data-tn-password-toggle][aria-pressed="true"] .tn-eye-off { display: block; }
.epic__card [data-tn-password-toggle] { color: var(--tn-text-3); }
.epic__card [data-tn-password-toggle]:hover { color: var(--tn-text); }
.epic__card .input-group:has(> input:-webkit-autofill), .epic__card .input-group:has(> input:autofill) { background: #12302B; }
.epic__card input:-webkit-autofill, .epic__card input:-webkit-autofill:hover, .epic__card input:-webkit-autofill:focus { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 40px #12302B inset; caret-color: #fff; transition: background-color 600000s 0s; }
.epic__card .input[aria-invalid="true"], .epic__card .input-group:has(> input[aria-invalid="true"]) { border-color: #F2A3A3; }
.epic__card .input-group:has(> input[aria-invalid="true"]) > input { border: 0; }