/* ═══════════════════════════════════════════════════════════════
   Módulo T · IA aplicada al monitoreo ambiental y patrimonial
   Sistema visual v4 · Ágoras · Convenio 813
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:Lora;src:url(fonts/Lora-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Lora;src:url(fonts/Lora-600.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Lora;src:url(fonts/Lora-700.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-600.woff2)format('woff2');font-weight:600;font-display:swap}

:root{
  --navy:#1B2D4E; --azul:#3A6BA5; --terra:#B8552D; --verde:#5C6E47; --ambar:#B98A2B; --amarillo:#E4B10A; --rojo:#9E3B2C;
  --ink:#1F2937; --gris:#6B7280; --linea:#E5E7EB; --hueso:#FAFAF7; --papel:#F3F2EC; --papel2:#EBE9E0;
  --side:300px; --main:1240px; --text:660px;
}
*{box-sizing:border-box}
html{background:var(--hueso);scroll-behavior:smooth}
body{margin:0;background:var(--hueso);color:var(--ink);font-family:Poppins,"Segoe UI",system-ui,sans-serif;
     font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Lora,Georgia,serif;color:var(--navy);margin:0;line-height:1.15;text-wrap:balance}
p{margin:0} a{color:var(--terra)} b,strong{font-weight:600} i,em{font-style:italic}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
button{font:inherit}
img{max-width:100%}

/* ══ marco ══ */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
aside.nav{background:var(--papel);border-right:1px solid var(--linea);position:sticky;top:0;height:100vh;
          overflow:auto;display:flex;flex-direction:column;padding:28px 26px 24px}
.nav .marca img{height:34px;width:auto;display:block}
.nav .modulo{margin-top:22px;font-family:Lora;font-size:17px;font-weight:600;color:var(--navy);line-height:1.3}
.nav .modulo a{color:inherit;text-decoration:none}
.nav .modulo span{display:block;font-family:Poppins;font-weight:400;font-size:13.5px;color:var(--gris);margin-top:4px}

/* guía de avance */
.av{margin-top:24px;padding-top:20px;border-top:1px solid var(--linea)}
.av .k{font-size:12.5px;font-weight:500;color:var(--gris);display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.av .k b{font-family:Lora;font-size:15px;font-weight:600;color:var(--navy)}
.av .barra{display:flex;gap:3px;margin-top:9px}
.av .barra i{flex:1;height:6px;background:var(--papel2);border:1px solid var(--linea)}
.av .barra i.ok{background:var(--verde);border-color:var(--verde)}
.av .barra i.cur{background:var(--terra);border-color:var(--terra)}
.av .paso{margin-top:10px;font-size:12.5px;color:var(--gris)}
.av .paso b{color:var(--terra);font-weight:500}

/* recorrido de estaciones */
.nav ol{list-style:none;margin:26px 0 0;padding:0;position:relative}
.nav ol::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:1px;background:var(--linea);z-index:0}
.nav .ses{position:relative;z-index:1;background:var(--papel);padding-right:6px;font-size:12px;font-weight:500;color:var(--gris);margin:18px 0 6px}
.nav .ses:first-child{margin-top:0}
.nav li a{position:relative;z-index:1;display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;
          padding:7px 8px 7px 6px;margin:0 -6px;text-decoration:none;color:var(--ink);font-size:15px;line-height:1.35}
