/* ==========================================================================
   ECO-RETO — LOS TRES MUNDOS
   ==========================================================================

   Escenarios completos hechos solo con gradientes, SVG en línea y animaciones
   CSS. Ni una sola imagen: pesan unos pocos KB, se ven nítidos en cualquier
   pantalla y no hay nada que un firewall corporativo pueda bloquear.

   Estructura de capas, de atrás hacia adelante:

       #escena
         .cielo        el degradado del mundo
         .aura         halos de luz que respiran
         .lejos        siluetas del fondo (SVG)
         .cerca        siluetas del frente (SVG)
         .particulas   burbujas, chispas u hojas

   REGLA DE ORO: el escenario nunca puede estorbar la lectura. Encima va un
   velo (.velo) que baja el contraste del fondo, y las tarjetas del juego son
   opacas. Un juego bonito que no se puede leer es un juego roto.

   Todo se apaga con prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Lienzo del escenario
   -------------------------------------------------------------------------- */
#escena {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Sin esto, en iOS la barra del navegador deja una franja blanca al hacer
     scroll y se ve el corte del degradado. */
  min-height: 100svh;
}

#escena > * { position: absolute; inset: 0; }

/* El velo protege la lectura, pero el primer intento lo puso al 90% y borró
   el escenario entero. Ahora es suave y con viñeta: aclara donde va el texto
   y deja el mundo a la vista en los bordes. Las tarjetas ya son opacas, así
   que el contraste del contenido no depende de esto. */
.escena__velo {
  background:
    radial-gradient(120% 76% at 50% 42%,
      rgba(248, 250, 252, .60) 0%,
      rgba(248, 250, 252, .34) 55%,
      rgba(248, 250, 252, .06) 100%);
  transition: background 600ms ease;
}

/* El contenido va siempre por encima del mundo. */
.cabecera, .lienzo, .reconecta { position: relative; z-index: 10; }
.cabecera { z-index: 30; }

/* Las siluetas SVG solo se muestran en su mundo. */
.mundo { opacity: 0; transition: opacity 700ms ease; }
body.zona-agua    .mundo--agua,
body.zona-energia .mundo--energia,
body.zona-papel   .mundo--papel { opacity: 1; }

.mundo svg { position: absolute; width: 100%; height: 100%; }

/* ==========================================================================
   CIELO — el degradado base de cada mundo
   ========================================================================== */
.escena__cielo {
  background:
    radial-gradient(1200px 700px at 50% -10%, #E0F2FE 0%, transparent 70%),
    linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%);
  transition: background 700ms ease;
}

