/* AG — luz, escala y precisión */
:root { --bg:#f7f7f2; --bg-2:#eeeee8; --ink:#181b19; --line:#cecec5; --accent:#f9a825; --wrap:1800px; --gutter:clamp(22px,3.4vw,64px); }
.site-header { background:rgba(247,247,242,.96); border-bottom:0; }
body.menu-open { overflow:hidden; }
.header-inner { height:72px; }
.header-actions { display:flex; align-items:center; gap:44px; }
.header-quote { font-size:12px; text-decoration:none; display:flex; gap:28px; align-items:center; }
.header-quote span { font-size:22px; transition:transform .3s; }
.header-quote:hover span { transform:translate(3px,-3px); }
.menu-btn { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100px; height:44px; border:0; background:none; padding:0; cursor:pointer; }
.menu-btn span:not(.sr) { position:static; height:auto; background:none; transform:none; }
.menu-label { font-size:12px; }
.menu-symbol { font-size:28px; font-weight:200; transition:transform .4s !important; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform:none; }
.menu-btn[aria-expanded="true"] span:nth-child(2) { transform:rotate(45deg); }
.nav { position:fixed; inset:72px 0 0; height:calc(100dvh - 72px); padding:clamp(32px,6vh,80px) var(--gutter); background:var(--bg); display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:0; visibility:hidden; opacity:0; transform:translateY(-12px); transition:opacity .3s,transform .4s var(--ease),visibility .3s; overflow:auto; }
.nav.is-open { visibility:visible; opacity:1; transform:none; }
.nav a { display:block; padding:12px 0; margin-left:25%; border-bottom:1px solid var(--line); color:var(--ink); font-size:clamp(30px,5vw,76px); line-height:1.1; font-weight:400; letter-spacing:-.045em; }
.nav a::after { content:'↗'; float:right; font-size:.6em; padding-top:.3em; transition:transform .3s; }
.nav a:hover::after { transform:translate(6px,-6px); }
.nav .nav-cta { display:none; }
.nav a:hover { color:var(--muted); }
.section { padding-block:clamp(72px,9vw,150px); }
.section-alt { background:var(--bg); }
.bt-name { text-transform:none; font-size:clamp(42px,6vw,100px); font-weight:400; letter-spacing:-.055em; line-height:.98; }
.bt-name b { font-weight:500; letter-spacing:inherit; }
.block-title { margin-bottom:64px; }
#clientes .block-title { margin-bottom:64px; }
#clientes .bt-name { font-size:14px; letter-spacing:0; font-weight:400; }
#clientes .bt-name b { font-weight:400; }
.audience { gap:8vw; }
.aud { border:0; padding:0; gap:24px; }
.aud-tag { color:var(--muted); font-size:10px; }
.aud h3 { font-size:clamp(32px,4vw,66px); font-weight:400; line-height:1.02; letter-spacing:-.045em; max-width:12em; }
.aud p:not(.aud-tag) { max-width:35em; font-size:14px; line-height:1.7; }
.ticks { font-size:12px; margin:0; color:var(--muted); }
.ticks li { padding-block:9px; border-bottom:0; }
.ticks li::before { top:18px; }
#soluciones { padding-top:32px; }
/* Título chico, igual que "Nuestros clientes". */
#soluciones .bt-name { font-size:14px; letter-spacing:0; }
#soluciones .bt-name b { font-weight:400; }
.solutions { display:block; border:0; }
.sol, .sol:not(:nth-child(3n + 1)), .sol:nth-child(2n) { position:relative; display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) 90px; gap:40px; padding:24px 0; align-items:center; border-left:0; border-bottom:1px solid var(--line); }
.sol h3 { grid-column:1; grid-row:1; font-weight:400; font-size:clamp(28px,3.6vw,58px); letter-spacing:-.045em; transition:transform .4s var(--ease); }
.sol p { grid-column:2; grid-row:1; font-size:13px; max-width:26em; line-height:1.6; }
.sol svg { grid-column:3; grid-row:1; width:90px; height:68px; margin:0; transition:transform .5s var(--ease); }
.sol:hover h3 { transform:translateX(12px); }
.sol:hover svg { transform:scale(1.12); }
#obras { padding-top:32px; }
#obras .block-title { margin-bottom:48px; }
#obras .bt-name { font-size:clamp(64px,10.8vw,180px); line-height:.9; }
#obras .bt-name b { display:inline-block; margin-left:14vw; font-weight:400; }
.selected-works { display:block; }
.work-stage { position:relative; }
.stage-image { display:block; position:relative; width:100%; height:clamp(360px,55svh,680px); overflow:hidden; border:0; padding:0; background:var(--tone); cursor:pointer; }
.stage-image img { width:100%; height:100%; object-fit:cover; transform:scale(1.025); transition:transform 1s var(--ease); }
.stage-image:hover img { transform:scale(1.06); }
.stage-open { position:absolute; right:24px; bottom:24px; background:var(--bg); display:flex; align-items:center; gap:32px; padding:16px 20px; font-size:13px; }
.stage-open span { font-size:24px; }
.stage-caption { display:grid; grid-template-columns:minmax(160px,1fr) minmax(0,2fr) minmax(180px,1fr); gap:24px; padding:24px 0 30px; align-items:baseline; }
.stage-location { font:400 10px/1.6 var(--mono); text-transform:uppercase; max-width:22em; color:var(--muted); }
.stage-title { font-size:clamp(26px,2.8vw,42px); font-weight:400; letter-spacing:-.04em; }
.stage-system { text-align:right; font-size:12px; color:var(--muted); }
.work-selector { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; border-top:1px solid var(--line); padding-top:20px; }
.work-choice { padding:0 0 12px; border:0; border-bottom:2px solid transparent; background:none; text-align:left; cursor:pointer; }
.choice-image { display:block; aspect-ratio:1.9; overflow:hidden; }
.choice-image img { width:100%; height:100%; object-fit:cover; transform:scale(1.06); opacity:.55; transition:opacity .3s,transform .6s var(--ease); }
.work-choice:hover img, .work-choice[aria-pressed="true"] img { opacity:1; }
.work-choice[aria-pressed="true"] { border-color:var(--ink); }
.choice-label { display:block; font-size:11px; margin-top:10px; }
.refs { border:0; padding:0; margin-top:32px; max-width:80em; font-size:11px; color:var(--muted); }
#sistemas { background:var(--bg-2); }
#sistemas .bt-name { max-width:11em; }
.spec-tables { margin-left:24%; gap:48px; }
.spec-tables table { font-size:14px; }
.finishes { margin-left:24%; margin-top:48px; }
.finishes i { height:44px; }
.finishes ul { font-size:12px; }
#proceso > .wrap { display:grid; grid-template-columns:1fr 1.4fr; gap:8vw; }
#proceso .bt-name { max-width:6em; }
.steps { display:block; }
.steps::before { display:none; }
.steps li { display:grid; grid-template-columns:40px 1fr; gap:12px 20px; padding:24px 0; border-top:1px solid var(--line); }
.steps .step-n, .steps li:first-child .step-n { grid-row:span 2; display:block; width:auto; height:auto; background:none; border:0; border-radius:0; font:400 11px var(--mono); color:var(--muted); margin:6px 0 0; }
.steps h3 { font-size:30px; font-weight:400; margin:0; }
.steps p { font-size:14px; max-width:34em; }
#presupuesto { border-top:1px solid var(--line); }
.planilla-intro { margin:0 0 48px 34%; max-width:42em; font-size:15px; }
.q-flow { gap:64px; }
.q-step { min-width:0; }
/* Formulario a dos columnas: título del paso a la izquierda, campos a la derecha (alineados con .planilla-intro). */
.q-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); column-gap:64px; row-gap:56px; max-width:none; width:100%; margin-left:0; }
.q-side { border-top:1px solid var(--ink); padding-top:20px; }
.q-fields { display:grid; gap:18px; min-width:0; border-top:1px solid var(--line); padding-top:20px; }
.q-form .q-step-head:not(:first-child) { margin-top:0; }
.q-send { align-content:start; }
.contact-info { display:block; }
.contact-info .bt-name { font-size:clamp(64px,14vw,240px); font-weight:400; }
.contact-list { margin:48px 0 0 34%; }
.btn { padding:15px 24px; min-height:52px; font-size:13px; font-weight:500; border-radius:0; gap:32px; transition:background .25s,color .25s; }
.btn-accent { background:var(--ink); color:var(--bg); }
.btn-accent:hover { background:var(--accent); color:var(--ink); }
.btn:hover { transform:none; }
.btn span[aria-hidden] { transition:transform .3s; }
.btn:hover span[aria-hidden] { transform:translateX(5px); }
.wa-float { border:0; background:var(--bg); box-shadow:0 0 0 1px var(--line); padding:14px; }
.wa-float span { display:none; }
@media (max-width:1000px) {
 .spec-tables,.finishes { margin-left:0; }
 .stage-caption { grid-template-columns:1fr 2fr; }
 .stage-system { grid-column:2; text-align:left; margin-top:-16px; }
 .sol, .sol:not(:nth-child(3n + 1)), .sol:nth-child(2n) { gap:24px; grid-template-columns:1.6fr 1fr 70px; }
 .sol svg { width:70px; }
}
@media (max-width:860px) {
 .sol, .sol:not(:nth-child(3n + 1)), .sol:nth-child(2n) { grid-template-columns:1fr 68px; gap:12px; }
 .sol h3 { font-size:32px; }
 .sol p { grid-column:1; grid-row:2; }
 .sol svg { grid-column:2; grid-row:1 / span 2; width:68px; }
 .stage-image { height:52svh; min-height:340px; }
 .work-selector { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
 #proceso > .wrap { display:block; }
 .planilla-intro,.contact-list { margin-left:0; }
 .q-form { grid-template-columns:1fr; row-gap:20px; }
 .q-fields { border-top:0; padding-top:0; }
 .q-send { margin-bottom:8px; }
}
@media (max-width:600px) {
 .header-inner { height:64px; }
 .logo-word { font-size:12px; }
 .logo img { width:36px; }
 .header-actions { gap:20px; }
 .header-quote { font-size:11px; gap:8px; }
 .header-quote span { font-size:18px; }
 .menu-btn { width:28px; }
 .menu-label { position:absolute !important; width:1px; height:1px !important; overflow:hidden; clip-path:inset(50%); }
 .nav { inset:64px 0 0; height:calc(100dvh - 64px); }
 .nav a { margin-left:0; font-size:11vw; padding:16px 0; }
 .audience { grid-template-columns:1fr; gap:52px; }
 .aud h3 { font-size:38px; }
 .block-title { margin-bottom:40px; }
 #obras .bt-name { font-size:17vw; }
 #obras .bt-name b { margin-left:9vw; }
 .stage-image { min-height:310px; height:46svh; }
 .stage-open { right:12px; bottom:12px; padding:10px 14px; gap:18px; font-size:12px; }
 .stage-caption { display:flex; flex-direction:column; gap:10px; padding-block:20px; }
 .stage-title { font-size:29px; }
 .stage-location { max-width:none; font-size:9px; }
 .stage-system { margin:0; font-size:11px; }
 .work-selector { gap:12px; }
 .choice-label { font-size:10px; }
 .choice-image { aspect-ratio:1.5; }
 .spec-tables { grid-template-columns:1fr; }
 .contact-info .bt-name { font-size:18vw; }
}

/* ---------- Encabezado: celdas con líneas, como una ficha técnica ---------- */
.site-header { --hd:96px; background:var(--bg); border-bottom:1px solid var(--rule); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
:root { --rule:rgba(24,27,25,.32); }
.header-inner { display:grid; grid-template-columns:clamp(96px,10vw,170px) minmax(0,1fr) minmax(0,1fr) clamp(220px,17vw,288px); height:var(--hd); padding:0; max-width:none; }
.header-inner > * { min-width:0; }
.header-inner { align-items:stretch; }
.hd-mark { display:flex; align-items:center; justify-content:center; border-right:1px solid var(--rule); }
.hd-mark img { width:clamp(44px,4.2vw,70px); height:auto; margin:0; }
.hd-brand { display:grid; align-items:center; padding-inline:clamp(20px,2.2vw,36px); text-decoration:none; color:var(--ink); border-right:1px solid var(--rule); }
.hd-brand > * { grid-area:1 / 1; transition:opacity .4s, transform .5s cubic-bezier(.2,.7,.2,1); }
.logo-tag { font-size:clamp(13px,1vw,16px); font-weight:500; line-height:1.18; text-transform:uppercase; white-space:nowrap; }
.hd-brand .logo-word { font-size:clamp(14px,1.15vw,19px); opacity:0; transform:translateY(10px); white-space:nowrap; }
.site-header.brand-in .logo-tag { opacity:0; transform:translateY(-10px); }
.site-header.brand-in .hd-brand .logo-word { opacity:1; transform:none; }
.hd-cta { display:flex; align-items:center; justify-content:center; gap:28px; background:var(--ink); color:#fff; font-size:clamp(13px,1vw,16px); font-weight:500; text-transform:uppercase; text-decoration:none; transition:background .25s, color .25s; }
.hd-cta i { font-style:normal; font-size:1.4em; font-weight:300; transition:transform .3s; }
.hd-cta:hover { background:var(--accent); color:var(--ink); }
.hd-cta:hover i { transform:translateX(4px); }
.hd-cta span, .hd-cta:hover span { font-size:inherit; transform:none; transition:none; }
.hd-cta-short { display:none; }
.menu-btn { display:none; }
@media (min-width:861px) {
  .nav { position:static; inset:auto; height:auto; padding:0 clamp(20px,3vw,48px); background:none; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:clamp(20px,3.3vw,54px); visibility:visible; opacity:1; transform:none; overflow:visible; }
  .nav a { margin:0; padding:6px 0; border:0; border-bottom:1px solid transparent; font-size:clamp(13px,1vw,16px); font-weight:500; letter-spacing:0; line-height:1; text-transform:uppercase; }
  .nav a::after { content:none; }
  .nav a:hover { color:var(--ink); border-bottom-color:var(--ink); }
  .nav .nav-more { display:none; }
}

/* ---------- Hero: nombre gigante a la izquierda, foto a la derecha ---------- */
.intro { position:relative; min-height:max(680px, 50vw); display:flex; overflow:hidden; }
/* Papel gris a la derecha con el edificio que pasa a dibujo técnico. La imagen ocupa todo el ancho del hero
   (el papel empieza en el 56,8% de la imagen) y se corre 1% para que el borde del papel corte la O del nombre. */
.intro-photo { --edge:57.8%; position:absolute; inset:0; margin:0; overflow:hidden; pointer-events:none; }
.intro-paper { position:absolute; top:0; bottom:0; right:0; left:var(--edge); background:#dedad5 url(img/papel.webp) center / cover; }
.intro-building { position:absolute; left:1%; bottom:0; width:100%; max-width:none; height:auto; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 48px); mask-image:linear-gradient(to bottom, transparent 0, #000 48px); }
.intro-inner { position:relative; z-index:1; width:100%; padding:clamp(48px,10vh,104px) var(--gutter) clamp(40px,5vh,56px); display:flex; flex-direction:column; align-items:flex-start; }
.intro-name { margin:0; font-family:"Archivo", var(--sans); font-stretch:125%; font-weight:800; font-size:clamp(60px,9.6vw,172px); line-height:.8; letter-spacing:-.045em; text-transform:uppercase; }
.intro-name span { display:block; white-space:nowrap; }
.intro-lead { margin:clamp(28px,4vh,48px) 0 0; max-width:min(18.5em, 44vw); font-size:clamp(22px,2.15vw,36px); font-weight:400; line-height:1.1; letter-spacing:-.02em; color:var(--ink); }
.intro-facts { margin:clamp(28px,4vh,40px) 0 0; width:min(100%, 666px, 40vw); border-bottom:1px solid var(--rule); }
.intro-facts div { display:grid; grid-template-columns:84px minmax(0,1fr) auto; align-items:baseline; gap:16px; padding:14px 0; border-top:1px solid var(--rule); }
.intro-facts span { font:400 14px/1 var(--mono); color:var(--muted); }
.intro-facts dt { font-size:clamp(15px,1.1vw,18px); font-weight:500; text-transform:uppercase; letter-spacing:0; }
.intro-facts dd { margin:0; font:400 12px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.btn-ink { margin-top:clamp(24px,3.5vh,32px); background:var(--ink); color:#fff; border:1px solid var(--ink); text-transform:uppercase; font-size:clamp(13px,1vw,16px); }
.btn-ink:hover { background:var(--accent); color:var(--ink); border-color:var(--accent); }

@media (max-width:860px) {
  .site-header { --hd:64px; }
  .header-inner { grid-template-columns:64px minmax(0,1fr) auto 60px; }
  .hd-mark img { width:38px; }
  .hd-brand { padding-inline:14px; }
  .logo-tag { font-size:10.5px; }
  .hd-brand .logo-word { font-size:12px; }
  .hd-cta { padding-inline:16px; gap:10px; font-size:11px; }
  .hd-cta-long { display:none; }
  .hd-cta-short { display:inline; }
  .menu-btn { display:flex; width:auto; height:auto; justify-content:center; border-left:1px solid var(--rule); }
  .menu-label { position:absolute !important; width:1px; height:1px !important; overflow:hidden; clip-path:inset(50%); }
  .nav { inset:64px 0 0; height:calc(100dvh - 64px); }
  /* En celular el texto va encima de la imagen, como en escritorio: el edificio queda abajo y el botón sobre él. */
  .intro { min-height:max(680px, calc(100svh - 64px)); }
  .intro-inner { padding:80px var(--gutter) 24px; }
  .intro-name { font-size:calc((100vw - 2 * var(--gutter)) / 7.05); }
  .intro-lead { max-width:15em; margin-top:16px; font-size:17px; line-height:1.18; }
  .intro-facts { width:100%; margin-top:18px; }
  .intro-facts div { grid-template-columns:24px minmax(0,1fr) auto; gap:8px; padding:8px 0; }
  .intro-facts span { font-size:10px; }
  .intro-facts dt { font-size:12px; }
  .intro-facts dd { font-size:8.5px; letter-spacing:.06em; }
  .intro .btn-ink { display:none; }
  .intro-paper { left:12%; }
  .intro-building { left:auto; right:-20%; width:250%; -webkit-mask-image:none; mask-image:none; }
}
/* En celulares chicos la frase no entra: se muestra el nombre. */
@media (max-width:600px) {
  .hd-brand .logo-tag { display:none; }
  .hd-brand .logo-word { opacity:1; transform:none; font-size:11px; letter-spacing:.02em; }
  .hd-brand { padding-inline:12px; }
  .header-inner { grid-template-columns:56px minmax(0,1fr) auto 52px; }
  .hd-mark img { width:32px; }
  .hd-cta { padding-inline:12px; gap:8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-brand > * { transition:none; }
}