/* =====================================================================
   Cimienta · Construcción y rehabilitación en Madrid · Prediseño de home
   Industrial, sólida y precisa como un plano técnico: hormigón claro,
   grafito, acero y amarillo de seguridad usado con disciplina.
   Archivo variable: titulares expandidos, texto en anchura normal y
   anotaciones técnicas en anchura condensada.
   ===================================================================== */
:root{
  --concrete:#E9E7E3; --concrete-2:#DCD9D3;
  --graphite:#1D1F22; --graphite-2:#151719; --graphite-3:#2A2D31;
  --steel:#5E646B; --steel-l:#A3A8AE;
  --yellow:#F2B705; --yellow-2:#FFC824;
  --white:#FFFFFF;
  --line:rgba(29,31,34,.14); --line-2:rgba(29,31,34,.28); --line-l:rgba(255,255,255,.16);
  --f:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pad:clamp(20px,4vw,56px); --max:1400px;
  --hd:78px;
  --ease:cubic-bezier(.2,.75,.2,1);
  --sr-accent:#F2B705; --sr-font:'Archivo', system-ui, sans-serif;
  --sr-bg:rgba(21,23,25,.97); --sr-radius:4px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:90px}
body{margin:0; background:var(--white); color:var(--graphite); font-family:var(--f); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:700; text-wrap:balance}
p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button{font-family:inherit}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Titulares: Archivo expandido, en minúscula normal */
main h2{font-stretch:118%; font-weight:760; font-size:clamp(34px,3.9vw,58px); line-height:1.03; letter-spacing:-.02em; color:var(--graphite); text-wrap:balance}

/* ---------- Botones y enlaces ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; font-family:var(--f); font-weight:700; font-size:15px; line-height:1; font-stretch:104%; padding:16px 24px; border-radius:2px; border:0; cursor:pointer; transition:background .25s, color .25s, box-shadow .25s, transform .35s var(--ease)}
.btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-yellow{background:var(--yellow); color:var(--graphite)}
.btn-yellow:hover{background:var(--yellow-2)}
.btn-ghost{color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62)}
.btn-ghost:hover{background:#fff; color:var(--graphite); box-shadow:inset 0 0 0 1.5px #fff}
.btn-lg{padding:19px 28px; font-size:16px}
.btn-full{width:100%}
.link-arrow{display:inline-flex; align-items:center; gap:10px; margin-top:28px; padding-bottom:6px; border-bottom:2px solid var(--yellow); font-weight:700; font-size:15.5px; color:var(--graphite)}
.link-arrow svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .35s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- Logotipo ---------- */
.logo{display:inline-flex; align-items:baseline; gap:11px; color:#fff; font-size:25px; flex:0 0 auto}
.logo-mark{display:inline-block; width:.74em; height:.74em; background:var(--yellow)}
.logo-word{font-stretch:125%; font-weight:800; line-height:1; letter-spacing:-.025em}

/* ---------- Cabecera ---------- */
.hd{position:sticky; top:0; z-index:90; background:var(--graphite); color:#fff; transition:box-shadow .3s}
.hd.is-scrolled{box-shadow:0 12px 30px -18px rgba(0,0,0,.6)}
.hd-in{display:flex; align-items:center; height:var(--hd)}
.nav{height:100%; margin-left:clamp(24px,2.6vw,40px)}
.nav > ul{display:flex; height:100%}
.nav > ul > li{display:flex}
.nav > ul > li > a{display:flex; align-items:center; gap:6px; padding:0 12px; font-size:15px; font-weight:500; color:rgba(255,255,255,.82); white-space:nowrap; position:relative; transition:color .2s}
.nav > ul > li > a::after{content:""; position:absolute; left:12px; right:12px; bottom:0; height:3px; background:var(--yellow); transform:scaleY(0); transform-origin:bottom; transition:transform .3s var(--ease)}
.nav > ul > li:hover > a,.nav > ul > li:focus-within > a{color:#fff}
.nav > ul > li:hover > a::after,.nav > ul > li:focus-within > a::after{transform:scaleY(1)}
.chev{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .3s}
.has-mega:hover .chev,.has-mega:focus-within .chev{transform:rotate(180deg)}

/* Megamenú de servicios */
.mega{position:absolute; left:0; right:0; top:100%; background:var(--white); color:var(--graphite); border-top:1px solid var(--line); box-shadow:0 50px 80px -40px rgba(0,0,0,.5); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .25s, transform .35s var(--ease), visibility 0s .35s}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1; visibility:visible; transform:none; transition:opacity .25s, transform .35s var(--ease)}
.mega-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:auto auto auto; column-gap:20px; padding:32px 0 28px}
.mcard{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; align-content:start}
.mcard-img{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--concrete); margin-bottom:14px}
.mcard-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.mcard-img::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease)}
.mcard:hover .mcard-img img{transform:scale(1.05)}
.mcard:hover .mcard-img::after,.mcard:focus-visible .mcard-img::after{transform:scaleX(1)}
.mcard b{font-stretch:112%; font-weight:720; font-size:16.5px; line-height:1.2}
.mcard > span:last-child{margin-top:6px; font-size:14px; line-height:1.45; color:var(--steel)}

.has-mega:hover .mcard{animation:megaIn .5s var(--ease) both}
.has-mega:hover .mcard:nth-child(2){animation-delay:.04s}
.has-mega:hover .mcard:nth-child(3){animation-delay:.08s}
.has-mega:hover .mcard:nth-child(4){animation-delay:.12s}
.has-mega:hover .mcard:nth-child(5){animation-delay:.16s}
@keyframes megaIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.mega-foot{display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:18px 0 22px; border-top:1px solid var(--line); font-size:14.5px; color:var(--steel)}
.mega-foot .link-arrow{margin-top:0; flex:0 0 auto}

