/* ===========================================================
   ESTILOS PROPIOS DE add-la-asociacion.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)}

/* ===========================================================
   LÍNEA DE TIEMPO
   =========================================================== */
.timeline{position:relative;max-width:780px;margin:0 auto;padding-left:34px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--mist)}
.tl-item{position:relative;padding-bottom:2rem}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-34px;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--coral);border:3px solid var(--cream);box-shadow:0 0 0 1px var(--coral)
}
.tl-year{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--coral-deep);line-height:1}
.tl-item h3{font-family:var(--sans);font-weight:600;font-size:1.02rem;color:var(--ink);margin:.3rem 0 .25rem}
.tl-item p{font-size:.93rem;margin:0}
.tl-item .pending{font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gold)}

/* ===========================================================
   A QUIÉN SERVIMOS — tres tarjetas
   =========================================================== */
.serve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.serve-card{
  background:var(--white);border:1px solid var(--mist);border-radius:var(--radius);
  padding:28px 24px;display:flex;flex-direction:column;gap:.6rem;
}
.serve-card__num{
  width:40px;height:40px;border-radius:50%;background:var(--rose);color:var(--coral-deep);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:1.05rem;
}
.serve-card h3{font-family:var(--serif);font-weight:700;font-size:1.1rem}
.serve-card p{font-size:.92rem;margin:0}

/* ===========================================================
   VALORES — grilla
   =========================================================== */
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--mist);border:1px solid var(--mist);border-radius:var(--radius);overflow:hidden}
.value{background:var(--white);padding:26px 24px;display:flex;flex-direction:column;gap:.5rem}
.value__k{font-family:var(--serif);font-weight:700;font-size:1.4rem;color:var(--coral-deep);line-height:1}
.value h3{font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--ink)}
.value p{font-size:.9rem;margin:0}

/* ===========================================================
   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-la-asociacion.html
   =========================================================== */
@media(max-width:900px){
  .serve-grid{grid-template-columns: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}
}