/* ==========================================================
   02-componentes.css
   FUNCIÓN: Piezas pequeñas que se reutilizan en varias
   secciones: etiqueta (eyebrow), eslogan, botones, iconos de
   redes sociales, cabecera de sección y círculos de color.
   ========================================================== */

/* ---------- BLOQUE: Eyebrow (etiqueta pequeña sobre los títulos) ---------- */
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--verde-osc);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{          /* el signo "+" antes del texto */
  content:"+";
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:1rem;
  color:var(--verde);
  line-height:1;
}
.eyebrow-verde{color:var(--verde);} /* variante en verde claro (se usa en Contacto) */

/* ---------- BLOQUE: Eslogan en letra manuscrita ---------- */
.slogan-badge{
  display:inline-block;
  font-family:'Caveat',cursive;
  font-weight:700;
  font-size:1.5rem;
  color:var(--verde);
  margin-bottom:6px;
}

/* ---------- BLOQUE: Botones ---------- */
.btn{                      /* estilo base de todos los botones */
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;
  border-radius:var(--r-pill);
  font-weight:600;
  font-size:0.95rem;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  font-family:'Outfit',sans-serif;
  min-height:48px;justify-content:center;  /* zona táctil mínima cómoda en celular */
}
@media(hover:hover){.btn:hover{transform:translateY(-2px);}}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--verde);color:var(--azul-osc);}                 /* botón verde */
.btn-primary:hover{background:#bcdc63;}
.btn-outline{border-color:var(--papel);color:var(--papel);}                  /* borde claro (fondos oscuros) */
.btn-outline:hover{background:rgba(247,248,250,0.12);}
.btn-outline-dark{border-color:var(--azul);color:var(--azul);}               /* borde azul (fondos claros) */
.btn-outline-dark:hover{background:var(--azul);color:#fff;}

/* ---------- BLOQUE: Iconos de redes sociales ---------- */
.social-row{display:flex;gap:10px;}
.social-btn{
  width:44px;height:44px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:rgba(46,74,147,0.08);
  color:var(--azul);
  transition:background .2s, color .2s, transform .15s;
}
.social-btn:hover{background:var(--verde);color:var(--azul-osc);}
@media(hover:hover){.social-btn:hover{transform:translateY(-2px);}}
.social-btn svg{width:18px;height:18px;}
/* Variantes según la sección donde estén (fondo oscuro) */
.hero .social-btn{background:rgba(247,248,250,0.14);color:var(--papel);}
.hero .social-btn:hover{background:var(--verde);color:var(--azul-osc);}
footer .social-btn{background:rgba(247,248,250,0.1);color:var(--papel);}
footer .social-btn:hover{background:var(--verde);color:var(--azul-osc);}

/* ---------- BLOQUE: Cabecera de sección (eyebrow + título + párrafo) ---------- */
.section-head{max-width:640px;margin-bottom:48px;}
.section-head h2{font-size:clamp(1.7rem,2.8vw,2.2rem);margin-top:10px;color:var(--azul-osc);}
.section-head p{color:var(--tinta-suave);margin-top:14px;font-size:1.02rem;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ---------- BLOQUE: Círculos de color (swatch) ----------
   Se usan en Servicios y en Concientización, uno por material. */
.swatch{width:38px;height:38px;border-radius:50%;margin-bottom:16px;}
.s1{background:var(--verde);}      /* papel */
.s2{background:var(--azul);}       /* plástico */
.s3{background:var(--gris);}       /* metal */
.s4{background:var(--azul-osc);}   /* vidrio */