/* ====== Respaldo métrico de Poppins ==================================
   Mientras Poppins llega desde Google, el texto se pinta con la tipografía
   del sistema. Estos ajustes hacen que ese respaldo ocupe casi exactamente
   el mismo espacio, así que al aparecer Poppins no salta el diseño.
   Medidos sobre los archivos reales: ancho medio 0.5761 em contra
   0.5636 em de Arial. */
@font-face{
  font-family:'Poppins Respaldo';
  src:local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
  font-weight:400 800;
  font-style:normal;
  size-adjust:102.22%;
  ascent-override:102.72%;
  descent-override:34.24%;
  line-gap-override:9.78%;
}

:root{--concreto:#1B2430;--concreto-2:#28323F;--senal:#F5C518;--cal:#F7F4ED;--acero:#5C6675;--linea:#E3E0D8;--blanco:#fff;--gut:clamp(20px,5vw,64px);--maxw:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--blanco);color:var(--concreto);font-family:'Poppins','Poppins Respaldo',system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}h1,h2,h3,h4{margin:0;line-height:1.06;letter-spacing:-.015em;font-weight:800}img{content-visibility:auto}p{margin:0 0 1em}img{display:block;max-width:100%}a{color:inherit}.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--senal);margin:0 0 18px;display:flex;align-items:center;gap:12px}.eyebrow::before{content:"";width:34px;height:2px;background:var(--senal);flex:none}.btn{display:inline-block;background:var(--senal);color:var(--concreto);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:13px 24px;border:2px solid var(--senal);transition:.18s}.btn:hover{background:transparent;color:var(--senal)}.btn.dark:hover{color:var(--concreto)}.btn.ghost{background:transparent;border-color:rgba(255,255,255,.5);color:var(--blanco)}.btn.ghost:hover{background:var(--senal);border-color:var(--senal);color:var(--concreto)}a:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid var(--senal);outline-offset:3px}header{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .3s,border-color .3s}header.solid{background:rgba(27,36,48,.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.12)}.nav{display:flex;align-items:center;gap:34px;height:74px}.nav .marca{display:flex;align-items:center;gap:11px;text-decoration:none}.nav .marca img{height:54px;width:auto}.nav ul{list-style:none;display:flex;gap:30px;margin:0 0 0 auto;padding:0}.nav ul a{font-size:13px;font-weight:400;color:#D3D8DE;text-decoration:none;padding:26px 0;display:block}.nav ul a:hover{color:var(--senal)}.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0}#menu{display:none}@media(max-width:1000px){.nav ul{display:none}.burger{display:block}.nav .cta-top{display:none}#menu.on{display:block;background:var(--concreto);border-top:1px solid rgba(255,255,255,.12)}#menu ul{list-style:none;margin:0;padding:8px 0 22px}#menu a{display:block;padding:13px var(--gut);color:#D3D8DE;text-decoration:none;font-size:15px}}.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;background:var(--concreto);color:#fff;overflow:hidden}.hero .bg{position:absolute;inset:0}.hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .85s ease;animation:slowzoom 26s ease-in-out infinite alternate}.hero .bg img.on{opacity:.5}.hero-dots{position:absolute;left:0;right:0;bottom:clamp(22px,4vw,34px);z-index:2;display:flex;justify-content:center;gap:9px}.hero-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:.25s;cursor:default}.hero-dots span.on{background:var(--senal);width:22px;border-radius:5px}@keyframes slowzoom{from{transform:scale(1.09)}to{transform:scale(1)}}.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(27,36,48,.97) 6%,rgba(27,36,48,.72) 46%,rgba(27,36,48,.42) 100%)}.hero .inner{position:relative;width:100%;padding-bottom:clamp(46px,7vw,86px);padding-top:150px}.hero .tag{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--senal);margin:0 0 22px}.hero h1{font-size:clamp(32px,5.4vw,60px);max-width:19ch}.hero p{max-width:56ch;margin-top:24px;color:#C9CFD8;font-size:clamp(15px,1.4vw,17px)}.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}.cifras{background:var(--senal);color:var(--concreto)}.cifras .g{display:grid;grid-template-columns:repeat(4,1fr)}.cifras div{padding:38px 22px 42px;text-align:center;border-right:1px solid rgba(27,36,48,.18)}.cifras div:last-child{border-right:0}.cifras b{display:block;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:clamp(32px,4.6vw,52px);line-height:1;letter-spacing:-.035em}.cifras span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;margin-top:12px;color:#4A4322}@media(max-width:820px){.cifras .g{grid-template-columns:1fr 1fr}.cifras div{border-bottom:1px solid rgba(27,36,48,.18);padding:30px 16px 34px}.cifras div:nth-child(2n){border-right:0}.cifras div:nth-last-child(-n+2){border-bottom:0}}section{padding:clamp(66px,9vw,120px) 0}section.cal{background:var(--cal)}section.dark{background:var(--concreto);color:#fff}.kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--senal);margin:0 0 10px}h2{font-size:clamp(28px,4.3vw,48px)}.dark h2{color:#fff}.lede{max-width:62ch;color:var(--acero);margin-top:22px}.dark .lede{color:#C9CFD8}.head{display:flex;align-items:flex-end;gap:32px;flex-wrap:wrap}.head .btn{margin-left:auto}.divs{margin-top:56px;display:grid;gap:2px;grid-template-columns:repeat(2,1fr);background:var(--linea)}.dark .divs{background:rgba(255,255,255,.14)}.div{position:relative;min-height:clamp(300px,38vw,430px);overflow:hidden;display:flex;align-items:flex-end;text-decoration:none;color:#fff}.div img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease;z-index:0}.div:hover img{transform:scale(1.06)}.div::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,21,29,.95) 0%,rgba(15,21,29,.82) 22%,rgba(15,21,29,.28) 50%,rgba(15,21,29,0) 68%);z-index:1}.div .t{position:relative;z-index:2;padding:28px 28px 30px;width:100%}.div .t i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--senal);display:block;margin-bottom:9px}.div .t h3{font-size:clamp(20px,2.4vw,27px)}.div .t p{margin:10px 0 0;font-size:14px;color:#C9CFD8;max-width:44ch}.div .t em{font-style:normal;display:inline-block;margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--senal);border-bottom:1px solid var(--senal);padding-bottom:3px}@media(max-width:760px){.divs{grid-template-columns:1fr}}.obras{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}.obra{background:var(--blanco);border:1px solid var(--linea);display:flex;flex-direction:column}.obra .ph{aspect-ratio:4/3;overflow:hidden;background:#DDD}.obra .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.obra:hover .ph img{transform:scale(1.05)}.obra .txt{padding:18px 18px 22px;flex:1;display:flex;flex-direction:column}.obra h3{font-size:15px;font-weight:600;line-height:1.25}.obra .meta{margin-top:auto;padding-top:14px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--acero)}.obra .meta span{display:block}.obra .meta span+span{color:#8B95A2;margin-top:3px}@media(max-width:980px){.obras{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.obras{grid-template-columns:1fr}}.serv{margin-top:50px}.serv ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--linea)}.serv li{display:flex;gap:16px;padding:16px 20px;font-size:14.5px;line-height:1.5;background:#FBF0CD}.serv li.core{background:#F0D98A}.serv li i{font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:12px;color:#4A4322;font-weight:600;padding-top:3px;flex:none}@media(max-width:760px){.serv ol{grid-template-columns:1fr}}.cap{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:54px;background:rgba(255,255,255,.14)}.cap figure{margin:0;aspect-ratio:4/3;overflow:hidden}.cap img{width:100%;height:100%;object-fit:cover}.specs{margin-top:34px;border-top:1px solid rgba(255,255,255,.18)}.specs dl{margin:0;display:grid;grid-template-columns:auto 1fr}.specs dt,.specs dd{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);margin:0}.specs dt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--senal);padding-right:28px;white-space:nowrap}.specs dd{font-size:14.5px;color:#D3D8DE}@media(max-width:860px){.specs dl{grid-template-columns:1fr}.specs dt{border-bottom:0;padding-bottom:2px}}.logos{margin-top:46px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--linea);border-left:1px solid var(--linea)}.logos figure{margin:0;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);aspect-ratio:7/5;display:grid;place-items:center;padding:12px;background:var(--blanco)}.logos img{max-height:80%;max-width:90%;width:auto;height:auto;object-fit:contain}@media(max-width:760px){.logos{grid-template-columns:repeat(2,1fr)}}.tabla{margin-top:42px;border-top:2px solid var(--concreto)}.tabla .row{display:grid;grid-template-columns:minmax(210px,.9fr) 1.6fr;gap:24px;padding:15px 0;border-bottom:1px solid var(--linea)}.tabla .row b{font-size:14px;font-weight:600}.tabla .row span{font-size:14px;color:var(--acero)}@media(max-width:700px){.tabla .row{grid-template-columns:1fr;gap:4px}}.clientes{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}.clientes span{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;border:1px solid var(--linea);padding:9px 15px;color:var(--acero);background:var(--blanco)}.form{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,255,255,.14)}.form .intro,.form form{background:var(--concreto-2);padding:32px 30px 36px}.form .intro h3{font-size:23px;color:#fff}.form .intro p{margin-top:14px;font-size:14.5px;color:#C9CFD8;max-width:40ch}.form .intro .alt{margin-top:26px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8B95A2;line-height:2}.form .intro .alt a{color:var(--senal);text-decoration:none}.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.f{margin-bottom:18px}.f label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8B95A2;margin-bottom:7px}.f input,.f select,.f textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);color:#fff;font-family:'Poppins','Poppins Respaldo',system-ui,sans-serif;font-size:14.5px;padding:8px 0;border-radius:0}.f textarea{resize:vertical;min-height:84px}.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8B95A2 50%),linear-gradient(135deg,#8B95A2 50%,transparent 50%);background-position:calc(100% - 12px) 14px,calc(100% - 7px) 14px;background-size:5px 5px;background-repeat:no-repeat}.f select option{background:var(--concreto);color:#fff}.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-bottom-color:var(--senal)}.f input::placeholder,.f textarea::placeholder{color:#6B7583}.f.err input,.f.err select,.f.err textarea{border-bottom-color:#E2725B}.f .msg{display:none;font-size:12px;color:#E2725B;margin-top:6px}.f.err .msg{display:block}.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.f-send{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}.f-send button{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--senal);color:var(--concreto);border:2px solid var(--senal);padding:13px 26px;cursor:pointer;transition:.18s}.f-send button:hover{background:transparent;color:var(--senal)}.f-send button[disabled]{opacity:.55;cursor:progress}.f-state{font-size:13.5px;color:#C9CFD8}.f-state.bad{color:#E2725B}.sent{display:none;padding:44px 30px;background:var(--concreto-2)}.sent.on{display:block}.sent h3{font-size:23px;color:var(--senal)}.sent p{margin-top:12px;font-size:14.5px;color:#C9CFD8}@media(max-width:860px){.form{grid-template-columns:1fr}.f-row{grid-template-columns:1fr;gap:0}}footer{background:#141B25;color:#8B95A2;padding:clamp(50px,7vw,76px) 0 26px}.fgrid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:34px}.fgrid h4{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--senal);margin:0 0 14px}.fgrid p{margin:0;font-size:13.5px;line-height:1.85;color:#9AA4B1}.fgrid a{color:#9AA4B1;text-decoration:none}.fgrid a:hover{color:var(--senal)}.fgrid .marca img{height:56px;width:auto}.fgrid .marca p{margin-top:16px;max-width:32ch;font-size:13px}.fin{margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:14px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}.fin span:last-child{margin-left:auto}@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.fgrid{grid-template-columns:1fr}}.filo{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--linea)}.filo article{background:var(--blanco);padding:30px 26px 34px}.cal .filo article{background:var(--blanco)}.filo h3{font-size:19px}.filo .n{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#B9932A;display:block;margin-bottom:12px}.filo p{margin:14px 0 0;font-size:14px;color:var(--acero);line-height:1.7}.filo q{display:block;margin-top:18px;font-size:14px;font-weight:600;font-style:italic;color:var(--concreto)}@media(max-width:860px){.filo{grid-template-columns:1fr}}.filo.trabajo{grid-template-columns:1fr;background:var(--linea)}.filo.trabajo article{display:grid;grid-template-columns:minmax(150px,240px) 1fr;padding:0;background:#FBF0CD}.filo.trabajo article:nth-child(odd){background:#F0D98A}.filo.trabajo .ph{aspect-ratio:3/2;overflow:hidden;background:#DDD}.filo.trabajo .ph img{width:100%;height:100%;object-fit:cover;display:block}.filo.trabajo .tx{padding:24px 28px;display:flex;gap:14px;align-items:flex-start}.filo.trabajo .tx .n{flex:none;display:block;margin:3px 0 0;font-size:12px;color:#4A4322}.filo.trabajo h3{font-size:17px}.filo.trabajo p{margin:8px 0 0;font-size:14px;color:var(--acero);line-height:1.65}@media(max-width:700px){.filo.trabajo article{grid-template-columns:1fr}.filo.trabajo .ph{aspect-ratio:16/9}}.rama{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:26px;align-items:center;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:40px}.rama .mk{background:transparent;padding:0;display:grid;place-items:center;min-width:0}.rama .mk img{width:100%;height:auto;display:block}.rama p{margin:0;font-size:14.5px;color:#C9CFD8;max-width:56ch}.rama p b{color:#fff;font-weight:600}@media(max-width:640px){.rama{grid-template-columns:1fr;gap:18px}.rama .mk img{width:min(260px,72%)}}.phero+section.dark{padding-top:1px}.flota{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(255,255,255,.14)}.flota div{background:var(--concreto-2);padding:24px 22px 28px}.flota b{display:block;font-family:'IBM Plex Mono',monospace;font-size:34px;font-weight:600;line-height:1;color:var(--senal);letter-spacing:-.03em}.flota span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:#8B95A2;margin-top:11px}.flota em{display:block;font-style:normal;font-size:13px;color:#C9CFD8;margin-top:14px;line-height:1.65}@media(max-width:900px){.flota{grid-template-columns:1fr 1fr}}@media(max-width:520px){.flota{grid-template-columns:1fr}}.frentes{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}.frente{background:var(--concreto-2);display:flex;flex-direction:column}.frente .ph{aspect-ratio:4/3;overflow:hidden}.frente .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.frente:hover .ph img{transform:scale(1.05)}.frente .tx{padding:20px 20px 24px;flex:1;display:flex;flex-direction:column}.frente h3{font-size:15.5px;color:#fff;line-height:1.3}.frente p{margin:10px 0 0;font-size:13.5px;color:#B7BFC9;line-height:1.6}.frente .mt{margin-top:auto;padding-top:16px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--senal);display:flex;justify-content:space-between;gap:12px}.frente .mt i{font-style:normal;color:#8B95A2}@media(max-width:900px){.frentes{grid-template-columns:1fr 1fr}}@media(max-width:560px){.frentes{grid-template-columns:1fr}}.rv{opacity:0;transform:translateY(20px);transition:opacity .75s ease,transform .75s ease}.rv.on{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero .bg img{animation:none}.div img,.obra .ph img{transition:none}html{scroll-behavior:auto}}.dark .tabla{border-top-color:var(--senal)}.dark .tabla .row{border-bottom-color:rgba(255,255,255,.14)}.dark .tabla .row span{color:#C9CFD8}.tabla .row .cif{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#B9932A;margin-top:5px}.dark .tabla .row .cif{color:var(--senal)}.tabla .row i{font-style:normal;display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acero);margin-top:5px}.dark .tabla .row i{color:#8B95A2}.cal .clientes span{background:var(--blanco)}.dark .clientes span{background:var(--concreto-2);border-color:rgba(255,255,255,.16);color:#C9CFD8}.sub{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#B9932A;margin:52px 0 0}.dark .sub{color:var(--senal)}.nota{margin-top:26px;font-size:13.5px;color:var(--acero)}.dark .nota{color:#8B95A2}.tabs{display:flex;flex-wrap:wrap;gap:9px;margin-top:36px}.tab-btn{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:transparent;border:1px solid var(--linea);color:var(--acero);padding:9px 16px;cursor:pointer;transition:.15s;white-space:nowrap}.tab-btn:hover{border-color:var(--senal);color:var(--concreto)}.tab-btn.on{background:var(--senal);border-color:var(--senal);color:var(--concreto)}.cal .tab-btn{background:var(--blanco)}.cal .tab-btn.on{background:var(--senal)}[data-cat-item][hidden]{display:none!important}.tabla-group[hidden]{display:none!important}@media(max-width:700px){.tabs{flex-wrap:wrap}}.nav>ul li.has-sub{position:relative}.nav>ul li.has-sub>a{display:flex;align-items:center;gap:6px}.nav>ul li.has-sub>a::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);flex:none;margin-top:-3px;opacity:.75}.nav>ul .submenu{list-style:none;display:block;gap:0;margin:0;padding:0;position:absolute;top:100%;left:0;min-width:250px;background:var(--concreto-2);border-top:2px solid var(--senal);box-shadow:0 20px 34px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:95}.nav>ul li.has-sub:hover>.submenu,.nav>ul li.has-sub:focus-within>.submenu{opacity:1;visibility:visible;transform:none}.nav>ul .submenu a{display:block;padding:11px 22px;font-size:12.5px;color:#C9CFD8;white-space:nowrap;background:transparent;border-left:2px solid transparent;transition:color .16s,background .16s,border-color .16s}.nav>ul .submenu li:nth-child(odd) a{background:rgba(255,255,255,.045)}.nav>ul .submenu a:hover{color:var(--senal);background:rgba(245,197,24,.10);border-left-color:var(--senal)}#menu .has-sub .sub-row{display:flex;align-items:stretch}#menu .has-sub .sub-row a{flex:1}#menu .sub-toggle{width:52px;flex:none;background:none;border:0;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}#menu .sub-toggle::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-right:1.5px solid #D3D8DE;border-bottom:1.5px solid #D3D8DE;transform:translate(-65%,-65%) rotate(45deg);transition:transform .2s}#menu .has-sub.open .sub-toggle::before{transform:translate(-50%,-35%) rotate(225deg)}#menu .submenu{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .25s ease;background:rgba(9,14,20,.34)}#menu .has-sub.open .submenu{max-height:640px}#menu .submenu a{display:block;position:relative;padding:12px var(--gut) 12px calc(var(--gut) + 24px);font-size:13.5px;color:#C3CBD6;background:transparent;border-bottom:1px solid rgba(255,255,255,.06)}
#menu .submenu li:last-child a{border-bottom:0}
#menu .submenu a::before{content:"";position:absolute;left:var(--gut);top:50%;width:7px;height:1px;background:rgba(245,197,24,.5);transform:translateY(-50%);transition:width .18s,background .18s}
#menu .submenu a:hover,#menu .submenu a:active{color:var(--senal)}
#menu .submenu a:hover::before,#menu .submenu a:active::before{width:14px;background:var(--senal)}#menu .submenu li:nth-child(odd) a{background:rgba(255,255,255,.035)}@media(max-width:1000px){.nav>ul .submenu{display:none}}.carousel{position:relative}.car-track{display:flex!important;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;background:none!important;padding-bottom:4px;scrollbar-width:none}.car-track::-webkit-scrollbar{display:none}.car-track.divs>.div{flex:0 0 clamp(255px,72vw,360px);scroll-snap-align:start;min-height:clamp(280px,44vw,400px)}.car-track.obras>.obra{flex:0 0 clamp(230px,62vw,290px);scroll-snap-align:start}.car-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(27,36,48,.72);cursor:pointer;z-index:5;transition:.18s;display:flex;align-items:center;justify-content:center}.cal .car-nav{background:rgba(27,36,48,.86)}.car-nav:hover{background:var(--senal);border-color:var(--senal)}.car-nav::before{content:"";width:9px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff}.car-nav:hover::before{border-color:var(--concreto)}.car-nav.prev{left:-6px}.car-nav.prev::before{transform:rotate(135deg);margin-left:3px}.car-nav.next{right:-6px}.car-nav.next::before{transform:rotate(-45deg);margin-right:3px}@media(max-width:640px){.car-nav{width:36px;height:36px}.car-nav.prev{left:2px}.car-nav.next{right:2px}}.dark .tab-btn{color:#C9CFD8;border-color:rgba(255,255,255,.18)}.dark .tab-btn:hover{color:var(--senal);border-color:var(--senal)}.dark .tab-btn.on{color:var(--concreto)}.row-chips{align-items:start}.row-chips[hidden]{display:none!important}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);padding:8px 14px;font-size:12.5px;line-height:1.55;color:#C9CFD8;max-width:380px}.chip[hidden]{display:none!important}.cal .chip{border-color:var(--linea);background:var(--blanco);color:var(--acero)}.chip-photo{flex:1 1 420px;padding:0;overflow:hidden;display:flex;flex-direction:column;max-width:560px;width:100%;transition:transform .2s,border-color .2s}.chip-photo:hover{border-color:var(--senal);transform:translateY(-2px)}.chip-photo .ph{aspect-ratio:16/10;overflow:hidden;background:#0f151d}.chip-photo .ph img{width:100%;height:100%;object-fit:cover;display:block}.chip-photo figcaption{padding:14px 16px 16px;font-size:13px;line-height:1.5;color:#C9CFD8}.cal .chip-photo figcaption{color:var(--acero)}
.frente .extra{display:grid;grid-template-columns:1fr 1fr;gap:2px}.frente .extra img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.tabla .row .fotos{grid-column:2/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),240px));justify-content:start;gap:8px;margin-top:12px}.tabla .row .fotos img{width:100%;min-width:0;max-width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;display:block;border:1px solid var(--linea);background:#0f151d}.dark .tabla .row .fotos img{border-color:rgba(255,255,255,.16)}@media(max-width:700px){.tabla .row .fotos{grid-column:1/-1}}
@media(max-width:640px){.tabla .row .fotos{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),172px));gap:6px}}

