/* ---- sistema visual compartido de páginas secundarias ---- */
.sub{padding-top:132px}
.sub__h{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);gap:clamp(32px,5vw,88px);align-items:end;padding-bottom:clamp(36px,5vh,60px)}
.sub__h .d2{margin-top:22px}
.crumb{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);display:flex;gap:10px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.crumb a:hover{color:var(--fg)}
.badge{display:inline-flex;align-items:center;gap:12px;margin-bottom:26px;padding:9px 18px 9px 14px;border:1px solid var(--line2);border-radius:999px;background:var(--s1)}
.badge img{height:18px;width:auto;opacity:.9}
.badge b{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);font-weight:500}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--sig);box-shadow:0 0 0 3px rgba(255,90,31,.18);flex:none}

/* banda de imagen del encabezado */
.shero{position:relative;height:clamp(280px,42vh,520px);overflow:hidden;background:var(--s1)}
.shero img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.shero.in img{opacity:1;transform:none}
.shero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,transparent 26%,transparent 72%,var(--bg) 100%)}

/* corte de imagen a todo lo ancho, con una línea encima */
.bleed{position:relative;height:clamp(340px,52vh,580px);overflow:hidden;overflow:clip;display:grid;align-items:center}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
.bleed.in img{opacity:1;transform:none}
.bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),rgba(10,7,6,.35) 22%,rgba(10,7,6,.35) 70%,var(--bg)),linear-gradient(90deg,rgba(10,7,6,.82),transparent 62%)}
.bleed__t{position:relative;z-index:2;max-width:20em;font-size:clamp(24px,2.6vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.1;margin:0}
.bleed__t span{color:var(--fg3)}
.bleed__s{position:relative;z-index:2;margin:14px 0 0;max-width:30em;color:var(--fg2);font-size:clamp(15.5px,1.15vw,18px);line-height:1.5}

/* tarjetas de gobierno / apoyo */
.gov{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:2px}
.gov div{background:var(--s1);padding:22px 20px 24px}
.gov b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.gov p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.5}

.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.steps3 div{background:var(--s1);padding:26px 24px 28px}
.steps3 .n{font:500 11px var(--mono);letter-spacing:.14em;color:var(--sig)}
.steps3 b{display:block;font-size:20px;font-weight:600;letter-spacing:-.025em;margin:16px 0 8px}
.steps3 p{margin:0;color:var(--fg2);font-size:15px;line-height:1.5}

.tt2{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.tt2>div{background:var(--s1);padding:28px 26px 30px}
.tt2 h3{margin:0 0 18px;font-size:clamp(20px,1.7vw,26px);font-weight:600;letter-spacing:-.025em}
.tt2 ul{list-style:none;margin:0;padding:0}
.tt2 li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--fg2)}
.tt2 li svg{width:15px;height:15px;color:var(--sig);flex:none;margin-top:4px}

.cta{position:relative;text-align:center;padding-block:clamp(80px,12vh,140px)}
.cta .yg{font-weight:700;font-stretch:76%;font-size:clamp(46px,7vw,120px);letter-spacing:-.05em;line-height:.95;margin:18px 0 20px}
.cta p{margin:0 auto 30px;color:var(--fg2);max-width:32em;font-size:clamp(16.5px,1.25vw,19px)}
.cta .hero__btns{justify-content:center}

@media (max-width:1180px){.steps3,.gov{grid-template-columns:1fr 1fr}}
/* la leyenda de estados alinea el punto con la primera línea */
.legend span{align-items:flex-start}
.legend i{margin-top:3px;flex:none}

@media (max-width:820px){
 .sub{padding-top:104px}
 .sub__h,.tt2,.steps3,.gov{grid-template-columns:1fr}
 .shero{height:212px}
 .shero img{object-position:68% 50%}
 /* en móvil la imagen va arriba y el texto abajo, nunca encimados */
 .bleed{display:block;height:auto;padding-bottom:8px}
 .bleed img{position:relative;inset:auto;height:208px;object-position:62% 50%;-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);mask-image:linear-gradient(180deg,#000 58%,transparent);transform:none}
 .bleed::after{display:none}
 .bleed__t{margin-top:-18px}
}
@media (prefers-reduced-motion:reduce){.shero img,.bleed img{opacity:1;transform:none;transition:none}}

@media (max-width:560px){.erpwall{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.erpwall>a:not(.mk){height:92px;padding:10px 6px;gap:9px;border-radius:12px}.erpwall>a:not(.mk) .lg img{max-height:20px;max-width:100%}.erpwall>a:not(.mk) .tx{font-size:13px}.erpwall>a:not(.mk) b{font-size:8.5px;letter-spacing:.06em}.erpwall i{right:8px;top:8px;width:5px;height:5px}}
































































































































































































































































































































































































































































































































/* ================= bloques de páginas ================= */
.sub--nb .sub__h{border-bottom:0}
.lab+.d2{margin-top:22px}
.h2c{max-width:none}
/* tarjetas */
.cards{display:grid;grid-template-columns:repeat(var(--c,3),1fr);gap:2px}
.cards article{background:var(--s1);padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;transition:background .25s}
.cards article:hover{background:var(--s2)}
.cards .n{font:500 10.5px var(--mono);letter-spacing:.14em;color:var(--sig)}
.cards h3{margin:4px 0 0;font-size:clamp(18px,1.4vw,21px);font-weight:600;letter-spacing:-.025em;line-height:1.2}
.cards p{margin:0;color:var(--fg3);font-size:15px;line-height:1.5}
/* pasos */
.stp4{display:grid;grid-template-columns:repeat(var(--c,4),1fr);gap:2px;counter-reset:s}
.stp4 div{background:var(--s1);padding:26px 24px 28px;position:relative}
.stp4 div::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:500 11px var(--mono);letter-spacing:.14em;color:var(--sig)}
.stp4 div::after{content:"";position:absolute;left:24px;right:24px;top:52px;height:1px;background:var(--line2)}
.stp4 b{display:block;font-size:19px;font-weight:600;letter-spacing:-.025em;margin:30px 0 8px}
.stp4 p{margin:0;color:var(--fg3);font-size:15px;line-height:1.5}
/* imagen + lista */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.split.rev>figure{order:2}
.split figure{margin:0;position:sticky;top:100px;aspect-ratio:4/5;overflow:hidden;background:var(--s1)}
.split figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease)}
.split figure.in img,.split .rv.in img{transform:none}
.split ol{list-style:none;margin:0;padding:0;counter-reset:i;border-top:1px solid var(--line)}
.split li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:22px 0;border-bottom:1px solid var(--line)}
.split li::before{counter-increment:i;content:counter(i,decimal-leading-zero);font:500 11px var(--mono);letter-spacing:.12em;color:var(--sig);padding-top:5px}
.split li b{display:block;font-size:18.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.split li p{margin:0;color:var(--fg3);font-size:15px;line-height:1.5}
.split .lead{margin-top:18px}
/* cifras */
.stats{display:grid;grid-template-columns:repeat(var(--c,3),1fr);gap:2px}
.stats div{background:var(--s1);padding:30px 26px 28px;display:flex;flex-direction:column;gap:12px}
.stats b{font-size:clamp(40px,4.6vw,74px);font-weight:700;letter-spacing:-.05em;line-height:.95;font-stretch:90%}
.stats b small{font:500 12px var(--mono);letter-spacing:.1em;color:var(--fg3);margin-left:8px;font-stretch:100%}
.stats p{margin:0;color:var(--fg2);font-size:15px;line-height:1.45}
.stats span{margin-top:auto;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sig)}
/* conversación */
.chatb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.chatw{background:#0D0A09;border:1px solid var(--line2);border-radius:22px;overflow:hidden;box-shadow:0 34px 70px -30px rgba(0,0,0,.9)}
.chatw header{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(247,240,235,.02)}
.chatw header span{width:34px;height:34px;border-radius:50%;background:var(--s3);display:grid;place-items:center;font:600 11.5px var(--sans);color:var(--fg2)}
.chatw header b{font-size:14px}
.chatw header small{display:block;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
.chatw header img{margin-left:auto;height:18px}
.chatw .bd{display:flex;flex-direction:column;gap:9px;padding:20px 18px 24px}
.chatw p{margin:0;max-width:86%;padding:10px 14px 11px;border-radius:16px;font-size:15px;line-height:1.42;opacity:0;transform:translateY(6px)}
.chatw p.c{align-self:flex-start;background:var(--s3);border-bottom-left-radius:5px}
.chatw p.p{align-self:flex-end;background:rgba(255,123,48,.1);border:1px solid rgba(255,123,48,.3);border-bottom-right-radius:5px}
.chatw.in p{animation:rxin .36s var(--ease) both;animation-delay:calc(.2s + var(--i)*.45s)}
.chatb ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.chatb li{padding:18px 0;border-bottom:1px solid var(--line)}
.chatb li b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:5px}
.chatb li p{margin:0;color:var(--fg3);font-size:15px;line-height:1.5}
/* enlaces */
.lnk{display:grid;grid-template-columns:repeat(var(--c,3),1fr);gap:2px}
.lnk a{background:var(--s1);padding:24px 24px 26px;display:flex;flex-direction:column;gap:8px;position:relative;transition:background .25s}
.lnk a:hover{background:var(--s2)}
.lnk b{font-size:18px;font-weight:600;letter-spacing:-.02em;padding-right:28px}
.lnk p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.5}
.lnk svg{position:absolute;right:22px;top:26px;width:15px;height:15px;color:var(--sig);transition:transform .25s var(--ease)}
.lnk a:hover svg{transform:translateX(4px)}
@keyframes rxin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- integraciones: tabla de objetos ---------- */
.otab{border-top:1px solid var(--line2)}
.otab__r{display:grid;grid-template-columns:150px minmax(0,1.1fr) 170px minmax(0,1.4fr);gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.otab__r.h{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg4);padding:12px 0}
.otab__r .nd{font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.otab__r code{font:500 13px var(--mono);color:var(--fg);background:rgba(247,240,235,.05);border:1px solid var(--line2);border-radius:6px;padding:4px 8px;justify-self:start;max-width:100%;overflow-wrap:anywhere}
.otab__r .rw{justify-self:start;white-space:nowrap;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line2);border-radius:5px;padding:4px 7px;color:var(--fg3)}
.otab__r .rw.w{color:var(--sig);border-color:rgba(255,123,48,.45)}
.otab__r p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.45}
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.spec div{background:var(--s1);padding:22px 22px 24px}
.spec small{display:block;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg4);margin-bottom:10px}
.spec b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.spec p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.5}
.reqs{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:2px}
.reqs li{background:var(--s1);padding:16px 20px;display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--fg2);line-height:1.45}
.reqs li svg{width:14px;height:14px;color:var(--sig);flex:none;margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{border:1px solid var(--line2);border-radius:999px;padding:9px 16px;font-size:14px;color:var(--fg2);transition:border-color .2s,color .2s,background .2s}
.chips a:hover{border-color:var(--fg);color:var(--fg);background:var(--s1)}
.erpbadge{display:inline-flex;align-items:center;gap:12px;margin-bottom:26px;padding:9px 18px 9px 14px;border:1px solid var(--line2);border-radius:999px;background:var(--s1)}
.erpbadge img{height:18px;width:auto;opacity:.92}
.erpbadge em{font-style:normal;font-weight:600;font-size:15px;white-space:nowrap}
.erpbadge b{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);font-weight:500}
.erpbadge i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--fg3);box-shadow:0 0 0 3px rgba(247,240,235,.1)}
.erpbadge i.c{background:var(--sig);box-shadow:0 0 0 3px rgba(255,90,31,.18)}

/* recorrido con ficha (compartido por las páginas de ERP) */
.oflow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(36px,5vw,84px);align-items:start}
.osteps{border-top:1px solid var(--line)}
.ost{display:grid;grid-template-columns:118px minmax(0,1fr);gap:clamp(18px,2.4vw,36px);align-items:start;padding:clamp(24px,3.2vh,34px) 0;border-bottom:1px solid var(--line)}
.ost__s{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);padding-top:6px;transition:color .35s}
.ost.on .ost__s{color:var(--sig)}
.ost h3{margin:0;font-size:clamp(19px,1.5vw,23px);font-weight:600;letter-spacing:-.025em;line-height:1.25}
.ost .oin{margin-top:12px;background:var(--s1);border-left:2px solid var(--sig);padding:12px 16px}
.ost .oin b{display:block;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin-bottom:6px}
.ost .oin p{margin:0;color:var(--fg2);font-size:14.5px;line-height:1.5}
.opan{position:sticky;top:112px}
.oq{background:linear-gradient(165deg,#100C0A,#0A0807);border:1px solid var(--line2);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.oq__b{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.28);min-height:44px}
.oq__b img{height:15px;width:auto;opacity:.85}
.oq__b em{font-style:normal;font-weight:600;font-size:13.5px}
.oq__b span{margin-left:auto;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg4)}
.oq__h{padding:16px 18px 14px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:12px}
.oq__h b{font-size:20px;font-weight:700;letter-spacing:-.03em}
.oq__h i{font-style:normal;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:6px;border:1px solid var(--line2);color:var(--fg3);margin-left:auto;transition:color .3s,border-color .3s,background .3s}
.oq__h i.ok{color:var(--sig);border-color:rgba(255,123,48,.4);background:rgba(255,123,48,.1)}
.oq__m{padding:12px 18px;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;border-bottom:1px solid var(--line);font-size:12.5px}
.oq__m dt{font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg4);align-self:center}
.oq__m dd{margin:0;color:var(--fg2);min-height:16px}
.oq__l{padding:6px 0 10px}
.oq__r{display:grid;grid-template-columns:1fr 54px 76px;gap:12px;padding:9px 18px;font-size:12.5px;align-items:center;opacity:0;transform:translateY(6px);transition:opacity .38s var(--ease),transform .38s var(--ease)}
.oq__r.on{opacity:1;transform:none}
.oq__r em{font-style:normal;display:block;font:500 9.5px var(--mono);letter-spacing:.08em;color:var(--fg4);margin-top:2px}
.oq__r s,.oq__r u{text-decoration:none;text-align:right;color:var(--fg2);font-variant-numeric:tabular-nums}
.oq__hd{display:grid;grid-template-columns:1fr 54px 76px;gap:12px;padding:8px 18px;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg4);border-bottom:1px solid var(--line)}
.oq__hd u,.oq__hd s{text-decoration:none;text-align:right}
.oq__f{border-top:1px solid var(--line);padding:13px 18px;display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.2)}
.oq__f small{font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg4)}
.oq__f b{margin-left:auto;font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .4s}
.oq__f b.on{opacity:1}
.oq__cap{margin:12px 2px 0;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg4)}

/* ---------- industrias ---------- */
.req3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.req3 article{background:var(--s1);padding:22px 22px 24px;display:flex;flex-direction:column;gap:16px}
.req3 .ch{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);border:1px solid var(--line2);border-radius:999px;padding:5px 10px}
.req3 .ch i{width:6px;height:6px;border-radius:50%;background:var(--sig)}
.req3 blockquote{margin:0;background:var(--s3);border-radius:16px 16px 16px 5px;padding:13px 15px;font-size:15.5px;line-height:1.4;color:var(--fg)}
.req3 .un{border-top:1px solid var(--line);padding-top:14px}
.req3 .un small,.req3 .ms small{display:block;font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg4);margin-bottom:8px}
.req3 .un ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.req3 .un li{display:flex;gap:8px;font-size:14px;color:var(--fg2);line-height:1.4;opacity:0}
.req3 .un li svg{width:13px;height:13px;color:var(--sig);flex:none;margin-top:3px}
.req3 article.in .un li{animation:rxin .34s var(--ease) both;animation-delay:calc(.5s + var(--i)*.14s)}
.req3 .ms{margin-top:auto;border-top:1px solid var(--line);padding-top:14px}
.req3 .ms p{margin:0;font-size:14px;color:var(--fg3);line-height:1.45}
.norms{display:grid;grid-template-columns:repeat(var(--c,3),1fr);gap:2px}
.norms div{background:var(--s1);padding:24px 22px 26px;display:flex;flex-direction:column;gap:10px}
.norms code{font:600 15px var(--mono);letter-spacing:.02em;color:var(--sig)}
.norms b{font-size:15.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.norms p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.5}
.altc{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);gap:0;align-items:stretch}
.altc>div{padding:28px 26px 30px;display:flex;flex-direction:column;gap:12px}
.altc .a1{background:var(--s1)}
.altc .a2{background:linear-gradient(160deg,rgba(255,123,48,.12),var(--s1) 60%);border:1px solid rgba(255,123,48,.28)}
.altc small{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg4)}
.altc .a2 small{color:var(--sig)}
.altc p{margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.4;font-weight:500;letter-spacing:-.015em}
.altc .a1 p{color:var(--fg3);text-decoration:line-through;text-decoration-color:rgba(247,240,235,.28)}
.altc>div.ar{display:grid;place-items:center;color:var(--sig);padding:0}
.altc .ar svg{width:22px;height:22px}
.altw{margin:2px 0 0;background:var(--s1);padding:20px 26px;color:var(--fg2);font-size:15.5px;line-height:1.5}
.altw b{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg4);margin-right:10px}
.crit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,72px);align-items:start}
.crit figure{margin:0;position:sticky;top:100px;aspect-ratio:1/1;overflow:hidden;background:var(--s1)}
.crit figure img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
/* índice de industrias */
.igrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.igrid a{background:var(--s1);display:flex;flex-direction:column;overflow:hidden;transition:background .25s}
.igrid a:hover{background:var(--s2)}
.igrid figure{margin:0;aspect-ratio:16/10;overflow:hidden}
.igrid figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.igrid a:hover figure img{transform:scale(1.04)}
.igrid .bd{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.igrid small{font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg4)}
.igrid b{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.igrid q{quotes:none;font-size:14px;color:var(--fg3);line-height:1.45}
.igrid .go{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--sig)}
.igrid .go svg{width:13px;height:13px}
.itabs{display:inline-flex;gap:2px;margin-bottom:22px;background:var(--s1);border-radius:999px;padding:4px}
.itabs button{appearance:none;border:0;background:transparent;color:var(--fg3);font:500 14px var(--sans);padding:9px 16px;border-radius:999px;cursor:pointer}
.itabs button.on{background:var(--fg);color:var(--bg)}
.igrid a.hid{display:none}

@media (max-width:1180px){
 .cards,.stats,.lnk,.norms{grid-template-columns:repeat(min(var(--c,3),2),1fr)}
 .stp4{grid-template-columns:1fr 1fr}
 .igrid{grid-template-columns:repeat(3,1fr)}
 .spec{grid-template-columns:1fr 1fr}
 .otab__r{grid-template-columns:130px minmax(0,1fr) 120px}
 .otab__r p{grid-column:1/-1}
 .otab__r.h span:last-child{display:none}
}
@media (max-width:1040px){.oflow{grid-template-columns:1fr}.opan{display:none}}
@media (max-width:900px){
 .split,.chatb,.crit{grid-template-columns:1fr}
 .split figure,.crit figure{position:relative;top:auto;aspect-ratio:16/10}
 .split.rev>figure{order:0}
 .req3{grid-template-columns:1fr}
 .igrid{grid-template-columns:1fr 1fr}
 .altc{grid-template-columns:1fr}
 .altc .ar{padding:10px 0;transform:rotate(90deg)}
}
@media (max-width:620px){
 .cards,.stats,.lnk,.norms,.stp4,.spec,.reqs{grid-template-columns:1fr}
 .igrid{grid-template-columns:1fr}
 .otab__r{grid-template-columns:minmax(0,1fr);gap:8px}
 .otab__r .nd{grid-column:1/-1;font-size:14px;color:var(--fg3);font-weight:500}
 .otab__r.h{display:none}
 .ost{grid-template-columns:1fr;gap:10px;padding:22px 0}
 .ost__s{padding-top:0}
}
@media (prefers-reduced-motion:reduce){.chatw p,.req3 .un li{opacity:1;transform:none;animation:none!important}}

.bleed::after{background:linear-gradient(180deg,var(--bg),rgba(10,7,6,.3) 22%,rgba(10,7,6,.3) 70%,var(--bg)),linear-gradient(90deg,rgba(10,7,6,.92),rgba(10,7,6,.55) 48%,transparent 78%)}
.bleed__t{max-width:17em}
.shero img{object-position:50% 38%}
@media (max-width:820px){.bleed::after{display:none}}