/* Acciones */
.hd-actions{display:flex; align-items:center; gap:12px; margin-left:auto; padding-left:20px; flex:0 0 auto}
.hd-phone{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px; white-space:nowrap; padding:8px 4px; transition:color .2s}
.hd-phone svg{width:18px; height:18px; fill:none; stroke:var(--yellow); stroke-width:1.9}
.hd-phone:hover{color:var(--yellow)}
.hd-sr .sr-trigger{font-size:14px; font-weight:600; color:#fff; --sr-dot-ring:var(--graphite)}
.hd-cta{padding:14px 20px; font-size:14.5px}
.burger{display:none; width:46px; height:46px; border:1px solid rgba(255,255,255,.28); background:transparent; border-radius:2px; cursor:pointer; align-items:center; justify-content:center}
.burger span{position:relative; width:20px; height:2px; background:#fff; transition:background .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:#fff; transition:transform .3s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1380px){
  .nav{margin-left:clamp(20px,2.4vw,40px)}
  .nav > ul > li > a{padding:0 10px; font-size:14.5px}
  .nav > ul > li > a::after{left:10px; right:10px}
  .hd-actions{gap:10px}
  .hd-phone span{display:none}
  .hd-phone{width:44px; height:44px; justify-content:center; border:1px solid rgba(255,255,255,.22); border-radius:2px; padding:0}
  .hd-cta{padding:14px 17px}
}
@media (max-width:1240px){
  .nav,.hd-sr{display:none}
  .burger{display:inline-flex}
  .hd-phone span{display:inline}
  .hd-phone{width:auto; height:auto; border:0; padding:8px 4px}
}
@media (max-width:640px){
  :root{--hd:68px}
  .logo{font-size:22px}
  .hd-cta{display:none}
  .hd-phone span{display:none}
  .hd-phone{width:46px; height:46px; justify-content:center; border:1px solid rgba(255,255,255,.28); border-radius:2px; padding:0}
}

/* ---------- Menú móvil ---------- */
.mmenu{position:fixed; inset:0; z-index:85; background:var(--graphite); color:#fff; padding-top:var(--hd); overflow:auto; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .3s, transform .4s var(--ease), visibility 0s .4s}
.menu-open .mmenu{opacity:1; visibility:visible; transform:none; transition:opacity .3s, transform .4s var(--ease)}
.menu-open body{overflow:hidden}
.mmenu-in{max-width:640px; padding:18px var(--pad) 48px; border-top:1px solid var(--line-l)}
.macc{border-bottom:1px solid var(--line-l)}
.macc button{all:unset; box-sizing:border-box; width:100%; display:flex; justify-content:space-between; align-items:center; padding:18px 0; font-stretch:115%; font-weight:720; font-size:24px; letter-spacing:-.01em; cursor:pointer}
.macc button svg{width:22px; height:22px; fill:none; stroke:var(--yellow); stroke-width:2; transition:transform .3s}
.macc.is-open button svg{transform:rotate(180deg)}
.macc-panel{max-height:0; overflow:hidden; transition:max-height .45s var(--ease)}
.macc-panel a{display:block; padding:10px 0 10px 18px; font-size:16.5px; color:rgba(255,255,255,.78); border-left:3px solid var(--yellow)}
.macc-panel a:last-child{margin-bottom:18px}
.mlink{display:block; padding:18px 0; font-stretch:115%; font-weight:720; font-size:24px; letter-spacing:-.01em; border-bottom:1px solid var(--line-l)}
.mbtn{width:100%; margin-top:30px}
.mphone{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; font-weight:700; font-size:17px}
.mphone svg{width:18px; height:18px; fill:none; stroke:var(--yellow); stroke-width:1.9}
.mmenu .srm{--srm-line:rgba(255,255,255,.16)}

/* ---------- Hero ---------- */
.hero{position:relative; display:flex; flex-direction:column; height:calc(100vh - var(--hd)); height:calc(100svh - var(--hd)); min-height:620px; max-height:1040px; overflow:hidden; background:var(--graphite); color:#fff}
.hero-slides,.slide{position:absolute; inset:0}
.slide{opacity:0; visibility:hidden; transition:opacity 1.3s ease, visibility 0s linear 1.3s}
.slide.is-active{opacity:1; visibility:visible; transition:opacity 1.3s ease, visibility 0s}
.slide img{width:100%; height:100%; object-fit:cover; transform:scale(1.1); transition:transform 1.3s ease}
.slide.is-active img{transform:scale(1); transition:transform 9s cubic-bezier(.2,.6,.3,1)}
.slide:first-child img{animation:heroZoom 9s cubic-bezier(.2,.6,.3,1) backwards}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(21,23,25,.88) 0%, rgba(21,23,25,.66) 38%, rgba(21,23,25,.22) 70%, rgba(21,23,25,.1) 100%),
    linear-gradient(0deg, rgba(21,23,25,.9) 0%, rgba(21,23,25,.35) 30%, rgba(21,23,25,0) 55%),
    linear-gradient(180deg, rgba(21,23,25,.45) 0%, rgba(21,23,25,0) 22%)}
.hero-in{position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:flex-end}
.hero-main{display:grid; grid-template-columns:minmax(0,1fr) minmax(290px,350px); gap:clamp(32px,4vw,64px); align-items:end; padding-bottom:clamp(30px,5vh,56px)}
.hero h1{font-stretch:122%; font-weight:780; font-size:clamp(42px,5.1vw,84px); line-height:.98; letter-spacing:-.025em}
.hero h1 .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.hero h1 .ln > span{display:block; animation:lineUp 1.05s var(--ease) backwards}
.hero h1 .ln:nth-child(1) > span{animation-delay:.15s}
.hero h1 .ln:nth-child(2) > span{animation-delay:.27s}
.hero h1 .ln:nth-child(3) > span{animation-delay:.39s}
@keyframes lineUp{from{transform:translateY(105%)}to{transform:none}}
.hero-sub{margin-top:26px; max-width:560px; font-size:clamp(17px,1.3vw,19.5px); line-height:1.55; color:rgba(255,255,255,.86); animation:fadeUp .9s var(--ease) .6s backwards}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; animation:fadeUp .9s var(--ease) .72s backwards}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}

/* Ficha de obra (cajetín de plano) */
.fichas{display:grid}
.ficha{position:relative; grid-area:1/1; align-self:end; animation:clipIn 1.1s cubic-bezier(.77,0,.18,1) 1.2s backwards; background:rgba(21,23,25,.74); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.24); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .5s, transform .6s var(--ease), visibility 0s .6s}
.hero[data-index="0"] .ficha:nth-of-type(1),
.hero[data-index="1"] .ficha:nth-of-type(2),
.hero[data-index="2"] .ficha:nth-of-type(3){opacity:1; visibility:visible; transform:none; transition:opacity .6s .35s, transform .7s var(--ease) .35s, visibility 0s}
.ficha-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.2); font-stretch:78%; font-size:13px; font-weight:500; color:rgba(255,255,255,.66)}
.ficha-top dt{display:flex; align-items:center; gap:9px; color:#fff; font-weight:600}
.ficha-top dt::before{content:""; width:9px; height:9px; background:var(--yellow)}
.ficha-name dd{padding:16px 16px 18px; font-stretch:112%; font-weight:720; font-size:21px; line-height:1.15; letter-spacing:-.01em}
.ficha-cells{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.2)}
.ficha-cells > div{padding:11px 16px 13px}
.ficha-cells > div + div{border-left:1px solid rgba(255,255,255,.2)}
.ficha-cells dt{font-stretch:78%; font-size:12.5px; color:rgba(255,255,255,.6)}
.ficha-cells dd{font-size:16px; font-weight:600; margin-top:2px}

