/* ═══════════════════════════════════════════════════════════
   CEMEDEC — Brand Intro Experience
   Capa cinematográfica superior. Solo se muestra si el gate
   inline añadió html.intro-play (1ª visita de la sesión y
   sin prefers-reduced-motion).
   ═══════════════════════════════════════════════════════════ */

.intro { display: none; }

html.intro-play .intro {
  display: block;
  position: fixed; inset: 0; z-index: 300;
  background: linear-gradient(162deg, #FFFFFF 0%, #F4F8FC 48%, #E7F0FA 100%);
  overflow: hidden;
  color: #10233D;
}
html.intro-play { overflow: hidden; }

/* Capa blanca inicial (Escena 1-2); funde a navy en la Escena 3 */
.intro__bgw { position: absolute; inset: 0; z-index: 1; background: #FDFEFF; }

/* Punto vital */
.intro__dot {
  position: absolute; left: 50%; top: 50%; z-index: 6;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #2D6FD2;
  box-shadow: 0 0 18px 4px rgba(45, 111, 210, .55), 0 0 64px 18px rgba(45, 111, 210, .22);
  opacity: 0; transform: scale(.2);
}

/* Escenario SVG: ECG + iconos (coordenadas = px de viewport) */
.intro__stage { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; }

/* Partículas */
.intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; }

/* Edificio: blueprint + fotografía + escáner */
.intro__building {
  position: absolute; left: 50%; top: 56%; z-index: 2;
  width: min(72vw, 980px); aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: transform;
}
.intro__bp { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro__bp path, .intro__bp circle {
  fill: none;
  stroke: rgba(45, 111, 210, .65);
  stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.intro__bp .bp--soft { stroke: rgba(45, 111, 210, .32); stroke-width: 1.5; }

.intro__photo-wrap { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); }
.intro__photo-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 8px;
}
.intro__sheen {
  position: absolute; top: 0; bottom: 0; width: 26%; left: 0; opacity: 0;
  background: linear-gradient(100deg, rgba(143, 179, 232, 0), rgba(190, 216, 248, .28) 55%, rgba(143, 179, 232, 0));
  mix-blend-mode: screen; pointer-events: none;
}
.intro__scan {
  position: absolute; top: -5%; bottom: -5%; left: 0; width: 3px; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(143, 179, 232, .95) 16%, #fff 50%, rgba(143, 179, 232, .95) 84%, transparent);
  box-shadow: 0 0 26px 7px rgba(45, 111, 210, .5);
  pointer-events: none;
}
.intro__glint {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  left: var(--gx); top: var(--gy);
  background: #fff;
  box-shadow: 0 0 20px 7px rgba(143, 179, 232, .85);
  opacity: 0; pointer-events: none;
}

/* Wordmark DOM (nítido): solo para el vuelo hacia la navbar */
.intro__word {
  position: absolute; left: 0; top: 0; z-index: 7;
  font-family: var(--font-sans, "Hanken Grotesk", sans-serif);
  font-weight: 800; letter-spacing: .02em; line-height: 1;
  color: #17549F; white-space: nowrap;
  opacity: 0; transform-origin: left top;
  will-change: transform, opacity;
}

/* Tagline + eslogan */
.intro__tag {
  position: absolute; left: 50%; z-index: 7; transform: translateX(-50%);
  margin: 0; text-transform: uppercase; white-space: nowrap;
  font-family: var(--font-sans, "Hanken Grotesk", sans-serif);
  font-weight: 700; font-size: clamp(.66rem, 1.5vw, .84rem);
  letter-spacing: .5em; color: #2D6FD2;
  opacity: 0;
}
.intro__slogan {
  position: absolute; left: 50%; z-index: 7; transform: translateX(-50%);
  margin: 0; white-space: nowrap;
  font-family: var(--font-serif, "Newsreader", serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 2.7vw, 1.75rem);
  color: #10233D;
  opacity: 0;
}
.intro__slogan-in { display: inline-block; clip-path: inset(-20% 102% -25% 0); }
.intro__firma { position: absolute; left: 6%; right: 4%; bottom: -.34em; color: #C21F2C; pointer-events: none; }
.intro__firma svg { width: 100%; height: .46em; display: block; overflow: visible; }
.intro__firma-path { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* Luz de la entrada (Escena 9) */
.intro__bloom {
  position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at var(--bx, 52%) var(--by, 70%),
    rgba(255, 255, 255, .96), rgba(199, 221, 248, .8) 26%,
    rgba(45, 111, 210, .38) 52%, rgba(7, 31, 61, 0) 76%);
}
.intro__bloom img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: blur(16px) brightness(1.12); transform: scale(1.14);
}

/* Saltar */
.intro__skip {
  position: absolute; right: 26px; bottom: 24px; z-index: 10;
  padding: 11px 22px; border-radius: 999px;
  font: 600 .82rem/1 var(--font-sans, "Hanken Grotesk", sans-serif);
  letter-spacing: .06em;
  color: #46586F;
  border: 1px solid rgba(16, 35, 61, .22);
  background: rgba(16, 35, 61, .04);
  opacity: 0; pointer-events: none;
  transition: opacity .45s, background .25s, color .25s, border-color .25s;
}
.intro__skip.is-on { opacity: 1; pointer-events: auto; }
.intro__skip:hover { background: rgba(16, 35, 61, .1); color: var(--ink, #10233D); }

@media (max-width: 680px) {
  .intro__building { width: 94vw; }
  .intro__skip { right: 16px; bottom: 16px; }
}