@font-face{font-family:"Archivo";src:url("/a/archivo-wdth.e3a28eade2.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/a/plex-mono-400.08949f728d.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/a/plex-mono-500.01d2854474.woff2") format("woff2");font-weight:500;font-display:swap}
:root{
  --bg:#0A0706;--bg2:#0F0B09;--s1:#15100D;--warm:#110D0A;--s2:#1C1612;--s3:#272019;
  --fg:#F7F0EB;--fg2:#EEE6E0;--fg3:#E3DBD4;--fg4:#D2C9C1;
  --line:rgba(247,240,235,.08);--line2:rgba(247,240,235,.14);--line3:rgba(247,240,235,.26);
  --sig:#FF7B30;--ok:#FFA266;
  --grad:linear-gradient(112deg,#FF7010,#FA3A32 52%,#F00A4F);
  --sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--code:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,4.2vw,72px);
  /* el ritmo vertical, igual que en la portada. Tres huecos: pie de
     bloque, bloque a bloque y encabezado a contenido. */
  --v1:clamp(16px,1.6vw,22px);
  --v2:clamp(44px,6.2vw,92px);
  --v3:clamp(52px,7.4vw,110px);
  --ease:cubic-bezier(.22,1,.36,1);--snap:cubic-bezier(.75,0,.15,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px;border-radius:4px}
::selection{background:var(--sig);color:#fff}
.px{padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);font-weight:500;display:inline-flex;align-items:center;gap:10px}
.lab i{width:6px;height:6px;border-radius:50%;background:var(--sig);box-shadow:0 0 0 4px rgba(255,123,48,.16)}
.lab .n{color:var(--fg)}
.d1{font-weight:600;font-stretch:94%;font-size:clamp(36px,4.9vw,86px);line-height:1;letter-spacing:-.04em;margin:0}
.d2{font-weight:600;font-stretch:94%;font-size:clamp(32px,4.1vw,68px);line-height:1.02;letter-spacing:-.035em;margin:0}
.en{font-weight:700;font-stretch:76%;letter-spacing:-.05em}
.lead{font-size:clamp(16.5px,1.25vw,20px);line-height:1.5;color:var(--fg2);max-width:34em;margin:0}
.fig{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mut{color:var(--fg3)}
.beat{margin-top:var(--v2);font-size:clamp(20px,1.9vw,32px);letter-spacing:-.025em;line-height:1.2;font-weight:500;max-width:24em}
.beat span{color:var(--fg3)}

.btn{--h:52px;height:var(--h);white-space:nowrap;display:inline-flex;align-items:center;gap:12px;padding:0 22px 0 24px;border-radius:999px;font-weight:600;font-size:15.5px;letter-spacing:-.01em;position:relative;overflow:hidden;isolation:isolate;transition:color .25s}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--p{background:var(--grad);color:#fff;box-shadow:0 10px 30px -12px rgba(250,58,50,.5)}
.btn--p::before{content:"";position:absolute;inset:0;background:#fff;z-index:-1;transform:translateY(101%);transition:transform .3s var(--ease)}
.btn--p:hover{color:var(--bg)}.btn--p:hover::before{transform:none}
.btn--g{border:1px solid var(--line3);color:var(--fg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(10,7,6,.25);transition:border-color .25s}
.btn--g:hover{border-color:var(--fg)}
.btn--s{--h:40px;padding:0 16px 0 18px;font-size:14px}

/* reveal: 320ms, una sola vez */
.rv{opacity:0;transform:translateY(16px);transition:opacity .32s ease-out,transform .38s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.t1{transition-delay:.06s}.rv.t2{transition-delay:.12s}.rv.t3{transition-delay:.18s}.rv.t4{transition-delay:.24s}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:inline-block;transform:translateY(105%);transition:transform .42s var(--ease)}
.in .ln>span{transform:none}
.in .ln:nth-child(2)>span{transition-delay:.06s}.in .ln:nth-child(3)>span{transition-delay:.12s}

.nav{position:fixed;inset:0 0 auto;z-index:50;height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:background .3s,border-color .3s,height .3s,transform .35s var(--ease);border-bottom:1px solid transparent}
.nav.solid{background:rgba(10,7,6,.76);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-color:var(--line);height:62px}
.nav.hide{transform:translateY(-100%)}
.nav__logo img{height:25px;width:auto}
.nav__links{display:flex;gap:4px;align-items:center}
.nav__links>a,.nav__links>button{font-size:14.5px;font-weight:500;color:var(--fg2);padding:8px 14px;border-radius:999px;transition:color .2s,background .2s}
.nav__links>a:hover,.nav__links>button:hover,.nav__links>button[aria-expanded=true]{color:var(--fg);background:rgba(247,240,235,.06)}
.nav__cta{display:flex;gap:10px;align-items:center}
.nav__cta .ghost{font-size:14.5px;font-weight:500;color:var(--fg2);padding:8px 12px}
.nav__cta .ghost:hover{color:var(--fg)}
.mega{position:fixed;left:0;right:0;top:62px;z-index:49;background:rgba(12,9,7,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .28s var(--ease),visibility .22s}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega__in{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:40px;padding-block:36px 44px}
.mega h6{margin:0 0 16px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.mega a{display:block;padding:7px 0;color:var(--fg2);font-size:15.5px;transition:color .2s,transform .25s var(--ease)}
.mega a:hover{color:var(--fg);transform:translateX(4px)}
.mega .feat{border:1px solid var(--line2);border-radius:18px;padding:26px;background:var(--s1)}
.mega .feat b{display:block;font-size:21px;letter-spacing:-.02em;margin:10px 0 8px;font-weight:600}
.mega .feat p{margin:0 0 18px;color:var(--fg2);font-size:15px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);align-items:center;justify-content:center}
.burger span{width:16px;height:1.5px;background:var(--fg);position:relative;display:block}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--fg)}
.burger span::before{top:-5px}.burger span::after{top:5px}

.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.hero__media{position:absolute;inset:-6% 0 0;will-change:transform}
.hero__media video{width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.05) brightness(.88)}
.hero__tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,6,.5) 0%,transparent 24%,transparent 48%,rgba(10,7,6,.6) 80%,var(--bg) 100%)}
.hero__tint::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,7,6,.66),rgba(10,7,6,.2) 62%,transparent)}
.hero__in{position:relative;z-index:2;padding-bottom:clamp(32px,4.5vh,60px)}
.hero__top{margin-bottom:clamp(20px,3vh,34px)}
.hero .lab{color:rgba(247,240,235,.94);font-weight:600;text-shadow:0 1px 14px rgba(10,7,6,.75)}
.hero__foot span{color:var(--fg2);text-shadow:0 1px 12px rgba(10,7,6,.7)}
.hero h1{max-width:15em}
.hero__row{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;margin-top:clamp(24px,4vh,44px)}
.hero__row p{margin:0;max-width:34em;color:var(--fg2);font-size:clamp(16px,1.15vw,18.5px);line-height:1.55}
.hero__row p b{color:var(--fg);font-weight:500}
.hero__btns{display:flex;gap:12px;flex-wrap:wrap}
.hero__foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line2);margin-top:clamp(20px,3.4vh,40px);padding-top:16px;gap:20px}
.hero__foot span{font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.hero__foot .sig{font:600 13px var(--sans);letter-spacing:-.01em;text-transform:none;color:var(--fg2)}
.hero__foot .sc{display:flex;align-items:center;gap:10px}
.hero__foot .sc i{width:1px;height:20px;background:var(--line3);position:relative;overflow:hidden}
.hero__foot .sc i::after{content:"";position:absolute;inset:0;background:var(--sig);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

.logos{padding-block:clamp(34px,4.4vh,52px);display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
.logos__row{display:flex;justify-content:space-between;align-items:center;gap:clamp(24px,3vw,48px);flex-wrap:wrap}
.logos__row img{height:28px;width:auto;opacity:.6;filter:grayscale(1) brightness(1.6);transition:opacity .25s}
.logos__row img:hover{opacity:1}
.logos__row img.rnd{height:36px}



/* el sistema */
.sys{padding-block:clamp(56px,8vh,96px) 0;position:relative}
.sys__h{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:clamp(24px,3.5vh,40px)}
.sys__h p{margin:0;color:var(--fg2);max-width:38em;font-size:clamp(16px,1.2vw,19px)}
.sys__stage{position:relative;display:flex;justify-content:center;perspective:2200px}
.sys__stage::before{content:"";position:absolute;top:4%;left:50%;transform:translateX(-50%);width:min(60vw,860px);height:62%;background:radial-gradient(60% 60% at 50% 40%,rgba(255,123,48,.22),transparent 70%);filter:blur(54px);z-index:-1}
.sys__frame{width:min(1120px,100%);margin-inline:auto;aspect-ratio:16/9;position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line2);background:#0B0908;box-shadow:0 60px 110px -40px rgba(0,0,0,.92);transform-origin:50% 0%;will-change:transform}
.dash{position:absolute;top:0;left:0;width:1024px;height:576px;transform-origin:top left;transform:scale(var(--ds,1));display:flex;background:linear-gradient(160deg,#100C0A,#0A0807);font-size:11px}
.dash *{box-sizing:border-box}
.dash-side{width:21%;border-right:1px solid var(--line);padding:12px 0;background:rgba(0,0,0,.25)}
.dash-logo{display:flex;align-items:center;gap:8px;padding:0 14px 12px;font-weight:700;font-size:13px;letter-spacing:-.02em}
.dash-logo img{height:16px;width:auto}
.dash-search{margin:0 12px 12px;height:24px;border-radius:7px;border:1px solid var(--line2);background:rgba(247,240,235,.02);display:flex;align-items:center;padding:0 9px;color:var(--fg4);font:500 9.5px var(--mono)}
.dash-nav{display:flex;flex-direction:column;gap:1px;padding:0 8px}
.dash-ni{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;color:var(--fg3);font-size:10px;font-weight:500;white-space:nowrap}
.dash-ni svg{width:13px;height:13px;flex:none;opacity:.8}
.dash-ni.on{background:rgba(247,240,235,.07);color:var(--fg);font-weight:600}
.dash-ni.on svg{color:var(--sig);opacity:1}
.dash-main{flex:1;min-width:0;display:flex;flex-direction:column}
.dash-top{height:34px;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:0 16px;border-bottom:1px solid var(--line)}
.dash-top .ask{background:var(--grad);color:#fff;font:600 9.5px var(--sans);padding:5px 11px;border-radius:7px}
.dash-top .lk{color:var(--fg3);font-size:9.5px;font-weight:500}
.dash-content{flex:1;display:flex;flex-direction:column;padding:14px 16px}
.dash-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dash-head h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.025em}
.dash-chips{display:flex;gap:8px}
.dash-chip{font:500 9px var(--mono);color:var(--fg3);border:1px solid var(--line2);border-radius:7px;padding:5px 9px}
.dash-cards{display:flex;gap:9px;margin-bottom:12px}
.dash-card{flex:1;min-width:0;border:1px solid var(--line);border-radius:11px;padding:11px;background:rgba(247,240,235,.02)}
.dash-card .cl{font:500 7.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-card .cv{font-size:24px;font-weight:700;font-stretch:88%;letter-spacing:-.035em;margin:6px 0 8px;font-variant-numeric:tabular-nums}
.dash-delta{display:inline-flex;align-items:center;gap:3px;font:600 8px var(--mono);padding:2px 6px;border-radius:5px;color:#FFC49E;background:rgba(255,162,102,.12)}
.dash-card.o{background:var(--grad);border:0}
.dash-card.o .cl{color:rgba(255,255,255,.85)}
.dash-card.o .dash-delta{color:#fff;background:rgba(255,255,255,.22)}
.dash-chart{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:rgba(247,240,235,.012)}
.dash-chart-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dash-chart-h h4{margin:0;font-size:12px;font-weight:600}
.dash-legend{display:flex;gap:11px}
.dash-legend span{display:inline-flex;align-items:center;gap:4px;font:500 8.5px var(--mono);color:var(--fg3)}
.dash-legend i{width:6px;height:6px;border-radius:50%}
.dash-chart svg{flex:1;min-height:0;width:100%;display:block}
.dash-bottom{display:flex;gap:11px;margin-top:11px}
.dash-panel{flex:1;min-width:0;border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:rgba(247,240,235,.012)}
.dash-panel h5{margin:0 0 9px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px}
.dash-panel h5 svg{width:12px;height:12px;color:var(--sig)}
.dash-pe{font-size:9.5px;color:var(--fg3);display:flex;align-items:center;gap:7px}
.dash-pe svg{width:13px;height:13px;color:var(--ok);flex:none}
.dash-row{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:8px;background:rgba(247,240,235,.03);margin-bottom:5px}
.dash-row:last-child{margin-bottom:0}
.dash-row.in{animation:rowin .4s var(--ease)}
@keyframes rowin{from{opacity:0;transform:translateY(-6px)}}
.dash-row .cn{font:500 7.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);border:1px solid var(--line2);border-radius:999px;padding:3px 7px;flex:none}
.dash-row .info{flex:1;min-width:0}
.dash-row .nm{font-size:9.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-row .ac{font:400 8px var(--mono);color:var(--fg3)}
.dash-row .ck{width:13px;height:13px;color:var(--ok);flex:none}
@media (max-width:820px){.sys__stage{overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}.sys__frame{width:640px;flex:none;border-radius:12px;transform:none!important}.sys__stage::before{display:none}}

/* 01 hoy */
.hoy{position:relative;height:170vh}
.hoy__stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.hoy__img{position:absolute;inset:0}
.hoy__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;transition:opacity .5s ease-out}
.hoy__img .b{opacity:0}
.hoy.after .hoy__img .b{opacity:1}
.hoy__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,7,6,.92) 0%,rgba(10,7,6,.55) 38%,transparent 62%),linear-gradient(0deg,var(--bg) 0%,transparent 22%,transparent 85%,rgba(10,7,6,.6))}
.hoy__txt{position:relative;z-index:2;width:100%}
.hoy__txt .lab{margin-bottom:24px}
.qs{position:relative;height:calc(clamp(34px,4.6vw,84px)*3.2);width:min(56vw,960px)}
.qs p{position:absolute;left:0;right:0;top:0;margin:0;font-weight:500;font-stretch:90%;font-size:clamp(34px,4.6vw,84px);line-height:1.04;letter-spacing:-.04em;opacity:0;transform:translateY(18px);transition:opacity .28s ease-out,transform .34s var(--ease)}
.qs p.on{opacity:1;transform:none}
.qs p.gone{opacity:0;transform:translateY(-18px)}
.qs p.fin{font-weight:600;font-size:clamp(30px,3.9vw,72px)}
.hoy__meter{display:flex;gap:6px;margin-top:30px}
.hoy__meter i{height:2px;width:40px;background:var(--line2);position:relative;overflow:hidden}
.hoy__meter i b{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(0)}
.hoy__who{margin-top:20px;min-height:2.6em;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3)}
.hoy__cap{position:absolute;right:var(--pad);bottom:clamp(24px,4vh,48px);z-index:2;display:flex;gap:10px;align-items:center;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
.hoy__cap i{width:8px;height:8px;border-radius:50%;background:var(--fg4);transition:background .3s}
.hoy.after .hoy__cap i{background:var(--ok);box-shadow:0 0 0 4px rgba(255,162,102,.18)}

.sec{padding-block:clamp(88px,12vh,150px);position:relative}
.sec__h{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.62fr);gap:clamp(32px,5vw,96px);align-items:end;margin-bottom:var(--v3)}
.sec__h .lab{margin-bottom:22px}
/* la separacion la hace el aire: entre secciones ya hay 216 px */
.bt{border-top:0}

/* 02 motor */
.motor{position:relative;height:260vh}
.motor__stick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.rail{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:clamp(24px,4vh,44px)}
.rail div{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg4);transition:color .25s}
.rail div i{display:block;height:2px;background:var(--line2);margin-bottom:12px;position:relative;overflow:hidden}
.rail div i b{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(var(--p,0))}
.rail div.on{color:var(--fg)}
.motor__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,88px);align-items:center}
.stage{position:relative;height:clamp(74px,8.4vw,140px)}
.stage b{position:absolute;left:0;top:0;font-weight:700;font-stretch:76%;font-size:clamp(58px,7.6vw,140px);line-height:.95;letter-spacing:-.05em;opacity:0;transform:translateY(16%);transition:opacity .22s var(--snap),transform .3s var(--snap)}
.stage b.on{opacity:1;transform:none}
.stage b.gone{opacity:0;transform:translateY(-16%)}
.stage__d{position:relative;min-height:4.2em;margin-top:20px;max-width:26em}
.stage__d p{position:absolute;inset:0;margin:0;font-size:clamp(17px,1.35vw,21px);line-height:1.4;color:var(--fg2);opacity:0;transition:opacity .25s}
.stage__d p.on{opacity:1}
.motor__h{margin-bottom:16px;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.card{position:relative;border:1px solid var(--line2);border-radius:22px;background:linear-gradient(180deg,#1A1410,#110D0A);box-shadow:0 50px 100px -40px rgba(0,0,0,.85);padding:18px;height:clamp(540px,72vh,680px);overflow:hidden}
.card__v{position:absolute;inset:0;opacity:0;transition:opacity .5s ease-out}
.card__v video{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.7)}
.card.look .card__v{opacity:.4}
.card__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column}
.card__top{display:flex;justify-content:space-between;align-items:center;padding:0 4px 14px;border-bottom:1px solid var(--line)}
.card__top .who{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.card__top .who img{width:24px;height:24px}
.card__top .st{font:500 10.5px var(--mono);letter-spacing:.12em;color:var(--fg3);display:flex;gap:8px;align-items:center;text-transform:uppercase}
.card__top .st i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(255,162,102,.14)}
.card__b{padding:14px 4px 0;display:flex;flex-direction:column;gap:10px}
.msg{background:var(--s3);border-radius:16px;border-bottom-left-radius:5px;padding:13px 16px;font-size:15px;line-height:1.45;max-width:92%}
.msg small{display:block;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin-bottom:5px}
.caret{display:inline-block;width:2px;height:1em;background:var(--fg);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--line2);font:500 11.5px var(--mono);color:var(--fg3);opacity:0;transform:scale(.94);transition:opacity .2s,transform .24s var(--snap),color .2s,border-color .2s,background .2s}
.chip.on{opacity:1;transform:none}
.chip.lk{color:var(--fg);border-color:rgba(247,240,235,.4);background:rgba(247,240,235,.06)}
.chip svg{width:12px;height:12px;display:none}
.chip.lk svg{display:block;color:var(--ok)}
.cnt{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(10,7,6,.55);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .3s var(--ease)}
.cnt.on{opacity:1;transform:none}
.cnt b{font-weight:700;font-stretch:80%;font-size:28px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.cnt span{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
.sol{border:1px solid var(--line2);border-radius:16px;background:rgba(10,7,6,.62);padding:4px 14px;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .3s var(--ease)}
.sol.on{opacity:1;transform:none}
.row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateX(-8px);transition:opacity .22s,transform .26s var(--snap)}
.row:last-of-type{border-bottom:0}
.row.on{opacity:1;transform:none}
.row figure{margin:0;width:34px;height:34px;border-radius:9px;background:radial-gradient(circle at 50% 40%,#30261e,#17110d);display:grid;place-items:center;overflow:hidden}
.row figure img{width:88%;height:88%;object-fit:contain}
.row b{display:block;font-size:14px;font-weight:500;letter-spacing:-.01em}
.row span{font:400 11px var(--mono);color:var(--fg3)}
.row .pr{font:500 12.5px var(--mono);color:var(--fg);text-align:right;opacity:0;transition:opacity .25s}
.sol.q .row .pr{opacity:1}
.sol__t{display:flex;justify-content:space-between;padding:10px 0 8px;border-top:1px solid var(--line2);font:500 12px var(--mono);letter-spacing:.06em;opacity:0;transition:opacity .25s}
.sol.q .sol__t{opacity:1}
.sol__t b{font-size:15px}
.erp{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;border:1px solid rgba(255,162,102,.3);background:rgba(255,162,102,.07);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .3s var(--ease)}
.erp.on{opacity:1;transform:none}
.erp span{font:500 11.5px var(--mono);color:#FFC49E;display:flex;align-items:center;gap:8px}
.erp span svg{width:14px;height:14px}
.erp em{font-style:normal;font:500 11px var(--mono);color:var(--fg3)}
.erp .send{display:none;--h:34px;pointer-events:none}
.erp.done em{display:none}.erp.done .send{display:inline-flex}
.card__note{position:absolute;left:22px;bottom:18px;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg4);z-index:3}

/* 03 por que ahora */
.inev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,5vw,88px);align-items:center}
.stream{position:relative;height:clamp(380px,56vh,540px);overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.stream__col{display:flex;flex-direction:column;gap:12px;animation:up 34s linear infinite}
.stream__col+.stream__col{position:absolute;top:0;right:0;width:48%;animation-duration:28s;animation-delay:-9s}
.stream__col:first-child{width:48%}
@keyframes up{to{transform:translateY(-50%)}}
.bub{align-self:flex-start;background:var(--s2);border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:5px;padding:12px 16px;font-size:15px;line-height:1.4}
.bub small{display:block;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin-bottom:4px}
.inev__pov{margin-top:var(--v2);display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,64px);align-items:end;padding-top:0}
.inev__pov .en{font-size:clamp(40px,5.4vw,96px);line-height:.9}
.inev__pov p{margin:0 0 .5em;max-width:26em;color:var(--fg2);font-size:clamp(16.5px,1.25vw,19px)}

/* 04 frentes */
.fr{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.fr article{position:relative;background:var(--s1);display:flex;flex-direction:column;overflow:hidden}
.fr figure{margin:0;aspect-ratio:16/9;overflow:hidden;position:relative}
.fr figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.fr article:hover figure img{transform:scale(1.03)}
.fr figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--s1),transparent 55%)}
.fr .bd{padding:0 clamp(24px,2.45vw,36px) clamp(24px,2.45vw,36px);margin-top:-34px;position:relative;z-index:2;display:flex;flex-direction:column;flex:1}
.fr .n{font:500 10.5px var(--mono);letter-spacing:.14em;color:var(--fg3)}
.fr h3{margin:8px 0 16px;font-size:clamp(20px,1.55vw,25px);font-weight:600;letter-spacing:-.025em;line-height:1.1}
.fr q{display:block;font-size:15.5px;color:var(--fg3);quotes:none;text-decoration:line-through;text-decoration-color:rgba(247,240,235,.3);text-decoration-thickness:1px;margin-bottom:12px}
.fr p{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line2);font-size:15.5px;line-height:1.45}
.fr small{display:block;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg4);margin-bottom:6px}

