:root{
  /* Paleta derivada de la identidad Y&C — valores muestreados del original */
  --tinta:#141A22;        /* casi negro, frío, armoniza con el azul */
  --papel:#FBFCFD;
  --secundario:#58616B;
  --regla:#DEE4EA;
  --acento:#2B4B96;       /* azul institucional del original */
  --verde:#5C8A34;        /* verde del original, oscurecido a contraste AA */
  --verde-claro:#8FB047;
  --lima:#CFD340;
  --cielo:#1F9DD3;
  --sombra:#0D1218;
  --navy:#0A1E3C;
  --serif:"Source Serif 4",Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --max:1280px;
  --lectura:680px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--papel);color:var(--tinta);
  font-family:var(--serif);font-size:20px;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--acento);color:var(--papel)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.lectura{max-width:var(--lectura)}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{font-weight:400;letter-spacing:-0.018em;line-height:1.12}
h1{font-size:clamp(2.6rem,5.6vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.16}
h3{font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.25}
h4{font-size:1.15rem;line-height:1.3}
p{margin-bottom:1.15em}
p:last-child{margin-bottom:0}
a{color:inherit}
.lead{font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.55;color:var(--secundario)}
.small{font-size:.95rem;line-height:1.6;color:var(--secundario)}
.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acento);
  display:block;margin-bottom:1.6rem;
}
.eyebrow.mute{color:var(--secundario)}
.num{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;color:var(--verde);
}

/* ---------- Navegación ---------- */
header{
  position:sticky;top:0;z-index:100;background:rgba(251,252,253,.94);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--regla);
}
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,#CFD340,#8FB047 32%,#2B7CB8 68%,#1F9DD3);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{
  font-family:var(--sans);font-weight:600;font-size:1.02rem;
  letter-spacing:.22em;text-decoration:none;cursor:pointer;color:var(--tinta);
  display:flex;align-items:center;gap:13px;
}
.marca{width:38px;height:auto;flex:none;display:block}
footer .marca{width:44px}
.menu{display:flex;gap:34px;list-style:none;align-items:center}
.menu a{
  font-family:var(--sans);font-size:.83rem;font-weight:500;
  text-decoration:none;color:var(--secundario);letter-spacing:.01em;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
  cursor:pointer;
}
.menu a:hover,.menu a.on{color:var(--tinta);border-color:var(--acento)}
.burger{display:none;background:none;border:0;font-family:var(--sans);font-size:.83rem;cursor:pointer;color:var(--tinta)}
@media(max-width:940px){
  .menu{
    display:none;position:absolute;top:74px;left:0;right:0;
    background:var(--papel);border-bottom:1px solid var(--regla);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 32px 24px;
  }
  .menu.open{display:flex}
  .menu li{width:100%;border-bottom:1px solid var(--regla)}
  .menu li:last-child{border:0}
  .menu a{display:block;padding:15px 0;font-size:1rem;border:0}
  .burger{display:block}
}

/* ---------- Estructura ---------- */
main{min-height:60vh}
section{padding:120px 0}
section.tight{padding:88px 0}
@media(max-width:760px){section,section.tight{padding:64px 0}}
.rule{height:1px;background:var(--regla);border:0}
.view{display:none}
.view.on{display:block;animation:fade .34s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.view.on{animation:none}html{scroll-behavior:auto}}

/* ---------- Hero ---------- */
.hero{position:relative;padding:0;border-bottom:1px solid var(--regla)}
.hero-img{
  width:100%;height:clamp(280px,42vw,520px);object-fit:cover;display:block;
  background:var(--regla);
}
.hero-txt{padding:76px 0 96px}
.hero-txt h1{max-width:16ch}
.hero-txt .lead{max-width:52ch;margin-top:1.9rem}
@media(max-width:760px){.hero-txt{padding:48px 0 56px}}

/* ---------- Botones ---------- */
.acciones{display:flex;gap:16px;flex-wrap:wrap;margin-top:2.6rem}
.btn{
  font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:.01em;
  text-decoration:none;padding:14px 26px;border:1px solid var(--tinta);
  color:var(--tinta);background:none;cursor:pointer;transition:background .18s,color .18s;
}
.btn:hover{background:var(--tinta);color:var(--papel)}
.btn.solid{background:var(--tinta);color:var(--papel)}
.btn.solid:hover{background:var(--acento);border-color:var(--acento)}
.link{
  font-family:var(--sans);font-size:.84rem;font-weight:500;text-decoration:none;
  color:var(--acento);border-bottom:1px solid var(--regla);padding-bottom:2px;
  transition:border-color .18s;cursor:pointer;display:inline-block;
}
.link:hover{border-color:var(--acento)}

