/* ==========================================================
   04-hero.css
   FUNCIÓN: Sección principal (la primera que se ve): fondo
   azul, texto, botones, estadísticas y el anillo de reciclaje
   con los 4 materiales.
   ========================================================== */

/* ---------- BLOQUE: Fondo y contenedor del hero ---------- */
.hero{
  background:linear-gradient(180deg, var(--azul) 0%, var(--azul-osc) 100%);
  color:var(--papel);
  position:relative;
  overflow:hidden;
  padding:80px 0 64px;
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.hero .wrap{               /* dos columnas: texto | anillo */
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:50px;align-items:center;
}

/* ---------- BLOQUE: Manchas decorativas del fondo ---------- */
.blob{
  position:absolute;
  border-radius:60% 40% 55% 45% / 55% 45% 60% 40%;
  filter:blur(2px);
  opacity:0.18;
  z-index:0;
}
.blob-1{width:420px;height:420px;background:var(--verde);top:-140px;right:-120px;}
.blob-2{width:280px;height:280px;background:var(--verde);bottom:-120px;left:-80px;opacity:0.12;}

/* ---------- BLOQUE: Textos del hero ---------- */
.hero-top-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
.hero h1{
  font-size:clamp(2.2rem, 4.2vw, 3.2rem);
  margin:14px 0 18px;
}
.hero h1 span{color:var(--verde);}
.hero p{
  font-size:1.05rem;
  color:#DCE2F2;
  max-width:46ch;
  margin-bottom:28px;
}

/* ---------- BLOQUE: Botones, estadísticas y redes del hero ---------- */
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.hero-stats{
  display:flex;gap:26px;margin-top:40px;flex-wrap:wrap;
}
.hero-stat b{
  display:block;font-family:'JetBrains Mono',monospace;font-size:1.4rem;color:var(--verde);
}
.hero-stat span{font-size:0.8rem;color:#B9C2DC;}
.hero .social-row{margin-top:32px;}

/* ---------- BLOQUE: Anillo con los materiales (lado derecho) ----------
   El anillo gira (ver 05-animaciones.css) y los nodos giran
   en sentido contrario para que el texto siempre se lea derecho. */
.loop-stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-width:380px;
  margin:0 auto;
}
.loop-center{              /* logo en el centro del anillo */
  position:absolute;inset:0;display:grid;place-items:center;
  text-align:center;
}
.loop-center img{width:88px;height:88px;object-fit:contain;background:#fff;border-radius:50%;padding:10px;}
.loop-node{                /* cada material (papel, plástico, vidrio, metal) */
  position:absolute;
  width:88px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;
  animation:counterspin 26s linear infinite;
}
.loop-node .dot{
  width:44px;height:44px;border-radius:50%;
  background:var(--papel);color:var(--azul-osc);
  display:grid;place-items:center;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:0.68rem;
  border:2px solid var(--verde);
}
.loop-node span{font-size:0.66rem;font-weight:600;color:var(--papel);}
/* Posición de cada nodo: arriba, derecha, abajo, izquierda */
.n1{top:-4%;left:50%;transform:translateX(-50%);}
.n2{top:50%;right:-4%;transform:translateY(-50%);}
.n3{bottom:-4%;left:50%;transform:translateX(-50%);}
.n4{top:50%;left:-4%;transform:translateY(-50%);}