/* =======================================================
   INTRO — Splash neomorfo de apertura (index.html)
   ======================================================= */

.intro-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
  z-index: 2;
  gap: var(--space-6);
}

/* Logo dentro de un círculo neomórfico levantado */
.intro-logo-wrap {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: var(--grad-raised);
  box-shadow: var(--nm-raised-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  position: relative;
}

.intro-logo-wrap::after {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--grad-sunk);
  box-shadow: var(--nm-sunk);
  z-index: 0;
}

.intro-logo {
  width: 92px;
  height: 92px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 12px rgba(161, 24, 48, 0.25));
}

.intro-underline {
  width: 0;
  height: 6px;
  border-radius: 6px;
  background: var(--grad-accent);
  box-shadow: var(--nm-sunk-sm), var(--glow-accent);
}

.intro-brand {
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
}
.intro-brand .brand-name {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
}
.intro-brand .brand-tag {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.intro-progress {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
  overflow: hidden;
  opacity: 0;
}
.intro-progress::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
  transform: translateX(calc(-100% + (var(--fill, 0) * 100%)));
  box-shadow: 0 0 12px var(--color-accent-glow);
}

/* Vignette desactivada en neomorfo (look limpio monocromático) */
.intro-vignette { display: none; }

/* ===== Loader stage ===== */
.loader-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

.loader-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-raised);
  position: relative;
}
.loader-ring::before,
.loader-ring::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-sunk-sm);
}
.loader-ring::after {
  inset: 22px;
  background: var(--grad-accent);
  box-shadow: 0 0 20px var(--color-accent-glow);
  animation: nm-pulse 1.2s ease-in-out infinite;
}

@keyframes nm-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.7); opacity: 0.6; }
}

.loader-text {
  margin-top: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.loader-dots {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.loader-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--nm-raised-sm);
  animation: nm-dot 1.4s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: 0.18s; }
.loader-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes nm-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-6px); opacity: 1; background: var(--color-accent); }
}

/* ===== Footer copy + versión ===== */
.intro-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  text-align: center;
  padding: 0 20px;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.intro-footer .copy {
  font-size: 10.5px;
  color: var(--color-text-muted);
}
.intro-footer .version {
  font-size: 10px;
  color: var(--color-text-dim);
  margin-top: 2px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}


/* Splash: badge de iniciales (sustituye el logo-light.svg de desarrollo). Nombre e iniciales
   reales llegan de intro-brand.js; si la marca tiene logo, se inyecta <img> dentro. */
.intro-logo[data-brand-mark]{
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box; overflow:hidden;
  background:var(--color-accent, #4FC3F7); color:#fff;
  font-weight:800; font-size:44px; line-height:1; letter-spacing:.02em; text-transform:uppercase;
  border-radius:26%;
}
.intro-logo[data-brand-mark] img{ width:100%; height:100%; object-fit:contain; display:block; }


/* Splash (disco neomorfico): iniciales en el hueco hundido; sin recuadro de color. Anula el
   badge solido generico de arriba. El logo real, si existe, se inyecta como <img>. */
.intro-logo[data-brand-mark]{ background:transparent; color:var(--color-accent); border-radius:0; font-size:40px; }
.intro-logo[data-brand-mark] img{ width:100%; height:100%; object-fit:contain; display:block; }