/* Compensación — composiciones propias de esta página.
   Más analítica que Home y Plataforma: el dato es el recurso gráfico. */

/* --- hero 55/45 --- */
.hero-c{position:relative;overflow:hidden;padding:clamp(52px,7vw,96px) 0 clamp(60px,8vw,110px)}
.hero-c::after{content:"";position:absolute;left:-16%;top:-34%;width:66%;height:88%;
  background:radial-gradient(circle closest-side,rgba(15,143,131,.36),rgba(8,34,56,0));pointer-events:none}
.hero-c .wrap{position:relative;z-index:2}
.hero-c-rejilla{display:grid;gap:clamp(40px,5vw,62px)}
.hero-c h1{max-width:15ch;font-size:clamp(2.2rem,4.9vw,3.7rem)}
.hero-c .texto-l{margin-top:22px;color:#C4D4E1;max-width:50ch}
.hero-c .btn{margin-top:30px}
.rotulo{font-size:.98rem;font-weight:600;color:var(--mint);letter-spacing:-.01em}

/* --- lienzo de diagrama --- */
.fig .viva,.s-navy .fig .viva{fill:rgba(40,199,137,.16);stroke:var(--mint)}
.fig .hilo-vivo{stroke:var(--mint);stroke-width:1.7}

/* --- preguntas editoriales --- */
.preguntas{border-top:1px solid var(--linea)}
.preguntas p{padding:18px 0;border-bottom:1px solid var(--linea);
  font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:600;letter-spacing:-.024em;line-height:1.2;color:#3D5163}
.veredicto-c{margin-top:clamp(30px,4vw,46px);max-width:26ch;font-size:clamp(1.4rem,2.8vw,1.95rem);
  font-weight:700;letter-spacing:-.026em;line-height:1.18}

/* --- serie corta (puesto → nivel) --- */
.serie{display:grid;gap:12px;margin-top:26px}
.serie div{padding-left:16px;border-left:2px solid var(--teal);font-size:1rem;line-height:1.4}
.serie b{display:block;font-weight:600}
.serie span{font-size:.9rem;color:var(--gris)}

/* --- leyenda de la gráfica de bandas --- */
.leyenda{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font-size:.94rem;color:var(--gris)}
.leyenda span{display:flex;align-items:center;gap:8px}
.leyenda i{width:12px;height:12px;border-radius:3px;background:#A8E4C9;flex:none}
.leyenda i.medio{background:var(--teal);width:2px;height:16px;border-radius:0}
.leyenda i.punto{background:var(--navy);border-radius:50%;width:10px;height:10px}

/* --- posiciones dentro del rango --- */
.posiciones{display:grid;gap:0;border-top:1px solid rgba(8,34,56,.14)}
.posiciones div{padding:16px 0;border-bottom:1px solid rgba(8,34,56,.14)}
.posiciones b{font-weight:600;display:block}
.posiciones span{font-size:.94rem;color:var(--gris)}

/* --- matriz de mérito --- */
.matriz-caja{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:8px}
.matriz-y{display:grid;align-content:space-between;padding:14px 0;font-size:.84rem;color:var(--gris);text-align:right}
.matriz{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.matriz i{display:block;aspect-ratio:1.6;border-radius:6px;background:#EDF3F8;border:1px solid var(--linea)}
.matriz i.g1{background:#DCF1E7}
.matriz i.g2{background:#B4E6CE}
.matriz i.g3{background:#7FD8B0}
.matriz-x{grid-column:2;display:flex;justify-content:space-between;font-size:.86rem;color:var(--gris);margin-top:8px}
.rama{max-width:none}
.separacion-clara{margin-top:clamp(30px,4vw,48px);padding:18px 20px;border-left:2px solid var(--teal);
  background:var(--mint-tenue);border-radius:0 var(--radio-m) var(--radio-m) 0;max-width:70ch;
  color:var(--navy);font-size:1rem}
.regla{margin-top:26px;padding-top:20px;border-top:2px solid var(--teal);max-width:34ch;
  font-size:1.2rem;font-weight:600;line-height:1.32;letter-spacing:-.018em}

/* --- dos motores --- */
.motor{font-size:clamp(1.35rem,2.6vw,1.8rem);letter-spacing:-.024em;font-stretch:104%;
  padding-bottom:12px;border-bottom:2px solid var(--mint)}
.separacion{margin-top:clamp(30px,4vw,48px);padding:18px 20px;border-left:2px solid var(--mint);
  background:rgba(40,199,137,.09);border-radius:0 var(--radio-m) var(--radio-m) 0;max-width:70ch;
  color:#C4D4E1;font-size:.99rem}

/* --- flujo presupuestal --- */
.flujo{display:grid;gap:0;counter-reset:f}
.flujo div{padding:15px 0 15px 30px;position:relative;border-bottom:1px solid var(--linea-oscura)}
.flujo div:last-child{border-bottom:0}
.flujo div::before{content:"";position:absolute;left:0;top:22px;width:10px;height:10px;border-radius:2px;background:var(--mint)}
.flujo b{font-weight:600;font-size:1.04rem}
.flujo span{display:block;font-size:.92rem;color:var(--gris-claro)}
.interrogantes{display:grid;gap:14px;margin-top:clamp(28px,4vw,44px)}
.interrogantes p{padding-left:18px;border-left:2px solid rgba(40,199,137,.5);font-size:1.05rem;color:#C4D4E1;line-height:1.4}

/* --- el ciclo completo --- */
.ciclo{position:relative;display:grid;gap:0;max-width:620px}
.ciclo::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:2px;background:var(--linea)}
.eta{position:relative;padding:12px 0 12px 34px;display:grid;grid-template-columns:1fr;gap:2px}
.eta::before{content:"";position:absolute;left:0;top:19px;width:20px;height:20px;border-radius:5px;
  background:#DCE3EA}
.eta b{font-weight:600;font-size:1.14rem;letter-spacing:-.016em}
.eta em{font-style:normal;font-size:.9rem;color:var(--teal-texto);display:block}
.eta-viva::before{background:var(--mint)}
.serie-col{grid-template-columns:1fr !important;gap:12px !important}
.serie-col div{padding:0 0 0 16px !important;border-left:2px solid var(--teal)}
.eta-viva::before{background:var(--mint);border-color:var(--mint)}

/* --- reparto de responsabilidades --- */

body{--acento:var(--teal)}

@media (min-width:720px){
  .serie{grid-template-columns:repeat(5,1fr);gap:0}
  .serie div{padding:0 14px;border-left-width:2px}
  .posiciones{grid-template-columns:repeat(3,1fr);column-gap:30px}
}
@media (min-width:900px){
  .hero-c-rejilla{grid-template-columns:1.22fr .78fr;align-items:center;gap:clamp(38px,4.4vw,68px)}
}

/* --- gráfica de bandas: versión móvil sin desplazamiento lateral --- */
.bandas-movil{display:grid;gap:14px}
.bm{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center}
.bm b{font-size:.82rem;font-weight:600;color:var(--gris)}
.bm-riel{position:relative;display:block;height:20px}
.bm-rango{position:absolute;top:0;height:20px;border-radius:10px;background:#A5E1C4}
.bm-rango::after{content:"";position:absolute;left:50%;top:-5px;width:2px;height:30px;background:var(--teal)}
.r09{left:0;width:38%;background:#D3F0E2}
.r10{left:12%;width:42%;background:#C3EBD8}
.r11{left:24%;width:46%;background:#B4E6CE}
.r12{left:36%;width:50%;background:#A5E1C4}
.r13{left:48%;width:52%;background:#96DCBA}
.r14{left:60%;width:40%;background:#87D7B0}
.bm-persona{position:absolute;left:36%;top:4px;width:12px;height:12px;border-radius:50%;background:var(--navy)}
.bm-pie{display:flex;justify-content:space-between;margin-top:4px;padding-left:76px;
  font-size:.78rem;color:var(--gris)}