/* Controles del slider */
.hero-ctrl{position:relative; display:flex; align-items:center; gap:clamp(20px,3.2vw,48px); height:92px; animation:fadeIn .8s ease .55s backwards}
.hero-ctrl::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(255,255,255,.26); transform-origin:left; animation:drawX 1.3s cubic-bezier(.77,0,.18,1) .5s backwards}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes drawX{from{transform:scaleX(0)}to{transform:none}}
@keyframes drawY{from{transform:scaleY(0)}to{transform:none}}
.counter{display:flex; align-items:baseline; gap:4px; flex:0 0 auto; font-stretch:125%; line-height:1}
.counter b{font-size:52px; font-weight:800; letter-spacing:-.03em; min-width:2.1ch}
.counter span{font-size:18px; font-weight:600; color:rgba(255,255,255,.5)}
.tabs{display:flex; flex:1; gap:clamp(12px,2vw,28px); max-width:660px; align-self:stretch}
.tab{all:unset; box-sizing:border-box; position:relative; flex:1; display:flex; align-items:center; padding-top:2px; font-size:14.5px; font-weight:600; color:rgba(255,255,255,.6); cursor:pointer; transition:color .3s}
.tab i{position:absolute; left:0; right:0; top:-2px; height:3px; background:transparent; transition:background .3s}
.tab i::after{content:""; position:absolute; inset:0; background:var(--yellow); transform:scaleX(0); transform-origin:left}
.tab:hover{color:#fff}
.tab:hover i{background:rgba(255,255,255,.4)}
.tab.is-active{color:#fff}
.tab.is-active i::after{animation:progress var(--slider-interval,7000ms) linear forwards}
@keyframes progress{to{transform:scaleX(1)}}
.tab:focus-visible{outline:2px solid var(--yellow); outline-offset:4px}
.arrows{display:flex; gap:8px; margin-left:auto; flex:0 0 auto}
.arrows button{all:unset; box-sizing:border-box; width:54px; height:54px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.36); color:#fff; cursor:pointer; transition:background .25s, border-color .25s, color .25s}
.arrows button:hover{background:var(--yellow); border-color:var(--yellow); color:var(--graphite)}
.arrows button:focus-visible{outline:2px solid var(--yellow); outline-offset:3px}
.arrows svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2}

@media (max-width:1100px){
  .hero-main{grid-template-columns:minmax(0,1fr) 300px}
  .ficha-cells dd{font-size:15px}
}
@media (max-width:900px){
  .hero{height:auto; min-height:min(calc(100svh - var(--hd)), 880px); max-height:none}
  .hero-in{padding-top:190px}
  .hero::before{background:
    linear-gradient(0deg, rgba(21,23,25,.95) 0%, rgba(21,23,25,.78) 45%, rgba(21,23,25,.35) 75%, rgba(21,23,25,.55) 100%)}
  .hero-main{grid-template-columns:1fr; padding-bottom:30px}
  .hero h1{font-size:clamp(34px,7vw,60px)}
  .fichas{position:absolute; top:20px; left:var(--pad); width:min(320px, calc(100% - 2 * var(--pad)))}
  .ficha{align-self:start}
  .tab i{background:rgba(255,255,255,.28)}
  .ficha-top{padding:8px 14px}
  .ficha-name dd{font-size:17px; padding:12px 14px}
  .ficha-cells > div{padding:9px 14px 10px}
  .ficha-cells dd{font-size:14.5px}
  .hero-ctrl{height:76px; gap:18px}
  .counter b{font-size:38px}
  .counter span{font-size:15px}
  .arrows button{width:46px; height:46px}
}
@media (max-width:600px){ .tab span{display:none} }
@media (max-width:600px){
  .hero h1{animation:fadeUp .9s var(--ease) .15s backwards}
  .hero h1 .ln,.hero h1 .ln > span{display:inline}
  .hero h1 .ln:nth-child(1)::after{content:" "}
  .hero h1 .ln:nth-child(2)::after{content:"\A"; white-space:pre}
}
@media (max-width:520px){
  .hero h1{font-size:clamp(34px,9.6vw,44px)}
  .hero-sub{font-size:16.5px; margin-top:20px}
  .hero-cta{flex-direction:column; margin-top:26px}
  .hero-cta .btn{width:100%}
}

/* ---------- Cifras ---------- */
.stats{padding:clamp(56px,7vw,96px) 0; border-bottom:1px solid var(--line)}
.stats-in{display:grid; grid-template-columns:repeat(4,1fr); gap:44px clamp(24px,3.2vw,52px)}
.cota{position:relative; display:block; height:11px; margin-bottom:26px; border-left:1.5px solid var(--steel); border-right:1.5px solid var(--steel)}
.cota::before{content:""; position:absolute; left:0; right:0; top:5px; height:1px; background:var(--steel)}
.cota::after{content:""; position:absolute; left:-1.5px; top:3px; width:22px; height:5px; background:var(--yellow)}
.stat b{display:flex; align-items:baseline; gap:.12em; font-stretch:125%; font-weight:800; font-size:clamp(46px,5vw,78px); line-height:.95; letter-spacing:-.035em; white-space:nowrap}
.stat b small{font-size:.42em; font-weight:700; letter-spacing:-.01em}
.stat p{margin-top:14px; font-size:16px; line-height:1.5; color:var(--steel); max-width:26ch}
@media (max-width:900px){ .stats-in{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .stats-in{column-gap:20px} .stat b{font-size:clamp(38px,11.5vw,46px)} .stat p{font-size:15px} }

/* ---------- Encabezados de sección ---------- */
.sec-head{display:grid; grid-template-columns:1.15fr .85fr; gap:40px 64px; align-items:end; margin-bottom:clamp(40px,5vw,72px)}
.sec-head h2{max-width:17ch}
.sec-head p{font-size:17.5px; color:var(--steel); max-width:48ch}
.sec-head-split .link-arrow{margin-top:22px}
@media (max-width:860px){ .sec-head{grid-template-columns:1fr; gap:18px} }

/* ---------- Garantía Cimienta ---------- */
.guarantee{background:var(--concrete); padding:clamp(80px,10vw,140px) 0}
.guarantee-in{display:grid; grid-template-columns:5fr 7fr; gap:clamp(40px,6vw,100px); align-items:start}
.g-copy{position:sticky; top:calc(var(--hd) + 48px)}
.g-copy h2{max-width:13ch}
.g-copy p{margin-top:24px; font-size:18px; color:var(--steel); max-width:44ch}
.doc{position:relative; background:var(--white); padding:clamp(26px,4vw,56px); box-shadow:0 1px 0 rgba(29,31,34,.06), 0 50px 90px -50px rgba(29,31,34,.45)}
.doc-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:22px; border-bottom:2px solid var(--graphite)}
.doc-head p{font-size:14px; color:var(--steel)}
.doc-head b{display:block; font-stretch:120%; font-weight:800; font-size:24px; line-height:1.1; color:var(--graphite); margin-bottom:6px; letter-spacing:-.015em}
.doc-mark{flex:0 0 auto; width:24px; height:24px; background:var(--yellow)}
.clause{display:grid; grid-template-columns:minmax(0,1fr) 168px; gap:32px; padding:30px 0; border-bottom:1px solid var(--line)}
.cl-n{display:block; height:22px; font-stretch:76%; font-weight:600; font-size:15px; line-height:22px; color:var(--steel); margin-bottom:8px}
.clause h3{font-stretch:116%; font-weight:760; font-size:clamp(21px,1.75vw,26px); line-height:1.12; letter-spacing:-.015em}
.clause p{margin-top:10px; font-size:16px; line-height:1.6; color:var(--steel)}
.clause .cl-fig{margin:0; display:flex; flex-direction:column; justify-content:flex-start; padding:30px 0 0 24px; border-left:1px solid var(--line)}
.cl-fig b{font-stretch:125%; font-weight:800; font-size:38px; line-height:1; letter-spacing:-.03em; color:var(--graphite)}
.cl-fig b::after{content:""; display:block; width:30px; height:4px; background:var(--yellow); margin-top:12px}
.cl-fig span{margin-top:12px; font-size:14px; line-height:1.4; color:var(--steel)}
.doc-sign{display:grid; grid-template-columns:1fr 1fr; gap:32px; padding-top:30px}
.doc-sign > div{display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:var(--steel)}
.signature{width:100%; height:60px; fill:none; stroke:var(--graphite); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; border-bottom:1px solid var(--line-2)}
.signature path{stroke-dasharray:640; stroke-dashoffset:0; transition:stroke-dashoffset 1.8s var(--ease) .5s}
html.js .doc:not(.is-in) .signature path{stroke-dashoffset:640}
.sign-blank{display:block; height:60px; border-bottom:1px dashed var(--line-2)}
@media (max-width:1100px){
  .guarantee-in{grid-template-columns:1fr}
  .g-copy{position:static}
  .g-copy h2{max-width:16ch}
}
@media (max-width:600px){
  .clause{grid-template-columns:1fr; gap:18px; padding:26px 0}
  .doc{padding:24px 20px 28px}
  .clause .cl-fig{flex-direction:row; align-items:center; justify-content:flex-start; gap:16px; padding:16px 0 0; border-left:0; border-top:1px dashed var(--line-2)}
  .clause p{font-size:15.5px}
  .cl-fig b{flex:0 0 104px; white-space:nowrap; font-size:30px}
  .cl-fig b::after{display:none}
  .cl-fig span{margin-top:0}
  .doc-sign{grid-template-columns:1fr; gap:26px}
  .sign-blank{height:44px}
}

/* ---------- Servicios ---------- */
.services{padding:clamp(80px,10vw,140px) 0}
.svc-list{position:relative; border-top:2px solid var(--graphite)}
.svc{position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.78fr) 32px; gap:clamp(24px,3vw,52px); align-items:baseline; padding:clamp(30px,3vw,42px) 0; border-bottom:1px solid var(--line)}
.svc::before{content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:6px; background:var(--yellow); transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease)}
.svc h3{font-stretch:120%; font-weight:760; font-size:clamp(26px,2.6vw,40px); line-height:1.04; letter-spacing:-.02em; transition:transform .5s var(--ease)}
.svc-desc{font-size:16px; line-height:1.55; color:var(--steel)}
.svc-scope li{position:relative; padding:0 0 8px 18px; font-size:15px; font-weight:500; line-height:1.45}
.svc-scope li:last-child{padding-bottom:0}
.svc-scope li::before{content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; background:var(--yellow)}
.svc-go{align-self:center; width:28px; height:28px; fill:none; stroke:var(--graphite); stroke-width:1.8; transition:transform .45s var(--ease)}
.svc:hover::before,.svc:focus-visible::before{transform:scaleY(1)}
.svc:hover h3,.svc:focus-visible h3{transform:translateX(24px)}
.svc:hover .svc-go{transform:translateX(6px)}
.svc-thumb{display:none}
.svc-float{position:absolute; left:0; top:0; z-index:3; width:clamp(240px,21vw,310px); aspect-ratio:4/3; overflow:hidden; pointer-events:none; opacity:0; background:var(--concrete); box-shadow:0 30px 60px -28px rgba(0,0,0,.55); transition:opacity .3s}
.svc-list.is-hover .svc-float{opacity:1}
.svc-float img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; clip-path:inset(100% 0 0 0); transition:clip-path 0s linear .6s}
.svc-float img.is-on{z-index:2; clip-path:inset(0 0 0 0); transition:clip-path .6s var(--ease)}
@media (hover:none),(pointer:coarse){ .svc-float{display:none} }
@media (max-width:1100px){
  .svc{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px; row-gap:14px}
  .svc h3{grid-row:span 2}
  .svc-scope{grid-column:2}
  .svc-go{grid-column:3; grid-row:1 / span 2}
  .svc-scope{display:flex; flex-wrap:wrap; gap:6px 20px}
  .svc-scope li{padding-bottom:0}
}
@media (max-width:760px){
  .svc-float{display:none}
  .svc{grid-template-columns:1fr; gap:12px; padding:28px 0 30px; align-items:start}
  .svc-desc{font-size:15.5px}
  .svc-scope li{padding-bottom:6px}
  .svc h3{grid-row:auto}
  .svc-scope,.svc-go{grid-column:auto; grid-row:auto}
  .svc-scope{display:block}
  .svc-go{display:none}
  .svc-thumb{display:block; aspect-ratio:2.3/1; overflow:hidden; background:var(--concrete); margin-bottom:6px}
  .svc-thumb img{width:100%; height:100%; object-fit:cover}
  .svc:hover h3{transform:none}
  .svc::before{display:none}
}

