/* Clima y NOM-035 — composiciones propias de esta página.
   Talento parte de una persona; aquí el eje es una organización que se desagrega.
   Sin violeta: ese territorio es de Talento. Teal, navy, mint y hueso. */

/* --- hero --- */
.hero-e{position:relative;overflow:hidden;padding:clamp(52px,7vw,92px) 0 clamp(58px,8vw,104px)}
.hero-e::after{content:"";position:absolute;right:-20%;top:-34%;width:70%;height:92%;
  background:radial-gradient(circle closest-side,rgba(15,143,131,.4),rgba(8,34,56,0));pointer-events:none}
.hero-e .wrap{position:relative;z-index:2}
.hero-e-rejilla{display:grid;gap:clamp(38px,5vw,56px)}
.hero-e h1{max-width:20ch;font-size:clamp(2.1rem,4.5vw,3.4rem)}
.hero-e .texto-l{margin-top:22px;color:#C4D4E1;max-width:52ch}
.hero-e .btn{margin-top:30px}
.rotulo-t{font-size:.98rem;font-weight:600;color:var(--mint);letter-spacing:-.01em}

/* --- lienzo --- */
.fig .t-alto,.s-navy .fig .t-alto{fill:rgba(40,199,137,.42);stroke:#28C789}
.fig .t-medio,.s-navy .fig .t-medio{fill:rgba(40,199,137,.18);stroke:rgba(40,199,137,.45)}
.fig .t-bajo,.s-navy .fig .t-bajo{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.22)}
.fig .foco,.s-navy .fig .foco{fill:rgba(40,199,137,.16);stroke:#28C789}

/* --- preguntas del problema --- */
.incomodas{display:grid;gap:0;border-top:1px solid var(--linea)}
.incomodas p{padding:16px 0;border-bottom:1px solid var(--linea);
  font-size:clamp(1.15rem,2.3vw,1.5rem);font-weight:600;letter-spacing:-.02em;line-height:1.24;color:#3D5163}
.corte{margin-top:clamp(32px,4.4vw,54px);padding-top:24px;border-top:2px solid var(--teal);max-width:26ch;
  font-size:clamp(1.45rem,2.9vw,2rem);font-weight:700;letter-spacing:-.026em;line-height:1.18}

/* --- lecturas del instrumento --- */
.lecturas-e{display:grid;gap:0;border-top:1px solid var(--linea)}
.lectura-e{display:grid;gap:4px;padding:20px 0;border-bottom:1px solid var(--linea)}
.lectura-e b{font-weight:600;font-size:1.16rem;letter-spacing:-.016em}
.lectura-e span{font-size:.98rem;color:var(--gris);max-width:56ch}

/* --- barras comparativas (esquema, sin cifras) --- */
.comparativa{display:grid;gap:12px}
.barra{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:14px;align-items:center}
.barra b{font-weight:600;font-size:.95rem}
.barra i{display:block;height:16px;border-radius:8px;background:#9EDCC4}
.barra i.w1{width:86%}
.barra i.w2{width:96%}
.barra i.w3{width:64%}
.barra i.w4{width:88%}
.barra.global i{background:var(--navy)}
.barra.baja i{background:#D6EFE4}
.nota-esquema{margin-top:18px;font-size:.88rem;color:var(--gris)}

/* --- jerarquía de lectura --- */
.escalones{display:grid;gap:0}
.escalon{position:relative;padding:11px 0 11px 28px;border-left:2px solid var(--linea)}
.escalon::before{content:"";position:absolute;left:-1px;top:24px;width:16px;height:2px;background:var(--linea)}
.escalon:first-child{border-left-color:transparent;padding-left:0}
.escalon:first-child::before{display:none}
.escalon b{font-weight:600}
.e1{margin-left:0}.e2{margin-left:16px}.e3{margin-left:32px}.e4{margin-left:48px}

/* --- ámbitos de acción --- */
.ambitos{display:grid;gap:clamp(26px,3.4vw,42px)}
.ambito h3{padding-bottom:12px;border-bottom:2px solid var(--mint)}
.ambito-org h3{border-bottom-color:#8CA4B8}
.ambito li{padding:11px 0;border-bottom:1px solid var(--linea-oscura);font-size:1rem}
.frase-clave{margin-top:clamp(28px,3.6vw,44px);padding-left:18px;border-left:2px solid var(--mint);
  font-size:1.2rem;font-weight:600;line-height:1.34;letter-spacing:-.018em;max-width:46ch}

/* --- del hallazgo a la acción --- */
.tramo{display:grid;gap:0}
.tramo div{padding:15px 0 15px 28px;position:relative;border-bottom:1px solid var(--linea)}
.tramo div:last-child{border-bottom:0}
.tramo div::before{content:"";position:absolute;left:0;top:22px;width:11px;height:11px;border-radius:2px;background:var(--teal)}
.tramo b{font-weight:600;font-size:1.04rem}
.tramo span{display:block;font-size:.93rem;color:var(--gris)}

/* --- eNPS --- */
.enps{display:flex;height:22px;border-radius:11px;overflow:hidden;margin-top:6px}
.enps i{display:block}
.enps .det{background:#CBD6E0;flex:2}
.enps .pas{background:#9EDCC4;flex:3}
.enps .pro{background:var(--teal);flex:5}
.enps-pie{display:flex;justify-content:space-between;margin-top:10px;font-size:.9rem;color:var(--gris)}

/* --- NOM-035 --- */
.norma{display:grid;gap:0}
.norma div{padding:14px 0 14px 30px;position:relative;border-bottom:1px solid var(--linea-oscura)}
.norma div:last-child{border-bottom:0}
.norma div::before{content:"";position:absolute;left:0;top:21px;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--mint)}
.norma b{font-weight:600;font-size:1.04rem}
.norma span{display:block;font-size:.92rem;color:var(--gris-claro)}

/* --- volver a medir --- */
.vuelta{display:grid;gap:12px}
.paso-v{padding:20px;border:1px solid var(--linea);border-radius:var(--radio-m);background:#fff}
.paso-v b{display:block;font-weight:600;font-size:1.08rem}
.paso-v span{font-size:.94rem;color:var(--gris)}

/* --- reparto --- */

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

@media (min-width:720px){
  .lecturas-e{grid-template-columns:1fr 1fr;column-gap:38px}
  .ambitos{grid-template-columns:1fr 1fr}
  .vuelta{grid-template-columns:repeat(4,1fr)}
  .tramo{grid-template-columns:repeat(2,1fr);column-gap:34px}
  .norma{grid-template-columns:1fr 1fr;column-gap:34px}
}
@media (min-width:900px){
  .hero-e-rejilla{grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(38px,4.4vw,64px)}
  .tramo{grid-template-columns:repeat(5,1fr);column-gap:22px}
  .tramo-3{grid-template-columns:repeat(3,1fr);column-gap:30px}
  .tramo div{border-bottom:0;border-top:1px solid var(--linea);padding:26px 0 0}
  .tramo div::before{top:-5px}
}