/* ===== Blog ===== */
.blog-hero {
  background: linear-gradient(120deg,#388e3c 60%,#e8f5e9 100%);
  padding: 48px 0 0 0;
  text-align: center;
}
.blog-hero__wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px 32px 16px;
}
.blog-hero__title {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 10px;
}
.blog-hero__subtitle {
  color: #003366;
  font-size: 1.25rem;
  margin-bottom: 0;
}
.blog-list {
  background: #e8f5e9;
  border-radius: 18px;
  box-shadow: var(--shadow);
  max-width: 1100px;
  margin: 32px auto;
  padding: 32px 16px;
}
.blog-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  gap: 32px;
}
.blog-card {
  background: #f5f7fa;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s;
}
.blog-card:hover {
  box-shadow: 0 6px 24px rgba(76,175,80,.13);
}
.blog-card__img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.blog-card__body {
  padding: 18px 16px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.blog-card__title {
  color: #2196f3;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 8px 0;
}
.blog-card__desc {
  color: #003366;
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.blog-card__link {
  color: #4CAF50;
  font-weight: 700;
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
}
.blog-card__link:hover {
  text-decoration: underline;
}
@media (max-width:700px){
  .blog-list__grid{grid-template-columns:1fr;}
}
/* ===== Locomotora Campesina ===== */
.hero--locomotora {
  background: linear-gradient(120deg,#e8f5e9 60%,#fff 100%);
  padding: 48px 0 0 0;
}
.hero__container--locomotora {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}
.hero__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  justify-content: center;
}
.hero__img-locomotora {
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 400px;
  text-align: center;
}
.hero__img-locomotora img {
  width: 100%;
  max-width: 340px;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(76,175,80,.12);
  object-fit: contain;
  height: auto;
}
.hero__info-locomotora {
  flex: 2 1 340px;
  min-width: 280px;
  max-width: 500px;
}
.hero__title--locomotora {
  color: #388e3c;
  font-size: 2.3rem;
  font-weight: 900;
  margin-bottom: 12px;
}
.hero__subtitle--locomotora {
  color: #ece909;
  font-size: 1.25rem;
  margin-bottom: 18px;
  max-width: 480px;
}
.hero__badges--locomotora {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  list-style: none;
  padding: 0;
}
.badge-locomotora {
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 18px;
}
.badge-yellow { background: #ffe600; color: #003366; }
.badge-green { background: #4CAF50; color: #fff; }
.badge-blue { background: #2196f3; color: #fff; }
.details-grid--locomotora {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 32px;
}
.details-title-locomotora {
  color: #4CAF50;
  margin-bottom: 12px;
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
}
.details-img-locomotora {
  max-width: 340px;
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(76,175,80,.07);
  margin-bottom: 12px;
  object-fit: contain;
}
.details-desc-locomotora {
  color: #003366;
  font-size: 1.08rem;
  text-align: center;
  max-width: 320px;
}
.details-title-impacto {
  color: var(--green);
  font-size: 1.3rem;
  margin-bottom: 18px;
  font-weight: 800;
}
.details-impact-locomotora {
  background: #e8f5e9;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(76,175,80,.10);
  padding: 24px 18px;
  text-align: center;
}
.details-impact-grid-locomotora {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width:900px){
  .details-grid--locomotora{grid-template-columns:1fr!important;}
}
@media (max-width:600px){
  .hero__grid{flex-direction:column;gap:18px;}
  .details-block{padding-bottom:18px;}
}
/* ===== Tokens de diseño (marca) ===== */
:root{
  --blue:#003366; --green:#4CAF50; --text:#0f172a; --text-inv:#ffffff;
  --muted:#64748b; --soft:#f5f7fa; --bg:#ffffff;
  --radius:16px; --shadow:0 6px 28px rgba(0,0,0,.08); --shadow-lg:0 10px 36px rgba(0,0,0,.14);
  --container:1200px;
}
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:var(--text); background:var(--soft); line-height:1.55}
img{max-width:100%; height:auto; display:block}
a{text-decoration:none; color:inherit}

.container{max-width:var(--container); margin:0 auto; padding:40px 16px}
.section{padding:40px 0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0}

/* ===== Header + Nav (accesible) ===== */
.site-header{position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid #e5e7eb}
.header__wrap{max-width:var(--container); margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px}
.brand{display:flex; align-items:center; gap:10px; color:var(--blue); font-weight:800}
.brand img{width:36px; height:36px}
.brand span{font-size:16px; letter-spacing:.2px}
.nav-toggle{margin-left:auto; background:none; border:0; padding:10px; border-radius:10px; cursor:pointer; color:#111; display:none}
.nav-toggle:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
nav#primary-nav{margin-left:auto}
.nav__list{display:flex; gap:20px; list-style:none; margin:0; padding:0}
.nav__list a{color:#111; font-weight:600}
.btn-nav{background:var(--green); color:#08310f!important; padding:8px 12px; border-radius:10px}

@media (max-width: 959px){
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  nav#primary-nav{
    position:fixed; inset:0 0 0 35%; background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,.15);
    padding:80px 20px 20px; display:none; z-index:58;
  }
  nav#primary-nav.is-open{display:block}
  nav#primary-nav[hidden]{display:none}
  .nav__list{flex-direction:column; gap:18px}
  .header__wrap{position:relative; z-index:59}
  .backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:57}
}
@media (min-width: 960px){
  nav#primary-nav{display:block !important}
  nav#primary-nav[hidden]{display:block}
}

/* ===== Hero claro y legible ===== */
.hero{
  position:relative; color:var(--text-inv); isolation:isolate; overflow:hidden;
  min-height:68vh; display:grid; align-items:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:url('hero_background.svg'); /* ajusta ruta si es necesario */
  background-size:cover; background-position:center;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(0,0,0,.72), rgba(0,0,0,.38));
}
.hero__container{position:relative; z-index:1; max-width:var(--container); margin:0 auto; padding:56px 16px}
.hero__grid{display:grid; gap:32px; grid-template-columns:1.2fr .8fr}
@media (max-width:980px){ .hero__grid{grid-template-columns:1fr} }

.hero__brand{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.hero__logo{width:48px; height:48px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.2))}
.hero__title{margin:0 0 10px; font-size:clamp(28px,5vw,44px); line-height:1.1; letter-spacing:.3px}
.accent{color:var(--green)}
.hero__subtitle{margin:0 0 16px; opacity:.96; max-width:60ch}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:10px; font-weight:800; border:2px solid transparent}
.btn--primary{background:var(--green); color:#08310f}
.btn--ghost{background:transparent; color:#fff; border-color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.hero__badges{display:flex; gap:12px; flex-wrap:wrap; list-style:none; padding:0; margin:12px 0 0}
.hero__badges li{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding:8px 12px; border-radius:999px; font-size:.95rem; backdrop-filter: blur(6px)}

.hero__card{background:#fff; color:var(--text); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.hero__card h2{margin:0 0 8px; color:var(--blue); font-size:1.15rem}
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:10px 0 8px}
.metric{background:#f6faf7; border:1px solid #e8f3ea; border-radius:12px; padding:12px; text-align:center}
.metric strong{display:block; color:var(--green); font-size:1.1rem}
.metric span{font-size:.85rem; color:#334155}
.card__link{display:block; text-align:center; color:var(--green); font-weight:700; text-decoration:none}
.card__link:hover{text-decoration:underline}

/* ===== “Quiénes somos” ===== */
.about{background:#fff; border-radius:18px; box-shadow:var(--shadow)}
.about h2{color:var(--blue); margin:0 0 12px}
.about .lead{font-size:1.1rem; color:#0b1428; opacity:.95; max-width:72ch}
.about__grid{display:grid; gap:24px; grid-template-columns:1fr 1fr; align-items:center}
@media (max-width:900px){ .about__grid{grid-template-columns:1fr} }
.badges{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:16px 0 0}
.badges li{background:#eef3f8; border:1px solid #e6ebf2; color:#0f2440; padding:8px 12px; border-radius:999px; font-weight:600}
.about__media{display:grid; place-items:center}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px}
.kpi{background:#fff; border:1px solid #e8edf3; border-radius:14px; padding:12px; text-align:center}
.kpi strong{display:block; font-size:1.2rem; color:var(--blue)}
.kpi span{font-size:.8rem; color:#64748b}

/* ===== Enfoque ===== */
.approach h2{color:var(--blue); margin:0 0 10px; text-align:center}
.approach .lead{text-align:center; margin:0 auto 28px; max-width:70ch}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:1100px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .cards{grid-template-columns:1fr} }
.card{background:#fff; border:1px solid #e8edf3; border-radius:14px; padding:18px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.card h3{margin:0 0 8px; color:var(--green)}

/* ===== Teaser Programas ===== */
.programs-teaser h2{color:var(--blue); margin:0 0 10px; text-align:center}
.teaser-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media (max-width:980px){ .teaser-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .teaser-grid{grid-template-columns:1fr} }
.teaser{background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px; box-shadow:var(--shadow)}
.teaser h4{margin:0 0 6px; color:var(--green)}
.teaser p{margin:0 0 10px}
.teaser a{color:var(--blue); font-weight:700}

/* ===== Impacto ===== */
.impact{background:#fff; border-radius:18px; box-shadow:var(--shadow)}
.impact h2{color:var(--blue); margin:0 0 12px; text-align:center}
.impact-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:800px){ .impact-row{grid-template-columns:1fr} }
.impact-pill{background:#eef7f0; border:1px solid #dff0e4; border-radius:999px; padding:10px 12px; text-align:center; font-weight:700; color:#0f2440}

/* ===== Footer ===== */
.site-footer{background:#0f2440; color:#e6edf5}
.footer__wrap{max-width:var(--container); margin:0 auto; padding:24px 16px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
.site-footer a{color:#e6edf5}