@font-face{font-family:'Changa One';font-style:normal;font-weight:400;font-display:swap;src:url(vendor/changa-one-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 400;font-display:swap;src:url(vendor/geist-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --black:#000; --white:#EEEEEE; --carbon:#333; --gun:#4B4B4B; --alu:#AFAFAF; --yellow:#FFE100;
  --r-btn:6px; --r-card:9px; --r-img:16px; --r-sec:24px;
  --font-title:'Changa One','Arial Black',system-ui,sans-serif;
  --font:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,3.4vw,48px);
  --gap:clamp(80px,10vw,120px);
}
*{box-sizing:border-box;margin:0}
html{background:var(--black)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--black);color:var(--white);font:400 16px/1.45 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip;font-variant-numeric:tabular-nums;caret-color:var(--yellow)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--yellow);color:var(--black)}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.light :focus-visible{outline-color:var(--black)}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--black);padding:10px 16px;z-index:200;border-radius:var(--r-btn)}
.skip:focus{left:8px}
@supports(scrollbar-color:auto){html{scrollbar-color:var(--gun) var(--black)}}

.display{font-family:var(--font-title);font-weight:400;letter-spacing:.004em;line-height:1.02;text-transform:uppercase;text-wrap:balance}
.h1{font-size:clamp(40px,6.6vw,88px)}
.h2{font-size:clamp(32px,4.6vw,66px)}
.h3{font-size:clamp(22px,2.3vw,32px);letter-spacing:.01em;line-height:1.08}
.label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--alu)}
p{max-width:52ch;text-wrap:pretty}
.pad{padding-left:var(--pad);padding-right:var(--pad)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0 .1em;margin:-.12em 0 -.1em}
.wi{display:inline-block;will-change:transform}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--yellow);color:var(--black);font:400 14px/1 var(--font);padding:12px 18px;border:0;border-radius:var(--r-btn);text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--white);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn:hover::before{transform:none}
.btn.ghost{background:var(--carbon);color:var(--white)}
.btn.ghost::before{background:var(--white)}
.btn.ghost:hover{color:var(--black)}
.btn.lg{padding:16px 24px;font-size:15px}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:72px;background:#fff;color:var(--black);border-bottom:1px solid #e4e4e4;transition:transform .5s var(--ease)}
.nav.hide{transform:translateY(-100%)}
.nav .logo img{height:34px;width:auto}
.pills{display:flex;gap:6px;list-style:none;padding:0}
.pills a{display:block;background:var(--white);color:var(--black);font-size:14px;padding:7px 14px;border-radius:var(--r-btn);text-decoration:none;transition:background .3s,color .3s}
.pills a:hover{background:var(--black);color:#fff}
.menu-btn{display:none;background:var(--white);color:var(--black);border:0;border-radius:var(--r-btn);padding:9px 14px;font:400 14px var(--font);cursor:pointer}
.nav .btn{padding:9px 16px}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-top:72px;overflow:hidden;background:var(--black)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s var(--ease);z-index:0;pointer-events:none}
.hero-video.on{opacity:.42}
.hero>*:not(.hero-video){position:relative;z-index:1}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pad);padding-top:clamp(40px,8vh,96px);align-items:start}
.hero h1{max-width:12ch}
.hero .sub{margin-top:28px;color:var(--alu);font-size:15px;max-width:42ch}
.hero .cta{display:flex;gap:8px;margin-top:28px;flex-wrap:wrap}
.lineup{position:relative;margin-top:auto;padding-top:40px}
.lineup .machines{display:flex;align-items:flex-end;width:max-content;padding-left:var(--pad);gap:0;opacity:.5}
.lineup .machines img{flex:none;margin-right:-.5vw;will-change:transform,clip-path;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.lineup .m1{width:23vw}.lineup .m2{width:14vw}.lineup .m3{width:15vw}.lineup .m4{width:24vw}.lineup .m5{width:20vw}.lineup .m6{width:14vw}
.ground{height:1px;background:var(--gun);transform-origin:left;margin:0 var(--pad)}
.ticks{height:8px;margin:0 var(--pad);background:repeating-linear-gradient(90deg,var(--gun) 0 1px,transparent 1px 24px);transform-origin:left}
.hero-foot{display:flex;justify-content:space-between;gap:12px;padding:12px var(--pad) 20px;color:var(--alu);font-size:12px;letter-spacing:.06em;text-transform:uppercase}

/* Statement (yellow) */
.statement{position:relative;background:var(--yellow);color:var(--black);height:240svh;border-radius:var(--r-sec) var(--r-sec) 0 0;margin-top:calc(var(--r-sec)*-1)}
.statement .stick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:40px;padding:96px var(--pad) 48px}
.statement .big{font-weight:300;font-size:clamp(30px,4.2vw,60px);line-height:1.04;letter-spacing:-.04em;max-width:16.5ch}
.statement .big .gw{display:inline-block}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid rgba(0,0,0,.25);padding-top:20px}
.facts strong{display:block;font-family:var(--font-title);font-weight:400;font-size:clamp(34px,4.6vw,64px);letter-spacing:.005em;line-height:1}
.facts div>span{display:block;margin-top:8px;font-size:14px;max-width:26ch}
.facts .count{display:inline;margin:0;font-size:inherit;max-width:none}