/* ---------- Proyectos ---------- */
.projects{background:var(--graphite); color:#fff; padding:clamp(80px,10vw,140px) 0}
.projects h2{color:#fff}
.projects .sec-head p{color:rgba(255,255,255,.72)}
.projects .link-arrow{color:#fff}
.mosaic{--mgap:clamp(10px,1.2vw,16px); --mrow:calc((min(100vw, var(--max)) - 2 * var(--pad) - 2 * var(--mgap)) / 3 * .74); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,var(--mrow)); gap:var(--mgap); grid-template-areas:"a a b" "a a c" "d e f"}
.t-a{grid-area:a} .t-b{grid-area:b} .t-c{grid-area:c} .t-d{grid-area:d} .t-e{grid-area:e} .t-f{grid-area:f}
.tile{position:relative; display:block; overflow:hidden; background:var(--graphite-3); isolation:isolate}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease)}
.tile::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(21,23,25,.92) 0%, rgba(21,23,25,.45) 38%, rgba(21,23,25,0) 66%)}
.tile:hover img{transform:scale(1.05)}
.tile-info{position:absolute; left:0; right:0; bottom:0; padding:clamp(18px,2vw,28px)}
.tile h3{font-stretch:115%; font-weight:720; font-size:clamp(18px,1.55vw,23px); line-height:1.15; letter-spacing:-.01em; max-width:20ch}
.t-a h3{font-size:clamp(23px,2.3vw,34px)}
.tile dl{display:flex; flex-wrap:wrap; margin-top:14px; border-top:1px solid rgba(255,255,255,.28); transition:border-color .4s}
.tile dl > div{padding:10px 16px 0 0; margin-right:16px; border-right:1px solid rgba(255,255,255,.2)}
.tile dl > div:last-child{border-right:0; margin-right:0; padding-right:0}
.tile dt{font-stretch:78%; font-size:12px; color:rgba(255,255,255,.62)}
.tile dd{font-size:14px; font-weight:600; white-space:nowrap}
.tile:hover dl,.tile:focus-visible dl{border-color:var(--yellow)}
.tile-type{position:absolute; top:clamp(14px,1.6vw,22px); left:clamp(14px,1.6vw,22px); display:inline-flex; align-items:center; gap:8px; padding:7px 11px 7px 9px; background:rgba(21,23,25,.82); font-stretch:82%; font-size:13px; font-weight:600; line-height:1; color:#fff}
.tile-type::before{content:""; width:8px; height:8px; background:var(--yellow)}
@media (max-width:900px){
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto; grid-template-areas:"a a" "b c" "d e" "f f"}
  .tile{aspect-ratio:4/3}
  .t-a,.t-f{aspect-ratio:2/1}
}
@media (max-width:600px){
  .mosaic{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--pad) * -1); padding:0 var(--pad) 6px; scroll-padding:0 var(--pad); scrollbar-width:none}
  .mosaic::-webkit-scrollbar{display:none}
  .tile,.t-a,.t-f{flex:0 0 84%; aspect-ratio:auto; height:400px; scroll-snap-align:start}
  .t-a h3{font-size:23px}
}