@media (max-width:620px){.erpbadge{flex-wrap:wrap;border-radius:16px;row-gap:6px}}
.tt2 li small.cond{display:block;margin-top:4px;font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3,#8a847d)}
/* v13: variedad de bloques */
.rows{border-top:1px solid var(--line2)}
.rows article{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 40px;padding:28px 0 30px;border-bottom:1px solid var(--line2);align-items:baseline}
.rows h3{margin:0;font-size:clamp(20px,1.9vw,27px);font-weight:600;letter-spacing:-.03em;line-height:1.15;text-wrap:balance}
.rows p{margin:0;color:var(--fg3);font-size:16px;line-height:1.55;max-width:62ch}
.srail{display:grid;grid-template-columns:repeat(var(--c,4),minmax(0,1fr));position:relative;margin-top:8px}
.srail::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:linear-gradient(90deg,var(--sig),var(--line2) 70%)}
.srail>div{position:relative;padding:36px 28px 0 0}
.srail>div::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--sig);box-sizing:border-box}
.srail>div:first-child::before{background:var(--sig)}
.srail b{display:block;font-size:19px;font-weight:600;letter-spacing:-.025em;margin:0 0 8px}
.srail p{margin:0;color:var(--fg3);font-size:15px;line-height:1.5}
.lnl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
.lnl a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 18px;padding:22px 0 24px;border-top:1px solid var(--line2);align-items:center}
.lnl b{font-size:19px;font-weight:600;letter-spacing:-.025em;transition:color .2s}
.lnl p{grid-column:1;margin:0;color:var(--fg3);font-size:14.5px;line-height:1.5}
.lnl svg{grid-row:1/3;grid-column:2;width:18px;height:18px;color:var(--sig);transition:transform .25s var(--ease)}
.lnl a:hover b{color:var(--sig)}
.lnl a:hover svg{transform:translateX(5px)}
.outc{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:40px 48px}
.outc>div{border-top:2px solid var(--sig);padding-top:22px}
.outc b{display:block;font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.035em;line-height:1.12;margin-bottom:10px;text-wrap:balance}
.outc p{margin:0;color:var(--fg3);font-size:15.5px;line-height:1.55}
.wall{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.wall a,.wall span{font:500 12.5px var(--mono);letter-spacing:.02em;padding:10px 14px;border:1px solid var(--line2);border-radius:999px;color:var(--fg2,#DAD1C9)}
.wall a:hover{border-color:var(--sig);color:var(--fg)}
.wall span.hi{border-color:var(--sig);color:var(--fg)}
@media (max-width:1000px){.srail{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}.srail::before{display:none}.outc{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
 .rows article{grid-template-columns:1fr;padding:22px 0}
 .srail{grid-template-columns:1fr;padding-left:28px;row-gap:26px}
 .srail::before{display:block;top:4px;bottom:4px;left:5px;right:auto;width:1px;height:auto;background:var(--line2)}
 .srail>div{padding:0}.srail>div::before{left:-28px;top:5px}
 .lnl{grid-template-columns:1fr}
 .outc{grid-template-columns:1fr;gap:28px}
}
.rq-ph{margin:0;align-self:flex-start;width:min(210px,70%);border-radius:14px 14px 14px 5px;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,#3a2a20,#15100D 70%);position:relative}
.rq-ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;padding:14px;box-sizing:border-box;filter:saturate(.9) contrast(1.05)}
.rq-ph figcaption{position:absolute;left:8px;bottom:6px;font:500 9px var(--mono);letter-spacing:.06em;color:rgba(247,240,235,.55)}
.rq-vn{display:flex;align-items:center;gap:10px;align-self:flex-start;width:min(260px,90%);background:var(--s3);border-radius:18px 18px 18px 5px;padding:8px 12px 8px 8px;box-sizing:border-box}
.rq-vn .pl{width:28px;height:28px;border-radius:50%;background:var(--sig);flex:none;display:grid;place-items:center}
.rq-vn .pl::before{content:"";margin-left:3px;border-left:8px solid var(--bg);border-top:5px solid transparent;border-bottom:5px solid transparent}
.rq-vn svg{flex:1;height:22px;min-width:0}.rq-vn rect{fill:rgba(247,240,235,.45)}
.rq-vn small{font:500 10px var(--mono);color:var(--fg3)}
.rq-vn+blockquote{font-size:14px;color:var(--fg2);font-style:italic}
.rq-at{display:flex;align-items:center;gap:10px;align-self:flex-start;border:1px solid var(--line2);border-radius:12px;padding:9px 12px;font:500 11.5px var(--mono);color:var(--fg2)}
.rq-at svg{width:18px;height:18px;fill:none;stroke:var(--sig);stroke-width:1.6;stroke-linejoin:round}
.cm-ph{display:block;width:160px;aspect-ratio:4/3;border-radius:10px;margin:0 0 8px;background:radial-gradient(120% 90% at 30% 20%,#3a2a20,#15100D 70%);overflow:hidden}
.cm-ph img{width:100%;height:100%;object-fit:contain;padding:10px;box-sizing:border-box}
.cm-vn{display:flex;align-items:center;gap:9px;margin:0 0 6px;min-width:190px}
.cm-vn .pl{width:24px;height:24px;border-radius:50%;background:var(--sig);flex:none;display:grid;place-items:center}
.cm-vn .pl::before{content:"";margin-left:2px;border-left:7px solid var(--bg);border-top:4px solid transparent;border-bottom:4px solid transparent}
.cm-vn svg{flex:1;height:18px;min-width:0}.cm-vn rect{fill:rgba(247,240,235,.45)}
.cm-vn em{font:500 10px var(--mono);font-style:normal;color:var(--fg3)}
.cm-tx{font-style:italic}
/* v14: bloques con imagen, orientados a resultados */
.bento{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:auto auto;gap:14px}
.bento figure{grid-row:1/3;margin:0;position:relative;border-radius:22px;overflow:hidden;min-height:540px;background:var(--s1)}
.bento figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bento figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,7,6,.92))}
.bento figcaption{position:absolute;left:28px;right:28px;bottom:26px;z-index:1}
.bento figcaption b{display:block;font-size:clamp(24px,2.3vw,34px);font-weight:600;letter-spacing:-.035em;line-height:1.08;margin-bottom:10px;text-wrap:balance}
.bento figcaption span{color:var(--fg2);font-size:15.5px;line-height:1.5}
.bento>div{background:var(--s1);border-radius:22px;padding:28px 26px;display:flex;flex-direction:column;justify-content:flex-end;min-height:250px;border:1px solid var(--line)}
.bento>div:nth-of-type(1){background:var(--sig);border-color:var(--sig)}
.bento>div:nth-of-type(1) b,.bento>div:nth-of-type(1) p{color:#0A0706}
.bento>div b{font-size:clamp(20px,1.7vw,25px);font-weight:600;letter-spacing:-.03em;line-height:1.12;margin-bottom:10px;text-wrap:balance}
.bento>div p{margin:0;color:var(--fg3);font-size:15px;line-height:1.5}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.trio article{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:var(--s1)}
.trio figure{margin:0;position:absolute;inset:0}
.trio figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.trio article:hover img{transform:scale(1.04)}
.trio article::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,6,.1) 30%,rgba(10,7,6,.94))}
.trio article>div{position:absolute;left:24px;right:24px;bottom:24px;z-index:1}
.trio .k,.duo .k,.ledg .k,.pair .k{display:inline-block;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sig)}
.trio h3{margin:10px 0 8px;font-size:clamp(20px,1.8vw,26px);font-weight:600;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
.trio p{margin:0;color:var(--fg2);font-size:15px;line-height:1.5}
.trio__more{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 0;color:var(--fg3);font-size:14.5px}
.trio__more i{font-style:normal;font:500 12px var(--mono);padding:8px 13px;border:1px solid var(--line2);border-radius:999px;color:var(--fg2)}
.pano figure{margin:0;border-radius:24px;overflow:hidden;width:100%;height:clamp(300px,40vw,560px)}
.pano figure img{width:100%;height:100%;object-fit:cover}
.pano__bar{position:relative;z-index:1;margin:-88px clamp(16px,4vw,56px) 0;background:var(--bg);border:1px solid var(--line2);border-radius:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.pano__bar>div{padding:28px 28px 30px}
.pano__bar>div+div{border-left:1px solid var(--line2)}
.pano__bar b{display:block;font-size:clamp(19px,1.6vw,23px);font-weight:600;letter-spacing:-.025em;line-height:1.15;margin-bottom:8px}
.pano__bar p{margin:0;color:var(--fg3);font-size:15px;line-height:1.5}
.stk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:start}
.stk figure{margin:0;position:sticky;top:110px;border-radius:24px;overflow:hidden;aspect-ratio:4/5}
.stk figure img{width:100%;height:100%;object-fit:cover}
.stk__l{margin-top:40px}
.stk__l>div{padding:30px 0;border-top:1px solid var(--line2)}
.stk__l h3{margin:0 0 10px;font-size:clamp(24px,2.4vw,36px);font-weight:600;letter-spacing:-.04em;line-height:1.06;text-wrap:balance}
.stk__l p{margin:0;color:var(--fg3);font-size:16px;line-height:1.55;max-width:46ch}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.duo figure{margin:0 0 22px;border-radius:22px;overflow:hidden;aspect-ratio:3/2}
.duo figure img{width:100%;height:100%;object-fit:cover}
.duo h3{margin:0 0 8px;font-size:clamp(22px,2.1vw,30px);font-weight:600;letter-spacing:-.035em;line-height:1.1;text-wrap:balance}
.duo p{margin:0;color:var(--fg3);font-size:16px;line-height:1.55;max-width:48ch}
.duo__more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;margin-top:var(--v2)}
.duo__more b{display:block;font-size:17px;font-weight:600;margin-bottom:6px}
.duo__more p{margin:0;color:var(--fg3);font-size:15px;line-height:1.5}
.ledg article{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;padding:26px 0;border-top:1px solid var(--line2)}
.ledg article:last-child{border-bottom:1px solid var(--line2)}
.ledg figure{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:3/2}
.ledg figure img{width:100%;height:100%;object-fit:cover}
.ledg h3{margin:8px 0 0;font-size:clamp(22px,2.2vw,32px);font-weight:600;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.ledg p{margin:0;color:var(--fg3);font-size:16px;line-height:1.55}
.wide figure{margin:0;position:relative;border-radius:24px;overflow:hidden;width:100%;height:clamp(320px,40vw,560px)}
.wide figure img{width:100%;height:100%;object-fit:cover}
.wide figure::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,7,6,.92) 20%,rgba(10,7,6,.2) 70%)}
.wide figcaption{position:absolute;z-index:1;left:clamp(24px,4vw,56px);top:50%;transform:translateY(-50%);max-width:30ch;font-size:clamp(26px,3vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1.04}
.wide figcaption span{display:block;color:var(--sig)}
.wide__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 36px;margin-top:34px}
.wide__g>div{padding-left:16px;border-left:2px solid var(--sig)}
.wide__g b{display:block;font-size:17.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.wide__g p{margin:0;color:var(--fg3);font-size:15px;line-height:1.5}
.eng__f{margin:0 0 34px;border-radius:24px;overflow:hidden;aspect-ratio:16/7}
.eng__f img{width:100%;height:100%;object-fit:cover}
.eng__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(24px,4vw,64px)}
.eng__g b{display:block;font-size:clamp(20px,1.8vw,26px);font-weight:600;letter-spacing:-.03em;line-height:1.12;margin-bottom:10px}
.eng__g p{margin:0;color:var(--fg3);font-size:15.5px;line-height:1.55}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
.pair figure{margin:0 0 24px;position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/10}
.pair figure img{width:100%;height:100%;object-fit:cover}
.pair figure .k{position:absolute;left:16px;top:16px;background:rgba(10,7,6,.78);backdrop-filter:blur(6px);padding:8px 12px;border-radius:999px}
.pair h3{margin:0 0 10px;font-size:clamp(22px,2.1vw,31px);font-weight:600;letter-spacing:-.035em;line-height:1.1;text-wrap:balance}
.pair p{margin:0;color:var(--fg3);font-size:16px;line-height:1.55;max-width:50ch}
.pair--ba article:first-child img{filter:grayscale(1) brightness(.7)}
.pair--ba article:first-child .k{color:var(--fg3)}
.icards{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:28px 22px}
.icards figure{margin:0 0 16px;border-radius:18px;overflow:hidden;aspect-ratio:3/2}
.icards figure img{width:100%;height:100%;object-fit:cover}
.icards h3{margin:0 0 6px;font-size:19px;font-weight:600;letter-spacing:-.025em}
.icards p{margin:0;color:var(--fg3);font-size:15px;line-height:1.5}
.fl2{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}
.fl2>div.rv{background:var(--s1);border:1px solid var(--line);border-radius:22px;padding:28px}
.fl2 h3{margin:0 0 18px;font-size:clamp(19px,1.6vw,23px);font-weight:600;letter-spacing:-.025em}
.fl2__c{display:flex;flex-wrap:wrap;gap:8px}
.fl2__c span{display:inline-flex;flex-direction:column;gap:3px;padding:10px 14px;border:1px solid var(--line2);border-radius:14px;font-size:14.5px;color:var(--fg2);line-height:1.35}
.fl2__c small{font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sig)}
.fl2__m{display:grid;place-items:center;gap:10px}
.fl2__m img{width:34px;height:34px}
.fl2__m i{width:1px;height:60px;background:linear-gradient(var(--sig),transparent)}
@media (max-width:1000px){
 .bento{grid-template-columns:1fr 1fr}.bento figure{grid-column:1/3;grid-row:auto;min-height:420px}
 .trio{grid-template-columns:1fr 1fr}.trio article:last-child{grid-column:1/3;aspect-ratio:16/9}
 .pano__bar{grid-template-columns:1fr;margin-top:-40px}.pano__bar>div+div{border-left:0;border-top:1px solid var(--line2)}
 .ledg article{grid-template-columns:220px 1fr}.ledg article p{grid-column:2}
 .wide__g{grid-template-columns:1fr 1fr}.eng__g{grid-template-columns:1fr}
 .fl2{grid-template-columns:1fr}.fl2__m{display:none}
}
@media (max-width:640px){
 .bento{grid-template-columns:1fr}.bento figure{grid-column:auto;min-height:380px}.bento>div{min-height:0}
 .trio{grid-template-columns:1fr}.trio article,.trio article:last-child{grid-column:auto;aspect-ratio:4/5}
 .pano figure{height:300px}.pano__bar{margin:-32px 10px 0}
 .stk{grid-template-columns:1fr}.stk figure{position:relative;top:0;aspect-ratio:4/3}
 .duo,.pair{grid-template-columns:1fr}.duo__more{grid-template-columns:1fr}
 .ledg article{grid-template-columns:1fr;gap:14px}.ledg article p{grid-column:auto}
 .wide figure{height:460px}.wide figure::after{background:linear-gradient(180deg,rgba(10,7,6,.2),rgba(10,7,6,.92) 70%)}.wide figcaption{top:auto;bottom:26px;transform:none}
 .wide__g{grid-template-columns:1fr}.icards{grid-template-columns:1fr}
}
.qt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end}
.qt small{display:block;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg4);margin-bottom:16px}
.qt__a blockquote{margin:0;font-size:clamp(30px,3.6vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1.02;color:var(--fg3);text-decoration:line-through;text-decoration-color:var(--sig);text-decoration-thickness:3px}
.qt__b{border-left:2px solid var(--sig);padding-left:28px}
.qt__b small{color:var(--sig)}
.qt__b p{margin:0;font-size:clamp(22px,2.2vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.15;text-wrap:balance}
.icards a{display:block;color:inherit}
.icards a .go{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sig)}
.icards a .go svg{width:13px;height:13px}
.icards a:hover img{transform:scale(1.04)}.icards img{transition:transform .6s var(--ease)}
@media (max-width:640px){.qt{grid-template-columns:1fr}}
.crit--r{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.crit--r figure{order:2}
.rqr article{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr);gap:clamp(20px,3vw,48px);padding:30px 0;border-top:1px solid var(--line2);align-items:start}
.rqr article:last-child{border-bottom:1px solid var(--line2)}
.rqr .q{display:flex;flex-direction:column;gap:14px}
.rqr blockquote{margin:0;font-size:clamp(19px,1.7vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.rqr small,.rqf small,.rqt small{display:block;font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg4);margin-bottom:10px}
.rqr .chp{display:flex;flex-wrap:wrap;gap:6px}.rqr .chp span{font-size:13.5px;color:var(--fg2);border:1px solid var(--line2);border-radius:999px;padding:6px 11px}
.rqr .m p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.5}
.rqr .ch,.rqf .ch,.rqt .ch{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);border:1px solid var(--line2);border-radius:999px;padding:5px 10px}
.rqr .ch i,.rqf .ch i,.rqt .ch i{width:6px;height:6px;border-radius:50%;background:var(--sig)}
.rqf{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
.rqf__big{background:var(--sig);color:#0A0706;border-radius:24px;padding:34px;display:flex;flex-direction:column;gap:18px}
.rqf__big .ch{color:#0A0706;border-color:rgba(10,7,6,.3)}.rqf__big .ch i{background:#0A0706}
.rqf__big blockquote{margin:0;font-size:clamp(26px,2.8vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1.08}
.rqf__big small{color:rgba(10,7,6,.6);margin:10px 0 0}
.rqf__big ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.rqf__big li{display:flex;gap:8px;font-size:15px}.rqf__big li svg{width:14px;height:14px;flex:none;margin-top:3px;color:#0A0706}
.rqf__sm{display:grid;gap:16px}
.rqf__sm article{background:var(--s1);border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:14px}
.rqf__sm blockquote{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.rqf__sm .ms{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.5}.rqf__sm .ms b{color:var(--sig);font-weight:500}
.rqt{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.rqt__h{position:sticky;top:110px}
.rqt__b{display:flex;flex-direction:column;gap:12px}
.rqt__c{align-self:flex-start;max-width:86%;background:var(--s3);border-radius:18px 18px 18px 5px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.rqt__c p{margin:0;font-size:16px;line-height:1.45}
.rqt__p{align-self:flex-end;max-width:86%;background:rgba(255,123,48,.09);border:1px solid rgba(255,123,48,.3);border-radius:18px 18px 5px 18px;padding:14px 18px;margin-bottom:14px}
.rqt__p small{color:var(--sig);margin-bottom:6px}.rqt__p p{margin:0;font-size:15px;line-height:1.5;color:var(--fg2)}
@media (max-width:1000px){.rqr article{grid-template-columns:1fr 1fr}.rqr .m{grid-column:1/3}.rqf,.rqt{grid-template-columns:1fr}.rqt__h{position:static}.crit--r{grid-template-columns:1fr}.crit--r figure{order:0}}
@media (max-width:640px){.rqr article{grid-template-columns:1fr}.rqr .m{grid-column:auto}.rqt__c,.rqt__p{max-width:100%}}

/* rqf v20: mensaje del cliente convertido en especificación (sin bloque naranja) */
.rqf{grid-template-columns:1fr}
.rqf__big{background:var(--s1);color:var(--fg);border:1px solid var(--line2);border-radius:24px;padding:clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.rqf__big .ch{color:var(--fg3);border-color:var(--line2)}.rqf__big .ch i{background:var(--sig)}
.rqf__q{display:flex;flex-direction:column;gap:16px}
.rqf__bub{align-self:flex-start;max-width:30em;background:var(--s3);border-radius:22px 22px 22px 6px;padding:20px 22px 14px}
.rqf__bub p{margin:0;font-size:clamp(21px,2vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.rqf__bub small{display:block;margin-top:10px;font:500 10px var(--mono);letter-spacing:.1em;color:var(--fg4);text-align:right}
.rqf__arr{width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--sig)}.rqf__arr svg{width:18px;height:18px}
.rqf__u{border-left:2px solid var(--sig);padding-left:clamp(18px,2vw,28px)}
.rqf__uh{display:flex;align-items:center;gap:10px;margin-bottom:14px}.rqf__uh img{height:16px;width:auto}.rqf__uh b{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2)}
.rqf__u dl{margin:0}
.rqf__u dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.rqf__u dt{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg4);padding-top:3px}
.rqf__u dd{margin:0;font-size:16px;color:var(--fg)}
.rqf__ok{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13.5px;color:var(--sig)}.rqf__ok svg{width:14px;height:14px}
.rqf__sm{grid-template-columns:repeat(2,minmax(0,1fr))}
.rqf__sm .ms{margin-top:auto}
.rqf__sm .rq-ph{width:112px;height:88px}.rqf__sm .rq-ph img{width:100%;height:100%;object-fit:contain;padding:8px}.rqf__sm .rq-ph figcaption{display:none}
@media (max-width:900px){.rqf__big{grid-template-columns:1fr}.rqf__arr{transform:rotate(90deg)}}
@media (max-width:760px){.rqf__sm{grid-template-columns:1fr}}

/* páginas legales */
.lgl{padding-bottom:clamp(48px,8vh,96px)}
.lgl__h{padding-bottom:clamp(28px,4vh,44px)}
.lgl__h .d2{margin-top:22px;font-size:clamp(34px,4vw,64px)}
.lgl__d{margin:18px 0 0;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3)}
.lgl__b{max-width:74ch;margin-top:clamp(28px,4vh,48px)}
.lgl__b section{padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line)}
.lgl__b h2{margin:0 0 14px;font-size:clamp(19px,1.6vw,24px);font-weight:600;letter-spacing:-.025em}
.lgl__b p{margin:0 0 12px;color:var(--fg2);font-size:16px;line-height:1.65}
.lgl__b p:last-child{margin-bottom:0}
.lgl__b ul{margin:6px 0 0;padding-left:20px;color:var(--fg2);font-size:16px;line-height:1.65}
.lgl__b li{margin-bottom:8px}

/* ---- bloques del informe: cifras con fuente, tabla de datos y prosa ---- */
.figs{display:grid;gap:2px;margin-top:clamp(24px,3.4vh,40px)}
.figs--3{grid-template-columns:repeat(3,1fr)}
.figs--4{grid-template-columns:repeat(4,1fr)}
.figs>div{background:var(--s1);border-top:2px solid var(--sig);padding:24px 22px 26px;display:flex;flex-direction:column;gap:10px}
.figs b{font-size:clamp(28px,3vw,44px);font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.figs p{margin:0;color:var(--fg2);font-size:14.5px;line-height:1.5}
.figs cite{margin-top:auto;padding-top:10px;font:500 10px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--fg4);font-style:normal;line-height:1.5}
@media (max-width:1000px){.figs--3,.figs--4{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.figs--3,.figs--4{grid-template-columns:1fr}.figs b{font-size:30px}}

.dtw{margin-top:var(--v3);overflow-x:auto}
.dt{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.dt th{text-align:left;padding:14px 18px 14px 0;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);border-bottom:1px solid var(--line2);white-space:nowrap;vertical-align:bottom}
.dt td{padding:16px 18px 16px 0;border-bottom:1px solid var(--line);color:var(--fg2);line-height:1.5;vertical-align:top}
.dt tbody tr:hover td{background:rgba(247,240,235,.022)}
.dt td:first-child{color:var(--fg);font-weight:600;letter-spacing:-.01em}
.dt td:last-child,.dt th:last-child{padding-right:0}
@media (max-width:620px){.dt{font-size:13.5px;min-width:480px}.dt td{padding:13px 14px 13px 0}}

.prose{max-width:72ch;margin-top:clamp(20px,2.8vh,34px)}
.prose p{margin:0 0 18px;color:var(--fg2);font-size:clamp(16px,1.2vw,17.5px);line-height:1.68}
.prose p:last-child{margin-bottom:0}
.prose p:first-child{color:var(--fg);font-size:clamp(17px,1.35vw,19.5px);line-height:1.6}

.isrc{margin-top:var(--v2);padding-top:0;color:var(--fg4);font-size:13px;line-height:1.65;max-width:90ch}
.isrc b{display:block;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);margin-bottom:8px}

.shotw{padding-top:clamp(30px,5vh,58px);padding-bottom:clamp(6px,1vh,14px)}
.shot{margin:0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(18px,2.6vw,38px);align-items:end}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:2px;filter:grayscale(1) contrast(1.06)}
.shot figcaption{padding-bottom:6px;border-top:1px solid var(--sig);padding-top:14px}
.shot figcaption b{display:block;font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--fg)}
.shot figcaption span{display:block;margin-top:9px;color:var(--fg3);font-size:14px;line-height:1.6}
.shot--rev{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
.shot--rev img{order:2}
.shot--rev figcaption{order:1}
@media (max-width:820px){.shot,.shot--rev{grid-template-columns:1fr;gap:16px;align-items:start}.shot--rev img{order:0}.shot--rev figcaption{order:0}.shot img{aspect-ratio:3/2}}

.qtw{padding-top:clamp(34px,5.5vh,64px);padding-bottom:clamp(10px,1.6vh,20px)}
/* el sitio trae reglas globales de figure (34x34, display:grid, aspect-ratio 16/9) que se filtran a cualquier <figure>; aqui se neutralizan una por una */
.qt{margin:0;width:auto;height:auto;max-width:78ch;display:block;aspect-ratio:auto;background:none;border-radius:0;overflow:visible;place-items:normal;border-left:2px solid var(--sig);padding-left:clamp(20px,3vw,40px)}
.qt blockquote{margin:0}
.qt blockquote p{margin:0;color:var(--fg);font-size:clamp(20px,2.1vw,29px);font-weight:500;line-height:1.34;letter-spacing:-.022em;text-wrap:balance}
.qt figcaption{margin-top:var(--v1);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.qt__lg{height:22px;width:auto;max-width:130px;object-fit:contain;opacity:.62;filter:grayscale(1)}
.qt figcaption b{font-size:14.5px;font-weight:600;color:var(--fg2);letter-spacing:-.01em}
.qt figcaption span{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
@media (max-width:620px){.qt{padding-left:16px}.qt blockquote p{font-size:19px;line-height:1.38}.qt figcaption{gap:10px}}

/* ---- prose con columna al lado -------------------------------------------
   El texto del bloque prose llega a 72ch y dejaba media pantalla vacía a la
   derecha. Con .prsw el bloque se parte en dos: la lectura a la izquierda y,
   al lado, una foto o la ficha del caso. La columna de al lado es sticky para
   que acompañe la lectura en textos largos.
   Las reglas globales de figure (34x34, display:grid, aspect-ratio 16/9) se
   filtran a cualquier <figure>, así que aquí se neutralizan una por una. */
.prsw{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(20px,2.8vh,34px)}
.prsw .prose{margin-top:0}
.prs__f{margin:0;width:auto;height:auto;display:block;aspect-ratio:auto;background:none;place-items:normal;position:sticky;top:110px}
.prs__f img{display:block;width:100%;aspect-ratio:auto;height:clamp(300px,33vw,450px);object-fit:cover;border-radius:18px}
.prs__f figcaption{margin-top:14px;color:var(--fg3);font-size:14px;line-height:1.5;max-width:44ch}
.prs__c{position:sticky;top:110px;border:1px solid var(--line2);border-radius:20px;padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.prs__lg{height:26px;width:auto;max-width:150px;object-fit:contain;opacity:.7;filter:grayscale(1)}
.prs__c b{font-size:clamp(19px,1.6vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.prs__c p{margin:0;color:var(--fg3);font-size:15px;line-height:1.6}
.prs__go{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sig);text-decoration:none}
.prs__go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.prs__go:hover{opacity:.75}
@media (max-width:900px){.prsw{grid-template-columns:1fr;gap:32px}.prs__f,.prs__c{position:static}.prs__f img{height:clamp(240px,58vw,340px)}}
/* la pieza sola sobre negro, al lado del texto. Mismo tratamiento que
   "Right product. Right now." de la portada. */
/* sin sticky a propósito: position:sticky crea un contexto de apilamiento y el
   mix-blend-mode de la pieza dejaría de ver el fondo de la página */
.prs__p{margin:0;width:auto;height:auto;display:block;aspect-ratio:auto;background:none;place-items:normal}
/* La pieza viene sobre negro puro (#000) y el fondo del sitio es #0A0706, así que
   la caja se notaba como un rectángulo más oscuro. Con screen el negro de la pieza
   deja pasar el fondo de la página y la pieza queda flotando, sin caja. */
.prs__vid{display:block;width:100%;height:clamp(300px,33vw,450px);object-fit:contain;background:transparent;border-radius:0;mix-blend-mode:screen}
.prs__p figcaption{margin-top:14px;color:var(--fg3);font-size:14px;line-height:1.5;max-width:44ch}
@media (max-width:900px){.prs__vid{height:clamp(240px,58vw,340px)}}

/* ---- el antes y el después --------------------------------------------------
   Dos columnas de texto. La izquierda es el trabajo que hoy hace una persona y
   va apagada; la derecha es lo que cambia. Sin palomitas, sin tabla: lo que
   distingue las columnas es el peso del texto, no un adorno. */
.ba{border-top:0}
.ba__h{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,72px);padding:14px 0 0}
.ba__h span{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg4)}
.ba__h span:last-child{color:var(--sig)}
.ba__r{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,72px);padding:22px 0;border-bottom:1px solid var(--line)}
.ba__r:last-child{border-bottom:1px solid var(--line2)}
.ba__a p,.ba__b p{margin:0;font-size:clamp(15px,1.15vw,16.5px);line-height:1.55}
.ba__a p{color:var(--fg4)}
.ba__b p{color:var(--fg)}
@media (max-width:760px){
 .ba__h{display:none}
 .ba__r{grid-template-columns:1fr;gap:10px;padding:20px 0}
 .ba__a p::before{content:var(--izq,"Antes") " · ";font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg4)}
 .ba__b p::before{content:var(--der,"Con Peaking") " · ";font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sig)}
}

/* ---- fuentes del informe, con su enlace ------------------------------------
   Antes era un párrafo de prosa sin un solo vínculo. Un motor generativo no
   puede seguir una fuente que no está enlazada, y esa es justo la señal que
   más pesa cuando decide a quién citar. */
.fnt{list-style:none;margin:var(--v2) 0 0;padding:0;counter-reset:fn}
.fnt li{counter-increment:fn;padding:16px 0 16px 46px;border-bottom:1px solid var(--line);position:relative;display:flex;flex-direction:column;gap:3px}
.fnt li::before{content:counter(fn,decimal-leading-zero);position:absolute;left:0;top:18px;font:500 10.5px var(--mono);letter-spacing:.08em;color:var(--fg4)}
.fnt b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.fnt span{color:var(--fg2);font-size:15px;line-height:1.5}
.fnt span a{color:var(--fg2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line3);transition:color .2s,text-decoration-color .2s}
.fnt span a:hover{color:var(--sig);text-decoration-color:var(--sig)}
.fnt em{font-style:normal;color:var(--fg4);font-size:13.5px;line-height:1.5}
.fnt__p{margin:20px 0 0;color:var(--fg4);font-size:13.5px;line-height:1.6;max-width:70ch}
/* los nombres enlazados dentro del párrafo de fuentes */
.isrc a{color:var(--fg3);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line3);transition:color .2s,text-decoration-color .2s}
.isrc a:hover{color:var(--sig);text-decoration-color:var(--sig)}
/* corte a sangre con foto a color: el velo se aclara y se recarga a la izquierda,
   para que el texto siga leyéndose sin apagar la imagen hasta volverla gris */
.bleed--color::after{background:linear-gradient(180deg,rgba(10,7,6,.55),rgba(10,7,6,.12) 26%,rgba(10,7,6,.12) 66%,rgba(10,7,6,.9)),linear-gradient(90deg,rgba(10,7,6,.9),rgba(10,7,6,.35) 48%,transparent 72%)}
/* ---- la prosa larga, en movil. Un capitulo del informe son seis u ocho
   parrafos seguidos: el hueco entre ellos tiene que valer un renglon completo
   o la columna se lee como un solo bloque. Y la entrada tiene que pesar mas
   que el cuerpo, que es lo que la hace entrada: la regla de cuerpo movil se la
   estaba comiendo igual que a los otros 215 titulares. */
@media (max-width:760px){
  .prose p{margin-bottom:26px}
  .prose>p:first-child:not(#_){font-size:18.5px;line-height:1.55;color:var(--fg)}
  .prose h3{margin-top:34px}
}
/* ---- El video del hero de caso, encima de su propia foto.
   La imagen se queda y sigue siendo el elemento LCP; el video entra en
   opacidad cero y aparece cuando de verdad empieza a reproducir. Si no
   arranca (movimiento reducido, ahorro de datos, 2G, modo de bajo consumo del
   telefono) la pagina se ve exactamente como hoy. */
.bhero__v{opacity:0;transition:opacity .7s var(--ease);z-index:1;pointer-events:none}
.bhero__v.on{opacity:1}
@media (prefers-reduced-motion:reduce){.bhero__v{display:none}}

/* el bloque de fichas: sustituye a la tabla de filas. N títulos a la vista y
   un solo texto, en vez de N párrafos apilados. */
.fch{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.32fr);gap:clamp(24px,3.4vw,58px);
  margin-top:var(--v3);align-items:start}
.fch__r{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.fch__t{position:relative;display:flex;align-items:baseline;gap:14px;width:100%;
  padding:clamp(15px,1.8vh,21px) 0 clamp(15px,1.8vh,21px) 16px;background:none;border:0;
  border-bottom:1px solid var(--line);text-align:left;cursor:pointer;color:var(--fg4);
  font-family:inherit;transition:color .22s}
.fch__t::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:2px;background:var(--sig);
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.fch__t.on::before{transform:scaleY(1)}
.fch__t:hover,.fch__t.on{color:var(--fg)}
.fch__t i{flex:none;font:500 10px var(--mono);letter-spacing:.1em;color:var(--fg4);font-style:normal}
.fch__t.on i{color:var(--sig)}
.fch__t span{font-size:clamp(16px,1.35vw,19.5px);font-weight:600;letter-spacing:-.022em;line-height:1.25}
.fch__p{position:relative;min-height:clamp(150px,20vh,210px);padding-top:6px;display:grid;align-content:center}
/* cuando el panel trae una sola frase, esa frase es lo unico que hay: se lee grande */
.fch__c>p:only-child{font-size:clamp(17px,1.55vw,22px);line-height:1.45;letter-spacing:-.012em;color:var(--fg)}
.fch__c{animation:fchin .34s var(--ease) both}
.fch__c[hidden]{display:none}
.fch__c p{margin:0;color:var(--fg2);font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.55;max-width:38em}
.fch__c .fch__col+.fch__col{margin-top:var(--v1);padding-top:clamp(16px,2vh,22px);
  border-top:1px solid var(--line2)}
.fch__col small{display:block;font:500 9.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg4);margin-bottom:9px}
.fch__col:first-child small{color:var(--sig)}
@keyframes fchin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fch__c{animation:none}}
@media (max-width:900px){
  /* el carril pasa a fichas que se deslizan, el mismo gesto que la lista de giros */
  .fch{grid-template-columns:1fr;gap:20px}
  .fch__r{flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;border-top:0;
    scroll-snap-type:x proximity;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);padding-bottom:2px}
  .fch__r::-webkit-scrollbar{display:none}
  .fch__t{width:auto;flex:0 0 auto;scroll-snap-align:start;padding:11px 15px;border:1px solid var(--line2);
    border-radius:999px;gap:8px;align-items:center;white-space:nowrap}
  .fch__t::before{display:none}
  .fch__t.on{background:var(--sig);border-color:var(--sig);color:#140A05}
  .fch__t.on i{color:#140A05}
  .fch__t span{font-size:14.5px}
  .fch__p{min-height:0}
}
/* la pieza: recortada, flotando sobre el fondo, con su razón al lado */
.pz{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:center}
.pz--r{direction:rtl}.pz--r>*{direction:ltr}
.pz__f{margin:0;display:flex;align-items:center;justify-content:center;min-height:clamp(220px,32vh,340px)}
.pz__f img{max-width:100%;max-height:clamp(220px,32vh,340px);width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(255,123,48,.16)) drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.pz__h{margin:20px 0 0;font-size:clamp(22px,2.4vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
.pz__s{margin:16px 0 0;color:var(--fg3);font-size:clamp(15.5px,1.3vw,18px);line-height:1.55;max-width:40em}
@media (max-width:860px){.pz{grid-template-columns:1fr;gap:6px}.pz--r{direction:ltr}
  .pz__f{min-height:0}.pz__f img{max-height:210px}.pz__h{font-size:22px;margin-top:14px}}
/* ============ móvil, segunda vuelta: la regla de las dos familias ============
   Se desliza de lado solo lo que carga una imagen o una cifra grande. El texto
   se vuelve lista compacta: filetes en vez de cajas. Más corto que las tarjetas
   apiladas y más legible que el carrusel. */
@media (max-width:760px){

  /* ---- 1. escala tipográfica. El cuerpo estaba en 15 px en 326 lugares y el
     piso móvil es 16. La base cubre todo párrafo sin clase propia; los que
     tienen clase con medida propia la conservan por especificidad. */
  /* la especificidad tiene que ganarle a las reglas por componente que hoy
     fijan 15 y 15.5; :not(#_) la sube sin cambiar a qué aplica. Los tres
     pies de foto que sí deben ir chicos quedan exentos. */
  /* Solo el parrafo SIN clase es cuerpo: uno con clase ya trae su medida y
     esta regla se la estaba comiendo en 215 titulares de las 86 paginas. Los
     dos titulares que no llevan clase se excluyen por su contenedor. */
  main :not(.qs):not(.rqf__bub) > p:not([class]):not(#_),
  main dd:not([class]):not(#_){font-size:16.5px;line-height:1.55}
  /* El parrafo de cuerpo sube a 16.5; el titular que vive dentro del mismo
     contenedor conserva su clamp. La lista sale de medir cada <p> de main a
     1440 y a 390 y quedarse con los que bajaban de 23 px a 17.5. */
  .sec :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .rows :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .cards :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .tiles :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .outc :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .edl :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .conn :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .lnl :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .prose :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .qls :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .crit :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .srail :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .opl :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .esc__e :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .ba :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
  .sec li,.dtable td{font-size:16.5px;line-height:1.55}
  .lead{font-size:17.5px;line-height:1.5}
  .figs cite,cite{font-size:12px;line-height:1.4}
  .lab{font-size:11.5px}
  /* el resto del cuerpo que no cayó en la lista de arriba */
  .tline p,.chain p,.docs p,.wds p,.cases p,.bleed__s,.sband__s,.pago__l span,
  .ctab__in span,.cta p,.shot__s,.figs p,.res p,.dtable dd,.opl p{font-size:16.5px;line-height:1.55}
  .lnl p,.links p{font-size:15.5px;line-height:1.5}

  /* ---- 2. lo que se queda deslizable: lleva imagen adentro */
  .icards:has(>*:nth-child(3)),.igrid:has(>*:nth-child(3)){
    display:flex!important;grid-template-columns:none!important;gap:10px;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);padding-bottom:4px}
  .icards:has(>*:nth-child(3))::-webkit-scrollbar,.igrid:has(>*:nth-child(3))::-webkit-scrollbar{display:none}
  .icards:has(>*:nth-child(3))>*,.igrid:has(>*:nth-child(3))>*{
    flex:0 0 auto;width:84%;max-width:340px;scroll-snap-align:start;border-bottom:0}

  /* ---- 3. lo que lleva cifra: se apila y la cifra manda */
  .figs,.res,.gr__slabs{display:block!important;grid-template-columns:none!important;
    overflow:visible!important;margin-inline:0!important;padding-inline:0!important}
  .figs>*,.res>*,.gr__slabs>*{width:auto!important;max-width:none!important;
    padding:22px 0!important;border-bottom:1px solid var(--line)!important;scroll-snap-align:none}
  .figs>*:last-child,.res>*:last-child,.gr__slabs>*:last-child{border-bottom:0!important}
  .res .v,.figs b,.gr__sl b{font-size:clamp(46px,13vw,60px)!important;line-height:.95!important}
  .res p,.figs p{margin-top:12px!important}

  /* ---- 4. todo lo demás: lista compacta, sin caja */
  .tiles,.cards,.outc,.srail,.fmt,.conn,.orail,.osteps,.opl,.esc,.rows,.edl{
    display:block!important;grid-template-columns:none!important;
    overflow:visible!important;margin-inline:0!important;padding-inline:0!important;gap:0!important}
  .tiles>*,.cards>*,.outc>*,.srail>*,.fmt>*,.conn>*,.orail>*,.osteps>*,.opl>*,.esc>.esc__r,.rows>*,.edl>*{
    display:block!important;width:auto!important;max-width:none!important;flex:none!important;
    background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
    border-bottom:1px solid var(--line)!important;padding:16px 0!important;margin:0!important}
  .tiles>*:last-child,.cards>*:last-child,.outc>*:last-child,.srail>*:last-child,.fmt>*:last-child,
  .conn>*:last-child,.orail>*:last-child,.osteps>*:last-child,.opl>*:last-child,
  .esc>.esc__r:last-child,.rows>*:last-child,.edl>*:last-child{border-bottom:0!important}
  .tiles>*>b,.cards>* h3,.outc>* b,.srail>* b,.fmt>* b,.conn>* b,.orail>* b,.opl b,.rows>* h3,.edl>* h3{
    font-size:17px!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:1.25!important;
    display:block!important;margin:0 0 5px!important;color:var(--fg)!important}
  .tiles>* p,.cards>* p,.outc>* p,.srail>* p,.fmt>* p,.conn>* p,.orail>* p,.opl p,.rows>* p,.edl>* p{
    margin:0!important;color:var(--fg3)!important}
  .fmt>* svg{width:22px;height:22px;margin-bottom:8px}
  .orail>* small,.osteps .ost__s{color:var(--sig)}

  /* la escala de precios, en su forma compacta */
  .esc>.esc__r{padding:18px 0!important}
  .esc__n{font-size:17px!important;margin-bottom:12px}
  .esc__t{display:block!important}
  .esc__e{padding:0 0 0 16px!important;margin-top:12px}
  .esc__e:first-child{margin-top:0}

  /* ---- 5. la 07: trece industrias dejan de ser una lista de 710 px */
  .ilist{display:flex!important;gap:8px;overflow-x:auto;overflow-y:hidden;border-top:0!important;
    scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1)!important;padding:0 var(--pad) 2px!important}
  .ilist::-webkit-scrollbar{display:none}
  .ilist li{flex:0 0 auto;scroll-snap-align:start}
  .ilist li button{display:inline-flex!important;align-items:center;width:auto!important;
    grid-template-columns:none!important;gap:0!important;padding:10px 16px!important;
    border:1px solid var(--line2)!important;border-radius:999px;font-size:14.5px!important;
    white-space:nowrap;color:var(--fg3)}
  .ilist li button small,.ilist li button i{display:none!important}
  .ilist li button.on{background:var(--sig)!important;border-color:var(--sig)!important;color:#140A05!important}

  /* ---- 6. la 09: doce logotipos, el resto en su propia página */
  .erpwall>*:nth-child(n+13){display:none}
}
/* ====================== el informe, dibujado ======================
   Un solo tono más un gris de segundo plano. El dato que importa va en naranja
   y el resto es contexto; cada marca lleva su número escrito, así que la
   identidad nunca depende del color. Barras de 14 px con la punta redondeada y
   el arranque a escuadra, separación de 2 px, rejilla recesiva. */
.gr{margin:clamp(30px,4vh,50px) 0 0;--gsig:var(--sig);--gmut:#6B615A;--gsec:#B8561F}
.gr__rows{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line2)}
.gr__r{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr) auto;gap:clamp(12px,2vw,24px);
  align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.gr__t{font-size:15px;color:var(--fg2);line-height:1.3}
.gr__r.on .gr__t{color:var(--fg);font-weight:600}
.gr__k{position:relative;display:block;height:14px}
.gr__k>i{display:block;height:100%;background:var(--gmut);border-radius:0 4px 4px 0}
.gr__r.on .gr__k>i{background:var(--gsig)}
.gr__v{font:600 16px/1 var(--mono);letter-spacing:-.01em;color:var(--fg3);white-space:nowrap}
.gr__r.on .gr__v{color:var(--fg)}
.gr__nn{grid-column:2/4;color:var(--fg4);font-size:13.5px;line-height:1.45;margin-top:-4px}
/* mancuerna: dos extremos por renglón y el trecho entre ellos */
.gr__lg{display:flex;gap:20px;margin-bottom:14px}
.gr__lg span{display:inline-flex;align-items:center;gap:7px;font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--fg3)}
.gr__lg i{width:9px;height:9px;border-radius:50%}
.gr__lg i.a,.gr__k i.a{background:var(--gsec)}
.gr__lg i.b,.gr__k i.b{background:var(--gsig)}
.gr__rows--d .gr__k{height:16px}
.gr__k>u{position:absolute;top:50%;height:2px;margin-top:-1px;background:var(--line2);
  left:min(var(--a),var(--b));width:max(calc(var(--b) - var(--a)),calc(var(--a) - var(--b)))}
.gr__k>i.a,.gr__k>i.b{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  box-shadow:0 0 0 2px var(--bg)}
.gr__k>i.a{left:var(--a)}
.gr__k>i.b{left:var(--b)}
.gr__rows--d .gr__v{display:flex;gap:10px;align-items:baseline}
.gr__v s{text-decoration:none;color:var(--fg4)}
.gr__v em{font-style:normal;color:var(--fg)}
/* columnas: antes y después */
.gr__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:2px;align-items:end;
  height:clamp(200px,26vh,280px);border-bottom:1px solid var(--line2);padding-bottom:0}
.gr__c{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:10px}
.gr__c>b{font:600 clamp(18px,2vw,26px)/1 var(--mono);letter-spacing:-.02em;color:var(--fg3)}
.gr__c.on>b{color:var(--fg)}
.gr__cb{display:block;width:min(74%,120px);background:var(--gmut);border-radius:4px 4px 0 0}
.gr__c.on .gr__cb{background:var(--gsig)}
.gr__cts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:2px;margin-top:14px}
.gr__ct{color:var(--fg3);font-size:13.5px;line-height:1.4;text-align:center;padding-inline:8px}
.gr__ct.on{color:var(--fg)}
/* apilada: una sola barra, parte de un todo */
.gr__stack{display:flex;gap:2px;height:22px;border-radius:4px;overflow:hidden}
.gr__sg{display:block;height:100%;background:var(--gmut)}
.gr__sg.on{background:var(--gsig)}
.gr__slabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(14px,2vw,28px);margin-top:20px}
.gr__sl b{display:block;font:600 clamp(20px,2.2vw,30px)/1 var(--mono);letter-spacing:-.025em;color:var(--fg3)}
.gr__sl.on b{color:var(--gsig)}
.gr__sl span{display:block;margin-top:9px;color:var(--fg3);font-size:14px;line-height:1.45}
.gr__n{margin:20px 0 0;color:var(--fg3);font-size:14.5px;line-height:1.55;max-width:46em}
.gr__f{margin:16px 0 0;font:500 11px var(--mono);letter-spacing:.06em;color:var(--fg4)}
.gr__f a{color:var(--fg3);text-decoration:underline;text-underline-offset:3px}
.gr__f a:hover{color:var(--sig)}
@media (max-width:760px){
  .gr__r{grid-template-columns:1fr auto;gap:6px 12px;padding:12px 0}
  .gr__t{grid-column:1/3;font-size:14.5px}
  .gr__k{grid-column:1}
  .gr__nn{grid-column:1/3;margin-top:2px}
  .gr__cols{height:200px}
  .gr__ct{font-size:12px;padding-inline:3px}
  .gr__slabs{grid-template-columns:1fr 1fr;gap:16px}
}
/* precios: la petición donde la persona ya está lista, sin montar otra banda */
.ask{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,48px);flex-wrap:wrap;padding-top:0;margin-top:var(--v2)}
.ask p{margin:0;font-size:clamp(17px,1.5vw,22px);font-weight:600;letter-spacing:-.022em;line-height:1.25;max-width:22em;text-wrap:balance}
.ask .hero__btns{margin:0;flex-shrink:0}
@media (max-width:760px){.ask{gap:20px}.ask .hero__btns{width:100%}}
/* integraciones: el antes, en dos renglones. La regla es que ninguna página de
   resultado se publique sin decir qué costaba eso mismo el día anterior. */
.eant{max-width:44em}
.eant__t{margin:22px 0 0;font-size:clamp(20px,2vw,29px);font-weight:600;letter-spacing:-.028em;line-height:1.24;text-wrap:balance}
.eant__s{margin:14px 0 0;color:var(--fg3);font-size:clamp(15px,1.2vw,17px);line-height:1.55}
/* héroe de foto a color: la desaturación baja y el velo se recarga a la izquierda,
   donde vive el titular, para que la imagen no termine gris */
.bhero--color .bhero__i{filter:none;transform:scale(1.01)}
.bhero--color::after{background:linear-gradient(90deg,rgba(10,7,6,.92),rgba(10,7,6,.62) 42%,rgba(10,7,6,.2) 78%),linear-gradient(0deg,var(--bg),rgba(10,7,6,.25) 34%,transparent 62%)}
@media (max-width:760px){.bhero--color .bhero__i{filter:brightness(.62) saturate(.92)}.bhero--color::after{background:linear-gradient(0deg,var(--bg),rgba(10,7,6,.62) 38%,rgba(10,7,6,.44))}}
.tiles .tk{display:block;font:500 9.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--sig);margin-bottom:12px}
/* precios: la escala de los cinco factores. Dos extremos por renglón, sin una
   sola cifra, para que el visitante se ubique antes de la sesión. */
