/* ====== Home (Inicio) – versión grande ====== */
:root{
  --bg:#0a70ad;
  --ink:#0b2239;
  --muted:#37566b;
  --card:#ffffff;
  --accent:#ec2227;
  --accent-2:#ff4b4f;
  --shadow:0 14px 36px rgba(0,0,0,.14);
  --r:20px;
}

body{background:var(--bg);}

/* page wrapper */
.home-wrap{min-height:100vh;padding:44px 20px 64px}

/* ---------- HERO ---------- */
.hp-hero{
  max-width:1100px;margin:0 auto 40px;background:var(--card);
  border-radius:26px;box-shadow:var(--shadow);padding:40px 32px;text-align:center
}
.hp-title{
  margin:0 0 12px;
  font-size:clamp(2rem, 1.2rem + 2.8vw, 3rem);
  color:var(--ink);letter-spacing:.3px;font-weight:900
}
.hp-sub{
  margin:0 auto 22px;max-width:820px;color:#335166;line-height:1.5;
  font-size:clamp(1rem,.92rem + .6vw,1.2rem)
}
.hp-btn{
  display:inline-block;background:var(--accent);color:#fff;font-weight:900;
  padding:.9rem 1.6rem;border-radius:14px;text-decoration:none;
  box-shadow:0 10px 24px rgba(236,34,39,.28);
  font-size:clamp(1rem,.95rem + .4vw,1.15rem)
}
.hp-btn:hover{background:var(--accent-2)}

/* ---------- TÍTULOS DE SECCIÓN ---------- */
.sec-title{
  color:#fff;text-align:center;
  margin:26px 0 18px;
  font-size:clamp(1.6rem,1.1rem + 1.8vw,2.2rem);
  font-weight:900
}
/* aliás para usar en categorías */
.cats-title{color:#fff;text-align:center;margin:26px 0 18px;
  font-size:clamp(1.6rem,1.1rem + 1.8vw,2.2rem);font-weight:900}

/* ---------- ¿QUÉ MEDIMOS? ---------- */
.measure-grid{
  max-width:1200px;margin:0 auto 36px;
  display:grid;gap:24px;grid-template-columns:repeat(3,1fr)
}
.measure-card{
  background:#fff;border-radius:var(--r);box-shadow:var(--shadow);
  padding:24px 22px;display:grid;grid-template-columns:90px 1fr;align-items:center
}
.measure-emoji{
  font-size:52px;line-height:1;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.22))
}
.measure-body{display:flex;flex-direction:column}
.measure-title{
  margin:0 0 6px;color:var(--ink);font-weight:900;
  font-size:clamp(1.1rem,1rem + .4vw,1.35rem)
}
.measure-items{
  margin:0;color:#31414f;line-height:1.4;
  font-size:clamp(1rem,.95rem + .3vw,1.15rem)
}

/* ---------- CATEGORÍAS FORMATIVAS ---------- */
.cat-grid{
  max-width:1200px;margin:0 auto;
  display:grid;gap:18px;
  grid-template-columns:repeat(5, minmax(200px,1fr))
}
.cat-card{
  background:#fff;border-radius:22px;box-shadow:var(--shadow);
  padding:18px 14px;text-align:center
}
.cat-age{
  margin:0 0 6px;color:var(--ink);font-weight:900;
  font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem)
}
.cat-desc{
  margin:0;color:#587085;
  font-size:clamp(1rem,.95rem + .3vw,1.15rem)
}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .cat-grid{grid-template-columns:repeat(4, minmax(180px,1fr))}
}
@media (max-width:1024px){
  .measure-grid{grid-template-columns:repeat(2,1fr)}
  .measure-card{grid-template-columns:80px 1fr}
  .cat-grid{grid-template-columns:repeat(3, minmax(180px,1fr))}
}
@media (max-width:720px){
  .hp-hero{padding:32px 18px}
  .measure-grid{grid-template-columns:1fr}
  .measure-card{grid-template-columns:70px 1fr;padding:18px}
  .measure-emoji{font-size:40px}
  .cat-grid{grid-template-columns:repeat(2, minmax(160px,1fr))}
}
@media (max-width:460px){
  .cat-grid{grid-template-columns:1fr}
}