/* ---------- Proceso (diagrama de Gantt) ---------- */
.process{background:var(--concrete); padding:clamp(80px,10vw,140px) 0}
.gantt{background:var(--white); padding:6px clamp(18px,2.6vw,40px) 14px}
.g-row{display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); gap:clamp(20px,3vw,44px); align-items:center; border-bottom:1px solid var(--line)}
.g-steps .g-row:last-child{border-bottom:0}
.g-scale{border-bottom:2px solid var(--graphite)}
.g-scale .g-label{align-self:end; font-stretch:78%; font-size:13px; font-weight:600; color:var(--steel); padding:14px 0 12px}
.g-track{position:relative; align-self:stretch; min-height:48px; border-right:1px solid var(--line); background-image:repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 14))}
.g-scale .g-track{display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); min-height:0}
.g-scale .g-track > span:not(.g-today){padding:40px 0 12px 6px; font-stretch:78%; font-size:12.5px; font-weight:600; color:var(--steel)}
.g-label{display:flex; gap:18px; padding:22px 0}
.g-n{flex:0 0 auto; min-width:2.2ch; padding-top:2px; font-stretch:125%; font-weight:800; font-size:15px; color:var(--steel)}
.g-label h3{font-stretch:112%; font-weight:720; font-size:19px; line-height:1.2; letter-spacing:-.005em}
.g-label p{margin-top:4px; font-size:15.5px; line-height:1.5; color:var(--steel)}
.bar,.milestone{position:absolute; top:50%}
.bar{left:calc((var(--s) - 1) / 14 * 100%); width:calc((var(--e) - var(--s)) / 14 * 100%); height:14px; background:var(--graphite); transform:translateY(-50%); transform-origin:left center; transition:transform 1s var(--ease), background .3s}
.bar em,.milestone em{position:absolute; top:50%; left:calc(100% + 10px); transform:translateY(-50%); white-space:nowrap; font-style:normal; font-stretch:78%; font-size:13.5px; font-weight:600; color:var(--graphite)}
.bar-main{background:var(--yellow)}
.bar-main em{left:14px}
.bar-open{background:repeating-linear-gradient(-45deg, var(--graphite) 0 3px, transparent 3px 7px); box-shadow:inset 0 0 0 1px var(--graphite)}
.bar-open em,.milestone em{left:auto; right:calc(100% + 12px)}
.milestone{left:calc((var(--s) - 1) / 14 * 100%); width:20px; height:20px; margin-left:-10px; transform:translateY(-50%); transition:transform .6s var(--ease) .9s}
.milestone::before{content:""; position:absolute; inset:2px; background:var(--yellow); border:2px solid var(--graphite); transform:rotate(45deg)}
.milestone em{right:calc(100% + 10px)}
.g-steps .g-row:hover .bar:not(.bar-main):not(.bar-open){background:var(--steel)}
html.js .gantt:not(.is-in) .bar{transform:translateY(-50%) scaleX(0)}
html.js .gantt:not(.is-in) .milestone{transform:translateY(-50%) scale(0)}
.gantt .g-row:nth-child(2) .bar{transition-delay:.12s}
.gantt .g-row:nth-child(3) .bar{transition-delay:.24s}
.gantt .g-row:nth-child(4) .bar{transition-delay:.36s}
.gantt .g-row:nth-child(6) .bar{transition-delay:1.1s}
@media (max-width:820px){
  .gantt{padding:4px 16px 10px}
  .g-row{grid-template-columns:1fr; gap:6px}
  .g-scale{gap:0}
  .g-scale .g-label{padding:12px 0 0}
  .g-scale .g-track > span:not(.g-today){padding:36px 0 10px 4px; font-size:11.5px}
  .g-label{padding:20px 0 4px; gap:14px}
  .g-track{min-height:40px; margin-bottom:14px}
  .g-label h3{font-size:18px}
  .g-label p{font-size:15px}
}

