/* La web pública y la pantalla de entrar. Solo usa los tokens de tokens.css.
   Entrar y crear la cuenta (encargo del 07/10/2026, punto 9): fondo blanco con el difuminado naranja
   del hero, toques en #141414 (cerrar, enlaces), la palabra bildeit arriba y Geist. Sin pestañas: debajo
   del botón, «¿No tienes cuenta? Crear cuenta» (encargo del 08/10/2026, punto 1), y el ES / EN debajo
   de la tarjeta. El botón principal es el de la web (tokens --boton-*). */
.pagina-acceso {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center;
  padding: var(--e-6) var(--e-4) var(--e-7);
  background:
    radial-gradient(60% 46% at 22% 8%, var(--w-luz-1) 0%, var(--w-luz-0) 100%),
    radial-gradient(54% 42% at 82% 18%, var(--w-luz-2) 0%, var(--w-luz-0) 100%),
    radial-gradient(70% 50% at 50% 70%, var(--w-luz-2) 0%, var(--w-luz-0) 100%),
    var(--w-blanco);
  background-size: 100% 100vh, 100% 100vh, 100% 100vh, auto; background-repeat: no-repeat;   /* los tres del hero (sitio.css, .portada) */
}
.acceso { width: min(440px, 100%); }
.acceso-cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--e-5); }
.marca-texto { display: inline-flex; color: var(--w-noche); text-decoration: none; }
.marca-texto .palabra { height: var(--alto-logo); width: auto; }
.cerrar-acceso {
  display: inline-grid; place-items: center; width: var(--alto-control); height: var(--alto-control);
  border-radius: var(--r-pastilla); color: var(--w-noche); background: var(--w-blanco);
  border: 1px solid var(--c-borde); transition: background-color var(--w-dur-corta) var(--w-curva), color var(--w-dur-corta) var(--w-curva);
}
.cerrar-acceso:active { background: var(--w-noche); color: var(--w-blanco); }
@media (hover: hover) { .cerrar-acceso:hover { background: var(--w-noche); color: var(--w-blanco); } }
.pagina-acceso .tarjeta {
  background: var(--w-blanco); border: 1px solid var(--c-borde); border-radius: var(--w-r-24);
  padding: var(--e-5); box-shadow: var(--sombra-tarjeta-encima);
}
.pagina-acceso h1 { font-size: var(--t-xl); margin: 0 0 var(--e-2); color: var(--w-noche); }
.pagina-acceso .suave { color: var(--c-texto-2); }
.acceso form { display: flex; flex-direction: column; gap: var(--e-3); margin-top: var(--e-4); }
.acceso form .campo { margin: 0; }
.acceso form .boton { width: 100%; margin-top: var(--e-2); }
.con-ojo { position: relative; }
.con-ojo input { width: 100%; padding-right: var(--e-7); }
.ojo {
  position: absolute; top: 0; right: 0; height: 100%; width: var(--alto-control);
  display: grid; place-items: center; border: 0; background: transparent; color: var(--c-texto-2); cursor: pointer;
  border-radius: var(--r-m);
}
@media (hover: hover) { .ojo:hover { color: var(--w-noche); } }
.fuerza { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: var(--e-1); align-items: center; margin-top: 0; }
.fuerza span { height: var(--e-1); border-radius: var(--r-pastilla); background: var(--c-borde); transition: background-color var(--w-dur-corta) var(--w-curva); }
.fuerza small { min-width: 6rem; text-align: right; color: var(--c-texto-2); font-size: var(--t-s); }
.fuerza[data-n="1"] span:nth-child(-n+1) { background: var(--c-error); }
.fuerza[data-n="2"] span:nth-child(-n+2) { background: var(--marca-naranja); }
.fuerza[data-n="3"] span:nth-child(-n+3) { background: var(--c-ok); }
.fuerza[data-n="4"] span:nth-child(-n+4) { background: var(--c-ok); }
.olvido { margin: 0; text-align: right; font-size: var(--t-s); }
.acepto-caja .acepto { display: flex; gap: var(--e-2); align-items: flex-start; font-weight: var(--peso-normal); cursor: pointer; }
.acepto-caja .acepto input { width: auto; margin-top: var(--e-1); accent-color: var(--w-noche); }
.acepto-caja .pequeño { font-size: var(--t-s); margin: var(--e-1) 0 0; }
.acceso-enlaces { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); margin-top: var(--e-4); }
.acceso-enlaces a, .olvido a, .acepto-caja a { color: var(--w-noche); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .acceso-enlaces a:hover, .olvido a:hover, .acepto-caja a:hover { color: var(--marca-hover); } }
.aviso-acceso { margin-bottom: var(--e-3); }
.cambiar-modo { margin: var(--e-4) 0 0; text-align: center; color: var(--c-texto-2); }
.cambiar-modo a { color: var(--w-noche); font-weight: var(--peso-fuerte); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .cambiar-modo a:hover { color: var(--marca-hover); } }
.pagina-acceso .boton.principal {
  min-height: var(--boton-alto-grande); font-size: var(--boton-letra-grande); font-weight: var(--boton-peso); color: var(--w-blanco); border-radius: var(--boton-radio);
  background-color: var(--boton-abajo);
  background-image: radial-gradient(var(--boton-puntos) var(--boton-punto), transparent var(--boton-punto-fin)), linear-gradient(180deg, var(--boton-arriba), var(--boton-abajo));
  background-size: var(--boton-trama) var(--boton-trama), 100% 100%;
  box-shadow: inset 0 1px 0 var(--boton-reflejo), inset 0 -1px 0 var(--boton-canto), 0 0 0 1px var(--boton-borde), var(--boton-halo-cerca) var(--boton-halo), var(--boton-halo-lejos) var(--boton-halo);
  transition: background-color var(--w-dur-corta) var(--w-curva), color var(--w-dur-corta) var(--w-curva), box-shadow var(--w-dur-corta) var(--w-curva), transform var(--w-dur-corta) var(--w-curva);
}
@media (hover: hover) { .pagina-acceso .boton.principal:hover:not([disabled]) { background-color: var(--w-blanco); background-image: none; color: var(--w-marca); box-shadow: inset 0 0 0 1px var(--w-marca); } }
.pagina-acceso .boton.principal:active:not([disabled]) { background-color: var(--w-blanco); background-image: none; color: var(--w-marca); box-shadow: inset 0 0 0 1px var(--w-marca); transform: translateY(1px); }
@media (max-width: 480px) {
  .pagina-acceso { padding: var(--e-4) var(--e-3) var(--e-6); }
  .pagina-acceso .tarjeta { padding: var(--e-4); border-radius: var(--w-r-18); }
}
@media (prefers-reduced-motion: reduce) { .cerrar-acceso, .fuerza span, .pagina-acceso .boton.principal { transition: none; } }
.web-cabecera { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-4); max-width: var(--ancho-contenido); margin: 0 auto; }
.web { max-width: 860px; margin: 0 auto; padding: var(--e-5) var(--e-4) var(--e-7); }
.web h1 { font-size: var(--t-xxl); }
.web .lista { padding-left: var(--e-5); }
.web .lista li { margin-bottom: var(--e-2); }
.web-pie { border-top: 1px solid var(--c-borde); padding: var(--e-5) var(--e-4); text-align: center; font-size: var(--t-s); color: var(--c-texto-2); }
.web-pie a { margin: 0 var(--e-2); }
.documento { background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-l); padding: var(--e-5); }
.documento h2 { margin-top: var(--e-5); }
.documento .pastilla { white-space: normal; }