.esc{margin-top:var(--v3)}
.esc__h,.esc__r{display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr);gap:clamp(20px,4vw,64px)}
.esc__h{padding-bottom:12px}
.esc__h>div{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,48px)}
.esc__h b{font:500 9.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fg4)}
.esc__h b.s{color:var(--sig)}
.esc__r{padding:clamp(22px,2.8vh,34px) 0;border-top:1px solid var(--line2);align-items:center}
.esc__r:last-child{border-bottom:1px solid var(--line2)}
.esc__n{font-size:clamp(18px,1.6vw,25px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.esc__t{--g:clamp(16px,3vw,48px);display:grid;grid-template-columns:1fr 1fr;gap:var(--g);position:relative}
.esc__t::before{content:"";position:absolute;left:4px;width:calc(50% + var(--g)/2);top:4px;height:1px;background:linear-gradient(90deg,var(--line2),var(--sig))}
.esc__e{padding-top:22px;position:relative}
.esc__e::before{content:"";position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--line2)}
.esc__e--s::before{border-color:var(--sig);background:var(--sig)}
.esc__e b{display:none}
.esc__e p{margin:0;color:var(--fg2);font-size:14.5px;line-height:1.5}
@media (max-width:860px){
  .esc__h{display:none}
  .esc__r{grid-template-columns:1fr;gap:16px;padding:22px 0}
  .esc__t{grid-template-columns:1fr;gap:18px}
  .esc__t::before{display:none}
  .esc__e{padding-top:0;padding-left:16px}
  .esc__e::before{top:.35em}
  .esc__e b{display:block;font:500 9.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fg4);margin-bottom:6px}
  .esc__e--s b{color:var(--sig)}
}
/* héroe dividido con foto vertical */
.shs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);min-height:clamp(600px,88vh,900px);background:var(--bg)}
.shs__t{padding-top:150px;padding-bottom:clamp(48px,8vh,96px);display:flex;flex-direction:column;justify-content:flex-end}
.shs__t>*{align-self:flex-start}.shs__t .d2{font-size:clamp(40px,4.8vw,84px);line-height:.97;margin-top:22px}.shs__t .lead{margin-top:24px}
.shs__f{margin:0;position:relative;overflow:hidden}
.shs__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shs__f::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg),transparent 22%),linear-gradient(180deg,rgba(10,7,6,.75),transparent 22%)}
@media (max-width:900px){.shs{grid-template-columns:1fr;min-height:0}.shs__t{padding-top:110px;padding-bottom:28px}.shs__f{height:360px;order:2}.shs__f::after{background:linear-gradient(180deg,var(--bg),transparent 25%)}}
/* héroe con tres fotos en secuencia */
.htri__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.htri__g figure{margin:0;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:5/4;background:var(--s1)}
.htri__g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.htri__g figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,7,6,.88))}
.htri__g figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;font-size:clamp(16px,1.3vw,19px);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.htri__g figcaption small{display:block;font:500 10px var(--mono);letter-spacing:.14em;color:var(--sig);margin-bottom:8px}
@media (max-width:760px){.htri__g{grid-template-columns:1fr 1fr}.htri__g figure:first-child{grid-column:1/3;aspect-ratio:16/10}}
/* héroe de resultados: la cifra manda */
.hst{padding-bottom:clamp(40px,7vh,90px)}
.hst__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);gap:clamp(32px,5vw,88px);align-items:end}
.hst__top .d2{margin-top:22px}
.hst__big{margin-top:clamp(40px,7vh,88px);display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,28px);align-items:end;padding-bottom:clamp(28px,4vh,44px);border-bottom:1px solid var(--line2)}
.hst__n{font-size:clamp(56px,13vw,220px);white-space:nowrap;font-weight:600;letter-spacing:-.06em;line-height:.82;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hst__n small{font-size:.16em;letter-spacing:.02em;margin-left:.3em;-webkit-text-fill-color:var(--fg3);color:var(--fg3);font-weight:500}
.hst__c{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.hst__c img{height:30px;width:auto;opacity:.9;display:block}.hst__c p{margin:0;color:var(--fg2);font-size:clamp(15.5px,1.15vw,18px);line-height:1.5;max-width:30em}
.hst__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.hst__row>div{padding:28px clamp(16px,2vw,32px) 0 0}.hst__row>div+div{padding-left:clamp(16px,2vw,32px);border-left:1px solid var(--line)}
.hst__row img{height:28px;max-width:130px;object-fit:contain;object-position:left;width:auto;opacity:.75;display:block;margin-bottom:16px}
.hst__row b{display:block;font-size:clamp(34px,3.6vw,60px);font-weight:600;letter-spacing:-.045em;line-height:1}.hst__row b small{font-size:.34em;margin-left:.3em;color:var(--fg3);font-weight:500;letter-spacing:0}
.hst__row p{margin:12px 0 0;color:var(--fg3);font-size:14.5px;line-height:1.5;max-width:26em}
@media (max-width:900px){.hst__top,.hst__big{grid-template-columns:1fr}.hst__row{grid-template-columns:1fr}.hst__row>div,.hst__row>div+div{padding:22px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* héroe con foto de fondo */
.bhero{position:relative;min-height:clamp(560px,84vh,820px);display:flex;align-items:flex-end;overflow:hidden;padding-top:110px;background:var(--bg)}
.bhero__i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.15) brightness(.62)}
.bhero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,7,6,.9),rgba(10,7,6,.55) 45%,rgba(10,7,6,.15)),linear-gradient(0deg,var(--bg),transparent 40%)}
.bhero__in{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,9vh,110px)}
.bhero__t{max-width:660px}.bhero__t .d2{font-size:clamp(40px,5.2vw,88px);line-height:.97;margin-top:22px}.bhero__t .lead{margin-top:24px;color:var(--fg)}
@media (max-width:760px){.bhero{min-height:620px}.bhero__i{object-position:78% 50%;filter:grayscale(.15) brightness(.45)}}

/* banda tipográfica */
.sband{padding-block:clamp(56px,9vh,110px);background:var(--bg2)}
.sband__in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);align-items:end}
.sband__h{margin:18px 0 0;font-size:clamp(32px,4.4vw,76px);font-weight:600;letter-spacing:-.04em;line-height:.98}
.sband__h span{display:block;color:var(--sig)}
.sband__s{margin:0;color:var(--fg2);font-size:clamp(15.5px,1.15vw,18px);line-height:1.55;max-width:32em;padding-left:22px;border-left:2px solid var(--sig)}
@media (max-width:900px){.sband__in{grid-template-columns:1fr}}
/* pedido hecho en código */
.dq__tl{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.dq .dq__tl li{display:flex;justify-content:flex-start;text-align:left;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);position:relative}
.dq__tl li i{flex:none;width:12px;height:12px;margin-top:4px;border-radius:50%;border:2px solid var(--line3)}
.dq__tl li.on i{background:var(--sig);border-color:var(--sig)}
.dq .dq__tl b{display:block;font:500 14.5px var(--sans);letter-spacing:0;color:var(--fg)}.dq__tl small{font-size:12.5px;color:var(--fg4)}
.dq .dq__tl li:not(.on) b{color:var(--fg3)}