/* Fleet */
.fleet{position:relative;background:#fff;color:var(--black);overflow:hidden}
.fleet .label{color:#555}
.fleet-pin{height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative}
.fleet-head{position:absolute;top:calc(72px + 24px);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;align-items:baseline;z-index:2}
.track{display:flex;align-items:flex-end;height:68svh;width:max-content;padding-left:var(--pad);position:relative;margin-top:40px}
.slide{flex:none;width:min(62vw,720px);height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative;padding-right:6vw}
.slide .pic{height:68%;display:flex;align-items:flex-end}
.slide img{max-height:100%;width:auto;max-width:min(54vw,620px);object-fit:contain;will-change:transform}
.slide .meta{border-top:1px solid #d6d6d6;padding-top:16px;margin-top:0;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.slide .name{font-family:var(--font-title);font-weight:400;text-transform:uppercase;font-size:clamp(26px,3.4vw,46px);letter-spacing:.01em;line-height:1}
.fleet-bar{position:absolute;left:var(--pad);right:var(--pad);bottom:36px;height:1px;background:#d6d6d6}
.fleet-bar i{position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--black);transform-origin:left;transform:scaleX(.08)}
.fleet-count{position:absolute;left:var(--pad);bottom:48px;font-size:12px;letter-spacing:.06em;color:#555}

/* Service (light) */
.light{background:var(--white);color:var(--black)}
.light .label{color:#555}
.service{padding:var(--gap) 0;border-radius:var(--r-sec) var(--r-sec) 0 0;margin-top:calc(var(--r-sec)*-1);position:relative;z-index:2}
.svc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);margin-top:clamp(40px,6vw,80px);align-items:start}
.svc-photo{position:sticky;top:96px}
.svc-photo .frame{border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/5}
.svc-photo img{width:100%;height:112%;object-fit:cover}
.svc-photo p{margin-top:12px;font-size:14px;color:#555}
.grp{padding:28px 0 36px;position:relative}
.grp::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--black);transform-origin:left}
.grp h3{margin-bottom:18px}
.grp ul{list-style:none;padding:0;display:grid;gap:10px;max-width:58ch}
.grp li{padding-left:18px;position:relative}
.grp li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--black)}

/* Marquee */
.marquee{background:var(--black);overflow:hidden;padding:clamp(32px,5vw,64px) 0;white-space:nowrap;border-radius:0}
.marquee .row{display:inline-flex;will-change:transform}
.marquee span{font-family:var(--font-title);text-transform:uppercase;font-weight:400;font-size:clamp(40px,7vw,104px);letter-spacing:.01em;line-height:1;padding-right:.5em;color:var(--white)}
.marquee span.o{color:transparent;-webkit-text-stroke:1px var(--gun)}

