/* Puerta del aula: la "sala de control" de Montesafe en su versión de capacitación.
   El escudo manda; el fondo es una rejilla con anillos de sello y un barrido de luz lento.
   Solo se anima transform y opacity, y todo se calma con prefers-reduced-motion. */
.puerta-aula { background: var(--noche); color: var(--claro-sobre-noche); }
.pa {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
  padding: 3.25rem var(--gutter) max(1.25rem, env(safe-area-inset-bottom));
}

.pa__fondo {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(70% 40% at 50% 26%, rgba(37, 127, 204, .2), transparent 72%),
    linear-gradient(180deg, var(--noche) 0%, #0D1926 100%);
}
.pa__fondo > * { position: absolute; }
.pa__rejilla {
  inset: 0; --paso: clamp(2.75rem, 9vw, 4.5rem);
  background:
    linear-gradient(90deg, rgba(127, 182, 232, .07) 1px, transparent 1px) 50% 0 / var(--paso) var(--paso),
    linear-gradient(0deg, rgba(127, 182, 232, .07) 1px, transparent 1px) 0 50% / var(--paso) var(--paso);
  -webkit-mask-image: radial-gradient(120% 70% at 50% 30%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 70% at 50% 30%, #000 30%, transparent 78%);
}
/* Anillos concéntricos detrás del escudo, como un sello. Giran muy lento, en sentidos opuestos. */
.pa__anillos { left: 50%; top: clamp(8.5rem, 26vh, 13rem); width: 0; height: 0; }
.pa__anillos i {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid rgba(127, 182, 232, .13); transform: translate(-50%, -50%);
}
.pa__anillos i:nth-child(1) { width: clamp(17rem, 82vw, 26rem); aspect-ratio: 1; border-style: dashed; border-color: rgba(127, 182, 232, .16); animation: anillo-gira 120s linear infinite; }
.pa__anillos i:nth-child(2) { width: clamp(22rem, 108vw, 34rem); aspect-ratio: 1; animation: anillo-gira 180s linear infinite reverse; }
.pa__anillos i:nth-child(3) { width: clamp(28rem, 140vw, 44rem); aspect-ratio: 1; border-color: rgba(127, 182, 232, .07); }
@keyframes anillo-gira { to { transform: translate(-50%, -50%) rotate(360deg); } }
.pa__barrido {   /* una franja de luz que baja por la pantalla cada 9 s */
  left: 0; right: 0; top: 0; height: 34vh;
  background: linear-gradient(180deg, transparent, rgba(127, 182, 232, .06) 60%, rgba(127, 182, 232, .12) 98%, transparent);
  opacity: 0; animation: barrido 9s var(--ease-emph) 1.6s infinite;
}
@keyframes barrido { 0% { transform: translateY(-40vh); opacity: 0; } 12% { opacity: 1; } 55% { opacity: .6; } 70%, 100% { transform: translateY(105vh); opacity: 0; } }
.pa__vineta { inset: 0; background: radial-gradient(130% 90% at 50% 32%, transparent 55%, rgba(0, 0, 0, .5) 100%); }

.pa__marco { position: absolute; inset: .875rem; z-index: -1; pointer-events: none; }
.pa__marco i { position: absolute; width: .8rem; height: .8rem; border: 0 solid rgba(232, 238, 244, .36); }
.pa__marco i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.pa__marco i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.pa__marco i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.pa__marco i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.pa__dato { position: absolute; top: .3rem; font: 500 .625rem/1 var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: #8EA2B6; }
.pa__dato--izq { left: 1.4rem; }
.pa__dato--der { right: 1.4rem; display: inline-flex; align-items: center; gap: .45rem; }
.pa__dato--der::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: var(--azul-300); box-shadow: 0 0 0 3px rgba(127, 182, 232, .18); }

.pa__panel { width: 100%; max-width: 25rem; display: flex; flex-direction: column; align-items: center; text-align: center; }

.pa__marca { position: relative; width: clamp(7.5rem, 34vw, 9.5rem); }
.pa__aura {
  position: absolute; left: 50%; top: 48%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(37, 127, 204, .34) 0%, rgba(37, 127, 204, .1) 34%, transparent 62%);
  animation: aura 7s ease-in-out infinite;
}
@keyframes aura { 0%, 100% { opacity: .8; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.pa__marca .escudo { position: relative; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .45)) drop-shadow(0 0 24px rgba(37, 127, 204, .28)); }
/* El escáner cruza el interior del escudo cada tanto: una línea de luz que baja. */
.js .pa__marca .escudo__escaneo { opacity: 1; animation: escaneo 6s var(--ease-emph) 1.2s infinite; }
@keyframes escaneo { 0% { transform: translateY(0); } 30%, 100% { transform: translateY(520px); } }
/* Al cargar, los filetes del escudo se trazan. */
.js .pa__marca .escudo__filete { stroke-dasharray: 1; animation: filete 1.1s var(--ease) .15s backwards; }
@keyframes filete { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.pa .marca-academia { width: clamp(12rem, 56vw, 15.5rem); margin-top: 1.4rem; font-size: clamp(.95rem, 3.6vw, 1.1rem); }
.pa__titulo {
  margin-top: 1.6rem;
  font: 800 var(--t-xl)/1.1 var(--f-titulo); letter-spacing: -.01em; color: var(--blanco);
}
.pa__aviso { margin-top: .9rem; padding: .6rem .9rem; border-radius: var(--r-sm); background: rgba(242, 165, 166, .1); color: var(--error-sobre-noche); font-size: .9375rem; }

/* Roles: tres puertas. La de alumno es la principal (azul); las otras, vidrio oscuro. */
.pa__roles { width: 100%; margin-top: 1.5rem; display: grid; gap: .75rem; }
.rol {
  position: relative; overflow: hidden; width: 100%; min-height: 4.5rem;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
  padding: .85rem 1rem .85rem .9rem; text-align: left; cursor: pointer;
  border-radius: var(--r-md); border: 1px solid rgba(232, 238, 244, .16);
  background: rgba(13, 25, 38, .72); color: var(--claro-sobre-noche);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: inherit; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.rol:hover { transform: translateY(-2px); border-color: rgba(127, 182, 232, .42); background: rgba(17, 34, 53, .86); }
.rol:active { transform: scale(.99); }
.rol__icono {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px;
  background: rgba(127, 182, 232, .1); color: var(--azul-300);
}
.rol__icono svg { width: 1.4rem; height: 1.4rem; }
.rol__texto { display: grid; gap: .2rem; }
.rol__texto b { font: 600 1.0625rem/1.2 var(--f-texto); color: var(--blanco); }
.rol__texto small { font-size: .875rem; line-height: 1.35; color: var(--suave-sobre-noche); }
.rol__flecha { width: 1.2rem; height: 1.2rem; color: var(--azul-300); transition: transform var(--dur-1) var(--ease); }
.rol:hover .rol__flecha { transform: translateX(3px); }
.rol--principal {
  border-color: rgba(127, 182, 232, .3);
  background: linear-gradient(180deg, #2A86D4 0%, var(--azul-boton) 55%, #1A62A3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 16px 34px -14px rgba(37, 127, 204, .85), 0 0 40px -10px rgba(37, 127, 204, .4);
}
.rol--principal:hover { background: linear-gradient(180deg, #2E8CDB 0%, #2179C2 55%, #1C68AC 100%); border-color: rgba(232, 238, 244, .4); }
.rol--principal .rol__icono { background: rgba(255, 255, 255, .16); color: var(--blanco); }
.rol--principal .rol__texto small { color: rgba(255, 255, 255, .86); }
.rol--principal .rol__flecha { color: var(--blanco); }
.rol--principal::before {   /* destello que cruza cada tanto */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-115%); animation: destello 7s var(--ease-emph) 2.4s infinite;
}
@keyframes destello { 0% { transform: translateX(-115%); } 15%, 100% { transform: translateX(115%); } }
.rol--sugerido { box-shadow: 0 0 0 2px var(--azul-300); }
.rol--entrando { pointer-events: none; }
.rol--entrando .rol__flecha { animation: entrando 800ms ease-in-out infinite; }
@keyframes entrando { 50% { transform: translateX(4px); opacity: .4; } }

.pa__nota { margin-top: 1.25rem; max-width: 34ch; font-size: .8125rem; line-height: 1.5; color: #8EA2B6; }
.pa__pie { margin-top: 1.5rem; font-size: .75rem; letter-spacing: .06em; color: #7F93A7; text-align: center; text-wrap: balance; }

/* Entrada escalonada */
.js .pa [data-entra] { animation: entra var(--dur-3) var(--ease) calc(var(--i, 0) * 80ms + 120ms) backwards; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }

@media (min-width: 768px) {
  .pa { padding-top: 3.75rem; }
  .pa__marco { inset: 1.25rem; }
  .pa__dato { top: .4rem; font-size: .6875rem; }
}
@media (max-height: 720px) and (max-width: 767px) {
  .pa__marca { width: 6.5rem; }
  .pa__titulo { margin-top: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pa__anillos i, .pa__barrido, .pa__aura, .rol--principal::before, .js .pa__marca .escudo__escaneo { animation: none; }
  .pa__barrido, .rol--principal::before, .js .pa__marca .escudo__escaneo { display: none; }
  .js .pa__marca .escudo__filete { animation: none; stroke-dasharray: none; }
  .js .pa [data-entra] { animation: entra-suave 250ms ease-out backwards; }
  .rol, .rol__flecha { transition: none; }
  .rol:hover, .rol:hover .rol__flecha { transform: none; }
}
@keyframes entra-suave { from { opacity: 0; } }