/* 05 industrias */
.ind{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,4vw,72px);align-items:stretch}
.seg2{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2);border-radius:999px;padding:4px;margin-bottom:20px;position:relative;background:var(--s1)}
.seg2 button{position:relative;z-index:2;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--fg3);transition:color .25s}
.seg2 button.on{color:var(--bg)}
.seg2 .th{position:absolute;z-index:1;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--fg);transition:transform .35s var(--snap)}
.ilist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.ilist li button{width:100%;text-align:left;display:grid;grid-template-columns:36px 1fr 14px;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:clamp(16.5px,1.3vw,20px);font-weight:500;letter-spacing:-.02em;color:var(--fg3);transition:color .2s,padding .25s var(--ease)}
.ilist li button small{font:500 10.5px var(--mono);color:var(--fg4)}
.ilist li button i{width:6px;height:6px;border-radius:50%;background:transparent;justify-self:end;transition:background .2s}
.ilist li button:hover{color:var(--fg2)}
.ilist li button.on{color:var(--fg);padding-left:10px}
.ilist li button.on i{background:var(--sig)}
.ilist .nw{font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line3);color:var(--fg2);padding:3px 7px;border-radius:999px;margin-left:10px;vertical-align:3px}
.istage{position:relative;border-radius:24px;overflow:hidden;background:#0C0907;border:1px solid var(--line2);min-height:clamp(480px,62vh,620px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,3vw,42px)}
.istage__ph{position:absolute;inset:0 0 auto;height:54%;background-size:cover;background-position:52% 55%;transition:opacity .28s var(--ease)}
.istage__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0C0907 4%,rgba(12,9,7,.25) 55%,transparent 100%)}
.istage.chg .istage__ph{opacity:0}
.istage__txt{position:relative;z-index:2;max-width:32em}
.istage__txt .nm{font-weight:600;letter-spacing:-.035em;line-height:1;font-size:clamp(28px,3vw,50px);margin:12px 0 20px}
.istage__txt .rq{display:inline-block;background:var(--s3);border-radius:16px;border-bottom-left-radius:5px;padding:12px 16px;font-size:16px;margin-bottom:14px}
.istage__txt .rq small,.istage__txt .rs small{display:block;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin-bottom:4px}
.istage__txt .rs{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:var(--fg2)}
.istage__txt .rs svg{width:16px;height:16px;color:var(--ok);flex:none;margin-top:4px}
.istage__txt .tag{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3)}
.istage .swap{transition:opacity .22s,transform .3s var(--ease)}
.istage.chg .swap{opacity:0;transform:translateY(8px)}
.ibar{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.ibar b{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(0)}

/* 06 resultados */
.res{display:grid;grid-template-columns:1.25fr 1fr 1fr;border-top:1px solid var(--line2)}
.res article{padding:34px 32px 38px 0;border-right:1px solid var(--line)}
.res article+article{padding-left:32px}
.res article:last-child{border-right:0}
.res .v{font-weight:600;font-stretch:84%;font-size:clamp(46px,5.2vw,92px);letter-spacing:-.05em;line-height:.9;display:flex;align-items:baseline;gap:6px}
.res .v small{font-size:.32em;letter-spacing:-.01em;color:var(--fg3);font-weight:500;font-stretch:100%}
.res p{margin:20px 0 16px;color:var(--fg2);font-size:15.5px;line-height:1.5;max-width:26em}
.res .who{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);display:flex;align-items:center;gap:10px}
.res .who i{width:14px;height:1px;background:var(--fg3)}
.show{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:var(--v2)}
.show__c{position:relative;aspect-ratio:16/11;overflow:hidden;background:#000}
.show__c video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.show__c::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,7,6,.92),transparent 45%)}
.show__t{position:absolute;left:clamp(20px,3vw,46px);right:clamp(20px,3vw,46px);bottom:clamp(24px,4vw,48px);z-index:2}
.show__t .en{font-size:clamp(30px,3.4vw,62px);line-height:.92;display:block;margin:12px 0}
.show__t p{margin:0;color:var(--fg2);max-width:28em;font-size:15.5px}
.mex{margin-top:2px;background:var(--s1);display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;padding:30px clamp(20px,3vw,46px)}
.mex img{height:28px;width:auto;opacity:.8}
.mex p{margin:0;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.02em;font-weight:500}

