/* ═══════════════════════════════════════════════════════════════════════
   acceso.css — entrar y registrar.

   Dos columnas: la marca en movimiento a la izquierda, el formulario a la
   derecha. En móvil la marca se encoge y pasa arriba — no desaparece,
   porque es lo único que le dice a alguien que llegó al sitio correcto.

   Como todo el resto: los colores, radios y espaciados salen de tokens.css.
   ═══════════════════════════════════════════════════════════════════════ */

.ac { background: var(--bg); color: var(--tx-1); font-family: var(--ff-ui);
  margin: 0; min-height: 100vh; }
.ac * { box-sizing: border-box; }

.ac-caja { display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
  min-height: 100vh; }

/* ── el lado de la marca ───────────────────────────────────────────── */
/* 🔴 El lado de la marca estaba CENTRADO verticalmente, así que arrancaba a
   una altura distinta en entrar (poco contenido) y en registro (mucho): al
   pasar de una a otra, la marca daba un salto. Arranca arriba, a una altura
   fija, y las dos pantallas se leen como la misma pantalla. */
.ac-lado {
  position: relative; display: flex; flex-direction: column;
  justify-content: flex-start; gap: var(--sp-8);
  padding: clamp(150px, 26vh, 240px) clamp(var(--sp-8), 5vw, var(--sp-12)) var(--sp-11);
  background: var(--sunken); border-right: 1px solid var(--line);
  overflow: hidden;
}
.ac-lado::before {
  content: ""; position: absolute; inset: -20% -20% auto -20%; height: 120%;
  background:
    radial-gradient(44% 46% at 70% 28%,
      color-mix(in srgb, var(--brand-blue) 15%, transparent), transparent 70%),
    radial-gradient(40% 44% at 26% 72%,
      color-mix(in srgb, var(--brand-green) 13%, transparent), transparent 70%);
  pointer-events: none;
}
.ac-lado > * { position: relative; }
.ac-volver { position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  color: var(--tx-3); text-decoration: none; font-size: var(--fs-2); }
.ac-volver:hover { color: var(--brand); }
.ac-volver svg { width: 16px; height: 16px; }

.ac-marca-caja { position: relative; width: 100%; max-width: 440px; }
/* Mismo caso que en la landing: el SVG va absoluto para que su viewBox
   cuadrado del arranque no empuje el alto de la columna. */
.ac-marca { position: relative; width: 100%; aspect-ratio: 371 / 112; }
.ac-marca > svg { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; }
/* 🔴 «Un servicio de LQG» vivía pegado al FONDO de la columna, a versalitas
   de 11px, tan lejos del logotipo que no se leía como su firma. 🔑 Cuelga
   del logotipo, igual que en la landing: dos renglones, alineados al borde
   izquierdo de la «O» (36% del conjunto). Handoff de Design,
   `Olivia Acceso.dc.html`. */
.ac-firma { margin-top: -3%; margin-left: 36%; max-width: 64%;
  font-size: 13px; line-height: 1.42; color: var(--tx-3);
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.ac-firma b { color: var(--tx-1); font-weight: 700; }
/* Aparece cuando la animación termina: `marca.js` pone `.listo` en la caja. */
.ac-marca.listo + .ac-firma { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ac-firma { opacity: 1; transform: none; transition: none; } }
/* La frase de marca sube de 18 a 34px: es lo único que se lee de este lado
   y a 18px competía de igual a igual con la lista de abajo. */
/* 15ch de tope: el titular se parte en cuatro renglones como en la landing.
   En una sola línea deja de ser titular y pasa a ser rótulo. */
.ac-frase { margin: 0; max-width: 20ch;
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.625rem, 2.6vw, 2.125rem); line-height: 1.08;
  letter-spacing: -.022em; color: var(--tx-1); }
.ac-frase b { color: var(--tx-1); }
/* El degradado del símbolo, SOLO en la segunda línea — el mismo gesto y la
   misma regla que en el héroe de la landing: si fueran dos, no diría nada. */
