/* ============================================================
   Gaudí, crear sin límites — portada.css
   Mapa de estaciones (híbrido): imagen de fondo 16:9 +
   enlaces transparentes alineados sobre cada tarjeta.
   ============================================================ */

/* ---------- Portada de bienvenida ---------- */
.welcome-stage {
  background:
    radial-gradient(circle at 18% 16%, rgba(26,188,156,0.16), transparent 45%),
    radial-gradient(circle at 84% 24%, rgba(255,209,102,0.18), transparent 45%),
    radial-gradient(circle at 80% 88%, rgba(255,122,89,0.14), transparent 45%),
    var(--blanco);
}
.welcome-bg {
  position: absolute; inset: 0;
  background-image: url('../img/portada_cabecera.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.welcome-detect { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Respaldo de texto (oculto si la imagen carga) */
.welcome-fallback {
  position: absolute; inset: 0; z-index: 2;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.welcome-title { font-family: var(--font-titulo); font-weight: 700; color: var(--azul); font-size: clamp(40px, 9vw, 120px); margin: 0; line-height: 1; }
.welcome-sub { color: var(--turquesa); font-size: clamp(18px, 3.4vw, 44px); margin: 4px 0 0; }
.welcome-stage.sin-imagen .welcome-bg { display: none; }
.welcome-stage.sin-imagen .welcome-fallback { display: flex; }

/* Botón Empezar */
.empezar-btn {
  position: absolute; z-index: 5;
  left: 40%; bottom: 20%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--turquesa); color: #fff;
  font-family: var(--font-cuerpo); font-weight: 700;
  font-size: clamp(15px, 2.2vw, 26px);
  padding: clamp(12px, 1.6vw, 20px) clamp(26px, 3.4vw, 48px);
  border-radius: 999px; text-decoration: none;
  box-shadow: 0 10px 26px rgba(26,188,156,0.45);
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.empezar-btn:hover, .empezar-btn:focus-visible {
  transform: translateX(-50%) translateY(-3px) scale(1.03);
  background: #15a589;
  box-shadow: 0 14px 32px rgba(26,188,156,0.55);
  outline: none;
}
.empezar-btn:focus-visible { box-shadow: 0 0 0 4px rgba(26,188,156,0.4), 0 14px 32px rgba(26,188,156,0.5); }
.empezar-ico { font-size: 1.2em; line-height: 1; }
@keyframes empezar-late { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }
@media (prefers-reduced-motion: no-preference) {
  .empezar-btn { animation: empezar-late 2.4s ease-in-out infinite; }
  .empezar-btn:hover, .empezar-btn:focus-visible { animation: none; }
}

/* ---------- Ejes STEAM animados de la bienvenida ---------- */
.welcome-steam {
  position: absolute; z-index: 4;
  left: 40%; top: calc(47% + 6px); transform: translateX(-50%);
  display: flex; gap: clamp(8px, 2vw, 30px);
  list-style: none; margin: 0; padding: 0;
  max-width: 70%;
}
.wsteam {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  width: clamp(76px, 11vw, 140px); text-align: center;
  /* estado inicial para la animación de entrada */
  opacity: 0;
  animation: wsteam-in 0.55s cubic-bezier(.2,.8,.25,1) forwards;
  animation-delay: calc(var(--i) * 0.13s + 0.35s);
}
.wsteam-ico {
  width: clamp(60px, 8.2vw, 108px); height: auto; aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(10,34,64,0.20));
  transition: transform var(--transicion);
}
.wsteam-tx {
  margin-top: clamp(-16px, -1.4vw, -10px);
  font-weight: 700; font-size: clamp(13px, 1.7vw, 21px);
  color: var(--c, var(--azul-profundo));
  text-shadow: 0 1px 2px rgba(255,255,255,0.85);
}
/* Color del texto a juego con el color dominante de cada icono */
.wsteam--naturaleza  { --c: #2f9e44; }  /* verde  */
.wsteam--geometria   { --c: #1f6fb2; }  /* azul   */
.wsteam--arte        { --c: #e8602c; }  /* naranja */
.wsteam--estructura  { --c: #d39a12; }  /* dorado */
.wsteam--creatividad { --c: #109b8e; }  /* turquesa */

/* Rebote al pasar el ratón / enfocar */
.wsteam:hover .wsteam-ico,
.wsteam:focus-within .wsteam-ico { animation: wsteam-bounce 0.5s ease; }

@keyframes wsteam-in {
  from { opacity: 0; transform: translateY(18px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wsteam-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-7px) scale(1.14); }
  60%      { transform: translateY(0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .wsteam { opacity: 1; animation: none; }
  .wsteam:hover .wsteam-ico, .wsteam:focus-within .wsteam-ico { animation: none; }
}

/* ---------- Mapa de estaciones ---------- */
.map-stage {
  /* Fondo de respaldo por si falta la imagen */
  background:
    radial-gradient(circle at 15% 12%, rgba(26,188,156,0.12), transparent 42%),
    radial-gradient(circle at 88% 90%, rgba(255,122,89,0.12), transparent 45%),
    var(--blanco);
}

/* ---------- Dragón guía flotante ---------- */
.dragon-guia {
  position: absolute; z-index: 7;
  left: 78%; top: 64%;   /* posición inicial; luego la mueve mascota.js */
  width: clamp(96px, 13vw, 168px);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none; /* el contenedor no bloquea; solo el dragón es clicable */
  transition: left 2.6s cubic-bezier(.45,0,.2,1), top 2.6s cubic-bezier(.45,0,.2,1);
}
.dragon-mascota {
  width: 100%; height: auto; border-radius: 50%;
  filter: drop-shadow(0 8px 18px rgba(10,34,64,0.28));
  animation: dragon-bob 3.2s ease-in-out infinite;
  pointer-events: auto; cursor: pointer; /* se le puede tocar/pulsar */
}
.bocadillo {
  position: relative;
  max-width: clamp(180px, 24vw, 300px);
  margin: 0 0 10px; padding: 10px 14px;
  background: #fff; color: var(--tinta);
  border: 1px solid rgba(10,34,64,0.10);
  border-radius: 16px;
  box-shadow: var(--sombra-suave);
  font-size: clamp(11px, 1.25vw, 15px); line-height: 1.3; text-align: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.bocadillo.visible { opacity: 1; transform: translateY(0); }
/* Pico del bocadillo apuntando al dragón */
.bocadillo::after {
  content: ''; position: absolute; left: 50%; bottom: -8px;
  transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: #fff;
  filter: drop-shadow(0 1px 0 rgba(10,34,64,0.10));
}

@keyframes dragon-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .dragon-guia { transition: none; }
  .dragon-mascota { animation: none; }
}

/* Botón volver a la bienvenida */
.map-volver {
  position: absolute; z-index: 6; top: 3%; left: 13%;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.85); color: var(--azul-profundo);
  font-size: 20px; text-decoration: none;
  box-shadow: var(--sombra-suave);
  transition: background var(--transicion), transform var(--transicion);
}
.map-volver:hover, .map-volver:focus-visible { background: #fff; transform: scale(1.08); outline: none; }
.map-volver:focus-visible { box-shadow: 0 0 0 3px var(--turquesa); }

.map-bg {
  position: absolute; inset: 0;
  background-image: url('../img/mapa_estaciones.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Imagen detectora (oculta) */
.map-detect { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- Enlace al inicio (sobre el logotipo) ---------- */
.map-logo-link {
  position: absolute; z-index: 5;
  left: 32%; top: 5%; width: 34%; height: 18%;
  border-radius: 16px;
  transition: background var(--transicion), transform var(--transicion);
}

/* ---------- Hotspots de estación ---------- */
.map-stations { position: absolute; inset: 0; z-index: 5; }
.hot {
  position: absolute;
  left: var(--l); top: var(--t); width: var(--w); height: var(--h);
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  text-decoration: none; color: var(--azul-profundo);
  transition: background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}

/* Realce sutil al pasar/enfocar (sin tapar la ilustración) */
.map-logo-link:hover, .map-logo-link:focus-visible,
.hot:hover, .hot:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}
.hot:hover, .hot:focus-visible {
  transform: scale(1.02);
  box-shadow: inset 0 0 0 3px rgba(26,188,156,0.85);
}
.map-logo-link:focus-visible, .hot:focus-visible {
  box-shadow: inset 0 0 0 3px var(--turquesa), 0 0 0 3px rgba(26,188,156,0.4);
}

/* Posición de cada tarjeta (% del escenario 16:9, rejilla 4×2 uniforme).
   La imagen es 1672×941 (16:9 exacto), así que los % calzan con la ilustración.
   Si alguna zona queda descuadrada, ajusta --l/--t/--w/--h de esa estación. */
.e1 { --l: 5%;  --t: 38%; --w: 21%; --h: 17%; }
.e2 { --l: 28%; --t: 38%; --w: 21%; --h: 17%; }
.e3 { --l: 51%; --t: 38%; --w: 21%; --h: 17%; }
.e4 { --l: 74%; --t: 38%; --w: 21%; --h: 17%; }
.e5 { --l: 5%;  --t: 59%; --w: 21%; --h: 18%; }
.e6 { --l: 28%; --t: 59%; --w: 21%; --h: 18%; }
.e7 { --l: 51%; --t: 59%; --w: 21%; --h: 18%; }
.e8 { --l: 74%; --t: 59%; --w: 21%; --h: 18%; }

/* ---------- Etiquetas: ocultas si hay imagen (la propia ilustración
   ya muestra los títulos), visibles como respaldo si la imagen falta ---------- */
.hot-label {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}

.map-stage.sin-imagen .map-bg { display: none; }
.map-stage.sin-imagen .hot,
.map-stage.sin-imagen .map-logo-link {
  background: #fff;
  border: 1px solid rgba(10,34,64,0.10);
  box-shadow: var(--sombra-suave);
}
.map-stage.sin-imagen .hot-label {
  position: static; width: auto; height: auto; clip: auto; white-space: normal;
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 8px; text-align: center; line-height: 1.2;
}
.map-stage.sin-imagen .hot-label b { font-size: clamp(9px, 1.05vw, 14px); color: var(--azul-profundo); }
.map-stage.sin-imagen .hot-label small { font-size: clamp(7px, 0.85vw, 11px); color: var(--tinta-suave); }
.map-stage.sin-imagen .map-logo-link {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titulo); font-weight: 700; color: var(--azul);
}
.map-stage.sin-imagen .map-logo-link .hot-label {
  position: static; width: auto; height: auto; clip: auto;
  font-size: clamp(12px, 1.6vw, 22px);
}