/* ═══════════════════════════════════════════════════
   SPLASH INTRO AVANZADO — Pinturas Extracolor
   El pintor recorre la pantalla pintando la franja
   arcoíris; al final la pintura se "despinta" (erase
   reveal) descubriendo el sitio real debajo.
   Solo se carga en index.html.
   ═══════════════════════════════════════════════════ */

#ec-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: transparent; /* el canvas pinta el fondo */
  contain: strict;         /* aislamiento de render — performance */
}

/* Canvas de pintura: cubre todo */
#ec-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ══ EL PINTOR — se mueve vía JS siguiendo la brocha ══ */
#ec-painter {
  position: absolute;
  width: clamp(110px, 16vw, 210px);
  height: auto;
  z-index: 5;
  will-change: transform;              /* GPU compositing */
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.35));
  transform: translate(-120%, 40vh) scaleX(-1);
  pointer-events: none;
}

/* Bobbing sutil del pintor mientras "trabaja" */
#ec-painter.working {
  animation: ecBob .38s ease-in-out infinite alternate;
}
@keyframes ecBob {
  from { margin-top: 0; }
  to   { margin-top: -7px; }
}

/* ══ LOGO CENTRAL ══ */
.ec-brand {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%) scale(.92);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.4,.64,1);
}
.ec-brand.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ec-brand img {
  width: clamp(240px, 40vw, 500px);
  height: auto;
  filter: drop-shadow(0 6px 30px rgba(0,0,0,.25));
}

/* Barra de progreso corporativa */
.ec-bar {
  margin-top: 1.3rem;
  width: clamp(200px, 34vw, 360px);
  height: 5px;
  background: rgba(0,0,0,.08);
  border-radius: 3px;
  overflow: hidden;
}
.ec-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg,
    #E30613 0 20%, #FFD100 20% 40%,
    #0033A0 40% 60%, #009640 60% 80%, #FF7A00 80% 100%);
  transition: width .25s linear;
}
.ec-tag {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(11px, 1.5vw, 14px);
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #444;
  margin-top: .7rem;
}

/* ══ Botón saltar intro (accesibilidad/usuarios impacientes) ══ */
.ec-skip {
  position: absolute;
  bottom: 22px;
  right: 22px;
  z-index: 7;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px;
  padding: 8px 18px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
  opacity: 0;
  animation: ecSkipIn .4s ease 1.2s forwards;
}
.ec-skip:hover { background: rgba(0,0,0,.8); }
@keyframes ecSkipIn { to { opacity: 1; } }

/* ══ Fase de salida: el splash se desvanece tras el erase ══ */
#ec-splash.done {
  transition: opacity .35s ease;
  opacity: 0;
  pointer-events: none;
}

/* El contenido real queda oculto hasta que el splash arranca el reveal
   (evita flash de contenido). JS lo controla con .ec-lock en body */
body.ec-lock { overflow: hidden; height: 100vh; }

/* Móvil: pintor más pequeño, logo ajustado */
@media (max-width: 600px) {
  #ec-painter { width: 92px; }
  .ec-brand { top: 42%; }
  .ec-skip { bottom: 16px; right: 16px; padding: 7px 14px; font-size: 11px; }
}

/* Usuarios con reduced-motion: splash mínimo (JS lo salta) */
@media (prefers-reduced-motion: reduce) {
  #ec-splash { display: none !important; }
  body.ec-lock { overflow: auto; height: auto; }
}