/* Operación diaria — la capa que se usa todos los días.
   Superficie propia: frío y hueso, con navy para los bloques de registro.
   El recurso es la acumulación: capas, cortes y vencimientos. */

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

/* --- preguntas de operación --- */
.operativas{display:grid;gap:0;border-top:1px solid var(--linea)}
.operativas p{padding:15px 0;border-bottom:1px solid var(--linea);
  font-size:clamp(1.08rem,2.1vw,1.34rem);font-weight:600;letter-spacing:-.018em;line-height:1.26;color:#3D5163}
.registro{margin-top:clamp(30px,4.2vw,50px);padding-top:24px;border-top:2px solid var(--teal);max-width:24ch;
  font-size:clamp(1.4rem,2.9vw,2rem);font-weight:700;letter-spacing:-.026em;line-height:1.16}

/* --- capas del costo --- */
.capas{display:grid;gap:6px}
.capa{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:16px;align-items:center;
  padding:14px 16px;border-radius:var(--radio-s);background:#fff;border:1px solid var(--linea)}
.capa b{font-weight:600;font-size:1rem}
.capa span{font-size:.93rem;color:var(--gris)}
.capa-falta span{color:#7A4A40}
.capa-1{background:#EAF8F1;border-color:#B9E6D2}
.capa-2{background:#F1FAF6;border-color:#CFEDE0}
.capa-falta{background:#FBEDEA;border-color:#EBC9C1}
.capa-falta b{color:#7A2B1F}
.capa-total{background:var(--navy);border-color:var(--navy);color:#fff}
.capa-total span{color:var(--gris-claro)}

/* --- corte a una fecha --- */
.corte-fig{position:relative;padding:26px 0 10px}
.linea-tiempo{position:relative;height:2px;background:var(--linea);margin:38px 0 26px}
.marca-corte{position:absolute;top:-16px;left:58%;width:2px;height:34px;background:var(--teal)}
.marca-corte::after{content:"a una fecha";position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:.86rem;color:var(--teal-texto);font-weight:600}
.hito-t{position:absolute;top:-5px;width:12px;height:12px;border-radius:50%;background:#C2CEDA}
.foto{display:grid;gap:0;border-top:1px solid var(--linea)}
.foto div{padding:14px 0;border-bottom:1px solid var(--linea)}
.foto b{font-weight:600;display:block}
.foto span{font-size:.93rem;color:var(--gris)}

/* --- vencimientos --- */
.vence{display:grid;gap:0}
.vence div{position:relative;padding:16px 0 16px 30px;border-bottom:1px solid var(--linea)}
.vence div:last-child{border-bottom:0}
.vence div::before{content:"";position:absolute;left:0;top:23px;width:11px;height:11px;border-radius:2px;background:var(--teal)}
.vence b{font-weight:600;font-size:1.04rem}
.vence span{display:block;font-size:.93rem;color:var(--gris)}

/* --- módulos del día a día --- */
.cotidiano{display:grid;gap:14px}
.cot{padding:22px;border:1px solid var(--linea);border-radius:var(--radio-m);background:#fff}
.cot b{display:block;font-weight:600;font-size:1.1rem;letter-spacing:-.014em}
.cot span{font-size:.95rem;color:var(--gris)}

/* --- canal de denuncias --- */
.canal-d{display:grid;gap:0}
.canal-d div{padding:16px 0 16px 30px;position:relative;border-bottom:1px solid var(--linea-oscura)}
.canal-d div:last-child{border-bottom:0}
.canal-d div::before{content:"";position:absolute;left:0;top:23px;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--mint)}
.canal-d b{font-weight:600}
.canal-d span{display:block;font-size:.93rem;color:var(--gris-claro)}

/* --- holgura --- */
.holgura{display:grid;gap:12px}
.tipo-h{padding:20px;border-radius:var(--radio-m);border:1px solid var(--linea);background:#fff}
.tipo-h b{display:block;font-weight:600;font-size:1.08rem}
.tipo-h span{font-size:.95rem;color:var(--gris)}
.tipo-estructural{border-left:3px solid var(--navy)}
.tipo-temporada{border-left:3px solid var(--mint)}

@media (min-width:720px){
  .cotidiano{grid-template-columns:1fr 1fr}
  .holgura{grid-template-columns:1fr 1fr}
  .foto{grid-template-columns:repeat(3,1fr);column-gap:30px}
}
@media (min-width:900px){
  .hero-o-rejilla{grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(38px,4.4vw,64px)}
  .cotidiano{grid-template-columns:repeat(4,1fr)}
}
.h-a{left:8%}.h-b{left:30%}.h-c{left:78%}
.fig .foco,.s-navy .fig .foco{fill:rgba(40,199,137,.16);stroke:#28C789}

/* --- territorio propio del canal de denuncias --- */
.s-hondo{background:var(--navy-hondo);color:#fff;position:relative;overflow:hidden}
.s-hondo::before{content:"";position:absolute;inset:auto -30% -70% -30%;height:80%;
  background:radial-gradient(circle closest-side,rgba(15,143,131,.3),rgba(5,24,40,0));pointer-events:none}
.s-hondo .wrap{position:relative;z-index:2}
.s-hondo .texto,.s-hondo .texto-l,.s-hondo .mini{color:#9FB2C2}
.declaracion{font-size:clamp(1.7rem,4vw,2.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;max-width:20ch}

/* --- las cinco capas --- */
.capas-z{display:grid;gap:0;border-top:1px solid var(--linea)}
.capa-z{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--linea)}
.capa-z b{font-weight:600;font-size:1.12rem;letter-spacing:-.016em}
.capa-z span{font-size:.96rem;color:var(--gris)}
.capa-z.aqui-z b{color:var(--teal-texto)}
@media (min-width:900px){
  .capa-z{grid-template-columns:minmax(180px,.8fr) 2.2fr;gap:28px;align-items:baseline}
}