/* Implementación — composiciones propias de esta página.
   No es una quinta solución: es transversal, así que usa todo el sistema de
   color en vez de tener territorio propio. El recurso exclusivo de la página
   es el paso de dispersión a estructura. */

/* --- hero --- */
.hero-i{position:relative;overflow:hidden;padding:clamp(52px,7vw,92px) 0 clamp(56px,8vw,100px)}
.hero-i::after{content:"";position:absolute;right:-18%;top:-38%;width:68%;height:94%;
  background:radial-gradient(circle closest-side,rgba(15,143,131,.36),rgba(8,34,56,0));pointer-events:none}
.hero-i .wrap{position:relative;z-index:2}
.hero-i-rejilla{display:grid;gap:clamp(38px,5vw,56px)}
.hero-i h1{max-width:17ch;font-size:clamp(2.1rem,4.5vw,3.45rem)}
.hero-i .texto-l{margin-top:22px;color:#C4D4E1;max-width:52ch}
.hero-i .btn{margin-top:30px}
.hero-i-pie{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13);
  font-size:.94rem;color:#8CA4B8;max-width:46ch}
.rotulo-i{font-size:.98rem;font-weight:600;color:var(--mint);letter-spacing:-.01em}

/* --- lienzo --- */
.fig .suelta{fill:#fff;stroke:var(--linea);stroke-dasharray:5 4}
.s-navy .fig .suelta{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.26)}
.fig .foco,.s-navy .fig .foco{fill:rgba(40,199,137,.16);stroke:#28C789}

/* --- preguntas del diagnóstico --- */
.inventario{display:grid;gap:0;border-top:1px solid var(--linea)}
.inventario 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}
.golpe{margin-top:clamp(30px,4.2vw,50px);padding-top:24px;border-top:2px solid var(--navy);max-width:22ch;
  font-size:clamp(1.45rem,2.9vw,2.05rem);font-weight:700;letter-spacing:-.026em;line-height:1.16}

/* --- pila de la estructura --- */
.pila{display:grid;gap:0;max-width:520px}
.grada{position:relative;padding:13px 0 13px 30px;border-left:2px solid var(--linea)}
.grada::before{content:"";position:absolute;left:-5px;top:22px;width:8px;height:8px;border-radius:2px;background:#C2CEDA}
.grada:first-child{border-left-color:var(--teal)}
.grada:first-child::before{background:var(--teal)}
.grada b{font-weight:600;font-size:1.06rem;letter-spacing:-.014em}
.grada span{display:block;font-size:.92rem;color:var(--gris)}
.g1{margin-left:0}.g2{margin-left:14px}.g3{margin-left:28px}.g4{margin-left:42px}
.g5{margin-left:56px}.g6{margin-left:70px}

/* --- transformación de la carga --- */
.traslado{display:grid;gap:16px}
.bloque-t{padding:20px;border-radius:var(--radio-m);background:#fff;border:1px solid var(--linea)}
.bloque-t .bloque-t-t{font-size:.96rem;font-stretch:100%;color:var(--gris);font-weight:600}
.bloque-t ul{margin-top:12px}
.bloque-t li{padding:7px 0;font-size:.98rem;border-bottom:1px solid var(--linea)}
.bloque-t li:last-child{border-bottom:0}
.bloque-t.destino{background:#082238;border-color:#082238;color:#fff}
.bloque-t.destino .bloque-t-t{color:#8CA4B8}
.bloque-t.destino li{border-bottom-color:rgba(255,255,255,.12)}
.bloque-t.archivo{background:#EAF8F1;border-color:#B9E6D2}

/* --- revisiones --- */
.revisiones{display:grid;gap:0;border-top:1px solid var(--linea)}
.revision{display:grid;gap:2px;padding:16px 0 16px 30px;position:relative;border-bottom:1px solid var(--linea)}
.revision::before{content:"";position:absolute;left:0;top:23px;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--teal)}
.revision b{font-weight:600}
.revision span{font-size:.94rem;color:var(--gris)}

/* --- procesos sobre la base común --- */
.sobre-base{display:grid;gap:14px}
.proceso{padding:20px;border:1px solid var(--linea-oscura);border-radius:var(--radio-m);background:rgba(255,255,255,.03)}
.proceso b{display:block;font-weight:600;font-size:1.08rem}
.proceso span{font-size:.93rem;color:var(--gris-claro)}

/* --- qué significa configurable --- */
.tercios{display:grid;gap:clamp(24px,3vw,40px)}
.tercio h3{padding-bottom:12px;border-bottom:2px solid var(--teal)}
.tercio p{margin-top:12px;font-size:.99rem;color:var(--gris)}

/* --- instancia: teal profundo, no otro color de solución --- */
.s-teal{background:#08403E;--linea-oscura:#12625C}
.s-teal .fig .caja{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.22)}

/* --- instancia --- */
.aislamiento{display:grid;gap:0}
.aisl{padding:18px 0 18px 30px;position:relative;border-bottom:1px solid var(--linea-oscura)}
.aisl:last-child{border-bottom:0}
.aisl::before{content:"";position:absolute;left:0;top:25px;width:10px;height:10px;border-radius:2px;background:var(--mint)}
.aisl b{font-weight:600;font-size:1.06rem}
.aisl span{display:block;font-size:.93rem;color:var(--gris-claro)}

/* --- ámbitos de validación --- */
.ambitos-v{display:grid;gap:0;border-top:1px solid var(--linea)}
.ambitos-v li{padding:15px 0;border-bottom:1px solid var(--linea);font-size:1.04rem;font-weight:600}
.ambitos-v li span{display:block;font-size:.93rem;font-weight:400;color:var(--gris)}

/* --- semanas --- */
.semanas{display:grid;gap:0}
.semana{padding:18px 0;border-top:1px solid var(--linea)}
.semana:last-child{border-bottom:1px solid var(--linea)}
.semana em{font-style:normal;display:block;font-size:.86rem;font-weight:600;color:var(--teal-texto)}
.semana b{font-weight:600;font-size:1.08rem;letter-spacing:-.014em}
.semana span{display:block;font-size:.93rem;color:var(--gris);margin-top:2px}
.salvedad{margin-top:26px;font-size:.92rem;color:var(--gris);max-width:62ch}

/* --- reparto --- */

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

@media (min-width:720px){
  .traslado{grid-template-columns:1fr 1fr 1fr;align-items:start}
  .sobre-base{grid-template-columns:1fr 1fr}
  .tercios{grid-template-columns:repeat(3,1fr)}
  .semanas{grid-template-columns:repeat(4,1fr);column-gap:26px}
  .semana:last-child{border-bottom:0}
  .revisiones{grid-template-columns:1fr 1fr;column-gap:36px}
}
@media (min-width:900px){
  .hero-i-rejilla{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(38px,4.4vw,62px)}
  .sobre-base{grid-template-columns:repeat(4,1fr)}
}