/* ==========================================================
   06-secciones.css
   FUNCIÓN: Estilos de las secciones de contenido, en el mismo
   orden en que aparecen en la página:
   Servicios → Proceso → Círculo → Concientización →
   Noticias → Sedes → Impacto
   ========================================================== */

/* ---------- SECCIÓN: Servicios (tarjetas de materiales) ---------- */
.services{background:var(--papel);}
.service-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.service-card{
  background:var(--panel);
  padding:28px 24px;
  border-radius:var(--r-md);
  box-shadow:0 1px 2px rgba(27,27,34,0.05);
  transition:transform .2s, box-shadow .2s;
}
@media(hover:hover){.service-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(27,27,34,0.08);}}
.service-card .mat{        /* etiqueta "Línea 01" */
  font-family:'JetBrains Mono',monospace;font-size:0.68rem;
  color:var(--gris);letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:12px;
}
.service-card h3{font-size:1.08rem;margin-bottom:8px;font-family:'Outfit';font-weight:700;color:var(--azul-osc);}
.service-card p{font-size:0.9rem;color:var(--tinta-suave);}

/* ---------- SECCIÓN: Proceso (4 pasos sobre fondo azul oscuro) ---------- */
.process{background:var(--azul-osc);color:var(--papel);border-radius:var(--r-lg);margin:0 20px;width:auto;}
.process .wrap{max-width:1120px;}
.process .eyebrow{color:var(--verde);}
.process .section-head h2{color:var(--papel);}
.process .section-head p{color:#B9C2DC;}
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.step{
  background:rgba(247,248,250,0.06);
  border-radius:var(--r-md);
  padding:22px 20px;
}
.step .num{
  font-family:'JetBrains Mono',monospace;
  color:var(--verde);font-size:0.82rem;margin-bottom:10px;display:block;
}
.step h3{font-family:'Outfit';font-weight:700;font-size:1.02rem;margin-bottom:8px;}
.step p{font-size:0.88rem;color:#B9C2DC;}

/* ---------- SECCIÓN: Círculo del reciclaje (anillo grande con eslogan) ---------- */
.circulo{background:var(--papel);text-align:center;}
.circulo-visual{
  position:relative;width:100%;max-width:340px;margin:32px auto 0;
  aspect-ratio:1/1;
}
.circulo-visual .ring-spin{animation-duration:36s;} /* gira más lento que el del hero */
.circulo-center{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20%;
}
.circulo-center span{font-family:'Caveat',cursive;font-weight:700;font-size:1.7rem;color:var(--azul-osc);line-height:1.1;}

/* ---------- SECCIÓN: Concientización (cómo preparar los materiales) ---------- */
.conciencia{background:#EEF1F9;}
.tips-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.tip-card{
  background:var(--panel);
  border-radius:var(--r-md);
  padding:26px 22px;
}
.tip-card .swatch{margin-bottom:14px;}
.tip-card h3{font-family:'Outfit';font-weight:700;font-size:1rem;margin-bottom:12px;color:var(--azul-osc);}
.tip-card ul{padding-left:18px;color:var(--tinta-suave);font-size:0.88rem;display:flex;flex-direction:column;gap:6px;}

/* ---------- SECCIÓN: Noticias (tablón) ---------- */
.noticias{background:var(--panel);}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.news-card{
  border-radius:var(--r-md);
  background:var(--papel);
  padding:24px 22px;
  display:flex;flex-direction:column;gap:12px;
}
.news-date{
  font-family:'JetBrains Mono',monospace;font-size:0.7rem;
  color:var(--gris);letter-spacing:0.06em;text-transform:uppercase;
}
.news-tag{                 /* etiqueta de categoría (Comunidad, Campaña...) */
  display:inline-block;
  background:rgba(169,204,79,0.18);
  color:var(--verde-osc);
  font-size:0.7rem;font-weight:600;
  padding:4px 12px;border-radius:var(--r-pill);
  width:fit-content;
}
.news-card h3{font-family:'Outfit';font-weight:700;font-size:1.05rem;color:var(--azul-osc);}
.news-card p{font-size:0.9rem;color:var(--tinta-suave);}

/* ---------- SECCIÓN: Sedes (direcciones en Yopal) ---------- */
.sedes{background:#EEF1F9;}
.sedes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.sede-card{
  background:var(--panel);
  border-radius:var(--r-lg);
  padding:32px;
}
.sede-card .mat{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--gris);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:10px;}
.sede-card h3{font-family:'Outfit';font-weight:700;font-size:1.2rem;color:var(--azul-osc);margin-bottom:10px;}
.sede-card p{color:var(--tinta-suave);font-size:0.95rem;margin-bottom:18px;}
.sede-card a.mapa{         /* enlace "Ver en el mapa" */
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.88rem;font-weight:600;color:var(--azul);
  border-bottom:2px solid var(--verde);
  padding:10px 0 2px;min-height:44px;       /* zona táctil más alta */
}

/* ---------- SECCIÓN: Impacto (cifras) ---------- */
.impact{background:var(--papel);}
.impact-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.impact-card{
  background:var(--panel);
  border-radius:var(--r-md);
  padding:34px 28px;
  text-align:left;
}
.impact-card b{
  font-family:'JetBrains Mono',monospace;
  font-size:2.1rem;color:var(--azul);display:block;
}
.impact-card span{font-size:0.9rem;color:var(--tinta-suave);}

/* Mensaje cuando aún no hay noticias publicadas */
.news-vacio{grid-column:1/-1;text-align:center;color:var(--tinta-suave);padding:24px 0;}