/* ================= v18: variedad sin fotos ================= */
/* héroe tipográfico */
.thero{padding-bottom:clamp(40px,7vh,96px)}
.thero__g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,110px);align-items:end}
.thero__h{font-size:clamp(40px,6vw,104px);line-height:.96;margin-top:22px}
.thero .lead{margin-top:clamp(22px,3vh,34px)}
.thero__a{align-self:end}
@media (max-width:1000px){.thero__g{grid-template-columns:1fr}}
/* héroe con pieza animada */
.phero{position:relative;background:#000;min-height:clamp(560px,86vh,860px);display:flex;align-items:flex-end;overflow:hidden;padding-top:110px}
.phero__v{position:absolute;inset:0}
.phero__v video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:100% 50%}
.phero__v::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.6) 42%,transparent 70%),linear-gradient(0deg,var(--bg),transparent 30%)}
.phero__in{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,9vh,110px)}
.phero__t{max-width:640px}
.phero__t .d2{font-size:clamp(40px,5.2vw,88px);line-height:.97;margin-top:22px}
.phero__t .lead{margin-top:24px}
@media (max-width:760px){.phero{min-height:auto;display:block;padding-top:96px}.phero__v{position:relative;height:300px}.phero__v video{object-position:50% 50%}.phero__v::after{background:linear-gradient(0deg,var(--bg),transparent 55%)}.phero__in{padding-top:8px}}
/* banda con pieza animada */
.pband{position:relative;background:#000;overflow:hidden;min-height:clamp(420px,62vh,640px);display:flex;align-items:center}
.pband__v{position:absolute;inset:0}
.pband__v video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:100% 50%}
.pband__v::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 8%,rgba(0,0,0,.7) 40%,transparent 68%)}
.pband__t{position:relative;z-index:2;width:100%}
.pband__t>div{max-width:560px}
.pband__h{margin:18px 0 0;font-size:clamp(30px,3.6vw,60px);font-weight:600;letter-spacing:-.035em;line-height:1.02}
.pband__h span{display:block;color:var(--fg3)}
.pband__s{margin:20px 0 0;color:var(--fg2);font-size:clamp(15.5px,1.1vw,18px);line-height:1.55;max-width:32em}
@media (max-width:760px){.pband{display:block;min-height:auto}.pband__v{position:relative;height:260px}.pband__v::after{background:linear-gradient(0deg,#000,transparent 60%)}.pband__t{padding-block:0 48px}}
/* cotización hecha en código */
.dq{background:var(--s1);border:1px solid var(--line2);border-radius:22px;padding:clamp(20px,2.4vw,30px);box-shadow:0 30px 80px -30px rgba(0,0,0,.7);max-width:480px;margin-left:auto}
.dq__top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.dq__sys img{height:22px;width:auto;display:block}.dq__sys em{font-style:normal;font-weight:600;font-size:15px}
.dq__st{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sig);border:1px solid rgba(255,123,48,.35);border-radius:999px;padding:5px 10px}
.dq__h{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 12px}
.dq__h small,.dq dt,.dq__f small{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg4)}
.dq__h b{font:500 15px var(--mono);letter-spacing:.02em}
.dq dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 16px;font-size:14px}.dq dd{margin:0;color:var(--fg2)}
.dq ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.dq li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--fg2)}
.dq li b{font:500 13px var(--mono);color:var(--fg)}
.dq__f{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px}.dq__f b{font-size:22px;font-weight:600;letter-spacing:-.02em}
.dq__cap{margin:14px 0 0;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg4)}
@media (max-width:1000px){.dq{margin-left:0}}
/* dos marcas unidas */
.dlink{display:flex;align-items:center;gap:clamp(14px,2vw,26px);padding:clamp(26px,3vw,40px);border:1px solid var(--line2);border-radius:24px;background:var(--s1)}
.dlink__a,.dlink__b{flex:none;display:grid;place-items:center;width:clamp(96px,10vw,132px);height:clamp(96px,10vw,132px);border-radius:20px;background:var(--bg);border:1px solid var(--line)}
.dlink__a img{height:30px;width:auto}.dlink__b img{max-width:78%;max-height:44px;width:auto}.dlink__b em{font-style:normal;font-weight:600;font-size:17px;text-align:center;padding:0 8px}
.dlink i{position:relative;flex:1;height:2px;background:var(--line2);overflow:hidden;border-radius:2px}
.dlink i b{position:absolute;top:0;left:-30%;width:30%;height:100%;background:var(--sig);animation:dl 2.4s var(--ease) infinite}
@keyframes dl{to{left:100%}}
@media (prefers-reduced-motion:reduce){.dlink i b{animation:none;left:35%}}
/* filas editoriales */
.edl{border-top:1px solid var(--line2)}
.edl article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,80px);padding:clamp(26px,3.4vw,44px) 0;border-bottom:1px solid var(--line2);align-items:baseline}
.edl h3{margin:0;font-size:clamp(24px,2.6vw,42px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.edl p{margin:0;color:var(--fg2);font-size:clamp(15.5px,1.15vw,18px);line-height:1.55;max-width:36em}
@media (max-width:760px){.edl article{grid-template-columns:1fr;gap:10px}}
/* línea de tiempo */
.tline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:clamp(16px,2vw,28px);position:relative}
.tline::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:var(--line2)}
.tline li{position:relative;padding-top:52px}
.tline li::before{content:"";position:absolute;top:9px;left:0;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--sig)}
.tline li:first-child::before{background:var(--sig)}
.tl__n{position:absolute;top:6px;left:26px;font:500 11px var(--mono);letter-spacing:.1em;color:var(--fg4)}
.tline b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.tline p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.55}
@media (max-width:900px){.tline{grid-template-columns:1fr;gap:0}.tline::before{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}.tline li{padding:0 0 30px 40px}.tline li::before{top:4px}.tl__n{position:static;display:block;margin-bottom:6px}}
/* mosaico tipográfico */
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tiles>*{grid-column:span 2;background:var(--s1);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:12px;min-height:220px;color:inherit;text-decoration:none;transition:border-color .3s,transform .5s var(--ease)}
.tiles>a:hover{border-color:var(--line3);transform:translateY(-3px)}
.tiles b{font-size:clamp(20px,1.8vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.1}
.tiles p{margin:auto 0 0;color:var(--fg3);font-size:15px;line-height:1.55;max-width:34em}
.tiles>.on b,.tiles--4>*:nth-child(4) b,.tiles--6>*:nth-child(6) b{font-size:clamp(26px,2.8vw,44px);letter-spacing:-.035em;max-width:16em}
.tiles .go{margin-top:14px!important}
.tiles .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--fg2)}.tiles .go svg{width:14px;height:14px}
.tiles>.on{background:var(--sig);border-color:var(--sig);color:#0A0706}.tiles>.on p,.tiles>.on .go{color:rgba(10,7,6,.72)}
.tiles--4>*:nth-child(1),.tiles--4>*:nth-child(4){grid-column:span 4}
.tiles--5>*:nth-child(1),.tiles--5>*:nth-child(2){grid-column:span 3}
.tiles--6>*:nth-child(1){grid-column:span 4}.tiles--6>*:nth-child(6){grid-column:span 6}
@media (max-width:900px){.tiles{grid-template-columns:1fr 1fr}.tiles>*,.tiles--4>*,.tiles--5>*,.tiles--6>*{grid-column:auto!important;min-height:180px}.tiles>.on{grid-column:1/3!important}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}.tiles>.on{grid-column:auto!important}}
/* manifiesto */
.mani{list-style:none;margin:0;padding:0}
.mani li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end;padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--line2)}
.mani b{font-size:clamp(30px,4.2vw,72px);font-weight:600;letter-spacing:-.04em;line-height:.98}
.mani li:nth-child(even) b{color:var(--fg3)}
.mani p{margin:0;color:var(--fg2);font-size:clamp(15.5px,1.15vw,18px);line-height:1.55}
@media (max-width:760px){.mani li{grid-template-columns:1fr;gap:12px}}
/* casos con logo */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.cases article,.cases>a{background:var(--s1);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:14px}
.cases>a{text-decoration:none;color:inherit;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.cases>a:hover{border-color:var(--sig);transform:translateY(-2px)}
.cases>a:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
.cs__go{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:8px;font:500 10.5px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--sig)}
.cs__go svg{width:14px;height:14px;flex:0 0 14px;fill:currentColor;transition:transform .3s var(--ease)}
.cases>a:hover .cs__go svg{transform:translateX(4px)}
.cs__lg{height:44px;display:flex;align-items:center}.cs__lg img{max-height:36px;max-width:150px;width:auto;opacity:.85}
.cs__v{margin:10px 0 0!important;font-size:clamp(28px,2.6vw,40px)!important;font-weight:600;letter-spacing:-.035em;color:var(--fg)!important;line-height:1}
.cases p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.55}
/* cadena */
.chain{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr) auto);gap:clamp(12px,2vw,28px);align-items:center}
.chain>div:last-child{grid-column:span 2}
.chain>div{border:1px solid var(--line2);border-radius:24px;padding:clamp(22px,2.6vw,34px);min-height:210px;display:flex;flex-direction:column;gap:10px}
.chain>div:last-child{background:var(--sig);border-color:var(--sig);color:#0A0706}.chain>div:last-child small,.chain>div:last-child p{color:rgba(10,7,6,.7)}
.chain small{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sig)}
.chain b{font-size:clamp(22px,2.2vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.chain p{margin:auto 0 0;color:var(--fg3);font-size:14.5px;line-height:1.5}
.chain>i svg{width:22px;height:22px;color:var(--fg3)}
@media (max-width:900px){.chain{grid-template-columns:1fr}.chain>i{justify-self:center;transform:rotate(90deg)}.chain>div{min-height:0}}
/* preguntas grandes */
.qls{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,90px);align-items:start}
.qls>div{position:sticky;top:110px}.qls .lead{margin-top:22px}
.qls ol{list-style:none;margin:0;padding:0;counter-reset:q}
.qls li{padding:24px 0;border-top:1px solid var(--line2)}.qls li:last-child{border-bottom:1px solid var(--line2)}
.qls li b{display:block;font-size:clamp(22px,2vw,32px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.qls li p{margin:10px 0 0;color:var(--fg3);font-size:15px;line-height:1.55;max-width:40em}
@media (max-width:900px){.qls{grid-template-columns:1fr}.qls>div{position:static}}
/* archivos */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.docs>div{border:1px dashed var(--line3);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px}
.dc__i{position:relative;width:44px;height:52px;margin-bottom:8px}
.dc__i svg{width:44px;height:52px;fill:none;stroke:var(--fg3);stroke-width:1.1}
.dc__i em{position:absolute;left:-4px;bottom:4px;font:600 8.5px var(--mono);letter-spacing:.06em;font-style:normal;background:var(--sig);color:#0A0706;border-radius:4px;padding:2px 4px}
.docs b{font-size:18px;font-weight:600;letter-spacing:-.02em}.docs p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.5}
/* portadas */
.covers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px}
.cov{color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:14px}
.cov__p{aspect-ratio:3/4;border-radius:14px;background:linear-gradient(160deg,var(--s3),var(--s1) 60%);border:1px solid var(--line2);padding:22px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .3s}
.cov:nth-child(1) .cov__p{background:linear-gradient(160deg,#FF8A45,#E8551C)}.cov:nth-child(1) .cov__p *{color:#0A0706!important}
.cov__p::after{content:"";position:absolute;right:-30%;bottom:-18%;width:80%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.cov__p img{height:18px;width:auto;align-self:flex-start;margin-bottom:auto;opacity:.9}
.cov__p small{font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.cov__p b{font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin-top:10px}
.cov__p span{margin-top:14px;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sig)}
.cov:hover .cov__p{transform:translateY(-4px);border-color:var(--line3)}
.cov p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.5}
/* palabras grandes */
.wds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.wds>div{padding:clamp(24px,3vw,40px) clamp(0px,2vw,32px) 0 0;border-right:1px solid var(--line)}
.wds>div+div{padding-left:clamp(18px,2vw,32px)}.wds>div:last-child{border-right:0}
.wds b{display:block;font-size:clamp(28px,3.4vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1}
.wds p{margin:18px 0 0;color:var(--fg3);font-size:15px;line-height:1.55}
@media (max-width:900px){.wds{grid-template-columns:1fr}.wds>div,.wds>div+div{border-right:0;padding:24px 0;border-bottom:1px solid var(--line)}}
/* filas con miniatura enlazadas */
.frows{border-top:1px solid var(--line2)}
.frows a{display:grid;grid-template-columns:120px minmax(0,.9fr) minmax(0,1.3fr) 24px;gap:clamp(16px,2.4vw,36px);align-items:center;padding:18px 0;border-bottom:1px solid var(--line2);color:inherit;text-decoration:none;transition:padding .4s var(--ease)}
.frows a:hover{padding-left:10px}
.frows img{width:120px;height:80px;object-fit:cover;border-radius:12px;filter:grayscale(.2)}
.frows b{font-size:clamp(19px,1.6vw,24px);font-weight:600;letter-spacing:-.02em}
.frows p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.5}
.frows svg{width:18px;height:18px;color:var(--fg3)}
@media (max-width:760px){.frows a{grid-template-columns:84px minmax(0,1fr) 18px;gap:14px}.frows img{width:84px;height:64px}.frows p{grid-column:2/3;grid-row:2}.frows svg{grid-row:1/3;grid-column:3}}
/* formatos */
.fmt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);overflow:hidden}
.fmt>div{background:var(--bg);padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:10px}
.fmt svg{width:30px;height:30px;fill:none;stroke:var(--sig);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.fmt b{font-size:19px;font-weight:600;letter-spacing:-.02em}.fmt p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.5}
@media (max-width:760px){.fmt{grid-template-columns:1fr 1fr}}@media (max-width:480px){.fmt{grid-template-columns:1fr}}
/* ERP: recorrido en espejo y en riel */
.oflow--m{direction:rtl}.oflow--m>*{direction:ltr}
.orail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.orail>div{background:var(--s1);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:10px}
.orail small{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sig)}
.orail b{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.25}.orail p{margin:auto 0 0;color:var(--fg3);font-size:14px;line-height:1.5}
.orail>div:last-child{background:var(--sig);border-color:var(--sig);color:#0A0706}.orail>div:last-child small,.orail>div:last-child p{color:rgba(10,7,6,.72)}
@media (max-width:1000px){.orail{grid-template-columns:1fr 1fr}.orail>div:last-child{grid-column:1/3}}@media (max-width:560px){.orail{grid-template-columns:1fr}.orail>div:last-child{grid-column:auto}}
/* ERP: toma y deja como dos columnas de resultado */
.td2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.td2>div{border-radius:24px;padding:clamp(24px,3vw,40px)}
.td2>div:first-child{border:1px solid var(--line2)}.td2>div:last-child{background:var(--s2)}
.td2 h3{margin:0 0 20px;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.td2 ul{list-style:none;margin:0;padding:0}.td2 li{display:flex;gap:12px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);font-size:clamp(17px,1.4vw,21px);letter-spacing:-.015em}
.td2 li svg{width:15px;height:15px;flex:none;color:var(--sig);transform:translateY(2px)}.td2 li small{margin-left:auto;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg4);white-space:nowrap}
@media (max-width:760px){.td2{grid-template-columns:1fr}}
/* ERP: conexión en línea */
.conn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.conn>div{padding:26px clamp(14px,2vw,26px) 26px 0}.conn>div+div{padding-left:clamp(14px,2vw,26px);border-left:1px solid var(--line)}
.conn b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}.conn p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.5}
@media (max-width:900px){.conn{grid-template-columns:1fr 1fr}.conn>div:nth-child(3){padding-left:0;border-left:0}.conn>div{border-bottom:1px solid var(--line)}}
@media (max-width:560px){.conn{grid-template-columns:1fr}.conn>div,.conn>div+div{padding-left:0;border-left:0}}
/* ERP: marquesina de otras plataformas */
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq__t{display:flex;gap:10px;width:max-content;animation:mq 60s linear infinite}
.mq:hover .mq__t{animation-play-state:paused}
.mq a{flex:none;border:1px solid var(--line2);border-radius:999px;padding:10px 18px;color:var(--fg2);font-size:15px;text-decoration:none;transition:border-color .3s,color .3s}
.mq a:hover{border-color:var(--sig);color:var(--fg)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq__t{animation:none;flex-wrap:wrap;width:auto}}
/* ---- El piso de tipografia en escritorio.
   Medido: 1,498 textos por debajo de 16 px en las 86 paginas, en 117 reglas.
   El cuerpo sube a 17 y el lead se queda en 18.9, para que siga habiendo un
   escalon entre la entrada y la prosa. Va dentro de min-width:761px para no
   pelear con la escala de movil, que ya estaba en 16.5. Quedan fuera a
   proposito las maquetas de interfaz, los pies de foto, los controles y las
   etiquetas: ahi el tamano chico es lo que los hace lo que son. */
@media (min-width:761px){
  .cards p,
  .stp4 p,
  .split li p,
  .stats p,
  .reqs li,
  .spec p,
  .otab__r p,
  .lnk p,
  .norms p,
  .norms b,
  .altw,
  .srail p,
  .lnl p,
  .links p,
  .outc p,
  .bento>div p,
  .bento figcaption span,
  .trio p,
  .trio__more,
  .pano__bar p,
  .duo__more p,
  .wide__g p,
  .eng__g p,
  .icards p,
  .rqf__big li,
  .rqt__p p,
  .prs__c p,
  .req3 blockquote,
  .tiles p,
  .qls li p,
  .docs p,
  .cov p,
  .wds p,
  .frows p,
  .fmt p,
  .orail p,
  .conn p,
  .cases p,
  .chain p,
  .tline p,
  .esc__e p,
  .hst__row p,
  .gr__n,
  .gr__t,
  .fch__t span,
  .fr p,
  .fr q,
  .res p,
  .show__t p,
  .ways p,
  .opl p,
  .ctab__in span,
  .guard p,
  .guard b,
  .mega .feat p,
  .rule,
  .gstrip li,
  .cred span:not(.v),
  .esp__c p,
  .esp__pts p,
  .pru__l p,
  .tl span,
  .ost .oin p,
  .chan p,
  .intr p{font-size:17px;line-height:1.55}
  .motor__h h2,
  .ilist li button,
  .erpwall .mk .tx,
  .logos__n span,
  .igrid q{font-size:16px;line-height:1.5}
  /* el pie de una cifra y el de una foto editorial son frases que se leen,
     no creditos: suben, pero se quedan por debajo del cuerpo para que
     sigan leyendose como pie */
  .figs p,.shot figcaption span,.prs__c p{font-size:15.5px;line-height:1.5}
}

/* ---- Movil: el contenido se apila, solo los controles se deslizan.
   Medido a 390 px: .igrid ocupaba 3,982 px de ancho real con 390 visibles, o
   sea que once de trece tarjetas estaban fuera de la pantalla. Cambiar alto
   por contenido escondido fue un mal negocio. */
@media (max-width:760px){
  .icards,.igrid,.icards:has(>*:nth-child(3)),.igrid:has(>*:nth-child(3)){
    display:grid!important;grid-template-columns:1fr!important;gap:2px!important;
    overflow:visible!important;margin-inline:0!important;padding-inline:0!important;
    scroll-snap-type:none!important}
  .icards>*,.igrid>*{width:auto!important;min-width:0!important;scroll-snap-align:none!important}


  /* los ERP: dieciocho marcas en reja de tres, sin texto cortado */
  .enc__b .erpwall{display:grid!important;grid-auto-flow:row!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:none!important;
    grid-auto-columns:auto!important;gap:2px!important;overflow:visible!important;
    margin-inline:0!important;padding-inline:0!important;scroll-snap-type:none!important}
  .enc__b .erpwall>*:nth-child(n+10){display:flex!important}
  .enc__b .erpwall>*:nth-child(n+19){display:none!important}
  .enc__b .erpwall .mk b{white-space:normal;text-align:center;line-height:1.35}

  /* la tira de garantias: tres renglones apilados con 14 px entre ellos y
     pegados al bloque de arriba */
  .gstrip{margin-top:var(--v3);gap:28px}
  .gstrip li{flex:1 1 100%}
}

/* ---- El aire entre secciones, medido contra el ancho y no contra el alto.
   El relleno de seccion estaba en 12vh, que en un telefono de 844 px de alto
   da 101 px de cada lado: 202 por seccion, 3,030 px en la portada, 3.6
   pantallas de nada. El aire se percibe contra el ANCHO de la columna, y en
   390 px la columna mide 350, no 1400. Baja a 72. */
@media (max-width:760px){
  .sec,.sec.px{padding-block:clamp(56px,8.5vh,80px)}
  .cta{padding-block:clamp(64px,9.5vh,96px)}
  /* .ctab ya estaba en 64 px y .hoy__stick / .motor__stick en 72: tocarlos
     solo los hacia crecer, asi que se quedan como estaban */
  .sec__h{margin-bottom:clamp(26px,3.4vh,38px)}
}

/* ---- Los botones de las bandas intermedias.
   .hero__btns es el par de botones de TODO el sitio, no solo el del hero. La
   regla flex:1 1 100% que escribi para el hero servia en una fila (da ancho)
   y rompia en una columna (pide alto y colapsa a 24 px). Queda acotada. */
@media (max-width:760px){
  .hero .hero__btns .btn,.fin__cta .hero__btns .btn{flex:1 1 100%}
  .ctab__in .hero__btns .btn,.sub__cta .btn,.ask .btn{flex:0 0 auto;width:100%;height:var(--h)}
  /* una banda pegada al cierre repetiria el mismo llamado dos veces seguidas:
     ahi la frase se queda y los botones salen */
  .ctab:has(+ .fin) .hero__btns,.ctab:has(+ .cta) .hero__btns{display:none}
  .ctab:has(+ .fin) .ctab__in,.ctab:has(+ .cta) .ctab__in{gap:0}
}

/* ---- La banda de ancho completo, con video encima de su propia foto.
   La imagen se queda y sigue cargando en diferido; el video entra en opacidad
   cero y aparece cuando de verdad empieza a reproducir. Arranca al entrar a la
   vista y se pausa al salir, porque una banda puede estar a seis mil pixeles
   de la parte de arriba y no tiene caso gastar datos en lo que nadie ve. */
.bleed__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease);pointer-events:none;z-index:1}
.bleed__v.on{opacity:1}
.bleed::after{z-index:2}
@media (max-width:820px){
  .bleed__v{inset:auto;top:0;left:0;width:100%;height:208px;object-position:62% 50%;
    -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);
    mask-image:linear-gradient(180deg,#000 58%,transparent)}
}
@media (prefers-reduced-motion:reduce){.bleed__v{display:none}}

/* ---- El degradado del hero, encima del video.
   El video se escribio con z-index 1 y el ::after se quedo en auto, asi que el
   video lo tapaba: mientras corria no habia degradado al pie ni oscurecido a la
   izquierda, y la imagen se cortaba en seco contra la seccion siguiente.
   imagen (0) -> video (1) -> degradado (2) -> texto (3). */
.bhero::after{z-index:2}
.bhero__in{z-index:3}

/* ---- El ciclo completo de una industria: la misma solicitud, hasta el cobro.
   Una espina vertical con el artefacto real de cada paso, para que se lea como
   una conversacion que termina y no como un diagrama de etapas. */
.cyc{list-style:none;margin:0;padding:0}
.cyc li{display:grid;grid-template-columns:minmax(0,152px) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,44px);padding:clamp(24px,2.6vw,36px) 0;
  border-top:1px solid var(--line);position:relative;align-items:start}
.cyc li:last-child{border-bottom:1px solid var(--line)}
.cyc__k{position:relative;padding-left:24px;align-self:stretch}
.cyc__k::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;
  border-radius:50%;border:1.5px solid var(--line3);background:var(--bg)}
.cyc li:last-child .cyc__k::before{background:var(--sig);border-color:var(--sig)}
.cyc__k::after{content:"";position:absolute;left:4px;top:calc(.42em + 13px);
  bottom:calc(clamp(24px,2.6vw,36px) * -1);width:1px;background:var(--line2)}
.cyc li:last-child .cyc__k::after{display:none}
.cyc__k span{font:500 11.5px/1.5 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg4)}
.cyc__b b{display:block;font-size:clamp(19px,1.45vw,23px);line-height:1.28;
  letter-spacing:-.01em;color:var(--fg)}
.cyc__b>p{margin:14px 0 0;color:var(--fg3);max-width:32em}
.cyc__a{align-self:start;padding-top:2px}
.cyc__chat{display:inline-block;max-width:29em;background:var(--s3);
  border-radius:18px 18px 18px 6px;padding:13px 18px 11px}
.cyc__chat--p{background:var(--s2);border:1px solid var(--line2);
  border-radius:18px 18px 6px 18px}
.cyc__chat p{margin:0;color:var(--fg2)}
.cyc__chat small{display:block;margin-top:7px;font:500 11px var(--mono);
  letter-spacing:.07em;color:var(--fg4)}
.cyc__chips{display:flex;flex-wrap:wrap;gap:8px}
.cyc__chips span{border:1px solid var(--line2);border-radius:999px;padding:8px 14px;
  font-size:15.5px;color:var(--fg2);background:var(--s1)}
.cyc__doc{display:flex;align-items:center;gap:14px;background:var(--s1);
  border:1px solid var(--line2);border-radius:12px;padding:14px 18px;max-width:32em}
.cyc__doc svg{width:20px;height:23px;flex:0 0 auto;fill:none;stroke:var(--sig);
  stroke-width:1.4;stroke-linejoin:round}
.cyc__doc b{font-size:16px;line-height:1.35;color:var(--fg2)}
.cyc__doc small{display:block;margin-top:3px;font-size:15px;color:var(--fg4)}
.cyc__fol{display:inline-flex;align-items:center;gap:12px;background:var(--s1);
  border:1px solid var(--line2);border-radius:999px;padding:10px 18px}
.cyc__fol code{font:500 13.5px var(--mono);letter-spacing:.05em;color:var(--sig)}
.cyc__fol span{font-size:15.5px;color:var(--fg3)}
@media (max-width:1060px){
  .cyc li{grid-template-columns:minmax(0,132px) minmax(0,1fr)}
  .cyc__a{grid-column:2;margin-top:16px;padding-top:0}
}
@media (max-width:760px){
  .cyc li{grid-template-columns:1fr;gap:12px;padding:24px 0}
  .cyc__a{grid-column:1;margin-top:14px}
  .cyc__k::after{display:none}
  .cyc__chat{max-width:100%}
}

/* ---- El texto de la banda, encima de su degradado.
   .bleed__t y .bleed__s ya estaban en z-index 2, y el degradado que puse para
   que ganara al video quedo en el mismo indice: un ::after se genera al final,
   asi que con indice igual pintaba SOBRE las letras y las apagaba.
   imagen (0) -> video (1) -> degradado (2) -> texto (3). */
.bleed__t,.bleed__s{z-index:3}

/* ==== v2 CONVERSACION. El hilo completo como pieza central: una sola columna,
   la etapa como marca delgada al costado y ningun titulo, porque el hilo se
   lee solo. Es lo mas parecido a ensenar la pantalla. */
.cyv{list-style:none;margin:0 auto;padding:0;max-width:800px}
.cyv li{display:grid;grid-template-columns:132px minmax(0,1fr);gap:20px;
  align-items:start;padding:0 0 26px;position:relative}
.cyv li:last-child{padding-bottom:0}
.cyv__k{font:500 11px/1.9 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg4);text-align:right;padding-top:12px}
.cyv li:last-child .cyv__k{color:var(--sig)}
.cyv__a>*{margin-top:0}
.cyv li:nth-child(2) .cyv__a,.cyv li:nth-child(4) .cyv__a,
.cyv li:nth-child(5) .cyv__a{display:flex;justify-content:flex-end}
.cyv li:nth-child(3) .cyv__a .cyc__chips{justify-content:flex-start}
@media (max-width:760px){
  .cyv li{grid-template-columns:1fr;gap:7px;padding-bottom:20px}
  .cyv__k{text-align:left;padding-top:0}
  .cyv li:nth-child(2) .cyv__a,.cyv li:nth-child(4) .cyv__a,
  .cyv li:nth-child(5) .cyv__a{justify-content:flex-start}
}

/* ==== v3 y v4. Dos columnas y una imagen fija que ocupa la mitad de la
   pantalla mientras se recorre la seccion. v3 usa la foto de la industria a la
   derecha; v4 la pieza recortada sobre negro a la izquierda. */
.cym{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.cym__l{list-style:none;margin:0;padding:0}
.cym__l li{padding:clamp(18px,2vw,26px) 0;border-top:1px solid var(--line)}
.cym__l li:first-child{border-top:0;padding-top:0}
.cym__k{display:block;font:500 11px/1.6 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg4);margin-bottom:7px}
.cym__l li:last-child .cym__k{color:var(--sig)}
.cym__l b{display:block;font-size:clamp(17.5px,1.25vw,20px);line-height:1.32;
  letter-spacing:-.005em;color:var(--fg)}
.cym__f{margin:0;position:sticky;top:96px;border-radius:14px;overflow:hidden;
  background:var(--s1)}
.cym__f img{display:block;width:100%;height:clamp(420px,58vh,620px);object-fit:cover}
.cym--4 .cym__f img{object-fit:contain;height:clamp(380px,52vh,560px)}
@media (max-width:860px){
  .cym{grid-template-columns:1fr;gap:22px}
  .cym__f{position:static;order:-1}
  .cym__f img{height:230px}
  .cym--4 .cym__f img{height:260px}
}

/* ==== v5 ALTERNANCIA. Renglones de ancho completo que cambian de lado, con un
   corte de imagen a media seccion para que la vista respire. */
.cya{list-style:none;margin:0;padding:0}
.cya>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
  padding:clamp(22px,2.4vw,32px) 0;border-top:1px solid var(--line)}
.cya>li:first-child{border-top:0;padding-top:0}
.cya>li:nth-child(even) .cya__t{order:2}
.cya>li:nth-child(even) .cya__a{order:1;display:flex;justify-content:flex-start}
.cya>li:nth-child(odd) .cya__a{display:flex;justify-content:flex-end}
.cya__t span{display:block;font:500 11px/1.6 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg4);margin-bottom:8px}
.cya>li:last-child .cya__t span{color:var(--sig)}
.cya__t b{display:block;font-size:clamp(18px,1.35vw,22px);line-height:1.3;
  letter-spacing:-.008em;color:var(--fg)}
.cya__a>*{margin-top:0}
.cya>li.cya__cut{display:block;padding:clamp(12px,1.6vw,22px) 0;
  border-top:1px solid var(--line)}
.cya__cut img{display:block;width:100%;height:clamp(180px,26vh,280px);
  object-fit:cover;border-radius:14px}
@media (max-width:860px){
  .cya>li{grid-template-columns:1fr;gap:13px;padding:22px 0}
  .cya>li:nth-child(even) .cya__t{order:0}
  .cya>li:nth-child(even) .cya__a,.cya>li:nth-child(odd) .cya__a{justify-content:flex-start}
  .cya__cut img{height:170px}
}

/* ---- Las imagenes que flotan sueltas sobre la pagina.
   Medido: las 26 imagenes de fondo oscuro tienen el borde entre 13 y 29, y el
   fondo del sitio es 10,7,6. No se puede igualar el color porque el fondo de
   esas fotos es degradado, no plano. Lo que si se puede es disolver el borde,
   y entonces ya no hay arista que delate el rectangulo.
   Solo aplica a las que NO van dentro de un marco. */
.pz__f img,.cym--4 .cym__f img{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),
                     linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),
             linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask-composite:intersect}
