/* pg-estudio: deslizador con consecuencia visible. Tinta, blanco y cian. */
.pg-cmp:not(.pe){display:none!important}
.pe{--v:0;--fdato:0;--ftexto:0;--fboton:0;--ferror:0;--c:#A3EFF4;--c2:#22D3EE;margin-top:clamp(36px,4.5vw,72px);padding:clamp(18px,3vw,40px);border-radius:26px;background:#0A0B10;color:#fff;box-shadow:0 40px 80px -50px rgba(10,11,16,.8);font-family:Manrope,system-ui,sans-serif;min-width:0}
.pe *{box-sizing:border-box}
.pe-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;align-items:baseline}
.pe-h span{font:700 12px/1.3 Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.pe-h b{font:600 clamp(18px,1.8vw,24px)/1.2 Manrope,system-ui,sans-serif;letter-spacing:-.02em}
.pe-top{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(20px,2.5vw,32px)}
@media(min-width:900px){.pe-top{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}}
/* pantalla de ejemplo */
.pe-scr{background:#fff;color:#0A0B10;border-radius:16px;padding:16px;display:grid;gap:14px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 50px -24px rgba(34,211,238,.35);min-width:0}
.pe-tb{display:flex;align-items:center;gap:8px;font:700 13px/1 Manrope,system-ui,sans-serif}
.pe-tb i{width:18px;height:18px;border-radius:50%;background:#0A0B10;box-shadow:inset -5px -5px 0 var(--c2)}
.pe-tb em{margin-left:auto;width:34px;height:6px;border-radius:3px;background:#dfe8ee}
.pe-scr [data-s]{position:relative;border-radius:10px}
.pe-t{margin:0;font:700 clamp(17px,2vw,21px)/1.25 Manrope,system-ui,sans-serif;letter-spacing:-.02em;display:grid}
.pe-t>span,.pe-row b>span,.pe-msg>span{grid-area:1/1}
.pe-t .bad{white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:68%;opacity:calc(1 - var(--ftexto))}
.pe-t .gd{opacity:var(--ftexto)}
.pe-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#F4F8FA;font:500 14px/1.2 Manrope,system-ui,sans-serif}
.pe-row b{display:grid;font:700 16px/1.2 Manrope,system-ui,sans-serif;text-align:right;justify-items:end}
.pe-row .bad{color:#0E7490;font-weight:700;opacity:calc(1 - var(--fdato))}.pe-row .bad::before{content:"!";display:inline-grid;place-items:center;width:16px;height:16px;margin-right:6px;border-radius:50%;background:#0A0B10;color:#A3EFF4;font:800 12px/1 Manrope,sans-serif}.pe-row .gd{opacity:var(--fdato)}
.pe-b{display:grid;place-items:center;height:46px;border-radius:12px;background:#0A0B10;color:#fff;font:700 15px/1 Manrope,system-ui,sans-serif;
 width:calc(100% - (1 - var(--fboton))*34px);transform:translate(calc((1 - var(--fboton))*26px),calc((1 - var(--fboton))*8px)) rotate(calc((1 - var(--fboton))*-3.5deg))}
.pe-msg{display:grid;min-height:38px}
.pe-msg span{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;font:600 13.5px/1.25 Manrope,system-ui,sans-serif}
.pe-msg i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;font-style:normal;font-weight:800;font-size:12px}
.pe-msg .bad{background:#0A0B10;color:#fff;opacity:calc(1 - var(--ferror))}.pe-msg .bad i{background:#A3EFF4;color:#0A0B10}
.pe-msg .gd{background:#e3fafc;color:#0A5560;opacity:var(--ferror)}.pe-msg .gd i{background:var(--c2);color:#0A0B10}
/* marca de fallo y de etapa elegida */
.pe-t::after,.pe-row b::after,.pe-b::after,.pe-msg::after{content:"";position:absolute;inset:-4px;border-radius:12px;border:2px dashed #22D3EE;pointer-events:none}
.pe-t::after{opacity:calc(1 - var(--ftexto))}.pe-row b::after{opacity:calc(1 - var(--fdato));inset:-3px -6px}.pe-b::after{opacity:calc(1 - var(--fboton));inset:-4px}.pe-msg::after{opacity:calc(1 - var(--ferror));inset:0}
.pe[data-sel="0"] .pe-row b,.pe[data-sel="1"] .pe-t,.pe[data-sel="1"] .pe-b,.pe[data-sel="2"] .pe-msg{outline:3px solid var(--c2);outline-offset:3px;animation:pe-hl 1.6s ease-in-out infinite}
@keyframes pe-hl{50%{outline-color:rgba(34,211,238,.25)}}
/* control y medidores */
.pe-cap{margin:0 0 6px;font:600 13px/1.4 Manrope,system-ui,sans-serif;color:rgba(255,255,255,.65)}
.pe-rng{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(10px,2vw,20px);align-items:center}
.pe-rng button{background:none;border:0;color:rgba(255,255,255,.6);font:600 13.5px/1.2 Manrope,system-ui,sans-serif;cursor:pointer;padding:12px 4px;min-height:44px;transition:color .3s}
.pe-rng button:hover,.pe-rng button.on{color:#fff}
.pe-rng input{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:grab;margin:0;touch-action:pan-y}
.pe-rng input::-webkit-slider-runnable-track{height:6px;border-radius:9px;background:linear-gradient(90deg,var(--c) calc(var(--v)*100%),rgba(255,255,255,.18) 0)}
.pe-rng input::-moz-range-track{height:6px;border-radius:9px;background:rgba(255,255,255,.18)}
.pe-rng input::-moz-range-progress{height:6px;border-radius:9px;background:var(--c)}
.pe-rng input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px rgba(163,239,244,.3),0 6px 16px rgba(0,0,0,.5)}
.pe-rng input::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px rgba(163,239,244,.3),0 6px 16px rgba(0,0,0,.5)}
.pe button:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.pe-rng input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #0A0B10,0 0 0 7px var(--c)}
.pe-rng input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px #0A0B10,0 0 0 7px var(--c)}
@media(max-width:560px){.pe-rng{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pe-rng input{grid-column:1/-1;grid-row:1}.pe-rng button:last-child{text-align:right}}
.pe-m{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
.pe-m li{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr) 54px;align-items:center;gap:10px;font:600 13.5px/1.2 Manrope,system-ui,sans-serif}
.pe-m li>span{color:rgba(255,255,255,.8)}
.pe-m i{display:block;height:8px;border-radius:5px;background:rgba(255,255,255,.14);overflow:hidden}
.pe-m u{display:block;height:100%;border-radius:5px;background:rgba(255,255,255,.62);transition:width .25s,background .25s}
.pe-m li[data-lv="1"] u{background:var(--c2)}.pe-m li[data-lv="3"] u{background:#fff}
.pe-m b{text-align:right;font-weight:700}
.pe-n{margin:14px 0 0;min-height:2.8em;font-size:clamp(15px,1.2vw,17px);line-height:1.5;color:rgba(255,255,255,.88)}
.pe-ill{margin:6px 0 0;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.55)}
.pe-ill em{font-style:normal;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:#0A0B10;background:var(--c);border-radius:99px;padding:3px 8px;margin-right:8px}
/* etapas */
.pe-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:clamp(22px,3vw,36px)}
.pe-tabs button{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;text-align:left;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;cursor:pointer;min-height:56px;transition:background .25s,border-color .25s}
.pe-tabs i{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.4);font:700 13px/1 Manrope,system-ui,sans-serif;font-style:normal}
.pe-tabs span{font:700 clamp(14px,1.3vw,16px)/1.2 Manrope,system-ui,sans-serif}
.pe-tabs small{font:500 12px/1.3 Manrope,system-ui,sans-serif;color:rgba(255,255,255,.6)}
.pe-tabs button[aria-pressed="true"]{background:rgba(163,239,244,.12);border-color:var(--c)}
.pe-tabs button[aria-pressed="true"] i{background:var(--c);border-color:var(--c);color:#0A0B10}
@media(max-width:560px){.pe-tabs{gap:6px}.pe-tabs button{grid-template-columns:1fr;padding:10px 8px;justify-items:start}.pe-tabs i{grid-row:auto;margin-bottom:6px}.pe-tabs small{display:none}}
.pe-dl{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:14px;padding:clamp(14px,2vw,22px);border-radius:16px;background:rgba(255,255,255,.05);align-items:center}
@media(min-width:700px){.pe-dl{grid-template-columns:minmax(0,260px) minmax(0,1fr)}}
.pe-dl.in .pe-tx{animation:pe-in .5s cubic-bezier(.2,.7,.2,1)}
@keyframes pe-in{from{opacity:0;transform:translateY(8px)}}
.pe-mini{position:relative;border-radius:12px;background:linear-gradient(160deg,#16303a,#0d1c24);padding:10px;max-width:320px;width:100%}
.pe-mi svg{display:block;width:100%;height:auto}
.pe-bd{position:absolute;top:8px;right:8px;padding:3px 9px;border-radius:99px;font:700 12px/1.4 Manrope,system-ui,sans-serif;letter-spacing:.04em;background:#fff;color:#0A0B10;transition:background .3s}.pe-bd::before{content:"!";display:inline-grid;place-items:center;width:14px;height:14px;margin-right:6px;border-radius:50%;background:#0A0B10;color:#fff;font-size:12px;line-height:1;vertical-align:1px}.pe-bd.si::before{content:"✓";background:#0A0B10;color:#A3EFF4}
.pe-bd.si{background:var(--c)}
.pe-tx h4{margin:0 0 8px;font:700 clamp(18px,1.7vw,22px)/1.2 Manrope,system-ui,sans-serif;letter-spacing:-.02em}
.pe-d{margin:0;font-size:clamp(14.5px,1.15vw,16px);line-height:1.55;color:rgba(255,255,255,.82)}
.pe-r{margin:12px 0 0;padding-left:12px;border-left:3px solid #fff;font-size:clamp(14px,1.1vw,15.5px);line-height:1.5;font-weight:600}
.pe-r.si{border-color:var(--c2);color:var(--c)}
/* miniaturas vivas */
.ln{transform-box:fill-box;transform-origin:left;animation:pe-ln 6s var(--d) infinite}
.br{transform-box:fill-box;transform-origin:bottom;animation:pe-br 6s var(--d) infinite}
@keyframes pe-ln{0%{transform:scaleX(0)}15%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes pe-br{0%{transform:scaleY(0)}18%,88%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.s1{animation:pe-s1 5s infinite}.s2{animation:pe-s2 5s infinite}
@keyframes pe-s1{0%,50%{opacity:1}56%,94%{opacity:0}100%{opacity:1}}
@keyframes pe-s2{0%,50%{opacity:0}56%,94%{opacity:1}100%{opacity:0}}
.cu{animation:pe-cu 5s infinite}
@keyframes pe-cu{0%{transform:translate(112px,100px)}38%,52%{transform:translate(80px,69px)}60%,100%{transform:translate(112px,100px)}}
.rp{transform-box:fill-box;transform-origin:center;opacity:0;animation:pe-rp 5s infinite}
@keyframes pe-rp{0%,40%{opacity:0;transform:scale(.4)}44%{opacity:.9;transform:scale(.8)}56%,100%{opacity:0;transform:scale(2.6)}}
.pr{transform-box:fill-box;transform-origin:left;animation:pe-pr 5s infinite}
@keyframes pe-pr{0%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
.pe-on{animation:pe-on 5s infinite}
@keyframes pe-on{0%,56%{opacity:0;transform:translateY(5px)}66%,92%{opacity:1;transform:none}100%{opacity:0}}
.dt{animation:pe-dt 1.2s ease-in-out infinite}
@keyframes pe-dt{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){
 .pe *,.pe *::before,.pe *::after{animation:none!important;transition:none!important}
 .pe .cu{transform:translate(80px,69px)}.pe .s1{opacity:0}.pe .s2{opacity:1}.pe .rp{opacity:0}.pe .pe-on{opacity:1}
}

/* ===== agua viva dentro de la caja (canvas WebGL; la imagen queda de respaldo) ===== */
.est-ed .est-fig{position:relative}
.est-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1s ease;z-index:1}
.est-fig.gl-on .est-gl{opacity:1}
.est-ed .est-fig img{transition:opacity 1s ease}.est-fig.gl-on img{opacity:0}
.est-ed .est-h{position:relative;z-index:2}

/* ===== capacidades que entran con el scroll ===== */
.ec{margin-top:clamp(28px,3.5vw,52px);min-width:0}
.ec-k{margin:0 0 clamp(14px,1.8vw,22px);font:700 12px/1.3 Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#0E7C86}
.ec-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.ec-c{background:#fff;border-radius:20px;padding:clamp(14px,1.4vw,20px);box-shadow:0 0 0 1px rgba(10,11,16,.07),0 24px 40px -30px rgba(10,11,16,.35);min-width:0;display:flex;flex-direction:column}
.ec-c h3{margin:16px 0 6px;font:700 clamp(17px,1.4vw,19px)/1.25 Manrope,system-ui,sans-serif;letter-spacing:-.01em;color:#0A0B10}
.ec-c p{margin:0;font:500 14.5px/1.5 Manrope,system-ui,sans-serif;color:#3e3e3e}
.ec-m{height:124px;border-radius:14px;background:#0A0B10;display:grid;place-items:center;overflow:hidden;position:relative}
.ec-m svg{width:100%;height:100%;display:block}
.ec-m .a{fill:#3d5a66;transform-origin:left center}
.ec-m .ck{fill:none;stroke:#A3EFF4;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ec-m .ck2{fill:none;stroke:#0A0B10;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ec-m .ph{fill:#fff}.ec-m .in{fill:#0A0B10}.ec-m .gr{fill:#b9c6cd}.ec-m .bt{fill:#22D3EE}.ec-m .ok{fill:#A3EFF4}
.ec-m .tp{fill:none;stroke:#0A0B10;stroke-width:2;opacity:0}
.ec-m4{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 14px;align-items:stretch}
.ec-m4 span{font:600 12px/1.3 Manrope,system-ui,sans-serif;padding:7px 10px;border-radius:12px;max-width:86%}
.ec-m4 .u{align-self:flex-end;background:#1c2a31;color:#e8f4f6;border-bottom-right-radius:4px}
.ec-m4 .r{align-self:flex-start;background:#A3EFF4;color:#0A0B10;border-bottom-left-radius:4px}
.ec-m4 .b{align-self:flex-start;background:#1c2a31;display:flex;gap:4px;padding:8px 10px;border-bottom-left-radius:4px}
.ec-m4 .b i{width:5px;height:5px;border-radius:50%;background:#A3EFF4}
@media(max-width:1100px){.ec-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ec-l{grid-template-columns:1fr}}

/* entrada con el scroll (solo si el JS ha armado el bloque) */
.ec.on .ec-c{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*110ms)}
.ec.on .ec-c.in{opacity:1;transform:none}
/* mini ejemplos: se mueven cuando su tarjeta ya entró */
.ec-c.in .ec-m1 .a{animation:ecW 3.6s ease-in-out infinite}
.ec-c.in .ec-m1 .a:nth-of-type(2){animation-delay:.5s}.ec-c.in .ec-m1 .a:nth-of-type(3){animation-delay:1s}.ec-c.in .ec-m1 .a:nth-of-type(4){animation-delay:1.5s}
.ec-m1 .ck{stroke-dasharray:20;stroke-dashoffset:20}
.ec-c.in .ec-m1 .ck{animation:ecK 3.6s ease-in-out infinite}.ec-c.in .ec-m1 .ck:nth-of-type(2){animation-delay:1s}
.ec-c.in .ec-m2 .bt{animation:ecB 3s ease-in-out infinite}
.ec-c.in .ec-m2 .tp{animation:ecT 3s ease-in-out infinite}
.ec-m3 .ok,.ec-m3 .ck2{opacity:0}
.ec-c.in .ec-m3 .ok,.ec-c.in .ec-m3 .ck2{animation:ecO 3.4s ease-in-out infinite}
.ec-m4 .u,.ec-m4 .b,.ec-m4 .r{opacity:0}
.ec-c.in .ec-m4 .u{animation:ecU 6s ease infinite}
.ec-c.in .ec-m4 .b{animation:ecBb 6s ease infinite}
.ec-c.in .ec-m4 .r{animation:ecR 6s ease infinite}
.ec-m4 .b i{animation:ecD 1s ease-in-out infinite}.ec-m4 .b i:nth-child(2){animation-delay:.15s}.ec-m4 .b i:nth-child(3){animation-delay:.3s}
@keyframes ecW{0%,10%{transform:scaleX(.15);opacity:.5}35%,100%{transform:scaleX(1);opacity:1}}
@keyframes ecK{0%,35%{stroke-dashoffset:20}50%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:20}}
@keyframes ecB{0%,40%,100%{transform:scale(1);fill:#22D3EE}50%{transform:scale(.94);fill:#A3EFF4}}
@keyframes ecT{0%,38%{opacity:0;transform:scale(.4)}48%{opacity:.8;transform:scale(1.2)}70%,100%{opacity:0;transform:scale(1.8)}}
@keyframes ecO{0%,25%{opacity:0}40%,85%{opacity:1}100%{opacity:0}}
@keyframes ecU{0%{opacity:0;transform:translateY(8px)}8%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ecBb{0%,14%{opacity:0}18%,36%{opacity:1}40%,100%{opacity:0}}
@keyframes ecR{0%,38%{opacity:0;transform:translateY(8px)}46%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ecD{0%,100%{opacity:.35}50%{opacity:1}}
.ec-m2 .bt,.ec-m2 .tp{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){
 .ec.on .ec-c{opacity:1!important;transform:none!important;transition:none}
 .ec-c *{animation:none!important}
 .ec-m1 .ck,.ec-m3 .ok,.ec-m3 .ck2,.ec-m4 .u,.ec-m4 .r{opacity:1;stroke-dashoffset:0}
}
/* Carla 13-nov: kicker y titular centrados */
.est-ed .est-h{text-align:center;justify-self:center;width:100%;max-width:min(1100px,100%)!important;margin-inline:auto}
.est-ed .est-h h2{margin-inline:auto;text-align:center}

/* Carla 13-nov: todo centrado */
.estudio .est-tx,.estudio .ec-k,.estudio .ec-c,.estudio .est-b{text-align:center}
.estudio .ec-c{align-items:center}
.estudio .ec-c h3,.estudio .ec-c p,.estudio .est-b p{margin-inline:auto}
.estudio .est-b p{max-width:42ch}
/* centrado: los 3 párrafos van en una sola columna centrada, no en 3 columnas */
html body .estudio .est-g{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2vw,28px);max-width:720px;margin-left:auto;margin-right:auto}
html body .estudio .est-b{width:100%;text-align:center}
html body .estudio .est-b p{margin-left:auto;margin-right:auto;text-align:center}

/* Carla 13-nov tg 61850: rótulo y titular centrados también en vertical dentro de la tarjeta de agua */
.est-ed .est-h{align-self:center!important;justify-self:center;padding-top:0!important;padding-bottom:0!important}

/* Carla 13-nov tg 62170: los tres bloques en una fila (escritorio) */
@media(min-width:900px){html body .estudio .est-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;max-width:1100px;width:100%;gap:0}
html body .estudio .est-b{width:auto;border:0;border-left:1px solid rgba(10,11,16,.12);padding:0 clamp(16px,2vw,32px);font-weight:400}
html body .estudio .est-b:first-child{border-left:0}
html body .estudio .est-b p{max-width:none;font-size:inherit;font-weight:inherit}}
html body .estudio .est-b p,html body .estudio .est-b:first-child p{font-weight:400!important;color:#3e3e3e!important;font-size:calc(clamp(17px,1.5vw,21px)*.84)!important;line-height:1.55}