:root{--n:#000;--g:#0d0d0d;--b:#fff;--t:#a8a8a8;--or:#ff5808;--az:#0b9bff;--l:rgba(255,255,255,.16);--p:clamp(18px,3.4vw,52px)}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--n);color:var(--b);font:300 clamp(15px,1.15vw,18px)/1.6 'Poppins',system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.saltar{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:10px 16px;z-index:200}
.saltar:focus{left:0}

.cab{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:12px var(--p);background:linear-gradient(#000 40%,rgba(0,0,0,0))}
.cab__logo img{width:clamp(110px,10vw,160px)}
.menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);font-size:14px;font-weight:400}
.menu a{position:relative;padding:4px 0;transition:opacity .2s}
.menu a:not(.menu__cta)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
.menu__cta{border:1px solid var(--l);border-radius:99px;padding:10px 20px!important;transition:background .25s,color .25s,border-color .25s}
.menu__cta:hover{background:#fff;color:#000;border-color:#fff}
.burger{display:none;width:46px;height:46px;border:1px solid var(--l);border-radius:50%;background:none;cursor:pointer;position:relative}
.burger span{position:absolute;left:14px;right:14px;height:1.5px;background:#fff;transition:transform .3s,top .3s}
.burger span:first-child{top:19px}.burger span:last-child{top:26px}
.burger[aria-expanded=true] span:first-child{top:22px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:22px;transform:rotate(-45deg)}

.gigante{padding:0 var(--p);line-height:1;overflow-x:clip;white-space:nowrap}
.gigante span{display:block;width:max-content;font-weight:500;letter-spacing:-.055em;font-size:16vw;line-height:1.12;padding-top:.04em;margin-bottom:-.16em}
.gigante b{color:var(--or);font-weight:500}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:150px}
.hero .gigante{margin-top:auto;padding-top:6vh}
.hero__pie{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,5vw,90px);padding:clamp(28px,5vh,56px) var(--p) var(--p);border-top:1px solid var(--l);margin-top:clamp(24px,4vh,48px)}
.hero__h1{font-size:clamp(20px,2.1vw,34px);font-weight:400;line-height:1.28;letter-spacing:-.01em}
.hero__der{display:flex;flex-direction:column;align-items:flex-start;gap:26px;color:var(--t)}
.btn{display:inline-flex;gap:12px;align-items:center;border:1px solid #fff;border-radius:99px;padding:14px 28px;font-weight:400;font-size:15px;color:#fff;transition:background .25s,color .25s}
.btn:hover{background:#fff;color:#000}
.btn--blanco{background:#fff;color:#000}
.btn--blanco:hover{background:var(--or);border-color:var(--or);color:#fff}

section{padding:clamp(70px,11vw,170px) var(--p) 0}
.etiqueta{font-size:14px;font-weight:400;color:var(--t);margin-bottom:clamp(26px,4vw,60px);display:flex;align-items:center;gap:14px}
.etiqueta::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--or)}
.lista li{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(14px,3vw,50px);align-items:start;padding:clamp(26px,3.6vw,56px) 0;border-top:1px solid var(--l);transition:padding .35s,background .35s}
.lista li:last-child{border-bottom:1px solid var(--l)}
.lista li:hover{padding-left:18px;background:var(--g)}
.num{color:var(--t);font-size:14px;padding-top:.9em}
.lista h3{font-size:clamp(26px,4vw,64px);font-weight:400;line-height:1.05;letter-spacing:-.03em}
.lista p{color:var(--t);max-width:520px;padding-top:.5em}

.grande{font-size:clamp(22px,3.1vw,50px);font-weight:300;line-height:1.22;letter-spacing:-.02em;max-width:1200px}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);margin-top:clamp(50px,8vw,120px)}
.mv article{border-top:1px solid var(--l);padding-top:26px}
.mv h3,.pasion h3{font-size:clamp(28px,3.4vw,54px);font-weight:400;letter-spacing:-.03em;margin-bottom:18px}
.mv p,.porque p{color:var(--t)}
.foto{overflow:hidden;border-radius:18px}
.foto img{width:100%;transition:transform 1s}
.foto:hover img{transform:scale(1.04)}
.foto--ancha{margin-top:clamp(50px,8vw,120px);max-height:80vh}
.foto--ancha img{object-fit:cover;object-position:50% 40%;height:min(80vh,780px)}

.clientes{padding-left:0;padding-right:0}
.clientes .etiqueta{padding:0 var(--p)}
.cinta{overflow:hidden;border-block:1px solid var(--l);padding:26px 0}
.cinta__pista{display:flex;gap:18px;width:max-content;animation:cinta 55s linear infinite}
.cinta:hover .cinta__pista{animation-play-state:paused}
.cinta li{height:120px;border-radius:14px;overflow:hidden;background:#fff;flex:none}
.cinta img{height:100%;width:auto;object-fit:contain;padding:6px}
@keyframes cinta{to{transform:translateX(calc(-50% - 9px))}}

.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);font-size:clamp(18px,2vw,30px);line-height:1.35}
.porque p{color:var(--b)}