/* ---------- Retículas ---------- */
.split{display:grid;grid-template-columns:1fr 2fr;gap:72px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
@media(max-width:900px){.cols2,.cols3{grid-template-columns:1fr;gap:44px}}

/* ---------- Piezas ---------- */
.paso{padding:30px 0;border-top:1px solid var(--regla);display:grid;grid-template-columns:120px 1fr;gap:32px}
.paso:last-child{border-bottom:1px solid var(--regla)}
@media(max-width:700px){.paso{grid-template-columns:1fr;gap:10px}}
.paso h3{font-size:1.4rem}
.paso p{font-size:1.02rem;line-height:1.6;color:var(--secundario);margin-top:.5rem}

.unidad{border-top:1px solid var(--regla);padding-top:26px}
.unidad img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:24px;background:var(--regla)}
.unidad h3{margin-bottom:.5rem}
.unidad .rol{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--secundario);display:block;margin-bottom:1.1rem}
.unidad p{font-size:1rem;line-height:1.62;color:var(--secundario);margin-bottom:1.3rem}

.yos{list-style:none;counter-reset:y}
.yos li{
  counter-increment:y;border-top:1px solid var(--regla);padding:24px 0;
  display:grid;grid-template-columns:60px 1fr;gap:24px;align-items:baseline;
}
.yos li:last-child{border-bottom:1px solid var(--regla)}
.yos li::before{
  content:counter(y,decimal-leading-zero);
  font-family:var(--sans);font-size:.75rem;font-weight:600;color:#7FC4E8;letter-spacing:.1em;
}
.yos strong{font-weight:600;display:block;margin-bottom:.25rem}
.yos span{font-size:1rem;color:var(--secundario);line-height:1.6}

.nota{
  border-left:2px solid var(--acento);padding:4px 0 4px 28px;margin:2.6rem 0;
  font-size:1rem;line-height:1.68;color:var(--secundario);max-width:60ch;
}
.nota strong{color:var(--tinta);font-weight:600}

.pub{
  border-top:1px solid var(--regla);padding:28px 0;display:grid;
  grid-template-columns:150px 1fr;gap:32px;align-items:baseline;text-decoration:none;
}
.pub:last-of-type{border-bottom:1px solid var(--regla)}
@media(max-width:700px){.pub{grid-template-columns:1fr;gap:8px}}
.pub h3{font-size:1.28rem;transition:color .18s}
.pub:hover h3{color:var(--acento)}
.pub .meta{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--secundario)}
.pub .desc{font-size:.98rem;color:var(--secundario);margin-top:.45rem;line-height:1.58}

.dato{border-top:1px solid var(--regla);padding-top:22px}
.dato .cifra{font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;letter-spacing:-0.03em;display:block;margin-bottom:.6rem}
.dato .desc{font-size:.95rem;color:var(--secundario);line-height:1.55}
.dato .fuente{font-family:var(--sans);font-size:.7rem;color:var(--secundario);margin-top:.8rem;display:block;letter-spacing:.04em}

.pendiente{
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.08em;
  color:var(--verde);border:1px dashed var(--verde);padding:3px 9px;display:inline-block;
  text-transform:uppercase;
}
.bloque-pend{border:1px dashed var(--regla);padding:36px;background:rgba(222,228,234,.28)}

.oscuro{background:var(--sombra);color:var(--papel)}
.oscuro .lead,.oscuro .small,.oscuro p{color:#A9B4C0}
.oscuro .eyebrow{color:#7FC4E8}
.oscuro .btn{border-color:var(--papel);color:var(--papel)}
.oscuro .btn:hover{background:var(--papel);color:var(--sombra)}
.oscuro hr,.oscuro .paso,.oscuro .yos li{border-color:#26303B}

figure{margin:0}
figure img{width:100%;display:block;background:var(--regla)}
figcaption{font-family:var(--sans);font-size:.72rem;color:var(--secundario);margin-top:12px;letter-spacing:.03em}

.hero-img,.card .thumb,.unidad img,figure img{
  background-image:linear-gradient(134deg,#0A1E3C 0%,#2B4B96 46%,#2B7CB8 74%,#1F9DD3 100%);background-size:cover;}
img.sin-img{font-size:0;color:transparent;border:0}

/* ---------- Pie ---------- */
footer{border-top:1px solid var(--regla);padding:72px 0 44px;font-family:var(--sans)}
.pie{display:grid;grid-template-columns:2fr 1fr 1fr;gap:56px;margin-bottom:56px}
@media(max-width:800px){.pie{grid-template-columns:1fr;gap:36px}}
footer h5{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--secundario);margin-bottom:18px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{font-size:.88rem;text-decoration:none;color:var(--tinta);opacity:.82;transition:opacity .18s;cursor:pointer}
footer a:hover{opacity:1;color:var(--acento)}
.legal{font-size:.76rem;color:var(--secundario);line-height:1.75;border-top:1px solid var(--regla);padding-top:26px}