/* =========================================================
   Cooperativa Ferroviaria del Pacífico
   Pantalla de acceso (login) — hoja de estilos aislada.

   Adaptada de docs/diseno/login_referencia/login.css. Reutiliza los
   mismos tokens institucionales que static/css/portal_inicio.css
   (verde/naranja), pero vive en su propio archivo porque esta pantalla
   se sirve ANTES de autenticar y no comparte layout con el portal
   autenticado (sin sidebar, sin topbar de sesión).
   ========================================================= */

/* ---------- 1. Variables ---------- */
:root {
  --green-900: #0e4429;
  --green-800: #135c37;
  --green-700: #197544;
  --green-600: #1e8449;
  --green-500: #2ea45f;
  --green-400: #4cbd7c;
  --green-300: #82d3a2;
  --green-100: #d9efe2;
  --green-50:  #eaf6ef;

  --orange-600: #d9760f;
  --orange-500: #f39c12;
  --orange-400: #f0a13c;

  --ink:   #17241d;
  --text:  #33453c;
  --muted: #6d7f76;
  --soft:  #94a49c;

  --bg:     #ffffff;
  --line:   #e3eae6;
  --line-2: #eef2f0;
  --danger: #c3372b;

  --radius:    14px;
  --radius-sm: 10px;
  --shadow:    0 1px 2px rgba(14,68,41,.05), 0 1px 10px rgba(14,68,41,.04);
  --shadow-md: 0 8px 26px rgba(14,68,41,.10);
  --shadow-lg: 0 18px 60px rgba(14,68,41,.14);

  /* Sin dependencia de Google Fonts (ver decisión en el informe de
     integración): "Inter" encabeza la pila por si algún día se sirve
     localmente, pero el sistema cae de inmediato en sus propias
     tipografías. Igual que static/css/portal_inicio.css. */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-script: "Segoe Script", "Brush Script MT", cursive;
}

/* ---------- 2. Reset (ámbito de esta página) ---------- */
.login-page, .login-page *, .login-page *::before, .login-page *::after { box-sizing: border-box; }

.login-page {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.login-page h1, .login-page h2, .login-page h3, .login-page h4, .login-page p { margin: 0; }
.login-page ul { margin: 0; padding: 0; list-style: none; }
.login-page a  { color: inherit; text-decoration: none; }
.login-page button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
.login-page img { max-width: 100%; display: block; }

.login-page .icon { width: 20px; height: 20px; stroke: currentColor; fill: none;
        stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.login-page .icon--sm { width: 16px; height: 16px; }
.login-page .icon--lg { width: 26px; height: 26px; }

.login-page .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================
   3. Barra de navegación
   ========================================================= */
.login-page .nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 28px;
  padding: 12px 30px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.login-page .brand { display: flex; align-items: center; gap: 13px; }
.login-page .brand__logo { position: relative; width: 60px; height: 38px; flex: none; overflow: hidden; }
.login-page .brand__logo img { position: absolute; top: -14px; left: -1px; width: 62px; max-width: none; height: 62px; object-fit: contain; }
.login-page .brand__name { font-size: 18.5px; font-weight: 800; color: var(--green-800); letter-spacing: -.2px; }
.login-page .brand__tagline { font-size: 12.5px; color: var(--muted); }

.login-page .nav__menu {
  display: flex; align-items: center; gap: 30px;
  margin: 0 auto;
}
.login-page .nav__link {
  position: relative;
  padding: 6px 0;
  font-size: 14.5px; font-weight: 500; color: var(--text);
  transition: color .15s;
}
.login-page .nav__link:hover { color: var(--green-700); }
.login-page .nav__link--active { color: var(--green-700); font-weight: 600; }
.login-page .nav__link--active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2.5px; border-radius: 2px; background: var(--green-600);
}

.login-page .nav__right { display: flex; align-items: center; gap: 18px; }
.login-page .nav__toggle { display: none; padding: 8px; border-radius: 9px; color: var(--green-800); }
.login-page .nav__toggle:hover { background: var(--green-50); }

/* =========================================================
   4. Botones
   ========================================================= */
.login-page .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 600;
  transition: transform .12s, box-shadow .18s, background .18s, border-color .18s, color .18s;
}
.login-page .btn:active { transform: translateY(1px); }
.login-page .btn--block { width: 100%; }