/* 07 integraciones */
.erpwall{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.erpwall>a:not(.mk){position:relative;background:var(--s1);border:1px solid var(--line);border-radius:14px;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.erpwall>a:not(.mk):hover{background:var(--s2);border-color:var(--line2);transform:translateY(-2px)}
.erpwall>a:not(.mk) .lg{height:26px;display:grid;place-items:center}
.erpwall>a:not(.mk) .lg img{max-height:26px;width:auto;opacity:.82;transition:opacity .25s}
.erpwall>a:not(.mk):hover .lg img{opacity:1}
.erpwall>a:not(.mk) .tx{font-weight:600;font-stretch:104%;font-size:16px;text-align:center;line-height:1.1;letter-spacing:-.02em;color:var(--fg2)}
.erpwall>a:not(.mk) b{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);text-align:center;line-height:1.3}
.erpwall i{position:absolute;right:12px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--fg4)}
.erpwall i.c{background:var(--sig);box-shadow:0 0 0 4px rgba(255,123,48,.16)}
.erpwall i.p{background:transparent;border:1px solid var(--fg3)}
.legend{display:flex;gap:22px;flex-wrap:wrap;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);margin-top:20px}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:7px;height:7px;border-radius:50%;background:var(--fg4)}
.legend i.c{background:var(--sig)}.legend i.p{background:transparent;border:1px solid var(--fg3)}
.apps{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;font:500 12px var(--mono);letter-spacing:.04em;border:1px solid var(--line2);color:var(--fg2)}
.pill svg{width:14px;height:14px;fill:currentColor}