/* la figura de la composicion 4 deja de ser tarjeta: la pieza flota */
.cym--4 .cym__f{background:none;border-radius:0}
.cym--4 .cym__f img{background:none}

/* ---- Aire de movil, medido. El relleno de seccion son 1,548 px en toda la
   pagina. Baja lo justo donde no hace falta y no se toca el de los llamados,
   que si necesitan separarse de lo que va antes. */
@media (max-width:760px){
  .sec,.sec.px{padding-block:clamp(48px,7.4vh,68px)}
  .sec__h{margin-bottom:clamp(22px,2.9vh,32px)}
  .cyc li{padding:20px 0}
  .cyv li{padding-bottom:17px}
  .cym__l li{padding:17px 0}
  .cya>li{padding:19px 0}
}

/* la segunda banda es mas baja que la primera: es un respiro, no un capitulo */
.bleed--b{height:clamp(240px,34vh,380px)}
.bleed--b .bleed__t{font-size:clamp(21px,2.1vw,34px);max-width:15em}
@media (max-width:820px){.bleed--b img{height:176px}}

/* ---- "El criterio" en movil: la foto a media lista.
   Arriba se veia una vez y dejaban 1.7 pantallas de texto seguido detras. En
   escritorio la foto se queda pegada al costado, que es donde si acompaña toda
   la lectura; en movil no hay costado, asi que baja al centro de la lista. */
.crit__mid{display:none}
@media (max-width:860px){
  .crit>figure{display:none}
  .crit__mid{display:block;list-style:none;margin:8px 0 4px;padding:0}
  .crit__mid::before{display:none}
  .crit__mid img{display:block;width:100%;height:214px;object-fit:cover;
    object-position:62% 50%;border-radius:12px}
}

/* ---- El reloj de las paginas de distribuidor.
   Franjas de ancho completo que alternan de tono, con la hora grande a la
   izquierda. Distinta a las cinco composiciones del ciclo de industrias: no es
   espina, ni hilo, ni foto partida, ni pieza, ni alternancia. El ultimo
   renglon no lleva artefacto porque no es un paso, es el remate. */
.rel{list-style:none;margin:0;padding:0;border-radius:16px;overflow:hidden}
.rel__s{display:grid;grid-template-columns:minmax(0,164px) minmax(0,1fr);
  gap:clamp(18px,2.6vw,48px);align-items:start;
  padding:clamp(20px,2.3vw,30px) clamp(18px,2.2vw,34px)}
.rel__s:nth-child(odd){background:var(--s1)}
.rel__h span{display:block;font:500 clamp(21px,1.9vw,29px)/1 var(--mono);
  letter-spacing:-.02em;color:var(--fg2);font-variant-numeric:tabular-nums}
.rel__h small{display:block;margin-top:8px;font:500 11px/1.5 var(--mono);
  letter-spacing:.11em;text-transform:uppercase;color:var(--fg4)}
.rel__b b{display:block;font-size:clamp(17.5px,1.3vw,21px);line-height:1.32;
  letter-spacing:-.005em;color:var(--fg)}
.rel__b>.cyc__chat,.rel__b>.cyc__chips,.rel__b>.cyc__doc,.rel__b>.cyc__fol{margin-top:15px}
/* el remate: la hora se apaga y el renglon se enciende */
.rel__s--fin{background:var(--s2)!important;align-items:center}
.rel__s--fin .rel__h span{color:var(--fg4);font-size:clamp(19px,1.5vw,24px)}
.rel__s--fin .rel__h small{color:var(--sig)}
.rel__s--fin .rel__b b{font-size:clamp(18.5px,1.5vw,24px);color:var(--fg)}
@media (max-width:760px){
  .rel{border-radius:12px}
  .rel__s{grid-template-columns:1fr;gap:10px;padding:20px 17px}
  .rel__h{display:flex;align-items:baseline;gap:12px}
  .rel__h span{font-size:20px}
  .rel__h small{margin-top:0}
  .rel__b>.cyc__chat,.rel__b>.cyc__chips,.rel__b>.cyc__doc,.rel__b>.cyc__fol{margin-top:13px}
}

/* ==================================================================
   LA ESCALA DE TEXTO, CORREGIDA
   Medida sobre la pagina renderizada, no sobre la hoja de estilo: lo
   que se lista aqui son los tamaños calculados que resultaron abajo
   del piso de lectura. El criterio: un rotulo en versalitas puede ser
   chico, un renglon de contenido no.
   ================================================================== */

/* ---- Los rotulos. 11.5 px en las 143 paginas era el piso mas repetido
   del sitio. Suben a 12.5, que sigue leyendose como rotulo. */
.lab{font-size:12.5px}
.sec__h .lab,.hero .lab{font-size:12.5px}

/* ---- El heroe. El parrafo que sostiene el titular estaba en el piso
   justo (17.4 px en escritorio, 16 en movil). Sube y con el la
   interlinea, que a este tamaño es la mitad del problema. */
.hero__t p,.hero p.hero__lead,.hero .hero__p{font-size:clamp(17.5px,1.34vw,20.5px);line-height:1.58}

/* ==================================================================
   SECCION 02 · LO QUE RECIBE
   ================================================================== */

/* ---- La pieza ocupa el escenario. Antes: centrada, con tope de ancho,
   dentro de un panel de 500 px de alto. El resultado era una maqueta
   chica flotando en un rectangulo vacio. */
.rxs__art{place-items:stretch;align-content:stretch}
.rxs__pane{padding:clamp(18px,1.7vw,26px)}
.rxpdf{width:100%;max-width:none;padding:clamp(22px,2.2vw,34px) clamp(24px,2.4vw,38px) 20px;
  font-size:clamp(13px,1.05vw,15px);line-height:1.35}
.rxau{width:100%;max-width:none}
.rxp{width:100%;height:100%}
.rxs__art>*{width:100%}

/* ---- Y con mas espacio, la letra sube. */
.rxs__tabs button{font-size:clamp(15px,1.15vw,17px);padding:18px 15px 20px}
.rxs__tabs button small{font-size:11.5px;letter-spacing:.1em}
.rxs__oh{font-size:clamp(15.5px,1.2vw,17.5px)}
.rxs__oh span{font-size:11px}
.rxs__src{font-size:11.5px}
.rxs__ol dt{font-size:11.5px;letter-spacing:.1em}
.rxs__ol dt u{font-size:10.5px;width:17px;height:17px}
.rxs__ol dd{font-size:clamp(16px,1.24vw,18.5px);line-height:1.42}
.rxs__ol dd em{font-size:clamp(14px,1.05vw,15.5px)}
.rxs__ol dd q{font-size:10.5px}
.rxs__of{font-size:15px}
.rxs__ol dl>div{grid-template-columns:132px minmax(0,1fr);padding:15px 0}

/* ---- El PDF de la maqueta: era 11.5 px de base con celdas de 8.5. */
.rxpdf header b{font-size:clamp(15px,1.25vw,17.5px)}
.rxpdf header small,.rxpdf footer{font-size:11px}
.rxpdf th{font-size:10.5px}
.rxpdf td{padding:8px 7px}
.rxpdf td.pn,.rxpdf td.q{font-size:clamp(12px,.98vw,13.5px)}
.rxpdf td.s span{font-size:10px}
.rxpdf td.s{width:124px}

/* ---- El plano y la nota de voz. */
.rxp text{font-size:12px}
.rxp .mk text{font-size:11px}
.rxau__v small{font-size:12.5px}

/* ==================================================================
   LAS OTRAS MAQUETAS
   ================================================================== */

/* ---- El tablero del 07 tenia el texto mas chico de todo el sitio. */
.dash-ni{font-size:11.5px}
.dash-chip{font-size:10.5px}
.dash-pe{font-size:11px}
.cl{font-size:9.5px;letter-spacing:.09em}
.ac{font-size:10px}
.nm{font-size:11.5px}

/* ---- La tira de resultados del 08. */
.cz__g{font-size:12px}
.cz__u{font-size:14.5px}
.cz__nota{font-size:13.5px}

/* ---- La tarjeta de conversacion del 04 y los chips. */
.chip{font-size:12.5px}
.st{font-size:11.5px}

@media (max-width:860px){
  /* En movil el 02 es una columna: el escenario ya no compite con la
     lista, asi que la maqueta puede crecer mas. */
  .rxs__pane{padding:18px 16px;min-height:0}
  .rxpdf{padding:20px 18px 16px;font-size:13px}
  .rxs__ol dl>div{grid-template-columns:1fr;gap:6px;padding:14px 0}
  .rxs__ol dt{padding-top:0}
  .rxs__tabs button{font-size:15px;padding:15px 12px 17px}
}


/* ---- Lo que el bloque anterior no alcanzó por especificidad. Se midió otra
   vez sobre la página renderizada y estos quedaron abajo del piso: el párrafo
   del héroe (su regla vive en .hero__row p) y el tablero del 07, cuyas reglas
   están anidadas en .dash-card y .dash-row. */
.hero__row p{font-size:clamp(17.5px,1.34vw,20.5px);line-height:1.58}
.dash-card .cl{font-size:10px}
.dash-row .ac{font-size:10.5px}
.dash-row .nm{font-size:12px}
.dash-top .lk{font-size:11px}
.dash-top .ask{font-size:11px}
.dash-nav b,.dash-nav span{font-size:11.5px}
.tray__f small{font-size:11.5px}
.rxs__ol dd em{font-size:clamp(14px,1.05vw,15.5px)}
.rxau__v small,.rxs__pane em{font-size:12px}
.hoy__who{font-size:12.5px}
.tn__k{font-size:11px}
.sig{font-size:14px}
.erpwall b,.mq b{font-size:11px}
.pru__n span{font-size:12.5px}
@media (max-width:860px){
  .hero__row p{font-size:17px;line-height:1.55}
}


/* ---- El último corte: los tres nodos que seguían abajo de 10 px, medidos otra
   vez. Son rótulos de maqueta, así que no suben a tamaño de lectura; suben a
   que se puedan leer. Y el lead de sección, que en móvil quedaba en el piso. */
.dash-chart .lg span,.dash-chart span{font-size:10.5px}
.erpwall b,.mq b,.chips a,.chips span{font-size:11px}
.cta .lab,.pru .lab{font-size:11.5px}
.lead{font-size:clamp(17px,1.3vw,20.5px)}
@media (max-width:860px){.lead{font-size:17.5px;line-height:1.52}}


/* ---- Las maquetas de texto y correo del 02: los timestamps y las etiquetas de
   remitente eran lo último abajo de 10 px. */
.rxtx small,.rxml small,.rxml__s small{font-size:11px}
.rxtx p,.rxml p{font-size:clamp(14.5px,1.12vw,16.5px)}
.rxpdf td.s span{font-size:10.5px}

/* ==================================================================
   EL PISO DE LECTURA
   Medido sobre las 143 páginas renderizadas: 6,579 nodos de texto
   estaban por debajo de 13 px, casi todos dentro de las maquetas.
   Dos pisos: 11 px para rótulos en versalitas, 13 px para frases.
   ================================================================== */

/* ---- El panel de cotización del ERP. Es la maqueta más repetida del
   sitio: sale en las 25 páginas de integración y en el recorrido. */
.oq__b span{font-size:11px}
.oq__h i{font-size:11px}
.oq__h b{font-size:15px}
.oq__m dt{font-size:11px}
.oq__m dd{font-size:13.5px}
.oq__hd span,.oq__hd u,.oq__hd s{font-size:11px}
.oq__r span{font-size:14px}
.oq__r span em{font-size:11.5px}
.oq__r u,.oq__r s{font-size:12.5px}
.oq__f small{font-size:11.5px}
.oq__f b{font-size:17px}
.oq__cap,.dq__cap{font-size:11px}

/* ---- El recorrido: "Resultado" salía en 10 px en catorce páginas. */
.oin b{font-size:11px}
.oin p{font-size:14px}
.ost__s{font-size:11.5px}
.ost h3{font-size:15.5px}

/* ---- Las fichas de campo, que son el patrón más común del sitio:
   etiqueta arriba, valor abajo. La etiqueta iba en 10 px. */
dl>div>dt,.fl dt,.tn__k,.tk,.rxft .co b{font-size:11.5px}
dl>div>dd{font-size:14px}

/* ---- Los casos: "Peaking entendió" y "Peaking pregunta" son el
   rótulo que explica la demostración entera, y estaba en 9.5. */
.un small,.ms small,.u small,.m small,.rxcl p small{font-size:11.5px}
.un,.ms,.u,.m{font-size:14.5px}

/* ---- El muro de ERP: el renglón que dice qué es cada sistema. */
.erpwall .mk b,.mk .vs .vr,.bd small{font-size:11px}
.erpwall .mk span,.mk strong{font-size:14px}

/* ---- Pies de foto de las solicitudes reales. */
.rq-ph figcaption{font-size:11px}

/* ---- Las citas de fuente del informe: 39 nodos en trece páginas. */
.figs cite,cite{font-size:11.5px;line-height:1.45}

/* ---- El tablero de conversaciones: el texto más chico de todo el
   sitio estaba aquí, en 7.5 px. */
.dash-row .cn{font-size:10.5px}
.dash-recent .dash-row span{font-size:11px}

/* ---- El bloque de escala y el riel de etapas, que en móvil caían. */
.esc__e b,.esc__h b{font-size:11px}
.rail div{font-size:11.5px}
.fch__col small,.tn__fix,.rxs__tot small{font-size:11.5px}

@media (max-width:860px){
  /* En móvil el ancho aprieta y varias maquetas bajaban otro escalón. */
  .rxft .co b,.rxft .co span{font-size:11.5px}
  .erpwall .mk b,.mk .vs .vr{font-size:11px}
  .rail div{font-size:11.5px}
  .esc__e b,.esc__h b{font-size:11px}
  .oq__r span{font-size:13.5px}
  .oin p{font-size:13.5px}
}

/* ==================================================================
   EL TEXTO DE LECTURA DEJA DE SER TEXTO DE APOYO
   Las descripciones de tarjetas, listas y fichas usaban --fg3, que es
   el tono con el que el sistema marca lo secundario. No son
   secundarias: son el texto que el visitante lee para entender qué
   hace Peaking. Suben a --fg2.
   ================================================================== */
.cards article p,.rows article p,.icards p,.outc p,.srail p,
.tiles p,.bento div p,.trio p,.pano div p,.stk div p,.duo p,
.split ol li p,.ledg p,.wide div p,.eng div p,.pair p,
.lnl p,.links a p,.fr p,.idx p{color:var(--fg2)}

/* ---- Los pies que explican una cifra o una imagen: eran --fg4. */
.figs cite,.stats .src,.pz__s,.bleed__s,.beat span{color:var(--fg3)}

/* ---- El cuerpo de la prosa larga, que es donde más rato pasa el ojo. */
.prs p,.prose p,.lgl__b p,.lgl__b li{color:var(--fg2)}

/* ==================================================================
   EL PISO DE LECTURA · regla de sistema
   Declarado por tipo de elemento y no por selector, porque las reglas
   originales están anidadas y ganan por especificidad. Lleva
   !important a propósito: un piso que pierde no es un piso.
   Medido sobre las 143 páginas: había 6,453 nodos abajo de 13 px.
   ================================================================== */

/* ---- Rótulos, etiquetas de campo y marcas de canal: 12 px. */
main small,
main cite,
main figcaption,
main dt,
main q,
main .ch,
main .cl,
main .k,
main .kk,
main .tag,
main .cn,
main .lk,
main .ask,
main .st,
main .tk,
main .tn__k,
main .tn__fix,
main .rxau__k,
main .dq__st,
main .oq__cap,
main .dq__cap,
main .ost__s,
main .dash-chip,
main .dash-ni,
main .dash-pe,
main .esc__e b,
main .esc__h b,
main .rail div,
main .oin b,
main .oq__b span,
main .oq__h i,
main .oq__hd span,
main .oq__hd u,
main .oq__hd s,
main .oq__m dt,
main .rxpdf th,
main .rxpdf footer,
main .rxpdf header small,
main .erpwall .mk b,
main .mk .vr,
main .vs .vr{font-size:12px!important;line-height:1.45}

/* ---- Lo que es una frase, aunque viva dentro de una maqueta: 13.5 px. */
main .oq__r span,
main main .oin p,
main .cz__f span,
main .cz__g,
main .ac,
main .nm,
main .rxtx p,
main .rxml p,
main .conv .msg,
main .conv .ask,
main .msg,
main .un,
main .ms,
main .u,
main .m,
main .rq p,
main .rs p,
main .bd,
main .rqf__bub{font-size:13.5px!important;line-height:1.45}

/* ---- Las dos excepciones legítimas: un superíndice y la marca de
   agua del panel, que no son texto de lectura. */
main sup,main .oq__r s sup{font-size:.7em!important}

@media (max-width:860px){
  /* En móvil el ancho aprieta, pero el piso no baja. */
  main small,main cite,main figcaption,main dt,main q,
  main .ch,main .cl,main .k,main .cn{font-size:12px!important}
}


/* ---- Segunda pasada del piso. La auditoría volvió a correr y quedaban
   31 grupos entre 10.5 y 11 px que la primera lista no nombraba. Los dos
   más repetidos son navegación: la miga (en las 143 páginas) y el muro de
   ERP (637 nodos). Un enlace en el que hay que hacer clic no puede ir a
   11 px. */
main .crumb a,
main .crumb span,
main .chips a,
main .chips span,
main .erpbadge b,
main .prs__go,
main .cs__go,
main .isrc b,
main .isrc,
main .ba__h span,
main .bd .n,
main .tn__n span,
main .dash-legend span,
main .stats div span,
main .cym__k,
main .cyv__k,
main .cya__t span,
main .esc__l span,
main .row div span,
main thead th,
main td.s span{font-size:12.5px!important;letter-spacing:.07em}

/* ---- Y lo que dentro de esos bloques es una frase, no un rótulo. */
main .isrc{font-size:13px!important;letter-spacing:0;line-height:1.55}
main .row div span{letter-spacing:0}


/* ---- Tercera y última pasada. Quedaban doce nodos en 10.5 y unos
   treinta en 11: los rótulos de las maquetas de solicitud, la insignia
   de compatibilidad, los enlaces "Ver el giro" y los pies de gráfica.
   Con esto el piso del sitio queda en 12 px. */
main .rqf__uh b,
main .badge b,
main .tg,
main .go,
main .dash-panel h5,
main .rxs__oh span,
main .legend span,
main .gr__lg span,
main .hero__foot span,
main .erp em,
main .hoy__cap span,
main .tray__h span,
main .seg3 button{font-size:12.5px!important}
main .hero__foot span,main .legend span{letter-spacing:.07em}


/* ---- El cierre del piso: el rótulo de la banda de cierre sale en las
   138 páginas y estaba en 11.5. Con esto el mínimo del sitio es 12.5. */
main .cta .lab,
main .pru .lab,
main .rxs__src b,
main .rxs__src,
main .rxft .co b,
main .rxft .co span,
main .esc__x em,
main .esc__x s,
main .lgl__d,
main .erp span,
main .rq-at span,
main .oq__r span em{font-size:12.5px!important}

/* ==================================================================
   ARCHIVO EN LOS RÓTULOS, MONO SOLO EN EL DATO
   --mono pasó a ser Archivo. Plex Mono vive ahora en --code y se
   aplica solo donde el dígito tiene que alinearse en columna o donde
   el renglón es dato de máquina y no prosa: número de parte, folio,
   SKU, hora, importe. Ahí la mono no es decoración, es función.
   ================================================================== */
.oq__r span em,
.oq__f b,
.oq__m dd,
.oq__h b,
.rxpdf td.pn,
.rxpdf td.q,
.cyc__fol code,
.rel__h span,
.erp em,
.fl code,
.dq li b,
.pr,
.sol__t b,
.cnt b,
.esc__l b,
.fun b{font-family:var(--code)!important;font-variant-numeric:tabular-nums}

/* ==================================================================
   LOS SIETE PUNTOS, MEDIDOS Y SUBIDOS
   ================================================================== */

/* ---- 1. El renglón que describe el producto en la cotización.
   "12 m · empalme vulcanizado" no es un rótulo: es lo que define
   la banda. Iba en 12.5 px de mono. */
main .sol .row div span,
main .row>div>span{font-size:14px!important;letter-spacing:0;color:var(--fg3)}
.sol .row div b,.row>div>b{font-size:16px!important}

/* ---- 2. El correo del 02. Es texto para leer, no una maqueta
   decorativa: el visitante tiene que poder leer la solicitud. */
main .rxs .rxml__b p,main .rxs .rxml p{font-size:15.5px!important;line-height:1.55}
main .rxs .rxml__s b,main .rxs .rxml__h b{font-size:16.5px!important}
main .rxs .rxml__s span,main .rxs .rxml__h span{font-size:13px!important}
main .rxs .rxtx p{font-size:15px!important;line-height:1.5}

/* ---- 3 y 4. La franja de escala del 04: los criterios y el
   descarte. Con Archivo, el mismo cuerpo ya pesa más; además suben. */
main .esc .esc__l span{font-size:13.5px!important;letter-spacing:.05em;color:var(--fg2)}
main .esc .esc__x em{font-size:13.5px!important;letter-spacing:.04em;text-transform:none;color:var(--fg3)}
main .esc .esc__x s{font-size:15px!important}

/* ---- 5. El riel de etapas del 04. Va junto a un titular de 115 px:
   a 12 px desaparecía. */
main .motor .rail div{font-size:14px!important;letter-spacing:.06em}
.rail div.on{color:var(--fg)}

/* ---- 6. Los enlaces del mega menú. Son navegación, y había
   columnas de ocho a 15 px con poca interlínea. */
body .mega .mega__in a{font-size:16px!important;line-height:1.85}
body .mega .mega__in h6{font-size:12.5px!important;letter-spacing:.09em}
body .mega .feat b{font-size:19px!important}
body .mega .feat p{font-size:14.5px!important;line-height:1.5}

/* ---- 7. Las listas de industrias y de frentes. */
main .idx li a{font-size:16px!important}
.idx li a small{font-size:13px!important}
main .fr .bd b{font-size:18.5px!important}
main .fr .bd p,main .fr p{font-size:14.5px!important;line-height:1.5}
.fr .n,.fr small{font-size:12.5px!important}
main .lnl b{font-size:17px!important}
main .lnl p{font-size:14.5px!important}

/* ---- Y los rótulos en general: con Archivo el mismo cuerpo se lee
   más, así que el espaciado de versalitas se afloja un punto para que
   no quede apretado. */
.lab{letter-spacing:.08em}

@media (max-width:860px){
  body .mega .mega__in a{font-size:16px!important}
  .rxml__b p,.rxml p{font-size:15px!important}
  .esc__l span{font-size:13px!important}
  .rail div{font-size:13.5px!important}
}

/* ==================================================================
   LAS DOS LISTAS QUE QUEDABAN
   ================================================================== */

/* ---- Las trece líneas de producto de la 06. Trece renglones de 16 px
   junto a una foto de 620 px de alto se leen como una nota al pie. */
main .ilist li button span{font-size:17.5px!important}
main .ilist li button{padding-top:15px!important;padding-bottom:15px!important}
main .ilist li button b,main .ilist li button .n{font-size:12.5px!important}

/* ---- Los frentes al pie de la 05. */
main .idx li a{font-size:17px!important;padding-top:18px!important;padding-bottom:18px!important}
main .idx li a small{font-size:13.5px!important}

/* ---- El texto de las tarjetas de la 05: iba suelto dentro de .bd, sin
   párrafo, así que la regla anterior no lo alcanzaba. */
main .fr .bd{font-size:15px!important;line-height:1.5}
main .fr .bd b{font-size:18.5px!important}

/* ==================================================================
   EL RITMO, AJUSTADO A LA LETRA NUEVA
   Solo donde el hueco quedó por debajo del cuerpo que lo rodea.
   ================================================================== */

/* ---- El renglón de la cotización: 6 px de aire para un texto de 16.
   Con el nombre del producto en 16 px, los renglones se tocaban. */
main .sol .row{padding-top:11px;padding-bottom:11px}

/* ---- Las fichas del recorrido y del 02. */
main .rxs__ol dl>div{padding-top:17px;padding-bottom:17px}
main .oq__r{padding-top:11px;padding-bottom:11px}

@media (max-width:860px){
  /* ---- Móvil es donde aprieta. La sección respira y, sobre todo, el
     encabezado deja de estar pegado a su contenido: 24.5 px con el lead
     en 17.5 px era menos de un renglón y medio. */
  .sec,.sec.px,.sec.bt{padding-top:clamp(74px,11vh,96px)!important;padding-bottom:clamp(74px,11vh,96px)!important}
  .sec__h{margin-bottom:38px}
  .sec__h h2{margin-bottom:18px}

  /* Dentro de los bloques: tarjetas, fichas y listas. */
  .cz__b{padding-top:30px;padding-bottom:30px}
  .fr .bd{padding-bottom:30px}
  .cards article,.rows article,.icards article,.icards a,
  .outc div,.tiles div,.trio article,.duo article{padding-top:26px;padding-bottom:26px}
  .split ol li,.stk div>div,.lnl li{padding-top:20px;padding-bottom:20px}
  .esc__l li{padding-top:18px;padding-bottom:18px}
  .rel__s{padding-top:24px;padding-bottom:24px}
  .idx li a{padding-top:20px!important;padding-bottom:20px!important}
  .ilist li button{padding-top:17px!important;padding-bottom:17px!important}

  /* Y el aire entre piezas dentro de una misma sección. */
  .cards,.rows,.icards,.outc,.tiles,.trio,.duo,.srail{row-gap:14px}
  .beat{margin-top:34px;margin-bottom:34px}
  .prs p+p,.prose p+p{margin-top:18px}
}

/* ==================================================================
   EL GROSOR
   Medido en 60 páginas: el peso 600 era el más usado del sitio, con
   2,148 nodos, y casi todos en cuerpos de 15 a 19 px. En una grotesca
   de aperturas cerradas eso se lee macizo. Se afina por tramos.
   ================================================================== */

/* ---- 17 a 22 px: títulos de tarjeta, renglones de lista, enlaces.
   De 600 a 550. Es medio escalón, no un cambio de voz. */
main .links a b,
main .lnl b,
main .idx li a,
main .cards article h3,
main .rows article h3,
main .icards h3,
main .outc b,
main .tiles b,
main .trio h3,
main .duo h3,
main .pano div b,
main .stk h3,
main .bento div b,
main .ledg h3,
main .wide div b,
main .eng div b,
main .pair h3,
main .split ol li b,
main .srail b,
main .fr .bd b,
main .bd b,
main .rel__b b,
main .oin p,
main .figs b,
main .antes li b,
main .docs b,
main .words b,
main .ilist li button span{font-weight:550!important}

/* ---- Los botones. A 15.5 px el semibold los hace ver inflados. */
.btn,.btn--p,.btn--g,.btn--s{font-weight:550}

/* ---- Las pestañas y los conmutadores. */
main .fch__t span,
main .rxs__tabs button,
main .esp__tabs button,
main .seg3 button,
main .tn__n span{font-weight:520!important}

/* ---- 11 a 13 px en versalitas: aquí vivía la textura poco afinada.
   Un rótulo chico en semibold pesa mucho para lo poco que dice. */