.proyecto{text-align:left}
.gigante-txt{font-size:clamp(40px,9.4vw,170px);font-weight:500;line-height:.95;letter-spacing:-.05em}
.gigante-txt span{display:block;font-size:clamp(17px,1.7vw,26px);font-weight:300;letter-spacing:0;line-height:1.4;color:var(--t);max-width:620px;margin-top:clamp(24px,3vw,44px)}
.proyecto .btn{margin-top:36px}

.impulsa{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);align-items:center}
.impulsa h2{font-size:clamp(26px,3.2vw,52px);font-weight:400;line-height:1.1;letter-spacing:-.03em;margin-bottom:24px}
.impulsa p{color:var(--t)}
.impulsa .mini{margin-top:30px;color:var(--b);font-size:14px;border-top:1px solid var(--l);padding-top:16px}

.pasion{padding-bottom:clamp(70px,11vw,170px)}
.pasion h2{font-size:clamp(34px,6.4vw,110px);font-weight:500;line-height:.98;letter-spacing:-.045em;max-width:1300px}
.pasion>p{color:var(--t);max-width:760px;margin-top:clamp(26px,3vw,44px);margin-left:auto;margin-right:0}
.mas{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:clamp(50px,8vw,120px);border-top:1px solid var(--l);padding-top:34px}
.mas h3{font-weight:300;font-size:clamp(20px,2.4vw,38px);letter-spacing:-.02em;display:flex;flex-direction:column}
.mas h3 a{color:var(--or);overflow-wrap:anywhere;font-weight:400}
.mas h3 a:hover{text-decoration:underline}

