/* ===========================================================
   ESTILOS PROPIOS DE add-nuestra-labor.html
   La base de marca, navegación, secciones genéricas, pie de
   página y animaciones viven en assets/styles.css.
   =========================================================== */

/* Hero interior */
.page-hero{padding:clamp(44px,6vw,76px) 0 clamp(36px,5vw,56px)}
.page-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:.6rem 0 .9rem}
.page-hero__phrase{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2vw,1.35rem);color:var(--coral-deep);margin-bottom:1.2rem}
.page-hero p.lead{font-size:1.04rem;max-width:46ch}
.page-hero__media{min-height:clamp(300px,40vw,420px)}

/* Cómo trabajamos — pasos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{background:var(--white);border:1px solid var(--mist);border-radius:var(--radius);padding:28px 24px;display:flex;flex-direction:column;gap:.6rem}
.step__k{font-family:var(--serif);font-weight:700;font-size:1.7rem;color:var(--coral-deep);line-height:1}
.step h3{font-family:var(--sans);font-weight:600;font-size:1.05rem;color:var(--ink)}
.step p{font-size:.92rem;margin:0}

/* Banda de cifras */
.stat-band{background:var(--ink);color:var(--white)}
.stat-band__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,4vw,40px);padding:clamp(40px,5vw,60px) 0}
.stat{display:flex;flex-direction:column;gap:.3rem}
.stat__num{font-family:var(--serif);font-weight:700;font-size:clamp(2.4rem,5vw,3.4rem);color:var(--coral);line-height:1}
.stat__lbl{font-family:var(--sans);font-size:.92rem;color:rgba(255,255,255,.82)}
.stat-band__note{padding-bottom:clamp(28px,3vw,36px);font-size:.8rem;color:rgba(255,255,255,.5)}

/* Grilla de centros */
.centros-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:var(--white);border:1px solid var(--mist);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(17,17,17,.10)}
.card .photo-ph{min-height:180px;border-radius:0}
.card__body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.card__loc{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:.5rem}
.card__name{font-family:var(--serif);font-weight:700;font-size:1.22rem;line-height:1.25;margin-bottom:.6rem}
.card__desc{font-size:.92rem;color:var(--stone);flex:1}
.card__meta{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--mist);font-family:var(--sans);font-size:.82rem;color:var(--ink);font-weight:500}
.card__meta b{font-family:var(--serif);color:var(--coral-deep);font-size:1.05rem}
.card__origin{display:inline-block;margin-top:.4rem;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.card__link{display:inline-flex;align-items:center;gap:.4em;margin-top:1rem;font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--coral-deep);border-bottom:1px solid transparent;transition:border-color .18s}
.card__link:hover{border-bottom-color:var(--coral-deep)}
.card__link svg{width:14px;height:14px;flex-shrink:0}

/* ── Campañas ── */
.camp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.camp-card{background:var(--white);border:1px solid var(--mist);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease}
.camp-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(17,17,17,.10)}
.camp-card .photo-ph{min-height:200px;border-radius:0}
.camp-card__body{padding:24px 24px 28px;flex:1;display:flex;flex-direction:column}
.camp-card__tag{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:.6rem}
.camp-card__name{font-family:var(--serif);font-weight:700;font-size:1.18rem;line-height:1.25;margin-bottom:.6rem}
.camp-card__desc{font-size:.92rem;color:var(--stone);flex:1}
.camp-card__foot{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--mist);font-size:.82rem;font-weight:500;color:var(--stone)}

/* ── Apoyo a la comunidad ── */
.apoyo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.apoyo-card{border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--mist);transition:transform .2s ease, box-shadow .2s ease}
.apoyo-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(17,17,17,.10)}
.apoyo-card__accent{height:4px;background:var(--coral)}
.apoyo-card__body{padding:24px 22px 26px;flex:1;display:flex;flex-direction:column;gap:.5rem}
.apoyo-card__icon{width:40px;height:40px;border-radius:50%;background:var(--rose);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.apoyo-card__icon svg{width:20px;height:20px;color:var(--coral-deep)}
.apoyo-card__name{font-family:var(--serif);font-weight:700;font-size:1.1rem;line-height:1.25;color:var(--ink);margin-top:.2rem}
.apoyo-card__desc{font-size:.9rem;color:var(--stone);flex:1}
.apoyo-card__note{margin-top:.8rem;font-size:.78rem;font-weight:600;color:var(--gold);font-family:var(--sans)}

/* Banda CTA */
.cta-band{background:var(--ink);color:var(--white)}
.cta-band__inner{padding:clamp(44px,6vw,68px) 0;text-align:center;max-width:60ch;margin:0 auto}
.cta-band h2{color:var(--white);font-size:clamp(1.8rem,3.4vw,2.5rem)}
.cta-band p{color:rgba(255,255,255,.8);margin:.8rem auto 1.6rem;max-width:48ch}
.cta-band__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ===========================================================
   RESPONSIVE — específico de add-nuestra-labor.html
   =========================================================== */
@media(max-width:900px){
  .centros-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .stat-band__inner{grid-template-columns:repeat(2,1fr)}
  .apoyo-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .page-hero__grid,.split,.split--reverse .split__media{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .page-hero__media{order:-1;min-height:240px}
  .centros-grid,.camp-grid,.apoyo-grid{grid-template-columns:1fr}
}