.ac-frase em { font-style: normal; background-image: var(--grad-marca);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ac-lista { list-style: none; padding: 0; margin: 0; max-width: 42ch;
  display: flex; flex-direction: column; gap: 14px; }
.ac-lista li { display: flex; gap: 12px;
  font-size: 14.5px; line-height: 1.5; color: var(--tx-2); }
/* Un disco dibujado, no el glifo «●»: el glifo cambia de cuerpo con la fuente
   y no se puede alinear con la primera línea del renglón. */
.ac-lista li::before { content: ""; width: 7px; height: 7px; flex: none;
  margin-top: 8px; border-radius: 50%; background: var(--brand); }

/* ── el formulario ─────────────────────────────────────────────────── */
.ac-form { display: flex; align-items: center; justify-content: center;
  padding: 56px clamp(28px, 4vw, 72px); }
.ac-form-in { width: 100%; max-width: 420px;
  animation: ac-entra .5s cubic-bezier(.22,1,.36,1) both; }
.ac-form-in.ancho { max-width: 640px; }
@keyframes ac-entra { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .ac-form-in { animation: none; } }

.ac-form h1 { font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 42px); letter-spacing: -.026em;
  line-height: 1.04; margin: 0 0 10px; }
.ac-sub { color: var(--tx-2); font-size: 15.5px; line-height: 1.5;
  margin: 0 0 34px; }
.ac-alt { margin: var(--sp-8) 0 0; font-size: var(--fs-3); color: var(--tx-2); }
.ac-nota { margin: var(--sp-6) 0 0; font-size: var(--fs-1); color: var(--tx-3);
  line-height: var(--lh-read); }
.ac .b.ancho { width: 100%; justify-content: center; }
/* Los dos avisos de esta superficie llevan el mismo aire debajo: el rojo de
   «no coinciden» y el verde de «su contraseña quedó cambiada». Van juntos en
   la misma regla porque son la misma decisión de composición — separarlos es
   cómo uno de los dos se queda sin margen el día que se toque el otro. */
.ac .ld-mal, .ac .ld-ok { margin-bottom: var(--sp-7); }
/* El enlace «¿La olvidó?»: en la MISMA línea que el rótulo del campo y
   pegado a la derecha, como en `marca/handoff-design/Olivia Acceso.dc.html`
   línea 73. Las tres medidas son las del handoff y no una aproximación:
   12,5 px, peso 600 y `--brand` — NO `--brand-accent`, que el token deja
   escrito que es de las letras «IA» del logotipo y de nada más. */
.ac .campo-cab { display: flex; align-items: baseline; gap: var(--sp-5); }
.ac .campo-cab a { margin-left: auto; font-size: 12.5px; font-weight: 600;
  color: var(--brand); }

/* ── el paso a paso ────────────────────────────────────────────────── */
/* 🔴 Eran tres rótulos de 12px con una pastilla numerada y un borde abajo.
   🔑 El paso en curso se declara con TIPOGRAFÍA —número de 22 y rótulo en
   tinta— y la barra de 3px pasa arriba: los otros dos se leen como lo que
   son, uno hecho y uno por venir. */
.pasos { list-style: none; padding: 0; margin: 0 0 34px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pasos li { display: block; padding: 12px 0 0;
  border-top: 3px solid var(--line); font-size: 13px; color: var(--tx-3); }
.pasos li span { display: block; margin-bottom: 6px;
  font-family: var(--ff-display); font-size: 22px; font-weight: 700;
  line-height: 1; color: var(--n-4); }
.pasos li.on { color: var(--tx-1); font-weight: 650; border-top-color: var(--brand); }
.pasos li.on span { color: var(--tx-1); }
.pasos li.hecho { color: var(--tx-2); border-top-color: var(--brand); }
/* El paso ya cumplido no repite su número: lo reemplaza por el visto. */
.pasos li.hecho span { font-size: 0; }
.pasos li.hecho span::before { content: "✓"; font-size: 22px; color: var(--brand); }

/* En acceso el formulario NO va en tarjeta: la columna ya es la superficie.
   `.form` trae fondo y borde porque sirve a las pantallas de trabajo. */
.ac .form { background: none; border: 0; padding: 0; gap: 20px; }
.ac .campo { gap: 8px; }
.ac .campo label { font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-3); }
.ac .campo input, .ac .campo select { height: 50px; min-height: 50px;
  padding: 0 14px; font-size: 15.5px; background: var(--bg); }