/* 08 control */
.ctl{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,88px);align-items:center}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line2);border-radius:999px;padding:5px;background:var(--s1)}
.seg button{position:relative;z-index:2;height:48px;border-radius:999px;font-weight:600;font-size:15px;color:var(--fg3);transition:color .25s}
.seg button.on{color:var(--bg)}
.seg .th{position:absolute;z-index:1;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/3);border-radius:999px;background:var(--fg);transition:transform .35s var(--snap)}
.ctl__txt{margin-top:26px;min-height:11em}
.tray__f span{min-height:1.1em;display:block}
.ctl__txt .tag{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sig);display:block;margin-bottom:10px;min-height:1.2em}
.ctl__txt b{display:block;font-size:clamp(28px,2.6vw,42px);font-weight:600;letter-spacing:-.035em;line-height:1;margin-bottom:12px}
.ctl__txt p{margin:0;color:var(--fg2);font-size:clamp(16.5px,1.25vw,19px);max-width:25em}
.ctl__stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line2);margin-top:22px}
.ctl__stats div{padding:14px 0}
.ctl__stats div+div{padding-left:20px;border-left:1px solid var(--line)}
.ctl__stats small{display:block;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin-bottom:6px}
.ctl__stats span{font-size:23px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.diag{position:relative;border:1px solid var(--line2);border-radius:24px;background:radial-gradient(80% 70% at 50% 50%,#1A1410,#0D0A08);aspect-ratio:16/11;overflow:hidden}
.diag svg{position:absolute;inset:0;width:100%;height:100%}
.diag .path{fill:none;stroke:rgba(247,240,235,.12);stroke-width:1.5}
.node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.node .c{width:60px;height:60px;border-radius:50%;border:1px solid var(--line3);background:var(--s2);display:grid;place-items:center;transition:box-shadow .2s,border-color .2s}
.node .c svg{position:static;width:24px;height:24px;color:var(--fg)}
.node.pk .c{width:80px;height:80px;background:#fff;border:0}
.node.pk .c img{width:38px;height:38px}
.node b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.node small{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin-top:-6px}
.node.pulse .c{box-shadow:0 0 0 8px rgba(247,240,235,.08);border-color:var(--fg)}
.guard{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:clamp(36px,5vh,64px)}
.guard div{background:var(--s1);padding:22px 20px 24px}
.guard svg{width:20px;height:20px;color:var(--fg2);margin-bottom:20px}
.guard b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.guard p{margin:0;color:var(--fg3);font-size:14.5px;line-height:1.5}


.opstage{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:16px;align-items:stretch;margin-bottom:clamp(32px,5vh,64px)}
.opstage .sys__stage{display:block;perspective:none}
.opstage .sys__stage::before{display:none}
.opstage .sys__frame{width:100%;margin:0;transform:none!important;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.opstage .tray{display:flex;flex-direction:column;background:linear-gradient(180deg,#171210,#0F0B09);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.opstage .tray__l{flex:1;height:auto;min-height:0}
.opg{display:none}
@media (max-width:1180px){
  .opstage{grid-template-columns:1fr}
  .opstage .tray__l{min-height:300px}
}
@media (max-width:820px){
  .opstage .sys__stage{display:none}
}
.opl{grid-template-columns:repeat(4,1fr)!important;gap:2px}
.opl article{flex-direction:column}
@media (max-width:1180px){.opl{grid-template-columns:1fr 1fr!important}}
@media (max-width:820px){.opl{grid-template-columns:1fr!important}}

/* 09 quienes somos */
.acc{display:flex;gap:2px;height:clamp(440px,62vh,620px)}
.acc__p{position:relative;flex:1;min-width:0;overflow:hidden;background:var(--s1);cursor:pointer;transition:flex .5s var(--snap)}
.acc__p.on{flex:3.4}
.acc__p .bg{position:absolute;inset:0;opacity:.35;transition:opacity .4s}
.acc__p.on .bg{opacity:1}
.acc__p .bg img{width:100%;height:100%;object-fit:cover}
.acc__p .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,7,6,.95) 5%,rgba(10,7,6,.35) 55%,rgba(10,7,6,.2))}
.acc__p .n{position:absolute;left:26px;top:24px;z-index:2;font:500 11px var(--mono);letter-spacing:.14em;color:var(--fg2)}
.acc__p .tt{position:absolute;left:26px;right:26px;bottom:28px;z-index:2}
.acc__p h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1;font-size:clamp(21px,1.9vw,28px);transition:font-size .4s var(--snap)}
.acc__p.on h3{font-size:clamp(28px,3vw,50px)}
.acc__p p{margin:12px 0 0;max-width:24em;color:var(--fg2);font-size:clamp(15.5px,1.15vw,18px);opacity:0;transition:opacity .25s}
.acc__p.on p{opacity:1;transition-delay:.18s}
.acc__p .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line2);z-index:3}
.acc__p .bar b{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(0)}
.acc__p.on .bar b{animation:fill 7s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.metr{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6px;padding:80px 26px 140px}
.metr i{flex:1;background:rgba(247,240,235,.12);border-radius:2px;height:var(--h)}
.metr i.hi{background:var(--grad)}

/* 10 formas */
.ways{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.ways a{position:relative;background:var(--s1);padding:28px 24px 30px;min-height:320px;display:flex;flex-direction:column;overflow:hidden;transition:background .25s}
.ways a:hover{background:var(--s2)}
.ways .n{font:500 11px var(--mono);letter-spacing:.14em;color:var(--fg3)}
.ways b{font-size:clamp(21px,1.8vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:auto 0 12px}
.ways p{margin:0 0 20px;color:var(--fg2);font-size:15px}
.ways .k{font:500 11px var(--mono);letter-spacing:.08em;color:var(--fg3);border-top:1px solid var(--line2);padding-top:14px;display:flex;justify-content:space-between;align-items:center}
.ways .k svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.ways a:hover .k svg{transform:translateX(4px)}

/* 11 equipo */
.team__big{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,64px);align-items:end}
.team__big .v{font-weight:700;font-stretch:70%;font-size:clamp(100px,15vw,280px);line-height:.8;letter-spacing:-.06em}
.team__big p{margin:0 0 .6em;font-size:clamp(17px,1.4vw,21px);line-height:1.4;max-width:24em}
.tl{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin-top:clamp(48px,7vh,88px)}
.tl::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--line2)}
.tl .prog{position:absolute;left:0;top:7px;height:1px;background:var(--fg);width:0;transition:width 1.2s var(--ease)}
.tl.in .prog{width:100%}
.tl div{position:relative;padding-right:20px}
.tl div::before{content:"";display:block;width:15px;height:15px;border-radius:50%;background:var(--bg);border:1px solid var(--line3);margin-bottom:22px;transition:background .25s,border-color .25s}
.tl.in div::before{background:var(--fg);border-color:var(--fg)}
.tl.in div:nth-child(3)::before{transition-delay:.25s}.tl.in div:nth-child(4)::before{transition-delay:.5s}.tl.in div:nth-child(5)::before{transition-delay:.75s}.tl.in div:nth-child(6)::before{transition-delay:1s}
.tl small{font:500 11px var(--mono);color:var(--fg3);letter-spacing:.1em}
.tl b{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em;margin:10px 0 6px}
.tl span{font-size:15px;color:var(--fg3);line-height:1.45;display:block;max-width:15em}

.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,88px)}
.faq details{border-bottom:1px solid var(--line2)}
.faq details:first-child{border-top:1px solid var(--line2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font-size:clamp(18px,1.4vw,22px);font-weight:500;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line3);position:relative;transition:transform .25s var(--ease),background .2s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--fg);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg);background:var(--fg)}
.faq details[open] summary i::before,.faq details[open] summary i::after{background:var(--bg)}
.faq details p{margin:0 0 26px;color:var(--fg2);max-width:40em}

