/* ============================================================
   acceso — bloque 5 (Cómo iniciar sesión desde la aplicación)
   Anatomy unlike siblings: split con la imagen a la IZQUIERDA
   (espejo invertido del hero), texto de acceso a la derecha.
   Animación propia y temática: la imagen se "desbloquea" con una
   revelación por wipe + una línea de escaneo esmeralda que baja
   una sola vez, como un inicio de sesión.
   ============================================================ */

.acceso { padding-block: var(--aire-l); overflow: hidden; }

.acceso__reja {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
}

.acceso__marco {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-mesa);
}
.acceso__marco img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
/* hilo de oro descuadrado abajo-derecha — asimetría intencional */
.acceso__marco::before {
  content: "";
  position: absolute;
  inset: auto -1px -1px auto;
  width: 42%; height: 42%;
  border-bottom: 1px solid var(--oro-tenue);
  border-right: 1px solid var(--oro-tenue);
  border-radius: 0 0 6px 0;
  z-index: 2;
}
/* línea de escaneo (oculta hasta la animación) */
.acceso__escaner {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 36%;
  background: linear-gradient(to bottom, transparent, rgba(40,224,140,.28), transparent);
  transform: translateY(-130%);
  opacity: 0;
  pointer-events: none;
}

.acceso__decir { position: relative; }
.acceso__decir .folio { margin-bottom: var(--aire-s); }
.acceso__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--marfil);
  margin-bottom: var(--aire-s);
}
.acceso__texto {
  color: var(--marfil-medio);
  font-size: var(--t-cuerpo);
  line-height: 1.62;
  max-width: 56ch;
}
.acceso__texto + .acceso__texto { margin-top: 1.1rem; }
.acceso__cita { color: var(--marfil); font-weight: 600; }

.acceso__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aire-xs);
  margin-top: var(--aire-m);
}

@media (max-width: 820px) {
  .acceso__reja { grid-template-columns: 1fr; gap: var(--aire-m); }
  .acceso__marco { max-width: 30rem; }
  .acceso__marco img { aspect-ratio: 16 / 10; }
}

/* — animación propia: desbloqueo (wipe + escaneo) — */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .acceso__marco img { clip-path: inset(0 100% 0 0); transition: clip-path .8s cubic-bezier(.7,0,.2,1); }
  .acceso__decir > * { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
  .acceso__decir > *:nth-child(2) { transition-delay: .1s; }
  .acceso__decir > *:nth-child(3) { transition-delay: .2s; }
  .acceso__decir > *:nth-child(4) { transition-delay: .3s; }
  .acceso__decir > *:nth-child(5) { transition-delay: .4s; }

  .acceso.en-vista .acceso__marco img { clip-path: inset(0 0 0 0); }
  .acceso.en-vista .acceso__decir > * { opacity: 1; transform: none; }
  .acceso.en-vista .acceso__escaner { animation: escaneo 1.5s ease .35s 1 forwards; }

  @keyframes escaneo {
    0%   { opacity: 0; transform: translateY(-130%); }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(330%); }
  }
}