/*
 * Portada de sgfae.fae.mil.ec.
 *
 * Dos actos. Primero la bienvenida, a pantalla completa, con el escudo de la
 * Fuerza Aérea. Después la portada, sobre la misma escena: la marca y los
 * servicios, cada uno con una línea. Los accesos de ODIN y CRYPTO repiten esta
 * escena (matriz/web/src/estilos/acceso.css, motor/.../entrar/entrar.scss).
 *
 * `--espera` es la bisagra entre los dos: cuánto tarda la portada en aparecer.
 * La bienvenida se va sola con una animación de CSS (`forwards`), así que la
 * página funciona aunque el JavaScript no cargue; lo único que aporta el script
 * es poder saltarla, y entonces pone `--espera` a cero.
 */

:root {
  --espera: 3s;
}

/* La marca la pone `js/bienvenida-marca.js` desde el <head>, antes del primer
   pintado: la bienvenida ya se vio en esta sesión, así que no llega a existir y
   la portada entra sin esperar. */
.sin-bienvenida {
  --espera: 0s;
}

.sin-bienvenida .bienvenida {
  display: none;
}

/* ============================================================ BIENVENIDA */

.bienvenida {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* El escudo viene recortado sobre un cortinaje que en los bordes es casi
     negro (#000105 en las esquinas). El fondo arranca de ahí, así que la
     imagen no enseña su rectángulo: se funde. */
  background: radial-gradient(circle at 50% 40%, #0a1330 0%, #04070f 58%, #02040a 100%);
  animation: bienvenida-salir 620ms ease 2.8s forwards;
}

/* A la mitad de la salida deja de tapar: los clics ya pasan a la portada. */
@keyframes bienvenida-salir {
  to {
    opacity: 0;
    pointer-events: none;
  }
}

.bienvenida--fuera {
  animation: bienvenida-salir 380ms ease forwards;
}

/* Resplandor dorado detrás del escudo: le da peso y separa del fondo. */
.bienvenida__halo {
  position: absolute;
  width: min(86vmin, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(202, 163, 73, 0.16), transparent 62%);
  filter: blur(26px);
  animation: bienvenida-halo 1800ms ease both;
}

@keyframes bienvenida-halo {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: none; }
}

.bienvenida__escudo {
  width: min(44vmin, 290px);
  height: auto;
  object-fit: contain;
  margin-bottom: clamp(18px, 4vw, 30px);
  /* Difumina el borde del recorte para que no se adivine el rectángulo. */
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 58%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 48%, #000 58%, transparent 78%);
  animation: bienvenida-escudo 1200ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes bienvenida-escudo {
  from { opacity: 0; transform: scale(0.86); filter: blur(9px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.bienvenida__centro {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 0 clamp(16px, 5vw, 32px);
}

.bienvenida__hola {
  margin: 0;
  font-size: clamp(2rem, 9vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tinta-alta);
  /* Compensa el espacio que la última letra arrastra a la derecha. */
  text-indent: 0.14em;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  animation: bienvenida-titulo 1100ms cubic-bezier(0.2, 0.7, 0.3, 1) 220ms both;
}

@keyframes bienvenida-titulo {
  from {
    opacity: 0;
    letter-spacing: 0.44em;
    filter: blur(7px);
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.14em;
    filter: blur(0);
    transform: none;
  }
}

.bienvenida__linea {
  display: block;
  height: 2px;
  width: 0;
  margin: clamp(14px, 3vw, 22px) 0;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
  animation: bienvenida-linea 900ms ease 760ms both;
}

@keyframes bienvenida-linea {
  to { width: min(360px, 72vw); }
}

.bienvenida__quien {
  margin: 0;
  font-size: clamp(0.7rem, 2.6vw, 0.92rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--oro);
  animation: bienvenida-subir 800ms ease 900ms both;
}

.bienvenida__sep {
  margin: 0 6px;
  opacity: 0.6;
}

/* En pantalla estrecha la línea no cabe entera y el punto quedaba colgando al
   final del primer renglón. Se parte en dos y se retira el separador. */
@media (max-width: 460px) {
  .bienvenida__parte {
    display: block;
  }

  .bienvenida__sep {
    display: none;
  }

  .bienvenida__quien {
    line-height: 1.7;
  }
}

@keyframes bienvenida-subir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.bienvenida__seguir {
  margin-top: clamp(22px, 5vw, 34px);
  padding: 11px 26px;
  border-radius: 999px;
  border: 1px solid rgba(202, 163, 73, 0.45);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  color: var(--tinta-alta);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  animation: bienvenida-subir 700ms ease 1300ms both;
}

.bienvenida__seguir:hover,
.bienvenida__seguir:focus-visible {
  background: rgba(202, 163, 73, 0.18);
  border-color: var(--oro);
  transform: translateY(-2px);
  outline: none;
}

/* =============================================================== PORTADA */

/*
 * La escena de la bienvenida sigue debajo: mismo fondo, mismo halo, mismo
 * escudo. En escritorio la marca va a la izquierda y los servicios a la
 * derecha, en rejilla de dos; en el telefono, la marca arriba y en pequeño.
 */
.portal {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: radial-gradient(circle at 27% 45%, #0a1330 0%, #04070f 58%, #02040a 100%);
}

.portal__halo {
  position: absolute;
  top: 45%;
  left: 27%;
  width: min(80vmin, 660px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(202, 163, 73, 0.15), transparent 62%);
  filter: blur(26px);
  pointer-events: none;
}

.portal__shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1320px);
  margin: auto;
  display: grid;
  align-items: center;
  justify-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: max(28px, env(safe-area-inset-top)) clamp(16px, 4vw, 48px) 20px;
}

@media (min-width: 1000px) {
  .portal__shell {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 999px) {
  .portal {
    background: radial-gradient(circle at 50% 18%, #0a1330 0%, #04070f 58%, #02040a 100%);
  }

  .portal__halo {
    top: 16%;
    left: 50%;
  }
}

/* ---------- Marca ---------- */

.portal__head {
  display: grid;
  justify-items: center;
  text-align: center;
  animation: portal-entra 640ms cubic-bezier(0.2, 0.7, 0.3, 1) var(--espera) backwards;
}

.portal__escudo {
  width: clamp(120px, 28vw, 290px);
  height: auto;
  margin-bottom: clamp(10px, 2.4vw, 22px);
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 58%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 48%, #000 58%, transparent 78%);
}

.portal__eyebrow {
  margin: 0 0 10px;
  font-size: clamp(0.64rem, 2.2vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--oro);
}

.portal__head h1 {
  margin: 0;
  font-size: clamp(1.8rem, 6.4vw, 3.4rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--tinta-alta);
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.portal__linea {
  display: block;
  width: min(340px, 70vw);
  height: 2px;
  margin: clamp(14px, 2.6vw, 20px) 0;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
}

/* Las páginas de una sola columna (app.html, autenticador.html): la misma
   escena, con el halo arriba y al centro y el escudo más pequeño. */
.portal--centro {
  background: radial-gradient(circle at 50% 14%, #0a1330 0%, #04070f 58%, #02040a 100%);
}

.portal--centro .portal__halo {
  top: 14%;
  left: 50%;
}

.portal__escudo--chico {
  width: clamp(96px, 22vw, 150px);
}

/* ---------- Servicios ---------- */

.portal__options {
  display: grid;
  gap: 12px;
  width: min(100%, 720px);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .portal__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

.portal-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 84px;
  padding: 14px 16px;
  text-align: left;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(202, 163, 73, 0.16);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(20, 30, 54, 0.62), rgba(6, 11, 24, 0.78));
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
  /* `backwards` y no `both`: al terminar, la animación suelta el `transform` y
     el `:hover` vuelve a mandar. */
  animation: portal-entra 620ms cubic-bezier(0.2, 0.7, 0.3, 1)
    calc(var(--espera) + 150ms + var(--i, 0) * 80ms) backwards;
}

/* El escalonado va aquí y no en un style="--i: N" del HTML: la CSP del
   servidor (`style-src 'self'`) bloquea los atributos style=. */
.portal-card:nth-of-type(1) { --i: 0; }
.portal-card:nth-of-type(2) { --i: 1; }
.portal-card:nth-of-type(3) { --i: 2; }
.portal-card:nth-of-type(4) { --i: 3; }
.portal-card:nth-of-type(5) { --i: 4; }
.portal-card:nth-of-type(6) { --i: 5; }

@keyframes portal-entra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.portal-card:hover,
.portal-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(202, 163, 73, 0.6);
  background: linear-gradient(160deg, rgba(28, 40, 66, 0.8), rgba(10, 16, 32, 0.9));
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
  outline: none;
}

.portal-card:active {
  transform: translateY(-1px) scale(0.995);
}

.portal-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
}

.portal-card__icon svg {
  width: 23px;
  height: 23px;
}

.portal-card__icon--cifrador {
  color: var(--violeta-claro);
  background: rgba(124, 58, 237, 0.16);
}

.portal-card__icon--gestion {
  color: var(--azul-claro);
  background: rgba(37, 99, 235, 0.16);
}

.portal-card__icon--autenticador {
  color: var(--ambar);
  background: rgba(245, 158, 11, 0.14);
}

.portal-card__icon--app {
  color: var(--oro-claro);
  background: rgba(202, 163, 73, 0.16);
}

.portal-card__icon--motor {
  color: var(--verde-claro);
  background: rgba(34, 197, 94, 0.14);
}

/* Cian: el único destino fuera de la Comandancia. */
.portal-card__icon--coae {
  color: var(--azul-cielo);
  background: rgba(14, 165, 233, 0.16);
}

.portal-card__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.portal-card__title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--tinta-alta);
}

.portal-card__text {
  font-size: 0.8rem;
  line-height: 1.3;
  color: rgba(226, 232, 240, 0.58);
}

.portal-card__go {
  font-size: 1.15rem;
  font-weight: 900;
  color: rgba(148, 163, 184, 0.55);
  transition: transform 160ms ease, color 160ms ease;
}

.portal-card:hover .portal-card__go,
.portal-card:focus-visible .portal-card__go {
  transform: translateX(4px);
  color: var(--oro);
}

/* ---------- Enlaces secundarios, bajo la marca ---------- */

.portal__enlaces {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
}

.portal__enlaces a {
  color: rgba(148, 163, 184, 0.9);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.portal__enlaces a:hover,
.portal__enlaces a:focus-visible {
  color: var(--oro);
  border-bottom-color: rgba(202, 163, 73, 0.5);
  outline: none;
}

.portal__bullet {
  color: rgba(148, 163, 184, 0.45);
}

/* ---------- Pie ---------- */

.portal__foot {
  position: relative;
  z-index: 1;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px max(18px, env(safe-area-inset-bottom));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.6);
  animation: portal-entra 620ms ease calc(var(--espera) + 600ms) backwards;
}

.portal__foot a {
  color: inherit;
  text-decoration: none;
}

.portal__foot a:hover,
.portal__foot a:focus-visible {
  color: var(--tinta-alta);
  text-decoration: underline;
}

.portal__foot-fila {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Cada estandar con su logo original (imagenes en assets/ref/): logo arriba, nombre debajo, en una fila que baja sola cuando no cabe. */
/* Suelta, al final de una pagina (autenticador, politicas): un parrafo centrado debajo del enlace de volver. */

.portal__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

/* ============================================== MOVIMIENTO REDUCIDO */

/* Quien pide menos movimiento sigue viendo la bienvenida, pero quieta y corta:
   se enseña el escudo, se lee el saludo y se pasa. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --espera: 0s;
  }

  .bienvenida {
    animation: bienvenida-salir 200ms linear 1400ms forwards;
  }

  .bienvenida--fuera {
    animation: bienvenida-salir 120ms linear forwards;
  }

  .bienvenida__halo,
  .bienvenida__escudo,
  .bienvenida__hola,
  .bienvenida__quien,
  .bienvenida__seguir,
  .portal__head,
  .portal-card,
  .portal__foot {
    animation: none;
  }

  .bienvenida__linea {
    animation: none;
    width: min(360px, 72vw);
  }

  .portal-card,
  .portal-card__go {
    transition: none;
  }

  .portal-card:hover,
  .portal-card:focus-visible {
    transform: none;
  }
}

/* MARCOS DE REFERENCIA (14-10-2026): el mismo bloque en todos los accesos y paginas. Logos oficiales de NIST y OWASP sin modificar. */
.marcos {
  --m-t1: rgba(241, 245, 249, 0.94);
  --m-t2: rgba(203, 213, 225, 0.74);
  --m-t3: rgba(148, 163, 184, 0.82);
  box-sizing: border-box;
  flex: 1 1 100%;
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.35;
  color: var(--m-t2);
}
.marcos--pie {
  margin: 26px auto 8px;
}
.marcos--panel {
  padding: 14px 6px 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  background: linear-gradient(180deg, #0f1b35, #0a1224);
}
.marcos__eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-t1);
}
.marcos__sub {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--m-t2);
}
.marcos__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 16px;
  max-width: 724px;
  margin: 14px auto 0;
  padding: 0;
  list-style: none;
}
.marcos__item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 132px;
  margin: 0;
  padding: 0;
}
.marcos__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 28px;
}
.marcos__logo img {
  display: block;
  flex: none;
  max-width: 100%;
  height: auto;
}
.marcos__nombre {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--m-t1);
}
.marcos__det {
  margin-top: -3px;
  font-size: 11px;
  color: var(--m-t3);
}/* Compacto: tarjetas y pies de acceso. Tres por fila y, cuando no cabe, dos. */
.marcos--compacto {
  max-width: 340px;
}
.marcos--compacto .marcos__lista {
  gap: 10px 8px;
  max-width: 336px;
  margin-top: 10px;
}
.marcos--compacto .marcos__item {
  width: 104px;
}
.marcos--compacto .marcos__logo {
  height: 24px;
}
.marcos--compacto .marcos__nombre {
  font-size: 11px;
}
.marcos--compacto .marcos__det {
  font-size: 10px;
}/* Dentro del panel (padding y borde) caben menos: cada marco algo mas estrecho para seguir en tres por fila. */
.marcos--panel.marcos--compacto .marcos__lista {
  gap: 10px 6px;
}
.marcos--panel.marcos--compacto .marcos__item {
  width: 96px;
}
/* Completo en pantallas medianas y pequenas: tres por fila y luego dos. */
@media (max-width: 760px) {
  .marcos--completo .marcos__lista {
    max-width: 440px;
  }
}
@media (max-width: 440px) {
  .marcos--completo .marcos__lista {
    gap: 10px 8px;
    max-width: 336px;
    margin-top: 10px;
  }
  .marcos--completo .marcos__item {
    width: 104px;
  }
  .marcos--completo .marcos__logo {
    height: 24px;
  }
  .marcos--completo .marcos__nombre {
    font-size: 11px;
  }
  .marcos--completo .marcos__det {
    font-size: 10px;
  }
}