main .lab,
main small,
main cite,
main figcaption,
main dt,
main .ch,
main .cl,
main .k,
main .cn,
main th,
main .co b,
main .fl,
main .oq__hd span,
main .oq__hd u,
main .oq__hd s,
main .oq__b span,
main .esc__l span,
main .rail div,
main .oin b,
main .ost__s,
main .erpbadge b,
main .crumb a,
main .crumb span{font-weight:520!important;letter-spacing:.085em}
main .crumb a,main .crumb span,main .esc__l span{letter-spacing:.06em}

/* ---- Texto corrido: 400, sin excepción. Un párrafo en 500 se lee
   como si todo estuviera subrayado. */
main p,
main .rxs__ol dd,
main li p,
main .prs p,
main .lgl__b p,
main .lgl__b li,
main .rxml p,
main .rxtx p{font-weight:400}

/* ---- Y donde el peso SÍ es información, se queda: el importe de una
   cotización, el total, y las cifras de los casos. */
main .oq__f b,
main .sol__t b,
main .pr,
main .figs .v,
main .stats b,
main .cz__f b,
main .cnt b,
main .fun b,
main .esc__l b{font-weight:700!important}

/* ==================================================================
   LA CITA TACHADA
   <q> cayó en el piso de rótulos junto a small y cite. No es un
   rótulo: es la frase que dice cómo suena hoy la operación.
   ================================================================== */
main .bd q,
main .fr q,
main article>q{font-size:15px!important;font-weight:400!important;letter-spacing:0;
  text-transform:none;line-height:1.45}

/* ==================================================================
   EL PISO LLEGA AL PIE Y AL MENÚ
   El piso se escribió con prefijo "main", así que nunca tocó el
   encabezado ni el pie. Medido: 1,287 de los 1,316 nodos que seguían
   abajo de 12 px eran exactamente eso.
   ================================================================== */
.foot h5{font-size:12px!important;letter-spacing:.12em}
.foot__legal{font-size:12px!important}
.foot__legal span,.foot__legal a{font-size:12px!important}
.nav__lang{font-size:12px!important;letter-spacing:.08em}

/* ==================================================================
   LOS DOS DE CONTENIDO QUE QUEDABAN
   ================================================================== */

/* ---- La insignia de formato, "PDF", sobre el naranja. Iba en 8.5 px:
   es el dato que dice cómo llegó el pedido. */
main .fl b{font-size:12px!important;font-weight:600!important;letter-spacing:.04em}

/* ---- El monograma del avatar, dentro de un círculo de 34 px. */
main .chatw header span{font-size:12px!important}

/* ---- Y el .tx, que quedó en 16 px con peso 600: es texto corrido. */
main .tx{font-weight:400!important}

/* ==================================================================
   LA TARJETA DEL 04 YA NO CORTA
   Al crecer su tipografía, el contenido llegó a 593 px a 1024 px de
   ancho, contra una caja de 570. Sube el piso del clamp.
   ================================================================== */
main .motor .card,main .card{height:clamp(610px,64vh,650px)}
@media (max-width:1000px){
  main .motor .card,main .card{height:auto;min-height:0}
}

/* ==================================================================
   LOS TRES ÚLTIMOS
   ================================================================== */

/* ---- "POR QUÉ": abre una frase de 15.5 px, iba en 10. */
main .altw b{font-size:12px!important;letter-spacing:.09em}

/* ---- Los números de paso. .fr .n y .opl .n ya tenían piso; estos dos
   comparten la forma y se habían quedado fuera. */
main .steps3 .n,main .cards .n{font-size:12px!important;letter-spacing:.11em}

/* ---- La duración de la nota de voz. */
main .cm-vn em{font-size:12px!important}

/* ==================================================================
   EL NARANJA SOLO DONDE SIGNIFICA
   Medido sobre las 143 páginas: el naranja ya estaba casi todo bien
   puesto (hover, .on, aria-selected, li:last-child). Lo que sobraba
   eran tres índices de orden y un defecto real en .chain, donde las
   DOS columnas de la comparación salían en naranja y por lo tanto el
   color no distinguía nada.
   ================================================================== */

/* ---- El defecto: .chain pintaba "Hoy" y "Con Peaking" igual. El
   último paso ya va en naranja por .chain>div:last-child, así que el
   rótulo general vuelve al gris y la comparación recupera su lado. */
main .chain small{color:var(--fg4)}
main .chain>div:last-child small{color:var(--sig)}

/* ---- Los índices de orden. Un número de secuencia no es un
   resultado; es el mueble donde se apoya el resultado. */
main .steps3 .n,
main .cards .n,
main .opl .n{color:var(--fg4)}

/* ==================================================================
   CORRECCIÓN: la última tarjeta de la cadena va RELLENA de naranja,
   así que su rótulo va oscuro y no naranja. v144 lo dejó del color
   del relleno, o sea invisible (contraste 1:1).
   ================================================================== */
main .chain>div:last-child small{color:#0A0706!important}


/* ==================================================================
   EL NARANJA EN LAS ZONAS CLAVE
   Los CTA al 16 % (hay dos por página). Los bloques de cifra al 13 %,
   porque puede haber varios y al 16 % el fondo se volvería ámbar.
   Ninguno lleva borde: el degradado muere en transparente adentro del
   propio bloque.
   ================================================================== */

/* ---- Los bloques de cifra: es el otro momento donde la página
   afirma algo, igual que un CTA. */
.stats,.figs,.cz,.pru__in{position:relative;isolation:isolate}
.stats::before,.figs::before,.cz::before,.pru__in::before{
  content:"";position:absolute;inset:-34% 0 -22%;z-index:-1;pointer-events:none;
  background:radial-gradient(112% 74% at 50% 42%,rgba(255,123,48,.13),transparent 66%)}
.stats>*,.figs>*,.cz>*,.pru__in>*{position:relative;z-index:1}

/* ==================================================================
   EL CORREO DE LA SECCIÓN 02
   El cuerpo iba en 15.5 px rodeado de texto de página en 17. No es
   maqueta decorativa: es la solicitud que hay que poder leer.
   ================================================================== */
main .rxs .rxml__b p,main .rxs .rxml p{font-size:17px!important;line-height:1.58}
main .rxs .rxml__s b{font-size:19px!important;line-height:1.3}
main .rxs .rxml__s small{font-size:12.5px!important}
main .rxs .rxml header>div>b,main .rxs .rxml header b{font-size:15.5px!important}
main .rxs .rxml header>div>small,main .rxs .rxml header small{font-size:13px!important}
main .rxs .rxml header>span{font-size:13px!important}
main .rxs .rxtx p{font-size:16.5px!important;line-height:1.55}
main .rxs .rxs__src b{font-size:14px!important}
main .rxs .rxs__tot>div>span{font-size:13.5px!important}

@media (max-width:860px){
  main .rxs .rxml__b p,main .rxs .rxml p{font-size:16px!important}
  main .rxs .rxml__s b{font-size:17.5px!important}
  main .rxs .rxtx p{font-size:15.5px!important}
}

/* ==================================================================
   EL NARANJA COMO PUNTO, NO COMO ZONA
   Los campos grandes se apagan: un lavado de 1,400 px no señala
   nada, solo tiñe, y se come el negro. El naranja se concentra
   donde la página afirma algo.
   ================================================================== */

/* ---- Se apagan los campos de sección. */
.ctab::before,.cta::before,
.stats::before,.figs::before,.cz::before,.pru__in::before{background:none!important}

/* ---- El halo de la cifra. Va detrás del NÚMERO, no de la tarjeta,
   y muere en transparente adentro de su propio radio. */
/* width:max-content es lo que hace que el halo quede CENTRADO en la
   cifra. Sin eso el <b> ocupa toda la columna, el left:50% se refiere
   a la columna y no al numero, y el brillo aparece a la derecha de la
   cifra como una mancha horizontal. Medido en pantalla, no supuesto. */
main .stats b,
main .figs b,
main .cz__n,
main .pru__n b,
main .logos__n b{position:relative;isolation:isolate;width:max-content;max-width:100%}
main .stats b::before,
main .figs b::before,
main .cz__n::before,
main .pru__n b::before,
main .logos__n b::before{
  content:"";position:absolute;left:50%;top:52%;width:150%;height:210%;
  transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,123,48,.20),transparent 70%)}

/* ---- El halo del botón primario. Una sombra difusa no puede tener
   borde: su caída es continua por construcción. */
.btn--p{box-shadow:0 10px 30px -12px rgba(250,58,50,.5),
                   0 0 46px -6px rgba(255,123,48,.40)}

/* ==================================================================
   LA MONO SALE DE LOS VALORES DE LA FICHA
   .oq__m dd viajaba dentro de la lista de --code de v137, y ahí vive
   el nombre del cliente, el canal, las condiciones y la entrega. Eso
   es prosa, no dato de máquina. El folio (.oq__h b) y el importe
   (.oq__f b) conservan la mono, que ahí sí es función.
   ================================================================== */
main .oq__m dd{font-family:var(--sans)!important;font-variant-numeric:normal}

/* ==================================================================
   2. EL GRIS APAGADO DEJA DE SER COLOR DE TEXTO
   --fg4 (174,162,152) es el tono que se pierde. 440 nodos lo usaban.
   Todo lo que sea texto legible sube a --fg2. --fg3 queda para 17 px
   para arriba, donde la masa de letra ya sostiene el tono.
   ================================================================== */
main .lab,
main small,
main cite,
main figcaption,
main dt,
main .ch,
main .cl,
main .k,
main .cn,
main .st,
main .tk,
main .nm,
main .ac,
main .ost__s,
main .oq__cap,
main .dq__cap,
main .dq__st,
main .oq__m dt,
main .oq__f small,
main .oq__hd span,
main .oq__hd u,
main .oq__b span,
main .fr small,
main .fr .n,
main .cards .n,
main .steps3 .n,
main .opl .n,
main .idx li a small,
main .ilist li button small,
main .chain small,
main .cz__f span,
main .cz__g,
main .cz__nota,
main .ways .n,
main .ways .k,
main .tl small,
main .tl__n,
main .legend,
main .hoy__who,
main .hoy__cap,
main .res .who,
main .card__note,
main .card__top .st,
main .bub small,
main .msg small,
main .node small,
main .ctl__txt .tag,
main .ctl__stats small,
main .istage__txt .tag,
main .tray__f small,
main .erp em,
main .erp span,
main .cnt span,
main .row span,
main .fun span,
main .espm small,
main .esp__hd small,
main .esp__c p small,
main .rxs__src,
main .rxs__ol dt,
main .rxcl__h small,
main .rxcl__h em,
main .rxml header small,
main .rxml header>span,
main .rxml__s small,
main .rxtx header small,
main .rxtx header span,
main .rxau__v small,
main .rxau__k,
main .rxs__oh span,
main .crumb a,
main .crumb span,
main .altw b,
main .cm-vn em,
main .dash-row .ac,
main .dash-card .cl,
main .dash-nav b,
main .dash-nav span,
main .dash-pe,
main .figs cite,
main .stats .src,
main .pz__s,
main .bleed__s,
main .beat span,
main .oq__r span,
main .oq__m dd,
main .rxs__ol dd{color:var(--fg2)!important}

/* ---- Y los rotulos en versalitas, que son los que mas se perdian,
   van en blanco. Es el texto mas chico de la pagina: necesita el
   contraste maximo, no el minimo. */
main .lab,
main .hero__top .lab,
main .sec__h .lab,
main .esc__l span,
main .rail div.on,
main .oq__hd s{color:var(--fg)!important}

/* ---- El pie y el menu siguen la misma regla. */
.foot h5{color:var(--fg2)!important}
.foot__legal,.foot__legal span,.foot__legal a{color:var(--fg2)!important}
.nav__lang{color:var(--fg2)!important}



/* ==================================================================
   EL NARANJA, VISIBLE
   El veredicto fue "no se alcanza a ver para nada". Era correcto:
   al reducir el area a puntos estrategicos deje la intensidad de
   campo grande. Menos area pide mas intensidad, no la misma.
   ================================================================== */

/* ---- El halo de la cifra: de 20 % a 52 %, con el radio cerrado.
   Ahora si hay un resplandor detras del numero. */
main .stats b::before,
main .figs b::before,
main .cz__n::before,
main .pru__n b::before,
main .logos__n b::before{
  width:132%!important;height:180%!important;
  background:radial-gradient(closest-side,rgba(255,123,48,.52),rgba(255,123,48,.16) 52%,transparent 74%)!important}

/* ---- NUEVO: la cifra lleva una barra solida debajo. Es lo unico
   que de verdad se ve a este tamano: un degradado tenue detras de un
   numero no compite con el numero, una barra solida si. */
main .stats b::after,
main .figs b::after,
main .cz__n::after,
main .pru__n b::after{
  content:"";position:absolute;left:0;bottom:-.22em;
  width:2.2em;max-width:100%;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--sig),rgba(255,123,48,.25));
  pointer-events:none}

/* ---- El punto naranja del rotulo. OJO: .lab YA trae un <i> que es
   ese punto, con su anillo. No se agrega un ::before, que duplicaba
   la marca; se refuerza el que ya existe y se obliga a mostrarse,
   porque una regla posterior lo apagaba en varios contextos. */
main .lab i{
  display:block!important;width:8px!important;height:8px!important;
  border-radius:50%;background:var(--sig)!important;flex:0 0 auto;
  margin-top:0!important;align-self:center;
  box-shadow:0 0 0 4px rgba(255,123,48,.20),0 0 14px rgba(255,123,48,.75)!important}
main .lab{display:inline-flex!important;align-items:center;gap:10px}

/* ---- El halo del boton primario: de 40 % a 70 %, mas apretado. */
.btn--p{box-shadow:0 10px 30px -12px rgba(250,58,50,.55),
                   0 0 34px -4px rgba(255,123,48,.70)}

/* ---- Y el campo de los dos momentos ancla vuelve, chico y firme:
   detras del bloque de texto del CTA, no de la seccion entera. */
.ctab__in,.cta .ctab__in{position:relative;isolation:isolate}
.ctab__in::before{
  content:"";position:absolute;left:-4%;right:40%;top:-60%;bottom:-60%;
  z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,123,48,.30),transparent 72%)}

/* ==================================================================
   LAS TRECE INDUSTRIAS, EN CAJAS
   Trece renglones separados por una linea fina no tienen forma: el
   ojo no puede agarrar ninguno y el activo se distingue apenas por
   el peso. Cada industria pasa a ser una caja, y el naranja vive en
   el contorno de la activa, que es donde se pidio.
   ================================================================== */
main .ilist{
  border-top:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-content:start}

main .ilist li{flex:none!important;min-width:0}

main .ilist li button{
  position:relative;
  display:flex!important;
  flex-direction:column;
  align-items:flex-start!important;
  gap:7px;
  width:100%;
  height:100%;
  text-align:left;
  padding:15px 15px 16px!important;
  border:1px solid var(--line2);
  border-radius:11px;
  background:var(--s1);
  white-space:normal!important;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}

main .ilist li button span{
  font-size:16px!important;
  font-weight:550!important;
  line-height:1.25;
  white-space:normal!important;
  color:var(--fg)}

/* El numero de orden va a la esquina: es referencia, no contenido. */
main .ilist li button small{
  font-size:12px!important;
  letter-spacing:.1em!important;
  color:var(--fg4);
  order:-1}

main .ilist li button i{display:none!important}

main .ilist li button:hover{
  border-color:var(--line3);
  background:var(--s2);
  transform:translateY(-1px)}

/* ---- La caja activa: el naranja en el contorno, y nada mas. */
main .ilist li button.on{
  border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.10),rgba(255,123,48,.03))!important;
  box-shadow:0 0 0 1px rgba(255,123,48,.35),0 6px 26px -12px rgba(255,123,48,.55)}
main .ilist li button.on span{color:var(--fg)}
main .ilist li button.on small{color:var(--sig)}

@media (max-width:1000px){
  /* En movil vuelven a una sola columna, que es donde caben. */
  main .ilist{grid-template-columns:1fr;gap:9px}
  main .ilist li button{padding:13px 14px 14px!important}
  main .ilist li button span{font-size:15.5px!important}
}

/* ==================================================================
   EL NARANJA SEMANTICO SOBREVIVE AL CAMBIO DE TONO
   La regla de color de esta tanda (main small{color:var(--fg2)})
   piso el naranja de las etiquetas de resultado: "Cotizacion lista",
   "Peaking propone", "Lo que resuelve bien" salieron en gris.

   En vez de listarlas a mano se extrajeron del codigo TODAS las
   reglas que ponen color:var(--sig) y se re-afirman aqui, al final.
   Asi el cambio de tono no puede volver a pisarlas.

   Quedan fuera a proposito los tres indices de orden que v144 mando
   a gris (.cards .n, .steps3 .n, .opl .n) y .chain small, que se
   corrigio para que solo el ultimo paso lleve el color.
   ================================================================== */
#iname a:hover,
main .altc .a2 small,
main .altc>div.ar,
main .ask small,
main .ba__b p::before,
main .ba__h span:last-child,
main .cov__p span,
main .cs__go,
main .ctl__txt .tag,
main .cya>li:last-child .cya__t span,
main .cyc__fol code,
main .cym__l li:last-child .cym__k,
main .cyv li:last-child .cyv__k,
main .cz__c:hover .cz__f span,
main .dash-ni.on svg,
main .dash-panel h5 svg,
main .dq__st,
main .duo .k,
main .erpwall .mk .vr:hover,
main .erpwall .mk--p .tx,
main .esc__e--s b,
main .esc__h b.s,
main .esc__l .esc__u b,
main .esp__c .k small,
main .espm small,
main .fch__col:first-child small,
main .fch__t.on i,
main .fl2__c small,
main .fnt span a:hover,
main .fun>div:nth-child(5) b,
main .gr__f a:hover,
main .gstrip svg,
main .htri__g figcaption small,
main .icards a .go,
main .igrid .go,
main .il__go:hover,
main .isrc a:hover,
main .ledg .k,
main .lnk svg,
main .lnl a:hover b,
main .lnl svg,
main .norms code,
main .oq__h i.ok,
main .orail small,
main .orail>* small,
main .ost.on .ost__s,
main .osteps .ost__s,
main .otab__r .rw.w,
main .pair .k,
main .prs__go,
main .qt__b small,
main .rel__s--fin .rel__h small,
main .req3 .un li svg,
main .reqs li svg,
main .rqf__arr,
main .rqf__ok,
main .rqf__sm .ms b,
main .rqt__p small,
main .rxau__t mark,
main .rxcl p.b small,
main .rxs__of svg,
main .rxs__ol dd q,
main .rxs__tabs button[aria-selected=true] small,
main .rxs__tot small,
main .sband__h span,
main .split li::before,
main .stats span,
main .stp4 div::before,
main .td2 li svg,
main .tiles .tk,
main .tn__k,
main .tr.hum .stt,
main .tr.hum em,
main .trio .k,
main .tt2 li svg,
main .wide figcaption span,
main .chain>div:last-child small,
main .ilist li button.on small{color:var(--sig)!important}

/* ==================================================================
   EL SISTEMA DE ENFASIS
   Una sola gramatica para todo el sitio:
     borde naranja  = esto esta elegido
     se enciende    = esto se puede elegir
   Antes habia seis maneras distintas de decir lo mismo.
   ================================================================== */

/* ---- 1. EL CONMUTADOR Manual / Copiloto / Autopiloto.
   La pildora deslizante era blanca y el texto activo casi negro, lo
   que ademas daba un contraste pesimo. Ahora la pildora es el velo
   naranja del sistema y el texto activo vuelve a ser claro. */
main .seg3 .th{
  background:linear-gradient(180deg,rgba(255,123,48,.16),rgba(255,123,48,.05))!important;
  border:1px solid var(--sig);
  box-shadow:0 0 0 1px rgba(255,123,48,.30),0 6px 22px -12px rgba(255,123,48,.65)}
main .seg3 button.on{color:var(--fg)!important}
main .seg3 button:hover{color:var(--fg)}

/* ---- 2. LOS SIETE CANALES de la seccion 02. */
main .rxs__tabs button[aria-selected=true]{
  border:1px solid var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.10),rgba(255,123,48,.03))!important;
  box-shadow:0 0 0 1px rgba(255,123,48,.28),0 6px 22px -12px rgba(255,123,48,.5)}
main .rxs__tabs button{border:1px solid transparent;transition:border-color .2s,background .2s}
main .rxs__tabs button:hover{border-color:var(--line3);background:var(--s2)}

/* ---- 3. LAS FICHAS de alternativas, en su version de pildora. */
@media (max-width:900px){
  main .fch__t.on{
    background:linear-gradient(180deg,rgba(255,123,48,.14),rgba(255,123,48,.04))!important;
    border-color:var(--sig)!important;color:var(--fg)!important;
    box-shadow:0 0 0 1px rgba(255,123,48,.30),0 6px 22px -12px rgba(255,123,48,.6)}
  main .fch__t.on i{color:var(--sig)!important}
}
main .fch__t:hover{color:var(--fg)}

/* ---- 4. EL CONMUTADOR de tonos. */
main .tn__n.on{
  border:1px solid var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.10),rgba(255,123,48,.03))!important;
  box-shadow:0 0 0 1px rgba(255,123,48,.28)}
main .tn__n{border:1px solid transparent;transition:border-color .2s,background .2s}
main .tn__n:hover{border-color:var(--line3);background:var(--s2)}

/* ---- 5. LAS TARJETAS DEL PANEL de "sale trabajo asignado".
   Son cinco tarjetas con dato y no tenian ningun estado. */
main .dash-card{transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
main .dash-card:hover{
  border-color:var(--sig);
  background:linear-gradient(180deg,rgba(255,123,48,.09),rgba(255,123,48,.02));
  transform:translateY(-1px)}
/* la tarjeta ya destacada del panel toma el borde, no el relleno */
main .dash-card.o{border:1px solid var(--sig)!important}

/* ==================================================================
   LAS PILDORAS PASAN A CAJAS
   755 enlaces de industria eran pildoras de radio 999. Una pildora
   dice "etiqueta"; una caja dice "opcion sobre la que hago clic".
   ================================================================== */
main .chips a{
  border-radius:10px!important;
  padding:11px 15px!important;
  border:1px solid var(--line2);
  background:var(--s1);
  color:var(--fg2);
  transition:border-color .2s var(--ease),background .2s var(--ease),
             color .2s var(--ease),transform .2s var(--ease)}
main .chips a:hover{
  border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.10),rgba(255,123,48,.03))!important;
  color:var(--fg)!important;
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(255,123,48,.28),0 6px 22px -12px rgba(255,123,48,.5)}
main .chips{gap:9px}
/* la que apunta a la pagina en la que ya se esta, marcada */
main .chips a[aria-current]{border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.10),rgba(255,123,48,.03))!important;
  color:var(--fg)!important}

/* ==================================================================
   Y EL RESTO DE LO NAVEGABLE toma el mismo encendido al pasar.
   ================================================================== */
main .wall a,
main .apps .pill,
main .vs .vr,
main .icards a,
main .lnl li a,
main .links a{transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
main .wall a:hover,
main .apps .pill:hover,
main .vs .vr:hover,
main .icards a:hover{
  border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.09),rgba(255,123,48,.02))!important;
  transform:translateY(-1px)}

/* ==================================================================
   EL SISTEMA DE ENFASIS, SEGUNDA TANDA
   Las cuatro tarjetas de "sale trabajo asignado" y las rejillas de
   industria. El criterio es uno: si se puede hacer clic o elegir,
   lleva el estado. Lo que solo se lee, no.
   ================================================================== */

/* ---- Las cuatro tarjetas: tenian fondo pero ni borde ni radio. */
main .opl>article{
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
main .opl>article:hover{
  border-color:var(--sig);
  background:linear-gradient(180deg,rgba(255,123,48,.09),rgba(255,123,48,.02));
  transform:translateY(-2px)}

/* ---- Las rejillas de industria relacionada. */
main .igrid a{
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
main .igrid a:hover{
  border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.09),rgba(255,123,48,.02))!important;
  transform:translateY(-2px)}

/* ---- Y cualquier tarjeta que sea enlace. */
main .cards a:hover,
main .rows a:hover,
main .trio a:hover,
main .duo a:hover,
main .tiles a:hover,
main .srail a:hover{
  border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.08),rgba(255,123,48,.02))!important}
main .cards a,main .rows a,main .trio a,main .duo a,main .tiles a,main .srail a{
  transition:border-color .2s var(--ease),background .2s var(--ease)}

/* ==================================================================
   EL TEXTO SOBRE FONDO CLARO
   El sitio es oscuro salvo en las maquetas que imitan papel. Una
   regla global de color de texto tiene que respetar esas islas.
   ================================================================== */

/* ---- La maqueta de PDF: fondo rgb(239,233,227). El resto ya iba
   oscuro a proposito; los small habian quedado en casi blanco. */
main .rxpdf small,
main .rxpdf header small,
main .rxpdf footer,
main .rxpdf footer span,
main .rxpdf cite,
main .rxpdf figcaption{color:rgb(122,112,106)!important}
main .rxpdf b,main .rxpdf td,main .rxpdf p{color:rgb(42,35,33)!important}

/* ---- Y la tarjeta de resultado de .chain, que esta rellena de
   naranja: su rotulo va oscuro, no naranja sobre naranja. */
main .chain>div:last-child small{color:#0A0706!important}

/* ==================================================================
   1. EL FOCO DE LAS CIFRAS PASA A SER UN DEGRADADO DEL BOX
   Era un radial de 139x78 px al 52 % detras del numero: a ese tamano
   se lee como mancha, no como luz. La columna ya tiene un borde
   superior naranja; el degradado nace de ahi y baja.
   ================================================================== */
main .stats b::before,
main .figs b::before,
main .cz__n::before,
main .pru__n b::before,
main .logos__n b::before,
main .stats b::after,
main .figs b::after,
main .cz__n::after,
main .pru__n b::after{display:none!important;content:none!important}

/* El degradado nace del borde naranja del box y muere adentro. */
main .figs>div,
main .stats>div{
  background:linear-gradient(180deg,rgba(255,123,48,.10),rgba(255,123,48,.015) 42%,rgba(255,123,48,0) 62%),var(--s1)!important}
main .cz__b{
  background:linear-gradient(180deg,rgba(255,123,48,.07),rgba(255,123,48,0) 46%)}
main .pru__in{
  background:linear-gradient(180deg,rgba(255,123,48,.06),rgba(255,123,48,0) 40%)}

/* ==================================================================
   2. LA LINEA DE AVANCE DEL 04, EN NARANJA
   Iba en blanco. El naranja marca lo que esta pasando, y esa barra
   es exactamente eso.
   ================================================================== */
main .rail div i b{background:var(--sig)!important}
main .rail div.on i{background:rgba(255,123,48,.22)}

/* ==================================================================
   3. LA MANCHA DEL CTA SE QUITA
   Estaba anclada a la mitad izquierda (inset right 527 px), por eso
   se leia como mancha. Los botones ya traen su propio halo.
   ================================================================== */
.ctab__in::before{display:none!important;content:none!important}

/* ==================================================================
   4. EL PANEL DE ERP ENTRA AL SISTEMA DE ENFASIS
   ================================================================== */
main .erpwall .mk,
main .erpwall>a{
  border:1px solid var(--line);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
main .erpwall .mk:hover,
main .erpwall>a:hover{
  border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.09),rgba(255,123,48,.02))!important;
  transform:translateY(-2px)}