.login-page .btn--primary {
  background: linear-gradient(90deg, var(--green-700), var(--green-500));
  color: #fff;
  box-shadow: 0 6px 18px rgba(31,139,81,.28);
}
.login-page .btn--primary:hover { box-shadow: 0 9px 24px rgba(31,139,81,.38); }
.login-page .btn--primary .btn__arrow { transition: transform .18s; }
.login-page .btn--primary:hover .btn__arrow { transform: translateX(4px); }
.login-page .btn--primary.is-loading { pointer-events: none; opacity: .85; }
.login-page .btn--primary:disabled { pointer-events: none; opacity: .85; }

/* =========================================================
   5. Hero
   ========================================================= */
.login-page .hero {
  position: relative;
  display: grid;
  /* Fase 17: 30% / resto / 30% en vez de columnas fijas en píxeles --
     acerca la proporción a la referencia (texto ~29-31%, escena
     ~42-45%, login ~29-31%) y, al ser proporcional, el centro gana
     margen real en vez de quedar fijo en 1fr contra dos columnas
     rígidas. El `gap` baja de 34px a 22px: menos aire entre columnas
     ayuda a que se lean como un mismo hero y no como tres cajas. */
  grid-template-columns: minmax(340px, 30%) minmax(0, 1fr) minmax(370px, 30%);
  gap: 22px;
  align-items: start;
  /* Menos padding vertical que antes (hero más compacto, punto 13). */
  padding: 36px 30px 38px;
  background:
    radial-gradient(1100px 620px at 42% 24%, #eef8f2 0%, rgba(238,248,242,0) 62%),
    linear-gradient(160deg, #f6faf7 0%, #ffffff 46%, #f3f9f5 100%);
  overflow: hidden;
}

/* ---------- 5.1 Columna de texto ---------- */
.login-page .hero__copy { position: relative; z-index: 4; padding-top: 14px; max-width: 470px; }

.login-page .eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 3.2px;
  text-transform: uppercase; color: var(--soft);
  margin-bottom: 14px;
}

.login-page .hero__title {
  font-size: 54px; line-height: 1.02; font-weight: 800;
  letter-spacing: -1.8px; color: var(--green-800);
  margin-bottom: 20px;
}
.login-page .hero__title em { font-style: normal; color: var(--orange-500); }

.login-page .hero__text {
  font-size: 16.5px; line-height: 1.6; color: var(--text);
  max-width: 440px; margin-bottom: 30px;
}

.login-page .features { display: flex; flex-direction: column; gap: 18px; }
.login-page .feature { display: flex; align-items: flex-start; gap: 15px; }
.login-page .feature__icon {
  width: 42px; height: 42px; flex: none;
  border-radius: 12px; background: var(--green-50); color: var(--green-600);
  display: grid; place-items: center;
}
.login-page .feature__title { font-size: 15px; font-weight: 700; color: var(--ink); }
.login-page .feature__text  { font-size: 13.5px; color: var(--muted); }

.login-page .signature { margin-top: 38px; }
.login-page .signature__text {
  font-family: var(--font-script);
  font-size: 30px; line-height: 1;
  color: var(--green-800);
  transform: rotate(-3deg);
  display: inline-block;
}
.login-page .signature__swoosh { display: block; margin-top: 4px; color: var(--orange-500); }

/* ---------- 5.2 Escena institucional (decorativa, se oculta en
   pantallas angostas; ver regla @media 1360px más abajo).

   Fase 18 -- estructura de capas real en vez de "foto con un PNG
   adentro":

     .scene                        (contenedor, overflow:VISIBLE)
       .scene__background-frame    (el ÚNICO elemento recortado/
                                     difuminado: overflow:hidden +
                                     mask-image + esquina curva)
         .scene__background        (la fotografía, cover)
         ::before / ::after        (oscurecido inferior + arcos,
                                     confinados dentro del marco)
       .scene__label                (fuera del marco, nunca recortado)
       img.scene__foreground        (fuera del marco: puede sobresalir
                                      del paisaje sin que nada lo corte)

   `.scene__background-frame` tiene su propio `z-index` (crea su
   propio contexto de apilamiento) precisamente para que sus arcos
   internos nunca puedan competir por z-index con `.scene__label` o
   `.scene__foreground` -- ese fue el bug real de la Fase 17. */
.login-page .scene {
  position: relative;
  height: 600px;
  min-width: 0;
  margin-top: -4px;
  /* Ya NO se recorta ni se agranda con margin-left negativo: el marco
     de abajo es quien se encarga de extenderse hacia el gap. Dejar
     `.scene` con overflow visible es lo que permite que el foreground
     sobresalga del paisaje hacia la zona blanca (punto 5). */
  overflow: visible;
}

.login-page .scene__background-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Se extiende exactamente el ancho del gap del grid (22px) hacia la
     izquierda: el paisaje arranca antes del borde nominal de la
     columna, "detrás" de donde nace el degradado de la columna de
     texto -- punto 10. */
  margin-left: -22px;
  width: calc(100% + 22px);
  overflow: hidden;
  /* Esquina superior izquierda curva en vez de un ángulo recto: es lo
     que, junto con la máscara de abajo, rompe la sensación de
     "rectángulo de foto" (punto 4). El resto de esquinas se quedan
     rectas a propósito -- el borde derecho puede quedar más definido
     porque está cerca del login, tal como pide el prompt. */
  border-top-left-radius: 240px;
  border-bottom-left-radius: 90px;
  /* Máscara real (no un degradado blanco superpuesto): el borde
     izquierdo se desvanece hasta la transparencia, revelando el fondo
     claro del propio hero por debajo. Esto es lo que hace que el
     usuario no perciba dónde empieza el rectángulo de la fotografía en
     vez de simular el efecto con una capa blanca encima. */
  -webkit-mask-image: linear-gradient(
    100deg,
    transparent 0%,
    rgba(0,0,0,.30) 7%,
    rgba(0,0,0,.75) 16%,
    #000 27%
  );
  mask-image: linear-gradient(
    100deg,
    transparent 0%,
    rgba(0,0,0,.30) 7%,
    rgba(0,0,0,.75) 16%,
    #000 27%
  );
}

