/* Pantalla de acceso (entrar, doble factor, activar la cuenta…)
   Izquierda: Hype grande sobre facetas con el degradado de marca (como el dibujo facetado del logo), que se funde
   hacia el blanco del panel. Derecha: el acceso, limpio y sin tarjeta. */

.acceso{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(420px,1fr);background:var(--panel)}

/* --- Arte --- */
.acc-arte{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  padding:44px 12% 52px 64px;color:#fff;min-height:100%}
.acc-arte::before{content:"";position:absolute;inset:0;z-index:-2;background:#2348D6 url("../img/acceso-facetas.2029938532f1.svg") center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%)}
/* luz suave detrás de Hype y un poco de sombra abajo para que el título se lea siempre */
.acc-arte::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 40% 44%,rgba(255,255,255,.26),rgba(255,255,255,0) 30%),
             linear-gradient(180deg,rgba(14,22,70,0) 55%,rgba(14,22,70,.28) 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 60%,transparent 92%);mask-image:linear-gradient(90deg,#000 0,#000 60%,transparent 92%)}

.acc-marca{height:12px;width:auto;align-self:flex-start;filter:brightness(0) invert(1);opacity:.92}

.acc-escena{display:flex;flex-direction:column;align-items:center;margin:28px 0}
.acc-hype{width:300px;height:300px;display:grid;place-items:center}
.acc-hype>img{width:100%;height:100%}
.acc-hype.vivo{animation:acc-llega .7s cubic-bezier(.2,.9,.25,1.15) both}
.acc-suelo{width:190px;height:20px;margin-top:-6px;border-radius:50%;background:radial-gradient(closest-side,rgba(12,20,64,.34),rgba(12,20,64,0))}
@keyframes acc-llega{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}

.acc-hub{margin:0 0 14px;white-space:nowrap;font:800 clamp(40px,4.6vw,74px)/.96 Montserrat,system-ui,sans-serif;letter-spacing:-.035em;color:#fff;
  text-shadow:0 2px 24px rgba(10,16,60,.18)}
.acc-lema{margin:0;max-width:31ch;font:400 17px/1.5 Inter,system-ui,sans-serif;color:rgba(255,255,255,.9)}

/* --- Panel de acceso --- */
.acc-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 56px 28px}
.acc-caja{width:min(400px,100%);margin:auto 0}
.acc-caja h1.h-auth{font-size:38px;margin:0 0 10px}
.acc-caja .eyebrow{margin-bottom:10px}
.acc-caja>.note,.acc-caja>p.note{font-size:14.5px;line-height:1.55;margin:0 0 26px}
.acc-caja .err{margin-bottom:20px}
.acc-caja .fld{margin-bottom:18px}
.acc-caja .fld label{font-size:13.5px;color:var(--tinta)}
.acc-caja .fld input{min-height:50px;padding:13px 15px;background:var(--panel);box-shadow:inset 0 0 0 1.5px #D9E2EC;transition:box-shadow .15s ease}
.acc-caja .fld input::placeholder{color:#A3AEBB}
.acc-caja .fld input:hover{box-shadow:inset 0 0 0 1.5px #BCCADA}
.acc-caja .fld input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--azul),0 0 0 4px rgba(0,119,255,.13)}
.acc-caja .btn.p{min-height:50px;font-size:15px;box-shadow:0 12px 26px -14px rgba(0,119,255,.75)}
.acc-entrar{margin-top:8px}
.acc-ayuda{margin:22px 0 0;font-size:13px;line-height:1.55;color:var(--tenue)}

.acc-clave{position:relative}
.acc-clave input{width:100%;padding-right:54px}
.acc-ver{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;
  border:0;border-radius:6px;background:transparent;color:var(--tenue);cursor:pointer}
.acc-ver:hover{color:var(--tinta);background:var(--hover)}
.acc-ver:focus-visible{outline:2px solid var(--azul);outline-offset:0}
.acc-ver svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.acc-ver .ojo-no,.acc-ver[aria-pressed="true"] .ojo-si{display:none}
.acc-ver[aria-pressed="true"] .ojo-no{display:block}

.acc-pie{display:flex;align-items:flex-start;gap:8px;max-width:400px;margin:28px 0 0;font-size:12.5px;line-height:1.5;color:var(--tenue)}
.acc-pie svg{flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* --- Modo oscuro --- */
.oscuro .acc-caja .fld input{box-shadow:inset 0 0 0 1.5px #2C3A47}
.oscuro .acc-caja .fld input:hover{box-shadow:inset 0 0 0 1.5px #3D4E5E}
.oscuro .acc-caja .fld input:focus{box-shadow:inset 0 0 0 2px #4C9DFF,0 0 0 4px rgba(76,157,255,.18)}
.oscuro .acc-caja .fld input::placeholder{color:#5E6B78}

/* --- Pantallas medianas y móvil: el arte pasa arriba y se funde hacia abajo --- */
@media (max-width:1100px){
  .acceso{grid-template-columns:minmax(0,1fr) minmax(400px,1fr)}
  .acc-arte{padding:36px 16% 44px 40px}
  .acc-hype{width:240px;height:240px}
  .acc-hype .hy-av{width:240px!important;height:240px!important}
}
@media (max-width:860px){
  .acceso{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .acc-arte{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"marca marca" "hype titulo";align-items:center;gap:6px 18px;
    padding:22px 20px 64px;min-height:0}
  .acc-arte::before{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%)}
  .acc-arte::after{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 90%);mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 90%);
    background:radial-gradient(circle at 18% 58%,rgba(255,255,255,.24),rgba(255,255,255,0) 26%)}
  .acc-marca{grid-area:marca;margin-bottom:6px}
  .acc-escena{grid-area:hype;margin:0}
  .acc-hype{width:100px;height:100px}
  .acc-hype .hy-av{width:100px!important;height:100px!important}
  .acc-suelo{width:76px;height:10px;margin-top:-2px}
  .acc-titulo{grid-area:titulo}
  .acc-hub{font-size:28px;margin-bottom:6px}
  .acc-lema{font-size:14px;line-height:1.45;max-width:none}
  .acc-panel{padding:8px 16px 28px;justify-content:flex-start}
  .acc-caja h1.h-auth{font-size:30px}
}
@media (prefers-reduced-motion:reduce){.acc-hype.vivo{animation:none}}