/* Tecnocon — Intro: entrada limpia del logotipo (estilo confiable, sin narrativa recargada) */

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  background: linear-gradient(135deg, var(--cobalt-500) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
}

.intro {
  position: relative;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
}

.intro__mark {
  width: min(70vw, 460px);
}
.intro__mark svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Estados iniciales (evita cualquier parpadeo antes de que corra el JS) */
.intro-icon { opacity: 0; }
.intro-word path { opacity: 0; }
.intro-tagline path { opacity: 0; }
.intro-rule { opacity: 0; }

.intro__skip {
  position: relative;
  z-index: 20;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: rgba(5,7,15,0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.95rem;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.intro__skip[data-visible="true"] { pointer-events: auto; }
.intro__skip:hover, .intro__skip:focus-visible {
  color: #fff;
  border-color: rgba(255,255,255,0.7);
  background: rgba(5,7,15,0.65);
}

@media (prefers-reduced-motion: reduce) {
  .intro-icon, .intro-word path, .intro-tagline path, .intro-rule { opacity: 1 !important; }
}