/* Acceso a Santiago — dirección elegida: vidrio con aurora.
 *
 * Se fueron el azul marino, el dorado y el globo. La referencia es Apple:
 * material antes que color, una sola luz, tipografía del sistema y nada que
 * grite. El acento no es un color, es la luz.
 *
 * El vidrio está portado de la técnica de Liquid Glass (21st.dev, "Apple Tahoe
 * Liquid Glass Button"): backdrop-filter para refractar el fondo y una pila de
 * sombras internas que dibujan el brillo especular del borde. Aquí va en CSS
 * plano, sin React ni Tailwind, porque este front no tiene build.
 */

:root {
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", sans-serif;

  /* Dirección A · Vidrio sobre negro (por defecto) */
  --fondo: oklch(9% 0 0);
  --fondo-2: oklch(16% 0 0);
  --tinta: oklch(98% 0 0);
  --tinta-2: oklch(78% 0 0);
  --tinta-3: oklch(58% 0 0);
  --linea: oklch(100% 0 0 / .12);
  --vidrio: oklch(100% 0 0 / .06);
  --brillo: 1;
  --boton: oklch(98% 0 0);
  --boton-tinta: oklch(12% 0 0);
  --halo: oklch(70% 0.06 260 / .20);
}

/* (Las direcciones A y B quedan en /direcciones, no en producción.) */
body[data-dir="claro"] {
  --fondo: oklch(97% 0 0);
  --fondo-2: oklch(100% 0 0);
  --tinta: oklch(18% 0 0);
  --tinta-2: oklch(38% 0 0);
  --tinta-3: oklch(58% 0 0);
  --linea: oklch(0% 0 0 / .10);
  --vidrio: oklch(100% 0 0 / .70);
  --brillo: 0;
  --boton: oklch(16% 0 0);
  --boton-tinta: oklch(99% 0 0);
  --halo: oklch(60% 0.02 250 / .10);
}

body[data-dir="aurora"] {
  /* Verde-gris, no negro puro: el planeta de puntos necesita algo con lo que
     contrastar, y el tinte frío lo asienta sin encender color de marca. */
  --fondo: oklch(13% 0.012 168);
  --halo: oklch(72% 0.045 165 / .16);
}

* , *::before, *::after { box-sizing: border-box; }

html { background: oklch(9% 0 0); }
html:has(body[data-dir="claro"]) { background: oklch(97% 0 0); }
html:has(body[data-dir="aurora"]) { background: oklch(13% 0.012 168); }

body {
  min-height: 100dvh;
  margin: 0;
  display: grid;
  /* Fuera la barra y el pie: la pantalla de acceso es una sola cosa centrada.
     Una fila, no tres. */
  grid-template-rows: 1fr;
  color: var(--tinta);
  background: transparent;
  font-family: var(--sf);
  -webkit-font-smoothing: antialiased;
}

/* ---- Fondo ---- */

.escena {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.escena::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(140% 90% at 50% 45%, transparent 30%, oklch(8% 0 0 / .55) 100%);
}

body[data-dir="claro"] .escena::after { background: none; }

.centro { position: relative; z-index: 1; }

/* Una sola fuente de luz, arriba y al centro. Es lo que hace que el vidrio
   tenga sentido: sin luz, el vidrio es una caja gris. */
.escena::before {
  content: "";
  position: absolute;
  inset-block-start: -30vh;
  inset-inline-start: 50%;
  width: min(120vw, 70rem);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--halo), transparent 62%);
  filter: blur(20px);
}

#globo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* La esfera lleva su propio halo y su propia luz; el atenuado va aquí, no
     dentro del dibujo, para poder ajustarlo sin recalcular nada. */
  opacity: .95;
}

/* La aurora se fue de aquí: tres manchas de 46vw con blur(90px) y mezcla de
   capas, animadas sin parar, costaban 39 de los 60 cuadros por segundo. El
   halo que la esfera dibuja en su propio lienzo hace el mismo trabajo por casi
   nada. (Medido en producción: 7 fps con ella, 50 sin ella.) */