/* ---------- Jefe de obra ---------- */
.manager{padding:clamp(80px,10vw,140px) 0}
.manager-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,100px); align-items:center}
.mg-media{position:relative}
.mg-media img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 30%; background:var(--concrete)}
.mg-card{position:absolute; right:-28px; bottom:32px; max-width:320px; background:var(--graphite); color:#fff; padding:24px 26px 22px}
.mg-mark{position:absolute; top:0; right:0; width:14px; height:14px; background:var(--yellow)}
.mg-card b{display:block; font-stretch:116%; font-weight:760; font-size:22px; line-height:1.15; letter-spacing:-.01em}
.mg-card > span:not(.mg-mark){display:block; margin-top:6px; font-size:14px; line-height:1.45; color:rgba(255,255,255,.72)}
.mg-card a{display:inline-flex; align-items:center; gap:9px; margin-top:16px; font-stretch:110%; font-weight:700; font-size:17px; color:var(--yellow)}
.mg-card a svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9}
.mg-copy h2{max-width:14ch}
.mg-lead{margin-top:22px; font-size:18px; color:var(--steel); max-width:48ch}
.mg-list{margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:26px 34px}
.mg-list li{position:relative; padding-top:16px; border-top:2px solid var(--graphite); font-size:16px; line-height:1.5; color:var(--steel)}
.mg-list li::before{content:""; position:absolute; left:0; top:-2px; width:34px; height:2px; background:var(--yellow)}
.mg-list b{display:block; margin-bottom:6px; font-stretch:110%; font-weight:700; font-size:17px; color:var(--graphite)}
.mg-quote{margin-top:38px; padding-left:24px; border-left:4px solid var(--yellow)}
.mg-quote p{font-size:20px; line-height:1.5; font-weight:500; color:var(--graphite)}
.mg-quote cite{display:block; margin-top:12px; font-style:normal; font-size:14px; color:var(--steel)}
@media (max-width:1200px){
  .manager-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
@media (max-width:960px){
  .manager-in{grid-template-columns:1fr}
  .mg-media img{aspect-ratio:3/2}
  .mg-card{right:16px; bottom:16px; left:auto}
}
@media (max-width:560px){
  .mg-list{grid-template-columns:1fr; gap:22px}
  .mg-media img{aspect-ratio:1/1}
  .mg-card{position:relative; left:auto; right:auto; bottom:auto; margin:-56px 16px 0; max-width:none; padding:20px 22px}
}

/* ---------- Certificaciones ---------- */
.certs{background:var(--graphite); color:#fff; padding:clamp(64px,8vw,110px) 0}
.certs-copy{display:grid; grid-template-columns:1.15fr .85fr; gap:18px 64px; align-items:end; margin-bottom:clamp(44px,5vw,72px)}
.certs h2{color:#fff; max-width:16ch}
.certs-copy p{font-size:17.5px; color:rgba(255,255,255,.72); max-width:46ch}
.seals{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,2.4vw,36px); padding-top:clamp(36px,4vw,56px); border-top:1px solid var(--line-l)}
.seal{width:100%; max-width:184px; height:auto; margin:0 auto; overflow:visible; transition:transform .6s var(--ease)}
.seals li:hover .seal{transform:rotate(-10deg)}
.seal .r1{fill:none; stroke:rgba(255,255,255,.6); stroke-width:1.5}
.seal .r2{fill:none; stroke:rgba(255,255,255,.3); stroke-width:1}
.seal .arc{fill:rgba(255,255,255,.85); font-family:var(--f); font-size:10.5px; font-weight:600; letter-spacing:.03em; font-stretch:92%}
.seal .dot{fill:var(--yellow)}
.seal .c-s{fill:rgba(255,255,255,.7); font-family:var(--f); font-size:12.5px; font-weight:600; font-stretch:90%}
.seal .c-l{fill:#fff; font-family:var(--f); font-size:30px; font-weight:800; font-stretch:115%}
.seal .c-m{fill:#fff; font-family:var(--f); font-size:17px; font-weight:800; font-stretch:100%}
@media (max-width:860px){ .certs-copy{grid-template-columns:1fr} }
@media (max-width:620px){
  .seals{display:flex; flex-wrap:wrap; justify-content:center; gap:22px 18px}
  .seals li{width:calc(50% - 9px); max-width:170px}
}

/* ---------- Testimonios ---------- */
.reviews{background:var(--concrete); padding:clamp(80px,10vw,140px) 0}
.rev-top{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:clamp(40px,5vw,64px)}
.rev-top h2{max-width:15ch}
.rev-score{display:flex; align-items:center; gap:16px; flex:0 0 auto}
.rev-score > b{font-stretch:125%; font-weight:800; font-size:64px; line-height:1; letter-spacing:-.03em}
.rev-score .stars{display:block; color:var(--yellow); font-size:20px; letter-spacing:2px; text-shadow:0 0 1px rgba(29,31,34,.35)}
.rev-score p{margin-top:2px; font-size:14px; color:var(--steel)}
.rev-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto 1fr auto; column-gap:clamp(16px,2vw,24px)}
.rev{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; background:var(--white); border-top:3px solid var(--yellow)}
.rev-ref{display:grid; grid-template-columns:minmax(0,1fr) auto; border-bottom:1px solid var(--line)}
.rev-ref > div{padding:13px 22px}
.rev-ref > div + div{border-left:1px solid var(--line)}
.rev-ref dt{font-stretch:78%; font-size:12.5px; color:var(--steel)}
.rev-ref dd{font-size:14.5px; font-weight:600}
.rev blockquote{margin:0; padding:28px 26px 0; font-size:18px; line-height:1.58}
.rev figcaption{display:flex; align-items:flex-start; gap:14px; margin:26px 26px 0; padding:22px 0 26px; border-top:1px solid var(--line)}
.ini{flex:0 0 auto; display:grid; place-items:center; width:46px; height:46px; background:var(--graphite); color:var(--yellow); font-stretch:115%; font-weight:800; font-size:15px}
.rev figcaption b{display:block; font-size:15.5px}
.rev figcaption > span:last-child{padding-top:2px}
.rev figcaption small{display:block; margin-top:2px; font-size:14px; line-height:1.4; color:var(--steel)}
@media (max-width:1100px){
  .rev-ref > div{padding:12px 18px}
  .rev blockquote{padding:24px 22px 0; font-size:17px}
  .rev figcaption{margin:24px 22px 0; padding:20px 0 22px}
}
@media (max-width:980px){
  .rev-top{flex-direction:column; align-items:flex-start; gap:24px}
  .rev-grid{grid-template-columns:1fr; grid-template-rows:none; row-gap:16px}
  .rev{display:flex; flex-direction:column; grid-row:auto}
}

/* ---------- Prensa ---------- */
.press{border-bottom:1px solid var(--line)}
.press-in{display:flex; align-items:center; flex-wrap:wrap; gap:22px 48px; padding-top:38px; padding-bottom:38px}
.press-in > p{flex:0 0 auto; font-size:14px; font-weight:600; color:var(--steel)}
.press ul{display:flex; flex:1; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 36px; color:#7A8087}
.press li{white-space:nowrap; line-height:1; transition:color .3s}
.press li:hover{color:var(--graphite)}
.m-mundo{font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:22px; letter-spacing:.03em}
.m-exp{font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700; font-size:24px}
.m-ideal{font-weight:800; font-size:22px; letter-spacing:-.03em}
.m-ideal span{font-weight:400}
.m-tm{font-weight:800; font-style:italic; font-stretch:92%; font-size:23px; letter-spacing:-.035em}
.m-abc{font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:27px; letter-spacing:.08em}
.m-eco{font-weight:700; font-size:22px; letter-spacing:-.02em}
.m-eco span{font-weight:300}
@media (max-width:1100px){
  .press-in{flex-direction:column; align-items:stretch; gap:20px}
  .press-in > p{text-align:center}
}
@media (max-width:820px){
  .press ul{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); justify-items:center; gap:22px 16px}
}
@media (max-width:480px){
  .press ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Llamada final ---------- */
.final{position:relative; background:var(--yellow); color:var(--graphite); padding:clamp(84px,10vw,136px) 0 clamp(80px,10vw,130px)}
.final::before{content:""; position:absolute; left:0; right:0; top:0; height:12px; background:repeating-linear-gradient(-45deg, var(--graphite) 0 14px, var(--yellow) 14px 28px)}
.final-in{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(40px,5vw,80px); align-items:start}
.final h2{font-size:clamp(32px,3.3vw,48px)}
.final h2 span{display:block}
.final-steps{margin-top:38px; border-top:2px solid var(--graphite)}
.final-steps li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; padding:18px 0; border-bottom:1px solid rgba(29,31,34,.25)}
.final-steps li > span{font-stretch:125%; font-weight:800; font-size:24px; line-height:1.1}
.final-steps p{font-size:16px; line-height:1.5; color:rgba(29,31,34,.82)}
.final-steps b{display:block; font-stretch:108%; font-weight:700; font-size:17.5px; color:var(--graphite); margin-bottom:2px}
.final-phone{margin-top:30px; font-size:16px; font-weight:500}
.final-phone a{display:inline-block; white-space:nowrap; margin-left:6px; font-stretch:120%; font-weight:800; font-size:24px; letter-spacing:-.01em; border-bottom:2px solid var(--graphite)}
.quote{background:var(--graphite); color:#fff; padding:clamp(24px,3vw,44px)}
.q-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:end}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:18px; min-width:0}
.field label{font-size:13.5px; font-weight:600; line-height:1.3; color:rgba(255,255,255,.82)}
.field input,.field select{width:100%; min-width:0; height:52px; font:inherit; font-size:16px; line-height:1.2; color:#fff; background:var(--graphite-3); border:1px solid rgba(255,255,255,.16); border-radius:2px; padding:0 14px; transition:border-color .2s, box-shadow .2s}
.field select{-webkit-appearance:none; appearance:none; padding-right:40px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2B705' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px}
.field select option{color:var(--graphite); background:#fff}
.field input::placeholder{color:rgba(255,255,255,.42)}
.field input:focus,.field select:focus{outline:none; border-color:var(--yellow); box-shadow:0 0 0 1px var(--yellow)}
.check{display:flex; align-items:flex-start; gap:10px; margin:4px 0 20px; font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.72); cursor:pointer}
.check input{margin-top:2px; accent-color:var(--yellow)}
.check a{text-decoration:underline; text-underline-offset:2px}
.q-note{margin-top:14px; text-align:center; font-size:13px; color:rgba(255,255,255,.55)}
@media (max-width:1100px){ .final-in{grid-template-columns:1fr} .final h2{max-width:20ch} }
@media (max-width:520px){ .q-row{grid-template-columns:1fr; gap:0} .quote .btn-lg{white-space:normal; line-height:1.25} }

/* ---------- Pie ---------- */
.ft{background:var(--graphite-2); color:rgba(255,255,255,.68); font-size:15px; padding:clamp(64px,7vw,96px) 0 28px}
.ft-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.15fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--line-l)}
.ft .logo{font-size:28px}
.ft-brand p{margin:20px 0 26px; max-width:32ch; font-size:15px; line-height:1.6}
.ft h4{margin-bottom:16px; font-stretch:112%; font-weight:700; font-size:16px; color:#fff}
.ft ul{display:grid; gap:9px}
.ft a{transition:color .2s}
.ft a:hover{color:#fff}
.nw{white-space:nowrap}
.ft-muted{margin-top:12px; font-size:13.5px; color:rgba(255,255,255,.45)}
.ft-link{display:inline-block; margin-top:12px; font-weight:600; color:var(--yellow)}
.ft .ft-link:hover{color:var(--yellow-2)}
.ft-certs li{position:relative; padding-left:16px}
.ft-certs li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; background:var(--yellow)}
.ft-bot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 30px; padding-top:26px; font-size:13px; color:rgba(255,255,255,.45)}
.ft-bot nav{display:flex; gap:22px}
@media (max-width:1100px){
  .ft-top{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ft-brand{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px}
  .ft-brand p{margin:0; flex:1; min-width:260px}
}
@media (max-width:700px){ .ft-top{grid-template-columns:1fr 1fr; gap:36px 24px} }
@media (max-width:359px){ .ft-top{grid-template-columns:1fr} }

/* =====================================================================
   Animación: secuencia del hero, cursor "mira técnica" y revelados
   (los estados ocultos solo existen con html.anim, que añade el script
   cuando hay IntersectionObserver y no se pide movimiento reducido)
   ===================================================================== */

/* Logotipo: el bloque amarillo "se coloca" al cargar */
.hd .logo-mark{animation:blockDrop .8s cubic-bezier(.3,1.5,.5,1) .1s backwards}
@keyframes blockDrop{from{transform:translateY(-16px); opacity:0}to{transform:none; opacity:1}}

/* Retícula de plano que se dibuja sobre la foto */
.hero-grid{position:absolute; inset:0; z-index:1; pointer-events:none;
  --gx:calc(max(0px, (100vw - var(--max)) / 2) + var(--pad));
  background-image:linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
  background-size:96px 96px; background-position:var(--gx) 0;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 48%, transparent 88%);
  mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 48%, transparent 88%);
  animation:gridIn 1.9s cubic-bezier(.77,0,.18,1) .05s backwards}
@keyframes gridIn{from{clip-path:inset(0 100% 0 0); opacity:.3}to{clip-path:inset(0 0 0 0); opacity:1}}

/* Cota vertical que acota el titular */
.hero h1{position:relative}
.h1-cota{position:absolute; left:calc(var(--pad) * -.62); top:.1em; bottom:.06em; width:9px; margin-left:-4px; pointer-events:none; transform-origin:top; animation:drawY 1s cubic-bezier(.77,0,.18,1) .3s backwards}
.h1-cota::before{content:""; position:absolute; left:4px; top:0; bottom:0; width:1px; background:rgba(255,255,255,.5)}
.h1-cota::after{content:""; position:absolute; left:0; right:0; top:0; bottom:0; border-top:1px solid rgba(255,255,255,.7); border-bottom:1px solid rgba(255,255,255,.7)}

/* Cota horizontal sobre la ficha de obra; la ficha entra a los 1,2 s */
.ficha::before{content:""; position:absolute; left:-1px; right:-1px; bottom:calc(100% + 14px); height:9px; border-left:1px solid rgba(255,255,255,.7); border-right:1px solid rgba(255,255,255,.7);
  background:linear-gradient(var(--yellow),var(--yellow)) 0 2px / 18px 5px no-repeat, linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 0 4px / 100% 1px no-repeat}
@keyframes clipIn{from{clip-path:inset(-40px 100% 0 0)}to{clip-path:inset(-40px 0 0 0)}}
.ficha-top,.ficha-name,.ficha-cells > div{animation:fadeIn .6s ease backwards}
.ficha-top{animation-delay:1.8s} .ficha-name{animation-delay:1.92s} .ficha-cells > div:first-child{animation-delay:2.04s} .ficha-cells > div:last-child{animation-delay:2.14s}
@media (max-width:1180px){ .h1-cota{display:none} }
@media (max-width:900px){ .ficha::before{display:none} .ficha{animation-delay:1.1s} }

/* ---------- Cursor "mira técnica" ---------- */
html.cursor-constructora{--cur-lerp:.24; --cur-link-dot:.7; --c-cross:var(--graphite); --c-brk:var(--yellow); --c-brk-fx:drop-shadow(0 0 .7px rgba(29,31,34,1)) drop-shadow(0 1px 1.5px rgba(29,31,34,.45))}
html.cursor-constructora.cur-light{--c-cross:#fff; --c-brk:var(--yellow); --c-brk-fx:none}
html.cursor-constructora.cur-dark{--c-cross:var(--graphite); --c-brk:var(--graphite); --c-brk-fx:none}
html.cursor-constructora .cur-dot::before{width:21px; height:21px; margin:-10.5px 0 0 -10.5px; border-radius:0; mix-blend-mode:normal;
  background:
    linear-gradient(var(--c-cross),var(--c-cross)) 50% 0 / 1.5px 7px no-repeat,
    linear-gradient(var(--c-cross),var(--c-cross)) 50% 100% / 1.5px 7px no-repeat,
    linear-gradient(var(--c-cross),var(--c-cross)) 0 50% / 7px 1.5px no-repeat,
    linear-gradient(var(--c-cross),var(--c-cross)) 100% 50% / 7px 1.5px no-repeat}
html.cursor-constructora .cur-ring::before{width:40px; height:40px; margin:-20px 0 0 -20px; border:0; border-radius:0; mix-blend-mode:normal; filter:var(--c-brk-fx);
  background:
    linear-gradient(var(--c-brk),var(--c-brk)) 0 0 / 11px 2.5px no-repeat, linear-gradient(var(--c-brk),var(--c-brk)) 0 0 / 2.5px 11px no-repeat,
    linear-gradient(var(--c-brk),var(--c-brk)) 100% 0 / 11px 2.5px no-repeat, linear-gradient(var(--c-brk),var(--c-brk)) 100% 0 / 2.5px 11px no-repeat,
    linear-gradient(var(--c-brk),var(--c-brk)) 0 100% / 11px 2.5px no-repeat, linear-gradient(var(--c-brk),var(--c-brk)) 0 100% / 2.5px 11px no-repeat,
    linear-gradient(var(--c-brk),var(--c-brk)) 100% 100% / 11px 2.5px no-repeat, linear-gradient(var(--c-brk),var(--c-brk)) 100% 100% / 2.5px 11px no-repeat;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s}
html.has-cur.cursor-constructora.cur-link .cur-ring::before{transform:scale(1.55); background-color:transparent}
html.has-cur.cursor-constructora.cur-down .cur-ring::before{transform:scale(.82)}
html.has-cur.cursor-constructora.cur-link.cur-down .cur-ring::before{transform:scale(1.3)}
html.cursor-constructora .cur-label{width:auto; height:auto; padding:12px 16px 12px 14px; border-radius:0; display:flex; align-items:center; gap:9px; background:var(--yellow); color:var(--graphite); font:700 13.5px/1 var(--f); font-stretch:108%; box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
html.cursor-constructora .cur-label::before{content:""; width:8px; height:8px; background:var(--graphite)}

/* ---------- Cifras: las cotas se dibujan ---------- */
html.anim .stats-in .cota{transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
html.anim .stats-in .cota::after{opacity:0; transition:opacity .4s ease}
.stats-in.is-in .cota{transform:none !important}
.stats-in.is-in .cota::after{opacity:1 !important}
.stats-in .stat:nth-child(2) .cota,.stats-in .stat:nth-child(2) .cota::after{transition-delay:.12s}
.stats-in .stat:nth-child(3) .cota,.stats-in .stat:nth-child(3) .cota::after{transition-delay:.24s}
.stats-in .stat:nth-child(4) .cota,.stats-in .stat:nth-child(4) .cota::after{transition-delay:.36s}
.stats-in .cota::after{transition-delay:.9s}

/* ---------- Anexo: cláusulas, cifras y sello ---------- */
html.anim .doc .clause{opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .9s var(--ease)}
.doc.is-in .clause{opacity:1 !important; transform:none !important}
.doc .clause:nth-child(1){transition-delay:.25s} .doc .clause:nth-child(2){transition-delay:.4s} .doc .clause:nth-child(3){transition-delay:.55s}
html.anim .doc .cl-fig b::after{transform:scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.77,0,.18,1)}
.doc.is-in .cl-fig b::after{transform:none !important}
.doc .clause:nth-child(1) .cl-fig b::after{transition-delay:.7s} .doc .clause:nth-child(2) .cl-fig b::after{transition-delay:.85s} .doc .clause:nth-child(3) .cl-fig b::after{transition-delay:1s}
.doc-sign > div:first-child{position:relative}
.stamp{position:absolute; right:4px; top:-8px; display:flex; flex-direction:column; align-items:center; padding:9px 14px 8px; border:2px solid rgba(29,31,34,.82); outline:1px solid rgba(29,31,34,.82); outline-offset:3px; color:rgba(29,31,34,.86); background:rgba(242,183,5,.16); transform:rotate(-7deg); pointer-events:none}
.stamp b{font-stretch:125%; font-weight:800; font-size:19px; line-height:1; letter-spacing:.01em}
.stamp small{margin-top:5px; font-size:10.5px; font-weight:600; line-height:1; white-space:nowrap}
html.anim .doc .stamp{opacity:0; transform:rotate(-7deg) scale(1.9); transition:transform .38s cubic-bezier(.5,1.7,.6,1), opacity .18s ease}
.doc.is-in .stamp{opacity:1 !important; transform:rotate(-7deg) !important; transition-delay:2.25s}

/* ---------- Servicios: las líneas de la tabla se trazan ---------- */
.svc-list{border-top:0}
.svc-list::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--graphite); transform-origin:left}
.svc{border-bottom:0}
.svc::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); transform-origin:left}
.svc:nth-child(1){--i:0} .svc:nth-child(2){--i:1} .svc:nth-child(3){--i:2} .svc:nth-child(4){--i:3} .svc:nth-child(5){--i:4}
html.anim .svc-list::before{transform:scaleX(0); transition:transform 1.2s cubic-bezier(.77,0,.18,1)}
html.anim .svc::after{transform:scaleX(0); transition:transform 1.2s cubic-bezier(.77,0,.18,1) calc(.2s + var(--i) * .12s)}
html.anim .svc{opacity:0; transition:opacity .9s ease calc(.15s + var(--i) * .12s)}
.svc-list.is-in::before,.svc-list.is-in .svc::after{transform:none !important}
.svc-list.is-in .svc{opacity:1 !important}