.login-page .scene__background {
  position: absolute;
  inset: 0;
  background-image: url("../img/hero-portal-asociado.84bcd94b403c.png");
  /* Un solo valor en `background-size` deja la altura en `auto`, y como
     el resultado no llega a cubrir el alto del marco, el navegador
     repite la imagen (se ve como bandas apiladas): usar SIEMPRE los dos
     valores (o `cover`), nunca uno solo. `center 32%` sube el encuadre
     -- más cielo, más bahía y más montaña visibles, menos primer plano
     de la vía -- para acercarse a la referencia, que "se ve bastante
     cielo". */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 32%;
}
/* Oscurece la franja inferior para que el foreground (objetos reales,
   sin sombra propia sobre el paisaje) no quede "flotando" y para que
   el texto de .scene__label conserve contraste sobre la foto. Arranca
   tarde y con poca intensidad para no mezclarse con el degradado de la
   máscara del marco (eso fue lo que producía el "lavado" gris de fases
   anteriores). */
.login-page .scene__background-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(14,68,41,0) 58%, rgba(9,48,29,.30) 100%);
  pointer-events: none;
}

/* Tres bandas concéntricas -- ANILLOS, nunca discos rellenos -- que
   nacen arriba a la izquierda y recorren diagonalmente la parte
   superior del paisaje, confinadas dentro del marco (así se difuminan
   junto con la foto en el borde izquierdo, en vez de quedar como
   círculos sueltos flotando sobre el degradado blanco). */
.login-page .scene__background-frame::after {
  content: "";
  position: absolute;
  top: -560px; left: -520px;
  z-index: 2;
  width: 1300px; height: 1300px;
  border-radius: 50%;
  border: 90px solid rgba(30,132,73,.08);
  pointer-events: none;
}
.login-page .scene__background::before {
  content: "";
  position: absolute;
  top: -460px; left: -400px;
  z-index: 3;
  width: 1060px; height: 1060px;
  border-radius: 50%;
  border: 70px solid rgba(30,132,73,.12);
  pointer-events: none;
}
.login-page .scene__background::after {
  content: "";
  position: absolute;
  top: -360px; left: -300px;
  z-index: 4;
  width: 900px; height: 900px;
  border-radius: 50%;
  border: 54px solid rgba(30,132,73,.16);
  pointer-events: none;
}