/* ---- Estructura ---- */

.centro {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vh, 3rem) 1.5rem;
}

.pila {
  width: min(100%, 28rem);
  display: grid;
  gap: 1.15rem;
  justify-items: center;
}

/* ---- Titular ---- */

/* Los tiempos de entrada son los del demo del componente, traducidos de
   framer-motion a CSS: la píldora a los 0.2 s, el titular a los 0.3, el lema a
   los 0.8, la caja al segundo, y el subrayado —el que "aparece de la nada"— a
   los 1.2 creciendo durante 1.5 s. */
@keyframes surgir {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}

@keyframes asomar {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: none; }
}

@keyframes aparecer {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Se anima la escala, no el ancho: con el origen en el borde izquierdo la
   barra se despliega de izquierda a derecha, y escalar no obliga al navegador
   a recalcular la maqueta en cada cuadro. */
@keyframes crecer {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes latir {
  0% { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(2.2); opacity: 0; }
}

.pildora {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  padding: .5rem 1.15rem;
  border-radius: 999px;
  background: oklch(100% 0 0 / .06);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--tinta-2);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  animation: asomar .6s .2s ease both;
}

/* Los dos puntos que laten a los lados, el animate-ping del original. */
.latido {
  position: relative;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: oklch(88% 0.06 165);
}

.latido::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: latir 1.8s ease-out infinite;
}

.latido-2::after { animation-delay: .5s; }

.titulo {
  position: relative;
  margin: 0;
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-align: center;
  padding-block-end: 1.35rem;
  animation: surgir 1s .3s ease both;
}

/* El titular va dos veces: la copia de atrás, borrosa y escalada, es el
   resplandor que en el original hace un duplicado con blur-2xl. */
.titulo .resplandor {
  position: absolute;
  inset: 0 0 1.35rem;
  display: block;
  filter: blur(26px);
  opacity: .5;
  transform: scale(1.05);
  pointer-events: none;
}

.titulo .frente { position: relative; }

.titulo em {
  font-style: normal;
  /* Negra a propósito: sobre el fondo oscuro se lee como una silueta recortada
     en la luz. El borde tenue es lo único que la separa del fondo. */
  color: oklch(0% 0 0);
  font-weight: 400;
  padding-inline: .18em;
  text-shadow: 0 0 1px oklch(100% 0 0 / .28), 0 1px 2px oklch(100% 0 0 / .12);
}

.titulo .resplandor em { color: oklch(60% 0 0); text-shadow: none; }

/* Cruza mucho más que las letras: en el original la barra ocupa el ancho del
   bloque de texto, no el del titular, y por eso se sale por los dos lados. */
.subrayado {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  /* El ancho vive en una sola variable: aparece también en el margen que la
     centra, y tenerlo escrito dos veces es pedir que se desincronicen. */
  --barra: calc(min(92vw, 58rem) - 1cm);
  width: var(--barra);
  margin-inline-start: calc(var(--barra) / -2);
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, oklch(98% 0.01 165), oklch(90% 0.05 165 / .85) 55%, transparent);
  box-shadow: 0 0 26px oklch(92% 0.05 165 / .5);
  transform: scaleX(0);
  transform-origin: left center;
  animation: crecer 1.5s 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lema {
  margin: 0;
  color: var(--tinta-2);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  animation: aparecer .8s .8s ease both;
}

/* Quien llega con el movimiento reducido activado ve la pantalla ya montada,
   sin nada entrando ni latiendo. */
@media (prefers-reduced-motion: reduce) {
  .pildora, .titulo, .lema, .subrayado, .vidrio { animation: none; }
  .subrayado { transform: scaleX(1); }
  .latido::after { animation: none; opacity: 0; }
}

/* ---- Vidrio ---- */