main .erpwall .mk:hover .lg img{opacity:1}
/* la celda destacada del muro toma el borde, como las demas del sistema */
main .erpwall .mk--p{border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.08),rgba(255,123,48,.02))!important}

/* ==================================================================
   MOVIL: EL CARRIL DEL 04 DEJA DE CORTARSE
   Medido a 390 px: los cinco rotulos piden 452 px en una caja de 350
   y .motor__stick recortaba "CAPTURADO" y "LISTO". Un track 1fr es
   minmax(auto,1fr) y su minimo es la palabra entera. En movil quedan
   las barras; el nombre de la etapa ya esta abajo, en grande.
   ================================================================== */
main .rail{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:700px){
  main .rail{gap:6px;margin-bottom:clamp(20px,3.4vh,34px)}
  main .rail div{font-size:0!important;letter-spacing:0!important;line-height:0}
  main .rail div i{margin-bottom:0;height:3px;border-radius:2px}
}

/* ==================================================================
   MOVIL: EL PLANO DE LA BRIDA
   El nombre del archivo no se parte y empujaba el panel 20 px fuera
   de su caja; el cajetin se dibujaba a 4.6 px y su texto se salia del
   recuadro. Queda el dibujo con sus cotas, que es lo que se lee.
   ================================================================== */
main .rxs__stage{grid-template-columns:minmax(0,1fr)}
main .rxs__pane{min-width:0}
main .rxs__src{min-width:0;flex-wrap:wrap}
main .rxs__src b{min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){
  main .rxp .tb{display:none}
}

/* ==================================================================
   LAS PILDORAS PASAN A CAJAS
   La regla: redondo es una accion (los botones y la navegacion);
   caja es una opcion o un dato. Una etiqueta redonda imita a un boton
   sin serlo. Y la caja engancha con el sistema de enfasis: borde
   naranja = elegido.
   ================================================================== */

/* ---- lo que se puede apretar o seguir: radio 10 */
main .wall a, main .wall span,
main .pill,
main .mq a,
main .trio__more i,
main .itabs,
main .itabs button,
main .badge,
main .erpbadge{border-radius:10px!important}
main .itabs{padding:3px}
main .itabs button{border-radius:8px!important}

/* ---- etiquetas y datos chicos: radio 7, que a ese tamano una caja
   de radio 10 se lee como un boton vacio */
main .chip,
main .tr .ch,
main .dash-row .cn,
main .ilist .nw,
main .dq__st,
main .req3 .ch,
main .rqr .ch, main .rqf .ch, main .rqt .ch,
main .rqr .chp span,
main .pair figure .k{border-radius:7px!important}

/* ---- el conmutador de tres estados: la pista y la pastilla juntas,
   si no queda una pastilla cuadrada dentro de una pista redonda */
main .seg, main .seg2, main .seg3{border-radius:14px!important}
main .seg button, main .seg2 button, main .seg3 button,
main .seg .th, main .seg2 .th, main .seg3 .th{border-radius:10px!important}

/* ---- las fichas de alternativas, que en movil eran pildoras */
@media (max-width:900px){
  main .fch__t{border-radius:10px!important}
}

/* ==================================================================
   MOVIL: EL FACSIMIL DEL PDF DEJA DE EMPUJAR SU PANEL
   La tabla del facsimil pide 338 px de minimo dentro de un panel de
   318, y empujaba el panel fuera de su caja. Una tabla que no cabe se
   desliza; lo que no puede es mover la pagina.
   ================================================================== */
main .rxs__pane>*{max-width:100%}
main .rxpdf{max-width:100%;overflow-x:auto}

/* ==================================================================
   EL CARRIL DEL 04: QUIEN GANA DE VERDAD
   Medido en el navegador con getComputedStyle: el rotulo seguia en
   9 px y superpuesto. La regla que mandaba no era la del piso sino
   "main .motor .rail div{font-size:14px!important}", de v151, con un
   nivel mas de especificidad (0,3,2) que la que puso este paso
   (0,2,2). Entre dos !important gana la mas especifica, no la
   ultima. Se sube un nivel con :not(#_), que no cambia a quien
   aplica y anade un nivel de id.
   ================================================================== */
@media (max-width:700px){
  main .motor .rail div:not(#_){
    font-size:0!important;letter-spacing:0!important;line-height:0!important}
  main .motor .rail div:not(#_) i{margin-bottom:0!important}
}

/* ==================================================================
   1. EL CARRIL DE ETAPAS EN LISTA COMPACTA
   A 640 px el carril lleva padding-left:28 y el punto va en left:-28.
   A 760 px una pasada posterior lo convierte en lista compacta con
   padding-inline:0!important: el padding se va, el -28 se queda y el
   punto sale 8 px fuera de la pantalla. En lista compacta ya hay
   separadores, asi que el punto y la linea sobran.
   ================================================================== */
@media (max-width:760px){
  main .srail::before,
  main .srail>div::before,
  main .orail::before, main .orail>div::before,
  main .osteps::before, main .osteps>div::before{display:none!important;content:none!important}
}

/* ==================================================================
   2. LA CABECERA DE LA TARJETA DEJA DE ENCIMARSE
   Medido a 360: el rotulo pide 200 px y el nombre 100, y entre los
   dos no caben en 312. space-between no reparte lo que no hay.
   ================================================================== */
@media (max-width:440px){
  main .card__top{flex-wrap:wrap;row-gap:9px;align-items:flex-start}
  main .card__top .who{flex:0 0 auto}
  main .card__top .st{flex:1 0 100%;letter-spacing:.09em}
}

/* ==================================================================
   3. LOS BOTONES, CENTRADOS DE VERDAD
   .btn es display:flex y su justify-content estaba en normal, o sea
   al inicio. En escritorio el boton mide lo que su contenido y no se
   nota; en movil ocupa todo el ancho y el texto queda pegado a la
   izquierda. text-align no manda sobre un contenedor flex.
   ================================================================== */
main .btn, main .btn--p, main .btn--g, main .btn--s,
.hero__btns .btn, .sub__cta .btn, .ctab .btn{
  justify-content:center!important;text-align:center}

/* ==================================================================
   4. EL MURO DE ERP DE LA PORTADA NO SE SALE DE SU TARJETA
   Medido: el texto de variantes mide 128 px dentro de una tarjeta de
   105. En una columna flex centrada el hijo toma su ancho maximo si
   nada lo limita. Con max-width:100% parte por los espacios del
   separador, que para eso los tiene.
   ================================================================== */
main #int .mk b, main #int .mk .tx,
main .erpwall .mk b{max-width:100%;min-width:0;overflow-wrap:break-word}

/* ==================================================================
   5. LAS TRECE INDUSTRIAS, EN CARRUSEL
   En movil eran una columna de trece cajas: 800 px de pila para
   elegir una. Pasa al mismo gesto que ya tienen las fichas y los
   giros: se desliza.
   ================================================================== */
@media (max-width:900px){
  main #ilist{
    display:flex!important;flex-wrap:nowrap!important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;scrollbar-width:none;
    gap:8px;padding-bottom:2px;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  main #ilist::-webkit-scrollbar{display:none}
  main #ilist>li{flex:0 0 auto;scroll-snap-align:start;width:auto;margin:0}
  main #ilist>li button{white-space:nowrap}
}

/* ==================================================================
   6. LOS 27 SISTEMAS: DOS RENGLONES QUE SE DESLIZAN
   En movil eran 27 cajas apiladas, un muro de 700 px. Dos renglones
   que se deslizan los muestran todos sin esconder ninguno y con el
   mismo gesto del resto del sitio.
   ================================================================== */
@media (max-width:760px){
  main .wall{
    display:grid!important;
    grid-auto-flow:column;
    grid-template-rows:repeat(2,auto);
    grid-auto-columns:max-content;
    gap:8px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;scrollbar-width:none;
    padding-bottom:2px;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  main .wall::-webkit-scrollbar{display:none}
  main .wall a, main .wall span{
    white-space:nowrap;scroll-snap-align:start;justify-self:start}
}

/* ==================================================================
   7. LAS PILDORAS QUE QUEDABAN
   Las variantes dentro de las tarjetas del muro de ERP. Misma regla
   que en v168: caja, no pildora.
   ================================================================== */
main .erpwall .vr, main .erpwall .vs b, main .erpwall .vs span,
main .vs .vr, main #int .vs b{border-radius:8px!important}

/* ==================================================================
   1. EL MURO DE ERP A DOS COLUMNAS EN PANTALLA ANGOSTA
   A 360 px el muro iba en tres columnas: 89 px de texto por tarjeta
   para un nombre que pide 100, y la palabra se partia. Dos columnas
   dan ~160 y el nombre cabe entero.
   ================================================================== */
main #int .mk b, main #int .mk .tx,
main .erpwall .mk b{overflow-wrap:normal!important;word-break:normal!important}
@media (max-width:440px){
  main .erpwall{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  main .erpwall .mk{height:auto;min-height:96px;padding:12px 10px}
}

/* ==================================================================
   2. LA FLECHA DEL BOTON NO CEDE SU ANCHO
   Medido a 360: el svg media 4 px. Dentro de un boton flex un svg sin
   flex:none encoge antes que el texto, y una flecha de 4 px es un
   borron, no una flecha.
   ================================================================== */
main .btn svg, .nav .btn svg, .btn svg, .nav__cta svg{flex:0 0 auto}

/* ==================================================================
   3. LOS DOS RENGLONES DEL MURO, A ESCUADRA
   Cada caja tomaba su propio ancho y la columna el del mas largo, asi
   que los renglones quedaban desiguales. Estiradas a su columna, los
   dos renglones leen como una rejilla.
   ================================================================== */
@media (max-width:760px){
  main .wall a, main .wall span{justify-self:stretch;justify-content:flex-start}
}

/* ==================================================================
   EL MURO DE ERP: QUIEN GANA, MEDIDO EN EL NAVEGADOR
   La regla anterior no aplico. Se le pregunto al navegador por CSSOM
   y la que mandaba era ".enc__b .erpwall{...repeat(3)!important}",
   con dos clases, o sea (0,2,0). La que puso este paso era
   "main .erpwall", y ahi estaba el error de lectura: main es un
   ELEMENTO, no una clase, asi que esa regla vale (0,1,1) y pierde.
   Se sube un nivel de id con :not(#_), que no cambia a quien aplica.
   ================================================================== */
@media (max-width:440px){
  main .erpwall:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  main .erpwall:not(#_) .mk{height:auto;min-height:92px;padding:12px 10px}
}
main .erpwall:not(#_) .mk b{overflow-wrap:normal!important;word-break:normal!important}
@media (max-width:760px){
  main .wall:not(#_)>a, main .wall:not(#_)>span{justify-self:stretch}
}

/* ==================================================================
   EL PARRAFO DE ENTRADA BAJA UN ESCALON
   Medido: 17.5 px en movil contra un titular de 32, y hasta nueve
   renglones. Dos tamanos que casi pesan lo mismo, uno encima del
   otro. Baja un escalon, no dos: lo que de verdad hace el trabajo es
   que el texto pasa de nueve renglones a cuatro. El color no se toca.
   ================================================================== */
main .hero .lead:not(#_), main .bhero .lead:not(#_),
main .sub .lead:not(#_), .hero .lead:not(#_), .bhero .lead:not(#_){
  font-size:clamp(16.5px,1.25vw,17.5px)!important;
  line-height:1.52;
  max-width:60ch}

/* ==================================================================
   EL 06 NO AVANZA SOLO EN MOVIL
   El candado era matchMedia('(hover:hover)'), que en un telefono
   deberia bastar y no siempre basta: en un navegador de escritorio en
   modo movil, y en algunos Android, da verdadero. Sin avance no hay
   barra de avance que mostrar.
   ================================================================== */
@media (max-width:900px){
  main #ibar, main .ist__bar{display:none!important}
}


/* ---- la capa final: el piso va después del CSS de página ---- */
/* ==================================================================
   EL PISO, EN LA ÚLTIMA CAPA
   Esta hoja se lee después del CSS de la página, así que aquí el
   !important es definitivo. Medido: 183 declaraciones abajo de 12 px
   en la fuente, y en pantalla seguían saliendo nodos en 8 px.

   Dos pisos, el criterio de siempre:
       12 px    rótulos, versalitas, etiquetas de campo, marcas
       13.5 px  cualquier cosa que sea una frase
   ================================================================== */

/* ---- Las maquetas. Son composiciones densas dentro de una caja de
   alto fijo, y ahí nacieron los 7.5 y los 8 px. El visitante tiene que
   poder leerlas: son la prueba de que el producto existe. Se listan los
   elementos, no un comodín: un max(12px,1em) sobre .dash * también
   AGRANDA a un hijo legítimamente menor que su padre. */
/* Y los propios contenedores, que es donde vive el em del que cuelga
   el resto. Un max() sobre 1em no sirve si el padre ya está en 8. */
main .dash-delta,
main .dash-chip,
main .dash-ni,
main .dash-pe,
main .dash-search,
main .dash-logo,
main .dash-legend span,
main .dash-nav b,
main .dash-nav span,
main .dash-card .cl,
main .dash-row .cn,
main .dash-row .ac,
main .dash-recent .dash-row span,
main .dash-top .ask,
main .dash-top .lk,
main .dash-panel h5,
main .erpwall b,
main .erpwall .mk b,
main .erpwall .mk .vr,
main .erpwall>a:not(.mk) b,
main .rxpdf,
main .rxpdf th,
main .rxpdf footer,
main .rxpdf header small,
main .rxpdf td.s span,
main .rxpdf td.pn,
main .rxpdf td.q,
main .rxft .co b,
main .rxcl__h small,
main .rxcl__h em,
main .rxcl p small,
main .rxml header small,
main .rxml header>span,
main .rxml__s small,
main .rxtx header small,
main .rxtx header span,
main .rxtx p small,
main .rxau__k,
main .rxau__v small,
main .rxs__src,
main .rxs__oh span,
main .rxs__ol dt,
main .rxs__ol dt u,
main .rxs__tabs button small,
main .rxs__tot small,
main .rxp .mk text,
main .istage__txt .tag,
main .istage__txt .rq small,
main .istage__txt .rs small,
main .opstage .tr .stt,
main .tray__f small,
main .card__note,
main .card__top .st,
main .bub small,
main .msg small,
main .node small,
main .ctl__txt .tag,
main .ctl__stats small,
main .dc__i em,
main .fch__col small,
main .fch__t i,
main .tiles .tk,
main .esc__h b,
main .esc__e b,
main .dq__cap,
main .dq__st,
main .dq__h small,
main .dq dt,
main .dq__f small,
main .cov__p small,
main .cov__p span,
main .td2 li small,
main .td2 h3,
main .htri__g figcaption small,
main .chain small,
main .orail small,
main .cs__go,
main .gr__lg span,
main .gr__f,
main .tl__n,
main .tl small,
main .cyc__chat small,
main .cyc__k span,
main .cyv__k,
main .cym__k,
main .cya__t span,
main .rel__h small,
main .ilist .nw,
main .ilist li button small,
main .idx li a small,
main .opl .n,
main .acc__p .n,
main .ways .n,
main .ways .k,
main .fld span,
main .more>span,
main .legend,
main .chip,
main .chips a,
main .chips span,
main .hoy__who,
main .hoy__cap,
main .res .who,
main .tr .ch,
main .tr .stt,
main .tr em,
main .tn__k,
main .tn__fix,
main .tn__n span,
main .esp__hd small,
main .esp__c p small,
main .esp__c .e .vn em,
main .esp__c .e .at,
main .esp__ph figcaption,
main .espm small,
main .fun .x em,
main .fun span,
main .cz__f span,
main .cz__g,
main .cnt span,
main .row span,
main .erp em,
main .erp span,
main .erp>span:first-child,
main .days button small,
main .fr small,
main .fr .n,
main .oq__h i,
main .oq__m dt,
main .oq__cap,
main .oq__r span em,
main .oq__f small,
main .ost__s,
main .st,
main .nm,
main .ac,
main .cl,
main .lab,
main .vermas,
main .hero__foot span,
main .hero__top .lab,
main .ask small,
main .esc__l span,
main .esc__x em,
main .rail div{font-size:12px!important}

/* ---- Lo que es una frase: 13.5 px, aunque viva dentro de una maqueta. */
main .rxs__ol dd,
main .rxs__ol dd q,
main .rxml p,
main .rxtx p,
main .dash-row .nm,
main .oq__r span,
main .oq__m dd,
main .msg,
main .bub,
main .rq p,
main .rs p{font-size:13.5px!important}

/* ---- El pie de foto y el superíndice, que no son texto de lectura. */
main sup{font-size:.7em!important}

/* ---- Y el grosor, que también se escapaba en la hoja de página. */
main .dash-logo,
main .dash-panel h5,
main .dash-delta,
main .dash-ni.on,
main .nm,
main .who,
main .res .who,
main .sig,
main .tx{font-weight:520!important}

/* ==================================================================
   LA CITA TACHADA, otra vez y aquí sí definitivo.
   ================================================================== */
main .bd q,
main .fr q,
main article>q{font-size:15px!important;font-weight:400!important;letter-spacing:0;
  text-transform:none;line-height:1.45}

/* ==================================================================
   EL PISO LLEGA AL PIE Y AL MENÚ
   El piso se escribió con prefijo "main", así que nunca tocó el
   encabezado ni el pie. Medido: 1,287 de los 1,316 nodos que seguían
   abajo de 12 px eran exactamente eso.
   ================================================================== */
.foot h5{font-size:12px!important;letter-spacing:.12em}
.foot__legal{font-size:12px!important}
.foot__legal span,.foot__legal a{font-size:12px!important}
.nav__lang{font-size:12px!important;letter-spacing:.08em}

/* ==================================================================
   LOS DOS DE CONTENIDO QUE QUEDABAN
   ================================================================== */

/* ---- La insignia de formato, "PDF", sobre el naranja. Iba en 8.5 px:
   es el dato que dice cómo llegó el pedido. */
main .fl b{font-size:12px!important;font-weight:600!important;letter-spacing:.04em}

/* ---- El monograma del avatar, dentro de un círculo de 34 px. */
main .chatw header span{font-size:12px!important}

/* ---- Y el .tx, que quedó en 16 px con peso 600: es texto corrido. */
main .tx{font-weight:400!important}

/* ==================================================================
   LA TARJETA DEL 04 YA NO CORTA
   Al crecer su tipografía, el contenido llegó a 593 px a 1024 px de
   ancho, contra una caja de 570. Sube el piso del clamp.
   ================================================================== */
main .motor .card,main .card{height:clamp(610px,64vh,650px)}
@media (max-width:1000px){
  main .motor .card,main .card{height:auto;min-height:0}
}

/* ==================================================================
   LOS TRES ÚLTIMOS
   ================================================================== */

/* ---- "POR QUÉ": abre una frase de 15.5 px, iba en 10. */
main .altw b{font-size:12px!important;letter-spacing:.09em}

/* ---- Los números de paso. .fr .n y .opl .n ya tenían piso; estos dos
   comparten la forma y se habían quedado fuera. */
main .steps3 .n,main .cards .n{font-size:12px!important;letter-spacing:.11em}

/* ---- La duración de la nota de voz. */
main .cm-vn em{font-size:12px!important}

/* ==================================================================
   EL NARANJA SOLO DONDE SIGNIFICA
   Medido sobre las 143 páginas: el naranja ya estaba casi todo bien
   puesto (hover, .on, aria-selected, li:last-child). Lo que sobraba
   eran tres índices de orden y un defecto real en .chain, donde las
   DOS columnas de la comparación salían en naranja y por lo tanto el
   color no distinguía nada.
   ================================================================== */

/* ---- El defecto: .chain pintaba "Hoy" y "Con Peaking" igual. El
   último paso ya va en naranja por .chain>div:last-child, así que el
   rótulo general vuelve al gris y la comparación recupera su lado. */
main .chain small{color:var(--fg4)}
main .chain>div:last-child small{color:var(--sig)}

/* ---- Los índices de orden. Un número de secuencia no es un
   resultado; es el mueble donde se apoya el resultado. */
main .steps3 .n,
main .cards .n,
main .opl .n{color:var(--fg4)}

/* ==================================================================
   CORRECCIÓN: la última tarjeta de la cadena va RELLENA de naranja,
   así que su rótulo va oscuro y no naranja. v144 lo dejó del color
   del relleno, o sea invisible (contraste 1:1).
   ================================================================== */
main .chain>div:last-child small{color:#0A0706!important}
/* ==================================================================
   EL CORREO DE LA SECCIÓN 02
   El cuerpo iba en 15.5 px rodeado de texto de página en 17. No es
   maqueta decorativa: es la solicitud que hay que poder leer.
   ================================================================== */
main .rxs .rxml__b p,main .rxs .rxml p{font-size:17px!important;line-height:1.58}
main .rxs .rxml__s b{font-size:19px!important;line-height:1.3}
main .rxs .rxml__s small{font-size:12.5px!important}
main .rxs .rxml header>div>b,main .rxs .rxml header b{font-size:15.5px!important}
main .rxs .rxml header>div>small,main .rxs .rxml header small{font-size:13px!important}
main .rxs .rxml header>span{font-size:13px!important}
main .rxs .rxtx p{font-size:16.5px!important;line-height:1.55}
main .rxs .rxs__src b{font-size:14px!important}
main .rxs .rxs__tot>div>span{font-size:13.5px!important}

@media (max-width:860px){
  main .rxs .rxml__b p,main .rxs .rxml p{font-size:16px!important}
  main .rxs .rxml__s b{font-size:17.5px!important}
  main .rxs .rxtx p{font-size:15.5px!important}
}

/* ==================================================================
   EL NARANJA COMO PUNTO, NO COMO ZONA
   Los campos grandes se apagan: un lavado de 1,400 px no señala
   nada, solo tiñe, y se come el negro. El naranja se concentra
   donde la página afirma algo.
   ================================================================== */

/* ---- Se apagan los campos de sección. */
.ctab::before,.cta::before,
.stats::before,.figs::before,.cz::before,.pru__in::before{background:none!important}

/* ---- El halo de la cifra. Va detrás del NÚMERO, no de la tarjeta,
   y muere en transparente adentro de su propio radio. */
/* width:max-content es lo que hace que el halo quede CENTRADO en la
   cifra. Sin eso el <b> ocupa toda la columna, el left:50% se refiere
   a la columna y no al numero, y el brillo aparece a la derecha de la
   cifra como una mancha horizontal. Medido en pantalla, no supuesto. */
main .stats b,
main .figs b,
main .cz__n,
main .pru__n b,
main .logos__n b{position:relative;isolation:isolate;width:max-content;max-width:100%}
main .stats b::before,
main .figs b::before,
main .cz__n::before,
main .pru__n b::before,
main .logos__n b::before{
  content:"";position:absolute;left:50%;top:52%;width:150%;height:210%;
  transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,123,48,.20),transparent 70%)}

/* ---- El halo del botón primario. Una sombra difusa no puede tener
   borde: su caída es continua por construcción. */
.btn--p{box-shadow:0 10px 30px -12px rgba(250,58,50,.5),
                   0 0 46px -6px rgba(255,123,48,.40)}

/* ==================================================================
   LA MONO SALE DE LOS VALORES DE LA FICHA
   .oq__m dd viajaba dentro de la lista de --code de v137, y ahí vive
   el nombre del cliente, el canal, las condiciones y la entrega. Eso
   es prosa, no dato de máquina. El folio (.oq__h b) y el importe
   (.oq__f b) conservan la mono, que ahí sí es función.
   ================================================================== */
main .oq__m dd{font-family:var(--sans)!important;font-variant-numeric:normal}

/* ==================================================================
   2. EL GRIS APAGADO DEJA DE SER COLOR DE TEXTO
   --fg4 (174,162,152) es el tono que se pierde. 440 nodos lo usaban.
   Todo lo que sea texto legible sube a --fg2. --fg3 queda para 17 px
   para arriba, donde la masa de letra ya sostiene el tono.
   ================================================================== */
main .lab,
main small,
main cite,
main figcaption,
main dt,
main .ch,
main .cl,
main .k,
main .cn,
main .st,
main .tk,
main .nm,
main .ac,
main .ost__s,
main .oq__cap,
main .dq__cap,
main .dq__st,
main .oq__m dt,
main .oq__f small,
main .oq__hd span,
main .oq__hd u,
main .oq__b span,
main .fr small,
main .fr .n,
main .cards .n,
main .steps3 .n,
main .opl .n,
main .idx li a small,
main .ilist li button small,
main .chain small,
main .cz__f span,
main .cz__g,
main .cz__nota,
main .ways .n,
main .ways .k,
main .tl small,
main .tl__n,
main .legend,
main .hoy__who,
main .hoy__cap,
main .res .who,
main .card__note,
main .card__top .st,
main .bub small,
main .msg small,
main .node small,
main .ctl__txt .tag,
main .ctl__stats small,
main .istage__txt .tag,
main .tray__f small,
main .erp em,
main .erp span,
main .cnt span,
main .row span,
main .fun span,
main .espm small,
main .esp__hd small,
main .esp__c p small,
main .rxs__src,
main .rxs__ol dt,
main .rxcl__h small,
main .rxcl__h em,
main .rxml header small,
main .rxml header>span,
main .rxml__s small,
main .rxtx header small,
main .rxtx header span,
main .rxau__v small,
main .rxau__k,
main .rxs__oh span,
main .crumb a,
main .crumb span,
main .altw b,
main .cm-vn em,
main .dash-row .ac,
main .dash-card .cl,
main .dash-nav b,
main .dash-nav span,
main .dash-pe,
main .figs cite,
main .stats .src,
main .pz__s,
main .bleed__s,
main .beat span,
main .oq__r span,
main .oq__m dd,
main .rxs__ol dd{color:var(--fg2)!important}

/* ---- Y los rotulos en versalitas, que son los que mas se perdian,
   van en blanco. Es el texto mas chico de la pagina: necesita el
   contraste maximo, no el minimo. */
main .lab,
main .hero__top .lab,
main .sec__h .lab,
main .esc__l span,
main .rail div.on,
main .oq__hd s{color:var(--fg)!important}

/* ---- El pie y el menu siguen la misma regla. */
.foot h5{color:var(--fg2)!important}
.foot__legal,.foot__legal span,.foot__legal a{color:var(--fg2)!important}
.nav__lang{color:var(--fg2)!important}



/* ==================================================================
   EL NARANJA, VISIBLE
   El veredicto fue "no se alcanza a ver para nada". Era correcto:
   al reducir el area a puntos estrategicos deje la intensidad de
   campo grande. Menos area pide mas intensidad, no la misma.
   ================================================================== */

/* ---- El halo de la cifra: de 20 % a 52 %, con el radio cerrado.
   Ahora si hay un resplandor detras del numero. */
main .stats b::before,
main .figs b::before,
main .cz__n::before,
main .pru__n b::before,
main .logos__n b::before{
  width:132%!important;height:180%!important;
  background:radial-gradient(closest-side,rgba(255,123,48,.52),rgba(255,123,48,.16) 52%,transparent 74%)!important}

/* ---- NUEVO: la cifra lleva una barra solida debajo. Es lo unico
   que de verdad se ve a este tamano: un degradado tenue detras de un
   numero no compite con el numero, una barra solida si. */
main .stats b::after,
main .figs b::after,
main .cz__n::after,
main .pru__n b::after{
  content:"";position:absolute;left:0;bottom:-.22em;
  width:2.2em;max-width:100%;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--sig),rgba(255,123,48,.25));
  pointer-events:none}

/* ---- El punto naranja del rotulo. OJO: .lab YA trae un <i> que es
   ese punto, con su anillo. No se agrega un ::before, que duplicaba
   la marca; se refuerza el que ya existe y se obliga a mostrarse,
   porque una regla posterior lo apagaba en varios contextos. */
main .lab i{
  display:block!important;width:8px!important;height:8px!important;
  border-radius:50%;background:var(--sig)!important;flex:0 0 auto;
  margin-top:0!important;align-self:center;
  box-shadow:0 0 0 4px rgba(255,123,48,.20),0 0 14px rgba(255,123,48,.75)!important}
main .lab{display:inline-flex!important;align-items:center;gap:10px}

/* ---- El halo del boton primario: de 40 % a 70 %, mas apretado. */
.btn--p{box-shadow:0 10px 30px -12px rgba(250,58,50,.55),
                   0 0 34px -4px rgba(255,123,48,.70)}

/* ---- Y el campo de los dos momentos ancla vuelve, chico y firme:
   detras del bloque de texto del CTA, no de la seccion entera. */
.ctab__in,.cta .ctab__in{position:relative;isolation:isolate}
.ctab__in::before{
  content:"";position:absolute;left:-4%;right:40%;top:-60%;bottom:-60%;
  z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,123,48,.30),transparent 72%)}

/* ==================================================================
   LAS TRECE INDUSTRIAS, EN CAJAS
   Trece renglones separados por una linea fina no tienen forma: el
   ojo no puede agarrar ninguno y el activo se distingue apenas por
   el peso. Cada industria pasa a ser una caja, y el naranja vive en
   el contorno de la activa, que es donde se pidio.
   ================================================================== */
main .ilist{
  border-top:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-content:start}

main .ilist li{flex:none!important;min-width:0}

main .ilist li button{
  position:relative;
  display:flex!important;
  flex-direction:column;
  align-items:flex-start!important;
  gap:7px;
  width:100%;
  height:100%;
  text-align:left;
  padding:15px 15px 16px!important;
  border:1px solid var(--line2);
  border-radius:11px;
  background:var(--s1);
  white-space:normal!important;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}

main .ilist li button span{
  font-size:16px!important;
  font-weight:550!important;
  line-height:1.25;
  white-space:normal!important;
  color:var(--fg)}

/* El numero de orden va a la esquina: es referencia, no contenido. */
main .ilist li button small{
  font-size:12px!important;
  letter-spacing:.1em!important;
  color:var(--fg4);
  order:-1}

main .ilist li button i{display:none!important}

main .ilist li button:hover{
  border-color:var(--line3);
  background:var(--s2);
  transform:translateY(-1px)}

/* ---- La caja activa: el naranja en el contorno, y nada mas. */
main .ilist li button.on{
  border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.10),rgba(255,123,48,.03))!important;
  box-shadow:0 0 0 1px rgba(255,123,48,.35),0 6px 26px -12px rgba(255,123,48,.55)}