.login-page .scene__label {
  /* Fuera de `.scene__background-frame`: por eso puede tener z-index
     bajo sin correr el riesgo de la Fase 17, donde los arcos y el
     rótulo competían por el mismo z-index dentro del mismo contexto de
     apilamiento. Ahora el marco entero -- foto + arcos -- vive en su
     propio contexto (z-index:1 con position:absolute), así que
     cualquier z-index aquí ya queda por encima de todo lo suyo.
     z-index:5 (no 2): por encima también de `.scene__foreground`
     (z-index:3) por seguridad, aunque en la posición actual no llegan a
     superponerse -- así el rótulo nunca puede quedar tapado si algún
     ajuste futuro mueve al foreground más arriba. */
  /* Fase 21: subido de top:22% a top:9% y angostado de 230px a 205px de
     max-width. A top:22% el bloque de 4 líneas (~120px de alto) quedaba
     a solo ~43px del borde superior real de la laptop dentro del PNG
     (el recuadro del <img> tiene margen transparente arriba, así que el
     contenido visible empieza más abajo de lo que sugiere su propio
     bounding box) -- una separación que se leía como "encima del
     computador". Con top:9% el hueco pasa a ~115px, sobre una franja de
     cielo/montaña despejada y sin tocar laptop, teléfono, planta, taza
     ni libreta. */
  position: absolute; left: 11%; top: 9%; z-index: 5;
  max-width: 205px;
  color: #fff;
  font-size: 17px; font-weight: 800; letter-spacing: 3px; line-height: 1.55;
  /* El encuadre más alto del paisaje (Fase 17/18, para mostrar más
     cielo) dejó al rótulo sobre una zona más clara de la foto y el
     texto quedó débil con una sola sombra suave. Se refuerza con dos
     sombras apiladas -- una oscura y ajustada que actúa casi como
     contorno, otra más amplia y difusa -- para que el blanco se lea con
     contraste sólido sobre cualquier tramo del cielo o la montaña. */
  text-shadow:
    0 1px 3px rgba(5,32,19,.9),
    0 4px 14px rgba(5,32,19,.6);
}
.login-page .scene__rule { width: 40px; height: 3px; border-radius: 2px; background: var(--orange-500); margin-top: 12px; }

.login-page .scene__foreground {
  position: absolute;
  /* Fase 18: capa independiente, fuera del marco recortado. `left`
     negativo (no `right`) es lo que permite que la planta/taza
     sobresalgan hacia la zona blanca de la izquierda -- punto 5 --, y
     `bottom` casi en 0 evita el margen vacío debajo de la libreta que
     pedía el punto 7. `right:auto` porque el ancho ya no se ancla desde
     la derecha. */
  left: -15%;
  right: auto;
  bottom: 0%;
  z-index: 3;
  /* Ancho dentro de 76-84% (punto 6); la altura queda libre (`auto`)
     para que la proporción real de la imagen (4:3) la determine sola,
     sin usar `object-fit`: con un solo eje fijo en un <img> normal la
     deformación es imposible por construcción. */
  width: 80%;
  height: auto;
  max-width: none;
  pointer-events: none;
}

/* =========================================================
   6. Tarjeta de acceso
   ========================================================= */
.login-page .login {
  position: relative; z-index: 10;
  /* Fase 17: acerca visualmente la tarjeta a la escena -- un pequeño
     desplazamiento, no una superposición real. `margin-left` negativo
     la acerca al centro y `margin-top` la sube un poco; ninguno de los
     dos reduce el ancho/alto de la tarjeta ni el de sus campos, así que
     no hay riesgo de invadir inputs. `z-index: 10` ya la mantenía por
     encima de cualquier cosa de `.scene` desde la Fase 15. */
  margin-left: -14px;
  margin-top: -4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 24px 28px 26px;
}

.login-page .login__brand {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 16px;
}
.login-page .login__brand .brand__logo { width: 70px; height: 44px; }
.login-page .login__brand .brand__logo img { top: -16px; width: 72px; height: 72px; }
.login-page .login__brand .brand__name { font-size: 17.5px; line-height: 1.2; }

.login-page .login__title {
  font-size: 25px; font-weight: 800; color: var(--green-800);
  text-align: center; letter-spacing: -.5px;
}
.login-page .login__subtitle { font-size: 14.5px; color: var(--muted); text-align: center; margin-top: 4px; margin-bottom: 16px; }

.login-page .field { margin-bottom: 14px; }
.login-page .field__label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 7px; }