.fin{position:relative;height:150vh}
.fin__stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.fin__bg{position:absolute;inset:0;opacity:0;transition:opacity .6s ease-out}
.fin__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.fin.last .fin__bg{opacity:1}
.fin__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(55% 45% at 50% 50%,rgba(10,7,6,.8),rgba(10,7,6,.4) 80%),linear-gradient(180deg,var(--bg),transparent 25%,transparent 75%,var(--bg))}
.fin__w{position:relative;z-index:2;width:100%}
.words{position:relative;height:clamp(96px,13vw,240px)}
.words b{position:absolute;left:0;right:0;top:50%;font-weight:700;font-stretch:76%;font-size:clamp(50px,9.4vw,180px);line-height:.92;letter-spacing:-.05em;opacity:0;transform:translateY(-50%) scale(1.08);transition:opacity .22s var(--snap),transform .3s var(--snap)}
.words b.on{opacity:1;transform:translateY(-50%)}
.words b.gone{opacity:0;transform:translateY(-50%) scale(.96)}
.words b.yg{font-size:clamp(62px,12vw,230px)}
.fin__cta{margin-top:clamp(24px,4vh,48px);opacity:0;transform:translateY(12px);transition:opacity .4s ease-out,transform .45s var(--ease);pointer-events:none}
.fin.last .fin__cta{opacity:1;transform:none;pointer-events:auto;transition-delay:.15s}
.fin__cta .lab{margin-bottom:16px}
.fin__cta p{margin:0 auto 30px;color:var(--fg2);max-width:32em;font-size:clamp(16.5px,1.25vw,19px)}
.fin__cta .hero__btns{justify-content:center}

