/* ═══════════════════════════════════════════════════════════════════════════
   Pantalla de acceso.
   Las fotos de la promoción pasan por detrás con un zoom lento y se funden
   unas con otras. Encima, un velo oscuro para que el texto se lea siempre.
   El logo va centrado arriba y la caja justo debajo.

   El acento es el teal de Universis, #0E6E75, el mismo que el hub. Sobre él
   el texto va en blanco: da 6,1 a 1 y se lee bien.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --oro:#0E6E75;
  --oro-claro:#12878F;
  --oro-tinta:#FFFFFF;
}
html, body.acceso{height:100%;margin:0}
body.acceso{background:#0B1215;overflow:hidden}

/* ── Fondo: las fotografías ────────────────────────────────────────────── */
.fondo{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0B1215}
.fondo figure{position:absolute;inset:0;margin:0;opacity:0;
  background-size:cover;background-position:center;
  animation:pase 48s infinite;will-change:opacity,transform}
/* Ocho fotos, cada una entra 6 s después que la anterior */
.fondo figure:nth-child(1){animation-delay:0s}
.fondo figure:nth-child(2){animation-delay:6s}
.fondo figure:nth-child(3){animation-delay:12s}
.fondo figure:nth-child(4){animation-delay:18s}
.fondo figure:nth-child(5){animation-delay:24s}
.fondo figure:nth-child(6){animation-delay:30s}
.fondo figure:nth-child(7){animation-delay:36s}
.fondo figure:nth-child(8){animation-delay:42s}

@keyframes pase{
   0%   {opacity:0; transform:scale(1.00)}
   3%   {opacity:1}
  14.5% {opacity:1}
  17%   {opacity:0; transform:scale(1.14)}
 100%   {opacity:0; transform:scale(1.14)}
}

/* El velo oscuro: más denso arriba y abajo, para que se lea todo */
.velo-foto{position:fixed;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(10,12,14,.86) 0%, rgba(10,12,14,.60) 38%,
                            rgba(10,12,14,.66) 70%, rgba(10,12,14,.90) 100%),
    radial-gradient(120% 90% at 50% 34%, rgba(10,12,14,.18) 0%, rgba(10,12,14,.72) 100%)}

@media (prefers-reduced-motion: reduce){
  .fondo figure{animation:none;opacity:0}
  .fondo figure:first-child{opacity:1}
}

/* ── Contenido ─────────────────────────────────────────────────────────── */
.acc-pantalla{position:relative;z-index:2;min-height:100%;height:100%;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;
  padding:0 20px;padding-top:max(7vh,46px);padding-bottom:34px}

.acc-logo{flex:none;margin-bottom:26px}
.acc-logo img{height:44px;width:auto;display:block;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}
@media(max-width:560px){.acc-logo img{height:32px}.acc-pantalla{padding-top:34px}}

.acc-caja{width:100%;max-width:392px;background:rgba(20,23,26,.72);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.12);border-radius:10px;
  box-shadow:0 26px 70px rgba(0,0,0,.55);padding:32px 32px 28px;flex:none}
@media(max-width:560px){.acc-caja{padding:26px 22px 22px}}

.acc-caja h2{font-size:21px;font-weight:700;color:#fff;letter-spacing:-.015em;margin:0}
.acc-caja .sub{font-size:13px;color:#A9B0B7;margin:7px 0 24px;line-height:1.5}

.acc-campo{margin-bottom:15px}
.acc-campo label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#8E969E;margin-bottom:7px}
.acc-campo input{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.16);
  border-radius:5px;padding:12px 13px;font-size:14px;font-family:inherit;
  color:#fff;background:rgba(255,255,255,.06)}
.acc-campo input::placeholder{color:#6F777E}
.acc-campo input:focus{outline:none;border-color:var(--oro);
  background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(177,151,119,.30)}

.acc-boton{width:100%;background:var(--oro);color:var(--oro-tinta);font-weight:700;font-size:14px;
  padding:13px;border-radius:5px;margin-top:10px;border:0;cursor:pointer;
  font-family:inherit;letter-spacing:.02em}
.acc-boton:hover{background:var(--oro-claro)}
.acc-boton:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px}

.acc-error{background:rgba(191,74,56,.20);border:1px solid rgba(214,108,87,.45);color:#F0B5AC;
  border-radius:5px;padding:11px 13px;font-size:12.5px;margin-bottom:18px;
  display:flex;gap:9px;align-items:flex-start}
.acc-error b{flex:none}

.acc-ayuda{margin-top:20px;padding-top:17px;border-top:1px solid rgba(255,255,255,.10);
  font-size:12px;color:#8E969E;line-height:1.55}
.acc-ayuda a{color:var(--oro);text-decoration:none;border-bottom:1px solid rgba(177,151,119,.45)}
.acc-ayuda a:hover{color:var(--oro-claro)}

/* ── Pie con los datos de la promoción ─────────────────────────────────── */
.acc-datos{margin-top:auto;padding-top:34px;display:flex;gap:38px;flex-wrap:wrap;
  justify-content:center;flex:none}
.acc-datos div{text-align:center}
.acc-datos div b{display:block;font-size:19px;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.acc-datos div span{font-size:10px;color:#9AA2A9;letter-spacing:.13em}
.acc-pie{flex:none;margin-top:20px;font-size:11px;color:#767E85;text-align:center}
@media(max-height:680px){.acc-datos{display:none}}