main .ilist li button.on span{color:var(--fg)}
main .ilist li button.on small{color:var(--sig)}

@media (max-width:1000px){
  /* En movil vuelven a una sola columna, que es donde caben. */
  main .ilist{grid-template-columns:1fr;gap:9px}
  main .ilist li button{padding:13px 14px 14px!important}
  main .ilist li button span{font-size:15.5px!important}
}

/* ==================================================================
   EL NARANJA SEMANTICO SOBREVIVE AL CAMBIO DE TONO
   La regla de color de esta tanda (main small{color:var(--fg2)})
   piso el naranja de las etiquetas de resultado: "Cotizacion lista",
   "Peaking propone", "Lo que resuelve bien" salieron en gris.

   En vez de listarlas a mano se extrajeron del codigo TODAS las
   reglas que ponen color:var(--sig) y se re-afirman aqui, al final.
   Asi el cambio de tono no puede volver a pisarlas.

   Quedan fuera a proposito los tres indices de orden que v144 mando
   a gris (.cards .n, .steps3 .n, .opl .n) y .chain small, que se
   corrigio para que solo el ultimo paso lleve el color.
   ================================================================== */
#iname a:hover,
main .altc .a2 small,
main .altc>div.ar,
main .ask small,
main .ba__b p::before,
main .ba__h span:last-child,
main .cov__p span,
main .cs__go,
main .ctl__txt .tag,
main .cya>li:last-child .cya__t span,
main .cyc__fol code,
main .cym__l li:last-child .cym__k,
main .cyv li:last-child .cyv__k,
main .cz__c:hover .cz__f span,
main .dash-ni.on svg,
main .dash-panel h5 svg,
main .dq__st,
main .duo .k,
main .erpwall .mk .vr:hover,
main .erpwall .mk--p .tx,
main .esc__e--s b,
main .esc__h b.s,
main .esc__l .esc__u b,
main .esp__c .k small,
main .espm small,
main .fch__col:first-child small,
main .fch__t.on i,
main .fl2__c small,
main .fnt span a:hover,
main .fun>div:nth-child(5) b,
main .gr__f a:hover,
main .gstrip svg,
main .htri__g figcaption small,
main .icards a .go,
main .igrid .go,
main .il__go:hover,
main .isrc a:hover,
main .ledg .k,
main .lnk svg,
main .lnl a:hover b,
main .lnl svg,
main .norms code,
main .oq__h i.ok,
main .orail small,
main .orail>* small,
main .ost.on .ost__s,
main .osteps .ost__s,
main .otab__r .rw.w,
main .pair .k,
main .prs__go,
main .qt__b small,
main .rel__s--fin .rel__h small,
main .req3 .un li svg,
main .reqs li svg,
main .rqf__arr,
main .rqf__ok,
main .rqf__sm .ms b,
main .rqt__p small,
main .rxau__t mark,
main .rxcl p.b small,
main .rxs__of svg,
main .rxs__ol dd q,
main .rxs__tabs button[aria-selected=true] small,
main .rxs__tot small,
main .sband__h span,
main .split li::before,
main .stats span,
main .stp4 div::before,
main .td2 li svg,
main .tiles .tk,
main .tn__k,
main .tr.hum .stt,
main .tr.hum em,
main .trio .k,
main .tt2 li svg,
main .wide figcaption span,
main .chain>div:last-child small,
main .ilist li button.on small{color:var(--sig)!important}

/* ==================================================================
   EL SISTEMA DE ENFASIS
   Una sola gramatica para todo el sitio:
     borde naranja  = esto esta elegido
     se enciende    = esto se puede elegir
   Antes habia seis maneras distintas de decir lo mismo.
   ================================================================== */

/* ---- 1. EL CONMUTADOR Manual / Copiloto / Autopiloto.
   La pildora deslizante era blanca y el texto activo casi negro, lo
   que ademas daba un contraste pesimo. Ahora la pildora es el velo
   naranja del sistema y el texto activo vuelve a ser claro. */
main .seg3 .th{
  background:linear-gradient(180deg,rgba(255,123,48,.16),rgba(255,123,48,.05))!important;
  border:1px solid var(--sig);
  box-shadow:0 0 0 1px rgba(255,123,48,.30),0 6px 22px -12px rgba(255,123,48,.65)}
main .seg3 button.on{color:var(--fg)!important}
main .seg3 button:hover{color:var(--fg)}

/* ---- 2. LOS SIETE CANALES de la seccion 02. */
main .rxs__tabs button[aria-selected=true]{
  border:1px solid var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.10),rgba(255,123,48,.03))!important;
  box-shadow:0 0 0 1px rgba(255,123,48,.28),0 6px 22px -12px rgba(255,123,48,.5)}
main .rxs__tabs button{border:1px solid transparent;transition:border-color .2s,background .2s}
main .rxs__tabs button:hover{border-color:var(--line3);background:var(--s2)}

/* ---- 3. LAS FICHAS de alternativas, en su version de pildora. */
@media (max-width:900px){
  main .fch__t.on{
    background:linear-gradient(180deg,rgba(255,123,48,.14),rgba(255,123,48,.04))!important;
    border-color:var(--sig)!important;color:var(--fg)!important;
    box-shadow:0 0 0 1px rgba(255,123,48,.30),0 6px 22px -12px rgba(255,123,48,.6)}
  main .fch__t.on i{color:var(--sig)!important}
}
main .fch__t:hover{color:var(--fg)}

/* ---- 4. EL CONMUTADOR de tonos. */
main .tn__n.on{
  border:1px solid var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.10),rgba(255,123,48,.03))!important;
  box-shadow:0 0 0 1px rgba(255,123,48,.28)}
main .tn__n{border:1px solid transparent;transition:border-color .2s,background .2s}
main .tn__n:hover{border-color:var(--line3);background:var(--s2)}

/* ---- 5. LAS TARJETAS DEL PANEL de "sale trabajo asignado".
   Son cinco tarjetas con dato y no tenian ningun estado. */
main .dash-card{transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
main .dash-card:hover{
  border-color:var(--sig);
  background:linear-gradient(180deg,rgba(255,123,48,.09),rgba(255,123,48,.02));
  transform:translateY(-1px)}
/* la tarjeta ya destacada del panel toma el borde, no el relleno */
main .dash-card.o{border:1px solid var(--sig)!important}

/* ==================================================================
   LAS PILDORAS PASAN A CAJAS
   755 enlaces de industria eran pildoras de radio 999. Una pildora
   dice "etiqueta"; una caja dice "opcion sobre la que hago clic".
   ================================================================== */
main .chips a{
  border-radius:10px!important;
  padding:11px 15px!important;
  border:1px solid var(--line2);
  background:var(--s1);
  color:var(--fg2);
  transition:border-color .2s var(--ease),background .2s var(--ease),
             color .2s var(--ease),transform .2s var(--ease)}
main .chips a:hover{
  border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.10),rgba(255,123,48,.03))!important;
  color:var(--fg)!important;
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(255,123,48,.28),0 6px 22px -12px rgba(255,123,48,.5)}
main .chips{gap:9px}
/* la que apunta a la pagina en la que ya se esta, marcada */
main .chips a[aria-current]{border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.10),rgba(255,123,48,.03))!important;
  color:var(--fg)!important}

/* ==================================================================
   Y EL RESTO DE LO NAVEGABLE toma el mismo encendido al pasar.
   ================================================================== */
main .wall a,
main .apps .pill,
main .vs .vr,
main .icards a,
main .lnl li a,
main .links a{transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
main .wall a:hover,
main .apps .pill:hover,
main .vs .vr:hover,
main .icards a:hover{
  border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.09),rgba(255,123,48,.02))!important;
  transform:translateY(-1px)}

/* ==================================================================
   EL SISTEMA DE ENFASIS, SEGUNDA TANDA
   Las cuatro tarjetas de "sale trabajo asignado" y las rejillas de
   industria. El criterio es uno: si se puede hacer clic o elegir,
   lleva el estado. Lo que solo se lee, no.
   ================================================================== */

/* ---- Las cuatro tarjetas: tenian fondo pero ni borde ni radio. */
main .opl>article{
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
main .opl>article:hover{
  border-color:var(--sig);
  background:linear-gradient(180deg,rgba(255,123,48,.09),rgba(255,123,48,.02));
  transform:translateY(-2px)}

/* ---- Las rejillas de industria relacionada. */
main .igrid a{
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
main .igrid a:hover{
  border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.09),rgba(255,123,48,.02))!important;
  transform:translateY(-2px)}

/* ---- Y cualquier tarjeta que sea enlace. */
main .cards a:hover,
main .rows a:hover,
main .trio a:hover,
main .duo a:hover,
main .tiles a:hover,
main .srail a:hover{
  border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.08),rgba(255,123,48,.02))!important}
main .cards a,main .rows a,main .trio a,main .duo a,main .tiles a,main .srail a{
  transition:border-color .2s var(--ease),background .2s var(--ease)}

/* ==================================================================
   EL TEXTO SOBRE FONDO CLARO
   El sitio es oscuro salvo en las maquetas que imitan papel. Una
   regla global de color de texto tiene que respetar esas islas.
   ================================================================== */

/* ---- La maqueta de PDF: fondo rgb(239,233,227). El resto ya iba
   oscuro a proposito; los small habian quedado en casi blanco. */
main .rxpdf small,
main .rxpdf header small,
main .rxpdf footer,
main .rxpdf footer span,
main .rxpdf cite,
main .rxpdf figcaption{color:rgb(122,112,106)!important}
main .rxpdf b,main .rxpdf td,main .rxpdf p{color:rgb(42,35,33)!important}

/* ---- Y la tarjeta de resultado de .chain, que esta rellena de
   naranja: su rotulo va oscuro, no naranja sobre naranja. */
main .chain>div:last-child small{color:#0A0706!important}

/* ==================================================================
   1. EL FOCO DE LAS CIFRAS PASA A SER UN DEGRADADO DEL BOX
   Era un radial de 139x78 px al 52 % detras del numero: a ese tamano
   se lee como mancha, no como luz. La columna ya tiene un borde
   superior naranja; el degradado nace de ahi y baja.
   ================================================================== */
main .stats b::before,
main .figs b::before,
main .cz__n::before,
main .pru__n b::before,
main .logos__n b::before,
main .stats b::after,
main .figs b::after,
main .cz__n::after,
main .pru__n b::after{display:none!important;content:none!important}

/* El degradado nace del borde naranja del box y muere adentro. */
main .figs>div,
main .stats>div{
  background:linear-gradient(180deg,rgba(255,123,48,.10),rgba(255,123,48,.015) 42%,rgba(255,123,48,0) 62%),var(--s1)!important}
main .cz__b{
  background:linear-gradient(180deg,rgba(255,123,48,.07),rgba(255,123,48,0) 46%)}
main .pru__in{
  background:linear-gradient(180deg,rgba(255,123,48,.06),rgba(255,123,48,0) 40%)}

/* ==================================================================
   2. LA LINEA DE AVANCE DEL 04, EN NARANJA
   Iba en blanco. El naranja marca lo que esta pasando, y esa barra
   es exactamente eso.
   ================================================================== */
main .rail div i b{background:var(--sig)!important}
main .rail div.on i{background:rgba(255,123,48,.22)}

/* ==================================================================
   3. LA MANCHA DEL CTA SE QUITA
   Estaba anclada a la mitad izquierda (inset right 527 px), por eso
   se leia como mancha. Los botones ya traen su propio halo.
   ================================================================== */
.ctab__in::before{display:none!important;content:none!important}

/* ==================================================================
   4. EL PANEL DE ERP ENTRA AL SISTEMA DE ENFASIS
   ================================================================== */
main .erpwall .mk,
main .erpwall>a{
  border:1px solid var(--line);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
main .erpwall .mk:hover,
main .erpwall>a:hover{
  border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.09),rgba(255,123,48,.02))!important;
  transform:translateY(-2px)}
main .erpwall .mk:hover .lg img{opacity:1}
/* la celda destacada del muro toma el borde, como las demas del sistema */
main .erpwall .mk--p{border-color:var(--sig)!important;
  background:linear-gradient(180deg,rgba(255,123,48,.08),rgba(255,123,48,.02))!important}

/* ==================================================================
   MOVIL: EL CARRIL DEL 04 DEJA DE CORTARSE
   Medido a 390 px: los cinco rotulos piden 452 px en una caja de 350
   y .motor__stick recortaba "CAPTURADO" y "LISTO". Un track 1fr es
   minmax(auto,1fr) y su minimo es la palabra entera. En movil quedan
   las barras; el nombre de la etapa ya esta abajo, en grande.
   ================================================================== */
main .rail{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:700px){
  main .rail{gap:6px;margin-bottom:clamp(20px,3.4vh,34px)}
  main .rail div{font-size:0!important;letter-spacing:0!important;line-height:0}
  main .rail div i{margin-bottom:0;height:3px;border-radius:2px}
}

/* ==================================================================
   MOVIL: EL PLANO DE LA BRIDA
   El nombre del archivo no se parte y empujaba el panel 20 px fuera
   de su caja; el cajetin se dibujaba a 4.6 px y su texto se salia del
   recuadro. Queda el dibujo con sus cotas, que es lo que se lee.
   ================================================================== */
main .rxs__stage{grid-template-columns:minmax(0,1fr)}
main .rxs__pane{min-width:0}
main .rxs__src{min-width:0;flex-wrap:wrap}
main .rxs__src b{min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){
  main .rxp .tb{display:none}
}

/* ==================================================================
   LAS PILDORAS PASAN A CAJAS
   La regla: redondo es una accion (los botones y la navegacion);
   caja es una opcion o un dato. Una etiqueta redonda imita a un boton
   sin serlo. Y la caja engancha con el sistema de enfasis: borde
   naranja = elegido.
   ================================================================== */

/* ---- lo que se puede apretar o seguir: radio 10 */
main .wall a, main .wall span,
main .pill,
main .mq a,
main .trio__more i,
main .itabs,
main .itabs button,
main .badge,
main .erpbadge{border-radius:10px!important}
main .itabs{padding:3px}
main .itabs button{border-radius:8px!important}

/* ---- etiquetas y datos chicos: radio 7, que a ese tamano una caja
   de radio 10 se lee como un boton vacio */
main .chip,
main .tr .ch,
main .dash-row .cn,
main .ilist .nw,
main .dq__st,
main .req3 .ch,
main .rqr .ch, main .rqf .ch, main .rqt .ch,
main .rqr .chp span,
main .pair figure .k{border-radius:7px!important}

/* ---- el conmutador de tres estados: la pista y la pastilla juntas,
   si no queda una pastilla cuadrada dentro de una pista redonda */
main .seg, main .seg2, main .seg3{border-radius:14px!important}
main .seg button, main .seg2 button, main .seg3 button,
main .seg .th, main .seg2 .th, main .seg3 .th{border-radius:10px!important}

/* ---- las fichas de alternativas, que en movil eran pildoras */
@media (max-width:900px){
  main .fch__t{border-radius:10px!important}
}

/* ==================================================================
   MOVIL: EL FACSIMIL DEL PDF DEJA DE EMPUJAR SU PANEL
   La tabla del facsimil pide 338 px de minimo dentro de un panel de
   318, y empujaba el panel fuera de su caja. Una tabla que no cabe se
   desliza; lo que no puede es mover la pagina.
   ================================================================== */
main .rxs__pane>*{max-width:100%}
main .rxpdf{max-width:100%;overflow-x:auto}

/* ==================================================================
   EL CARRIL DEL 04: QUIEN GANA DE VERDAD
   Medido en el navegador con getComputedStyle: el rotulo seguia en
   9 px y superpuesto. La regla que mandaba no era la del piso sino
   "main .motor .rail div{font-size:14px!important}", de v151, con un
   nivel mas de especificidad (0,3,2) que la que puso este paso
   (0,2,2). Entre dos !important gana la mas especifica, no la
   ultima. Se sube un nivel con :not(#_), que no cambia a quien
   aplica y anade un nivel de id.
   ================================================================== */
@media (max-width:700px){
  main .motor .rail div:not(#_){
    font-size:0!important;letter-spacing:0!important;line-height:0!important}
  main .motor .rail div:not(#_) i{margin-bottom:0!important}
}

/* ==================================================================
   1. EL CARRIL DE ETAPAS EN LISTA COMPACTA
   A 640 px el carril lleva padding-left:28 y el punto va en left:-28.
   A 760 px una pasada posterior lo convierte en lista compacta con
   padding-inline:0!important: el padding se va, el -28 se queda y el
   punto sale 8 px fuera de la pantalla. En lista compacta ya hay
   separadores, asi que el punto y la linea sobran.
   ================================================================== */
@media (max-width:760px){
  main .srail::before,
  main .srail>div::before,
  main .orail::before, main .orail>div::before,
  main .osteps::before, main .osteps>div::before{display:none!important;content:none!important}
}

/* ==================================================================
   2. LA CABECERA DE LA TARJETA DEJA DE ENCIMARSE
   Medido a 360: el rotulo pide 200 px y el nombre 100, y entre los
   dos no caben en 312. space-between no reparte lo que no hay.
   ================================================================== */
@media (max-width:440px){
  main .card__top{flex-wrap:wrap;row-gap:9px;align-items:flex-start}
  main .card__top .who{flex:0 0 auto}
  main .card__top .st{flex:1 0 100%;letter-spacing:.09em}
}

/* ==================================================================
   3. LOS BOTONES, CENTRADOS DE VERDAD
   .btn es display:flex y su justify-content estaba en normal, o sea
   al inicio. En escritorio el boton mide lo que su contenido y no se
   nota; en movil ocupa todo el ancho y el texto queda pegado a la
   izquierda. text-align no manda sobre un contenedor flex.
   ================================================================== */
main .btn, main .btn--p, main .btn--g, main .btn--s,
.hero__btns .btn, .sub__cta .btn, .ctab .btn{
  justify-content:center!important;text-align:center}

/* ==================================================================
   4. EL MURO DE ERP DE LA PORTADA NO SE SALE DE SU TARJETA
   Medido: el texto de variantes mide 128 px dentro de una tarjeta de
   105. En una columna flex centrada el hijo toma su ancho maximo si
   nada lo limita. Con max-width:100% parte por los espacios del
   separador, que para eso los tiene.
   ================================================================== */
main #int .mk b, main #int .mk .tx,
main .erpwall .mk b{max-width:100%;min-width:0;overflow-wrap:break-word}

/* ==================================================================
   5. LAS TRECE INDUSTRIAS, EN CARRUSEL
   En movil eran una columna de trece cajas: 800 px de pila para
   elegir una. Pasa al mismo gesto que ya tienen las fichas y los
   giros: se desliza.
   ================================================================== */
@media (max-width:900px){
  main #ilist{
    display:flex!important;flex-wrap:nowrap!important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;scrollbar-width:none;
    gap:8px;padding-bottom:2px;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  main #ilist::-webkit-scrollbar{display:none}
  main #ilist>li{flex:0 0 auto;scroll-snap-align:start;width:auto;margin:0}
  main #ilist>li button{white-space:nowrap}
}

/* ==================================================================
   6. LOS 27 SISTEMAS: DOS RENGLONES QUE SE DESLIZAN
   En movil eran 27 cajas apiladas, un muro de 700 px. Dos renglones
   que se deslizan los muestran todos sin esconder ninguno y con el
   mismo gesto del resto del sitio.
   ================================================================== */
@media (max-width:760px){
  main .wall{
    display:grid!important;
    grid-auto-flow:column;
    grid-template-rows:repeat(2,auto);
    grid-auto-columns:max-content;
    gap:8px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;scrollbar-width:none;
    padding-bottom:2px;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  main .wall::-webkit-scrollbar{display:none}
  main .wall a, main .wall span{
    white-space:nowrap;scroll-snap-align:start;justify-self:start}
}

/* ==================================================================
   7. LAS PILDORAS QUE QUEDABAN
   Las variantes dentro de las tarjetas del muro de ERP. Misma regla
   que en v168: caja, no pildora.
   ================================================================== */
main .erpwall .vr, main .erpwall .vs b, main .erpwall .vs span,
main .vs .vr, main #int .vs b{border-radius:8px!important}

/* ==================================================================
   1. EL MURO DE ERP A DOS COLUMNAS EN PANTALLA ANGOSTA
   A 360 px el muro iba en tres columnas: 89 px de texto por tarjeta
   para un nombre que pide 100, y la palabra se partia. Dos columnas
   dan ~160 y el nombre cabe entero.
   ================================================================== */
main #int .mk b, main #int .mk .tx,
main .erpwall .mk b{overflow-wrap:normal!important;word-break:normal!important}
@media (max-width:440px){
  main .erpwall{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  main .erpwall .mk{height:auto;min-height:96px;padding:12px 10px}
}

/* ==================================================================
   2. LA FLECHA DEL BOTON NO CEDE SU ANCHO
   Medido a 360: el svg media 4 px. Dentro de un boton flex un svg sin
   flex:none encoge antes que el texto, y una flecha de 4 px es un
   borron, no una flecha.
   ================================================================== */
main .btn svg, .nav .btn svg, .btn svg, .nav__cta svg{flex:0 0 auto}

/* ==================================================================
   3. LOS DOS RENGLONES DEL MURO, A ESCUADRA
   Cada caja tomaba su propio ancho y la columna el del mas largo, asi
   que los renglones quedaban desiguales. Estiradas a su columna, los
   dos renglones leen como una rejilla.
   ================================================================== */
@media (max-width:760px){
  main .wall a, main .wall span{justify-self:stretch;justify-content:flex-start}
}

/* ==================================================================
   EL MURO DE ERP: QUIEN GANA, MEDIDO EN EL NAVEGADOR
   La regla anterior no aplico. Se le pregunto al navegador por CSSOM
   y la que mandaba era ".enc__b .erpwall{...repeat(3)!important}",
   con dos clases, o sea (0,2,0). La que puso este paso era
   "main .erpwall", y ahi estaba el error de lectura: main es un
   ELEMENTO, no una clase, asi que esa regla vale (0,1,1) y pierde.
   Se sube un nivel de id con :not(#_), que no cambia a quien aplica.
   ================================================================== */
@media (max-width:440px){
  main .erpwall:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  main .erpwall:not(#_) .mk{height:auto;min-height:92px;padding:12px 10px}
}
main .erpwall:not(#_) .mk b{overflow-wrap:normal!important;word-break:normal!important}
@media (max-width:760px){
  main .wall:not(#_)>a, main .wall:not(#_)>span{justify-self:stretch}
}

/* ==================================================================
   EL PARRAFO DE ENTRADA BAJA UN ESCALON
   Medido: 17.5 px en movil contra un titular de 32, y hasta nueve
   renglones. Dos tamanos que casi pesan lo mismo, uno encima del
   otro. Baja un escalon, no dos: lo que de verdad hace el trabajo es
   que el texto pasa de nueve renglones a cuatro. El color no se toca.
   ================================================================== */
main .hero .lead:not(#_), main .bhero .lead:not(#_),
main .sub .lead:not(#_), .hero .lead:not(#_), .bhero .lead:not(#_){
  font-size:clamp(16.5px,1.25vw,17.5px)!important;
  line-height:1.52;
  max-width:60ch}

/* ==================================================================
   EL 06 NO AVANZA SOLO EN MOVIL
   El candado era matchMedia('(hover:hover)'), que en un telefono
   deberia bastar y no siempre basta: en un navegador de escritorio en
   modo movil, y en algunos Android, da verdadero. Sin avance no hay
   barra de avance que mostrar.
   ================================================================== */
@media (max-width:900px){
  main #ibar, main .ist__bar{display:none!important}
}

/* v174 · el pie con la columna de recursos */
.foot__g{grid-template-columns:1.35fr repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.foot__g{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.foot__g{grid-template-columns:repeat(2,minmax(0,1fr))}}