.ac .campo textarea { padding: 12px 14px; font-size: 15.5px; }
.ac .b.ancho { height: 54px; min-height: 54px; border-radius: 12px;
  font-size: 16px; font-weight: 650; }

.bloque { border: 0; padding: 0; margin: 0; display: flex;
  flex-direction: column; gap: 20px;
  animation: ac-entra .32s cubic-bezier(.22,1,.36,1) both; }
.bloque[hidden] { display: none; }
.acciones { display: flex; gap: var(--sp-4); margin-top: var(--sp-4);
  flex-wrap: wrap; }

/* ── tarjetas de módulo, seleccionables ────────────────────────────── */
.tarjetas { display: flex; flex-direction: column; gap: var(--sp-5); }
.tarjeta { display: block; cursor: pointer; }
.tarjeta input { position: absolute; opacity: 0; width: 0; height: 0; }
.tk-marco { display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-7); border: 1px solid var(--line);
  border-radius: var(--r-3); background: var(--surface);
  transition: border-color .16s, background .16s; }
.tarjeta:hover .tk-marco { border-color: var(--line-hi); }
.tk-cab { display: flex; align-items: center; gap: var(--sp-4); }
.tk-cab b { font-size: var(--fs-4); }
.tk-cab::before { content: ""; width: 18px; height: 18px; flex: none;
  border: 1px solid var(--line-hi); border-radius: 5px; background: var(--bg); }
.tarjeta input:checked + .tk-marco { border-color: var(--brand);
  background: var(--brand-soft); }
.tarjeta input:checked + .tk-marco .tk-cab::before {
  background: var(--brand); border-color: var(--brand);
  box-shadow: inset 0 0 0 3px var(--brand-soft); }
.tarjeta input:focus-visible + .tk-marco { outline: 2px solid var(--focus);
  outline-offset: 2px; }
.tk-promesa { font-size: var(--fs-2); color: var(--tx-3);
  line-height: var(--lh-read); padding-left: calc(18px + var(--sp-4)); }
.tarjeta.apagada { cursor: not-allowed; opacity: .6; }
.tarjeta.apagada .tk-cab::before { border-style: dashed; }

/* ── móvil ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ac-caja { grid-template-columns: 1fr; }
  .ac-lado { border-right: 0; border-bottom: 1px solid var(--line);
    padding: var(--sp-11) var(--pad-page) var(--sp-9); gap: var(--sp-6); }
  /* La firma NO se esconde con lo demás: viaja con el logotipo, y en móvil
     el logotipo es lo único que dice que uno llegó al sitio correcto. */
  .ac-marca-caja { max-width: 300px; margin: 0 auto; }
  .ac-frase, .ac-lista { display: none; }
  .ac-form { padding: var(--sp-9) var(--pad-page) var(--sp-11); }
}

/* La figura del módulo dentro de la tarjeta de registro: 44 px, la variante
   chica. A ese tamaño la figura completa sería una mancha — por eso existe la
   variante y no una simple reducción. */
.tk-marco { position: relative; padding-left: 66px; }
.tk-arte { position: absolute; left: var(--sp-6); top: var(--sp-6);
  width: 44px; height: 34px; display: block; }
.tk-arte svg { width: 100%; height: 100%; display: block; }