/* Civil */
.civil{background:var(--black);padding-bottom:var(--gap)}
.civil-hero{position:relative;height:100svh;display:grid;place-items:end start;overflow:hidden}
.civil-hero .bg{position:absolute;inset:0;clip-path:inset(14% 10% 14% 10% round var(--r-sec));will-change:clip-path}
.civil-hero .bg img{width:100%;height:116%;object-fit:cover}
.civil-hero h2{position:relative;padding:0 var(--pad) 8svh;color:var(--white);mix-blend-mode:normal;z-index:2}
.civil-hero .shade{position:absolute;inset:0;background:rgba(0,0,0,.28);z-index:1}
.civil-body{padding-top:var(--gap)}
.civil-intro{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);align-items:end}
.civil-intro p{color:var(--alu)}
.civil-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;margin-top:clamp(40px,6vw,72px)}
.civil-cols .grp{padding-right:12px}
.civil-cols .grp::before{background:var(--gun)}
.civil-cols h3{font-size:22px;letter-spacing:-.02em}
.civil-cols li{color:var(--alu);font-size:15px}
.civil-cols li::before{background:var(--alu)}
.photos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(48px,7vw,96px)}
.photos .ph{border-radius:var(--r-img);overflow:hidden;aspect-ratio:3/4;clip-path:inset(0 0 100% 0)}
.photos .ph:nth-child(even){margin-top:48px}
.photos img{width:100%;height:116%;object-fit:cover}

/* Cemex (yellow) */
.cemex{background:var(--yellow);color:var(--black);padding:var(--gap) 0;border-radius:var(--r-sec) var(--r-sec) 0 0}
.cemex .h1{max-width:13ch}
.cemex .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);align-items:end;margin-top:clamp(28px,4vw,56px)}
.cemex p{font-size:18px}
.cemex .mission{font-size:15px}