.foot{border-top:1px solid var(--line);padding-top:64px;overflow:hidden}
.foot__g{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px}
.foot h5{margin:0 0 16px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{display:block;padding:5px 0;color:var(--fg2);font-size:15px}
.foot li a:hover{color:var(--fg)}
.foot__tag{color:var(--fg2);max-width:22em;margin:16px 0 24px}
.foot__big{margin-top:64px;opacity:.07;pointer-events:none;user-select:none}
.foot__big img{width:100%;height:auto}
.foot__seo{color:var(--fg4);font-size:13px;line-height:1.6;max-width:70em;margin:0 0 26px}
.foot__legal{display:flex;justify-content:space-between;gap:20px;padding-block:20px 26px;border-top:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.08em;color:var(--fg4);text-transform:uppercase}

dialog{border:0;padding:0;background:transparent;color:var(--fg);max-width:none;max-height:none;width:100%;height:100%}
dialog::backdrop{background:rgba(5,3,2,.72);backdrop-filter:blur(8px)}
.dlg{position:absolute;right:0;top:0;bottom:0;width:min(560px,100%);background:var(--bg2);border-left:1px solid var(--line2);padding:32px clamp(22px,3vw,44px);overflow:auto;animation:slin .35s var(--ease)}
@keyframes slin{from{transform:translateX(100%)}}
.dlg__x{position:absolute;right:22px;top:22px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center}
.dlg__x svg{width:14px;height:14px}
.dlg h3{font-size:33px;font-weight:600;letter-spacing:-.035em;line-height:1.02;margin:46px 0 12px}
.dlg>div>p{color:var(--fg2);margin:0 0 28px}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin-bottom:8px}
.fld input{width:100%;height:52px;border-radius:12px;border:1px solid var(--line2);background:var(--s1);color:var(--fg);font:inherit;padding:0 16px;transition:border-color .2s}
.fld input:focus{outline:0;border-color:var(--fg)}
.days,.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:18px}
.slots{grid-template-columns:repeat(3,1fr)}
.days button,.slots button{border:1px solid var(--line2);border-radius:12px;padding:12px 6px;text-align:center;font-size:14px;transition:border-color .2s,background .2s}
.days button small{display:block;font:500 10px var(--mono);color:var(--fg3);letter-spacing:.1em;text-transform:uppercase}
.days button b{font-size:20px;font-weight:600}
.days button.on,.slots button.on{border-color:var(--fg);background:rgba(247,240,235,.08)}
.stp{display:none}.stp.on{display:block;animation:fu .3s var(--ease)}
@keyframes fu{from{opacity:0;transform:translateY(8px)}}
.ok-big{font-weight:700;font-stretch:76%;font-size:72px;letter-spacing:-.05em;line-height:.9;margin:36px 0 16px}

/* CTA intermedios y barra móvil */
.ctab{padding-block:clamp(64px,8.2vw,118px)}
/* un llamado es una pausa en la lectura, no un objeto que flota */
.ctab__in{display:flex;justify-content:space-between;align-items:center;gap:22px 48px;flex-wrap:wrap;padding:0}
.ctab__in b{display:block;font-size:clamp(19px,1.6vw,24px);font-weight:600;letter-spacing:-.02em}
.ctab__in span{display:block;margin-top:6px;color:var(--fg2);font-size:15.5px;line-height:1.5;max-width:40em}
.sub__cta{margin-top:26px}
@media (max-width:720px){
 .ctab__in .hero__btns{width:100%;flex-direction:column}.ctab__in .hero__btns .btn{justify-content:center}
}


