/* Theme Name: Levatek Theme URI: https://levatek.cl Author: Levatek SpA Author URI: https://levatek.cl Description: Tema clásico para levatek.cl. Sin FSE y sin theme.json: una sola hoja de estilos, CPT «caso» y «recurso», taxonomías compartidas «industria» y «tecnologia», y páginas jerárquicas de tres niveles para los servicios. Los campos son metaboxes propios del tema: no necesita ningún plugin. Version: 1.18.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: levatek Tags: geomatica, geoespacial, corporativo, clasico */ :root{--ink:#0D2747;--deep:#06182E;--deep-2:#0C2440;--navy:#123E6B;--azul:#2E7CD6;--azul-link:#155293;--celeste:#8FC1F2;--paper:#EEF4FA;--white:#FFFFFF;--naranja:#F2592B;--naranja-deep:#C8431A;--amarillo:#FFC53D;--line:#CFDEED;--line-dark:#1B3D63;--mute:#4F6884;--global-heading-font-family:Syne,sans-serif;--global-body-font-family:'Instrument Sans',-apple-system,sans-serif} *{box-sizing:border-box}body{margin:0;font-family:var(--global-body-font-family);font-weight:500;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} a{color:var(--azul-link);text-decoration:none}a:hover{text-decoration:underline} /* Los atributos width/height del cuentan como alto definido, y con un alto definido el navegador IGNORA aspect-ratio. Sin este height:auto, cada imagen se pinta con la proporcion de sus atributos y no con la que pide la tarjeta. */ img{max-width:100%;height:auto} .container{max-width:1200px;margin:0 auto;padding:0 24px} @media(max-width:768px){.container{padding:0 20px}} .mono{font-family:var(--global-heading-font-family);font-weight:600}.display{font-family:var(--global-heading-font-family)} header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:14px 24px;pointer-events:none} .hdr-shell{pointer-events:auto;display:flex;align-items:center;padding:8px 16px;border-radius:999px;background:rgba(6,24,46,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.09);transition:padding .3s cubic-bezier(.22,1,.36,1),background .3s ease,border-color .3s ease,box-shadow .3s ease} header .logo{flex:0 0 auto;display:block} header .logo img{height:32px;width:auto;display:block;object-fit:contain;transition:height .3s cubic-bezier(.22,1,.36,1)} header.compact .logo img{height:26px} @media(max-width:768px){header .logo img{height:26px}} .nav-group{display:flex;align-items:center;gap:26px;overflow:hidden;max-width:660px;opacity:1;transition:max-width .34s cubic-bezier(.22,1,.36,1),opacity .16s ease .08s,margin .34s cubic-bezier(.22,1,.36,1)} .nav-group.left{margin-right:26px;justify-content:flex-end} .nav-group.right{margin-left:26px} header.compact .nav-group{max-width:0;opacity:0;margin:0;transition:max-width .3s cubic-bezier(.4,0,.2,1),opacity .12s ease,margin .3s cubic-bezier(.4,0,.2,1)} .hdr-side{flex:0 0 auto;display:flex;align-items:center;overflow:hidden;max-width:0;opacity:0;transition:max-width .3s cubic-bezier(.22,1,.36,1),opacity .14s ease,margin .3s cubic-bezier(.22,1,.36,1)} header.compact .hdr-side{max-width:34px;opacity:1;transition-delay:.06s} header.compact .hdr-side.l{margin-right:16px} header.compact .hdr-side.r{margin-left:16px} .prog-ring{width:30px;height:30px;display:block;transform:rotate(-90deg)} .prog-ring circle{fill:none;stroke-width:2.5} .prog-ring .bg{stroke:rgba(255,255,255,.20)} .prog-ring .fg{stroke:var(--amarillo);stroke-linecap:round;stroke-dasharray:87.96;stroke-dashoffset:87.96;transition:stroke-dashoffset .1s linear} .dots-btn{display:grid;grid-template-columns:repeat(2,6px);grid-auto-rows:6px;gap:5px;place-content:center;width:30px;height:30px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:50%;transition:background .18s ease} .dots-btn:hover{background:rgba(255,255,255,.10)} .dots-btn i{width:6px;height:6px;border-radius:50%;background:#CFE0F2;transition:background .18s ease,transform .22s cubic-bezier(.22,1,.36,1)} .dots-btn:hover i,.dots-btn.on i{background:var(--amarillo)} .dots-btn.on i:nth-child(1){transform:translate(1.5px,1.5px)}.dots-btn.on i:nth-child(2){transform:translate(-1.5px,1.5px)} .dots-btn.on i:nth-child(3){transform:translate(1.5px,-1.5px)}.dots-btn.on i:nth-child(4){transform:translate(-1.5px,-1.5px)} .quick{position:fixed;top:70px;left:50%;z-index:49;transform:translateX(-50%) translateY(-8px) scale(.97);transform-origin:top center;background:rgba(6,24,46,.97);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px;min-width:290px;display:grid;gap:2px;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .24s cubic-bezier(.22,1,.36,1)} .quick.open{opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto} .quick a{color:#CFE0F2;font-family:var(--global-body-font-family);font-weight:500;font-size:.95rem;padding:10px 12px;border-radius:10px;transition:background .16s ease,color .16s ease} .quick a:hover{background:rgba(255,255,255,.08);color:var(--white);text-decoration:none} .quick .sep{height:1px;background:rgba(255,255,255,.10);margin:8px 4px} @media(max-width:1180px){.nav-group{gap:18px}header nav a.nav-link{font-size:.86rem}.nav-group.left{margin-right:18px}.nav-group.right{margin-left:18px}} header nav a.nav-link{font-family:var(--global-body-font-family);font-weight:500;font-size:.92rem;white-space:nowrap;flex:0 0 auto;color:#CFE0F2;letter-spacing:.01em;position:relative;padding:6px 0} header nav a.nav-link:hover{color:var(--white);text-decoration:none}header nav a.nav-link.active::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--amarillo)} @media(max-width:1080px){.nav-group{display:none}.hdr-side{max-width:34px;opacity:1}.hdr-side.l{margin-right:16px}.hdr-side.r{margin-left:16px}} .btn-naranja{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--white);font-family:var(--global-heading-font-family);font-weight:700;font-size:.9rem;padding:12px 20px;border-radius:6px;border:0;transition:transform .25s,box-shadow .25s;cursor:pointer;border:1px solid var(--ink)} .btn-naranja:hover{background:var(--deep);transform:translateY(-2px);box-shadow:0 6px 18px rgba(13,39,71,.25);text-decoration:none;color:var(--white)} .btn-ghost{display:inline-flex;align-items:center;padding:11px 18px;border:1px solid var(--line);border-radius:6px;font-weight:600;font-size:.9rem;color:var(--ink);background:var(--white)} .btn-ghost-clear{border:1px solid rgba(255,255,255,.35);color:var(--white);background:transparent} .btn-ghost-clear:hover{background:rgba(255,255,255,.08);text-decoration:none;color:var(--white)} header.scrolled .hdr-shell{background:rgba(6,24,46,.94);border-color:rgba(255,255,255,.13);box-shadow:0 10px 34px rgba(0,0,0,.30)} .mega{position:fixed;top:74px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(13,39,71,.12);display:none;z-index:49} .mega.open{display:block;animation:megaIn .22s ease-out} @keyframes megaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} .mega-inner{max-width:1200px;margin:0 auto;padding:28px 24px;display:grid;grid-template-columns:30% 45% 25%;gap:0} .mega-col{padding:0 24px;border-right:1px solid var(--line)}.mega-col:last-child{border-right:0} .pilar-group-title{font-family:var(--global-heading-font-family);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:18px 0 8px} .pilar-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-size:.95rem;font-weight:500;cursor:pointer;transition:background .2s} .pilar-item:hover,.pilar-item.active{background:var(--paper)}.pilar-item.active{border-left:2px solid var(--naranja);color:var(--ink)} .pilar-detail h3{font-family:var(--global-heading-font-family);font-size:1.35rem;margin:0 0 8px}.pilar-detail .rule{height:1px;background:var(--line);margin:12px 0} .hija{display:block;padding:8px 0;font-size:.95rem;color:var(--azul-link)} /* Mega menu de industrias: dos columnas, una linea por dato. */ .mega-inds{display:grid;grid-template-columns:1fr 1fr;gap:2px 32px} @media(max-width:1080px){.mega-inds{grid-template-columns:1fr}} .hija-ind{padding:7px 0;line-height:1.35} .hija-ind strong{display:block;font-size:.92rem} .hija-ind span{display:block;font-size:.8rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .card-mini{border:1px solid var(--line);border-radius:6px;overflow:hidden;display:block}.card-mini img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.card-mini .txt{padding:14px}.card-mini h4{font-family:var(--global-heading-font-family);font-size:1.05rem;margin:0 0 6px}.card-mini p{font-size:.9rem;color:var(--mute);margin:0} .hero{position:relative;min-height:100svh;background:var(--deep);overflow:hidden;display:flex;align-items:center} .hero .velo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,24,46,.88) 0%,rgba(6,24,46,.88) 32%,rgba(6,24,46,0) 62%);z-index:1} .hero .content{position:relative;z-index:3;width:100%;padding:120px 24px 80px;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,820px)} .antetitulo{display:inline-flex;align-items:center;gap:10px;font-family:var(--global-heading-font-family);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--celeste)} .antetitulo /* El tamano lo fija el atributo width/height que imprime levatek_marca(), asi que aqui solo se alinea con la linea base del antetitulo. */ .cross{display:inline-block;vertical-align:-.12em;flex:0 0 auto} .hero h1{font-family:var(--global-heading-font-family);font-weight:700;font-size:clamp(2.6rem,5.8vw,4.5rem);line-height:.95;color:var(--white);margin:18px 0 16px;letter-spacing:-.03em} .hero h2{font-family:var(--global-heading-font-family);font-weight:600;font-size:1.35rem;line-height:1.3;color:var(--celeste);margin:0 0 18px;max-width:720px} .hero p{color:#CFE0F2;font-size:1.06rem;line-height:1.65;max-width:640px;margin:0 0 28px} .hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px} .spec-line{font-family:var(--global-heading-font-family);font-size:.72rem;color:#9DBBDA;opacity:.85;display:flex;flex-wrap:wrap;gap:0;align-items:center} .spec-line span{padding:0 14px;position:relative}.spec-line span+span::before{content:'·';position:absolute;left:-2px} .scroll-ind{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;color:#9DBBDA;font-family:var(--global-heading-font-family);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase} .scroll-ind .chev{width:18px;height:18px;border-right:1.5px solid #9DBBDA;border-bottom:1.5px solid #9DBBDA;transform:rotate(45deg);animation:bounce 1.8s infinite} @keyframes bounce{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(7px) rotate(45deg)}} section{padding:96px 0}@media(max-width:768px){section{padding:64px 0}} .bg-white{background:var(--white)}.bg-paper{background:var(--paper)}.bg-deep{background:var(--deep)}.bg-deep2{background:var(--deep-2)}.bg-navy{background:var(--navy)} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap} .sec-head h2{font-family:var(--global-heading-font-family);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.15;margin:8px 0 0;color:var(--ink)}.bg-deep .sec-head h2,.bg-deep2 .sec-head h2{color:var(--white)} .sec-head p{max-width:520px;color:var(--mute);line-height:1.6;margin:0}.bg-deep .sec-head p{color:#9DBBDA} .counters{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:38px}@media(max-width:900px){.counters{grid-template-columns:repeat(2,1fr)}} .counter .num{font-family:var(--global-heading-font-family);font-weight:700;font-size:2.35rem;color:var(--ink);line-height:1}.counter .num span.suf{color:var(--naranja);font-size:1.35rem;margin-left:2px}.counter .lab{font-family:var(--global-heading-font-family);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-top:6px} .logos{display:flex;align-items:center;gap:36px;flex-wrap:wrap;opacity:.55;filter:grayscale(1)}.logos img{height:28px} .creds{display:flex;gap:28px;margin-top:24px;flex-wrap:wrap;font-family:var(--global-heading-font-family);font-size:.72rem;color:var(--mute)} .three{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}@media(max-width:900px){.three{grid-template-columns:1fr}} .block{background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:transform .35s,box-shadow .35s}.block:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(13,39,71,.12)}.block img{width:100%;aspect-ratio:16/9;object-fit:cover}.block .btx{padding:22px}.block h3{font-family:var(--global-heading-font-family);font-size:1.4rem;margin:0 0 8px}.block p{color:var(--mute);line-height:1.6;margin:0 0 12px;font-size:.96rem} .link-mono{font-family:var(--global-heading-font-family);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--azul-link);display:inline-flex;align-items:center;gap:6px}.link-mono:hover span.arr{transform:translateX(4px)} .tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:0}.tab{padding:12px 4px 14px;border-bottom:2px solid transparent;font-family:var(--global-heading-font-family);font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);cursor:pointer;background:none;border-top:0;border-left:0;border-right:0}.tab.active{color:var(--ink);border-bottom-color:var(--amarillo)} .sol-panel{display:grid;grid-template-columns:1fr 1fr;height:460px;border:1px solid var(--line);border-top:0;border-radius:0 0 6px 6px;overflow:hidden;background:var(--deep)}@media(max-width:900px){.sol-panel{grid-template-columns:1fr;height:auto}} .sol-left{padding:48px;display:flex;flex-direction:column}.sol-left h3{font-family:var(--global-heading-font-family);font-size:1.6rem;color:var(--white);margin:0 0 12px}.sol-left p{color:#CFE0F2;line-height:1.6;font-size:.95rem;margin:0 0 18px}.sol-left .bottom{margin-top:auto} .sol-right img{width:100%;height:100%;object-fit:cover;display:block} .selector{display:grid;grid-template-columns:repeat(8,1fr);border:1px solid var(--line);border-top:0}@media(max-width:1100px){.selector{grid-template-columns:repeat(4,1fr)}}@media(max-width:600px){.selector{grid-template-columns:1fr}} .sel-cell{padding:18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--global-heading-font-family);font-weight:600;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);cursor:pointer;line-height:1.35}.sel-cell:last-child{border-right:0}.sel-cell.active{color:var(--ink);border:1px solid var(--ink);position:relative}.sel-cell.active::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--amarillo)} .acc{border-top:1px solid var(--line-dark)}.acc-item{border-bottom:1px solid var(--line-dark);display:grid;grid-template-columns:40px 1fr auto;gap:16px;align-items:start;padding:18px 0}.acc-item .numbox{width:40px;height:40px;background:var(--amarillo);display:flex;align-items:center;justify-content:center;font-family:var(--global-heading-font-family);font-weight:700;color:var(--deep)}.acc-item h4{margin:0;font-family:var(--global-heading-font-family);font-size:1.1rem;color:var(--white)}.acc-item p{margin:8px 0 0;color:#9DBBDA;line-height:1.6;font-size:.95rem}.acc-item .chev{width:28px;height:28px;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;color:#9DBBDA;transition:transform .3s}.acc-item.open .chev{transform:rotate(180deg)} .carousel{position:relative;overflow:hidden}.track{display:flex;transition:transform .4s ease;will-change:transform}.slide{min-width:100%;display:grid;grid-template-columns:38% 62%;border:1px solid var(--line-dark)}@media(max-width:900px){.slide{grid-template-columns:1fr}} .slide-left{padding:32px;background:var(--deep)}.slide-left h3{font-family:var(--global-heading-font-family);font-size:1.8rem;color:var(--white);margin:0 0 12px}.slide-left p{color:var(--celeste);line-height:1.6}.slide-right{padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--deep-2)}@media(max-width:600px){.slide-right{grid-template-columns:1fr}} .group-title{font-family:var(--global-heading-font-family);font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--amarillo);margin-bottom:10px} .ctrls{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.dots{display:flex;gap:8px}.dot{width:8px;height:8px;border-radius:50%;background:var(--line-dark);cursor:pointer}.dot.active{background:var(--amarillo)}.arrows{display:flex;gap:8px}.arr-btn{width:44px;height:44px;border:1px solid var(--line-dark);background:transparent;color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer} .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}@media(max-width:900px){.cards3{grid-template-columns:1fr}} .case-card{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--white)}.case-card img{width:100%;aspect-ratio:3/2;object-fit:cover}.case-card .ct{padding:18px}.chip{display:inline-flex;border:1px solid var(--line);border-radius:4px;padding:4px 8px;font-family:var(--global-heading-font-family);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}.chip.ind{border-color:var(--azul)}.chip.reg{border-color:var(--amarillo)} .cloud-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}@media(max-width:900px){.cloud-grid{grid-template-columns:1fr}} .visor-frame{border:1px solid var(--line-dark);border-radius:6px;overflow:hidden;background:var(--deep-2)}.visor-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--deep);font-family:var(--global-heading-font-family);font-weight:600;font-size:.72rem;color:var(--celeste);letter-spacing:.04em}.dotpulse{width:8px;height:8px;background:var(--celeste);border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}100%{transform:scale(1);opacity:1}} .res-row{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}@media(max-width:600px){.res-row{grid-template-columns:1fr}}.res-row:hover{background:var(--paper)}.res-date{font-family:var(--global-heading-font-family);font-weight:600;font-size:.78rem;color:var(--mute)}.res-title{font-family:var(--global-heading-font-family);font-weight:600;font-size:1.05rem;color:var(--ink)} .faq-layout{display:grid;grid-template-columns:32% 68%;gap:40px}@media(max-width:900px){.faq-layout{grid-template-columns:1fr}} .faq-item{border-bottom:1px solid var(--line);padding:18px 0;display:grid;grid-template-columns:1fr 28px;gap:12px;align-items:start}.faq-q{font-weight:600;font-size:1rem;color:var(--ink)}.faq-a{grid-column:1/3;color:var(--mute);line-height:1.6;display:none;margin-top:8px}.faq-item.open .faq-a{display:block}.faq-btn{width:28px;height:28px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer} .cta-band{background:var(--navy);padding:48px 0}.cta-band .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.cta-band h2{font-family:var(--global-heading-font-family);font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--white);margin:0}.cta-band p{color:#CFE0F2;margin:6px 0 0;max-width:520px} footer{background:var(--deep);color:#CFE0F2;padding:64px 0 24px}.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}@media(max-width:1100px){.footer-top{grid-template-columns:1fr 1fr}}@media(max-width:600px){.footer-top{grid-template-columns:1fr}} .footer-col h4{font-family:var(--global-heading-font-family);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--white);margin:0 0 14px}.footer-col a{display:block;color:#9DBBDA;font-size:.9rem;padding:6px 0}.footer-col a:hover{color:var(--white)} .footer-bottom{border-top:1px solid var(--line-dark);padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--global-heading-font-family);font-size:.72rem;color:#9DBBDA} .footer-cta{display:flex;flex-direction:column;align-items:flex-end;gap:26px} @media(max-width:1100px){.footer-cta{align-items:flex-start}} .footer-cta .lbl{font-family:var(--global-heading-font-family);font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#7E9AB8;margin:0 0 12px;text-align:right} @media(max-width:1100px){.footer-cta .lbl{text-align:left}} .tiles{display:flex;gap:10px;flex-wrap:wrap} .footer-col a.tile{width:54px;height:54px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:1px solid var(--line-dark);border-radius:10px;background:rgba(255,255,255,.02);transition:background .18s ease,border-color .18s ease,transform .22s cubic-bezier(.22,1,.36,1)} .footer-col a.tile:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);transform:translateY(-2px)} .tile img,.tile svg{width:22px;height:22px;display:block} /* Sin scroll-snap. En una pagina de 11 secciones de alturas muy distintas el enganche "proximity" pelea con el scroll rapido y se percibe como lag, y CSS no permite condicionarlo al sentido del scroll. Se conserva el desplazamiento suave, que solo actua en los saltos de ancla, y el scroll-padding para que el destino no quede debajo del header fijo. */ html{scroll-behavior:smooth;scroll-padding-top:78px} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}.reveal.in{opacity:1;transform:translateY(0)} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}#hero-mesh{opacity:1}} .lev-carousel{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--deep)} .lev-track{display:flex;transition:transform .45s cubic-bezier(.22,.61,.36,1);will-change:transform} .lev-slide{min-width:100%;position:relative} .lev-slide img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .lev-cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(6,24,46,.92) 0%,rgba(6,24,46,0) 100%);color:var(--white);font-family:var(--global-heading-font-family);font-weight:600;font-size:.82rem;padding:18px 16px 12px} .lev-ctrls{display:flex;justify-content:space-between;align-items:center;margin-top:12px} .lev-dots{display:flex;gap:6px;flex-wrap:wrap} .lev-dot{width:8px;height:8px;border-radius:50%;background:var(--line);cursor:pointer;transition:background .2s} .lev-dot.active{background:var(--ink)} .lev-arrows{display:flex;gap:8px} .lev-btn{width:36px;height:36px;border:1px solid var(--line);background:var(--white);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px} .top-cell{display:block;width:100%;text-align:left;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 14px;font-family:var(--global-heading-font-family);font-weight:600;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);cursor:pointer;line-height:1.3;background:var(--white);transition:all .2s} .top-cell:hover{background:var(--paper);color:var(--ink)} .top-cell.active,.top-cell.active:hover{background:var(--ink);color:var(--white);border-color:var(--ink)} .side-tab{width:100%;text-align:left;padding:14px 18px;border:0;border-left:3px solid transparent;background:transparent;font-family:var(--global-heading-font-family);font-weight:600;font-size:1rem;color:var(--mute);cursor:pointer;transition:background .2s,color .2s,border-color .2s} .side-tab:hover{color:var(--ink)} .side-tab.active{border-left-color:var(--ink);background:var(--white);font-weight:700;color:var(--ink)} /* El corte de columnas de este panel vive ahora en el bloque RESPONSIVE del final del archivo, sin !important. */ .top-ind-cell{display:block;width:100%;text-align:left;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 14px;font-family:var(--global-heading-font-family);font-weight:600;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);cursor:pointer;line-height:1.3;background:var(--white);transition:all .2s;text-align:left} .top-ind-cell:hover{background:var(--paper);color:var(--ink)} .top-ind-cell.active,.top-ind-cell.active:hover{background:var(--ink);color:var(--white);border-color:var(--ink)} @keyframes meshFloat { 0%, 100% { transform: translate(0, 0) } 25% { transform: translate(-4px, -2px) } 50% { transform: translate(2px, -4px) } 75% { transform: translate(4px, 2px) } } #servicios-medida{position:relative;background:linear-gradient(165deg,#20272E 0%,#2E353D 50%,#3B434C 100%)} #servicios-medida::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 560' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-linecap='round'%3E%3Cpath d='M0 -13.5 Q40 -25.4 60 -28.7 Q80 -31.9 100 -33.7 Q120 -35.4 140 -36.6 Q160 -37.7 180 -38.8 Q200 -40.0 220 -41.0 Q240 -42.0 260 -42.4 Q280 -42.8 300 -41.8 Q320 -40.8 340 -38.0 Q360 -35.2 380 -30.6 Q400 -26.0 420 -20.3 Q440 -14.6 460 -9.1 Q480 -3.5 500 0.8 Q520 5.1 540 7.2 Q560 9.3 580 9.1 Q600 8.9 620 7.1 Q640 5.4 660 3.4 Q680 1.4 700 0.7 Q720 0.1 740 2.3 Q760 4.4 780 10.0 Q800 15.7 820 24.7 Q840 33.7 860 45.1 Q880 56.5 900 69.0 Q920 81.5 940 93.7 Q960 105.8 980 116.7 Q1000 127.7 1020 136.9 Q1040 146.2 1060 154.1 Q1080 162.1 1100 169.2 Q1120 176.3 1140 183.0 Q1160 189.7 1180 196.2 Q1200 202.6 1220 208.2 Q1240 213.8 1260 217.5 Q1280 221.2 1300 221.9 Q1320 222.6 1340 219.3 Q1360 216.1 1380 208.7 Q1400 201.3 1420 190.4 L1440 179.5' stroke-opacity='0.1500' stroke-width='1.7'/%3E%3Cpath d='M0 13.2 Q40 1.6 60 -1.6 Q80 -4.8 100 -6.5 Q120 -8.2 140 -9.3 Q160 -10.4 180 -11.5 Q200 -12.6 220 -13.6 Q240 -14.6 260 -15.0 Q280 -15.4 300 -14.4 Q320 -13.4 340 -10.7 Q360 -7.9 380 -3.5 Q400 1.0 420 6.5 Q440 12.0 460 17.5 Q480 22.9 500 27.1 Q520 31.2 540 33.3 Q560 35.3 580 35.2 Q600 35.0 620 33.2 Q640 31.5 660 29.6 Q680 27.6 700 27.0 Q720 26.4 740 28.5 Q760 30.6 780 36.1 Q800 41.6 820 50.3 Q840 59.1 860 70.2 Q880 81.3 900 93.5 Q920 105.7 940 117.5 Q960 129.4 980 140.0 Q1000 150.6 1020 159.6 Q1040 168.7 1060 176.4 Q1080 184.1 1100 191.0 Q1120 197.9 1140 204.5 Q1160 211.1 1180 217.3 Q1200 223.6 1220 229.0 Q1240 234.5 1260 238.1 Q1280 241.7 1300 242.4 Q1320 243.0 1340 239.9 Q1360 236.7 1380 229.5 Q1400 222.3 1420 211.7 L1440 201.1' stroke-opacity='0.0732' stroke-width='0.9'/%3E%3Cpath d='M0 39.8 Q40 28.5 60 25.4 Q80 22.3 100 20.7 Q120 19.1 140 17.9 Q160 16.8 180 15.8 Q200 14.7 220 13.7 Q240 12.8 260 12.4 Q280 12.0 300 13.0 Q320 13.9 340 16.6 Q360 19.3 380 23.6 Q400 28.0 420 33.3 Q440 38.7 460 44.0 Q480 49.3 500 53.3 Q520 57.4 540 59.4 Q560 61.4 580 61.2 Q600 61.0 620 59.4 Q640 57.7 660 55.8 Q680 53.9 700 53.3 Q720 52.7 740 54.7 Q760 56.8 780 62.1 Q800 67.5 820 76.0 Q840 84.5 860 95.3 Q880 106.1 900 118.0 Q920 129.8 940 141.4 Q960 152.9 980 163.2 Q1000 173.6 1020 182.4 Q1040 191.2 1060 198.7 Q1080 206.2 1100 212.9 Q1120 219.6 1140 226.0 Q1160 232.4 1180 238.5 Q1200 244.6 1220 249.9 Q1240 255.2 1260 258.7 Q1280 262.2 1300 262.9 Q1320 263.5 1340 260.4 Q1360 257.3 1380 250.3 Q1400 243.3 1420 233.0 L1440 222.7' stroke-opacity='0.0714' stroke-width='0.9'/%3E%3Cpath d='M0 66.4 Q40 55.5 60 52.5 Q80 49.4 100 47.9 Q120 46.3 140 45.2 Q160 44.1 180 43.1 Q200 42.0 220 41.1 Q240 40.1 260 39.8 Q280 39.5 300 40.4 Q320 41.3 340 43.9 Q360 46.5 380 50.7 Q400 55.0 420 60.2 Q440 65.4 460 70.5 Q480 75.7 500 79.6 Q520 83.5 540 85.5 Q560 87.4 580 87.3 Q600 87.1 620 85.5 Q640 83.8 660 82.0 Q680 80.1 700 79.6 Q720 79.0 740 81.0 Q760 82.9 780 88.1 Q800 93.3 820 101.6 Q840 109.9 860 120.4 Q880 131.0 900 142.5 Q920 154.0 940 165.2 Q960 176.4 980 186.5 Q1000 196.5 1020 205.1 Q1040 213.6 1060 220.9 Q1080 228.2 1100 234.7 Q1120 241.3 1140 247.5 Q1160 253.7 1180 259.6 Q1200 265.6 1220 270.7 Q1240 275.9 1260 279.3 Q1280 282.7 1300 283.3 Q1320 284.0 1340 281.0 Q1360 278.0 1380 271.2 Q1400 264.3 1420 254.3 L1440 244.2' stroke-opacity='0.0696' stroke-width='0.9'/%3E%3Cpath d='M0 93.1 Q40 82.5 60 79.5 Q80 76.6 100 75.0 Q120 73.5 140 72.5 Q160 71.4 180 70.4 Q200 69.4 220 68.5 Q240 67.5 260 67.2 Q280 66.9 300 67.8 Q320 68.6 340 71.2 Q360 73.7 380 77.8 Q400 81.9 420 87.0 Q440 92.1 460 97.1 Q480 102.0 500 105.9 Q520 109.7 540 111.6 Q560 113.5 580 113.3 Q600 113.2 620 111.6 Q640 110.0 660 108.2 Q680 106.4 700 105.8 Q720 105.3 740 107.2 Q760 109.1 780 114.2 Q800 119.2 820 127.3 Q840 135.3 860 145.5 Q880 155.8 900 167.0 Q920 178.1 940 189.0 Q960 199.9 980 209.7 Q1000 219.5 1020 227.8 Q1040 236.1 1060 243.2 Q1080 250.3 1100 256.6 Q1120 263.0 1140 269.0 Q1160 275.0 1180 280.8 Q1200 286.6 1220 291.6 Q1240 296.6 1260 299.9 Q1280 303.2 1300 303.8 Q1320 304.4 1340 301.5 Q1360 298.6 1380 292.0 Q1400 285.4 1420 275.6 L1440 265.8' stroke-opacity='0.0678' stroke-width='0.9'/%3E%3Cpath d='M0 119.7 Q40 109.4 60 106.6 Q80 103.7 100 102.2 Q120 100.7 140 99.7 Q160 98.7 180 97.7 Q200 96.7 220 95.8 Q240 94.9 260 94.6 Q280 94.3 300 95.1 Q320 96.0 340 98.5 Q360 100.9 380 104.9 Q400 108.9 420 113.8 Q440 118.7 460 123.6 Q480 128.4 500 132.1 Q520 135.9 540 137.7 Q560 139.5 580 139.4 Q600 139.2 620 137.7 Q640 136.1 660 134.4 Q680 132.6 700 132.1 Q720 131.6 740 133.4 Q760 135.3 780 140.2 Q800 145.1 820 152.9 Q840 160.7 860 170.7 Q880 180.6 900 191.4 Q920 202.3 940 212.9 Q960 223.5 980 232.9 Q1000 242.4 1020 250.5 Q1040 258.5 1060 265.4 Q1080 272.3 1100 278.5 Q1120 284.6 1140 290.5 Q1160 296.4 1180 301.9 Q1200 307.5 1220 312.4 Q1240 317.2 1260 320.5 Q1280 323.7 1300 324.3 Q1320 324.9 1340 322.1 Q1360 319.2 1380 312.8 Q1400 306.4 1420 296.9 L1440 287.4' stroke-opacity='0.1321' stroke-width='1.7'/%3E%3Cpath d='M0 146.4 Q40 136.4 60 133.6 Q80 130.8 100 129.4 Q120 127.9 140 127.0 Q160 126.0 180 125.0 Q200 124.1 220 123.2 Q240 122.3 260 122.0 Q280 121.7 300 122.5 Q320 123.4 340 125.7 Q360 128.1 380 132.0 Q400 135.9 420 140.6 Q440 145.4 460 150.1 Q480 154.8 500 158.4 Q520 162.0 540 163.8 Q560 165.6 580 165.4 Q600 165.3 620 163.8 Q640 162.3 660 160.6 Q680 158.9 700 158.4 Q720 157.9 740 159.7 Q760 161.5 780 166.2 Q800 171.0 820 178.6 Q840 186.1 860 195.8 Q880 205.4 900 215.9 Q920 226.4 940 236.7 Q960 247.0 980 256.2 Q1000 265.4 1020 273.2 Q1040 281.0 1060 287.7 Q1080 294.4 1100 300.3 Q1120 306.3 1140 312.0 Q1160 317.7 1180 323.1 Q1200 328.5 1220 333.2 Q1240 337.9 1260 341.1 Q1280 344.2 1300 344.8 Q1320 345.4 1340 342.6 Q1360 339.9 1380 333.6 Q1400 327.4 1420 318.2 L1440 309.0' stroke-opacity='0.0642' stroke-width='0.9'/%3E%3Cpath d='M0 173.0 Q40 163.3 60 160.6 Q80 158.0 100 156.6 Q120 155.2 140 154.2 Q160 153.3 180 152.3 Q200 151.4 220 150.6 Q240 149.7 260 149.4 Q280 149.1 300 149.9 Q320 150.7 340 153.0 Q360 155.3 380 159.1 Q400 162.8 420 167.5 Q440 172.1 460 176.6 Q480 181.2 500 184.7 Q520 188.2 540 189.9 Q560 191.6 580 191.5 Q600 191.3 620 189.9 Q640 188.4 660 186.8 Q680 185.2 700 184.7 Q720 184.1 740 185.9 Q760 187.7 780 192.3 Q800 196.9 820 204.2 Q840 211.6 860 220.9 Q880 230.2 900 240.4 Q920 250.6 940 260.6 Q960 270.5 980 279.4 Q1000 288.3 1020 295.9 Q1040 303.5 1060 309.9 Q1080 316.4 1100 322.2 Q1120 328.0 1140 333.5 Q1160 339.0 1180 344.3 Q1200 349.5 1220 354.1 Q1240 358.6 1260 361.7 Q1280 364.7 1300 365.3 Q1320 365.8 1340 363.2 Q1360 360.5 1380 354.5 Q1400 348.4 1420 339.5 L1440 330.6' stroke-opacity='0.0624' stroke-width='0.9'/%3E%3Cpath d='M0 199.7 Q40 190.3 60 187.7 Q80 185.1 100 183.7 Q120 182.4 140 181.5 Q160 180.5 180 179.6 Q200 178.7 220 177.9 Q240 177.1 260 176.8 Q280 176.5 300 177.3 Q320 178.1 340 180.3 Q360 182.6 380 186.2 Q400 189.8 420 194.3 Q440 198.8 460 203.2 Q480 207.6 500 211.0 Q520 214.3 540 216.0 Q560 217.7 580 217.5 Q600 217.4 620 216.0 Q640 214.6 660 213.0 Q680 211.4 700 210.9 Q720 210.4 740 212.1 Q760 213.8 780 218.3 Q800 222.7 820 229.9 Q840 237.0 860 246.0 Q880 255.0 900 264.9 Q920 274.8 940 284.4 Q960 294.0 980 302.6 Q1000 311.3 1020 318.6 Q1040 325.9 1060 332.2 Q1080 338.5 1100 344.1 Q1120 349.7 1140 355.0 Q1160 360.3 1180 365.4 Q1200 370.5 1220 374.9 Q1240 379.3 1260 382.3 Q1280 385.2 1300 385.7 Q1320 386.3 1340 383.7 Q1360 381.1 1380 375.3 Q1400 369.5 1420 360.8 L1440 352.2' stroke-opacity='0.0606' stroke-width='0.9'/%3E%3Cpath d='M0 226.3 Q40 217.2 60 214.7 Q80 212.2 100 210.9 Q120 209.6 140 208.7 Q160 207.8 180 207.0 Q200 206.1 220 205.3 Q240 204.5 260 204.2 Q280 203.9 300 204.7 Q320 205.5 340 207.6 Q360 209.8 380 213.3 Q400 216.8 420 221.1 Q440 225.4 460 229.7 Q480 234.0 500 237.2 Q520 240.5 540 242.1 Q560 243.7 580 243.6 Q600 243.5 620 242.1 Q640 240.7 660 239.2 Q680 237.7 700 237.2 Q720 236.7 740 238.4 Q760 240.0 780 244.3 Q800 248.6 820 255.5 Q840 262.4 860 271.1 Q880 279.8 900 289.4 Q920 298.9 940 308.2 Q960 317.5 980 325.9 Q1000 334.2 1020 341.3 Q1040 348.4 1060 354.5 Q1080 360.5 1100 365.9 Q1120 371.3 1140 376.5 Q1160 381.7 1180 386.6 Q1200 391.5 1220 395.8 Q1240 400.0 1260 402.9 Q1280 405.7 1300 406.2 Q1320 406.7 1340 404.3 Q1360 401.8 1380 396.1 Q1400 390.5 1420 382.1 L1440 373.8' stroke-opacity='0.0589' stroke-width='0.9'/%3E%3Cpath d='M0 253.0 Q40 244.2 60 241.8 Q80 239.4 100 238.1 Q120 236.8 140 236.0 Q160 235.1 180 234.3 Q200 233.4 220 232.7 Q240 231.9 260 231.6 Q280 231.4 300 232.1 Q320 232.8 340 234.9 Q360 237.0 380 240.4 Q400 243.8 420 247.9 Q440 252.1 460 256.2 Q480 260.4 500 263.5 Q520 266.7 540 268.2 Q560 269.8 580 269.6 Q600 269.5 620 268.2 Q640 266.9 660 265.4 Q680 263.9 700 263.5 Q720 263.0 740 264.6 Q760 266.2 780 270.3 Q800 274.5 820 281.1 Q840 287.8 860 296.2 Q880 304.7 900 313.9 Q920 323.1 940 332.1 Q960 341.1 980 349.1 Q1000 357.2 1020 364.0 Q1040 370.9 1060 376.7 Q1080 382.6 1100 387.8 Q1120 393.0 1140 398.0 Q1160 403.0 1180 407.7 Q1200 412.5 1220 416.6 Q1240 420.7 1260 423.5 Q1280 426.2 1300 426.7 Q1320 427.2 1340 424.8 Q1360 422.4 1380 417.0 Q1400 411.5 1420 403.4 L1440 395.4' stroke-opacity='0.1141' stroke-width='1.7'/%3E%3Cpath d='M0 279.6 Q40 271.2 60 268.8 Q80 266.5 100 265.3 Q120 264.0 140 263.2 Q160 262.4 180 261.6 Q200 260.8 220 260.0 Q240 259.3 260 259.0 Q280 258.8 300 259.5 Q320 260.2 340 262.2 Q360 264.2 380 267.5 Q400 270.7 420 274.8 Q440 278.8 460 282.8 Q480 286.7 500 289.8 Q520 292.8 540 294.3 Q560 295.8 580 295.7 Q600 295.6 620 294.3 Q640 293.0 660 291.6 Q680 290.2 700 289.7 Q720 289.3 740 290.8 Q760 292.4 780 296.4 Q800 300.4 820 306.8 Q840 313.2 860 321.3 Q880 329.5 900 338.4 Q920 347.2 940 355.9 Q960 364.6 980 372.3 Q1000 380.1 1020 386.7 Q1040 393.3 1060 399.0 Q1080 404.6 1100 409.7 Q1120 414.7 1140 419.5 Q1160 424.3 1180 428.9 Q1200 433.5 1220 437.4 Q1240 441.4 1260 444.1 Q1280 446.7 1300 447.2 Q1320 447.7 1340 445.4 Q1360 443.0 1380 437.8 Q1400 432.5 1420 424.8 L1440 417.0' stroke-opacity='0.0553' stroke-width='0.9'/%3E%3Cpath d='M0 306.3 Q40 298.1 60 295.9 Q80 293.6 100 292.4 Q120 291.3 140 290.5 Q160 289.7 180 288.9 Q200 288.1 220 287.4 Q240 286.7 260 286.4 Q280 286.2 300 286.9 Q320 287.5 340 289.5 Q360 291.4 380 294.6 Q400 297.7 420 301.6 Q440 305.5 460 309.3 Q480 313.1 500 316.1 Q520 319.0 540 320.4 Q560 321.9 580 321.8 Q600 321.6 620 320.4 Q640 319.2 660 317.8 Q680 316.4 700 316.0 Q720 315.6 740 317.1 Q760 318.5 780 322.4 Q800 326.3 820 332.4 Q840 338.6 860 346.4 Q880 354.3 900 362.8 Q920 371.4 940 379.8 Q960 388.1 980 395.6 Q1000 403.1 1020 409.4 Q1040 415.8 1060 421.2 Q1080 426.6 1100 431.5 Q1120 436.4 1140 441.0 Q1160 445.6 1180 450.0 Q1200 454.4 1220 458.3 Q1240 462.1 1260 464.7 Q1280 467.2 1300 467.7 Q1320 468.1 1340 465.9 Q1360 463.7 1380 458.6 Q1400 453.5 1420 446.1 L1440 438.6' stroke-opacity='0.0535' stroke-width='0.9'/%3E%3Cpath d='M0 332.9 Q40 325.1 60 322.9 Q80 320.7 100 319.6 Q120 318.5 140 317.7 Q160 316.9 180 316.2 Q200 315.4 220 314.8 Q240 314.1 260 313.8 Q280 313.6 300 314.2 Q320 314.9 340 316.8 Q360 318.6 380 321.7 Q400 324.7 420 328.4 Q440 332.2 460 335.8 Q480 339.5 500 342.3 Q520 345.1 540 346.5 Q560 347.9 580 347.8 Q600 347.7 620 346.5 Q640 345.4 660 344.0 Q680 342.7 700 342.3 Q720 341.9 740 343.3 Q760 344.7 780 348.4 Q800 352.2 820 358.1 Q840 364.0 860 371.6 Q880 379.1 900 387.3 Q920 395.6 940 403.6 Q960 411.6 980 418.8 Q1000 426.0 1020 432.1 Q1040 438.3 1060 443.5 Q1080 448.7 1100 453.4 Q1120 458.1 1140 462.5 Q1160 466.9 1180 471.2 Q1200 475.4 1220 479.1 Q1240 482.8 1260 485.3 Q1280 487.7 1300 488.2 Q1320 488.6 1340 486.5 Q1360 484.3 1380 479.4 Q1400 474.6 1420 467.4 L1440 460.2' stroke-opacity='0.0517' stroke-width='0.9'/%3E%3Cpath d='M0 359.6 Q40 352.0 60 350.0 Q80 347.9 100 346.8 Q120 345.7 140 345.0 Q160 344.2 180 343.5 Q200 342.8 220 342.1 Q240 341.5 260 341.2 Q280 341.0 300 341.6 Q320 342.3 340 344.1 Q360 345.8 380 348.8 Q400 351.7 420 355.2 Q440 358.8 460 362.4 Q480 365.9 500 368.6 Q520 371.3 540 372.6 Q560 374.0 580 373.9 Q600 373.8 620 372.6 Q640 371.5 660 370.2 Q680 369.0 700 368.6 Q720 368.2 740 369.5 Q760 370.9 780 374.5 Q800 378.0 820 383.7 Q840 389.4 860 396.7 Q880 403.9 900 411.8 Q920 419.7 940 427.4 Q960 435.1 980 442.0 Q1000 449.0 1020 454.8 Q1040 460.7 1060 465.7 Q1080 470.7 1100 475.2 Q1120 479.7 1140 484.0 Q1160 488.3 1180 492.3 Q1200 496.4 1220 500.0 Q1240 503.5 1260 505.9 Q1280 508.2 1300 508.6 Q1320 509.1 1340 507.0 Q1360 505.0 1380 500.3 Q1400 495.6 1420 488.7 L1440 481.8' stroke-opacity='0.0499' stroke-width='0.9'/%3E%3Cpath d='M0 386.2 Q40 379.0 60 377.0 Q80 375.0 100 374.0 Q120 372.9 140 372.2 Q160 371.5 180 370.8 Q200 370.1 220 369.5 Q240 368.9 260 368.6 Q280 368.4 300 369.0 Q320 369.6 340 371.3 Q360 373.1 380 375.8 Q400 378.6 420 382.1 Q440 385.5 460 388.9 Q480 392.3 500 394.9 Q520 397.5 540 398.7 Q560 400.0 580 399.9 Q600 399.8 620 398.7 Q640 397.7 660 396.4 Q680 395.2 700 394.8 Q720 394.5 740 395.8 Q760 397.1 780 400.5 Q800 403.9 820 409.4 Q840 414.8 860 421.8 Q880 428.7 900 436.3 Q920 443.9 940 451.3 Q960 458.7 980 465.3 Q1000 471.9 1020 477.5 Q1040 483.2 1060 488.0 Q1080 492.8 1100 497.1 Q1120 501.4 1140 505.5 Q1160 509.6 1180 513.5 Q1200 517.4 1220 520.8 Q1240 524.2 1260 526.4 Q1280 528.7 1300 529.1 Q1320 529.5 1340 527.6 Q1360 525.6 1380 521.1 Q1400 516.6 1420 510.0 L1440 503.4' stroke-opacity='0.0962' stroke-width='1.7'/%3E%3Cpath d='M0 412.9 Q40 406.0 60 404.0 Q80 402.1 100 401.1 Q120 400.1 140 399.5 Q160 398.8 180 398.1 Q200 397.5 220 396.9 Q240 396.3 260 396.1 Q280 395.8 300 396.4 Q320 397.0 340 398.6 Q360 400.3 380 402.9 Q400 405.6 420 408.9 Q440 412.2 460 415.4 Q480 418.7 500 421.1 Q520 423.6 540 424.9 Q560 426.1 580 426.0 Q600 425.9 620 424.8 Q640 423.8 660 422.6 Q680 421.5 700 421.1 Q720 420.8 740 422.0 Q760 423.3 780 426.5 Q800 429.8 820 435.0 Q840 440.3 860 446.9 Q880 453.5 900 460.8 Q920 468.0 940 475.1 Q960 482.2 980 488.5 Q1000 494.9 1020 500.2 Q1040 505.6 1060 510.2 Q1080 514.8 1100 519.0 Q1120 523.1 1140 527.0 Q1160 530.9 1180 534.7 Q1200 538.4 1220 541.6 Q1240 544.9 1260 547.0 Q1280 549.2 1300 549.6 Q1320 550.0 1340 548.1 Q1360 546.2 1380 541.9 Q1400 537.6 1420 531.3 L1440 525.0' stroke-opacity='0.0463' stroke-width='0.9'/%3E%3Cpath d='M0 439.5 Q40 432.9 60 431.1 Q80 429.3 100 428.3 Q120 427.4 140 426.7 Q160 426.1 180 425.4 Q200 424.8 220 424.2 Q240 423.7 260 423.5 Q280 423.3 300 423.8 Q320 424.3 340 425.9 Q360 427.5 380 430.0 Q400 432.6 420 435.7 Q440 438.9 460 442.0 Q480 445.0 500 447.4 Q520 449.8 540 451.0 Q560 452.1 580 452.0 Q600 451.9 620 450.9 Q640 450.0 660 448.9 Q680 447.7 700 447.4 Q720 447.0 740 448.2 Q760 449.4 780 452.6 Q800 455.7 820 460.7 Q840 465.7 860 472.0 Q880 478.3 900 485.3 Q920 492.2 940 499.0 Q960 505.7 980 511.8 Q1000 517.8 1020 523.0 Q1040 528.1 1060 532.5 Q1080 536.9 1100 540.8 Q1120 544.8 1140 548.5 Q1160 552.2 1180 555.8 Q1200 559.4 1220 562.5 Q1240 565.6 1260 567.6 Q1280 569.7 1300 570.1 Q1320 570.5 1340 568.7 Q1360 566.9 1380 562.8 Q1400 558.6 1420 552.6 L1440 546.5' stroke-opacity='0.0445' stroke-width='0.9'/%3E%3Cpath d='M0 466.1 Q40 459.9 60 458.1 Q80 456.4 100 455.5 Q120 454.6 140 454.0 Q160 453.3 180 452.7 Q200 452.1 220 451.6 Q240 451.1 260 450.9 Q280 450.7 300 451.2 Q320 451.7 340 453.2 Q360 454.7 380 457.1 Q400 459.6 420 462.5 Q440 465.5 460 468.5 Q480 471.4 500 473.7 Q520 475.9 540 477.1 Q560 478.2 580 478.1 Q600 478.0 620 477.1 Q640 476.1 660 475.1 Q680 474.0 700 473.7 Q720 473.3 740 474.5 Q760 475.6 780 478.6 Q800 481.6 820 486.3 Q840 491.1 860 497.1 Q880 503.2 900 509.8 Q920 516.4 940 522.8 Q960 529.2 980 535.0 Q1000 540.8 1020 545.7 Q1040 550.6 1060 554.8 Q1080 558.9 1100 562.7 Q1120 566.4 1140 570.0 Q1160 573.6 1180 577.0 Q1200 580.4 1220 583.3 Q1240 586.3 1260 588.2 Q1280 590.2 1300 590.6 Q1320 590.9 1340 589.2 Q1360 587.5 1380 583.6 Q1400 579.7 1420 573.9 L1440 568.1' stroke-opacity='0.0427' stroke-width='0.9'/%3E%3Cpath d='M0 492.8 Q40 486.8 60 485.2 Q80 483.5 100 482.7 Q120 481.8 140 481.2 Q160 480.6 180 480.1 Q200 479.5 220 479.0 Q240 478.5 260 478.3 Q280 478.1 300 478.6 Q320 479.1 340 480.5 Q360 481.9 380 484.2 Q400 486.5 420 489.4 Q440 492.2 460 495.0 Q480 497.8 500 500.0 Q520 502.1 540 503.2 Q560 504.2 580 504.1 Q600 504.1 620 503.2 Q640 502.3 660 501.3 Q680 500.3 700 499.9 Q720 499.6 740 500.7 Q760 501.8 780 504.6 Q800 507.5 820 512.0 Q840 516.5 860 522.2 Q880 528.0 900 534.2 Q920 540.5 940 546.6 Q960 552.7 980 558.2 Q1000 563.7 1020 568.4 Q1040 573.0 1060 577.0 Q1080 581.0 1100 584.6 Q1120 588.1 1140 591.5 Q1160 594.9 1180 598.1 Q1200 601.4 1220 604.2 Q1240 607.0 1260 608.8 Q1280 610.7 1300 611.0 Q1320 611.4 1340 609.8 Q1360 608.1 1380 604.4 Q1400 600.7 1420 595.2 L1440 589.7' stroke-opacity='0.0409' stroke-width='0.9'/%3E%3Cpath d='M0 519.4 Q40 513.8 60 512.2 Q80 510.7 100 509.8 Q120 509.0 140 508.5 Q160 507.9 180 507.4 Q200 506.8 220 506.3 Q240 505.8 260 505.7 Q280 505.5 300 506.0 Q320 506.4 340 507.8 Q360 509.1 380 511.3 Q400 513.5 420 516.2 Q440 518.9 460 521.5 Q480 524.2 500 526.2 Q520 528.3 540 529.3 Q560 530.3 580 530.2 Q600 530.1 620 529.3 Q640 528.4 660 527.5 Q680 526.5 700 526.2 Q720 525.9 740 526.9 Q760 528.0 780 530.7 Q800 533.3 820 537.6 Q840 541.9 860 547.3 Q880 552.8 900 558.7 Q920 564.7 940 570.5 Q960 576.3 980 581.5 Q1000 586.7 1020 591.1 Q1040 595.5 1060 599.3 Q1080 603.0 1100 606.4 Q1120 609.8 1140 613.0 Q1160 616.2 1180 619.3 Q1200 622.3 1220 625.0 Q1240 627.7 1260 629.4 Q1280 631.2 1300 631.5 Q1320 631.9 1340 630.3 Q1360 628.8 1380 625.2 Q1400 621.7 1420 616.5 L1440 611.3' stroke-opacity='0.0782' stroke-width='1.7'/%3E%3Cpath d='M0 546.1 Q40 540.7 60 539.3 Q80 537.8 100 537.0 Q120 536.2 140 535.7 Q160 535.2 180 534.7 Q200 534.2 220 533.7 Q240 533.2 260 533.1 Q280 532.9 300 533.4 Q320 533.8 340 535.1 Q360 536.3 380 538.4 Q400 540.5 420 543.0 Q440 545.6 460 548.1 Q480 550.6 500 552.5 Q520 554.4 540 555.4 Q560 556.3 580 556.3 Q600 556.2 620 555.4 Q640 554.6 660 553.7 Q680 552.8 700 552.5 Q720 552.2 740 553.2 Q760 554.1 780 556.7 Q800 559.2 820 563.3 Q840 567.3 860 572.5 Q880 577.6 900 583.2 Q920 588.8 940 594.3 Q960 599.8 980 604.7 Q1000 609.6 1020 613.8 Q1040 618.0 1060 621.5 Q1080 625.1 1100 628.3 Q1120 631.5 1140 634.5 Q1160 637.5 1180 640.4 Q1200 643.3 1220 645.8 Q1240 648.4 1260 650.0 Q1280 651.7 1300 652.0 Q1320 652.3 1340 650.9 Q1360 649.4 1380 646.1 Q1400 642.7 1420 637.8 L1440 632.9' stroke-opacity='0.0373' stroke-width='0.9'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;pointer-events:none} #servicios-medida>.container{position:relative;z-index:1} /* === Tecnologias (V6) - reglas aisladas para no afectar el carrusel de industrias === */ #tecnologias{background:radial-gradient(120% 80% at 50% -10%,#123E6B 0%,rgba(18,62,107,0) 55%),var(--deep);color:var(--white)} #tecnologias .antetitulo{color:var(--celeste)} #tecnologias .sec-head h2{color:var(--white)} #tecnologias .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0;border-bottom:0} #tecnologias .tabs .tab{padding:10px 14px;border:1px solid var(--line-dark);background:transparent;color:#9DBBDA;border-radius:6px;font-family:var(--global-heading-font-family);font-weight:600;font-size:.78rem;letter-spacing:0;text-transform:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s} #tecnologias .tabs .tab:hover{color:var(--white);border-color:rgba(255,255,255,.5)} #tecnologias .tabs .tab.active{background:var(--white);color:var(--ink);border-color:var(--white)} #tecnologias .carousel-wrap{overflow:hidden;border:1px solid var(--line-dark);border-radius:6px;background:var(--deep)} #tecnologias .carousel{display:flex;position:static;overflow:visible;transition:transform .45s ease} #tecnologias .slide{min-width:100%;display:grid;grid-template-columns:38% 62%;border:0} #tecnologias .slide-left{padding:28px;background:var(--deep);border-right:1px solid var(--line-dark)} #tecnologias .slide-left h3{font-family:var(--global-heading-font-family);font-size:1.35rem;margin:0 0 10px;color:var(--white)} #tecnologias .slide-left p{color:#CFE0F2;line-height:1.6;font-size:.9rem;margin:0 0 14px} #tecnologias .slide-right{display:block;grid-template-columns:none;padding:0;background:var(--deep);position:relative;overflow:hidden;min-height:340px} #tecnologias .slide-right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} #tecnologias .group{margin-bottom:18px} #tecnologias .group-title{font-family:var(--global-heading-font-family);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--amarillo);margin-bottom:8px} #tecnologias .group a{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(207,222,237,.12);font-size:.88rem;color:#CFE0F2;text-decoration:none} #tecnologias .group a:hover{color:var(--white)} #tecnologias .group a span{color:#9DBBDA;font-size:.8rem} #tecnologias .dots{display:flex;gap:8px;justify-content:center;margin-top:14px} #tecnologias .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer} #tecnologias .dot.active{background:var(--white)} @media(max-width:900px){#tecnologias .slide{grid-template-columns:1fr}#tecnologias .slide-left{border-right:0;border-bottom:1px solid var(--line-dark)}} /* ========================================================== PLANTILLAS INTERNAS - bloque unico Cubre nivel 3, quienes somos, contacto, caso y recurso. Al armar el tema, este bloque va completo a style.css despues de la hoja del home. No redefine nada del home. ========================================================== */ /* --- Hero comun --- */ .pg-hero{position:relative;background:var(--deep);color:var(--white);padding:132px 0 76px;overflow:hidden} .pg-hero.compact{padding:126px 0 54px} .pg-hero .bgrad{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 8%,#0E2A4A 0%,#08192E 45%,#040D19 100%);z-index:0} .pg-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;opacity:.55} .pg-hero .velo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,13,25,.92) 0%,rgba(4,13,25,.72) 42%,rgba(4,13,25,.22) 72%,rgba(4,13,25,0) 100%);z-index:2} .pg-hero .container{position:relative;z-index:3} .pg-hero h1{font-family:var(--global-heading-font-family);font-weight:800;font-size:clamp(2.1rem,4.6vw,3.1rem);line-height:1.06;letter-spacing:-.025em;margin:14px 0 18px;color:var(--white);text-wrap:balance;max-width:22ch} .pg-hero p.intro{margin:0;max-width:66ch;font-size:1.06rem;line-height:1.68;color:#CFE0F2;text-wrap:pretty} .pg-hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .pg-hero .chips-hero{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .pg-hero .chips-hero .chip{border-color:rgba(255,255,255,.35);color:#CFE0F2;margin:0} .crumbs{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 30px;padding:0;font-family:var(--global-heading-font-family);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase} .crumbs a{color:#9DBBDA} .crumbs a:hover{color:var(--white);text-decoration:none} .crumbs .sep{color:#4F6884} .crumbs [aria-current]{color:var(--amarillo)} .meta-strip{display:flex;flex-wrap:wrap;margin-top:24px;font-family:var(--global-heading-font-family);font-weight:600;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#9DBBDA} .meta-strip span{padding:0 14px;position:relative} .meta-strip span:first-child{padding-left:0} .meta-strip span+span::before{content:'\00B7';position:absolute;left:-2px} /* --- Ritmo de seccion --- */ .pg-sec{padding:72px 0} .pg-sec.slim{padding:56px 0 60px} .pg-sec.tight{padding:0 0 72px} .pg-h2{margin:12px 0 16px;font-family:var(--global-heading-font-family);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.12;letter-spacing:-.02em} .pg-h3{margin:0 0 10px;font-family:var(--global-heading-font-family);font-weight:800;font-size:clamp(1.25rem,2.4vw,1.65rem);line-height:1.18;letter-spacing:-.02em} .pg-lead{margin:0 0 16px;font-size:1.02rem;line-height:1.7;color:var(--ink)} .pg-body{margin:0 0 16px;font-size:.96rem;line-height:1.65;color:var(--mute)} .pg-body:last-child{margin-bottom:0} .split{display:grid;grid-template-columns:1.15fr .85fr;gap:32px 56px;align-items:start} .split.equal{grid-template-columns:1fr 1fr} .split.aside-sm{grid-template-columns:1fr 300px} @media(max-width:900px){.split,.split.equal,.split.aside-sm{grid-template-columns:1fr}} /* --- Ficha lateral --- */ .ficha{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px} .ficha.claro{background:var(--white)} .ficha.sticky{position:sticky;top:96px} @media(max-width:900px){.ficha.sticky{position:static}} .ficha h4{margin:0 0 14px;font-family:var(--global-heading-font-family);font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase} .ficha dl{margin:0} .ficha dt{font-family:var(--global-heading-font-family);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:14px} .ficha dt:first-of-type{margin-top:0} .ficha dd{margin:4px 0 0;font-size:.94rem;line-height:1.5;color:var(--ink)} .ficha .rule{height:1px;background:var(--line);margin:18px 0} .lista-check{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.94rem;line-height:1.5;color:var(--ink)} .lista-check li{display:flex;gap:10px} .lista-check li::before{content:'\2022';color:var(--naranja);flex:0 0 auto} .lista-check.dos{grid-template-columns:1fr 1fr;gap:12px 32px} @media(max-width:700px){.lista-check.dos{grid-template-columns:1fr}} /* --- Bloques numerados / tercios --- */ .pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} @media(max-width:900px){.pasos{grid-template-columns:1fr 1fr}} @media(max-width:560px){.pasos{grid-template-columns:1fr}} .paso{border-top:2px solid var(--line)} .paso .n{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:18px 0 12px;background:var(--naranja);font-family:var(--global-heading-font-family);font-weight:700;color:var(--white)} .paso h3{margin:0 0 8px;font-family:var(--global-heading-font-family);font-weight:700;font-size:1.05rem;line-height:1.25;color:var(--ink)} .paso p{margin:0;font-size:.9rem;line-height:1.6;color:var(--mute)} .tercios{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} @media(max-width:900px){.tercios{grid-template-columns:1fr}} .tercios article{border-top:2px solid var(--amarillo);padding-top:18px} .tercios h3{margin:0 0 10px;font-family:var(--global-heading-font-family);font-weight:700;font-size:1.15rem;color:var(--ink)} .tercios p{margin:0;font-size:.95rem;line-height:1.65;color:var(--mute)} /* --- Tabla de especificaciones --- */ .specs{width:100%;border-collapse:collapse;font-size:.94rem} .specs th,.specs td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top} .specs th{width:34%;font-family:var(--global-heading-font-family);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)} .specs td{color:var(--ink);line-height:1.55} .specs tr:first-child th,.specs tr:first-child td{border-top:1px solid var(--line)} @media(max-width:600px){.specs th,.specs td{display:block;width:100%;border-bottom:0;padding:10px 0}.specs td{border-bottom:1px solid var(--line);padding-bottom:14px}} /* --- Enlaces hermanos y chips --- */ .hermanos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px} .hermano{display:flex;flex-direction:column;gap:4px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:14px 16px;transition:border-color .2s ease,transform .25s cubic-bezier(.22,1,.36,1)} .hermano:hover{border-color:var(--azul);transform:translateY(-2px);text-decoration:none} .hermano .t{font-family:var(--global-heading-font-family);font-weight:700;font-size:.95rem;color:var(--ink)} .hermano .d{font-size:.82rem;line-height:1.45;color:var(--mute)} .chips-ind{display:flex;flex-wrap:wrap;gap:10px} .chips-ind a{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-family:var(--global-heading-font-family);font-weight:700;font-size:.78rem;letter-spacing:.04em;color:var(--ink);background:var(--white);transition:border-color .2s ease,transform .25s cubic-bezier(.22,1,.36,1)} .chips-ind a:hover{border-color:var(--azul);transform:translateY(-2px);text-decoration:none} /* --- Tarjetas de destino sin imagen --- */ .destinos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px} .destino{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:24px;transition:transform .35s,box-shadow .35s,border-color .2s} .destino:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(13,39,71,.12);border-color:var(--celeste);text-decoration:none} .destino h3{margin:0 0 8px;font-family:var(--global-heading-font-family);font-weight:700;font-size:1.15rem;line-height:1.25;color:var(--ink)} .destino p{margin:0 0 16px;font-size:.92rem;line-height:1.6;color:var(--mute)} .destino .link-mono{margin-top:auto} /* --- Galeria estatica, sin JS --- */ .galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .galeria figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)} .galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .galeria figcaption{padding:11px 13px;font-size:.8rem;line-height:1.4;color:var(--mute)} .figura-ancha{margin:0} .figura-ancha img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border:1px solid var(--line);border-radius:12px} .figura-ancha figcaption{margin-top:10px;font-size:.84rem;line-height:1.45;color:var(--mute)} /* --- Formulario --- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:700px){.form-grid{grid-template-columns:1fr}} .f-campo{display:flex;flex-direction:column;gap:6px} .f-campo.full{grid-column:1/-1} .f-campo label{font-family:var(--global-heading-font-family);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} .f-campo label .req{color:var(--naranja)} .f-campo input,.f-campo select,.f-campo textarea{font-family:var(--global-body-font-family);font-weight:500;font-size:.95rem;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:6px;padding:12px 14px;width:100%;transition:border-color .18s ease,box-shadow .18s ease} .f-campo input:focus,.f-campo select:focus,.f-campo textarea:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(46,124,214,.18);outline:none} .f-campo textarea{min-height:150px;resize:vertical} .f-campo .hint{font-size:.8rem;line-height:1.45;color:var(--mute)} .consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:.86rem;line-height:1.5;color:var(--mute)} .consent input{margin-top:3px;flex:0 0 auto;width:16px;height:16px} .form-pie{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px} .form-pie .nota{font-size:.82rem;color:var(--mute)} /* --- Contacto lateral --- */ .contacto-lista{margin:0;padding:0;list-style:none} .contacto-lista li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;padding:13px 0;border-bottom:1px solid var(--line)} .contacto-lista li:last-child{border-bottom:0;padding-bottom:0} .contacto-lista .ic{width:20px;height:20px;color:var(--azul-link)} .contacto-lista .k{display:block;font-family:var(--global-heading-font-family);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} .contacto-lista .v{display:block;margin-top:2px;font-size:.95rem;line-height:1.45;color:var(--ink)} .contacto-lista a.v:hover{color:var(--azul-link)} .redes{display:flex;gap:10px;flex-wrap:wrap} .redes a{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:var(--white);transition:border-color .18s ease,transform .22s cubic-bezier(.22,1,.36,1)} .redes a:hover{border-color:var(--ink);transform:translateY(-2px)} .redes img,.redes svg{width:20px;height:20px;display:block} /* --- Prosa de articulo --- */ .prose{font-size:1.04rem;line-height:1.75;color:var(--ink);max-width:68ch} .prose>*+*{margin-top:1.15em} .prose h2{font-family:var(--global-heading-font-family);font-weight:800;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.2;letter-spacing:-.02em;margin-top:2em;scroll-margin-top:92px} .prose h3{font-family:var(--global-heading-font-family);font-weight:700;font-size:1.12rem;line-height:1.3;margin-top:1.6em} .prose ul,.prose ol{padding-left:1.25em} .prose li+li{margin-top:.45em} .prose blockquote{margin:1.6em 0;border-left:3px solid var(--amarillo);padding:2px 0 2px 18px;color:var(--mute);font-size:1rem} .prose figure{margin:1.9em 0} .prose a{color:var(--azul-link);text-decoration:underline;text-underline-offset:2px} .prose strong{font-weight:600} .prose table{width:100%;border-collapse:collapse;font-size:.93rem} .prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)} .prose th{font-family:var(--global-heading-font-family);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)} .toc{position:sticky;top:96px;border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:var(--paper)} @media(max-width:900px){.toc{position:static}} .toc h4{margin:0 0 8px;font-family:var(--global-heading-font-family);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} .toc a{display:block;padding:6px 0;font-size:.9rem;line-height:1.4;color:var(--azul-link)} .toc a:hover{color:var(--ink);text-decoration:none} /* --- Marcador de dato pendiente. Se borra al cargar el contenido real. --- */ .campo{background:#FFF6DC;border-bottom:1px dashed var(--amarillo);padding:0 3px} .ruta-sec{display:inline-flex;align-items:center;gap:10px;margin-top:8px;font-family:var(--global-heading-font-family);font-weight:600;font-size:.72rem;letter-spacing:.04em;color:var(--mute)} .mapa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px} .mapa-doble{display:grid;grid-template-columns:1fr 1fr;gap:40px} .mapa-doble{grid-template-columns:1fr} .mapa-col{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:22px 24px} .mapa-col h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 2px;font-family:var(--global-heading-font-family);font-weight:700;font-size:1.05rem;line-height:1.3} .mapa-col h3 a{color:var(--ink)} .mapa-col h3 a:hover{color:var(--azul-link);text-decoration:none} .mapa-col .ruta{display:block;margin-bottom:14px;font-family:var(--global-heading-font-family);font-weight:600;font-size:.7rem;letter-spacing:.04em;color:var(--mute);word-break:break-word} .mapa-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .mapa-lista.sin-borde{border-top:0} .mapa-lista.sin-borde li:first-child a{padding-top:0} .mapa-lista li{border-bottom:1px solid var(--line)} .mapa-lista li:last-child{border-bottom:0} .mapa-lista a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;color:var(--azul-link)} .mapa-lista a:hover{color:var(--ink);text-decoration:none} .mapa-lista a:hover .slug{color:var(--azul-link)} .mapa-lista .t{display:block;font-size:.93rem;line-height:1.35} .mapa-lista .slug{display:block;margin-top:3px;font-family:var(--global-heading-font-family);font-weight:600;font-size:.67rem;letter-spacing:.03em;color:var(--mute);word-break:break-word} .pend{flex:0 0 auto;font-family:var(--global-heading-font-family);font-weight:700;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--naranja-deep);background:#FDEDE6;border:1px solid #F3CBBA;border-radius:4px;padding:3px 7px;white-space:nowrap} /* === Compatibilidad formulario plugin - referencia Levatek-Contacto.html === */ .pg-contacto .form-grid, .pg-contacto .wpforms-form, .pg-contacto .fluentform, .pg-contacto .gform_wrapper form, .pg-contacto .wpcf7-form, .pg-contacto form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media(max-width:720px){ .pg-contacto .form-grid, .pg-contacto .wpforms-form, .pg-contacto .fluentform, .pg-contacto .gform_wrapper form, .pg-contacto .wpcf7-form, .pg-contacto form { grid-template-columns: 1fr; } } .pg-contacto .f-campo, .pg-contacto .wpforms-field, .pg-contacto .ff-el-group, .pg-contacto .gfield, .pg-contacto .wpcf7-form-control-wrap { display: flex; flex-direction: column; gap: 6px; } .pg-contacto .f-campo.full, .pg-contacto .wpforms-field.full, .pg-contacto .ff-el-group.ff-el-full, .pg-contacto .gfield.full, .pg-contacto .wpcf7-form-control-wrap.full { grid-column: 1 / -1; } .pg-contacto .f-campo label, .pg-contacto .wpforms-field-label, .pg-contacto .ff-el-input--label label, .pg-contacto .gfield_label, .pg-contacto .wpcf7-form label { font-family: var(--global-heading-font-family); font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); } .pg-contacto .f-campo input, .pg-contacto .f-campo select, .pg-contacto .f-campo textarea, .pg-contacto .wpforms-field input, .pg-contacto .wpforms-field select, .pg-contacto .wpforms-field textarea, .pg-contacto .ff-el-form-control, .pg-contacto .gfield input, .pg-contacto .gfield select, .pg-contacto .gfield textarea, .pg-contacto .wpcf7-form-control { font-family: var(--global-body-font-family); font-weight: 500; font-size: .95rem; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; width: 100%; transition: border-color .18s ease, box-shadow .18s ease; } .pg-contacto .f-campo input:focus, .pg-contacto .f-campo select:focus, .pg-contacto .f-campo textarea:focus, .pg-contacto .wpforms-field input:focus, .pg-contacto .wpforms-field select:focus, .pg-contacto .wpforms-field textarea:focus, .pg-contacto .ff-el-form-control:focus, .pg-contacto .gfield input:focus, .pg-contacto .gfield select:focus, .pg-contacto .gfield textarea:focus, .pg-contacto .wpcf7-form-control:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(46,124,214,.18); outline: none; } .pg-contacto textarea { min-height: 150px; resize: vertical; } .pg-contacto .hint, .pg-contacto .wpforms-field-description, .pg-contacto .ff-el-hint, .pg-contacto .gfield_description { font-size: .8rem; line-height: 1.45; color: var(--mute); } .pg-contacto .consent, .pg-contacto .wpforms-field-checkbox, .pg-contacto .ff-el-group.ff-el-form-check, .pg-contacto .gfield_checkbox { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; line-height: 1.5; color: var(--mute); } .pg-contacto .form-pie, .pg-contacto .wpforms-submit-container, .pg-contacto .ff-el-group.ff-text-center, .pg-contacto .gform_footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; } .pg-contacto .btn-naranja, .pg-contacto .wpforms-submit, .pg-contacto .ff-btn-submit, .pg-contacto .gform_button, .pg-contacto .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--white); font-family: var(--global-heading-font-family); font-weight: 700; font-size: .9rem; padding: 14px 28px; border-radius: 6px; border: 1px solid var(--ink); transition: transform .25s, box-shadow .25s; cursor: pointer; } .pg-contacto .btn-naranja:hover, .pg-contacto .wpforms-submit:hover, .pg-contacto .ff-btn-submit:hover, .pg-contacto .gform_button:hover, .pg-contacto .wpcf7-submit:hover { background: var(--deep); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(13,39,71,.25); color: var(--white); text-decoration: none; } .pg-contacto .wpforms-field-container, .pg-contacto .ff-el-group:last-child { display: contents; } /* =================================================================== v1.1.0 - Clases que las plantillas usaban y no existían en la hoja. Antes de esto: las tarjetas del HUB no mostraban imagen (.plate sin regla) y la grilla del pilar no era una grilla (.hub-grid sin regla, sobre un en línea). =================================================================== */ /* Grilla de tarjetas de HUB, pilar y Quiénes somos */ .grid-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:20px;margin-top:28px} @media(max-width:640px){.grid-hub{grid-template-columns:1fr}} /* .block se usa tanto en
como en : sin display:block un enlace queda en línea y la tarjeta se descuadra. */ .block{display:block;color:inherit;text-decoration:none} a.block:hover{text-decoration:none} .block .chip{margin-bottom:8px} /* Hueco declarado para una imagen que falta. Tiene que parecer un hueco: rellenar con el logo del tema hacía que un vacío pareciera contenido. */ .img-pendiente{ display:flex;align-items:center;justify-content:center; padding:16px;text-align:center; background:repeating-linear-gradient(45deg,var(--paper),var(--paper) 10px,#E4EDF7 10px,#E4EDF7 20px); border:1px dashed var(--line); } .bg-deep .img-pendiente,.bg-deep2 .img-pendiente,.sol-right-new .img-pendiente,.slide-right .img-pendiente{ background:repeating-linear-gradient(45deg,#0C2440,#0C2440 10px,#123E6B 10px,#123E6B 20px); border-color:var(--line-dark); } .img-pendiente .campo{font-size:.78rem;line-height:1.4} /* Listas de artículos y barras de filtro de los archivos de CPT */ .res-list{display:block;border-top:1px solid var(--line)} .filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px} .filtros .chip{cursor:pointer} .filtros .chip.active{background:var(--ink);color:var(--white);border-color:var(--ink)} /* Bloque de preguntas de la ficha de caso */ .faq-list{display:block} /* Enlace de salto y texto solo para lectores de pantalla */ .screen-reader-text{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } .skip-link:focus{ position:fixed;top:8px;left:8px;z-index:100; width:auto;height:auto;clip:auto;margin:0; padding:10px 16px;background:var(--white);color:var(--ink); border:2px solid var(--ink);border-radius:6px;font-weight:700; } /* Celdas del panel de servicios/industrias: son operables con teclado */ .top-cell:focus-visible,.top-ind-cell:focus-visible,.pilar-item:focus-visible{ outline:2px solid var(--azul);outline-offset:-2px; } /* =================================================================== v1.3.0 — Cambios de diseño pedidos sobre el pilar de servicios, el menú de industrias y Quiénes somos. =================================================================== */ /* Titular de sección: tipografía de texto, más delgada que Syne. Se aplica a TODAS las cabeceras de sección del pilar; el Syne pesado queda para el H1. */ .pg-h2.ligera{ font-family:var(--global-body-font-family);font-weight:500; letter-spacing:-.01em;line-height:1.2; font-size:clamp(1.5rem,2.4vw,2.05rem); } /* C4 · «Qué hacemos» pasa de dos columnas a una sola con ancho de lectura. */ .prosa{max-width:72ch} /* Cabecera de sección: antetítulo, título y párrafo de apoyo, centrados y en una sola columna. La usan «Qué hacemos» y la grilla de servicios del pilar, para que dos secciones vecinas no hablen con dos voces distintas. Va como bloque propio y no como .sec-head: aquella es flex y su regla `.sec-head p{margin:0}` ganaba por especificidad al `margin:auto` del párrafo, que era justo lo que lo dejaba descentrado. */ .pg-cabecera{max-width:760px;margin:0 auto 34px;text-align:center} .pg-cabecera .antetitulo{justify-content:center} .pg-cabecera .pg-h2{margin:12px 0 0} .pg-cabecera-lead{ max-width:60ch;margin:16px auto 0; font-size:1rem;line-height:1.65;color:var(--mute); } /* El cuerpo largo se lee alineado a la izquierda aunque su cabecera esté centrada: prosa centrada a varias líneas es incómoda de leer. */ .pg-sec .prosa{margin-left:auto;margin-right:auto;text-align:left} /* C6 · Carrusel de líneas de servicio del pilar. Es una pieza secundaria dentro de la columna, no un hero: la imagen se topa a 180 px de alto para que la tarjeta entera no pase de unos 320 px. */ .serv-car{position:relative;margin-top:22px;max-width:440px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--white)} .serv-car-track{display:flex;transition:transform .55s cubic-bezier(.22,.61,.36,1);will-change:transform} .serv-car-slide{min-width:100%} .serv-car-slide img,.serv-car-slide .img-pendiente{ width:100%;height:180px;aspect-ratio:auto;object-fit:cover;display:block; } .serv-car-txt{padding:14px 16px} .serv-car-txt h3{font-family:var(--global-heading-font-family);font-size:1rem;line-height:1.25;margin:0 0 5px;color:var(--ink)} .serv-car-txt p{margin:0 0 12px;font-size:.85rem;line-height:1.5;color:var(--mute)} .serv-car-txt .btn-naranja{padding:9px 16px;font-size:.82rem} .serv-car-dots{display:flex;gap:6px;justify-content:center;padding:0 0 12px} .serv-car-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:background .2s,transform .2s} .serv-car-dot.active{background:var(--naranja);transform:scale(1.25)} @media(prefers-reduced-motion:reduce){.serv-car-track{transition:none}} /* La banda CTA del HUB llevaba su color y su altura en estilos en línea; al moverlos aquí el fondo configurable puede mandar sobre el color plano. */ .cta-band-hub{background:var(--deep);color:var(--white);padding:56px 0} .cta-band-hub .inner,.cta-band-hub > .container > div{align-items:center} /* C7 · La tarjeta que lleva a todos los servicios manda más que las hermanas. */ .hermano-cta{background:var(--naranja);border-color:var(--naranja)} .hermano-cta .t,.hermano-cta .d{color:var(--white)} .hermano-cta .d{opacity:.9} .hermano-cta:hover{background:var(--naranja-deep);border-color:var(--naranja-deep);text-decoration:none} /* C10 · Quiénes somos: texto seguido con ritmo de secciones, no rejilla. */ .prosa-larga{max-width:68ch;font-size:1.02rem;line-height:1.75;color:var(--ink)} .prosa-larga > *:first-child{margin-top:0} .prosa-larga h2{ font-family:var(--global-heading-font-family);font-weight:700; font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.15; margin:52px 0 14px;padding-top:26px;border-top:1px solid var(--line); } .prosa-larga h2:first-child{margin-top:0;padding-top:0;border-top:0} .prosa-larga h3{font-family:var(--global-heading-font-family);font-weight:700;font-size:1.15rem;margin:30px 0 8px} .prosa-larga p{margin:0 0 18px} .prosa-larga ul,.prosa-larga ol{margin:0 0 18px;padding-left:22px} .prosa-larga li{margin:0 0 8px} .prosa-larga img,.prosa-larga figure img{border-radius:6px} .prosa-larga figure{margin:26px 0} .prosa-larga figcaption{margin-top:8px;font-size:.85rem;color:var(--mute)} .prosa-larga blockquote{ margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid var(--naranja); font-size:1.08rem;line-height:1.6;color:var(--ink); } /* C10 · Enlace a las páginas que sí conservan URL propia (certificación AOC). */ .qs-enlaces{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:48px} .qs-enlace{ display:flex;flex-direction:column;gap:5px; background:var(--paper);border:1px solid var(--line);border-radius:6px; padding:18px 20px;text-decoration:none; transition:border-color .2s ease,transform .25s cubic-bezier(.22,1,.36,1); } .qs-enlace:hover{border-color:var(--azul);transform:translateY(-2px);text-decoration:none} .qs-enlace .t{font-family:var(--global-heading-font-family);font-weight:700;font-size:1.05rem;color:var(--ink)} .qs-enlace .d{font-size:.88rem;line-height:1.5;color:var(--mute)} .qs-enlace .link-mono{margin-top:4px} /* =================================================================== v1.4.0 — RESPONSIVE ------------------------------------------------------------------ El problema no era que faltaran media queries: era que los layouts vivían en style="grid-template-columns:…" dentro del PHP, y una media query no puede ganarle a un estilo en línea. Aquí abajo están todos, ya como clases, con un solo juego de cortes. Cortes, elegidos por los tamaños reales de 2026: 1080 se esconde la navegación del header (ya existía) 900 todo lo de dos columnas pasa a una 700 las rejillas de filtro bajan a dos columnas 480 iPhone 16 (393), Pro Max (440), Android típico (360-412) =================================================================== */ /* [hidden] tiene que ganarle a los display:grid/flex de abajo. */ [hidden]{display:none!important} /* --- Hero --------------------------------------------------------- Todo esto estaba en style="" dentro del PHP, incluido min-height:90vh, y por eso ninguna media query podia reducir el hero en un movil. */ .hero{position:relative;min-height:88svh;background:var(--deep);overflow:hidden;display:flex;align-items:center} .hero-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 8%,#0E2A4A 0%,#08192E 45%,#040D19 100%)} .hero > #hero-mesh{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1} .hero .velo{ position:absolute;inset:0;z-index:2; background:linear-gradient(90deg,rgba(4,13,25,.88) 0%,rgba(4,13,25,.66) 38%,rgba(4,13,25,.18) 70%,rgba(4,13,25,0) 100%); } .hero .content h1{ font-family:var(--global-heading-font-family);font-weight:700; font-size:clamp(2.1rem,4.8vw,3.9rem);line-height:1.02; color:var(--white);margin:14px 0 16px;letter-spacing:-.03em; } .hero .content h2{ font-family:var(--global-body-font-family);font-weight:500; font-size:1.18rem;line-height:1.5;color:#CFE0F2;margin:0 0 28px;max-width:660px; } .hero-acciones{display:flex;gap:12px;flex-wrap:wrap} .hero-acciones .btn-naranja{ display:inline-flex;align-items:center;justify-content:center; background:var(--ink);color:var(--white);border:1px solid var(--ink); font-family:var(--global-heading-font-family);font-weight:700;font-size:.9rem; padding:12px 20px;border-radius:6px; } .hero-acciones .btn-ghost-clear{ display:inline-flex;align-items:center;padding:11px 18px; border:1px solid rgba(255,255,255,.35);border-radius:6px; font-weight:600;font-size:.9rem;color:var(--white);background:transparent; } .scroll-ind i{display:block;width:1px;height:24px;background:var(--celeste);opacity:.6} /* --- Bloques de dos columnas (portada, contacto, recurso) --------- */ .dos-col{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start} .dos-col-caso{grid-template-columns:1.7fr .9fr} /* Una pista 1fr no baja del ancho minimo de su contenido, y un carrusel flex con varias diapositivas al 100% tiene un minimo enorme: sin esto la columna se niega a encoger y estira la pagina entera (el «grid blowout»). */ .dos-col > *,.split > *,.hermanos > *,.panel-serv > *, .sol-panel-new > *,.sol-panel-ind > *,.cloud-grid > *,.faq-layout > *{min-width:0} .serv-car,.lev-carousel,.carousel,.cli-viewport{min-width:0;max-width:100%} /* --- Panel de servicios e industrias de la portada ---------------- */ .panel-serv{ display:grid;grid-template-columns:200px 1fr; border:1px solid var(--line);border-radius:6px;overflow:hidden;min-height:520px; } .panel-serv-tabs{background:var(--paper);border-right:1px solid var(--line);padding:12px 0} .panel-serv-cuerpo{display:flex;flex-direction:column;min-width:0} .top-pilar-filter,.top-industria-filter{ display:grid;border-bottom:1px solid var(--line);background:var(--white); } .top-pilar-filter{grid-template-columns:repeat(4,1fr)} .top-industria-filter{grid-template-columns:repeat(3,1fr)} .sol-panel-new,.sol-panel-ind{ flex:1;display:grid;grid-template-columns:1fr 1fr; background:var(--deep);min-height:400px; } /* =================== 1080 px ====================================== */ @media(max-width:1080px){ .mega-inner,.mega-inner-2{grid-template-columns:1fr} .mega-col{border-right:0;padding:0 20px} } /* =================== 900 px ======================================= */ @media(max-width:900px){ .dos-col{grid-template-columns:1fr;gap:32px} .split,.split.equal{grid-template-columns:1fr;gap:32px} /* El carrusel de «Quiénes somos» se va debajo del texto, no al lado. */ .dos-col > *{min-width:0} .panel-serv{grid-template-columns:1fr;min-height:0} .panel-serv-tabs{ display:flex;border-right:0;border-bottom:1px solid var(--line);padding:0; } .side-tab{width:auto;flex:1;text-align:center;border-left:0;border-bottom:3px solid transparent} .side-tab.active{border-left-color:transparent;border-bottom-color:var(--ink)} .sol-panel-new,.sol-panel-ind{grid-template-columns:1fr;min-height:0} .sol-right-new img,.sol-panel-ind img, .sol-right-new .img-pendiente,.sol-panel-ind .img-pendiente{min-height:0!important;height:240px} .serv-car{max-width:none} .pg-cabecera{margin-bottom:26px} } /* =================== 700 px ======================================= */ @media(max-width:700px){ section{padding:56px 0} .pg-sec{padding:48px 0} .top-pilar-filter,.top-industria-filter{grid-template-columns:repeat(2,1fr)} .cards3{grid-template-columns:1fr} .grid-hub,.hub-grid{grid-template-columns:1fr} .qs-enlaces{grid-template-columns:1fr} .mega-inds{grid-template-columns:1fr} .sec-head{flex-direction:column;align-items:flex-start;gap:14px} } /* =================== 480 px — iPhone y Android ==================== */ @media(max-width:480px){ .container{padding:0 18px} /* Hero: sin columna fija ya no desborda; aquí sólo se ajusta el aire. */ .hero{min-height:0} .hero .content{padding:112px 18px 64px} .hero .content h1{font-size:clamp(1.9rem,8.4vw,2.5rem)} .hero .content h2{font-size:1.02rem} .scroll-ind{display:none} .top-pilar-filter,.top-industria-filter{grid-template-columns:1fr} .top-cell,.top-ind-cell{border-right:0} .sol-left-new,.sol-panel-ind > div:first-child{padding:24px 20px} .sol-right-new img,.sol-panel-ind img, .sol-right-new .img-pendiente,.sol-panel-ind .img-pendiente{height:190px} .side-tab{font-size:.9rem;padding:12px 8px} /* Tecnologías: la imagen deja de ir al lado del texto. */ .slide{grid-template-columns:1fr} .slide-left{padding:24px 20px} .slide-right{padding:0;grid-template-columns:1fr} #tecnologias .slide-right{position:relative;height:200px} /* Levatek Cloud: el visor cabe en la columna. */ .cloud-grid{gap:28px} .visor-bar span{font-size:.6rem;letter-spacing:.06em} /* Servicios a medida: los pasos ocupan todo el ancho. */ #servicios-medida .dos-col{gap:26px} .res-row{grid-template-columns:1fr;gap:4px} .faq-layout{gap:24px} .cta-band .inner{flex-direction:column;align-items:flex-start} .footer-top{gap:26px} .prosa-larga{font-size:1rem} .prosa-larga h2{margin-top:38px;padding-top:22px} } /* Ninguna imagen ni tabla debe poder ensanchar la página. */ img,svg,video,canvas{max-width:100%} .tablewrap,.pg-body table{overflow-x:auto} /* ========================================================================== v1.8.0 — TIPOGRAFÍA UNIFICADA, BLOQUE MULTIMEDIA Y FICHA HORIZONTAL ========================================================================== */ /* --- 1. Una sola voz para los titulares ---------------------------------- Tres problemas medidos en la misma página de servicio: a) el H1 del hero interior pesaba 800 y el de la portada 700. Misma familia, pero el 800 se lee como otra letra. b) `.sec-head h2` (0,1,1) le ganaba por especificidad a `.pg-h2` (0,1,0), así que dos H2 con la MISMA clase salían uno en 800/1.12 y otro en 700/1.15. c) «Otros servicios de…» era un

vistiendo `.pg-h3`: 20px contra 25.6px. Se iguala el peso del hero y se declara explícitamente quién gana. */ .pg-hero h1{font-weight:700} .pg-h2, .sec-head h2.pg-h2, .pg-cabecera .pg-h2{ font-family:var(--global-heading-font-family); font-weight:800; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.12; letter-spacing:-.02em; } /* El tratamiento ligero manda sobre cualquiera de los tres selectores. */ .pg-h2.ligera, .sec-head h2.pg-h2.ligera, .pg-cabecera .pg-h2.ligera{ font-family:var(--global-body-font-family); font-weight:500; font-size:clamp(1.5rem,2.4vw,2.05rem); line-height:1.2; letter-spacing:-.01em; } /* --- 2. Columna multimedia ----------------------------------------------- Ocupa el sitio que antes tenía la ficha técnica: a la derecha del texto y con su mismo ancho. Video primero, imágenes después, miniaturas debajo. */ .split-media{grid-template-columns:1.15fr .85fr} .col-media{min-width:0} .serv-media{position:sticky;top:96px} .media-escena{ position:relative;aspect-ratio:16/9;width:100%; border:1px solid var(--line);border-radius:12px;overflow:hidden; background:var(--paper); } .media-slide{position:absolute;inset:0} .media-slide:not(.is-active){display:none} .media-slide img, .media-slide video, .media-slide iframe{ width:100%;height:100%;display:block;border:0;object-fit:cover; } /* Portada del video: es un botón, no un enlace, porque no navega a ninguna parte. El iframe lo inserta levatek.js al primer clic. */ .media-portada{ position:absolute;inset:0;width:100%;height:100%;padding:0;border:0; background:var(--deep);cursor:pointer;display:block; } .media-portada img{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .3s} .media-portada:hover img{transform:scale(1.03);opacity:.85} .media-sin-portada{position:absolute;inset:0;background:linear-gradient(135deg,#0E2A4A,#06182E)} .media-play{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:62px;height:62px;border-radius:50%; background:var(--naranja);color:var(--white); display:flex;align-items:center;justify-content:center; box-shadow:0 8px 28px rgba(6,24,46,.45); transition:transform .25s cubic-bezier(.22,1,.36,1); } .media-portada:hover .media-play{transform:translate(-50%,-50%) scale(1.08)} .media-play svg{margin-left:3px} /* Miniaturas */ .media-tiras{ display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px;margin-top:10px; } .media-tira{ position:relative;padding:0;border:1px solid var(--line);border-radius:6px; overflow:hidden;background:var(--paper);cursor:pointer;aspect-ratio:16/9; transition:border-color .2s ease,transform .25s cubic-bezier(.22,1,.36,1); } .media-tira img{width:100%;height:100%;object-fit:cover;display:block} .media-tira:hover{transform:translateY(-2px)} .media-tira.is-active{border-color:var(--naranja);border-width:2px} .tira-play{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:24px;height:24px;border-radius:50%; background:rgba(6,24,46,.72);color:var(--white); display:flex;align-items:center;justify-content:center; } .tira-play svg{margin-left:2px} /* --- 3. Ficha técnica en horizontal -------------------------------------- Bajó de la columna lateral a una franja bajo el texto. Las filas se reparten en columnas automáticas: caben las que quepan y el resto salta de línea. */ .ficha-horizontal{ background:var(--paper);border:1px solid var(--line);border-radius:12px; padding:26px 28px; } .ficha-h{ margin:0 0 18px;font-family:var(--global-heading-font-family);font-weight:700; font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink); } .ficha-tiras{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:20px 30px;margin:0; } .ficha-tira{min-width:0} .ficha-tira dt{ font-family:var(--global-heading-font-family);font-weight:700;font-size:.68rem; letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0; } .ficha-tira dd{margin:6px 0 0;font-size:.94rem;line-height:1.5;color:var(--ink)} .ficha-horizontal .rule{height:1px;background:var(--line);margin:24px 0} .ficha-horizontal .lista-check.dos{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} /* --- 4. Responsive del bloque multimedia ---------------------------------- */ @media(max-width:1080px){ .split-media{grid-template-columns:1.05fr .95fr;gap:28px 36px} } @media(max-width:900px){ /* Una sola columna: el texto arriba, el multimedia debajo y a ancho completo. El sticky se desactiva, porque en columna única no tiene contra qué fijarse. */ .split-media{grid-template-columns:minmax(0,1fr)} .serv-media{position:static;top:auto;margin-top:28px} .media-tiras{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))} .ficha-horizontal{padding:22px} .ficha-tiras{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px 24px} } @media(max-width:700px){ .media-escena{border-radius:8px} .media-play{width:52px;height:52px} .media-play svg{width:22px;height:22px} .media-tiras{grid-template-columns:repeat(4,1fr);gap:6px} .ficha-tiras{grid-template-columns:1fr 1fr;gap:16px 20px} } @media(max-width:480px){ .ficha-horizontal{padding:18px 16px} .ficha-tiras{grid-template-columns:1fr} .media-tiras{grid-template-columns:repeat(4,1fr)} .media-play{width:46px;height:46px} } /* ========================================================================== v1.9.0 — PÁGINA DE TECNOLOGÍA Explica, no vende. Tipografía heredada del sistema: H1 en Syne 700 y todos los titulares de sección en .pg-h2.ligera, igual que pilar y servicio. El naranjo queda para lo que pide atención: enlaces, destacados y el contraste del bloque «no conviene». ========================================================================== */ /* --- Hero: la sigla desplegada bajo el título ----------------------------- */ .tec-sigla{ margin:0 0 14px;font-family:var(--global-heading-font-family);font-weight:600; font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;color:var(--naranja); } /* --- Enlace que pide atención -------------------------------------------- */ .enlace-naranja{ color:var(--naranja-deep);font-weight:600; border-bottom:1px solid rgba(242,89,43,.32);transition:border-color .2s ease,color .2s ease; } .enlace-naranja:hover{color:var(--naranja);border-bottom-color:var(--naranja);text-decoration:none} /* --- 2. Definición: columna de lectura, centrada -------------------------- */ .tec-definicion{max-width:760px;margin:0 auto} .tec-definicion .prosa-larga{max-width:none} .tec-definicion .pg-h2{margin:12px 0 22px} /* --- 3. Principio de funcionamiento --------------------------------------- */ .tec-diagrama{margin:0 0 40px;max-width:1000px;margin-inline:auto} .tec-diagrama img{ width:100%;height:auto;display:block;border-radius:12px; border:1px solid var(--line);background:var(--white); } .tec-diagrama figcaption{ margin-top:12px;text-align:center;font-size:.86rem;color:var(--mute);line-height:1.5; } .tec-diagrama-hueco{ aspect-ratio:16/9;display:flex;align-items:center;justify-content:center; text-align:center;padding:24px;border-radius:12px; } /* Los pasos del principio: numerados, en fila, sin viñeta de lista. */ .tec-pasos{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px; } .tec-paso{ min-width:0;background:var(--white);border:1px solid var(--line); border-radius:12px;padding:22px;position:relative; } .tec-paso .n{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:8px;margin-bottom:12px; background:var(--naranja);color:var(--white); font-family:var(--global-heading-font-family);font-weight:700;font-size:.82rem; } .tec-paso h3{ margin:0 0 8px;font-family:var(--global-heading-font-family);font-weight:700; font-size:1.02rem;line-height:1.25;color:var(--ink); } .tec-paso p{margin:0;font-size:.92rem;line-height:1.6;color:var(--mute)} /* --- 4 y 6. Tablas técnicas ----------------------------------------------- */ .tec-intro-bloque{max-width:70ch;margin:0 0 24px} .tec-tabla{width:100%;border-collapse:collapse;font-size:.94rem} .tec-tabla thead th{ text-align:left;padding:12px 16px; font-family:var(--global-heading-font-family);font-weight:700;font-size:.68rem; letter-spacing:.1em;text-transform:uppercase;color:var(--mute); border-bottom:2px solid var(--line); } .tec-tabla tbody th{ text-align:left;padding:16px;vertical-align:top;font-weight:600;color:var(--ink); border-bottom:1px solid var(--line);width:28%; } .tec-tabla tbody td{ padding:16px;vertical-align:top;color:var(--mute);line-height:1.55; border-bottom:1px solid var(--line); } .tec-tabla tbody tr:hover{background:var(--paper)} /* --- 5. Conviene / no conviene -------------------------------------------- */ .tec-criterio{display:grid;grid-template-columns:1fr 1fr;gap:24px} .tec-col{ min-width:0;background:var(--white);border:1px solid var(--line); border-radius:12px;padding:26px 28px;border-top:3px solid var(--azul); } .tec-col.tec-no{border-top-color:var(--naranja)} .tec-col-h{ margin:0 0 16px;font-family:var(--global-heading-font-family);font-weight:700; font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink); } .tec-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px} .tec-col li{ display:flex;gap:10px;font-size:.95rem;line-height:1.55;color:var(--ink); } .tec-col li::before{content:'\2192';color:var(--azul);flex:0 0 auto;font-weight:700} .tec-col.tec-no li::before{content:'\00D7';color:var(--naranja)} /* --- 8. Referencias -------------------------------------------------------- */ .tec-referencias{max-width:820px;margin:0 auto} .tec-refs{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px} .tec-refs li{ padding-left:18px;position:relative;font-size:.95rem;line-height:1.6; border-left:2px solid var(--line); } .tec-refs .ref-fuente{font-weight:600;color:var(--ink)} .tec-refs .ref-nota{display:block;margin-top:3px;font-size:.88rem;color:var(--mute)} /* --- Responsive ----------------------------------------------------------- */ @media(max-width:900px){ .tec-criterio{grid-template-columns:1fr;gap:18px} .tec-pasos{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px} .tec-paso{padding:18px} .tec-col{padding:22px} .tec-diagrama{margin-bottom:32px} } @media(max-width:700px){ /* Las tablas de tres columnas no caben en un teléfono: cada fila pasa a ser una ficha apilada, con la etiqueta de la columna delante del valor. */ .tec-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .tec-tabla, .tec-tabla tbody, .tec-tabla tr, .tec-tabla th, .tec-tabla td{display:block;width:auto} .tec-tabla tbody tr{ border:1px solid var(--line);border-radius:10px; padding:14px 16px;margin-bottom:12px;background:var(--white); } .tec-tabla tbody tr:hover{background:var(--white)} .tec-tabla tbody th{ padding:0 0 8px;border:0;width:auto;font-size:1rem; } .tec-tabla tbody td{padding:0 0 8px;border:0} .tec-tabla tbody td:last-child{padding-bottom:0} .tec-tabla tbody td::before{ content:attr(data-col);display:block;margin-bottom:2px; font-family:var(--global-heading-font-family);font-weight:700;font-size:.62rem; letter-spacing:.1em;text-transform:uppercase;color:var(--mute); } .tec-pasos{grid-template-columns:1fr;gap:12px} .tec-sigla{font-size:.78rem} } @media(max-width:480px){ .tec-col{padding:18px 16px} .tec-paso{padding:16px} .tec-diagrama-hueco{aspect-ratio:4/3} } /* ========================================================================== v1.10.0 — PÁGINA DE INDUSTRIA Reusa el sistema de titulares, la tabla técnica y los chips. Lo propio es el bloque de desafíos: problema arriba, respuesta debajo, con el problema marcado en naranjo porque es donde el lector se reconoce. ========================================================================== */ .ind-contexto{max-width:760px;margin:0 auto} .ind-contexto .prosa-larga{max-width:none} .ind-contexto .pg-h2{margin:12px 0 22px} /* --- Desafíos: problema → respuesta -------------------------------------- */ .ind-desafios{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px; } .ind-desafio{ min-width:0;background:var(--white);border:1px solid var(--line); border-radius:12px;padding:26px 28px;border-left:3px solid var(--naranja); } .ind-problema{ margin:0 0 12px;font-family:var(--global-heading-font-family);font-weight:700; font-size:1.05rem;line-height:1.3;color:var(--ink); } .ind-problema::before{ content:'';display:block;width:26px;height:2px;background:var(--naranja);margin-bottom:12px; } .ind-respuesta{margin:0;font-size:.95rem;line-height:1.65;color:var(--mute)} /* --- Tecnologías derivadas del sector ------------------------------------ */ .ind-tecs{ border-top:1px solid var(--line);padding-top:26px; } .ind-tecs-h{ margin:0 0 16px;font-family:var(--global-heading-font-family);font-weight:700; font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute); } /* --- Responsive ---------------------------------------------------------- */ @media(max-width:900px){ .ind-desafios{grid-template-columns:1fr;gap:16px} .ind-desafio{padding:22px} } @media(max-width:480px){ .ind-desafio{padding:18px 16px} .ind-tecs{padding-top:20px} } /* ========================================================================== v1.13.0 — AJUSTES DE INDUSTRIA ========================================================================== */ /* La lista de servicios del sector va sólo con el título: con más de veinte servicios, la bajada la convertía en un muro de texto. Y el realce al pasar el cursor es naranjo, no azul, porque aquí la tarjeta es la acción. */ .hermanos-titulos{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} .hermanos-titulos .hermano{ padding:16px 18px;justify-content:center;min-height:60px; transition:border-color .2s ease,background .2s ease,transform .25s cubic-bezier(.22,1,.36,1); } .hermanos-titulos .hermano .d{display:none} .hermanos-titulos .hermano:hover{ border-color:var(--naranja);background:var(--naranja);transform:translateY(-2px); } .hermanos-titulos .hermano:hover .t{color:var(--white)} .hermanos-titulos .hermano .t{transition:color .2s ease} @media(max-width:480px){ .hermanos-titulos{grid-template-columns:1fr} } /* ========================================================================== v1.14.0 — MOSAICO DE «QUIÉNES SOMOS» Rompe la columna de lectura a ancho completo, entre los párrafos de apertura y la primera sección. La composición cambia según cuántas imágenes haya: con pocas se reparte el ancho, con varias aparece una principal y el resto la acompaña. Nada de rejillas uniformes, que es lo que la vuelve aburrida. ========================================================================== */ .qs-mosaico{ display:grid;gap:14px;margin:44px 0 48px; grid-template-columns:repeat(4,1fr);grid-auto-rows:172px; } .qs-mosaico figure{ margin:0;position:relative;overflow:hidden;border-radius:12px; background:var(--paper);border:1px solid var(--line); } .qs-mosaico img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s cubic-bezier(.22,1,.36,1)} .qs-mosaico figure:hover img{transform:scale(1.04)} .qs-mosaico figcaption{ position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px; background:linear-gradient(180deg,rgba(6,24,46,0) 0%,rgba(6,24,46,.82) 100%); color:var(--white);font-family:var(--global-heading-font-family);font-weight:600; font-size:.72rem;letter-spacing:.03em;line-height:1.35; } /* 1 — una sola banda ancha */ .qs-mosaico[data-n="1"] figure{grid-column:span 4;grid-row:span 2} /* 2 — dos mitades */ .qs-mosaico[data-n="2"] figure{grid-column:span 2;grid-row:span 2} /* 3 — una principal y dos apiladas al costado */ .qs-mosaico[data-n="3"] figure:nth-child(1){grid-column:span 2;grid-row:span 2} .qs-mosaico[data-n="3"] figure:nth-child(n+2){grid-column:span 2} /* 4 — principal, una ancha arriba y dos cuadradas abajo */ .qs-mosaico[data-n="4"] figure:nth-child(1){grid-column:span 2;grid-row:span 2} .qs-mosaico[data-n="4"] figure:nth-child(2){grid-column:span 2} /* 5 — principal y cuatro alrededor */ .qs-mosaico[data-n="5"] figure:nth-child(1){grid-column:span 2;grid-row:span 2} /* 6 o más — principal ancha y el resto en tira */ .qs-mosaico[data-n="6"]{grid-auto-rows:150px} .qs-mosaico[data-n="6"] figure:nth-child(1){grid-column:span 2;grid-row:span 2} /* Hueco declarado mientras no haya imágenes cargadas */ .qs-mosaico-hueco{ margin:44px 0 48px;min-height:280px;border-radius:12px; display:flex;align-items:center;justify-content:center;text-align:center;padding:24px; } @media(max-width:900px){ .qs-mosaico{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:12px;margin:36px 0 40px} .qs-mosaico figure{grid-column:span 1 !important;grid-row:span 1 !important} .qs-mosaico figure:nth-child(1){grid-column:span 2 !important;grid-row:span 2 !important} } @media(max-width:560px){ .qs-mosaico{grid-template-columns:1fr;grid-auto-rows:auto;gap:10px} .qs-mosaico figure{grid-column:span 1 !important;grid-row:span 1 !important;aspect-ratio:16/10} .qs-mosaico figure:nth-child(1){grid-column:span 1 !important;grid-row:span 1 !important;aspect-ratio:4/3} .qs-mosaico-hueco{min-height:200px} } /* ========================================================================== v1.15.0 — SECCIONES DE «QUIÉNES SOMOS» EN BANDAS El texto dejaba de leerse a la mitad: cuatro secciones seguidas en una sola columna son un bloque muy largo. Ahora cada sección es una banda de texto e imagen, alternando el lado. Sin imagen vuelve a ser columna de lectura. ========================================================================== */ .qs-secciones{display:grid;gap:64px;margin-top:8px} .qs-bloque{display:grid;gap:20px} .qs-bloque .prosa-larga{max-width:none} /* El separador de arriba lo pone la banda, no el H2: dentro de dos columnas una línea a media página se ve cortada. */ .qs-bloque .prosa-larga h2{border-top:0;margin-top:0;padding-top:0} .qs-bloque > .qs-texto{min-width:0} .qs-bloque.con-foto{ grid-template-columns:1.04fr .96fr;gap:28px 52px;align-items:center; } .qs-bloque.con-foto.invertido .qs-texto{order:2} .qs-bloque.con-foto.invertido .qs-foto{order:1} .qs-foto{ margin:0;position:relative;overflow:hidden;border-radius:12px; border:1px solid var(--line);background:var(--paper);min-width:0; } .qs-foto img{ width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:4/3; transition:transform .6s cubic-bezier(.22,1,.36,1); } .qs-foto:hover img{transform:scale(1.04)} .qs-foto figcaption{ position:absolute;left:0;right:0;bottom:0;padding:24px 16px 12px; background:linear-gradient(180deg,rgba(6,24,46,0) 0%,rgba(6,24,46,.82) 100%); color:var(--white);font-family:var(--global-heading-font-family);font-weight:600; font-size:.72rem;letter-spacing:.03em;line-height:1.35; } /* Sin imagen: la sección conserva el ancho de lectura y su línea divisoria. */ .qs-bloque:not(.con-foto) .prosa-larga{max-width:68ch} .qs-bloque:not(.con-foto) .prosa-larga h2{ border-top:1px solid var(--line);padding-top:34px;margin-top:0; } @media(max-width:900px){ .qs-secciones{gap:44px} .qs-bloque.con-foto{grid-template-columns:minmax(0,1fr);gap:20px} /* En una columna el orden vuelve al natural: primero el texto. */ .qs-bloque.con-foto.invertido .qs-texto{order:0} .qs-bloque.con-foto.invertido .qs-foto{order:0} .qs-foto img{aspect-ratio:16/9} } @media(max-width:560px){ .qs-secciones{gap:36px} .qs-foto{border-radius:8px} } /* ========================================================================== v1.17.0 — CASOS DE ÉXITO ========================================================================== */ /* --- Botón naranjo de verdad --------------------------------------------- `.btn-naranja` se llama así pero está pintado con --ink, que es azul: es el botón principal sobre fondo claro y así debe seguir. Este modificador es para cuando se pide el naranjo de la marca. */ .btn-naranja.solido{background:var(--naranja);border-color:var(--naranja);color:var(--white)} .btn-naranja.solido:hover{background:var(--naranja-deep);border-color:var(--naranja-deep);color:var(--white)} /* --- Tarjeta de caso en la portada --------------------------------------- Imagen y título, nada más. El botón se enciende al pasar el cursor por la tarjeta, que es toda ella el enlace. */ .case-card .btn-saber{ display:inline-flex;align-items:center;gap:8px;margin-top:14px; padding:9px 16px;border-radius:6px; border:1px solid var(--line);background:var(--white);color:var(--ink); font-family:var(--global-heading-font-family);font-weight:700;font-size:.74rem; letter-spacing:.08em;text-transform:uppercase; transition:background .2s ease,border-color .2s ease,color .2s ease; } .case-card .btn-saber .arr{transition:transform .25s cubic-bezier(.22,1,.36,1)} .case-card:hover .btn-saber{ background:var(--naranja);border-color:var(--naranja);color:var(--white); } .case-card:hover .btn-saber .arr{transform:translateX(4px)} /* --- Los campos pendientes son para quien edita, no para quien visita ----- `.campo` marca contenido que falta. En una página publicada un visitante no tiene por qué ver «metodos» resaltado en amarillo. Se muestra sólo cuando hay sesión iniciada con permisos de edición. */ .campo{display:none} .lev-editor .campo{display:inline;background:#FFF6DC;border-bottom:1px dashed var(--amarillo);padding:0 3px} /* ========================================================================== v1.18.0 — DESFILE DE LOGOS DE CLIENTES Una sola linea que cruza la pantalla. Sin marco, sin caja y sin enlace: el logo acredita, no navega. ========================================================================== */ .cli-viewport{ overflow:hidden;width:100%; /* Los extremos se desvanecen: el logo entra y sale en vez de aparecer cortado contra el borde. */ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%); } .cli-track{ display:flex;width:max-content; animation:cli-desfile var(--cli-dur,24s) linear infinite; will-change:transform; } /* Se desplaza exactamente la mitad, que es una vuelta completa de la fila. Por eso la separacion va en margin y no en gap: con gap, la mitad del ancho no coincide con una vuelta y el empalme daria un salto. */ @keyframes cli-desfile{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } .cli-cell{ flex:0 0 auto;width:180px;margin-right:20px;height:84px; display:flex;align-items:center;justify-content:center; /* Gris para que 19 paletas distintas se lean como un conjunto. */ filter:grayscale(1);opacity:.66; } .cli-cell img{max-width:100%;max-height:100%;width:auto;height:auto;display:block} /* Al pasar el cursor se detiene y recupera el color: deja leer un logo sin perseguirlo, y no promete un clic que no existe. */ .cli-viewport:hover .cli-track{animation-play-state:paused} .cli-viewport:hover .cli-cell{filter:grayscale(0);opacity:1} .cli-cell{transition:filter .3s ease,opacity .3s ease} @media(max-width:700px){ .cli-cell{width:140px;margin-right:16px;height:68px} .cli-viewport{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%); } } /* Quien pidió menos movimiento ve la fila quieta. */ @media(prefers-reduced-motion:reduce){ .cli-track{animation:none} .cli-viewport{overflow-x:auto} }