/* ---------- Proyectos: revelado tipo andamio y ficha que se despliega ---------- */
.scaf{position:absolute; inset:0; z-index:4; display:flex; pointer-events:none}
.scaf i{flex:1; background:var(--graphite-3) repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 46px); border-right:1px solid rgba(255,255,255,.06); transform-origin:top; transition:transform 1s cubic-bezier(.77,0,.18,1); transition-delay:calc(var(--t, 0ms) + var(--k) * 75ms)}
.scaf i{margin-right:-1px}
.scaf i:last-child{border-right:0; margin-right:0}
.tile.is-in .scaf i{transform:scaleY(0)}
html.anim .tile[data-scaf]:not(.is-in) img{transform:scale(1.14)}
html.anim .tile[data-scaf] .tile-info,html.anim .tile[data-scaf] .tile-type{opacity:0; transform:translateY(12px); transition:opacity .7s ease, transform .8s var(--ease); transition-delay:calc(var(--t, 0ms) + .75s)}
.tile.is-in .tile-info,.tile.is-in .tile-type{opacity:1 !important; transform:none !important}
.tile-more{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease)}
.tile .tile-more > dl{min-height:0; overflow:hidden; margin-top:0; border-top:0}
.tile-more dd{white-space:normal}
.tile:hover .tile-more,.tile:focus-visible .tile-more{grid-template-rows:1fr}
@media (hover:none){ .tile-more{grid-template-rows:1fr} }
.tile-type{transition:opacity .35s ease, transform .5s var(--ease)}
@media (max-width:1240px) and (hover:hover){ .mosaic .tile:not(.t-a):hover .tile-type{opacity:0 !important; transform:translateY(-6px) !important; transition-delay:0s !important} }

