/* ═══════════════════════════════════════════════════════════════════
   PÁGINA: ACCESO · composición
   Colores, letra, botón y campo vienen de /comun/marca.css.
   Dos columnas en escritorio: formulario (5) y foto con mensaje (7).
   En el celular: la foto arriba, recortada, y el formulario primero.
   Contrastes: azul oscuro sobre blanco 11,48 : 1 · blanco sobre azul
   oscuro 11,48 : 1 · texto suave 6,92 : 1.
   ═══════════════════════════════════════════════════════════════════ */

.acceso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--blanco); }

.acceso__panel { display: grid; align-items: center; padding: 48px clamp(24px, 5vw, 72px); background: var(--blanco); }
.acceso__contenido { width: min(100%, 420px); display: grid; gap: 40px; }

.acceso__marca { display: inline-flex; align-items: center; gap: 12px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--texto); }
.acceso__marca img { width: 40px; height: 40px; display: block; }

.acceso__formulario { display: grid; gap: 24px; }
.acceso__titulos { display: grid; gap: 12px; }
.acceso__bajada { color: var(--texto-suave); }
.acceso__boton { width: 100%; }
.acceso__contacto { font-size: .875rem; color: var(--texto-suave); }
.acceso__firma { margin-top: 8px; }

.acceso__visual { position: relative; overflow: hidden; background: var(--paloma); display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.acceso__foto { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.acceso__mensaje { display: grid; gap: 8px; padding: 32px clamp(24px, 4vw, 56px); background: var(--azul-oscuro); color: var(--blanco); }
.acceso__mensaje strong { font-size: clamp(1.4375rem, 1vw + 1.2rem, 1.875rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.acceso__mensaje p { color: var(--invertido-suave); max-width: 560px; }

.sin-js { margin: 24px; }

/* El aviso cuando el acceso todavía no está configurado (lo arma la puerta). */
.aviso-cerrado { max-width: 560px; margin: 15vh auto 0; padding: 0 24px; display: grid; gap: 16px; }

@media (max-width: 900px) {
  .acceso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .acceso__visual { order: -1; display: block; height: 200px; }
  .acceso__mensaje { display: none; }
  .acceso__panel { align-items: start; padding-block: 32px 48px; }
  .acceso__contenido { gap: 32px; }
}

/* ── El campo trampa ──────────────────────────────────────────────────
   Por POSICIÓN y no con display:none (hay programas que saltan lo que está
   oculto), y aquí y no en un atributo style: la política de seguridad del
   portal no permite estilos escritos en la página, y el campo quedaría a
   la vista. */
.campo-trampa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }