de main a
1440 y a 390 y quedarse con los que bajaban de 23 px a 17.5. */
.sec :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.rows :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.cards :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.tiles :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.outc :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.edl :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.conn :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.lnl :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.prose :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.qls :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.crit :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.srail :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.opl :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.esc__e :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.ba :not(.rqf__bub)>p:not(.yg):not(.beat):not(.bleed__t):not(.sband__h):not(.eant__t):not(.pz__h):not(.fin),
.sec li,.dtable td{font-size:16.5px;line-height:1.55}
.lead{font-size:17.5px;line-height:1.5}
.figs cite,cite{font-size:12px;line-height:1.4}
.lab{font-size:11.5px}
/* el resto del cuerpo que no cayó en la lista de arriba */
.tline p,.chain p,.docs p,.wds p,.cases p,.bleed__s,.sband__s,.pago__l span,
.ctab__in span,.cta p,.shot__s,.figs p,.res p,.dtable dd,.opl p{font-size:16.5px;line-height:1.55}
.lnl p,.links p{font-size:15.5px;line-height:1.5}
/* ---- 2. lo que se queda deslizable: lleva imagen adentro */
.icards:has(>*:nth-child(3)),.igrid:has(>*:nth-child(3)){
display:flex!important;grid-template-columns:none!important;gap:10px;
overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);padding-bottom:4px}
.icards:has(>*:nth-child(3))::-webkit-scrollbar,.igrid:has(>*:nth-child(3))::-webkit-scrollbar{display:none}
.icards:has(>*:nth-child(3))>*,.igrid:has(>*:nth-child(3))>*{
flex:0 0 auto;width:84%;max-width:340px;scroll-snap-align:start;border-bottom:0}
/* ---- 3. lo que lleva cifra: se apila y la cifra manda */
.figs,.res,.gr__slabs{display:block!important;grid-template-columns:none!important;
overflow:visible!important;margin-inline:0!important;padding-inline:0!important}
.figs>*,.res>*,.gr__slabs>*{width:auto!important;max-width:none!important;
padding:22px 0!important;border-bottom:1px solid var(--line)!important;scroll-snap-align:none}
.figs>*:last-child,.res>*:last-child,.gr__slabs>*:last-child{border-bottom:0!important}
.res .v,.figs b,.gr__sl b{font-size:clamp(46px,13vw,60px)!important;line-height:.95!important}
.res p,.figs p{margin-top:12px!important}
/* ---- 4. todo lo demás: lista compacta, sin caja */
.tiles,.cards,.outc,.srail,.fmt,.conn,.orail,.osteps,.opl,.esc,.rows,.edl{
display:block!important;grid-template-columns:none!important;
overflow:visible!important;margin-inline:0!important;padding-inline:0!important;gap:0!important}
.tiles>*,.cards>*,.outc>*,.srail>*,.fmt>*,.conn>*,.orail>*,.osteps>*,.opl>*,.esc>.esc__r,.rows>*,.edl>*{
display:block!important;width:auto!important;max-width:none!important;flex:none!important;
background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
border-bottom:1px solid var(--line)!important;padding:16px 0!important;margin:0!important}
.tiles>*:last-child,.cards>*:last-child,.outc>*:last-child,.srail>*:last-child,.fmt>*:last-child,
.conn>*:last-child,.orail>*:last-child,.osteps>*:last-child,.opl>*:last-child,
.esc>.esc__r:last-child,.rows>*:last-child,.edl>*:last-child{border-bottom:0!important}
.tiles>*>b,.cards>* h3,.outc>* b,.srail>* b,.fmt>* b,.conn>* b,.orail>* b,.opl b,.rows>* h3,.edl>* h3{
font-size:17px!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:1.25!important;
display:block!important;margin:0 0 5px!important;color:var(--fg)!important}
.tiles>* p,.cards>* p,.outc>* p,.srail>* p,.fmt>* p,.conn>* p,.orail>* p,.opl p,.rows>* p,.edl>* p{
margin:0!important;color:var(--fg3)!important}
.fmt>* svg{width:22px;height:22px;margin-bottom:8px}
.orail>* small,.osteps .ost__s{color:var(--sig)}
/* la escala de precios, en su forma compacta */
.esc>.esc__r{padding:18px 0!important}
.esc__n{font-size:17px!important;margin-bottom:12px}
.esc__t{display:block!important}
.esc__e{padding:0 0 0 16px!important;margin-top:12px}
.esc__e:first-child{margin-top:0}
/* ---- 5. la 07: trece industrias dejan de ser una lista de 710 px */
.ilist{display:flex!important;gap:8px;overflow-x:auto;overflow-y:hidden;border-top:0!important;
scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);scrollbar-width:none;
margin-inline:calc(var(--pad) * -1)!important;padding:0 var(--pad) 2px!important}
.ilist::-webkit-scrollbar{display:none}
.ilist li{flex:0 0 auto;scroll-snap-align:start}
.ilist li button{display:inline-flex!important;align-items:center;width:auto!important;
grid-template-columns:none!important;gap:0!important;padding:10px 16px!important;
border:1px solid var(--line2)!important;border-radius:999px;font-size:14.5px!important;
white-space:nowrap;color:var(--fg3)}
.ilist li button small,.ilist li button i,.ilist .il__go{display:none!important}
.ilist li button span{overflow:visible!important;text-overflow:clip!important;max-width:none!important;white-space:nowrap}
.ilist li button.on{background:var(--sig)!important;border-color:var(--sig)!important;color:#140A05!important}
/* ---- 6. la 09: doce logotipos, el resto en su propia página */
.erpwall>*:nth-child(n+13){display:none}
}
@media (max-width:760px){
/* la portada: sus rejillas propias, en lista compacta */
/* estas dos sí traen foto en cada tarjeta, así que van en la familia visual:
se deslizan. Apiladas medían 1,606 y 1,120 px. */
.espm,.fr{display:flex!important;grid-template-columns:none!important;gap:10px;
overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
scrollbar-width:none;margin-inline:calc(var(--pad) * -1)!important;padding-inline:var(--pad)!important;padding-bottom:4px}
.espm::-webkit-scrollbar,.fr::-webkit-scrollbar{display:none}
.espm>*,.fr>*{flex:0 0 auto!important;width:84%!important;max-width:330px!important;scroll-snap-align:start}
.fr>* h3,.espm>* h3,.fr>* b,.espm>* b{font-size:17px;letter-spacing:-.02em}
}
/* 07: la línea de producto y el sistema, uno al lado del otro. Eran dos
secciones de índice que contestaban la misma pregunta del visitante. */
.enc{display:block;margin-top:var(--v3)}
/* el muro de logotipos pide ancho: en media página son diez filas de tres.
Las dos respuestas van en bandas completas, una debajo de la otra. */
.enc__b{margin-top:var(--v2)}
/* los hijos de una rejilla crecen con su contenido si no se les dice que no:
sin esto la fila de pastillas estiraba la sección a 2,491 px */
.enc__a,.enc__b,.enc .ind,.enc .ind>div{min-width:0}
.enc__a>.lab,.enc__b>.lab{display:block;margin-bottom:18px}
.enc__b .erpwall{grid-template-columns:repeat(6,minmax(0,1fr))}
/* en la portada van doce; los veintisiete viven en /integraciones */
.enc__b .erpwall>*:nth-child(n+19){display:none}
.enc__b .erpwall{gap:6px}
.enc__b .more{margin-top:18px}
@media (max-width:1100px){.enc__b .erpwall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.enc__b .erpwall{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2px}
.enc__b .erpwall>*:nth-child(n+10){display:none}
.enc{gap:30px}.enc__a>.lab,.enc__b>.lab{margin-bottom:12px}}
/* el muro de ERP en móvil: un logotipo es imagen, así que se desliza */
@media (max-width:760px){
.enc__b .erpwall{display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;
grid-template-rows:repeat(2,auto);grid-auto-columns:38%;gap:2px;overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x proximity;scrollbar-width:none;
margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
.enc__b .erpwall::-webkit-scrollbar{display:none}
.enc__b .erpwall>*{scroll-snap-align:start}
.enc__b .erpwall>*:nth-child(n+10){display:flex}
.enc__b .erpwall>*:nth-child(n+19){display:none}
.enc__b .erpwall{gap:6px}
}
/* 07 · las fichas de caso. La pieza que vende el cliente es lo que se reconoce
primero; la cifra es lo segundo. Todo lo demás vive en la página del caso. */
.cz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:var(--v3)}
.cz__c{position:relative;display:flex;flex-direction:column;background:var(--s1);
transition:background .3s var(--ease)}
.cz__c:hover{background:var(--s2)}
.cz__p{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--s1)}
.cz__g{display:flex;align-items:center;gap:9px;margin-bottom:clamp(16px,2vh,22px);
font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
.cz__g i{width:5px;height:5px;border-radius:50%;background:var(--sig);flex:none}
.cz__b{flex:1;display:flex;flex-direction:column;padding:clamp(24px,2.45vw,36px)}
.cz__a{margin:0 0 auto;color:var(--fg2);font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.45;
letter-spacing:-.012em;max-width:22em}
.cz__n{display:block;margin-top:clamp(20px,2.4vh,30px);font-size:clamp(30px,3vw,44px);
font-weight:600;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.cz__u{display:block;margin-top:9px;color:var(--fg3);font-size:13.5px;line-height:1.4}
.cz__f{display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-top:clamp(16px,2vh,22px);padding-top:14px;border-top:1px solid var(--line2)}
.cz__f b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.cz__f span{display:inline-flex;align-items:center;gap:6px;color:var(--fg4);
font:500 10px var(--mono);letter-spacing:.09em;text-transform:uppercase;transition:color .25s}
.cz__c:hover .cz__f span{color:var(--sig)}
.cz__f svg{width:12px;height:12px}
.cz__lk{position:absolute;inset:0;z-index:2}
.cz__nota{margin:var(--v1) 0 0;color:var(--fg4);font-size:12.5px}
@media (max-width:1180px){.cz{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
/* con imagen adentro, la ficha sí admite carrusel: una pantalla en vez de cuatro */
.cz{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;
gap:2px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);margin-top:26px}
.cz::-webkit-scrollbar{display:none}
.cz__c{scroll-snap-align:start}
.cz__n{font-size:32px}
}
/* el muro por marca: un logotipo por marca, las variantes debajo. Cuatro veces
el mismo logotipo de Infor no era una lista, era un tartamudeo. */
.erpwall .mk{position:relative;background:var(--s1);border:1px solid var(--line);border-radius:14px;
min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
padding:20px 14px;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:24px;display:grid;place-items:center}
.erpwall .mk .lg{height:30px;width:100%}
.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:4px;justify-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:4px 9px;transition:color .2s,border-color .2s}
.erpwall .mk .vr:hover{color:var(--sig);border-color:var(--sig)}
@media (max-width:560px){.erpwall .mk{height:96px;padding:11px 7px;gap:8px;border-radius:12px}
.erpwall .mk .lg img{max-height:19px}.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}
}
/* .cred vive en _c_style.html, que sirve a las otras 85 paginas. La portada
lleva su CSS aparte, asi que aqui nunca tuvo reja: el boton caia pegado al
parrafo. Va sin fondo, que en la portada seria otra caja. */
.cred{display:grid;grid-template-columns:1fr auto;gap:clamp(26px,4vw,64px);align-items:center;
margin-top:var(--v2)}
.cred p{margin:0}
@media (max-width:820px){.cred{grid-template-columns:1fr;gap:26px;justify-items:start}}
/* la guia sale por la derecha: el volante de la valvula queda pegado al
filo del encuadre y la etiqueta no cabe a su derecha */
.co--r{flex-direction:row-reverse}
/* 02 · el cierre de cada panel. Entender el mensaje no es un resultado
comercial: lo que importa es que de ese mensaje sale una cotizacion. */
.rxs__tots{position:relative;border-top:1px solid var(--line)}
.rxs__tot{display:none;align-items:flex-end;justify-content:space-between;gap:16px;
padding:clamp(16px,1.6vw,22px) clamp(24px,2.45vw,36px)}
.rxs__tot.on{display:flex;animation:totin .4s var(--ease) both;animation-delay:.2s}
.rxs__tot small{display:block;font:500 9.5px var(--mono);letter-spacing:.13em;
text-transform:uppercase;color:var(--sig);margin-bottom:6px}
.rxs__tot span{display:block;color:var(--fg4);font-size:12.5px;line-height:1.35;max-width:22em}
.rxs__tot b{font-size:clamp(22px,2vw,30px);font-weight:600;letter-spacing:-.035em;
line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
@keyframes totin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rxs__tot.on{animation:none}}
@media (max-width:760px){.rxs__tot{flex-direction:column;align-items:flex-start;gap:10px}
.rxs__tot b{font-size:26px}}
/* ---- el hero en movil: centrado, la linea de posicionamiento legible y sin
la tira de ERP, que se partia en dos renglones y ya esta abajo en el muro. */
@media (max-width:760px){
.hero__in{text-align:center;padding-bottom:clamp(28px,4vh,44px)}
.hero h1{max-width:none;margin-inline:auto}
.hero__row{justify-items:center}
.hero__row p{margin-inline:auto;max-width:30em}
.hero__btns{justify-content:center;width:100%}
.hero__btns .btn{justify-content:center}
.hero__top{margin-bottom:clamp(16px,2.4vh,26px)}
/* sin el punto: de primer elemento de un flex centrado quedaba colgando a
la izquierda de un bloque de dos renglones */
.hero__top .lab{display:block;text-align:center;font-size:12px;letter-spacing:.08em;
line-height:1.5;text-shadow:0 1px 16px rgba(10,7,6,.95),0 0 28px rgba(10,7,6,.7)}
.hero__top .lab i{display:none}
.hero__foot{justify-content:center;border-top:0;margin-top:clamp(16px,2.4vh,28px);padding-top:0}
.hero__foot>span:first-child{display:none}
.hero__foot .sc{justify-content:center}
}
/* ---- el 01: fuera el contador de frases. Anticipaba cuantas faltaban, que es
justo lo que no conviene decirle a quien esta leyendo la primera. */
@media (max-width:760px){
.hoy__meter{display:none}
.hoy__who{margin-top:26px}
}
/* ---- el 04: la etiqueta arriba del titulo. En una pantalla de 390 la
etiqueta media 95 px y el titulo 235, uno al lado del otro. */
@media (max-width:820px){
.motor__h{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:20px}
.motor__h h2{font-size:15.5px;line-height:1.35}
}
/* ---- las piezas y las escenas despiertan con el cursor.
Ya no es una deriva de CSS sobre una foto: es el video de la pieza
trabajando, con la misma imagen de poster para que no haya salto. En reposo
esta pausado y un poco apagado; con el cursor encima se enciende y corre; al
salir el cursor se PAUSA, o sea que se queda en el cuadro donde iba. */
.fr figure img,.fr figure video,.cz__p img,.cz__p video{
width:100%;height:100%;object-fit:cover;display:block;
filter:brightness(.84);transition:filter .45s var(--ease)}
.cz__p img,.cz__p video{filter:brightness(.88)}
.fr article:hover figure img,.fr article:hover figure video{filter:brightness(1.04)}
.cz__c:hover .cz__p img,.cz__c:hover .cz__p video{filter:brightness(1.02)}
/* ---- El piso de tipografia en escritorio.
Medido: 1,498 textos por debajo de 16 px en las 86 paginas, en 117 reglas.
El cuerpo sube a 17 y el lead se queda en 18.9, para que siga habiendo un
escalon entre la entrada y la prosa. Va dentro de min-width:761px para no
pelear con la escala de movil, que ya estaba en 16.5. Quedan fuera a
proposito las maquetas de interfaz, los pies de foto, los controles y las
etiquetas: ahi el tamano chico es lo que los hace lo que son. */
@media (min-width:761px){
.cards p,
.stp4 p,
.split li p,
.stats p,
.reqs li,
.spec p,
.otab__r p,
.lnk p,
.norms p,
.norms b,
.altw,
.srail p,
.lnl p,
.links p,
.outc p,
.bento>div p,
.bento figcaption span,
.trio p,
.trio__more,
.pano__bar p,
.duo__more p,
.wide__g p,
.eng__g p,
.icards p,
.rqf__big li,
.rqt__p p,
.prs__c p,
.req3 blockquote,
.tiles p,
.qls li p,
.docs p,
.cov p,
.wds p,
.frows p,
.fmt p,
.orail p,
.conn p,
.cases p,
.chain p,
.tline p,
.esc__e p,
.hst__row p,
.gr__n,
.gr__t,
.fch__t span,
.fr p,
.fr q,
.res p,
.show__t p,
.ways p,
.opl p,
.ctab__in span,
.guard p,
.guard b,
.mega .feat p,
.rule,
.gstrip li,
.cred span:not(.v),
.esp__c p,
.esp__pts p,
.pru__l p,
.tl span,
.ost .oin p,
.chan p,
.intr p{font-size:17px;line-height:1.55}
.motor__h h2,
.ilist li button,
.erpwall .mk .tx,
.logos__n span,
.igrid q{font-size:16px;line-height:1.5}
/* el pie de una cifra y el de una foto editorial son frases que se leen,
no creditos: suben, pero se quedan por debajo del cuerpo para que
sigan leyendose como pie */
.figs p,.shot figcaption span,.prs__c p{font-size:15.5px;line-height:1.5}
}
/* ---- Movil: el contenido se apila, solo los controles se deslizan.
Medido a 390 px: .igrid ocupaba 3,982 px de ancho real con 390 visibles, o
sea que once de trece tarjetas estaban fuera de la pantalla. Cambiar alto
por contenido escondido fue un mal negocio. */
@media (max-width:760px){
.icards,.igrid,.icards:has(>*:nth-child(3)),.igrid:has(>*:nth-child(3)){
display:grid!important;grid-template-columns:1fr!important;gap:2px!important;
overflow:visible!important;margin-inline:0!important;padding-inline:0!important;
scroll-snap-type:none!important}
.icards>*,.igrid>*{width:auto!important;min-width:0!important;scroll-snap-align:none!important}
/* los ERP: dieciocho marcas en reja de tres, sin texto cortado */
.enc__b .erpwall{display:grid!important;grid-auto-flow:row!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:none!important;
grid-auto-columns:auto!important;gap:2px!important;overflow:visible!important;
margin-inline:0!important;padding-inline:0!important;scroll-snap-type:none!important}
.enc__b .erpwall>*:nth-child(n+10){display:flex!important}
.enc__b .erpwall>*:nth-child(n+19){display:none!important}
.enc__b .erpwall .mk b{white-space:normal;text-align:center;line-height:1.35}
/* la tira de garantias: tres renglones apilados con 14 px entre ellos y
pegados al bloque de arriba */
.gstrip{margin-top:var(--v3);gap:28px}
.gstrip li{flex:1 1 100%}
}
/* ---- La portada: sus dos rejas propias tambien se apilan.
.fr y .cz llevan foto en cada tarjeta y por eso las habia dejado en
carrusel. Son las cuatro piezas y los cuatro casos: justo el contenido que
no puede quedar fuera de pantalla. */
@media (max-width:760px){
.espm,.fr,.cz{display:grid!important;grid-template-columns:1fr!important;
grid-auto-flow:row!important;grid-auto-columns:auto!important;gap:2px!important;
overflow:visible!important;margin-inline:0!important;padding-inline:0!important;
scroll-snap-type:none!important}
.espm>*,.fr>*,.cz>*{width:auto!important;min-width:0!important;
scroll-snap-align:none!important}
.fr figure{aspect-ratio:16/7}
.cz__p{aspect-ratio:16/9}
}
@media (hover:none){.ilist li button i{display:none}}
/* ---- La 06 en movil: las listas recortadas, no desplazadas.
Medido a 390 px: la seccion entera eran 2,640 px (3.1 pantallas), con 517
de pastillas y 802 de muro de ERP. Se recortan las dos y se despliegan
hacia abajo con un toque. Recortar hacia abajo no es esconder: se alcanza
con el mismo gesto que la persona ya esta haciendo. */
@media (max-width:760px){
#ilist.corta li:nth-child(n+7){display:none}
.erpwall.corta>*:nth-child(n+10){display:none!important}
.vermas{display:block;width:100%;margin-top:12px;padding:13px 16px;background:var(--s1);
border:0;color:var(--fg2);font:500 11.5px var(--mono);letter-spacing:.11em;
text-transform:uppercase;text-align:left;cursor:pointer;position:relative}
.vermas::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;
border-right:1.5px solid var(--sig);border-bottom:1.5px solid var(--sig);
transform:translateY(-70%) rotate(45deg)}
/* las celdas de ERP: el renglon de sistemas se queda, pero apretado */
.enc__b .erpwall .mk{padding:14px 8px}
.enc__b .erpwall .mk img{max-height:26px}
.enc__b .erpwall .mk b{font-size:9px;letter-spacing:.04em;line-height:1.3;margin-top:7px}
}
@media (min-width:761px){.vermas{display:none}}
/* ---- El aire entre secciones, medido contra el ancho y no contra el alto.
El relleno de seccion estaba en 12vh, que en un telefono de 844 px de alto
da 101 px de cada lado: 202 por seccion, 3,030 px en la portada, 3.6
pantallas de nada. El aire se percibe contra el ANCHO de la columna, y en
390 px la columna mide 350, no 1400. Baja a 72. */
@media (max-width:760px){
.sec,.sec.px{padding-block:clamp(56px,8.5vh,80px)}
.cta{padding-block:clamp(64px,9.5vh,96px)}
/* .ctab ya estaba en 64 px y .hoy__stick / .motor__stick en 72: tocarlos
solo los hacia crecer, asi que se quedan como estaban */
.sec__h{margin-bottom:clamp(26px,3.4vh,38px)}
}
/* ---- Las lineas de producto: un carril, porque son un selector.
Un carril sin señal de que sigue no se desplaza: la gente cree que ya vio
todo. Sangra al borde de la pantalla, lleva velo a la derecha que se apaga
al llegar al final, y cada pastilla cae en su sitio. */
@media (max-width:760px){
.ind>div:first-child{position:relative}
.ilist{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;
overflow-x:auto!important;overflow-y:hidden!important;
scroll-snap-type:x proximity!important;scroll-padding-inline:var(--pad)!important;
scrollbar-width:none!important;-webkit-overflow-scrolling:touch;
margin-inline:calc(var(--pad) * -1)!important;
padding:0 var(--pad) 2px!important;
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);
transition:-webkit-mask-image .3s,mask-image .3s}
.ilist.final{-webkit-mask-image:none;mask-image:none}
.ilist::-webkit-scrollbar{display:none}
.ilist li{flex:0 0 auto;scroll-snap-align:start}
.ilist li button{white-space:nowrap}
}
/* ---- Los botones de las bandas intermedias.
.hero__btns es el par de botones de TODO el sitio, no solo el del hero. La
regla flex:1 1 100% que escribi para el hero servia en una fila (da ancho)
y rompia en una columna (pide alto y colapsa a 24 px). Queda acotada. */
@media (max-width:760px){
.hero .hero__btns .btn,.fin__cta .hero__btns .btn{flex:1 1 100%}
.ctab__in .hero__btns .btn,.sub__cta .btn,.ask .btn{flex:0 0 auto;width:100%;height:var(--h)}
/* una banda pegada al cierre repetiria el mismo llamado dos veces seguidas:
ahi la frase se queda y los botones salen */
.ctab:has(+ .fin) .hero__btns,.ctab:has(+ .cta) .hero__btns{display:none}
.ctab:has(+ .fin) .ctab__in,.ctab:has(+ .cta) .ctab__in{gap:0}
}
/* ---- La banda de ancho completo, con video encima de su propia foto.
La imagen se queda y sigue cargando en diferido; el video entra en opacidad
cero y aparece cuando de verdad empieza a reproducir. Arranca al entrar a la
vista y se pausa al salir, porque una banda puede estar a seis mil pixeles
de la parte de arriba y no tiene caso gastar datos en lo que nadie ve. */
.bleed__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .8s var(--ease);pointer-events:none;z-index:1}
.bleed__v.on{opacity:1}
.bleed::after{z-index:2}
@media (max-width:820px){
.bleed__v{inset:auto;top:0;left:0;width:100%;height:208px;object-position:62% 50%;
-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);
mask-image:linear-gradient(180deg,#000 58%,transparent)}
}
@media (prefers-reduced-motion:reduce){.bleed__v{display:none}}
/* ---- El degradado del hero, encima del video.
El video se escribio con z-index 1 y el ::after se quedo en auto, asi que el
video lo tapaba: mientras corria no habia degradado al pie ni oscurecido a la
izquierda, y la imagen se cortaba en seco contra la seccion siguiente.
imagen (0) -> video (1) -> degradado (2) -> texto (3). */
.bhero::after{z-index:2}
.bhero__in{z-index:3}
/* ---- El ciclo completo de una industria: la misma solicitud, hasta el cobro.
Una espina vertical con el artefacto real de cada paso, para que se lea como
una conversacion que termina y no como un diagrama de etapas. */
.cyc{list-style:none;margin:0;padding:0}
.cyc li{display:grid;grid-template-columns:minmax(0,152px) minmax(0,1fr) minmax(0,1fr);
gap:clamp(18px,2.4vw,44px);padding:clamp(24px,2.6vw,36px) 0;
border-top:1px solid var(--line);position:relative;align-items:start}
.cyc li:last-child{border-bottom:1px solid var(--line)}
.cyc__k{position:relative;padding-left:24px;align-self:stretch}
.cyc__k::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;
border-radius:50%;border:1.5px solid var(--line3);background:var(--bg)}
.cyc li:last-child .cyc__k::before{background:var(--sig);border-color:var(--sig)}
.cyc__k::after{content:"";position:absolute;left:4px;top:calc(.42em + 13px);
bottom:calc(clamp(24px,2.6vw,36px) * -1);width:1px;background:var(--line2)}
.cyc li:last-child .cyc__k::after{display:none}
.cyc__k span{font:500 11.5px/1.5 var(--mono);letter-spacing:.11em;
text-transform:uppercase;color:var(--fg4)}
.cyc__b b{display:block;font-size:clamp(19px,1.45vw,23px);line-height:1.28;
letter-spacing:-.01em;color:var(--fg)}
.cyc__b>p{margin:14px 0 0;color:var(--fg3);max-width:32em}
.cyc__a{align-self:start;padding-top:2px}
.cyc__chat{display:inline-block;max-width:29em;background:var(--s3);
border-radius:18px 18px 18px 6px;padding:13px 18px 11px}
.cyc__chat--p{background:var(--s2);border:1px solid var(--line2);
border-radius:18px 18px 6px 18px}
.cyc__chat p{margin:0;color:var(--fg2)}
.cyc__chat small{display:block;margin-top:7px;font:500 11px var(--mono);
letter-spacing:.07em;color:var(--fg4)}
.cyc__chips{display:flex;flex-wrap:wrap;gap:8px}
.cyc__chips span{border:1px solid var(--line2);border-radius:999px;padding:8px 14px;
font-size:15.5px;color:var(--fg2);background:var(--s1)}
.cyc__doc{display:flex;align-items:center;gap:14px;background:var(--s1);
border:1px solid var(--line2);border-radius:12px;padding:14px 18px;max-width:32em}
.cyc__doc svg{width:20px;height:23px;flex:0 0 auto;fill:none;stroke:var(--sig);
stroke-width:1.4;stroke-linejoin:round}
.cyc__doc b{font-size:16px;line-height:1.35;color:var(--fg2)}
.cyc__doc small{display:block;margin-top:3px;font-size:15px;color:var(--fg4)}
.cyc__fol{display:inline-flex;align-items:center;gap:12px;background:var(--s1);
border:1px solid var(--line2);border-radius:999px;padding:10px 18px}
.cyc__fol code{font:500 13.5px var(--mono);letter-spacing:.05em;color:var(--sig)}
.cyc__fol span{font-size:15.5px;color:var(--fg3)}
@media (max-width:1060px){
.cyc li{grid-template-columns:minmax(0,132px) minmax(0,1fr)}
.cyc__a{grid-column:2;margin-top:16px;padding-top:0}
}
@media (max-width:760px){
.cyc li{grid-template-columns:1fr;gap:12px;padding:24px 0}
.cyc__a{grid-column:1;margin-top:14px}
.cyc__k::after{display:none}
.cyc__chat{max-width:100%}
}
/* ---- El texto de la banda, encima de su degradado.
.bleed__t y .bleed__s ya estaban en z-index 2, y el degradado que puse para
que ganara al video quedo en el mismo indice: un ::after se genera al final,
asi que con indice igual pintaba SOBRE las letras y las apagaba.
imagen (0) -> video (1) -> degradado (2) -> texto (3). */
.bleed__t,.bleed__s{z-index:3}
/* ==== v2 CONVERSACION. El hilo completo como pieza central: una sola columna,
la etapa como marca delgada al costado y ningun titulo, porque el hilo se
lee solo. Es lo mas parecido a ensenar la pantalla. */
.cyv{list-style:none;margin:0 auto;padding:0;max-width:800px}
.cyv li{display:grid;grid-template-columns:132px minmax(0,1fr);gap:20px;
align-items:start;padding:0 0 26px;position:relative}
.cyv li:last-child{padding-bottom:0}
.cyv__k{font:500 11px/1.9 var(--mono);letter-spacing:.11em;text-transform:uppercase;
color:var(--fg4);text-align:right;padding-top:12px}
.cyv li:last-child .cyv__k{color:var(--sig)}
.cyv__a>*{margin-top:0}
.cyv li:nth-child(2) .cyv__a,.cyv li:nth-child(4) .cyv__a,
.cyv li:nth-child(5) .cyv__a{display:flex;justify-content:flex-end}
.cyv li:nth-child(3) .cyv__a .cyc__chips{justify-content:flex-start}
@media (max-width:760px){
.cyv li{grid-template-columns:1fr;gap:7px;padding-bottom:20px}
.cyv__k{text-align:left;padding-top:0}
.cyv li:nth-child(2) .cyv__a,.cyv li:nth-child(4) .cyv__a,
.cyv li:nth-child(5) .cyv__a{justify-content:flex-start}
}
/* ==== v3 y v4. Dos columnas y una imagen fija que ocupa la mitad de la
pantalla mientras se recorre la seccion. v3 usa la foto de la industria a la
derecha; v4 la pieza recortada sobre negro a la izquierda. */
.cym{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(28px,4vw,72px);align-items:start}
.cym__l{list-style:none;margin:0;padding:0}
.cym__l li{padding:clamp(18px,2vw,26px) 0;border-top:1px solid var(--line)}
.cym__l li:first-child{border-top:0;padding-top:0}
.cym__k{display:block;font:500 11px/1.6 var(--mono);letter-spacing:.11em;
text-transform:uppercase;color:var(--fg4);margin-bottom:7px}
.cym__l li:last-child .cym__k{color:var(--sig)}
.cym__l b{display:block;font-size:clamp(17.5px,1.25vw,20px);line-height:1.32;
letter-spacing:-.005em;color:var(--fg)}
.cym__f{margin:0;position:sticky;top:96px;border-radius:14px;overflow:hidden;
background:var(--s1)}
.cym__f img{display:block;width:100%;height:clamp(420px,58vh,620px);object-fit:cover}
.cym--4 .cym__f img{object-fit:contain;height:clamp(380px,52vh,560px)}
@media (max-width:860px){
.cym{grid-template-columns:1fr;gap:22px}
.cym__f{position:static;order:-1}
.cym__f img{height:230px}
.cym--4 .cym__f img{height:260px}
}
/* ==== v5 ALTERNANCIA. Renglones de ancho completo que cambian de lado, con un
corte de imagen a media seccion para que la vista respire. */
.cya{list-style:none;margin:0;padding:0}
.cya>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(24px,4vw,64px);align-items:center;
padding:clamp(22px,2.4vw,32px) 0;border-top:1px solid var(--line)}
.cya>li:first-child{border-top:0;padding-top:0}
.cya>li:nth-child(even) .cya__t{order:2}
.cya>li:nth-child(even) .cya__a{order:1;display:flex;justify-content:flex-start}
.cya>li:nth-child(odd) .cya__a{display:flex;justify-content:flex-end}
.cya__t span{display:block;font:500 11px/1.6 var(--mono);letter-spacing:.11em;
text-transform:uppercase;color:var(--fg4);margin-bottom:8px}
.cya>li:last-child .cya__t span{color:var(--sig)}
.cya__t b{display:block;font-size:clamp(18px,1.35vw,22px);line-height:1.3;
letter-spacing:-.008em;color:var(--fg)}
.cya__a>*{margin-top:0}
.cya>li.cya__cut{display:block;padding:clamp(12px,1.6vw,22px) 0;
border-top:1px solid var(--line)}
.cya__cut img{display:block;width:100%;height:clamp(180px,26vh,280px);
object-fit:cover;border-radius:14px}
@media (max-width:860px){
.cya>li{grid-template-columns:1fr;gap:13px;padding:22px 0}
.cya>li:nth-child(even) .cya__t{order:0}
.cya>li:nth-child(even) .cya__a,.cya>li:nth-child(odd) .cya__a{justify-content:flex-start}
.cya__cut img{height:170px}
}
/* ---- Las imagenes que flotan sueltas sobre la pagina.
Medido: las 26 imagenes de fondo oscuro tienen el borde entre 13 y 29, y el
fondo del sitio es 10,7,6. No se puede igualar el color porque el fondo de
esas fotos es degradado, no plano. Lo que si se puede es disolver el borde,
y entonces ya no hay arista que delate el rectangulo.
Solo aplica a las que NO van dentro de un marco. */
.pz__f img,.cym--4 .cym__f img{
-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),
linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),
linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
mask-composite:intersect}
/* la figura de la composicion 4 deja de ser tarjeta: la pieza flota */
.cym--4 .cym__f{background:none;border-radius:0}
.cym--4 .cym__f img{background:none}
/* ---- Aire de movil, medido. El relleno de seccion son 1,548 px en toda la
pagina. Baja lo justo donde no hace falta y no se toca el de los llamados,
que si necesitan separarse de lo que va antes. */
@media (max-width:760px){
.sec,.sec.px{padding-block:clamp(48px,7.4vh,68px)}
.sec__h{margin-bottom:clamp(22px,2.9vh,32px)}
.cyc li{padding:20px 0}
.cyv li{padding-bottom:17px}
.cym__l li{padding:17px 0}
.cya>li{padding:19px 0}
}
/* la segunda banda es mas baja que la primera: es un respiro, no un capitulo */
.bleed--b{height:clamp(240px,34vh,380px)}
.bleed--b .bleed__t{font-size:clamp(21px,2.1vw,34px);max-width:15em}
@media (max-width:820px){.bleed--b img{height:176px}}
/* ---- "El criterio" en movil: la foto a media lista.
Arriba se veia una vez y dejaban 1.7 pantallas de texto seguido detras. En
escritorio la foto se queda pegada al costado, que es donde si acompaña toda
la lectura; en movil no hay costado, asi que baja al centro de la lista. */
.crit__mid{display:none}
@media (max-width:860px){
.crit>figure{display:none}
.crit__mid{display:block;list-style:none;margin:8px 0 4px;padding:0}
.crit__mid::before{display:none}
.crit__mid img{display:block;width:100%;height:214px;object-fit:cover;
object-position:62% 50%;border-radius:12px}
}
/* ---- El reloj de las paginas de distribuidor.
Franjas de ancho completo que alternan de tono, con la hora grande a la
izquierda. Distinta a las cinco composiciones del ciclo de industrias: no es
espina, ni hilo, ni foto partida, ni pieza, ni alternancia. El ultimo
renglon no lleva artefacto porque no es un paso, es el remate. */
.rel{list-style:none;margin:0;padding:0;border-radius:16px;overflow:hidden}
.rel__s{display:grid;grid-template-columns:minmax(0,164px) minmax(0,1fr);
gap:clamp(18px,2.6vw,48px);align-items:start;
padding:clamp(20px,2.3vw,30px) clamp(18px,2.2vw,34px)}
.rel__s:nth-child(odd){background:var(--s1)}
.rel__h span{display:block;font:500 clamp(21px,1.9vw,29px)/1 var(--mono);
letter-spacing:-.02em;color:var(--fg2);font-variant-numeric:tabular-nums}
.rel__h small{display:block;margin-top:8px;font:500 11px/1.5 var(--mono);
letter-spacing:.11em;text-transform:uppercase;color:var(--fg4)}
.rel__b b{display:block;font-size:clamp(17.5px,1.3vw,21px);line-height:1.32;
letter-spacing:-.005em;color:var(--fg)}
.rel__b>.cyc__chat,.rel__b>.cyc__chips,.rel__b>.cyc__doc,.rel__b>.cyc__fol{margin-top:15px}
/* el remate: la hora se apaga y el renglon se enciende */
.rel__s--fin{background:var(--s2)!important;align-items:center}
.rel__s--fin .rel__h span{color:var(--fg4);font-size:clamp(19px,1.5vw,24px)}
.rel__s--fin .rel__h small{color:var(--sig)}
.rel__s--fin .rel__b b{font-size:clamp(18.5px,1.5vw,24px);color:var(--fg)}
@media (max-width:760px){
.rel{border-radius:12px}
.rel__s{grid-template-columns:1fr;gap:10px;padding:20px 17px}
.rel__h{display:flex;align-items:baseline;gap:12px}
.rel__h span{font-size:20px}
.rel__h small{margin-top:0}
.rel__b>.cyc__chat,.rel__b>.cyc__chips,.rel__b>.cyc__doc,.rel__b>.cyc__fol{margin-top:13px}
}
/* ---- La escala del catalogo, al cierre de la seccion 04.
Seis celdas de ancho completo separadas por filetes verticales, con el numero
grande arriba y el criterio en mono abajo. No se parece a ninguna otra
composicion del sitio: no es tarjeta, ni espina, ni franja alterna. La ultima
celda se enciende porque es el desenlace, no un paso mas. */
.esc{margin-top:clamp(34px,4.4vw,64px);border-top:1px solid var(--line2);padding-top:clamp(26px,3vw,40px)}
.esc__h{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
gap:clamp(20px,4vw,72px);align-items:baseline;margin-bottom:clamp(22px,2.6vw,34px)}
.esc__h .lab{color:var(--fg)}
.esc__h p{margin:0;max-width:62ch;font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.5;color:var(--fg2)}
.esc__l{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0}
.esc__l li{padding:clamp(14px,1.5vw,20px) clamp(12px,1.3vw,20px);border-left:1px solid var(--line)}
.esc__l li:first-child{border-left:0;padding-left:0}
.esc__l b{display:block;font-weight:700;font-stretch:80%;font-size:clamp(25px,3.1vw,42px);
line-height:1;letter-spacing:-.045em;color:var(--fg);font-variant-numeric:tabular-nums}
.esc__l span{display:block;margin-top:11px;font:500 11px/1.5 var(--mono);
letter-spacing:.07em;text-transform:uppercase;color:var(--fg4)}
.esc__l .esc__u b{color:var(--sig)}
.esc__l .esc__u span{color:var(--fg2)}
.esc__x{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
margin:clamp(18px,2vw,26px) 0 0;padding-top:14px;border-top:1px solid var(--line)}
.esc__x s{font-size:14px;color:var(--fg3)}
.esc__x em{font:500 11px var(--mono);font-style:normal;letter-spacing:.07em;
text-transform:uppercase;color:var(--fg4)}
@media (max-width:1040px){
.esc__l{grid-template-columns:repeat(3,minmax(0,1fr))}
.esc__l li{border-top:1px solid var(--line)}
.esc__l li:nth-child(-n+3){border-top:0}
.esc__l li:nth-child(3n+1){border-left:0;padding-left:0}
}
@media (max-width:860px){
.esc__h{grid-template-columns:1fr;gap:12px}
}
@media (max-width:560px){
.esc__l{grid-template-columns:repeat(2,minmax(0,1fr))}
.esc__l li:nth-child(-n+3){border-top:1px solid var(--line)}
.esc__l li:nth-child(-n+2){border-top:0}
.esc__l li:nth-child(3n+1){border-left:1px solid var(--line);padding-left:clamp(12px,1.3vw,20px)}
.esc__l li:nth-child(odd){border-left:0;padding-left:0}
.esc__l b{font-size:29px}
.esc__l span{margin-top:8px}
}
/* ---- La tarjeta del 04, sin hueco y sin recorte.
Traia altura fija (clamp 540..680) calculada cuando el embudo vivia dentro.
Sin el embudo sobran hasta 160 px de negro debajo del renglon del ERP. Y al
reves: entre 821 y 1000 px la rejilla seguia en dos columnas, la tarjeta
quedaba de 390 px de ancho, cada nombre de producto se partia en dos
renglones y el contenido llegaba a 661 px dentro de una caja de 540 con
overflow:hidden. Es decir, el total y la cotizacion creada se cortaban. Abajo
de 1000 px la rejilla pasa a una columna, que es lo que ya hacia en movil, y
la tarjeta crece con lo que tiene. */
.card{height:clamp(560px,60vh,600px)}
@media (max-width:1000px){
.motor__g{grid-template-columns:1fr}
.card{height:auto;min-height:0}
.motor__h{flex-direction:column;align-items:flex-start;gap:10px}
}
/* ---- 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
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, EN LA ÚLTIMA CAPA
Esta hoja se lee después del CSS de la página, así que aquí el
!important es definitivo. Medido: 183 declaraciones abajo de 12 px
en la fuente, y en pantalla seguían saliendo nodos en 8 px.
Dos pisos, el criterio de siempre:
12 px rótulos, versalitas, etiquetas de campo, marcas
13.5 px cualquier cosa que sea una frase
================================================================== */
/* ---- Las maquetas. Son composiciones densas dentro de una caja de
alto fijo, y ahí nacieron los 7.5 y los 8 px. El visitante tiene que
poder leerlas: son la prueba de que el producto existe. Se listan los
elementos, no un comodín: un max(12px,1em) sobre .dash * también
AGRANDA a un hijo legítimamente menor que su padre. */
/* Y los propios contenedores, que es donde vive el em del que cuelga
el resto. Un max() sobre 1em no sirve si el padre ya está en 8. */
main .dash-delta,
main .dash-chip,
main .dash-ni,
main .dash-pe,
main .dash-search,
main .dash-logo,
main .dash-legend span,
main .dash-nav b,
main .dash-nav span,
main .dash-card .cl,
main .dash-row .cn,
main .dash-row .ac,
main .dash-recent .dash-row span,
main .dash-top .ask,
main .dash-top .lk,
main .dash-panel h5,
main .erpwall b,
main .erpwall .mk b,
main .erpwall .mk .vr,
main .erpwall>a:not(.mk) b,
main .rxpdf,
main .rxpdf th,
main .rxpdf footer,
main .rxpdf header small,
main .rxpdf td.s span,
main .rxpdf td.pn,
main .rxpdf td.q,
main .rxft .co b,
main .rxcl__h small,
main .rxcl__h em,
main .rxcl p small,
main .rxml header small,
main .rxml header>span,
main .rxml__s small,
main .rxtx header small,
main .rxtx header span,
main .rxtx p small,
main .rxau__k,
main .rxau__v small,
main .rxs__src,
main .rxs__oh span,
main .rxs__ol dt,
main .rxs__ol dt u,
main .rxs__tabs button small,
main .rxs__tot small,
main .rxp .mk text,
main .istage__txt .tag,
main .istage__txt .rq small,
main .istage__txt .rs small,
main .opstage .tr .stt,
main .tray__f small,
main .card__note,
main .card__top .st,
main .bub small,
main .msg small,
main .node small,
main .ctl__txt .tag,
main .ctl__stats small,
main .dc__i em,
main .fch__col small,
main .fch__t i,
main .tiles .tk,
main .esc__h b,
main .esc__e b,
main .dq__cap,
main .dq__st,
main .dq__h small,
main .dq dt,
main .dq__f small,
main .cov__p small,
main .cov__p span,
main .td2 li small,
main .td2 h3,
main .htri__g figcaption small,
main .chain small,
main .orail small,
main .cs__go,
main .gr__lg span,
main .gr__f,
main .tl__n,
main .tl small,
main .cyc__chat small,
main .cyc__k span,
main .cyv__k,
main .cym__k,
main .cya__t span,
main .rel__h small,
main .ilist .nw,
main .ilist li button small,
main .idx li a small,
main .opl .n,
main .acc__p .n,
main .ways .n,
main .ways .k,
main .fld span,
main .more>span,
main .legend,
main .chip,
main .chips a,
main .chips span,
main .hoy__who,
main .hoy__cap,
main .res .who,
main .tr .ch,
main .tr .stt,
main .tr em,
main .tn__k,
main .tn__fix,
main .tn__n span,
main .esp__hd small,
main .esp__c p small,
main .esp__c .e .vn em,
main .esp__c .e .at,
main .esp__ph figcaption,
main .espm small,
main .fun .x em,
main .fun span,
main .cz__f span,
main .cz__g,
main .cnt span,
main .row span,
main .erp em,
main .erp span,
main .erp>span:first-child,
main .days button small,
main .fr small,
main .fr .n,
main .oq__h i,
main .oq__m dt,
main .oq__cap,
main .oq__r span em,
main .oq__f small,
main .ost__s,
main .st,
main .nm,
main .ac,
main .cl,
main .lab,
main .vermas,
main .hero__foot span,
main .hero__top .lab,
main .ask small,
main .esc__l span,
main .esc__x em,
main .rail div{font-size:12px!important}
/* ---- Lo que es una frase: 13.5 px, aunque viva dentro de una maqueta. */
main .rxs__ol dd,
main .rxs__ol dd q,
main .rxml p,
main .rxtx p,
main .dash-row .nm,
main .oq__r span,
main .oq__m dd,
main .msg,
main .bub,
main .rq p,
main .rs p{font-size:13.5px!important}
/* ---- El pie de foto y el superíndice, que no son texto de lectura. */
main sup{font-size:.7em!important}
/* ---- Y el grosor, que también se escapaba en la hoja de página. */
main .dash-logo,
main .dash-panel h5,
main .dash-delta,
main .dash-ni.on,
main .nm,
main .who,
main .res .who,
main .sig,
main .tx{font-weight:520!important}
/* ==================================================================
LA CITA TACHADA, otra vez y aquí sí definitivo.
================================================================== */
main .bd q,
main .fr q,
main article>q{font-size:15px!important;font-weight:400!important;letter-spacing:0;
text-transform:none;line-height:1.45}
/* ==================================================================
EL PISO LLEGA AL PIE Y AL MENÚ
El piso se escribió con prefijo "main", así que nunca tocó el
encabezado ni el pie. Medido: 1,287 de los 1,316 nodos que seguían
abajo de 12 px eran exactamente eso.
================================================================== */
.foot h5{font-size:12px!important;letter-spacing:.12em}
.foot__legal{font-size:12px!important}
.foot__legal span,.foot__legal a{font-size:12px!important}
.nav__lang{font-size:12px!important;letter-spacing:.08em}
/* ==================================================================
LOS DOS DE CONTENIDO QUE QUEDABAN
================================================================== */
/* ---- La insignia de formato, "PDF", sobre el naranja. Iba en 8.5 px:
es el dato que dice cómo llegó el pedido. */
main .fl b{font-size:12px!important;font-weight:600!important;letter-spacing:.04em}
/* ---- El monograma del avatar, dentro de un círculo de 34 px. */
main .chatw header span{font-size:12px!important}
/* ---- Y el .tx, que quedó en 16 px con peso 600: es texto corrido. */
main .tx{font-weight:400!important}
/* ==================================================================
LA TARJETA DEL 04 YA NO CORTA
Al crecer su tipografía, el contenido llegó a 593 px a 1024 px de
ancho, contra una caja de 570. Sube el piso del clamp.
================================================================== */
main .motor .card,main .card{height:clamp(610px,64vh,650px)}
@media (max-width:1000px){
main .motor .card,main .card{height:auto;min-height:0}
}
/* ==================================================================
LOS TRES ÚLTIMOS
================================================================== */
/* ---- "POR QUÉ": abre una frase de 15.5 px, iba en 10. */
main .altw b{font-size:12px!important;letter-spacing:.09em}
/* ---- Los números de paso. .fr .n y .opl .n ya tenían piso; estos dos
comparten la forma y se habían quedado fuera. */
main .steps3 .n,main .cards .n{font-size:12px!important;letter-spacing:.11em}
/* ---- La duración de la nota de voz. */
main .cm-vn em{font-size:12px!important}
/* ==================================================================
EL NARANJA SOLO DONDE SIGNIFICA
Medido sobre las 143 páginas: el naranja ya estaba casi todo bien
puesto (hover, .on, aria-selected, li:last-child). Lo que sobraba
eran tres índices de orden y un defecto real en .chain, donde las
DOS columnas de la comparación salían en naranja y por lo tanto el
color no distinguía nada.
================================================================== */
/* ---- El defecto: .chain pintaba "Hoy" y "Con Peaking" igual. El
último paso ya va en naranja por .chain>div:last-child, así que el
rótulo general vuelve al gris y la comparación recupera su lado. */
main .chain small{color:var(--fg4)}
main .chain>div:last-child small{color:var(--sig)}
/* ---- Los índices de orden. Un número de secuencia no es un
resultado; es el mueble donde se apoya el resultado. */
main .steps3 .n,
main .cards .n,
main .opl .n{color:var(--fg4)}
/* ==================================================================
CORRECCIÓN: la última tarjeta de la cadena va RELLENA de naranja,
así que su rótulo va oscuro y no naranja. v144 lo dejó del color
del relleno, o sea invisible (contraste 1:1).
================================================================== */
main .chain>div:last-child small{color:#0A0706!important}
/* ==================================================================
EL 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 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 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))}}