.login-page .control { position: relative; display: flex; align-items: center; }
.login-page .control__icon {
  position: absolute; left: 14px; color: var(--soft);
  pointer-events: none; transition: color .15s;
}
.login-page .control input {
  width: 100%; height: 50px;
  padding: 0 16px 0 44px;
  font: inherit; font-size: 14.5px; color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.login-page .control input::placeholder { color: var(--soft); }
.login-page .control input:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: 0 0 0 3px rgba(46,164,95,.14);
}
.login-page .control input:focus ~ .control__icon,
.login-page .control:focus-within .control__icon { color: var(--green-600); }

/* #fieldPass reserva el espacio del botón mostrar/ocultar en el campo de
   contraseña sin depender del atributo type (que el JS cambia a "text"). */
#fieldPass .control input { padding-right: 48px; letter-spacing: .08em; }

.login-page .control__toggle {
  position: absolute; right: 8px;
  padding: 8px; border-radius: 8px; color: var(--soft);
  transition: color .15s, background .15s;
}
.login-page .control__toggle:hover { color: var(--green-700); background: var(--green-50); }

.login-page .field.has-error .control input { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(195,55,43,.1); }
.login-page .field__error {
  display: none; align-items: center; gap: 6px;
  margin-top: 6px; font-size: 12.5px; color: var(--danger);
}
.login-page .field__error { list-style: none; padding: 0; }
.login-page .field__error li { display: flex; align-items: center; gap: 6px; }
.login-page .field.has-error .field__error { display: flex; flex-direction: column; align-items: flex-start; }

.login-page .hint {
  display: none; align-items: center; gap: 6px;
  margin-top: 6px; font-size: 12.5px; color: var(--orange-600);
}
.login-page .hint.is-visible { display: flex; }

.login-page .login__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 4px 0 20px;
}

.login-page .check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--text); }
.login-page .check input { position: absolute; opacity: 0; width: 0; height: 0; }
.login-page .check__box {
  width: 19px; height: 19px; flex: none;
  border: 1.6px solid var(--line); border-radius: 5px;
  background: #fff;
  display: grid; place-items: center;
  transition: background .15s, border-color .15s;
}
.login-page .check__box svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none;
                  stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .12s; }
.login-page .check input:checked + .check__box { background: var(--green-600); border-color: var(--green-600); }
.login-page .check input:checked + .check__box svg { opacity: 1; }
.login-page .check input:focus-visible + .check__box { box-shadow: 0 0 0 3px rgba(46,164,95,.18); }

.login-page .link-orange { font-size: 13.5px; font-weight: 600; color: var(--orange-600); text-decoration: underline; text-underline-offset: 2px; }
.login-page .link-orange:hover { color: var(--orange-500); }

