/* Marcas de OmniStem — fuente UNICA de como se dibujan el isotipo, el logotipo, el sufijo
   "connect" y el splash de bienvenida.
   ==========================================================================================
   Regla (CLAUDE.md seccion 3.6): una sola definicion por pieza. Estas clases las montan
   modulos distintos (`portal` el encabezado del Connect, `main` el splash de Nexus) y por eso
   NO pueden vivir en la hoja de ninguno de los dos: la segunda copia se desvia de la primera
   sin que nada lo avise, que es exactamente el defecto que ya costo un fallo con la paleta de
   Plan definida dos veces.

   Va DESPUES de `tokens.css`, cuyas variables consume. No define layout: el contenedor
   (`.site-header` en el Connect) es de cada modulo, aqui solo van las marcas.

   Los archivos que estas clases referencian viven en `public/assets/` y salieron del legacy
   sin re-comprimir:
     brand-icon.svg  — isotipo suelto (era `OMNISTEM_ICON`, base64 dentro del HTML)
     brand-word.svg  — logotipo suelto (era `OMNISTEM_WORD`)
     logotype.svg    — lockup completo (era `OMNISTEM_LOGO`; byte a byte identico, comprobado)
     isologo.svg     — isotipo grande del splash
   ========================================================================================== */

/* --- Bloque de marca del encabezado (isotipo + logotipo + sufijo) --- */
.brand-block { display: flex; align-items: center; gap: 0.6rem; }
.brand-icon { height: 50px; width: auto; display: block; flex-shrink: 0; }
.brand-stack { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.brand-word { height: 26px; width: auto; display: block; }
.brand-suffix {
  font-family: 'Dancing Script', 'Brush Script MT', cursive;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--coral);
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  /* Los dos desplazamientos son del legacy: encajan la escritura bajo el logotipo sin dejar
     hueco. Cambiar uno sin el otro descuadra el conjunto. */
  margin-top: -7px;
  transform: translate(1mm, -1mm);
}

/* --- Logotipo del pie --- */
.footer-logo {
  height: 26px;
  width: auto;
  opacity: 0.45;
  filter: grayscale(60%);
  margin-bottom: 0.875rem;
  display: inline-block;
}

/* --- Splash de bienvenida (Nexus) --- */
#nexus-welcome-splash {
  position: fixed;
  inset: 0;
  /* #F9F6F0, el mismo crema del legacy: `--soft-cream` (#FBF9F4) es medio tono mas claro y se
     notaria contra el fondo de la pagina al terminar el fundido. */
  background: var(--warm-cream);
  /* Valor del legacy: tiene que quedar por encima de TODO, incluidos los overlays de los
     paneles de administracion. */
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  opacity: 1;
  transition: opacity 0.6s ease;
}
#nexus-welcome-splash.is-fading { opacity: 0; }
.nexus-welcome-mark {
  width: 140px;
  height: 140px;
  display: block;
  /* Giro y pulso simultaneos, como el legacy: 8s y 2.6s no son multiplos, asi que la
     combinacion no se repite a simple vista. */
  animation: nxWelcomeSpin 8s linear infinite, nxWelcomePulse 2.6s ease-in-out infinite;
  transform-origin: center;
  will-change: rotate, scale;
  backface-visibility: hidden;
}
.nexus-welcome-title {
  /* Libre Baskerville, no Cormorant Garamond: esa familia se retiro del repo (seccion 11.1).
     El `size-adjust: 76%` de /fonts/fonts.css deja el mismo ancho optico, asi que el 2.4rem
     del legacy sigue valiendo sin recalcular. */
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 2.4rem;
  /* El legacy pedia 300; Libre Baskerville arranca en 400 y Google Fonts responde HTTP 400
     por debajo de ese peso. */
  font-weight: 400;
  color: var(--charcoal);
  letter-spacing: 0.01em;
  animation: nxWelcomeFadeIn 0.8s ease-out;
}
.nexus-welcome-sub {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 0.72rem;
  color: var(--ink-muted);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
  animation: nxWelcomeFadeIn 1.2s ease-out;
}
@keyframes nxWelcomeSpin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes nxWelcomePulse {
  0%, 100% { scale: 0.94; opacity: 0.88; }
  50%      { scale: 1.06; opacity: 1; }
}
@keyframes nxWelcomeFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 600px) {
  .brand-icon { height: 40px; }
  .brand-word { height: 21px; }
  .brand-suffix { font-size: 1.2rem; }
}

/* El splash sigue apareciendo con movimiento reducido — el fundido es opacidad, no
   desplazamiento. Lo que se retira es el giro y el deslizamiento del texto. */
@media (prefers-reduced-motion: reduce) {
  .nexus-welcome-mark,
  .nexus-welcome-title,
  .nexus-welcome-sub { animation: none; }
}