/* ============================================================
   [UI-7] Pantalla de acceso · OPCIÓN A: banda de marca
   Celular: franja azul marino con el logo grande y el formulario en
   una tarjeta encima. Computadora: pantalla dividida.

   Para cambiar al diseño de LOGO CENTRADO, en index.html cambia
     <link rel="stylesheet" href="/acceso.css">
   por
     <link rel="stylesheet" href="/acceso-centrado.css">
   ============================================================ */

/* ============================================================
   [UI-7] Pantalla de acceso: marca protagonista
   ============================================================ */
.acceso-nuevo { padding-top: 0; }
.acc-marca { position: relative; }
.acc-logo { display: block; height: auto; }
.acceso .acc-lema {
  margin: 10px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase;
}
.acc-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.acc-puntos li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.4; }
.acc-puntos .ic { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.acc-forma h1 { margin-top: 0; }
.acceso-nuevo .acceso-tema { margin: 0; }
/* --- Opción A: banda de marca (celular) / pantalla dividida (computadora) --- */
:root { --marca-1: #0a192f; --marca-2: #12345f; --marca-linea: rgba(117, 208, 250, .10); }
.acc-marca {
  margin: -8px -16px 0; padding: calc(14px + env(safe-area-inset-top)) 20px 56px;
  color: #e8f1fb; overflow: hidden;
  background:
    radial-gradient(420px 260px at 85% 0%, rgba(30, 144, 255, .35), transparent 70%),
    linear-gradient(160deg, var(--marca-1) 0%, var(--marca-2) 100%);
  border-radius: 0 0 28px 28px;
}
/* trazos de circuito, como los del isotipo */
.acc-marca::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background-image:
    linear-gradient(90deg, var(--marca-linea) 1px, transparent 1px),
    linear-gradient(0deg, var(--marca-linea) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent);
  mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent);
}
.acc-marca > * { position: relative; }
.acc-marca .acceso-tema { display: flex; justify-content: flex-end; }
.acc-marca .tema-boton { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #cfe2f7; }
.acc-logo { width: min(260px, 72vw); margin-top: 18px; }
.acc-logo-color { display: none; }
.acceso .acc-lema { color: #75d0fa; }
.acc-puntos { display: none; }
.acc-forma {
  position: relative; margin-top: -32px; padding: 26px 20px 8px;
  background: var(--hoja); border: 1px solid var(--linea); border-radius: 24px;
  box-shadow: var(--sombra-alta);
}
.acc-forma h1 { font-size: clamp(28px, 7.4vw, 36px); }

@media (min-width: 960px) {
  main:has(.acceso-nuevo) { max-width: 1080px; padding-top: 32px; }
  .acceso.acceso-nuevo {
    max-width: none; margin: 4vh auto 0; padding: 0;
    display: grid; grid-template-columns: 1.05fr 1fr; overflow: hidden;
    background: var(--hoja); border: 1px solid var(--linea); border-radius: 28px;
    box-shadow: var(--sombra-alta);
  }
  .acceso.acceso-nuevo { min-height: 560px; }
  .acc-marca {
    margin: 0; border-radius: 0; padding: 72px 44px 44px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .acc-marca .acceso-tema { position: absolute; top: 24px; right: 24px; }
  .acc-logo { width: 340px; margin-top: 0; }
  .acc-puntos { display: grid; margin: 36px 0 0; color: #d6e5f5; }
  .acc-puntos .ic { color: #75d0fa; }
  .acc-forma { margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 52px 48px 36px; }
}