.pie{border-top:1px solid var(--l);padding-top:clamp(40px,6vw,90px)}
.gigante--pie span{font-size:16vw}
.pie__fila{display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(18px,3vw,50px);align-items:center;padding:clamp(28px,4vw,56px) var(--p)}
.pie__logo img{width:130px}
.pie__dir{color:var(--t)}
.pie__nav{display:flex;gap:clamp(14px,2vw,32px);font-size:14px;flex-wrap:wrap}
.pie__nav a:hover,.pie__cop a:hover{color:var(--or)}
.pie__ig{width:46px;height:46px;border:1px solid var(--l);border-radius:50%;display:grid;place-items:center;transition:background .25s,color .25s}
.pie__ig:hover{background:#fff;color:#000}
.pie__cop{border-top:1px solid var(--l);padding:22px var(--p) 90px;font-size:13px;color:var(--t)}
.pie__cop a{color:#fff}

.wa{position:fixed;left:18px;bottom:18px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.5);transition:transform .25s}
.wa:hover{transform:scale(1.08)}
.arriba{position:fixed;right:18px;bottom:18px;z-index:90;width:52px;height:52px;border-radius:50%;border:1px solid var(--l);background:#111;color:#fff;font-size:22px;cursor:pointer;transition:background .25s,color .25s}
.arriba:hover{background:#fff;color:#000}

.rev{opacity:0;transform:translateY(34px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}.cinta__pista{animation:none}}

.pg{padding-top:clamp(130px,16vw,230px);padding-bottom:0}
.pg__h1{font-size:clamp(54px,13vw,230px);font-weight:500;line-height:.9;letter-spacing:-.055em}
.pg--404{min-height:100svh;display:flex;flex-direction:column;align-items:flex-start;gap:34px;justify-content:center}
.pgsec{padding-top:clamp(50px,7vw,110px)}
.pgsec>.grande{margin-bottom:clamp(30px,5vw,70px)}
.lista--serv li{grid-template-columns:1fr 1fr}
.lista--serv .btn{margin-top:26px}
.lista--serv li div p{padding-top:.5em}
.impulsa--arriba{align-items:start}
.foto--vert img{max-height:80vh;object-fit:cover}
.impulsa__txt--grande p{font-size:clamp(18px,2vw,30px);line-height:1.35;color:var(--b);margin-bottom:1.1em}
.valores{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,34px)}
.valores li{border-top:1px solid var(--l);padding-top:22px}
.valores h3{font-size:clamp(20px,1.9vw,30px);font-weight:400;letter-spacing:-.02em;line-height:1.15;margin-bottom:14px}
.valores p{color:var(--t)}
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);align-items:start}
.contacto .sub{font-size:clamp(28px,3.4vw,54px);font-weight:400;letter-spacing:-.03em;margin-bottom:22px}
.contacto h2:not(.sub):not(.etiqueta){font-size:clamp(28px,3.4vw,54px);font-weight:400;letter-spacing:-.03em;margin-bottom:22px}
.contacto .grande{font-size:clamp(18px,1.8vw,28px);color:var(--t)}
.contacto .etiqueta{margin-top:clamp(36px,5vw,70px)}
.contacto__der .etiqueta{margin-top:0}
.redes{display:flex;gap:14px;flex-wrap:wrap}
.redes a{display:inline-block;border:1px solid var(--l);border-radius:99px;padding:10px 22px;font-size:14px;transition:background .25s,color .25s}
.redes a:hover{background:#fff;color:#000}
.form{display:grid;gap:16px}
.form__fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form input,.form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--l);color:#fff;font:inherit;padding:16px 2px;border-radius:0;outline:0;transition:border-color .25s}
.form input:focus,.form textarea:focus{border-color:#fff}
.form ::placeholder{color:#7a7a7a}
.form textarea{resize:vertical;min-height:150px}
.form .btn{justify-self:start;cursor:pointer;font:inherit;font-size:15px;margin-top:10px}
.form .btn:disabled{opacity:.5}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.trampa{position:absolute;left:-9999px;height:0;overflow:hidden}
.form__estado{min-height:1.6em;font-size:15px}
.form__estado.ok{color:#7bd88f}.form__estado.mal{color:#ff6b6b}
@media (max-width:900px){
  .valores{grid-template-columns:1fr 1fr}
  .contacto{grid-template-columns:1fr}
  .lista--serv li{grid-template-columns:1fr}
}
@media (max-width:520px){.valores{grid-template-columns:1fr}.form__fila{grid-template-columns:1fr}}
@media (max-width:900px){
  .burger{display:block}
  .menu{position:fixed;inset:0;background:#000;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:90px var(--p) 40px;font-size:clamp(34px,10vw,56px);font-weight:400;letter-spacing:-.03em;transform:translateY(-100%);visibility:hidden;transition:transform .5s cubic-bezier(.7,0,.2,1),visibility .5s;overflow-y:auto;z-index:-1}
  .menu.abierto{transform:none;visibility:visible}
  .menu__cta{font-size:18px;margin-top:20px}
  .cab{background:#000}
  .cab__logo img{width:100px}
  .hero{padding-top:110px}
  .hero__pie{padding-bottom:96px}
  .hero__pie,.mv,.dos,.impulsa{grid-template-columns:1fr}
  .lista li{grid-template-columns:1fr}
  .pie__fila{grid-template-columns:1fr 1fr}
  .pie__dir{grid-column:1/-1;order:3}
  .cinta li{height:90px}
}
@media (max-width:520px){.pie__fila{grid-template-columns:1fr}.pie__ig{justify-self:start}}

.nosgrid{display:grid;grid-template-columns:1fr minmax(260px,420px);gap:clamp(24px,5vw,90px);align-items:start;margin-top:clamp(50px,8vw,120px)}
.nosgrid .mv{grid-template-columns:1fr;margin-top:0;gap:clamp(28px,4vw,56px)}
.nosgrid .foto img{aspect-ratio:3/4;object-fit:cover;width:100%}
.foto--vert{max-width:480px}
@media (max-width:900px){.nosgrid{grid-template-columns:1fr}.nosgrid .foto{max-width:420px}}

.menu a:not(.menu__cta)::after{background:var(--or)}
.menu__cta:hover,.btn:hover{background:#fff;border-color:#fff;color:#000}
.btn--blanco:hover{background:var(--or);border-color:var(--or);color:#fff}
.etiqueta::before{background:var(--or)}
.lista li:hover{background:var(--g)}
.mas h3 a{color:var(--or)}
.redes a:hover,.pie__ig:hover{background:var(--or);border-color:var(--or);color:#fff}
.arriba{display:grid;place-items:center;padding:0}
.arriba:hover{background:var(--or);border-color:var(--or);color:#fff}
.pie__nav a:hover,.pie__cop a:hover{color:var(--az)}
.form input:focus,.form textarea:focus{border-color:var(--az)}
:focus-visible{outline:2px solid var(--az);outline-offset:3px}

.fondo{background-size:cover;background-position:center;background-repeat:no-repeat;padding-bottom:clamp(70px,11vw,170px)}
.fondo--ciudad{background-image:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.5) 35%,rgba(0,0,0,.5) 65%,rgba(0,0,0,.85)),url(/img/guatemala-city-skyline-aerial-view-sunset.webp)}
.fondo--madera{background-image:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.55) 35%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.85)),url(/img/laptop-coffee-notebook-wooden-desk-workspace.webp)}
.fondo--claro{background-image:linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.7)),url(/img/laptop-white-desk-minimal-workspace.webp)}
.fondo .gigante-txt span,.fondo>p{color:#d4d4d4}
@media (max-width:900px){.fondo{background-attachment:scroll}}
@media (min-width:901px){.fondo--ciudad,.fondo--madera{background-attachment:fixed}}
.pg.fondo{padding-bottom:clamp(40px,6vw,90px)}