.login-page .notice {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 14px; padding: 12px 16px;
  background: var(--green-50); border: 1px solid var(--green-100);
  border-radius: 11px;
}
.login-page .notice__icon { color: var(--green-600); margin-top: 1px; }
.login-page .notice__title { font-size: 13.5px; font-weight: 700; color: var(--green-800); }
.login-page .notice__text  { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* Mensaje global del formulario */
.login-page .form-alert {
  display: none; align-items: center; gap: 9px;
  margin-bottom: 16px; padding: 11px 14px;
  border-radius: 10px; font-size: 13px;
}
.login-page .form-alert.is-visible { display: flex; }
.login-page .form-alert--error   { background: #fdeceb; color: var(--danger); border: 1px solid #f7d4d1; }
.login-page .form-alert--success { background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-100); }

/* Spinner del botón */
.login-page .spinner {
  width: 17px; height: 17px; flex: none;
  border: 2.2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: login-spin .7s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

/* =========================================================
   7. Franja de beneficios
   ========================================================= */
.login-page .strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 20px 30px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.login-page .strip__item {
  display: flex; align-items: center; gap: 15px;
  padding: 0 28px;
  border-right: 1px solid var(--line);
}
.login-page .strip__item:last-child { border-right: 0; }
.login-page .strip__item .icon { color: var(--green-600); }
.login-page .strip__title { font-size: 15px; font-weight: 700; color: var(--ink); }
.login-page .strip__text  { font-size: 13px; color: var(--muted); }

/* =========================================================
   8. Pie de página
   ========================================================= */
/* Fase 19: la referencia aprobada SÍ usa el footer verde oscuro
   institucional (se había cambiado a uno blanco compacto en la Fase 18
   por una lectura distinta de esa misma referencia; esta fase la
   corrige). El texto legal (copyright) se mantiene igual que siempre --
   solo cambia el color de fondo y el color del texto para conservar
   contraste sobre verde oscuro. */
.login-page .footer {
  background: var(--green-800); color: #dcece3;
  padding: 18px 30px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  font-size: 12px;
}
.login-page .footer__brand strong { display: block; color: #fff; font-size: 14.5px; font-weight: 700; }
.login-page .footer__brand span { font-size: 12px; opacity: .8; }

.login-page .footer__links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; }
.login-page .footer__links a { color: inherit; opacity: .85; }
.login-page .footer__links a:hover { color: #fff; opacity: 1; text-decoration: underline; }
.login-page .footer__links i { width: 1px; height: 12px; background: rgba(255,255,255,.25); }

.login-page .footer__legal { font-size: 11.5px; text-align: right; opacity: .85; line-height: 1.4; }

/* =========================================================
   9. Animación de entrada
   ========================================================= */
.login-page .reveal { opacity: 0; transform: translateY(14px); }
.login-page .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion: reduce) {
  .login-page .reveal, .login-page .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .login-page .spinner { animation-duration: 2s; }
}

/* =========================================================
   10. Responsive
   ========================================================= */
@media (max-width: 1500px) {
  .login-page .hero__title { font-size: 48px; }
}

/* La escena decorativa asume ~480px de contenido en píxeles fijos, y
   `scale(.92)` no libera espacio real de layout (transform solo afecta
   el pintado). Con las tres columnas en su mínimo (copia 340 + escena
   440 + tarjeta 470 + separaciones 44 = 1294px) el diseño ya no cabe
   por debajo de ~1360px de ventana: el grid queda más ancho que el
   viewport y la tarjeta de login se pinta sobre la escena. El
   prototipo original ocultaba la escena recién en 1240px, un umbral
   dentro de esa zona rota. Se sube a 1360px -- el primer punto en el
   que las tres columnas vuelven a caber sin solaparse -- en vez de
   conservar un rango donde el diseño se rompe. La escena es decoración
   (aria-hidden) y ya estaba prevista para ocultarse en pantallas
   angostas; esto solo corrige DÓNDE ocurre ese corte. */
@media (max-width: 1360px) {
  .login-page .hero { grid-template-columns: minmax(0, 1fr) 460px; }
  .login-page .scene { display: none; }
  .login-page .hero__copy { max-width: 560px; padding-top: 6px; }
}

@media (max-width: 980px) {
  .login-page .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 8px 18px 14px;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .login-page .nav__menu.is-open { display: flex; }
  .login-page .nav__link { padding: 11px 4px; }
  .login-page .nav__link--active::after { display: none; }
  .login-page .nav__toggle { display: block; }
  .login-page .nav { justify-content: space-between; gap: 12px; }

  .login-page .hero { grid-template-columns: minmax(0, 1fr); padding: 30px 20px 40px; }
  .login-page .login { max-width: 520px; }
  .login-page .hero__title { font-size: 40px; }

  .login-page .strip { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .login-page .strip__item { padding: 0 16px; }
  .login-page .strip__item:nth-child(2n) { border-right: 0; }

  .login-page .footer { flex-direction: column; align-items: flex-start; }
  .login-page .footer__legal { text-align: left; }
}

@media (max-width: 560px) {
  .login-page .brand__tagline { display: none; }
  .login-page .brand__name { display: inline-block; max-width: 132px; font-size: 13px; line-height: 1.25; }
  .login-page .nav .brand__logo { width: 46px; height: 30px; }
  .login-page .nav .brand__logo img { width: 48px; height: 48px; top: -11px; }
  .login-page .nav { padding: 10px 16px; gap: 8px; }
  .login-page .hero__title { font-size: 33px; letter-spacing: -1px; }
  .login-page .hero__text { font-size: 15px; }
  .login-page .login { padding: 22px 18px 24px; }
  .login-page .login__brand { gap: 10px; }
  .login-page .login__brand .brand__name { font-size: 15px; }
  .login-page .strip { grid-template-columns: minmax(0, 1fr); }
  .login-page .strip__item { border-right: 0; }
  .login-page .login__row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Foco visible con teclado */
.login-page a:focus-visible,
.login-page button:focus-visible,
.login-page input:focus-visible { outline: 3px solid var(--green-300); outline-offset: 2px; }