/* ---- páginas interiores ---- */
.phero{background:var(--concreto);color:var(--blanco);padding:calc(74px + clamp(44px,6vw,80px)) 0 clamp(38px,5vw,64px)}
.phero .kicker{color:var(--senal)}
.phero h1{font-size:clamp(30px,5.2vw,56px);color:#fff;letter-spacing:-.02em;line-height:1.05}
.phero p{margin:20px 0 0;max-width:760px;color:#C9CFD8;font-size:clamp(14.5px,1.6vw,17px);line-height:1.7}
.tipos{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.tipos a{border:1px solid var(--linea);padding:9px 15px;font-size:12.5px;text-decoration:none;color:var(--acero);transition:.18s;background:var(--blanco)}
.tipos a:hover{border-color:var(--senal);color:var(--concreto)}
.dark .tipos a,.phero .tipos a{border-color:rgba(255,255,255,.18);color:#C9CFD8;background:transparent}
.dark .tipos a:hover,.phero .tipos a:hover{border-color:var(--senal);background:var(--senal);color:var(--concreto)}
.mas{display:inline-block;margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#B9932A;text-decoration:none}
.mas:hover{color:var(--concreto)}
.dark .mas{color:var(--senal)}
.cta-band{background:var(--senal);padding:clamp(36px,5vw,58px) 0}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.cta-band h3{font-size:clamp(20px,2.8vw,30px);color:var(--concreto);max-width:640px}
.cta-band .btn.dark{background:var(--concreto);border-color:var(--concreto);color:var(--senal)}
.cta-band .btn.dark:hover{background:transparent;color:var(--concreto)}
.nav li.on>a,#menu li.on>.sub-row>a{color:var(--senal)}
.mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(14px,2vw,26px);margin-top:40px}
.mini div{border-top:2px solid var(--senal);padding-top:14px}
.div .t .nota{display:block;margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--senal);line-height:1.5}
.mini b{display:block;font-size:clamp(26px,3.4vw,38px);line-height:1}
.mini span{display:block;margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acero)}
.dark .mini span{color:#8B95A2}

/* Frentes recientes · tarjetas estilo brochure (kicker + título bicolor + cifras + fotos) */
.proyectos{margin-top:48px;display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.14)}
.proy{background:var(--concreto-2);padding:clamp(26px,4vw,40px) clamp(22px,4vw,38px) clamp(32px,4vw,44px)}
.proy .loc{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8B95A2;margin:0 0 8px}
.proy h3{font-size:clamp(22px,3vw,32px);color:#fff}
.proy h3 .t2{color:var(--senal)}
.proy .desc{margin-top:16px;font-size:14.5px;line-height:1.7;color:#C9CFD8;max-width:64ch}
.proy-stats{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;max-width:640px}
.proy-stats div{background:var(--senal);color:var(--concreto);padding:16px 16px 18px}
.proy-stats b{display:block;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:clamp(15px,1.9vw,22px);line-height:1.15;letter-spacing:-.02em;white-space:nowrap}
.proy-stats span{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;margin-top:7px;color:#4A4322}
.proy-fotos{margin-top:26px;display:grid;grid-template-columns:1.3fr 1fr;gap:6px}
.proy-fotos .fp-main{aspect-ratio:3/4;overflow:hidden}
.proy-fotos .fp-main img{width:100%;height:100%;object-fit:cover;display:block}
/* La columna lateral lleva su propia relación de aspecto: 15/26 = (3/4)/1.3.
   Así su altura sale exactamente igual a la de .fp-main sin depender de que
   el navegador estire la fila, que es lo que producía los desajustes. */
.proy-fotos .fp-side{display:grid;grid-template-rows:1fr 1fr;gap:6px;aspect-ratio:15/26;overflow:hidden;min-height:0}
.proy-fotos .fp-side.one{grid-template-rows:1fr}
.proy-fotos .fp-side img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
@media(max-width:820px){.proy-stats{grid-template-columns:1fr 1fr;max-width:none}.proy-stats div:last-child{grid-column:1/-1}}
@media(max-width:640px){.proy-fotos{grid-template-columns:1fr}.proy-fotos .fp-main{aspect-ratio:4/3}.proy-fotos .fp-side{aspect-ratio:auto;grid-template-rows:1fr;grid-template-columns:1fr 1fr;height:auto}.proy-fotos .fp-side.one{grid-template-columns:1fr}.proy-fotos .fp-side img{aspect-ratio:4/3;height:auto}}

/* Currículum de experiencia · descarga de PDF */
.cv-dl{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--linea)}
.cv-card{display:flex;flex-direction:column;gap:14px;background:var(--blanco);padding:28px 26px 26px;text-decoration:none;color:inherit;border-top:3px solid var(--senal)}
.cv-card:hover{background:var(--cal)}
.cv-card .t{font-size:18px;font-weight:600;color:var(--concreto)}
.cv-card .d{font-size:13.5px;color:var(--acero);line-height:1.6}
.cv-card .btn{margin-top:8px;align-self:flex-start;pointer-events:none}
@media(max-width:700px){.cv-dl{grid-template-columns:1fr}}

/* Cifras grandes: se evita IBM Plex Mono (su 0 lleva un punto en medio) */
.cifras b,.flota b,.proy-stats b{font-family:'Poppins','Poppins Respaldo',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em}

/* Divisiones (home): más contraste sobre fotos claras para que el texto no se pierda.
   El degradado original ya estaba casi transparente a media altura, donde cae el
   antetítulo, así que se sube la opacidad en la franja media. */
.div::after{background:linear-gradient(to top,rgba(15,21,29,.96) 0%,rgba(15,21,29,.90) 30%,rgba(15,21,29,.64) 55%,rgba(15,21,29,.22) 78%,rgba(15,21,29,0) 100%)}
.div .t p,.div .t h3,.div .t i,.div .t em{text-shadow:0 1px 6px rgba(0,0,0,.8)}

/* Cifras centradas: banda amarilla y bloque .mini.
   El letter-spacing de las etiquetas mono añade un hueco tras el último
   carácter; se compensa para que el número quede al centro óptico. */
.cifras div{text-align:center}
.cifras b{text-align:center}
.cifras span{margin-right:-.17em}
.mini div{text-align:center;border-top-width:2px}
.mini b,.mini span{text-align:center}
.mini span{margin-right:-.14em}

/* Fotos de obra: ninguna imagen puede desbordar su contenedor.
   min-width:0 evita que el tamaño intrínseco del archivo fuerce el ancho. */
img{max-width:100%;height:auto}
.tabla,.tabla .row,.chips,.row-chips{min-width:0;max-width:100%}
.tabla .row>*{min-width:0}
.chip-photo{min-width:0;max-width:min(560px,100%)}
.chip-photo .ph img{width:100%;height:100%;min-width:0;object-fit:cover}
@media(max-width:700px){.chip-photo{flex:1 1 100%}}

/* Frentes de trabajo: la foto ocupa siempre todo el ancho de su tarjeta,
   sea cual sea la proporcion del archivo. */
.filo.trabajo .ph{width:100%;display:block;overflow:hidden}
.filo.trabajo .ph img{width:100%;height:100%;min-width:100%;object-fit:cover;display:block}

/* Trayectoria: un recuadro por categoria con el desglose de proyectos dentro */
.chips .lista{flex:1 1 100%;max-width:none;margin:0;padding:4px 20px;list-style:none}
.chips .lista li{position:relative;padding:10px 0 10px 20px;font-size:13.5px;line-height:1.6;
  border-bottom:1px solid rgba(255,255,255,.10)}
.chips .lista li:last-child{border-bottom:0}
.chips .lista li::before{content:"";position:absolute;left:0;top:.95em;width:8px;height:1px;background:var(--senal)}
.cal .chips .lista li{border-bottom-color:var(--linea)}
.cal .chips .lista li::before{background:#B9932A}
@media(max-width:560px){.chips .lista{padding:2px 16px}.chips .lista li{padding-left:16px}}

/* Trayectoria · ajustes finales
   1) la foto ocupa el mismo ancho que el recuadro de texto
   2) el guion se centra con la primera linea del renglon */
.chips .chip-photo{flex:1 1 100%;max-width:none;width:100%;margin:0}
.chips .chip-photo .ph{aspect-ratio:16/10}

.chips .lista li{display:flex;align-items:flex-start;gap:14px;padding-left:0}
.chips .lista li::before{position:static;flex:none;width:11px;height:1px;
  margin-top:calc(1.6em / 2);margin-right:14px;background:var(--senal)}
@media(max-width:560px){.chips .lista li{gap:11px}.chips .lista li::before{margin-right:11px}}

/* Tarjetas de obra: el enlace pasa a ser un pie de tarjeta alineado
   con el resto del contenido, en vez de un texto suelto al margen. */
.obra .mas{margin:0;padding:14px 18px;border-top:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--concreto);background:var(--blanco);
  transition:background .18s ease,color .18s ease}
.obra .mas span{display:block}
.obra .mas::after{content:"";flex:none;width:16px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg) translateX(-2px);
  width:7px;height:7px;transition:transform .18s ease}
.obra .mas:hover,.obra .mas:focus-visible{background:var(--senal);color:var(--concreto)}
.obra .mas:hover::after{transform:rotate(-45deg) translate(1px,1px)}
.obra:hover .mas{background:var(--senal)}

/* Boton flotante de WhatsApp · abre la app nativa en movil y Web en escritorio */
.wa{position:fixed;right:clamp(14px,3vw,26px);z-index:70;
  bottom:calc(clamp(14px,3vw,26px) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:0;overflow:hidden;
  height:56px;width:56px;padding:0 16px;border-radius:28px;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:width .26s ease,gap .26s ease,box-shadow .2s ease}
.wa svg{flex:none;width:28px;height:28px;fill:currentColor;margin-left:-4px}
.wa-t{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transition:opacity .2s ease}
.wa:hover,.wa:focus-visible{width:176px;gap:12px;box-shadow:0 8px 26px rgba(0,0,0,.36)}
.wa:hover .wa-t,.wa:focus-visible .wa-t{opacity:1}
.wa:focus-visible{outline:3px solid var(--senal);outline-offset:3px}
@media(hover:none){.wa{width:56px}.wa-t{display:none}}
@media(prefers-reduced-motion:reduce){.wa{transition:none}.wa-t{transition:none}}
@media print{.wa{display:none}}

/* Empresas colaboradoras · muro de logos sobre fondo oscuro */
.logos-clientes{grid-template-columns:repeat(3,1fr);margin-top:30px;
  border-top-color:rgba(255,255,255,.14);border-left-color:rgba(255,255,255,.14)}
.logos-clientes figure{background:transparent;aspect-ratio:8/5;padding:18px;
  border-right-color:rgba(255,255,255,.14);border-bottom-color:rgba(255,255,255,.14)}
.logos-clientes img{max-height:66%;max-width:80%;opacity:.78;transition:opacity .22s}
.logos-clientes figure:hover img{opacity:1}
@media(max-width:760px){.logos-clientes{grid-template-columns:repeat(2,1fr)}
  .logos-clientes figure{padding:14px}}

/* Referencias comerciales */
.refs{margin-top:32px;border-top:2px solid var(--senal)}
.refs .refs-h,.refs .row{display:grid;grid-template-columns:1.05fr .85fr 1.35fr;gap:26px}
.refs .refs-h{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.24);
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--senal)}
.refs .row{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14);align-items:start}
.refs .row b{font-size:14px;font-weight:600;color:#fff}
.refs .row span{font-size:13.5px;color:#C9CFD8;line-height:1.6}
.refs .row span.ct{color:#8B95A2}
@media(max-width:760px){.refs .refs-h{display:none}
  .refs .row{grid-template-columns:1fr;gap:5px;padding:18px 0}
  .refs .row span.ct{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.05em}}

/* Botones sobre fondo claro: al pasar el cursor el fondo se vuelve
   transparente, y el amarillo de señal sobre blanco no se lee. Se deja
   texto oscuro por defecto y se conserva el amarillo solo donde el
   fondo es oscuro (secciones .dark, hero y encabezado). */
.btn:hover{background:transparent;color:var(--concreto)}
.dark .btn:hover,.hero .btn:hover,header .btn:hover{color:var(--senal)}
.btn.ghost:hover{color:var(--concreto)}

/* Submenú de escritorio: se quita el rayado cebra (se leía como recuadros
   sueltos), el panel pasa a vidrio esmerilado y al recorrer la lista los
   renglones que no están bajo el cursor se atenúan, de modo que solo
   destaque el que se está señalando. */
.nav>ul .submenu{background:rgba(27,36,48,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:2px solid var(--senal);box-shadow:0 24px 40px rgba(0,0,0,.5);padding:6px 0}
.nav>ul .submenu li:nth-child(odd) a{background:transparent}
.nav>ul .submenu a{transition:color .18s,background .18s,border-color .18s,opacity .18s,transform .18s}
.nav>ul .submenu:hover a{opacity:.38}
.nav>ul .submenu a:hover{opacity:1;color:var(--senal);background:rgba(245,197,24,.14);border-left-color:var(--senal);transform:translateX(3px)}
.nav>ul .submenu a:focus-visible{opacity:1}

/* Menú móvil: mismo criterio, sin rayado. */
#menu .submenu li:nth-child(odd) a{background:transparent}

@media(prefers-reduced-motion:reduce){
  .nav>ul .submenu:hover a{opacity:1}
  .nav>ul .submenu a:hover{transform:none}
}

/* Muro de logos: las columnas 1fr no pueden encogerse por debajo del ancho
   intrínseco de su imagen (min-width:auto), y el logo de Ecko Terra mide
   1228 px, así que ensanchaba su columna y empujaba la rejilla fuera del
   contenedor por la derecha. minmax(0,1fr) + min-width:0 lo corrige. */
.logos{grid-template-columns:repeat(5,minmax(0,1fr))}
.logos figure{min-width:0;padding:clamp(12px,1.3vw,18px)}
.logos img{min-width:0}
.logos-clientes{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos-clientes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- Logo A|CP en 3D dentro del recuadro de contacto ---- */
.form .intro{display:flex;flex-direction:column}
.acp3d{--acp-ancho:300px;--acp-canto:1.5px;--acp-vuelta:14s;flex:1;display:flex;align-items:center;justify-content:center;perspective:1100px;padding:34px 0 6px;min-height:0}
.acp3d__obj{position:relative;width:var(--acp-ancho);aspect-ratio:495/348;transform-style:preserve-3d;animation:acp-giro var(--acp-vuelta) linear infinite;will-change:transform}
.acp3d__obj i{position:absolute;inset:0;background:url("../img/alianza-a-cp-cimentaciones-paragon.svg") center/contain no-repeat;transform:translateZ(calc(var(--n) * var(--acp-canto) * -1));filter:brightness(var(--b))}
@keyframes acp-giro{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.acp3d:hover .acp3d__obj{animation-play-state:paused}
@media(max-width:860px){.acp3d{--acp-ancho:230px;padding:26px 0 4px}}
@media(prefers-reduced-motion:reduce){.acp3d__obj{animation:none;transform:rotateY(-22deg)}}

/* ================= Frentes de trabajo — amarillo transparente que entra deslizando ========= */
.filo.trabajo{background:transparent;gap:14px}
.filo.trabajo article{position:relative;overflow:hidden;background:transparent;border:1px solid rgba(185,147,42,.28);transition:border-color .3s}
.filo.trabajo article::after{content:"";position:absolute;inset:0;z-index:0;background:rgba(245,197,24,.19);transform:scaleX(0);transform-origin:left center;transition:transform .85s cubic-bezier(.22,.61,.36,1) var(--d,0ms),background .3s}
.filo.trabajo article:nth-child(even)::after{background:rgba(245,197,24,.10)}
.filo.trabajo article.vis::after{transform:scaleX(1)}
.filo.trabajo article:hover{border-color:rgba(185,147,42,.55)}
.filo.trabajo article:hover::after{background:rgba(245,197,24,.28)}
.filo.trabajo .ph,.filo.trabajo .tx{position:relative;z-index:1}
.filo.trabajo .ph{background:transparent}

/* ================= 16 especialidades — índice por disciplina ================= */
.serv{margin-top:44px}
.serv-cap{display:flex;align-items:baseline;gap:14px;margin:0 0 6px;padding-bottom:14px;border-bottom:2px solid var(--concreto)}
.serv-cap b{font-family:'IBM Plex Mono',monospace;font-size:clamp(30px,4vw,44px);font-weight:600;line-height:1;letter-spacing:-.04em;color:var(--concreto)}
.serv-cap span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--acero)}
.serv-grupos{column-count:2;column-gap:clamp(30px,5vw,72px);column-fill:balance}
.serv-g{display:inline-block;width:100%;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;vertical-align:top}
.serv-g{padding:30px 0 4px}
.serv-g h3{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#B9932A}
.serv-g h3::after{content:"";flex:1;height:1px;background:var(--linea)}
.serv-g ol{list-style:none;margin:0;padding:0;display:block;background:none;grid-template-columns:none;gap:0}
.serv-g li{display:block;padding:13px 0 13px 18px;background:none;border-bottom:1px solid var(--linea);font-size:14.5px;line-height:1.5;position:relative;overflow:hidden}
.serv-g li::before,.serv-g li::after{content:none}
.serv-g li span{display:block;color:var(--concreto)}
.serv-g li:hover span{color:#000}
@media(max-width:820px){.serv-grupos{column-count:1}.serv-g{padding:26px 0 2px}.serv-g li{font-size:14px}}

/* ================= Táctil: no existe el hover ================= */
@media (hover:none){
  /* --- espejo táctil de todos los efectos de hover del escritorio --- */
  /* lo que en escritorio se revela al pasar el cursor, en táctil se muestra siempre */
  .logos-clientes img{opacity:1}
  .obra .mas{background:var(--senal);color:var(--concreto)}

  /* lo que responde al cursor, aquí responde al dedo */
  .serv-g li,.filo.trabajo article,.chip-photo,.cv-card,.obra,.div,.frente,.logos figure{-webkit-tap-highlight-color:transparent}
  .serv-g li:active{background:rgba(27,36,48,.05)}
  .filo.trabajo article:active::after{background:rgba(245,197,24,.30)}
  .filo.trabajo article:active{border-color:rgba(185,147,42,.55)}
  .obra:active .ph img,.div:active img,.frente:active .ph img,.chip-photo:active img{transform:scale(1.05)}
  .chip-photo:active{border-color:var(--senal);transform:translateY(-2px)}
  .serv-g li:active span{color:#000}
  .obra--ficha:active{border-color:var(--senal);transform:translateY(-3px);box-shadow:0 14px 30px rgba(27,36,48,.16)}
  .cv-card:active{background:var(--cal)}
  .acp3d:active .acp3d__obj{animation-play-state:paused}

  /* botones y enlaces: realimentación inmediata al tocar */
  .btn:active,.f-send button:active,.tab-btn:active,.tipos a:active,.mas:active{background:var(--senal);border-color:var(--senal);color:var(--concreto)}
  .btn.ghost:active{background:var(--senal);color:var(--concreto)}
  .car-nav:active{background:var(--senal);border-color:var(--senal)}
  .nav ul a:active,.fgrid a:active{color:var(--senal)}
  .mas:active::after{transform:rotate(-45deg) translate(1px,1px)}
}
/* el logo 3D con menos capas en pantalla chica: mismo grosor, la mitad de trabajo para la GPU */
@media (max-width:640px){
  .acp3d{--acp-canto:2.4px}
  .acp3d__obj i:nth-child(n+13){display:none}
  .acp3d__obj{backface-visibility:hidden}
}
/* sin movimiento: todo se muestra ya en su estado final */
@media (prefers-reduced-motion:reduce){
  .filo.trabajo article::after{transform:scaleX(1);transition:none}
}

/* ====== Banner de sección con fondo fotográfico rotatorio (empresa y obras) ====== */
.phero{position:relative;overflow:hidden;isolation:isolate}
.phero:has(.bg){display:flex;align-items:flex-end;min-height:clamp(280px,34vh,340px);padding-bottom:clamp(46px,5.5vw,74px)}
.phero:has(.bg) > .wrap{width:100%}
.phero .bg{position:absolute;inset:0;z-index:0}
.phero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .85s ease;animation:slowzoom 26s ease-in-out infinite alternate}
.phero .bg img.on{opacity:.5}
.phero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(27,36,48,.97) 6%,rgba(27,36,48,.72) 46%,rgba(27,36,48,.42) 100%)}
.phero > .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.phero .bg img{animation:none;transition:none}}

/* ====== Submenú móvil: sin guiones, igual que la versión de escritorio ====== */
#menu .submenu a{padding-left:var(--gut);border-left:2px solid transparent;transition:color .16s,background .16s,border-color .16s}
#menu .submenu a::before{content:none}
#menu .submenu li:nth-child(odd) a{background:rgba(255,255,255,.045)}
#menu .submenu a:hover,#menu .submenu a:active{color:var(--senal);background:rgba(245,197,24,.10);border-left-color:var(--senal)}

/* ====== Submenú móvil: nivel claramente anidado, más claro que el menú principal ====== */
#menu .submenu{background:#2F3B4A;box-shadow:inset 3px 0 0 var(--senal),inset 0 1px 0 rgba(0,0,0,.35),inset 0 -1px 0 rgba(0,0,0,.35)}
#menu .submenu li:nth-child(odd) a{background:transparent}
#menu .submenu a{padding:13px var(--gut) 13px calc(var(--gut) + 18px);font-size:14px;color:#E1E7EE;border-bottom:1px solid rgba(255,255,255,.09);border-left:0}
#menu .submenu li:last-child a{border-bottom:0}
#menu .submenu a:hover,#menu .submenu a:active{color:var(--concreto);background:var(--senal);border-left:0}
/* la categoría abierta se marca para que se vea de dónde cuelga el submenú */
#menu .has-sub.open > .sub-row{background:rgba(0,0,0,.28)}
#menu .has-sub.open > .sub-row > a{color:var(--senal)}

/* ====== Menú móvil: jerarquía clara entre categoría y subpágina ====== */
/* nivel 1: más grande, en negrita y en blanco puro */
#menu > ul > li > a,
#menu > ul > li > .sub-row > a{font-size:16.5px;font-weight:600;color:#fff;letter-spacing:-.01em;padding-top:17px;padding-bottom:17px}
#menu > ul > li{border-bottom:1px solid rgba(255,255,255,.10)}
#menu > ul > li:last-child{border-bottom:0}

/* nivel 2: panel claramente más claro, escalonado y con riel dorado */
#menu .submenu{background:#3A4859;box-shadow:inset 4px 0 0 var(--senal),inset 0 2px 6px rgba(0,0,0,.4)}
#menu .submenu li a,
#menu .submenu li:nth-child(odd) a{background:transparent}
#menu .submenu a{padding:11px var(--gut) 11px calc(var(--gut) + 30px);font-size:13.5px;font-weight:400;color:#CBD5E1;border-bottom:1px solid rgba(255,255,255,.10);border-left:0}
#menu .submenu li:last-child a{border-bottom:0}
#menu .submenu a:hover,#menu .submenu a:active{color:var(--concreto);background:var(--senal)}

/* ====== Muro de logotipos: retícula continua y escala óptica pareja ====== */
/* La retícula usa gap de 1px sobre el color de línea: así los filetes nunca
   se cortan ni se desalinean, pase lo que pase con el contenido de cada celda. */
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);margin-top:46px}
.logos figure{margin:0;border:0;aspect-ratio:7/5;display:grid;place-items:center;padding:10px;background:var(--blanco);overflow:hidden}
/* Cada logo trae su propio --h calculado a partir de su proporción, para que
   todos pesen ópticamente lo mismo: los sellos cuadrados no se ven gigantes
   y los logotipos alargados no quedan en miniatura. */
.logos img{width:auto;height:auto;max-height:var(--h,34%);max-width:88%;object-fit:contain;content-visibility:visible}
.cal .logos figure,section.cal .logos figure{background:var(--blanco)}
.dark .logos{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.16)}
.dark .logos figure{background:var(--concreto-2)}
@media(max-width:980px){.logos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.logos{grid-template-columns:repeat(2,1fr)}}

/* ====== Aparición de las especialidades: sondeo y estratos ======
   Sin amarillo. La metáfora es la del oficio: primero se traza el nivel
   (el filete del encabezado corre de izquierda a derecha), luego baja la
   sonda por el costado (el riel vertical crece de arriba hacia abajo) y
   cada especialidad emerge desde debajo de su propia línea, como un
   testigo de suelo que sale del barreno, una capa tras otra. */
.serv-g{position:relative}
.serv-g h3::after{transform:scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.serv-g::before{content:"";position:absolute;left:0;top:40px;bottom:8px;width:1px;background:rgba(27,36,48,.22);transform:scaleY(0);transform-origin:top center;transition:transform 1s cubic-bezier(.33,.1,.29,1) .22s}
.serv-g li > span{display:block;transform:translateY(115%);opacity:0;transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .4s ease;transition-delay:var(--d,0ms)}
.serv-g.vis h3::after{transform:scaleX(1)}
.serv-g.vis::before{transform:scaleY(1)}
.serv-g.vis li > span{transform:none;opacity:1}
.serv-g li:nth-child(1){--d:340ms}
.serv-g li:nth-child(2){--d:430ms}
.serv-g li:nth-child(3){--d:520ms}
.serv-g li:nth-child(4){--d:610ms}
.serv-g li:nth-child(5){--d:700ms}
.serv-g li:nth-child(6){--d:790ms}
/* al pasar el cursor la sonda marca ese renglón */
.serv-g li{transition:background .2s}
.serv-g li:hover{background:rgba(27,36,48,.035)}
@media (prefers-reduced-motion:reduce){
  .serv-g h3::after,.serv-g::before{transform:none;transition:none}
  .serv-g li > span{transform:none;opacity:1;transition:none}
}

/* ====== Cursor: la mira de la marca (solo en equipos con puntero fino) ====== */
@media (hover:hover) and (pointer:fine){
  html,body{
    cursor:url("../img/cursor-mira.png?v=21") 16 16, auto;
    cursor:image-set(url("../img/cursor-mira.png?v=21") 1x, url("../img/cursor-mira@2x.png?v=21") 2x) 16 16, auto;
  }
  /* sobre lo que se puede activar, la mira se enciende con el punto central */
  a,button,summary,label,.tab-btn,.car-nav,.sub-toggle,.burger,.obra,.div,.frente,.chip-photo,.cv-card,[role="button"]{
    cursor:url("../img/cursor-mira-activo.png?v=21") 16 16, pointer;
    cursor:image-set(url("../img/cursor-mira-activo.png?v=21") 1x, url("../img/cursor-mira-activo@2x.png?v=21") 2x) 16 16, pointer;
  }
  /* en campos de escritura manda la usabilidad: cursor de texto normal */
  input,textarea,select,[contenteditable]{cursor:auto}
  input[type=submit],input[type=button],select{cursor:pointer}
}

/* ====== Del carrusel de obras a su ficha en la tabla ====== */
.obra{position:relative}
.obra-go{
  position:absolute;inset:0;z-index:4;text-decoration:none;
  font-size:0;line-height:0;color:transparent;
}
.obra-go:focus-visible{outline:3px solid var(--senal);outline-offset:-3px}
.obra--ficha{transition:border-color .2s,transform .2s,box-shadow .2s}
.obra--ficha:hover{
  border-color:var(--senal);transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(27,36,48,.16);
}
#obras-track .obra--ficha .txt::after{
  content:"Ver ficha de obra";
  display:block;margin-top:12px;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#B9932A;
  opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;
}
#obras-track .obra--ficha:hover .txt::after,
#obras-track .obra--ficha:focus-within .txt::after{opacity:1;transform:none}
@media (hover:none){
  #obras-track .obra--ficha .txt::after{opacity:1;transform:none}
}
/* al llegar, la ficha se marca unos segundos */
.tabla .row.ficha-destacada{position:relative}
.tabla .row.ficha-destacada::before{
  content:"";position:absolute;inset:-8px -14px;pointer-events:none;
  border:2px solid var(--senal);background:rgba(245,197,24,.13);
  animation:fichaDestaca 2.8s ease forwards;
}
@keyframes fichaDestaca{0%,68%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .obra--ficha{transition:none}
  #obras-track .obra--ficha .txt::after{transition:none}
  .tabla .row.ficha-destacada::before{animation:none;opacity:1}
}

.obra .mas{position:relative;z-index:5}

/* ====== Aviso de marcas en el pie ====== */
.aviso-marcas{
  margin:44px 0 0;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;line-height:1.75;color:#7B8593;max-width:82ch;
}
.aviso-marcas+.fin{margin-top:18px;padding-top:0;border-top:0}

/* ====== Ajustes de pantalla chica para lo añadido ====== */
@media (max-width:640px){
  /* el marco de la ficha destacada no debe sobresalir del margen lateral */
  .tabla .row.ficha-destacada::before{inset:-6px -8px}
  /* leyenda de la tarjeta: en táctil está siempre visible, que no robe altura */
  #obras-track .obra--ficha .txt::after{margin-top:9px;font-size:9px}
  /* aviso legal del pie */
  .aviso-marcas{margin-top:34px;padding-top:18px;font-size:11.5px;line-height:1.7}
  /* especialidades: una columna, sangría menor */
  .serv-g li{padding-left:14px}
}

/* ====== Menú móvil: desplazamiento propio y bloqueo del fondo ====== */
/* Con dos submenús abiertos el menú supera la altura de la pantalla. Antes no
   tenía desplazamiento propio, así que el dedo arrastraba la página de atrás y
   los últimos renglones quedaban fuera de alcance. */
@media (max-width:1000px){
  #menu.on{
    max-height:calc(100vh - 74px);
    max-height:calc(100svh - 74px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  /* barra de desplazamiento discreta, sin robar ancho al texto */
  #menu.on{scrollbar-width:thin;scrollbar-color:rgba(245,197,24,.45) transparent}
  #menu.on::-webkit-scrollbar{width:3px}
  #menu.on::-webkit-scrollbar-thumb{background:rgba(245,197,24,.45);border-radius:3px}
  #menu.on::-webkit-scrollbar-track{background:transparent}
  /* margen final para que el último renglón no quede pegado al borde */
  #menu.on > ul{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
}
/* mientras el menú está abierto la página de atrás no se mueve */
body.menu-abierto{position:fixed;left:0;right:0;width:100%;overflow:hidden}
/* con el menú abierto la barra superior nunca queda transparente, aunque el
   navegador crea que estamos arriba del todo */
body.menu-abierto header{
  background:rgba(27,36,48,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
/* el botón flotante estorba por encima de la página congelada */
body.menu-abierto .wa{opacity:0;visibility:hidden;pointer-events:none}

/* ====== Zonas táctiles del pie ======
   Los enlaces del pie medían 19 px de alto: por debajo del mínimo cómodo
   para el dedo. Se les da cuerpo sin alterar el ritmo visual del bloque. */
.fgrid a,.fin a{display:inline-block;padding-block:5px}
.fgrid p{line-height:1.75}
@media (max-width:640px){
  .fgrid a,.fin a{padding-block:7px}
  .fin{gap:10px 14px}
}

/* ====== Páginas legales (aviso de privacidad) ====== */
.legal-hero .nota{margin-top:20px}
.legal .wrap{max-width:820px}
.legal h2{
  font-size:clamp(19px,2.2vw,23px);margin:46px 0 14px;
  padding-top:26px;border-top:1px solid var(--linea);
}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal p{font-size:15.5px;line-height:1.78;color:var(--concreto);margin:0 0 14px;max-width:74ch}
.legal p b{font-weight:600}
.legal a{display:inline-block;padding-block:3px;color:#B9932A;text-decoration:none;border-bottom:1px solid rgba(185,147,42,.4)}
.legal a:hover{color:var(--concreto);border-bottom-color:var(--concreto)}
.fin a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.fin a:hover{color:var(--senal);border-bottom-color:var(--senal)}
@media (max-width:640px){
  .legal h2{margin:34px 0 12px;padding-top:20px}
  .legal p{font-size:14.5px}
}

/* =====================================================================
   1. BOTONES: la mira nunca se pierde
   Al pasar el cursor, el botón invierte sus colores. El claro se vuelve
   oscuro con perímetro amarillo; el oscuro se vuelve amarillo con
   perímetro oscuro. Antes el fondo pasaba a transparente y sobre el
   crema o sobre la banda amarilla la mira desaparecía.
   ===================================================================== */
.btn:hover,
.f-send button:hover{
  background:var(--concreto);
  border-color:var(--senal);
  color:var(--senal);
}
.btn.dark:hover{
  background:var(--senal);
  border-color:var(--concreto);
  color:var(--concreto);
}
.btn.ghost:hover{
  background:var(--concreto);
  border-color:var(--senal);
  color:var(--senal);
}
.hero .btn:hover,
header .btn:hover{background:var(--concreto);border-color:var(--senal);color:var(--senal)}
/* botón de "ver obra" dentro de las tarjetas */
.obra .mas:hover,.obra .mas:focus-visible,.obra:hover .mas{
  background:var(--concreto);border-color:var(--senal);color:var(--senal);
}
/* filtros del portafolio */
.tab-btn:hover{background:var(--concreto);border-color:var(--senal);color:var(--senal)}
.tab-btn.on:hover{background:var(--concreto);border-color:var(--senal);color:var(--senal)}
.cal .tab-btn:hover{background:var(--concreto)}
.dark .tab-btn:hover{background:var(--senal);border-color:var(--concreto);color:var(--concreto)}
/* flechas del carrusel: eran amarillas al pasar el cursor */
.car-nav:hover{background:var(--concreto);border-color:var(--senal)}
.car-nav:hover::before{border-color:var(--senal)}
/* chips de tipo de obra */
.dark .tipos a:hover,.phero .tipos a:hover{
  background:var(--concreto);border-color:var(--senal);color:var(--senal);
}
/* descarga del currículum: ahora es un botón real, no la tarjeta entera */
.cv-card .btn{pointer-events:auto}

/* =====================================================================
   2. MIRA OSCURA SOBRE LAS ZONAS AMARILLAS
   La mira amarilla desaparece sobre el amarillo de marca. En esas zonas
   se usa la misma mira dibujada en el azul tinta, con el centro igual
   de transparente.
   ===================================================================== */
@media (hover:hover) and (pointer:fine){
  .cta-band, .cta-band *,
  .cifras, .cifras *,
  .serv li, .serv li *,
  .filo.trabajo article, .filo.trabajo article *,
  .proy-stats div, .proy-stats div *{
    cursor:url("../img/cursor-mira-oscura.png?v=21") 16 16, auto;
    cursor:image-set(url("../img/cursor-mira-oscura.png?v=21") 1x,
                     url("../img/cursor-mira-oscura@2x.png?v=21") 2x) 16 16, auto;
  }
  /* elementos activables dentro de esas zonas, y botones amarillos sueltos */
  .cta-band a, .cta-band button,
  .cifras a, .cifras button,
  .serv li a, .filo.trabajo article a,
  .btn, .f-send button, .tab-btn.on, .obra .mas,
  .btn.dark:hover, .tab-btn.on:hover{
    cursor:url("../img/cursor-mira-activo-oscura.png?v=21") 16 16, pointer;
    cursor:image-set(url("../img/cursor-mira-activo-oscura.png?v=21") 1x,
                     url("../img/cursor-mira-activo-oscura@2x.png?v=21") 2x) 16 16, pointer;
  }
  /* cuando un botón claro se oscurece al pasar el cursor, la mira
     vuelve a la versión amarilla para que contraste con el fondo */
  .btn:hover, .f-send button:hover, .tab-btn:hover, .obra .mas:hover,
  .car-nav:hover, .btn.ghost:hover{
    cursor:url("../img/cursor-mira-activo.png?v=21") 16 16, pointer;
    cursor:image-set(url("../img/cursor-mira-activo.png?v=21") 1x,
                     url("../img/cursor-mira-activo@2x.png?v=21") 2x) 16 16, pointer;
  }
}

/* =====================================================================
   3. LAS 16 ESPECIALIDADES: BORDES DEFINIDOS
   Antes cada grupo se marcaba solo con un filete vertical tenue y los
   renglones con una línea inferior, así que los bloques no se leían como
   unidades. Ahora cada grupo es un recuadro cerrado con su encabezado.
   ===================================================================== */
.serv-grupos{column-gap:clamp(20px,3vw,36px)}
.serv-g{
  padding:0;
  margin:0 0 clamp(20px,3vw,32px);
  border:1px solid var(--linea);
  background:var(--blanco);
}
/* el filete vertical se sustituye por el marco */
.serv-g::before{display:none}

.serv-g h3{
  margin:0;
  padding:15px 20px;
  background:#F1EDE3;
  border-bottom:1px solid var(--linea);
  color:#8A6D18;
}
.serv-g h3::after{display:none}

.serv-g ol{padding:0}
.serv-g li{
  padding:14px 20px;
  padding-left:20px;
  border-bottom:1px solid var(--linea);
}
.serv-g li:last-child{border-bottom:0}
.serv-g li:hover{background:#FBF7EC}

@media (max-width:640px){
  .serv-g{margin-bottom:18px}
  .serv-g h3{padding:13px 16px}
  .serv-g li{padding:12px 16px}
}