/* About + attachments (light) */
.about{padding:var(--gap) 0;background:var(--white);color:var(--black);border-radius:var(--r-sec) var(--r-sec) 0 0;margin-top:calc(var(--r-sec)*-1);position:relative;z-index:2}
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.about .frame{border-radius:var(--r-img);overflow:hidden;aspect-ratio:3/4}
.about .frame img{width:100%;height:112%;object-fit:cover;object-position:center 30%}
.about p+p{margin-top:16px}
.adit-head{margin-top:var(--gap);display:flex;justify-content:space-between;align-items:end;gap:16px}
.adit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:32px}
.adit-grid figure{overflow:hidden}
.adit-grid .im{border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/5;background:#ccc}
.adit-grid img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.adit-grid figure:hover img{transform:scale(1.06)}
.adit-grid figcaption{padding-top:10px;font-size:16px}

/* Contact */
.contact{background:var(--black);padding:var(--gap) 0;border-radius:var(--r-sec) var(--r-sec) 0 0;margin-top:calc(var(--r-sec)*-1);position:relative;z-index:2}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,96px)}
.people .p{padding:20px 0;border-top:1px solid var(--gun)}
.people strong{display:block;font-weight:300;font-size:26px;letter-spacing:-.03em}
.people span{color:var(--alu);font-size:14px}
.people a{display:block;margin-top:6px;text-decoration:none;width:max-content;border-bottom:1px solid var(--gun);transition:border-color .3s,color .3s}
.people a:hover{border-color:var(--yellow);color:var(--yellow)}
.addr{margin-top:8px;border-top:1px solid var(--gun);padding-top:20px;color:var(--alu);font-size:15px}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form .full{grid-column:1/-1}
label{display:block;margin-bottom:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--alu)}
input,select,textarea{width:100%;padding:14px;border:1px solid var(--gun);background:var(--black);color:var(--white);font:400 16px var(--font);border-radius:var(--r-btn);transition:border-color .3s,background .3s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--yellow);background:#0b0b0b}
select option{background:var(--black);color:var(--white)}
input::placeholder,textarea::placeholder{color:#777}
.hint{font-size:14px;color:var(--alu);margin-top:10px}
footer{background:var(--black);border-top:1px solid var(--carbon);padding:28px 0;color:var(--alu);font-size:13px}
footer .in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer img{height:28px;filter:invert(1)}

/* Motion states: only when JS + motion are allowed */
.anim .rv{opacity:0;transform:translateY(32px)}
.anim .hero .machines img{opacity:0}
.grp::before{transition:transform 1.4s var(--ease)}
.anim .grp::before{transform:scaleX(0)}
.anim .grp.on::before{transform:none}
.anim .statement .gw{opacity:.2}

@media(max-width:1000px){
  .pills{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid #e4e4e4;flex-direction:column;padding:8px var(--pad) 20px;gap:6px}
  .pills.open{display:flex}
  .menu-btn{display:block}
  .nav .btn{display:none}
  .hero-top,.svc-grid,.civil-intro,.cemex .two,.about-grid,.contact-grid{grid-template-columns:1fr}
    .lineup .m1,.lineup .m2{display:none}
  .lineup .m3{width:40vw}.lineup .m4{width:58vw}.lineup .m5{width:52vw}.lineup .m6{width:40vw}
  .facts{grid-template-columns:1fr}
  .statement{height:auto}.statement .stick{position:static;height:auto;padding-top:96px;padding-bottom:72px}
  .fleet-pin{height:auto;padding:calc(72px + 24px) 0 48px}
  .fleet-head{position:static;padding:0 var(--pad) 24px;flex-direction:column;align-items:flex-start;gap:8px}
  .track{flex-direction:column;width:auto;height:auto;padding:0 var(--pad);margin-top:0;gap:36px}
  .slide{width:100%;height:auto;padding-right:0}
  .slide .pic{height:auto;min-height:150px}
  .slide img{max-width:90%;max-height:220px}
  .fleet-bar,.fleet-count{display:none}
  .svc-photo{position:static}
  .civil-cols{grid-template-columns:1fr 1fr}
  .photos{grid-template-columns:1fr 1fr}
  .adit-grid{grid-template-columns:repeat(3,1fr)}
  .civil-hero{height:80svh}
}
@media(max-width:600px){
  .facts strong{font-size:44px}
  .civil-cols{grid-template-columns:1fr}
  .adit-grid{grid-template-columns:repeat(2,1fr)}
  form{grid-template-columns:1fr}
  .hero-foot span:nth-child(n+3){display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .civil-hero .bg{clip-path:none}.photos .ph{clip-path:none}
}

/* WhatsApp */
.btn .wa-ico{width:18px;height:18px;flex:none}
.wa-fab{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:90;display:flex;align-items:center;gap:0;height:56px;min-width:56px;padding:0 15px;background:var(--black);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:28px;text-decoration:none;overflow:hidden;transition:background .35s,color .35s,gap .45s var(--ease),padding .45s var(--ease),border-color .35s;animation:fab-in .9s var(--ease) 1.8s both}
.wa-fab svg{width:24px;height:24px;flex:none}
.wa-fab span{max-width:0;opacity:0;white-space:nowrap;font-size:14px;transition:max-width .5s var(--ease),opacity .3s}
.wa-fab:hover,.wa-fab:focus-visible{background:var(--yellow);color:var(--black);border-color:var(--yellow);gap:10px;padding:0 20px 0 15px}
.wa-fab:hover span,.wa-fab:focus-visible span{max-width:120px;opacity:1}
@keyframes fab-in{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}

.wa-fab.away{opacity:0;transform:translateY(12px);pointer-events:none;animation:none}
.wa-fab{transition:background .35s,color .35s,gap .45s var(--ease),padding .45s var(--ease),border-color .35s,opacity .4s,transform .4s var(--ease)}
.contact .wa-btn{margin:0 0 28px}
@media(max-width:600px){
  .hero .cta .btn{flex:1 1 auto;justify-content:center}
  .wa-fab{height:50px;min-width:50px;padding:0 12px;bottom:14px;right:14px}
  .wa-fab svg{width:22px;height:22px}
}

/* Iconos de obra civil */
.civil-cols .ico{display:block;color:#fff;margin-bottom:16px}
.civil-cols .ico *{stroke-dasharray:1 1;stroke-dashoffset:0}
.anim .civil-cols .ico *{stroke-dashoffset:1}
.anim .civil-cols .grp.on .ico *{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease) .2s}
.civil-cols .grp:hover .ico{color:var(--yellow);transition:color .3s}

/* Plano animado del CASE 1021F (bloque amarillo) */
.bp{position:absolute;right:var(--pad);top:14svh;width:45vw;max-width:880px;aspect-ratio:1472/880;z-index:0;pointer-events:none;color:#000}
.bp svg{display:block;width:100%;height:100%;overflow:visible}
.bp text{font-family:var(--font);font-weight:400}
.statement .big{position:relative;z-index:1}
@media(max-width:1000px){
  .bp{position:relative;right:auto;top:auto;width:100%;max-width:560px;margin:0 auto 8px;order:2}
}