/* Home: la celda del mosaico se abre y es el cartel; el muro arma la lista; los datos se leen en grande. */
.hero__st{position:relative;height:100vh;min-height:560px;overflow:hidden;background:var(--black);color:#fff}
.ini__i{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;will-change:transform}
.ini__s{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,7,10,.88),rgba(5,7,10,.18) 56%,rgba(5,7,10,.5))}
.hero .hero__t{position:absolute;left:0;right:0;bottom:clamp(24px,5.4vh,58px);padding:0}
.hero .hero__t.wrap{padding-inline:var(--gut)}
/* segunda sección: el mosaico empieza debajo del menú y va alineado con el logo y el botón */
.mos__st{position:relative;height:100vh;min-height:560px;overflow:hidden;background:var(--black);color:#fff;display:flex;flex-direction:column;padding-top:88px}
.mos__t{flex:none;padding-top:clamp(14px,2.6vh,26px);padding-bottom:clamp(14px,3vh,30px)}
.mos__t h2{font-size:var(--h2);line-height:1;text-wrap:initial}
.mo{flex:1;min-height:0;width:calc(100% - 2*var(--gut));max-width:calc(var(--maxw) - 2*var(--gut));margin-inline:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3px;will-change:transform}
.c{position:relative;overflow:hidden;background:var(--panel);will-change:clip-path}
.c img{position:absolute;left:0;top:-10%;width:100%;height:120%;max-width:none;object-fit:cover}
.c .cu{left:13%;top:7%;width:74%;height:72%;object-fit:contain;will-change:transform}
.cp{position:absolute;left:10px;right:10px;bottom:8px;font-size:15.5px;line-height:1.15;font-weight:400;color:var(--black)}
.c--a{grid-column:1/3;grid-row:1/3}
.c--b{grid-column:3;grid-row:1;background:var(--cyan)}
.c--b .cu{top:17%;height:62%}
.c--c{grid-column:4/5;grid-row:1}
.c--d{grid-column:5/7;grid-row:1}
.c--e{grid-column:3;grid-row:2;background:var(--orange)}
.c--f{grid-column:4/6;grid-row:2}
.c--g{grid-column:6;grid-row:2;background:var(--steel)}
.hero h1{font-size:var(--h1);line-height:.98;text-wrap:initial}
.hero__r{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:clamp(10px,2vh,20px)}
.hero__r p{font-size:clamp(17px,1.35vw,21px);line-height:1.35;max-width:46ch}
.acts{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* cartel fijo */
.po__st{position:relative;height:100vh;min-height:560px;overflow:hidden;background:var(--black);color:#fff}
.sc{position:absolute;inset:0;overflow:hidden;will-change:clip-path}
.sc img{width:100%;height:100%;max-width:none;object-fit:cover;will-change:transform}
.po__s{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,7,10,.78),rgba(5,7,10,.12) 52%,rgba(5,7,10,.3))}
.po__t{position:absolute;left:0;right:0;bottom:clamp(26px,6vh,62px)}
.po__h{font-size:clamp(46px,min(8.2vw,17vh),168px);line-height:1;text-wrap:initial}
.po__w{position:relative;display:block;height:1.12em;overflow:hidden}
.po__w>span{position:absolute;left:0;top:0;display:block;white-space:nowrap}
.po__c{display:flex;gap:clamp(4px,1.1vw,18px);flex-wrap:wrap;margin:clamp(6px,1.2vh,12px) 0 0 -10px;font-size:clamp(16px,1.2vw,19px);font-weight:400}
.po__c a{display:block;padding:8px 10px;color:#DCE4E9;transition:color .16s var(--ease)}
.po__c .on a{color:var(--cyan)}
@media(hover:hover) and (pointer:fine){.po__c a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}}
/* muro */
.rest{background:#fff}
.rng{background:var(--black);color:#fff;padding:clamp(80px,13vh,150px) 0 clamp(60px,9vh,110px)}
.rng__h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(18px,3vh,30px)}
.rng h2{font-size:var(--h2)}
.rng__p{margin-top:8px;font-size:clamp(17px,1.3vw,20px)}
.rng__c{margin-top:clamp(16px,3vh,28px)}
.ch-s{display:flex;gap:6px;flex-wrap:wrap}
.ch-s button{border:0;background:var(--panel);color:#fff;font:400 16px/1 var(--body);padding:12px 16px;border-radius:22px;min-height:44px;cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease)}
.ch-s button[aria-pressed=true]{background:var(--cyan);color:var(--black)}
.wl{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;grid-auto-flow:dense}
.tl{position:relative;aspect-ratio:1/1.12;background:var(--panel);overflow:hidden;color:#fff;transition:background-color .18s var(--ease),color .18s var(--ease)}
.tl img{position:absolute;left:14%;top:8%;width:72%;height:62%;max-width:none;object-fit:contain;pointer-events:none;transition:transform .5s var(--expo)}
.tl__b{position:absolute;inset:0;z-index:1;width:100%;height:100%;cursor:pointer}
.tl__b i{position:absolute;right:8px;top:8px;width:30px;height:30px;background:rgba(255,255,255,.1);color:#fff;transition:background-color .16s var(--ease),color .16s var(--ease)}
.tl__n{position:absolute;z-index:2;left:10px;right:10px;bottom:9px;font-size:15.5px;line-height:1.15;font-weight:400;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media(hover:hover) and (pointer:fine){.tl__n:hover{text-decoration:underline;text-underline-offset:3px}}
.tl.in{background:var(--cyan);color:var(--black)}
.tl.in .tl__b i{background:var(--black)}
.tl[hidden]{display:none}
.tl--b{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%}
.tl--b .tl__n{font-size:clamp(17px,1.4vw,21px)}
@media(min-width:901px){.wl:not(.fl) .p1{grid-column:1/3;grid-row:1/3}.wl:not(.fl) .p2{grid-column:6/8;grid-row:1/3}.wl:not(.fl) .p3{grid-column:3/5;grid-row:3/5}.wl:not(.fl) .p4{grid-column:7/9;grid-row:4/6}.wl.fl{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(hover:hover) and (pointer:fine){.tl:hover img{transform:translateY(-6px) scale(1.04)}.tl:hover .tl__b i{background:var(--cyan);color:var(--black)}.tl.in:hover .tl__b i{background:var(--black);color:#fff}}
/* escalera */
.sta{background:var(--cyan);color:var(--black);padding:clamp(80px,14vh,170px) 0}
.sta__w{position:relative}
.sta__s{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sta__t{max-width:calc(100% - 20vw);font:700 clamp(30px,min(4.5vw,9.6vh),92px)/1.26 var(--display);letter-spacing:-.02em}
.sta__t .ln{display:block;white-space:nowrap}
.sta__k{margin-top:clamp(18px,3.4vh,34px);font-size:clamp(18px,1.4vw,22px);font-weight:400}
/* cómo */
/* fábrica: cuatro estaciones en diente de sierra, unidas por la onda del logo */
.fb{background:var(--black);color:#fff;padding:clamp(70px,12vh,150px) 0 clamp(90px,15vh,190px)}
.fb h2{font-size:var(--h2)}
.fb__g{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);margin-top:clamp(56px,11vh,120px)}
.fb__o{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fb__c{margin:0;min-width:0}
.fb__c:nth-of-type(even){margin-top:clamp(40px,11vh,120px)}
.fb__i{aspect-ratio:3/4;overflow:hidden}
.fb__i img{width:100%;height:100%;object-fit:cover}
.fb__c h3{margin-top:14px;font:700 clamp(22px,2vw,34px)/1.1 var(--display);letter-spacing:-.02em}
.fb__c p{margin-top:6px;max-width:30ch;font-size:clamp(16px,1.15vw,18px);color:#DCE4E9}
.ho{background:#fff;padding:clamp(80px,13vh,150px) 0}
.ho__g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,90px)}
.ho__l{position:sticky;top:clamp(100px,22vh,220px);align-self:start}
.ho h2{font-size:var(--h2);margin-bottom:clamp(16px,3vh,28px)}
.ho__s{position:relative;padding-left:34px}
.ho__tr{position:absolute;left:6px;top:24px;bottom:42px;width:3px;background:#D5DEE4}
.ho__tr i{position:absolute;inset:0;background:var(--orange);transform:scaleY(0);transform-origin:50% 0}
.ho li{position:relative;padding:clamp(8px,1.5vh,14px) 0;color:var(--ink-2);transition:color .16s var(--ease)}
.ho li::before{content:"";position:absolute;left:-34px;top:calc(clamp(8px,1.5vh,14px) + 7px);width:15px;height:15px;background:#D5DEE4;transition:background-color .16s var(--ease)}
.ho li.on{color:var(--ink)}
.ho li.on::before{background:var(--orange)}
.ho h3{font-size:clamp(22px,1.9vw,30px);font-weight:400}
.ho li p{color:inherit;font-size:clamp(17px,1.25vw,19px)}
.ho__r{display:grid;gap:clamp(10px,2vh,18px)}
.ho__r figure{height:min(78vh,720px);overflow:hidden;background:#111}
.ho__r img{width:100%;height:120%;max-width:none;object-fit:cover;will-change:transform}
/* por qué */
.wy{background:var(--black);color:#fff}
.wy__h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-top:clamp(80px,13vh,150px);padding-bottom:clamp(20px,4vh,40px)}
.wy h2{font-size:var(--h2)}
.bd--1{background:var(--steel)}.bd--2{background:var(--orange)}.bd--3{background:var(--cyan)}.bd--4{background:var(--panel);color:#fff}
/* mercados */
.mk{background:var(--black);color:#fff;padding:clamp(80px,13vh,150px) 0}
.mk__h{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:30px;align-items:end;margin-bottom:clamp(14px,2.6vh,26px)}
.mk h2{font-size:var(--h2)}
.mk__h p{font-size:clamp(17px,1.25vw,20px)}
.mk__m{margin-top:10px}
/* cotizador */
.quo{background:var(--steel);padding:clamp(80px,13vh,150px) 0}
.quo__g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,70px)}
.quo h2,.faq h2{font-size:clamp(38px,min(4.6vw,10vh),84px)}
.quo__g>div:first-child p{margin-top:14px;font-size:clamp(17px,1.25vw,20px)}
.quo .tool__bar{--bar:#fff}
/* preguntas */
.faq{background:#fff;padding:clamp(70px,11vh,120px) 0}
.faq__g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,70px)}
.faq details{background:var(--mist);margin-bottom:3px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:clamp(14px,2vh,20px) clamp(16px,1.6vw,24px);font-size:clamp(18px,1.4vw,22px);font-weight:400}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 clamp(16px,1.6vw,24px) 18px}
/* cierre */
.end{background:var(--orange);color:var(--black);padding:clamp(80px,14vh,150px) 0 clamp(16px,3vh,30px);overflow:hidden}
.end__g{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.end h2{font-size:clamp(50px,min(8.4vw,17vh),160px)}
.end__g>div{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.end__n{max-width:none;margin-top:clamp(30px,7vh,70px);padding-inline:var(--gut);font:700 calc((100vw - 2*var(--gut))*.1175)/1 var(--display);letter-spacing:-.035em;white-space:nowrap;overflow:hidden}
@media(max-width:900px){
 .mo{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
 .c--a{grid-column:1/3;grid-row:1}.c--b{grid-column:3;grid-row:1}.c--c{grid-column:1;grid-row:2}.c--d{grid-column:2/4;grid-row:2}.c--e{grid-column:1;grid-row:3}.c--f{grid-column:2/3;grid-row:3}.c--g{grid-column:3;grid-row:3}
 .c .cu,.c--b .cu{left:10%;top:12%;width:80%;height:76%}.cp{display:none}
 .wl{grid-template-columns:repeat(3,minmax(0,1fr))}.tl{aspect-ratio:1/1.34}.tl img{left:12%;top:6%;width:76%;height:56%}.tl--b{grid-column:span 3;grid-row:span 1;aspect-ratio:3/2;height:auto}.tl--b img{top:8%;height:70%}
 .tl__b i{right:5px;top:5px;width:26px;height:26px}
 .ho__g,.quo__g,.faq__g,.mk__h{grid-template-columns:minmax(0,1fr)}
 .ho__l{position:relative;top:0}.ho__r figure{height:52vh}
 .fb__g{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px}.fb__o{display:none}.fb__c:nth-of-type(even){margin-top:36px}
 .sta__t{max-width:none;line-height:1.14}.sta__t .ln{white-space:normal}.sta__s{display:none}
 .po__w{height:1.2em}
}