.more{display:flex;align-items:center;gap:24px;margin-top:clamp(28px,4vh,44px);flex-wrap:wrap}
.more>span{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg4);max-width:52em;line-height:1.7}
.cred{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,64px);align-items:center;margin-top:2px;background:var(--s1);padding:26px clamp(20px,3vw,46px)}
.cred p{margin:0;font-size:clamp(17px,1.45vw,22px);line-height:1.35;letter-spacing:-.02em;max-width:34em;font-weight:500}
.cred div{display:flex;flex-direction:column;gap:6px}
.cred div:first-child{flex-direction:row;align-items:baseline;gap:16px}
.cred b{font-size:16px;font-weight:600;letter-spacing:-.02em;max-width:18em}
.cred span:not(.v){color:var(--fg3);font-size:14.5px;max-width:34em}
.tray{border:1px solid var(--line2);border-radius:22px;background:linear-gradient(180deg,#18120F,#100C0A);padding:18px 20px 16px;box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.tray__h{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
.tray__l{display:flex;flex-direction:column;gap:8px;padding-top:14px;height:330px;overflow:hidden}
.tr{min-height:64px}
.tr{display:grid;flex:0 0 auto;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:13px 14px;border-radius:14px;background:var(--s2);border:1px solid var(--line);opacity:0;transform:translateY(-10px);transition:opacity .28s,transform .3s var(--ease),border-color .3s,background .3s}
.tr.in{opacity:1;transform:none}
.tr.out{opacity:0;transform:translateY(10px)}
.tr .ch{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);border:1px solid var(--line2);border-radius:999px;padding:4px 9px}
.tr p{margin:0;font-size:14px;line-height:1.35}
.tr .stt{font:500 11px var(--mono);letter-spacing:.06em;color:var(--fg3);display:flex;align-items:center;gap:7px;white-space:nowrap}
.tr .stt svg{width:13px;height:13px}
.tr .sp{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--fg4);border-top-color:var(--fg2);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tr.ok{border-color:rgba(255,162,102,.28);background:rgba(255,162,102,.06)}
.tr.ok .stt{color:#FFC49E}
.tr.hum{border-color:rgba(255,123,48,.3);background:rgba(255,123,48,.06)}
.tr.hum .stt{color:var(--sig)}
@media (max-width:820px){.cred{grid-template-columns:1fr;gap:18px}.tray__l{height:auto;min-height:340px;max-height:380px}.tr{grid-template-columns:1fr;gap:8px}.tr .ch{justify-self:start}}

.idx{margin-top:var(--v2)}
.idx__h{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.idx ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 2px}
.idx li a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:15px 16px 15px 0;border-top:1px solid var(--line);color:var(--fg2);transition:color .2s,padding .25s var(--ease),background .2s}
.idx li a small{font:500 10.5px var(--mono);color:var(--fg4)}
.idx li a b{font-size:16px;font-weight:500;letter-spacing:-.02em}
.idx li a svg{width:14px;height:14px;opacity:0;transition:opacity .2s,transform .25s var(--ease)}
.idx li a:hover{color:var(--fg);padding-left:10px;background:var(--s1)}
.idx li a:hover svg{opacity:1;transform:translateX(3px)}
.opg{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,4vw,72px);align-items:start}
.opl{display:grid;gap:2px}
.opl article{background:var(--s1);padding:clamp(24px,2.45vw,36px);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;transition:background .25s}
.opl article:hover{background:var(--s2)}
.opl .n{font:500 10.5px var(--mono);letter-spacing:.14em;color:var(--sig);padding-top:4px}
.opl b{font-size:20px;font-weight:600;letter-spacing:-.025em;display:block;margin-bottom:6px}
.opl p{margin:0;color:var(--fg3);font-size:15px;line-height:1.5;max-width:30em}
.seg3{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line2);border-radius:999px;padding:3px;background:rgba(10,7,6,.5)}
.seg3 button{position:relative;z-index:2;height:30px;padding:0 14px;border-radius:999px;font:500 12px var(--mono);letter-spacing:.06em;color:var(--fg3);transition:color .25s}
.seg3 button.on{color:var(--bg)}
.seg3 .th{position:absolute;z-index:1;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:999px;background:var(--fg);transition:transform .35s var(--snap)}
.tray__h{gap:16px;flex-wrap:wrap}
.tr{grid-template-columns:auto 1fr auto}
.tr em{font-style:normal;display:block;font:500 11px var(--mono);letter-spacing:.04em;color:var(--fg3);margin-top:4px;min-height:1em}
.tr.ok em{color:#FFC49E}
.tr.hum em{color:var(--sig)}
.tray__f{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:14px;padding-top:14px;gap:16px}
.tray__f small{display:block;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin-bottom:6px}
.tray__f span{font-size:20px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tray__n{margin:12px 0 0;color:var(--fg3);font-size:14px;line-height:1.5}
.erpwall>a:not(.mk) b{font-size:9.5px;color:var(--fg4);transition:color .25s}
.erpwall>a:not(.mk):hover b{color:var(--fg2)}
@media (max-width:1180px){.idx ul{grid-template-columns:repeat(2,1fr)}.opg{grid-template-columns:1fr}}
@media (max-width:820px){.idx ul{grid-template-columns:1fr}.tray__f{grid-template-columns:1fr 1fr}.opl article{grid-template-columns:1fr;gap:8px}}
@media (max-width:1180px){
  .nav__links{display:none}.burger{display:flex}.nav__cta .ghost{display:none}
  .erpwall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fr{grid-template-columns:repeat(2,1fr)}
  .ways,.guard{grid-template-columns:1fr 1fr}
  .res{grid-template-columns:1fr}.res article{padding:28px 0!important;border-right:0;border-bottom:1px solid var(--line)}
  .foot__g{grid-template-columns:1fr 1fr}
  .ind,.ctl{grid-template-columns:1fr}
}
@media (max-width:820px){
  body{font-size:16px}
  .hero__row{grid-template-columns:1fr}
  .logos{grid-template-columns:1fr;gap:20px}.logos__row{flex-wrap:wrap;justify-content:flex-start;gap:26px}.logos__row img{height:24px}
  .sec__h,.inev,.faq{grid-template-columns:1fr}
  .hoy{height:auto}.hoy__stick{position:relative;height:auto;padding-block:72px;display:block}
  .hoy__img{position:relative;inset:auto;height:56vh;margin-bottom:28px}
  .hoy__img img{object-position:72% 50%}
  .hoy__img::after{background:linear-gradient(0deg,var(--bg),transparent 55%)}
  .hoy__img .b{opacity:1;clip-path:inset(0 0 0 50%)}
  .qs{width:auto;height:calc(30px*3.4)}
  .qs p{font-size:30px}
  .qs p.fin{font-size:27px}
  .hoy__cap{display:none}
  .hoy__meter i{width:30px}
  .hoy__who{min-height:3em}
  .motor{height:auto}.motor__stick{position:relative;height:auto;padding-block:80px}.motor__g{grid-template-columns:1fr}
  .rail div{font-size:9px;letter-spacing:.06em}
  .card{height:auto;min-height:520px}.stage__d{min-height:4.8em}
  .fr{grid-template-columns:1fr}
  .ind{display:flex;flex-direction:column}
  .ind>div:first-child{order:2}
  .istage{order:1;min-height:520px;margin-bottom:22px}
  .ilist li button{padding:14px 0}
  .erpwall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ways,.guard,.show{grid-template-columns:1fr}.ways a{min-height:230px}
  .tl{grid-template-columns:1fr;gap:24px}.tl::before,.tl .prog{display:none}
  .team__big,.inev__pov{grid-template-columns:1fr}
  .mex{grid-template-columns:1fr;gap:16px}
  .acc{flex-direction:column;height:auto}.acc__p{flex:none!important;height:110px;transition:height .45s var(--snap)}.acc__p.on{height:400px}
  .fin{height:auto}.fin__stick{position:relative;height:auto;padding-block:96px}
  .words{height:auto}.words b{position:static;opacity:1;transform:none;display:none}.words b.yg{display:block}
  .fin__cta{opacity:1;transform:none;pointer-events:auto}
  .foot__g{grid-template-columns:1fr}.foot__legal{flex-direction:column}
  .hero__foot .hide-m{display:none}
  .diag{aspect-ratio:4/5}
}
@media (max-width:820px){
  .tr{grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:12px}
  .tr .ch{align-self:start}
  .tr .stt{grid-column:1/-1;justify-content:flex-start;margin-top:2px}
  .tray__l{min-height:400px;max-height:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.ln>span{transform:none}}

/* ---- menú: cuatro columnas y menú móvil ---- */
.mega__in{grid-template-columns:1.05fr 1fr 1fr 1fr!important}
#mega-ind .mega__in{grid-template-columns:.92fr 1fr 1fr 1fr 1fr!important;gap:30px}
.mega a{font-size:15px;padding:6px 0}
.mnav{position:fixed;inset:0;z-index:60;background:rgba(10,7,6,.97);backdrop-filter:blur(10px);padding-top:84px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.mnav.open{opacity:1;visibility:visible;transition:opacity .3s var(--ease)}
body.mopen{overflow:hidden}body.mopen .nav{z-index:70!important;transform:none!important}
.mnav__in{display:flex;flex-direction:column;padding-bottom:40px}
.mnav details{border-bottom:1px solid var(--line2)}
.mnav summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-size:24px;font-weight:600;letter-spacing:-.03em;cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary i{width:12px;height:12px;border-right:1.5px solid var(--fg2);border-bottom:1.5px solid var(--fg2);transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease)}
.mnav details[open] summary i{transform:rotate(225deg)}
.mnav details a{display:block;padding:9px 0;color:var(--fg2);font-size:16.5px}
.mnav details a:last-child{padding-bottom:22px}
.mnav__cta{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.mnav__cta .btn{justify-content:center}
body.mopen{overflow:hidden}
.burger.x span{background:transparent}.burger.x span::before{top:0;transform:rotate(45deg)}.burger.x span::after{top:0;transform:rotate(-45deg)}
.burger span::before,.burger span::after{transition:transform .25s var(--ease),top .25s var(--ease)}
.foot__legal a{color:inherit}
.mega .feat a.btn{display:inline-flex;padding:0 16px 0 18px;color:var(--fg);font-size:14px}.mega .feat a.btn:hover{transform:none}.mega .feat a.btn svg{width:14px;height:14px}
@media (min-width:1181px){.mnav{display:none}}
@media (max-width:1180px){.mega{display:none!important}}
/* el muro por marca: un logotipo por marca, las variantes debajo */
.erpwall .mk{position:relative;background:var(--s1);border:1px solid var(--line);border-radius:14px;
  min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  padding:14px 12px;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.erpwall a.mk:hover{background:var(--s2);border-color:var(--line2);transform:translateY(-2px)}
.erpwall .mk .lg{height:30px;width:100%;display:grid;place-items:center}
.erpwall .mk .lg img{max-height:30px;max-width:100%;width:auto;opacity:.84;transition:opacity .25s}
.erpwall a.mk:hover .lg img{opacity:1}
.erpwall .mk .tx{font-weight:600;font-stretch:104%;font-size:15px;text-align:center;line-height:1.1;
  letter-spacing:-.02em;color:var(--fg2)}
.erpwall .mk b{font:500 9.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--fg4);
  text-align:center;line-height:1.45;transition:color .25s;text-wrap:balance}
.erpwall a.mk:hover b{color:var(--fg2)}
.erpwall .mk--p{border-style:dashed}
.erpwall .mk--p .tx{color:var(--sig)}
.erpwall .mk .vs{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:center;align-content:center}
.erpwall .mk .vr{font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);
  border:1px solid var(--line2);border-radius:999px;padding:5px 10px;line-height:1;white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s}
.erpwall .mk .vr:hover{color:#140A05;background:var(--sig);border-color:var(--sig)}
@media (max-width:860px){.erpwall .mk .vr{font-size:9.5px;padding:5px 8px}}
@media (max-width:560px){.erpwall .mk{min-height:96px;padding:11px 7px;gap:8px;border-radius:12px}
  .erpwall .mk .lg{height:22px}.erpwall .mk .lg img{max-height:22px}
  .erpwall .mk .tx{font-size:12.5px}
  .erpwall .mk b{font-size:8px;letter-spacing:.04em}}
/* en movil la ficha de variante rompe renglon: con nowrap el mosaico crecia
   por dentro y empujaba la reja, que usaba 1fr (o sea minmax(auto,1fr)) y por
   eso cedia al contenido. Ahora la reja no cede y el texto si parte. */
@media (max-width:560px){
  .erpwall{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .erpwall .mk .vs{gap:4px}
  .erpwall .mk .vr{white-space:normal;text-align:center;font-size:9px;padding:4px 7px;
    letter-spacing:.03em;line-height:1.25}
}
/* la prueba social: una banda delgada que se cruza en el camino, no una
   seccion mas. Quien lee el precio o la integracion tiene que ver ahi mismo a
   alguien que ya lo hizo. */
.pru{padding-block:clamp(40px,5.4vw,76px)}
.pru__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,3.4vw,58px);align-items:center}
.pru__l p{margin:12px 0 0;color:var(--fg2);font-size:15.5px;line-height:1.45;max-width:22em}
.pru__g{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,44px)}
.pru__g a{display:inline-flex;align-items:center;opacity:.62;transition:opacity .25s}
.pru__g a:hover{opacity:1}
.pru__g img{height:clamp(38px,3.4vw,50px);width:auto;display:block}
.pru__n b{display:block;font-size:clamp(26px,2.5vw,38px);font-weight:600;letter-spacing:-.04em;
  line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.pru__n span{display:block;margin-top:9px;color:var(--fg4);font-size:13px;line-height:1.4}
@media (max-width:980px){.pru__in{grid-template-columns:1fr;gap:26px}
  .pru__g{gap:24px}.pru__g img{height:40px}}
/* ---- El cambio de idioma. Dos letras, sin bandera: una bandera dice pais y
   esto dice idioma, y el comprador de Texas no es el de Londres. Queda del lado
   de "Escribirnos" porque es una utilidad, no una seccion del sitio. */
.nav__lang{display:inline-flex;align-items:center;height:30px;padding:0 10px;
  font:500 11px var(--mono);letter-spacing:.1em;color:var(--fg4);
  border:1px solid var(--line2);border-radius:999px;text-decoration:none;
  transition:color .18s,border-color .18s}
.nav__lang:hover{color:var(--fg);border-color:var(--line3)}
@media (max-width:1100px){.nav__lang{display:none}}
/* ==================================================================
   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}

/* ==================================================================
   LA ATMÓSFERA
   Medido: el 94.2 % de la superficie vertical del sitio no declara
   fondo y cae al negro del body. La portada son 17,029 px de una sola
   mancha plana. Esto le da respiración sin agregar color al texto.

   OJO CON EL ORDEN: este bloque vive en la hoja más temprana, sin
   !important y con especificidad baja, A PROPÓSITO. Cualquier sección
   que declare su propio fondo (portadas de color, bleed, hero) tiene
   que ganarle, y le gana por venir después. Es la inversa del piso de
   tipografía.
   ================================================================== */

/* ---- EL PULSO. De cada cuatro secciones, dos levantan. Franja por
   sección serían ocho rayas en una página larga y se vería inquieto;
   el pulso lento da tres o cuatro transiciones, que es respirar. */
/* (el relleno plano se reemplazo por el degradado sin borde) */

/* ---- LA CALIDEZ, en los dos momentos ancla que existen en todas las
   páginas: la banda intermedia y el cierre. Radio mayor que el
   elemento y anclaje arriba, para que nunca se vea un borde. */
.ctab,.cta{position:relative;isolation:isolate}
.ctab::before,.cta::before{
  content:"";position:absolute;inset:-40% 0 -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 78% at 50% 26%,rgba(255,123,48,.16),transparent 64%)}

/* El contenido siempre por encima del campo. */
.ctab>*,.cta>*{position:relative;z-index:1}

@media (prefers-reduced-motion:no-preference){
  /* nada que animar: el campo es estático a propósito */
}

/* ==================================================================
   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 PULSO, AHORA SIN BORDE Y CON ESPECIFICIDAD CERO
   Era relleno plano y al terminar la sección dejaba una línea dura:
   rgb(17,13,10) contra rgb(10,7,6), medido a lo ancho de la página.
   Ahora nace y muere en transparente, así que la superficie cambia
   sin que exista una frontera que se pueda señalar.

   VA DENTRO DE :where() A PROPÓSITO. Sin él el selector pesa (0,1,2)
   y le gana a cualquier .bleed--color o .bhero, que pesan (0,1,0):
   el pulso terminaría borrando los fondos puestos a mano. Con
   :where() pesa CERO y pierde contra todo lo declarado, que es lo
   que tiene que pasar. Es la inversa del piso de tipografía.
   ================================================================== */
:where(main>section:nth-of-type(4n+2)),
:where(main>section:nth-of-type(4n+3)){
  background:linear-gradient(180deg,
    transparent 0,
    var(--warm) 13%,
    var(--warm) 87%,
    transparent 100%)}

/* ==================================================================
   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}

/* ==================================================================
   "YOU'VE GOT THIS" AL TAMANO QUE LE TOCA
   Salio la fila de nombres de ERP del pie del hero: era una lista de
   marcas ajenas en el unico lugar donde la marca debe hablar de si
   misma, y el sitio ya dedica una seccion entera a los ERP. La frase
   de la casa se queda sola y crece.
   ================================================================== */
.hero__foot{align-items:center}
.hero__foot .sig{
  display:block!important;
  font-size:clamp(20px,2.1vw,30px)!important;
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.1;
  color:var(--fg)!important;
  text-transform:none!important;
  font-family:var(--sans)!important;
  opacity:1}
@media (max-width:860px){
  .hero__foot .sig{font-size:19px!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))}}