.vidrio {
  position: relative;
  width: 100%;
  animation: surgir .8s 1s ease both;
  padding: 1.25rem;
  border-radius: 1.5rem;
  background: var(--vidrio);
  backdrop-filter: blur(28px) saturate(125%) brightness(calc(1 + var(--brillo) * .04));
  -webkit-backdrop-filter: blur(28px) saturate(125%);
  /* La luz viene de arriba: los brillos van en el borde superior y las
     sombras en el inferior. Esa asimetría es lo que lo hace leer como vidrio
     y no como una caja translúcida. */
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / calc(.14 * var(--brillo) + .04)),
    inset 0 3px 0 -2px oklch(100% 0 0 / calc(.85 * var(--brillo) + .10)),
    inset -2px -2px 0 -2px oklch(100% 0 0 / calc(.55 * var(--brillo))),
    inset 0 -8px 1px -6px oklch(100% 0 0 / calc(.45 * var(--brillo))),
    inset 0 3px 5px -2px oklch(0% 0 0 / .18),
    0 1px 4px oklch(0% 0 0 / .18),
    0 28px 60px -24px oklch(0% 0 0 / calc(.55 + .1 * var(--brillo)));
}

.vidrio::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% -20%, oklch(100% 0 0 / calc(.16 * var(--brillo))), transparent 60%);
}

.campos { display: grid; gap: .625rem; }

/* ---- Controles ---- */

.campo {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 3rem;
  padding-inline: 1rem;
  border-radius: .875rem;
  background: oklch(100% 0 0 / calc(.05 * var(--brillo) + .5 * (1 - var(--brillo))));
  box-shadow: inset 0 0 0 1px var(--linea);
  transition: box-shadow .2s ease, background .2s ease;
}

.campo:focus-within {
  box-shadow: inset 0 0 0 1px oklch(70% 0 0 / calc(.5 + .3 * var(--brillo))), 0 0 0 4px oklch(70% 0 0 / .12);
}

.campo svg {
  flex: none;
  width: 1.0625rem;
  height: 1.0625rem;
  fill: none;
  stroke: var(--tinta-3);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.campo select,
.campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tinta);
  font: 400 .9375rem/1 var(--sf);
  appearance: none;
}

.campo select option { color: #111; background: #fff; }
.campo input::placeholder { color: var(--tinta-2); opacity: .75; }

.flecha { flex: none; color: var(--tinta-3); font-size: .75rem; }

.ver {
  flex: none;
  padding: .3rem .55rem;
  border: 0;
  border-radius: .5rem;
  background: oklch(100% 0 0 / calc(.08 * var(--brillo) + .06));
  color: var(--tinta-2);
  font: 500 .75rem/1 var(--sf);
  cursor: pointer;
}

.entrar {
  width: 100%;
  min-height: 3rem;
  margin-block-start: .875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 0;
  border-radius: .875rem;
  background: var(--boton);
  color: var(--boton-tinta);
  font: 600 .9375rem/1 var(--sf);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}

.entrar:hover { opacity: .92; }
.entrar:active { transform: scale(.985); }
.entrar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

.aviso {
  margin: 0;
  min-height: 1.2em;
  color: var(--tinta-3);
  font-size: .8125rem;
  text-align: center;
}

.aviso[data-error="1"] { color: oklch(72% 0.17 25); }
.aviso[hidden] { display: none; }

/* ---- Selector de dirección (solo en esta página de decisión) ---- */




.nota {
  width: min(100% - 3rem, 64rem);
  margin: 0 auto;
  color: var(--tinta-3);
  font-size: .8125rem;
  text-align: center;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (max-width: 30rem) {
  .titulo { font-size: clamp(1.75rem, 8vw, 2.25rem); }
}

/* Segundo factor (2FA) */
.paso-2fa {
  margin: 0 0 4px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: color-mix(in srgb, currentColor 72%, transparent);
}
.enlace-2fa {
  margin-top: 10px;
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 0.8rem;
  color: color-mix(in srgb, currentColor 78%, transparent);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.enlace-2fa:hover { color: currentColor; }
.enlace-2fa:disabled { opacity: 0.5; cursor: default; }