/* --- AGUA: templo submarino ------------------------------------------------ */
body.zona-agua .escena__cielo {
  background:
    radial-gradient(900px 560px at 50% -6%,  rgba(125, 226, 255, .95) 0%, transparent 62%),
    radial-gradient(700px 480px at 12% 22%,  rgba(56, 189, 248, .55) 0%, transparent 60%),
    radial-gradient(760px 520px at 88% 30%,  rgba(45, 212, 191, .48) 0%, transparent 62%),
    linear-gradient(180deg, #0EA5E9 0%, #0369A1 45%, #075985 78%, #0C4A6E 100%);
}
body.zona-agua .escena__velo {
  background: radial-gradient(120% 76% at 50% 42%,
    rgba(240, 249, 255, .62) 0%, rgba(224, 242, 254, .34) 55%, rgba(186, 230, 253, .06) 100%);
}

/* --- ENERGÍA: central eléctrica nocturna ----------------------------------- */
body.zona-energia .escena__cielo {
  background:
    radial-gradient(760px 520px at 50% 8%,   rgba(253, 224, 71, .70) 0%, transparent 58%),
    radial-gradient(680px 520px at 14% 34%,  rgba(168, 85, 247, .48) 0%, transparent 62%),
    radial-gradient(700px 520px at 88% 26%,  rgba(249, 115, 22, .42) 0%, transparent 60%),
    linear-gradient(180deg, #1E1B4B 0%, #312E81 34%, #4C1D95 62%, #1E1B4B 100%);
}
body.zona-energia .escena__velo {
  background: radial-gradient(120% 76% at 50% 42%,
    rgba(255, 251, 235, .60) 0%, rgba(254, 243, 199, .32) 55%, rgba(253, 224, 71, .05) 100%);
}

/* --- PAPEL: bosque de pergamino -------------------------------------------- */
body.zona-papel .escena__cielo {
  background:
    radial-gradient(820px 540px at 50% -4%,  rgba(190, 242, 100, .78) 0%, transparent 60%),
    radial-gradient(680px 500px at 16% 28%,  rgba(134, 239, 172, .55) 0%, transparent 62%),
    radial-gradient(700px 500px at 86% 32%,  rgba(253, 230, 138, .48) 0%, transparent 60%),
    linear-gradient(180deg, #4ADE80 0%, #16A34A 38%, #15803D 68%, #14532D 100%);
}
body.zona-papel .escena__velo {
  background: radial-gradient(120% 76% at 50% 42%,
    rgba(247, 254, 245, .60) 0%, rgba(220, 252, 231, .32) 55%, rgba(187, 247, 208, .05) 100%);
}

/* --- PORTADA: centro de control, con los tres colores conviviendo --------- */
body:not([class*="zona-"]) .escena__cielo {
  background:
    radial-gradient(760px 520px at 20% 8%,  rgba(56, 189, 248, .55) 0%, transparent 60%),
    radial-gradient(720px 500px at 80% 12%, rgba(251, 191, 36, .45) 0%, transparent 60%),
    radial-gradient(820px 560px at 50% 92%, rgba(74, 222, 128, .50) 0%, transparent 62%),
    linear-gradient(180deg, #E0F2FE 0%, #F0FDF4 52%, #FEF9C3 100%);
}

/* ==========================================================================
   AURA — halos que respiran. Dan sensación de vida sin costar casi nada.
   ========================================================================== */
.escena__aura::before,
.escena__aura::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .5;
  animation: respirar-aura 9s ease-in-out infinite;
}
.escena__aura::before {
  width: 46vw; height: 46vw; max-width: 420px; max-height: 420px;
  left: -8%; top: 6%;
  background: radial-gradient(circle, var(--aura-1, #7DD3FC), transparent 70%);
}
.escena__aura::after {
  width: 40vw; height: 40vw; max-width: 380px; max-height: 380px;
  right: -6%; top: 24%;
  background: radial-gradient(circle, var(--aura-2, #67E8F9), transparent 70%);
  animation-delay: -4.5s;
}

body.zona-agua    .escena__aura { --aura-1: #7DD3FC; --aura-2: #5EEAD4; }
body.zona-energia .escena__aura { --aura-1: #FDE047; --aura-2: #C084FC; }
body.zona-papel   .escena__aura { --aura-1: #BEF264; --aura-2: #FDE68A; }

@keyframes respirar-aura {
  0%, 100% { transform: scale(1)    translateY(0);     opacity: .42; }
  50%      { transform: scale(1.18) translateY(-18px); opacity: .62; }
}

/* ==========================================================================
   PARTÍCULAS — burbujas, chispas y hojas
   ==========================================================================
   Las crea el JS una sola vez (18 elementos) y cada una recibe su posición,
   tamaño y retraso por variables CSS. Cambian de forma según el mundo.
   ========================================================================== */
.particula {
  position: absolute;
  left: var(--x);
  bottom: -12%;
  width: var(--t);
  height: var(--t);
  opacity: 0;
  will-change: transform, opacity;
  animation: subir var(--dur) linear var(--retraso) infinite;
}

@keyframes subir {
  0%   { transform: translate3d(0, 0, 0) scale(.6);            opacity: 0; }
  10%  { opacity: var(--op, .75); }
  50%  { transform: translate3d(var(--deriva), -58vh, 0) scale(1); }
  90%  { opacity: var(--op, .75); }
  100% { transform: translate3d(0, -118vh, 0) scale(.85);      opacity: 0; }
}

/* --- Burbujas de agua --- */
body.zona-agua .particula {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%,
    rgba(255, 255, 255, .95), rgba(186, 230, 253, .38) 46%, rgba(56, 189, 248, .12) 70%);
  box-shadow: inset 0 0 6px rgba(255, 255, 255, .8), 0 0 10px rgba(125, 211, 252, .5);
}

/* --- Chispas de energía --- */
body.zona-energia .particula {
  border-radius: 2px;
  background: linear-gradient(180deg, #FEF08A, #F59E0B);
  box-shadow: 0 0 10px #FDE047, 0 0 20px rgba(250, 204, 21, .6);
  animation-name: subir, centellear;
  animation-duration: var(--dur), 1.1s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}
@keyframes centellear { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(2.1); } }

/* --- Hojas de papel --- */
body.zona-papel .particula {
  border-radius: 60% 8% 60% 8%;
  background: linear-gradient(140deg, #BBF7D0, #4ADE80 55%, #FDE68A);
  box-shadow: 0 0 8px rgba(74, 222, 128, .5);
  animation-name: subir, girar-hoja;
  animation-duration: var(--dur), 4.2s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}
@keyframes girar-hoja {
  0%   { rotate: 0deg; }
  50%  { rotate: 190deg; }
  100% { rotate: 360deg; }
}

/* ==========================================================================
   DETALLES POR MUNDO
   ========================================================================== */

/* --- AGUA: rayos de luz que atraviesan el agua (cáusticas) --- */
.rayos-agua {
  position: absolute; inset: -20% -10% auto -10%; height: 90%;
  background:
    repeating-linear-gradient(102deg,
      rgba(255, 255, 255, .16) 0px,
      rgba(255, 255, 255, .16) 3px,
      transparent 3px,
      transparent 46px);
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  opacity: 0;
  animation: vaiven-rayos 11s ease-in-out infinite;
}
body.zona-agua .rayos-agua { opacity: .85; }
@keyframes vaiven-rayos {
  0%, 100% { transform: translateX(-3%) skewX(0deg); }
  50%      { transform: translateX(3%)  skewX(2.5deg); }
}

/* --- ENERGÍA: destello de tormenta --- */
.destello {
  position: absolute; inset: 0;
  background: radial-gradient(700px 420px at 50% 12%, rgba(255, 255, 255, .85), transparent 62%);
  opacity: 0;
}
body.zona-energia .destello { animation: relampago 7s ease-out infinite; }
@keyframes relampago {
  0%, 88%, 100% { opacity: 0; }
  90%           { opacity: .5; }
  92%           { opacity: .08; }
  94%           { opacity: .38; }
  97%           { opacity: 0; }
}

/* --- PAPEL: faroles flotantes --- */
.farol {
  position: absolute;
  width: 13px; height: 17px;
  border-radius: 46% 46% 40% 40%;
  background: radial-gradient(circle at 50% 34%, #FEF9C3, #FDE047 58%, #F59E0B);
  box-shadow: 0 0 16px 5px rgba(253, 224, 71, .58);
  opacity: 0;
  animation: flotar-farol 13s ease-in-out infinite;
}
body.zona-papel .farol { opacity: .95; }
@keyframes flotar-farol {
  0%, 100% { transform: translate3d(0, 0, 0);        opacity: .55; }
  50%      { transform: translate3d(12px, -34px, 0); opacity: 1; }
}

/* ==========================================================================
   MASCOTAS — Goti, Vatio y Hoja
   ==========================================================================
   Guardianes de cada mundo. Van en SVG para que escalen sin pesar, y cada uno
   tiene su propia animación de reposo: Goti flota, Vatio vibra, Hoja se mece.
   ========================================================================== */
.mascota {
  width: clamp(92px, 26vw, 132px);
  height: auto;
  margin: 0 auto .4rem;
  display: block;
  filter: drop-shadow(0 12px 22px rgba(15, 23, 42, .28));
}

.mascota--goti  { animation: flotar-goti 3.4s ease-in-out infinite; }
.mascota--vatio { animation: vibrar-vatio 2.4s ease-in-out infinite; }
.mascota--hoja  { animation: mecer-hoja 4.2s ease-in-out infinite; }

@keyframes flotar-goti {
  0%, 100% { transform: translateY(0)     scale(1); }
  50%      { transform: translateY(-11px) scale(1.03); }
}
@keyframes vibrar-vatio {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-8px) rotate(-2.5deg); }
  75%      { transform: translateY(-4px) rotate(2.5deg); }
}
@keyframes mecer-hoja {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg)  translateY(-8px); }
}

/* Partes que brillan solas dentro de las mascotas */
.pulso-lento { animation: pulso-brillo 2.6s ease-in-out infinite; transform-origin: center; }
.pulso-rapido { animation: pulso-brillo 1.1s ease-in-out infinite; transform-origin: center; }
@keyframes pulso-brillo {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* --- Los tres guardianes en la portada --- */
.guardianes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.3rem, 2vw, 1rem);
  margin: 0 0 1.9rem;
}

/* Cada guardián va en su propia ficha translúcida. Sin ella, los nombres
   quedaban en gris claro sobre el mundo de color y no se leían. */
.guardian {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: .6rem .3rem .55rem;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--r);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
  transition: transform var(--t), box-shadow var(--t);
}
.guardian:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(15, 23, 42, .18); }

.guardian .mascota { width: clamp(62px, 21vw, 100px); margin-bottom: .3rem; }

.guardian__nombre {
  font-weight: 900; font-size: clamp(.86rem, 3.3vw, 1.02rem);
  letter-spacing: .01em; color: var(--eulen);
}
.guardian__titulo {
  font-size: clamp(.58rem, 2.2vw, .68rem);
  color: #475569; line-height: 1.25;
  text-transform: uppercase; letter-spacing: .03em; font-weight: 700;
}

/* Mascota grande en la intro de misión */
.mascota--grande { width: clamp(120px, 34vw, 168px); margin-bottom: .8rem; }

/* Mascota pequeña en la tarjeta del mapa */
.mascota--mini {
  width: 46px; height: 46px; margin: 0;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .2));
}

.intro__guia {
  font-size: .88rem; color: var(--tinta-suave);
  margin-top: -.2rem;
}
.intro__guia strong { color: var(--acento-fuerte); }

/* ==========================================================================
   TARJETAS CON AIRE DE JUEGO
   ========================================================================== */
.tarjeta {
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .05),
    0 10px 28px rgba(15, 23, 42, .10),
    0 0 0 1px rgba(15, 23, 42, .04);
}

/* Un filo de color arriba, del acento del mundo. */
.tarjeta { position: relative; overflow: hidden; }
.tarjeta::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--acento), var(--acento-fuerte), var(--acento));
  background-size: 200% 100%;
  animation: correr-filo 4s linear infinite;
}
@keyframes correr-filo {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

/* Botón principal con brillo que cruza */
.btn--principal { position: relative; overflow: hidden; }
.btn--principal::after {
  content: '';
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  animation: cruzar-brillo 3.4s ease-in-out infinite;
}
@keyframes cruzar-brillo {
  0%, 62% { left: -120%; }
  100%    { left: 190%; }
}

/* ==========================================================================
   ENTRADAS Y TRANSICIONES DE PANTALLA
   ========================================================================== */
.pantalla { animation: entrar-juego 460ms cubic-bezier(.22, 1, .36, 1); }
@keyframes entrar-juego {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Las opciones y tarjetas aparecen escalonadas: da ritmo, no es adorno. */
.opciones > .opcion,
.pasos > .paso,
.mapa > .mision,
.logros > .logro {
  animation: aparecer-item 420ms cubic-bezier(.22, 1, .36, 1) backwards;
}
.opciones > *:nth-child(2)  { animation-delay: .05s; }
.opciones > *:nth-child(4)  { animation-delay: .10s; }
.opciones > *:nth-child(6)  { animation-delay: .15s; }
.opciones > *:nth-child(8)  { animation-delay: .20s; }
.pasos > :nth-child(1),  .mapa > :nth-child(1),  .logros > :nth-child(1) { animation-delay: .04s; }
.pasos > :nth-child(2),  .mapa > :nth-child(2),  .logros > :nth-child(2) { animation-delay: .10s; }
.pasos > :nth-child(3),  .mapa > :nth-child(3),  .logros > :nth-child(3) { animation-delay: .16s; }
.pasos > :nth-child(4) { animation-delay: .22s; }

@keyframes aparecer-item {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   PORTADA CON MÁS PRESENCIA
   ========================================================================== */
/* El título va sobre un halo blanco propio: el degradado de letra se pierde
   sobre los fondos de color, y sin el halo el ámbar desaparece en el mundo
   de la energía. */
.hero__marca {
  display: inline-block;
  padding: .3rem 1.4rem .5rem;
  border-radius: 26px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .55) 70%, transparent);
}

.hero__titulo {
  background: linear-gradient(105deg, #0284C7 0%, #15803D 48%, #B45309 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: correr-degradado 6s ease-in-out infinite;
}

.hero__lema {
  display: inline-block;
  background: rgba(255, 255, 255, .78);
  padding: .28rem .9rem; border-radius: 99px;
  color: #334155;
}
@keyframes correr-degradado {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

/* Los tres emblemas de la portada laten por turnos. */
.emblema { animation: latir-emblema 3.6s ease-in-out infinite; }
.emblema--agua    { animation-delay: 0s; }
.emblema--energia { animation-delay: .5s; }
.emblema--papel   { animation-delay: 1s; }
@keyframes latir-emblema {
  0%, 100% { transform: translateY(0)    scale(1);    box-shadow: var(--sombra); }
  50%      { transform: translateY(-9px) scale(1.07); box-shadow: 0 14px 26px rgba(15, 23, 42, .16); }
}

/* ==========================================================================
   SELLO DE MISIÓN CON HALO
   ========================================================================== */
.intro__sello, .completada__sello, .final__corona { position: relative; }
.intro__sello::after,
.completada__sello::after,
.final__corona::after {
  content: '';
  position: absolute; inset: -14px;
  border-radius: inherit;
  border: 2px solid currentColor;
  opacity: .28;
  animation: onda-halo 2.4s ease-out infinite;
}
@keyframes onda-halo {
  0%   { transform: scale(.86); opacity: .42; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO — se apaga TODO el espectáculo
   ==========================================================================
   Quien pide menos movimiento no quiere burbujas subiendo ni relámpagos.
   Los mundos se quedan quietos, con su color, y el juego funciona igual.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .particula, .farol, .destello, .rayos-agua,
  .escena__aura::before, .escena__aura::after,
  .mascota, .pulso-lento, .pulso-rapido,
  .tarjeta::before, .btn--principal::after,
  .hero__titulo, .emblema,
  .intro__sello::after, .completada__sello::after, .final__corona::after {
    animation: none !important;
  }
  .particula, .destello { opacity: 0 !important; }
  .hero__titulo { background-position: 0 center; }
}

/* Pantallas pequeñas: menos adorno, más contenido. */
@media (max-width: 420px) {
  .escena__aura::before, .escena__aura::after { filter: blur(34px); }
}

/* ==========================================================================
   16. MÁS PRESENCIA
   ==========================================================================
   Todo un punto más grande y con más aire. Un concurso que se proyecta en
   una pantalla y se juega en el celular necesita que las cosas se vean de
   lejos, no que quepan justo.
   ========================================================================== */

.hero__titulo { font-size: clamp(3.1rem, 15vw, 5.4rem); letter-spacing: -.035em; }
.hero__lema   { font-size: clamp(.95rem, 3.8vw, 1.22rem); }
.hero__logo   { height: clamp(54px, 14vw, 78px); }

.reto__enunciado { font-size: clamp(1.18rem, 4.6vw, 1.5rem); line-height: 1.34; }
.opcion__txt     { font-size: clamp(1rem, 3.9vw, 1.08rem); }
.paso__txt       { font-size: clamp(.96rem, 3.7vw, 1.04rem); }
.tarjetita       { font-size: clamp(.94rem, 3.6vw, 1rem); min-height: 52px; }

.opcion { padding: 1.05rem 1.1rem; border-radius: 18px; }
.opcion__marca { width: 30px; height: 30px; }
.opcion__marca .ico { width: 17px; height: 17px; }

.btn { font-size: 1.04rem; padding: .95rem 1.7rem; min-height: 52px; }
.btn .ico { width: 21px; height: 21px; }

.mision { padding: 1.15rem 1.2rem; }
.mision__nom  { font-size: 1.18rem; }
.mision__lema { font-size: .92rem; }
.mision__sello { width: 62px; height: 62px; border-radius: 18px; }
.mascota--mini { width: 56px; height: 56px; }

.intro__sello, .completada__sello { width: 132px; height: 132px; }
.completada__sello .ico { width: 68px; height: 68px; }
.completada__tit { font-size: clamp(1.7rem, 7vw, 2.4rem); }
.completada__pts { font-size: clamp(2.9rem, 12vw, 3.6rem); }

.puntaje__num { font-size: clamp(3.6rem, 19vw, 5.6rem); }
.final__tit   { font-size: clamp(1.45rem, 5.8vw, 2.1rem); }
.final__corona { width: 122px; height: 122px; }
.final__corona .ico { width: 64px; height: 64px; }

.cabecera { padding: .75rem clamp(.8rem, 3vw, 1.4rem); }
.cabecera__logo { height: 30px; }
.cabecera__puntos { font-size: 1.14rem; padding: .42rem .75rem; }
.barra { height: 9px; }

.tarjeta { padding: clamp(1.3rem, 4.5vw, 2.1rem); border-radius: 22px; }
.lienzo  { padding: clamp(1.2rem, 4vw, 2.2rem) clamp(.85rem, 3.4vw, 1.5rem); }

/* En pantallas grandes el juego se ensancha: hoy se veía como una columna
   estrecha en medio de un monitor de 27 pulgadas. */
@media (min-width: 1024px) {
  :root { --ancho: 880px; }
  .hero__titulo { font-size: 6rem; }
  .guardian .mascota { width: 132px; }
  .intro__sello, .completada__sello { width: 152px; height: 152px; }
}