.nav li a:hover{background:var(--papel2)}
.nav li a.on{background:var(--navy);color:#fff}
.nav li a .n{position:relative;width:22px;height:22px;display:grid;place-items:center;background:var(--papel);
             border:1px solid var(--linea);border-radius:50%;font-family:Lora;font-weight:600;font-size:12px;color:var(--gris)}
.nav li a:hover .n{border-color:var(--gris)}
.nav li a.on .n{background:var(--terra);border-color:var(--terra);color:#fff}
.nav li a.done .n{background:var(--verde);border-color:var(--verde);font-size:0}
.nav li a.done .n::after{content:"";position:absolute;width:5px;height:9px;border:solid #fff;border-width:0 1.8px 1.8px 0;
                         transform:rotate(45deg) translate(-1px,-1px)}
.nav .pie{margin-top:auto;padding-top:22px;border-top:1px solid var(--linea);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.nav .pie img{height:22px;width:auto;opacity:.9} .nav .pie img.ag{height:28px}
.nav .pie small{flex-basis:100%;font-size:11.5px;color:var(--gris);line-height:1.5}
.nav .guard{margin-top:12px;font-size:12px;color:var(--gris);line-height:1.5;padding-top:10px;border-top:1px dashed var(--linea)}
.nav .nav-btn{display:none;width:100%;margin-top:14px;padding:12px 14px;min-height:46px;font:inherit;font-size:15px;font-weight:500;
              color:var(--navy);background:var(--hueso);border:1.5px solid var(--navy);cursor:pointer;text-align:left}
.nav .nav-btn::after{content:"▾";float:right}
.nav .nav-btn[aria-expanded="true"]::after{content:"▴"}
.nav .ayuda{margin-top:14px;font-size:12.5px;color:var(--gris);line-height:1.5}
.nav .ayuda b{color:var(--navy);font-weight:500}

main{min-width:0}
.wrap{max-width:var(--main);margin:0 auto;padding:0 56px 96px}

/* ══ cabecera de estación ══ */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch;border-bottom:1px solid var(--linea)}
.hero figure{margin:0;position:relative}
.hero figure img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.hero figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 16px;font-size:12.5px;color:#fff;
                 background:linear-gradient(transparent,rgba(20,28,42,.55));line-height:1.4}
.hero figcaption b{font-weight:500}
.hero .tt{padding:44px 0 40px 52px;display:flex;flex-direction:column;justify-content:center}
.hero .sobre{font-size:14.5px;font-weight:500;color:var(--terra)}
.hero .sobre span{color:var(--gris);font-weight:400}
.hero h1{font-size:clamp(34px,3.4vw,52px);font-weight:700;letter-spacing:-.015em;margin-top:12px}
.hero .lede{margin-top:18px;font-size:19px;line-height:1.5;color:var(--gris);max-width:38ch}
.hero dl{margin:28px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14.5px}
.hero dt{color:var(--gris)} .hero dd{margin:0;font-weight:500;color:var(--ink)}

/* barra de pasos */
.pasos{position:sticky;top:0;z-index:5;background:var(--hueso);border-bottom:1px solid var(--linea);
       display:flex;margin:0 -56px;padding:0 56px}
.pasos a{font-size:14px;font-weight:500;color:var(--gris);text-decoration:none;padding:14px 22px 12px 0;
         margin-right:22px;border-bottom:2px solid transparent;white-space:nowrap}
.pasos a b{font-family:Lora;font-weight:600;color:var(--navy);margin-right:8px}
.pasos a.on{color:var(--navy);border-bottom-color:var(--terra)}

/* ══ cuerpo: texto + margen ══ */
section.paso{padding-top:56px;scroll-margin-top:60px}
.grid{display:grid;grid-template-columns:minmax(0,var(--text)) minmax(0,1fr);gap:56px;align-items:start}
.grid > .full{grid-column:1/-1}
h2{font-size:clamp(28px,2.6vw,36px);font-weight:600}
h2 small{display:block;font-family:Poppins;font-weight:500;font-size:13.5px;color:var(--terra);margin-bottom:8px}
h3{font-size:22px;font-weight:600;margin-top:34px}
.texto p+p{margin-top:16px} .texto h2+p{margin-top:18px}
.margen{font-size:15.5px;color:var(--gris);line-height:1.6;padding-top:8px}
.margen b{color:var(--ink);font-weight:500} .margen p+p{margin-top:12px}

/* video */
.video{margin-top:26px}
.video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.video .pie{margin-top:8px;font-size:13.5px;color:var(--gris)}

/* tres ideas */
ol.ideas{list-style:none;margin:28px 0 0;padding:0;counter-reset:i;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
ol.ideas li{counter-increment:i;border-top:2px solid var(--navy);padding-top:16px;font-size:16.5px;line-height:1.55}
ol.ideas li::before{content:counter(i);display:block;font-family:Lora;font-weight:700;font-size:40px;color:var(--terra);line-height:1;margin-bottom:8px}
ol.ideas li b{font-family:Lora;font-size:19px;color:var(--navy);font-weight:600}
ol.ideas li b.tt{font-size:22px;display:block;margin-bottom:8px}

/* prompt */
.prompt{background:var(--papel);border:1px solid var(--linea);padding:22px 26px 24px;margin-top:22px}
.prompt .cab{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.prompt .cab span{font-size:14.5px;font-weight:500;color:var(--navy)}
.prompt button{font-size:14.5px;font-weight:500;color:#fff;background:var(--terra);border:0;padding:7px 14px;cursor:pointer}
.prompt button:hover{background:var(--navy)} .prompt button.ok{background:var(--verde)}
.prompt pre{margin:14px 0 0;font:inherit;font-size:16px;line-height:1.6;white-space:pre-wrap;color:var(--ink)}
.prompt .pie-copy{margin-top:16px;padding-top:12px;border-top:1px solid var(--linea);text-align:right}
.prompt button{min-height:40px}
.fill{background:#F6E3D9;color:var(--terra);padding:0 4px;font-weight:500}

/* avisos */
.aviso{margin-top:22px;border-left:3px solid var(--terra);padding:4px 0 4px 20px}
.aviso b{font-weight:600;color:var(--navy)}
.aviso.ok{border-left-color:var(--verde)} .aviso.info{border-left-color:var(--azul)}

/* notas de campo */
.nota{margin-top:24px}
.nota label{display:block;font-size:16.5px;color:var(--navy);font-weight:500;margin-bottom:4px}
.nota .tu{display:block;font-size:12.5px;color:var(--gris);margin-bottom:6px;letter-spacing:.02em}
.nota textarea{display:block;width:100%;font:inherit;font-size:17px;line-height:1.5;padding:12px 14px;min-height:96px;
               border:1px solid var(--linea);border-bottom:2px solid #cfcdc4;background:var(--papel);color:var(--ink);resize:vertical}
.nota textarea::placeholder{color:#9a9a94;font-style:italic}
.nota textarea:focus{outline:none;border-color:var(--terra)}

/* casillas */
.chks{margin-top:24px;display:grid;gap:2px}
.chk{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--linea);
     font-size:16.5px;line-height:1.55;cursor:pointer}
.chks .chk:last-child{border-bottom:1px solid var(--linea)}
.chk input{width:19px;height:19px;margin-top:4px;accent-color:var(--verde)}
.chk input:checked ~ span{color:var(--gris)}

/* tablas */
.tabla{margin-top:24px;overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:16px;min-width:520px}
th,td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--linea);vertical-align:top}
thead th{font-size:13.5px;font-weight:500;color:var(--gris);border-bottom:1.5px solid var(--navy);padding-bottom:8px}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla figcaption{margin-top:10px;font-size:13.5px;color:var(--gris)}

/* figuras y diagramas */
figure.fig{margin:28px 0 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:26px 0 24px}
figure.fig svg{display:block;width:100%;height:auto}
figure.fig figcaption{margin-top:14px;font-size:13.5px;color:var(--gris);line-height:1.55}
figure.foto{margin:28px 0 0}
figure.foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
figure.foto figcaption{margin-top:8px;font-size:13.5px;color:var(--gris)}
figure.foto figcaption b{font-weight:500;color:var(--ink)}
.cap{margin:0}
.cap img{display:block;width:100%;height:auto;border:1px solid var(--linea)}
.cap .vacia{aspect-ratio:16/10;border:1px dashed var(--terra);background:var(--papel);display:grid;place-items:center;text-align:center;padding:24px}
.cap .vacia span{font-size:14.5px;color:var(--terra);line-height:1.5;max-width:34ch}
.cap figcaption{margin-top:8px;font-size:13.5px;color:var(--gris);line-height:1.5}

/* ══ ejercicio: una pregunta a la vez ══ */
.ejcab{margin-top:24px;border:1.5px solid var(--terra);background:var(--hueso)}
.ejcab .rot{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--terra);color:#fff}
.ejcab .rot svg{width:22px;height:22px;flex:none}
.ejcab .rot span{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ejcab .rot b{font-family:Lora;font-size:18px;font-weight:600;margin-left:6px}
.ejcab dl{margin:0;padding:14px 18px 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.ejcab dt{font-size:12.5px;font-weight:600;color:var(--terra);text-transform:uppercase;letter-spacing:.05em}
.ejcab dd{margin:3px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink)}
.ej{margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.ej .barra{display:flex;gap:6px;margin-bottom:16px}
.ej .barra i{flex:1;height:3px;background:var(--linea)}
.ej .barra i.ok{background:var(--verde)} .ej .barra i.no{background:var(--terra)} .ej .barra i.cur{background:var(--navy)}
.ej .n{font-size:14px;color:var(--gris);font-weight:500}
.ej .afirma{font-family:Lora;font-size:clamp(23px,2.3vw,30px);line-height:1.35;color:var(--navy);margin-top:10px}
.ej .dice{margin-top:16px;color:var(--gris);font-size:16.5px}
.ej .dice b{color:var(--ink);font-weight:500}
.ej .leyenda{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--gris);line-height:1.4}
.ej .leyenda .l{display:inline-flex;align-items:center;gap:7px} .ej .leyenda b{color:var(--ink);font-weight:600}
.ej .leyenda i{width:11px;height:11px;border-radius:50%;flex:none}
.ej .leyenda .v i{background:var(--verde)} .ej .leyenda .a i{background:var(--amarillo)} .ej .leyenda .r i{background:var(--rojo)}
.ej .n .preg{display:block;margin-top:6px;font-family:Lora;font-size:17px;font-weight:600;color:var(--terra)}
.ej .btns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.ej .btns button{font-size:16px;font-weight:500;padding:12px 24px;min-height:46px;background:transparent;color:var(--navy);
                 border:1.5px solid var(--navy);cursor:pointer}
.ej .btns button:hover:not(:disabled){background:var(--navy);color:#fff}
.ej .btns button.pick{background:var(--navy);color:#fff}
.ej .btns button:disabled{cursor:default;opacity:.5} .ej .btns button.pick:disabled{opacity:1}
.ej .btns button.sol{outline:2px solid var(--verde);outline-offset:-2px;opacity:1}
.ej[data-sem] .btns button{border-width:2px;padding-left:20px}
.ej[data-sem] .btns button::before{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:10px;vertical-align:-1px}
.ej[data-sem] .btns button[data-v="0"]{border-color:var(--verde);color:var(--verde)} .ej[data-sem] .btns button[data-v="0"]::before{background:var(--verde)}
.ej[data-sem] .btns button[data-v="1"]{border-color:var(--amarillo);color:var(--ink)} .ej[data-sem] .btns button[data-v="1"]::before{background:var(--amarillo)}
.ej[data-sem] .btns button[data-v="2"]{border-color:var(--rojo);color:var(--rojo)} .ej[data-sem] .btns button[data-v="2"]::before{background:var(--rojo)}
.ej[data-sem] .btns button[data-v="0"]:hover:not(:disabled),.ej[data-sem] .btns button[data-v="0"].pick{background:var(--verde);color:#fff}
.ej[data-sem] .btns button[data-v="1"]:hover:not(:disabled),.ej[data-sem] .btns button[data-v="1"].pick{background:var(--amarillo);color:var(--ink)}
.ej[data-sem] .btns button[data-v="1"].pick::before,.ej[data-sem] .btns button[data-v="1"]:hover:not(:disabled)::before{background:var(--ink)}
.ej[data-sem] .btns button[data-v="2"]:hover:not(:disabled),.ej[data-sem] .btns button[data-v="2"].pick{background:var(--rojo);color:#fff}
.ej[data-sem] .btns button.pick::before,.ej[data-sem] .btns button:hover:not(:disabled)::before{background:#fff}
.ej[data-sem] .btns button.sol{outline-color:var(--navy)}
.ej .fb{margin-top:22px;display:none;font-size:17px}
.ej .fb.on{display:block}
.ej .fb b{font-family:Lora;font-size:21px;font-weight:600}
.ej .fb.bien b{color:var(--verde)} .ej .fb.mal b{color:var(--terra)}
.ej .sig{margin-top:18px;display:none} .ej .sig.on{display:inline-block}
.ej .fin button{font-size:16px;font-weight:500;color:var(--terra);background:none;border:0;padding:0;
                cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ej .sig button{font-size:16px;font-weight:500;color:#fff;background:var(--terra);border:0;padding:12px 26px;min-height:46px;cursor:pointer}
.ej .sig button:hover{background:var(--navy)}
.ej .fin ol.falladas{list-style:none;margin:14px 0 4px;padding:0;font-size:15.5px}
.ej .fin ol.falladas li{display:grid;grid-template-columns:26px 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--linea);line-height:1.45}
.ej .fin ol.falladas li span{font-family:Lora;font-weight:600;color:var(--terra)}
.ej .fin ol.falladas li em{display:block;font-style:normal;color:var(--gris);font-size:14px;margin-top:2px}
.ej .fin{display:none;margin-top:22px;border-top:1px solid var(--linea);padding-top:20px} .ej .fin.on{display:block}
.ej .fin b{font-family:Lora;font-size:26px;color:var(--navy)}
.ej .regla{background:var(--papel);padding:22px 24px;font-size:15.5px;line-height:1.6;color:var(--gris)}
.ej .regla b{font-family:Lora;color:var(--navy);font-weight:600}
.ej .regla > b:first-child{display:block;font-size:19px;margin-bottom:10px}
.ej .regla p+p{margin-top:10px}

/* ══ constructor (PACTO, observación) ══ */
.bld{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.bld-c{display:grid;grid-template-columns:44px 1fr;gap:14px;margin-bottom:20px}
.bld-l{font-family:Lora;font-weight:700;font-size:30px;color:var(--verde);text-align:center;line-height:1;padding-top:4px}
.bld-f label{display:block;font-size:15.5px;margin-bottom:6px;color:var(--gris)}
.bld-f label b{font-family:Lora;font-size:17.5px;color:var(--navy);font-weight:600}
.bld-f textarea{display:block;width:100%;font:inherit;font-size:16px;line-height:1.5;padding:10px 12px;min-height:96px;
                border:1px solid var(--linea);border-bottom:2px solid #cfcdc4;background:var(--papel);color:var(--ink);resize:vertical}
.bld-f textarea::placeholder{color:#9a9a94;font-style:italic}
.bld-f textarea:focus{outline:none;border-color:var(--terra)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{font-size:14px;cursor:pointer;background:transparent;color:var(--azul);border:1px solid var(--linea);padding:10px 14px;min-height:44px;line-height:1.3;text-align:left}
.chip:hover{border-color:var(--azul)}
.bld-out{position:sticky;top:64px}
.bld-out .prompt{margin-top:0}
.bld-out pre:empty::before{content:"Aquí se arma tu texto a medida que escribes.";color:var(--gris);font-style:italic}
.bld-est{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--gris)}
.bld-est i{font-style:normal;padding:6px 11px;border:1px solid var(--linea)}
.bld-est i.ok{border-color:var(--verde);color:var(--verde)}

/* pasos numerados con captura */
ol.hazlo{list-style:none;margin:28px 0 0;padding:0;counter-reset:h}
ol.hazlo > li{counter-increment:h;display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:44px;
              align-items:start;padding:34px 0;border-top:1px solid var(--linea)}
ol.hazlo > li:last-child{border-bottom:1px solid var(--linea)}
.hz-t{display:flex;gap:16px;align-items:baseline}
.hz-n{font-family:Lora;font-weight:700;font-size:34px;color:var(--terra);line-height:1;min-width:34px}
.hz-t h3{font-size:24px;font-weight:600;margin-top:0}
.hz-c{margin-top:14px;padding-left:50px}
.hz-c p+p{margin-top:12px}
.hz-c>div+p,.hz-c>p+div,.hz-c>div+div{margin-top:14px}
.hz-c .tecla{font-family:Lora;font-weight:600;color:var(--navy)}
.hz-c .escribe{display:block;margin:12px 0;background:var(--papel);border:1px solid var(--linea);padding:12px 16px;
                font-size:17px;color:var(--navy);font-weight:500}
.hz-chk{display:flex;gap:12px;align-items:center;margin-top:18px;font-size:15.5px;color:var(--gris);cursor:pointer;width:fit-content}
.hz-chk input{width:19px;height:19px;accent-color:var(--verde)}

/* antes de empezar */
.previo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--linea);margin-top:26px}
.previo > div{padding:22px 24px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.previo > div:nth-child(2n){border-right:0}
.previo > div:nth-last-child(-n+2){border-bottom:0}

.previo b{display:block;font-family:Lora;font-size:19px;color:var(--navy);font-weight:600;margin-bottom:8px}
.previo p{font-size:16px;line-height:1.55;color:var(--gris)}

/* si algo falla */
.fallas{margin-top:28px;border-top:1px solid var(--linea)}
.fallas details{border-bottom:1px solid var(--linea)}
.fallas summary{cursor:pointer;list-style:none;padding:18px 0;display:flex;gap:14px;align-items:baseline;
                font-family:Lora;font-size:20px;font-weight:600;color:var(--navy)}
.fallas summary::-webkit-details-marker{display:none}
.fallas summary::before{content:"+";color:var(--terra);font-family:Poppins;font-size:20px;font-weight:400;width:18px;flex:none}
.fallas details[open] summary::before{content:"−"}
.fallas .r{padding:0 0 22px 32px;max-width:70ch}
.fallas .r p+p{margin-top:12px}

/* comprobación */
.bien{margin-top:26px;border:1px solid var(--verde);padding:22px 24px}
.bien b{display:block;font-family:Lora;font-size:20px;color:var(--verde);font-weight:600;margin-bottom:8px}
.bien ul{margin:10px 0 0;padding-left:20px} .bien li{margin-top:6px;font-size:16.5px}
.bien li::marker{color:var(--verde)}

/* producto y cierre */
.producto{margin-top:56px;background:var(--navy);color:#fff;padding:36px 44px;display:grid;
          grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.producto .k{font-size:14px;font-weight:500;color:#F2C9B3}
.producto p{font-family:Lora;font-size:26px;line-height:1.4;margin-top:8px;max-width:40ch}
.producto label{display:flex;align-items:center;gap:12px;font-size:16px;cursor:pointer;white-space:nowrap;
                border:1.5px solid rgba(255,255,255,.5);padding:14px 20px}
.producto input{width:20px;height:20px;accent-color:var(--verde)}
.cierre{margin-top:28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.cierre a{text-decoration:none;font-size:16px}
.cierre a.sig{font-weight:500;color:#fff;background:var(--terra);padding:14px 26px}
.cierre a.sig:hover{background:var(--navy)}
.cierre a.ant{color:var(--gris)}

/* ══ portada del módulo ══ */
.portada{padding:0 0 20px}
.portada .foto{margin:0 -56px}
.portada .foto img{display:block;width:100%;height:auto;max-height:46vh;object-fit:cover}
.portada .foto figcaption{margin:10px 56px 0;font-size:13.5px;color:var(--gris)}
.portada .foto figcaption b{font-weight:500;color:var(--ink)}
.portada .tt{padding:40px 0 0;max-width:22ch}
.portada h1{font-size:clamp(38px,4.4vw,62px);font-weight:700;letter-spacing:-.02em;max-width:18ch}
.portada .sobre{font-size:15px;font-weight:500;color:var(--terra);margin-bottom:14px}
.portada .lede{margin-top:22px;font-size:21px;line-height:1.5;color:var(--gris);max-width:58ch}
.reglas{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;border-top:1px solid var(--linea);padding-top:26px}
.reglas > div > b{font-family:Lora;font-size:22px;color:var(--navy);display:block;margin-bottom:8px}
.sesiones{margin-top:56px}
.sesiones h2{margin-bottom:8px}
.ses-g{margin-top:26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--linea)}
.ses-g > div{padding:22px 24px;border-right:1px solid var(--linea)}
.ses-g > div:last-child{border-right:0}
.ses-g .s{font-size:13.5px;font-weight:500;color:var(--terra)}
.ses-g b{display:block;font-family:Lora;font-size:19px;color:var(--navy);font-weight:600;margin:6px 0 10px}
.ses-g ol{list-style:none;margin:0;padding:0;font-size:15.5px;line-height:1.5}
.ses-g li{padding:5px 0;display:grid;grid-template-columns:22px 1fr;gap:8px}
.ses-g li em{font-style:normal;font-family:Lora;font-weight:600;color:var(--gris)}
.ses-g a{color:var(--ink);text-decoration:none} .ses-g a:hover{color:var(--terra)}
.arranca{margin-top:44px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.arranca a{font-size:17px;font-weight:500;color:#fff;background:var(--terra);padding:15px 28px;text-decoration:none}
.arranca a:hover{background:var(--navy)}
.arranca span{font-size:15.5px;color:var(--gris)}

/* glosario */
.gl{font:inherit;color:inherit;background:transparent;border:0;padding:0;cursor:help;
    border-bottom:1.5px dotted var(--terra)}
.gl-pop{position:fixed;z-index:60;max-width:330px;background:var(--navy);color:#fff;padding:14px 16px;
        font-size:15px;line-height:1.5;display:none}
.gl-pop b{display:block;font-family:Lora;font-size:16px;color:#F2C9B3;margin-bottom:5px}
.gl-pop.on{display:block}

/* ══ adaptaciones ══ */
@media (max-width:1180px){
  :root{--side:250px} .wrap{padding:0 36px 80px} .pasos{margin:0 -36px;padding:0 36px}
  .portada .foto{margin:0 -36px} .portada .foto figcaption{margin:10px 36px 0}
  .hero{grid-template-columns:1fr} .hero .tt{padding:32px 0 8px}
  .grid,.ej,.bld{grid-template-columns:minmax(0,1fr);gap:28px}
  ol.ideas{grid-template-columns:1fr;gap:18px}
  ol.hazlo > li{grid-template-columns:1fr;gap:22px}
  .previo,.ses-g{grid-template-columns:1fr}
  .previo > div,.ses-g > div{border-right:0;border-bottom:1px solid var(--linea)}
  .reglas{grid-template-columns:1fr;gap:20px}
  .bld-out{position:static}
}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  aside.nav{position:static;height:auto;padding:18px 24px}
  .nav ol,.nav .pie,.nav .av .paso{display:none}
  .nav .nav-btn{display:block}
  .nav > ol.open{display:block;margin-top:12px}
  .nav > ol.open::before{display:none}
  .nav > ol.open li a{padding:11px 8px;min-height:44px}
  .nav .guard{display:none}
  .nav .guianav{display:none}
  .ejcab dl{grid-template-columns:1fr;gap:10px}
  .wrap{padding:0 20px 60px} .portada .foto{margin:0 -20px} .portada .foto figcaption{margin:10px 20px 0}
  .pasos{margin:0 -20px;padding:0 20px;overflow-x:auto} .pasos a{padding-right:0;margin-right:22px}
  body{font-size:17px}
  .hz-c{padding-left:0}
  .producto{grid-template-columns:1fr;padding:26px 24px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{
  aside.nav,.pasos,.video,.cierre{display:none}
  .app{display:block} .wrap{max-width:none;padding:0}
  .fallas details{display:block} .fallas .r{display:block!important}
}

/* ══ reloj del SEIA y siete preguntas (estación 4) ══ */
ol.reloj{list-style:none;margin:24px 0 0;padding:0;counter-reset:r;border-top:1px solid var(--linea)}
ol.reloj li{counter-increment:r;position:relative;padding:16px 0 16px 54px;border-bottom:1px solid var(--linea);font-size:16px;line-height:1.55}
ol.reloj li::before{content:counter(r);position:absolute;left:0;top:14px;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;
                    font-family:Lora;font-weight:700;font-size:16px;display:grid;place-items:center}
ol.reloj li b{color:var(--navy)}
ol.reloj li .q{display:block;margin-top:4px;color:var(--terra);font-weight:500}
ol.reloj li em{display:block;margin-top:3px;font-style:normal;color:var(--gris);font-size:15px}
ol.siete{list-style:none;margin:20px 0 0;padding:0;counter-reset:s7;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
ol.siete li{counter-increment:s7;position:relative;padding:10px 0 10px 40px;border-top:1px solid var(--linea);font-size:16px;line-height:1.5}
ol.siete li::before{content:counter(s7);position:absolute;left:0;top:9px;font-family:Lora;font-weight:700;font-size:24px;color:var(--terra);line-height:1}
ol.siete li b{color:var(--navy)}
@media (max-width:820px){ol.siete{grid-template-columns:1fr}}

/* ══ diagramas de la ruta del expediente (estación 4) ══ */
:root{--line-strong:#C3C8CF}
.dg-box{fill:var(--papel);stroke:#C3C8CF;stroke-width:1.2}
.dg-box.on{fill:var(--navy);stroke:var(--navy)}
.dg-box.off{fill:var(--hueso);stroke:#C3C8CF;stroke-dasharray:5 4}
.dg-t{font-family:Lora;font-weight:600;font-size:17px;fill:var(--navy)}
.dg-t.inv{fill:#fff}
.dg-s{font-family:Poppins;font-weight:400;font-size:13px;fill:var(--gris)}
.dg-l{stroke:#C3C8CF;fill:none;stroke-width:1.5}
.dg-lab{font-family:Poppins;font-weight:500;font-size:11px;letter-spacing:.08em;fill:var(--terra)}
.dg-si{font-family:Poppins;font-weight:500;font-size:12px;fill:var(--verde)}
.dg-no{font-family:Poppins;font-weight:500;font-size:12px;fill:var(--terra)}

/* ══ perfil interactivo del valle (estación 3) ══ */
figure.fig svg#tr{touch-action:none;cursor:ew-resize}
.tr-suelo{fill:#EDEBE3}.tr-g{stroke:#D9D9D2;stroke-width:1;stroke-dasharray:4 5}
.tr-z{font-family:Poppins;font-size:12px;fill:#9CA3AF}
.tr-ab{font-family:Poppins;font-size:13px;font-weight:500;fill:var(--navy)}
.tr-sc{stroke:var(--navy);stroke-width:1.5}
.tr-sup{fill:none;stroke:var(--navy);stroke-width:1.6}
.tr-chacra{fill:var(--verde);opacity:.85}.tr-veg{fill:#A8B78F;opacity:.8}
.tr-agua{fill:#DCE7F3;stroke:var(--azul);stroke-width:1}
.tr-puk{fill:#D9CFB8;stroke:var(--navy);stroke-width:1.2}
.tr-canal{fill:var(--azul)}.tr-casa{fill:var(--ink)}.tr-camino{fill:#9CA3AF}
.tr-t{font-family:Poppins;font-size:15px;fill:var(--gris)}
.tr-m circle{fill:var(--terra);stroke:#fff;stroke-width:3}
.tr-m line{stroke:var(--terra);stroke-width:1.5;stroke-dasharray:3 3}
#trr{display:block;width:100%;margin:8px 0 0;accent-color:var(--terra)}
.lee-wrap{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:32px;align-items:start;margin-top:22px}
.lee{min-height:5em}
.lee b{font-family:Lora;font-size:24px;color:var(--navy);font-weight:600;display:block}
.lee p{margin-top:8px;font-size:17px} .lee p span{color:var(--gris)}
svg.loc{width:220px;height:220px;display:block;border:1px solid var(--linea)}
.lc-bg{fill:#F3F1EA}.lc-cul{fill:#A8B78F}.lc-con{fill:var(--ink)}
.lc-rio{fill:none;stroke:var(--azul);stroke-width:22}
.lc-lin{fill:none;stroke:var(--terra);stroke-width:26;stroke-dasharray:70 40}
.lc-puk{fill:none;stroke:var(--terra);stroke-width:18}
.lc-t{font-family:Poppins;font-size:150px;font-weight:500;fill:var(--terra)}
.lc-n{font-family:Poppins;font-size:120px;fill:var(--gris)}.lc-nf{fill:var(--gris)}
/* antes y después */
.ad{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.ad .lab{font-size:13.5px;font-weight:500;color:var(--terra);margin-bottom:8px}
.ad pre{margin:0;font:inherit;font-size:16px;line-height:1.6;white-space:pre-wrap;background:var(--papel);
        border:1px solid var(--linea);border-left:3px solid var(--verde);padding:16px 18px}
.ad pre.bad{border-left-color:var(--terra);color:var(--gris)}
.ad p{margin-top:12px;font-size:15.5px;color:var(--gris);line-height:1.6}
p.nota-p{margin-top:14px;font-size:15.5px;color:var(--gris)}
@media (max-width:1180px){.lee-wrap,.ad{grid-template-columns:1fr}}
@media (max-width:820px){.tr-t{font-size:28px}.tr-z,.tr-ab{font-size:24px}.tr-m circle{r:16}}

/* ── kit de documentos ── */
.kitnav{margin:18px 22px 0;padding:14px 16px;border:1px solid var(--terra);background:var(--papel)}
.kitnav a{display:block;font-family:Lora;font-weight:600;font-size:16px;color:var(--terra);text-decoration:none}
.kitnav a:hover{text-decoration:underline}
.kitnav span{display:block;margin-top:4px;font-size:12.5px;color:var(--gris)}
.kitnota{margin-bottom:24px}
.hero.kit{display:block;margin-bottom:8px}
.hero.kit .tt{padding:0}
ol.kit{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--linea)}
ol.kit>li{display:grid;grid-template-columns:54px minmax(0,1fr) 150px;gap:20px;align-items:start;
          padding:20px 0;border-bottom:1px solid var(--linea)}
ol.kit .kn{font-family:Lora;font-weight:700;font-size:24px;color:var(--terra);line-height:1.1}
ol.kit h3{font-size:18.5px;font-weight:600;margin:0 0 6px;color:var(--navy)}
ol.kit p{font-size:15.5px;line-height:1.55;color:var(--gris);margin:0}
ol.kit .kmeta{margin-top:7px;font-size:13px;color:var(--gris)}
ol.kit .kd a{display:inline-block;padding:9px 16px;border:1px solid var(--navy);color:var(--navy);
             text-decoration:none;font-size:14.5px;font-weight:500}
ol.kit .kd a:hover{background:var(--navy);color:#fff}
.g-help{font-size:15.5px;color:var(--gris)}
.full > p + p,.full > p + .reglas,.full > .reglas + p{margin-top:14px}
.guianav{margin-top:10px;border-color:var(--linea)} .guianav a{color:var(--navy)}
.autonav{border-color:var(--navy);background:var(--hueso)} .autonav a{color:var(--navy)}
.guia-imp{margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
          padding:24px 28px;background:var(--papel);border:1px solid var(--linea)}
.guia-imp b{font-family:Lora;font-size:19px;color:var(--navy);font-weight:600}
.guia-imp p{margin:6px 0 0;font-size:15.5px;color:var(--gris);line-height:1.55}
.guia-imp a{display:inline-block;padding:13px 22px;border:1.5px solid var(--navy);color:var(--navy);text-decoration:none;font-weight:500;font-size:15.5px;white-space:nowrap}
.guia-imp a:hover{background:var(--navy);color:#fff}
@media (max-width:760px){.guia-imp{grid-template-columns:1fr}}
@media (max-width:760px){
  ol.kit>li{grid-template-columns:40px minmax(0,1fr)}
  ol.kit .kd{grid-column:2}
}