/* ---------- Gantt: cursor de "hoy" que recorre el calendario ---------- */
.g-track{overflow:hidden}
.g-steps .g-track::after{content:""; position:absolute; top:0; bottom:0; left:0; width:100%; border-left:2px solid var(--graphite); transform:translateX(59.3%); pointer-events:none; z-index:2}
.g-today{position:absolute; inset:0; z-index:2; pointer-events:none; transform:translateX(59.3%)}
.g-today::before{content:""; position:absolute; left:0; top:0; bottom:0; border-left:2px solid var(--graphite)}
.g-today em{position:absolute; left:0; top:9px; transform:translateX(-50%); padding:5px 8px; background:var(--yellow); color:var(--graphite); font-style:normal; font-stretch:84%; font-size:12.5px; font-weight:700; line-height:1; white-space:nowrap}
html.anim .gantt:not(.is-in) .g-today,html.anim .gantt:not(.is-in) .g-steps .g-track::after{opacity:0}
html.anim .gantt.is-in .g-today,html.anim .gantt.is-in .g-steps .g-track::after{animation:todayRun 3.4s cubic-bezier(.45,0,.2,1) 1.4s both}
@keyframes todayRun{0%{transform:translateX(0); opacity:0}8%{opacity:1}100%{transform:translateX(59.3%); opacity:1}}
@media (max-width:820px){ .g-today em{font-size:11.5px; padding:4px 6px} }

/* ---------- Jefe de obra: foto, notificación y tarjeta ---------- */
.mg-photo{overflow:hidden}
html.anim .mg-photo{clip-path:inset(0 0 100% 0); transition:clip-path 1.25s cubic-bezier(.77,0,.18,1)}
html.anim .mg-photo img{transform:scale(1.16); transition:transform 1.8s cubic-bezier(.2,.75,.15,1)}
.mg-media.is-in .mg-photo{clip-path:inset(0 0 0 0)}
.mg-media.is-in .mg-photo img{transform:none}
.mg-toast{position:absolute; left:20px; top:20px; z-index:2; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:2px 12px; width:min(340px, calc(100% - 40px)); padding:14px 16px 15px; background:rgba(255,255,255,.97); color:var(--graphite); box-shadow:0 22px 44px -22px rgba(0,0,0,.6); transition:opacity .5s ease, transform .6s var(--ease)}
.mg-toast-ico{grid-row:1 / span 2; position:relative; width:32px; height:32px; background:var(--graphite)}
.mg-toast-ico::after{content:""; position:absolute; left:10px; top:10px; width:12px; height:12px; background:var(--yellow)}
.mg-toast-msg{grid-column:2; grid-row:1 / span 2; transition:opacity .35s ease}
.mg-toast-msg + .mg-toast-msg{opacity:0}
.mg-toast-msg b{display:block; font-size:14.5px; font-weight:700; line-height:1.3}
.mg-toast-msg span{display:block; margin-top:3px; font-size:13.5px; line-height:1.4; color:var(--steel)}
.mg-toast time{grid-column:3; grid-row:1; font-stretch:82%; font-size:12.5px; font-weight:600; color:var(--steel); white-space:nowrap; padding-top:1px}
html.anim .mg-toast-msg{opacity:0}
html.anim .mg-toast-msg.is-on{opacity:1}
html.anim .mg-toast{opacity:0; transform:translateY(-14px)}
html.anim .mg-toast.is-in{opacity:1; transform:none}
@media (max-width:560px){ .mg-toast{left:12px; top:12px; width:calc(100% - 24px); padding:12px 14px} .mg-toast time{display:none} .mg-toast{grid-template-columns:auto minmax(0,1fr)} }

/* ---------- Certificaciones: los sellos giran al aparecer ---------- */
.seals li:nth-child(1){--i:0} .seals li:nth-child(2){--i:1} .seals li:nth-child(3){--i:2} .seals li:nth-child(4){--i:3} .seals li:nth-child(5){--i:4}
html.anim .seals li{opacity:0; transform:rotate(-38deg) scale(.86); transition:opacity .7s ease, transform 1.2s cubic-bezier(.2,.75,.15,1); transition-delay:calc(var(--i) * 110ms)}
.seals.is-in li{opacity:1 !important; transform:none !important}

/* ---------- Testimonios ---------- */
.rev:nth-child(1){--i:0} .rev:nth-child(2){--i:1} .rev:nth-child(3){--i:2}
html.anim .rev{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .9s var(--ease); transition-delay:calc(var(--i) * 120ms)}
.rev-grid.is-in .rev{opacity:1 !important; transform:none !important}

/* ---------- Llamada final: cinta de obra en movimiento ---------- */
.final{overflow:hidden}
.final::before{left:-40px; right:-40px; animation:tape 2.6s linear infinite; animation-play-state:paused}
.final.in-view::before{animation-play-state:running}
@keyframes tape{to{transform:translateX(39.6px)}}

/* ---------- Accesibilidad ---------- */
:focus-visible{outline:2px solid var(--graphite); outline-offset:3px}
.hd :focus-visible,.mmenu :focus-visible,.hero :focus-visible,.projects :focus-visible,.certs :focus-visible,.quote :focus-visible,.ft :focus-visible{outline-color:var(--yellow)}
.mega :focus-visible{outline-color:var(--graphite)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important; transition-delay:0s !important}
  .slide img,.slide.is-active img{transform:none}
  .tab.is-active i::after{animation:none; transform:scaleX(1)}
}
.guarantee{overflow-x:clip}