/* 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); }
#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(48px,5vw,80px); 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 agranda y se corre (izquierda -12,04%, ancho 112,04%, llega justo al borde derecho) para que el borde del papel corte la O del nombre. */
.intro-photo { --edge:51.6%; 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:-12.04%; bottom:0; width:112.04%; 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:700; font-size:clamp(56px,9vw,162px); line-height:.8; letter-spacing:-.045em; text-transform:uppercase; }
.intro-name span { display:block; white-space:nowrap; }
.intro-name span:first-child { font-weight:400; }
.intro-name span + span { font-weight:800; }
.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, 36vw); 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:42px; }
  .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.4); }
  .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:calc(var(--mark) + 14px - var(--gutter) - 8px) 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; }
  /* El borde del papel coincide con la línea entre el ícono y el nombre del encabezado (--mark).
     En la imagen el papel empieza en el 56,8% de su ancho: 250% x 0,568 = 142%. */
  .intro { --mark:64px; }
  .intro-paper { left:var(--mark); }
  .intro-building { left:calc(var(--mark) - 142%); right:auto; 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:38px; }
  .intro { --mark:56px; }
  .hd-cta { padding-inline:12px; gap:8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-brand > * { transition:none; }
}

/* ---------- Nuestros clientes: dos mitades sobre papel, cada una con su obra mitad foto y mitad dibujo ---------- */
.clients, #clientes { position:relative; background:var(--bg); box-shadow:none; overflow:hidden; }
.clients-label { position:absolute; z-index:2; top:clamp(24px,2.4vw,40px); left:var(--gutter); margin:0; font-size:15px; font-weight:400; letter-spacing:0; }
.clients-grid { display:grid; grid-template-columns:1fr 1fr; }
.client { position:relative; overflow:hidden; min-height:clamp(640px, 50vw, 960px); padding:clamp(96px,7vw,128px) var(--gutter) 64px; }
.client + .client { border-left:1px solid rgba(24,27,25,.14); }
.client-text { position:relative; z-index:1; display:flex; flex-direction:column; gap:22px; }
.client .aud-tag { margin:0 0 clamp(16px,2vw,32px); font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.client h3 { margin:0; font-size:clamp(36px,3.9vw,70px); font-weight:400; line-height:.98; letter-spacing:-.05em; }
.client-empresas h3 { max-width:7.6em; }
.client-particulares h3 { max-width:9.6em; }
.client p:not(.aud-tag) { margin:0; max-width:24em; font-size:clamp(14px,1vw,16px); line-height:1.6; color:var(--ink-2); }
.client .ticks { width:min(100%, 26em); margin:4px 0 0; padding-top:12px; border-top:1px solid rgba(24,27,25,.25); font-size:clamp(13px,.9vw,14px); color:var(--ink-2); }
.client .ticks li { border:0; padding-block:10px; }
.client-img { position:absolute; z-index:0; max-width:none; height:auto; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 16%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 16%); mask-composite:intersect; }
.client-empresas .client-img { width:108%; left:31%; bottom:-13%; }
.client-particulares .client-img { width:82%; right:-6%; bottom:-2%; }

@media (max-width:860px) {
  .clients-grid { grid-template-columns:1fr; }
  .clients-label { top:28px; }
  .client { min-height:0; padding:84px var(--gutter) 0; display:flex; flex-direction:column; }
  .client + .client { border-left:0; border-top:1px solid rgba(24,27,25,.14); padding-top:48px; }
  .client h3 { font-size:clamp(34px,9vw,52px); }
  .client-img, .client-empresas .client-img, .client-particulares .client-img { position:relative; left:auto; right:auto; bottom:auto; width:128%; margin:-12% 0 0 -14%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22%); -webkit-mask-composite:source-over; mask-image:linear-gradient(to bottom, transparent 0, #000 22%); mask-composite:add; }
  .client-img { order:2; }
  .client-text { order:1; }
}

/* ---------- Qué fabricamos: columna fija a la izquierda y una fila por producto con su imagen mitad dibujo ---------- */
.makes-section { display:grid; grid-template-columns:minmax(280px, 26.5%) minmax(0,1fr); margin-top:clamp(56px,6vw,112px); background:var(--bg); border-top:0; }
.makes-aside { border-right:1px solid var(--rule); }
.makes-aside-in { height:100%; display:flex; flex-direction:column; padding:clamp(40px,3.6vw,56px) clamp(24px,2.6vw,48px) clamp(32px,4vw,64px) var(--gutter); }
.makes-kicker { margin:0; font:400 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.makes-title { margin:clamp(32px,3.4vw,52px) 0 0; font-size:clamp(40px,4.6vw,80px); font-weight:400; line-height:.95; letter-spacing:-.055em; color:var(--ink); }
.makes-sub { margin:clamp(24px,2.6vw,40px) 0 0; max-width:12em; font-size:clamp(17px,1.5vw,24px); line-height:1.25; letter-spacing:-.02em; color:var(--ink-2); }
.makes-steps { list-style:none; margin:auto 0 0; padding:40px 0 0; width:min(100%, 270px); }
.makes-steps li { display:flex; gap:38px; padding:13px 0; border-top:1px solid var(--rule); font:400 11px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.makes-steps li:last-child { border-bottom:1px solid var(--rule); }
.makes-steps span { color:var(--muted); letter-spacing:.06em; }
.makes { display:grid; }
.make { position:relative; display:grid; grid-template-columns:clamp(64px,6.6vw,140px) minmax(0,1fr); min-height:clamp(150px,11vw,200px); padding:clamp(22px,2vw,34px) 0 clamp(18px,1.6vw,28px) clamp(40px,4vw,60px); border-bottom:1px solid var(--rule); overflow:hidden; }
.make:last-child { border-bottom:0; }
.make-num { position:relative; z-index:1; padding-top:.35em; font:400 clamp(16px,1.4vw,22px)/1 var(--mono); color:var(--accent); }
.make-text { position:relative; z-index:1; max-width:min(19em, 40%); }
.make h3 { margin:0; font-size:clamp(26px,2.4vw,40px); font-weight:400; line-height:1; letter-spacing:-.045em; transition:transform .4s var(--ease); }
.make p { margin:12px 0 0; max-width:21em; font-size:clamp(13px,1vw,15px); line-height:1.4; color:var(--ink-2); }
.make-img { position:absolute; top:0; right:0; height:100%; width:min(56%, 900px); max-width:none; object-fit:cover; object-position:right center;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 26%); mask-image:linear-gradient(to right, transparent 0, #000 26%); transition:transform .6s var(--ease); transform-origin:right center; }
.make:hover h3 { transform:translateX(8px); }
.make:hover .make-img { transform:scale(1.03); }

@media (max-width:860px) {
  .makes-section { grid-template-columns:1fr; }
  .makes-aside { border-right:0; border-bottom:1px solid var(--rule); }
  .makes-aside-in { position:static; min-height:0; padding:48px var(--gutter) 36px; }
  .makes-title { font-size:clamp(40px,11vw,56px); }
  .makes-steps { margin-top:32px; padding-top:0; }
  .make { grid-template-columns:44px minmax(0,1fr); min-height:0; padding:24px var(--gutter) 0; }
  .make-text { max-width:none; }
  .make h3 { font-size:28px; }
  .make-img { position:relative; grid-column:1 / -1; width:calc(100% + var(--gutter)); height:auto; margin:8px calc(var(--gutter) * -1) 0 0; justify-self:end; aspect-ratio:691 / 158; }
}

/* ---------- Obras: columna de presentación con tipos de obra y una obra grande más tres chicas ---------- */
.works-section { display:grid; grid-template-columns:minmax(280px, 26.5%) minmax(0,1fr); margin-top:clamp(56px,6vw,112px); background:var(--bg); }
.works-aside { border-right:1px solid var(--rule); }
.works-aside-in { padding:clamp(40px,3.6vw,56px) clamp(24px,2.6vw,48px) 48px var(--gutter); }
.works-aside .makes-sub { max-width:13em; }
.works-all { margin-top:clamp(40px,4vw,64px); text-transform:uppercase; font-size:clamp(13px,1vw,15px); }
.works-all-note { margin:14px 0 0; font:400 11px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.works-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); }
.wcard { position:relative; display:flex; flex-direction:column; padding:clamp(20px,1.8vw,32px) clamp(16px,1.8vw,32px) clamp(20px,1.8vw,32px); border-bottom:1px solid var(--rule); }
.wcard-big { grid-column:1 / -1; }
.wcard:not(.wcard-big) + .wcard:not(.wcard-big) { border-left:1px solid var(--rule); }
.wcard-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:start; gap:0 clamp(14px,1.6vw,28px); margin-bottom:clamp(14px,1.4vw,20px); }
.wcard-num { font:400 clamp(22px,2vw,32px)/1 var(--mono); color:var(--accent); }
.wcard-title { padding-left:clamp(14px,1.6vw,28px); border-left:1px solid var(--rule); }
.wcard-kicker { margin:0 0 10px; font:400 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.wcard h3 { margin:0; font-size:clamp(22px,1.9vw,30px); font-weight:400; line-height:1.04; letter-spacing:-.045em; }
.wcard-big h3 { font-size:clamp(28px,2.7vw,46px); max-width:10em; }
.wcard-loc { margin:10px 0 0; font:400 11px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.wcard-sys { align-self:center; margin:0; padding-left:clamp(12px,1.4vw,24px); border-left:1px solid var(--rule); font:400 10px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.wcard-big .wcard-sys { font-size:12px; padding-right:clamp(24px,4vw,64px); }
.wcard-arrow { align-self:center; font-size:clamp(22px,1.8vw,30px); line-height:1; color:var(--accent); transition:transform .3s; }
.wcard-img { flex:1; overflow:hidden; aspect-ratio:16 / 10; background:var(--bg-2); }
.wcard-big .wcard-img { aspect-ratio:2.5 / 1; }
.wcard-img img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.wcard-open { position:absolute; inset:0; z-index:1; border:0; padding:0; background:none; cursor:pointer; }
.wcard-open:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.wcard:hover .wcard-img img { transform:scale(1.03); }
.wcard:hover .wcard-arrow { transform:translate(3px,-3px); }
.wcard:not(.wcard-big) .wcard-head { grid-template-columns:auto minmax(0,1fr) auto; }
.wcard:not(.wcard-big) .wcard-sys { display:none; }

@media (max-width:860px) {
  .works-section { grid-template-columns:1fr; }
  .works-aside { border-right:0; border-bottom:1px solid var(--rule); }
  .works-aside-in { position:static; padding:48px var(--gutter) 36px; }
  .works-all { margin-top:32px; width:100%; }
  .works-grid { grid-template-columns:1fr; }
  .wcard { padding:24px var(--gutter); }
  .wcard:not(.wcard-big) + .wcard:not(.wcard-big) { border-left:0; }
  .wcard-head, .wcard-big .wcard-head { grid-template-columns:auto minmax(0,1fr); }
  .wcard-sys, .wcard-arrow, .wcard-big .wcard-sys { display:none; }
  .wcard-big .wcard-img { aspect-ratio:4 / 3; }
}

/* ---------- Sistemas: catálogo de materiales en la misma grilla (columna izquierda con 01/02/03) ---------- */
.sys-section { margin-top:clamp(56px,6vw,112px); background:var(--bg); }
.sys-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,24em); align-items:end; gap:24px 48px; padding:0 var(--gutter) clamp(40px,4vw,64px); border-bottom:1px solid var(--rule); }
.sys-head .makes-kicker { grid-column:1 / -1; }
.sys-title { margin:clamp(20px,2vw,32px) 0 0; font-size:clamp(52px,7.4vw,136px); font-weight:400; line-height:.9; letter-spacing:-.06em; }
.sys-sub { margin:0; font-size:clamp(17px,1.4vw,22px); line-height:1.3; letter-spacing:-.02em; color:var(--ink-2); }
.sys-row { display:grid; grid-template-columns:minmax(280px, 26.5%) minmax(0,1fr); border-bottom:1px solid var(--rule); }
.sys-label { padding:clamp(28px,2.6vw,44px) var(--gutter); border-right:1px solid var(--rule); }
.sys-big { display:block; font:400 clamp(28px,2.6vw,44px)/1 var(--mono); color:var(--accent); }
.sys-name { display:block; margin:16px 0 0; font:400 12px/1.3 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.sys-body { min-width:0; }
.sys-num { font:400 13px/1 var(--mono); color:var(--accent); }

/* 01 · Líneas: nombres grandes a la izquierda, la ficha de la línea elegida a la derecha */
.lines { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); min-height:clamp(440px,34vw,560px); }
.line { grid-column:1; }
.line-name { display:flex; align-items:baseline; gap:clamp(16px,2vw,32px); width:100%; padding:clamp(16px,1.5vw,24px) clamp(20px,2.4vw,40px); border:0; border-bottom:1px solid var(--rule); background:none; cursor:pointer; text-align:left; font-size:clamp(26px,2.6vw,46px); font-weight:400; line-height:1.02; letter-spacing:-.045em; color:var(--muted); transition:color .25s, padding .35s var(--ease); }
.line-name span { font:400 13px/1 var(--mono); letter-spacing:0; color:var(--muted); }
.line:last-child .line-name { border-bottom:0; }
.line.is-active .line-name { color:var(--ink); padding-left:clamp(28px,3vw,52px); }
.line.is-active .line-name span { color:var(--accent); }
.line-detail { position:absolute; top:0; right:0; bottom:0; width:calc(100% / 2.15 * 1.15); display:flex; flex-direction:column; padding:clamp(24px,2.4vw,40px); border-left:1px solid var(--rule); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .35s, transform .45s var(--ease), visibility .35s; }
.line.is-active .line-detail { opacity:1; visibility:visible; transform:none; }
.line-brand { margin:0; font:400 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.line-desc { margin:16px 0 0; max-width:24em; font-size:clamp(16px,1.25vw,20px); line-height:1.35; letter-spacing:-.015em; }
.line-tags { margin:18px 0 0; font:400 11px/1.7 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.line-img { flex:1; display:flex; flex-direction:column; justify-content:flex-end; margin:24px 0 0; min-height:0; }
.line-img img { display:block; height:clamp(150px,13vw,200px); width:auto; max-width:100%; object-fit:cover; align-self:flex-start; }
.line-img.is-wide img { width:100%; height:clamp(180px,15vw,250px); }
.line-img figcaption { margin-top:10px; font:400 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* 02 · Vidrios: cinco módulos, tres arriba y dos abajo */
.glasses { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); }
.glass { grid-column:span 2; display:flex; flex-direction:column; padding:clamp(22px,2vw,32px); border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.glass:nth-child(3) { border-right:0; }
.glass:nth-child(n+4) { grid-column:span 3; border-bottom:0; }
.glass:nth-child(5) { border-right:0; }
.glass:nth-child(even) { background:rgba(24,27,25,.022); }
.glass img { width:min(100%, 220px); aspect-ratio:3 / 2; object-fit:cover; margin:18px 0 22px; }
.glass h4 { margin:0; font-size:clamp(24px,2.1vw,36px); font-weight:400; line-height:1; letter-spacing:-.045em; }
.glass-spec { margin:10px 0 0; font:400 11px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.glass p:not(.glass-spec) { margin:12px 0 0; max-width:24em; font-size:14px; line-height:1.5; color:var(--ink-2); }

/* 03 · Terminaciones: muestras grandes, como un muestrario de taller */
.swatches { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.swatch { display:flex; flex-direction:column; padding:clamp(16px,1.4vw,24px); border-right:1px solid var(--rule); font-size:clamp(14px,1.1vw,17px); letter-spacing:-.01em; }
.swatch:last-child { border-right:0; }
.swatch i { display:block; aspect-ratio:3 / 4; margin-bottom:16px; background:#ddd center / cover; box-shadow:inset 0 0 0 1px rgba(24,27,25,.08); }
.swatch span { margin-bottom:6px; font:400 12px/1 var(--mono); color:var(--accent); }
.swatch-ral i { display:flex; align-items:center; justify-content:center; background:var(--bg-2); }
.swatch-ral b { font:400 clamp(22px,2vw,32px)/1 var(--mono); letter-spacing:.12em; color:var(--ink-2); }
.swatch-name { margin:0; }
.swatch-ral em { font-style:normal; color:var(--accent); }

@media (max-width:1100px) {
  .swatches { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .swatch:nth-child(3) { border-right:0; }
  .swatch:nth-child(-n+3) { border-bottom:1px solid var(--rule); }
}
@media (max-width:860px) {
  .sys-head { grid-template-columns:1fr; padding-bottom:32px; }
  .sys-title { font-size:clamp(44px,12vw,64px); }
  .sys-row { grid-template-columns:1fr; }
  .sys-label { display:flex; align-items:baseline; gap:16px; padding:28px var(--gutter) 20px; border-right:0; border-bottom:1px solid var(--rule); }
  .sys-name { margin:0; }
  .lines { display:block; min-height:0; }
  .line-name { padding:18px var(--gutter); font-size:30px; }
  .line.is-active .line-name { padding-left:var(--gutter); }
  .line-detail { position:static; width:auto; display:none; padding:0 var(--gutter) 28px; border-left:0; border-bottom:1px solid var(--rule); opacity:1; visibility:visible; transform:none; }
  .line.is-active .line-detail { display:flex; }
  .line:last-child .line-name { border-bottom:1px solid var(--rule); }
  .glasses { grid-template-columns:1fr; }
  .glass, .glass:nth-child(n+4) { grid-column:auto; border-right:0; border-bottom:1px solid var(--rule); }
  .glass:last-child { border-bottom:0; }
  .swatches { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .swatch, .swatch:nth-child(3) { border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
  .swatch:nth-child(2n) { border-right:0; }
  .swatch:nth-last-child(-n+2) { border-bottom:0; }
}

/* ---------- Cómo trabajamos: columna de presentación y cinco pasos en línea de tiempo ---------- */
.proc-section { display:grid; grid-template-columns:minmax(280px, 26.5%) minmax(0,1fr); align-items:stretch; margin-top:clamp(56px,6vw,112px); padding-block:clamp(48px,6vw,112px); background:var(--bg); }
.proc-aside { display:flex; flex-direction:column; justify-content:center; padding:8px clamp(24px,2.6vw,48px) 8px var(--gutter); border-right:1px solid var(--rule); }
.proc-title { margin:clamp(20px,2vw,32px) 0 0; font-size:clamp(44px,4.6vw,80px); font-weight:400; line-height:.92; letter-spacing:-.055em; }
.proc-sub { margin:clamp(18px,1.8vw,28px) 0 0; max-width:11em; font-size:clamp(18px,1.7vw,28px); line-height:1.15; letter-spacing:-.025em; color:var(--muted); }
.proc-steps { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); margin:0; padding:0 var(--gutter) 0 clamp(24px,2.6vw,48px); list-style:none; }
.pstep { position:relative; padding:12px clamp(16px,1.6vw,28px) 12px 0; }
.pstep + .pstep { padding-left:clamp(16px,1.6vw,28px); border-left:1px solid rgba(24,27,25,.1); }
.pstep-n { display:block; font:400 clamp(14px,1.1vw,18px)/1 var(--mono); color:var(--accent); }
.pstep-line { position:relative; display:block; height:1px; margin:16px calc(clamp(16px,1.6vw,28px) * -1) 0 0; background:var(--rule); }
.pstep:last-child .pstep-line { margin-right:0; }
.pstep-line::before { content:""; position:absolute; left:0; top:-4px; width:9px; height:9px; background:var(--accent); }
.pstep h3 { margin:clamp(40px,4vw,64px) 0 0; font-size:clamp(20px,1.7vw,28px); font-weight:400; line-height:1.08; letter-spacing:-.035em; }
.pstep p { margin:clamp(14px,1.4vw,22px) 0 0; max-width:15em; font-size:clamp(14px,1vw,16px); line-height:1.45; color:var(--ink-2); }

@media (max-width:1100px) {
  .proc-section { grid-template-columns:1fr; }
  .proc-aside { padding:0 var(--gutter) 40px; border-right:0; }
  .proc-steps { padding:0 var(--gutter); }
}
@media (max-width:860px) {
  .proc-title { font-size:clamp(44px,12vw,60px); }
  .proc-steps { grid-template-columns:1fr; }
  .pstep, .pstep + .pstep { display:grid; grid-template-columns:32px minmax(0,1fr); padding:0 0 32px 0; border-left:0; }
  .pstep-n { grid-column:2; margin-bottom:12px; }
  .pstep-line { display:none; }
  .pstep::before { content:""; position:absolute; left:0; top:4px; width:9px; height:9px; background:var(--accent); }
  .pstep::after { content:""; position:absolute; left:4px; top:20px; bottom:4px; width:1px; background:var(--rule); }
  .pstep:last-child::after { display:none; }
  .pstep h3 { grid-column:2; margin:0; }
  .pstep p { grid-column:2; margin-top:8px; max-width:none; }
}

/* ---------- Presupuesto: columna de presentación con los pasos y la herramienta a la derecha ---------- */
#presupuesto.quote-section { display:grid; grid-template-columns:minmax(280px, 26.5%) minmax(0,1fr); margin-top:clamp(56px,6vw,112px); border-top:0; background:var(--bg); }
#presupuesto { --quote-end:clamp(56px,6vw,96px); }
.quote-aside { container-type:inline-size; position:sticky; top:96px; align-self:start; padding:clamp(40px,3.6vw,56px) clamp(24px,2.6vw,48px) var(--quote-end) var(--gutter); }
.quote-title { margin:clamp(24px,2.4vw,40px) 0 0; font-size:min(92px, 20cqi); font-weight:400; line-height:.9; letter-spacing:-.06em; }
.quote-sub { margin:clamp(22px,2.2vw,36px) 0 0; max-width:17em; font-size:clamp(17px,1.4vw,22px); line-height:1.3; letter-spacing:-.02em; color:var(--muted); }
.quote-nav { list-style:none; margin:clamp(40px,4vw,64px) 0 0; padding:0; width:min(100%, 360px); }
.quote-nav li { border-top:1px solid var(--rule); }
.quote-nav li:last-child { border-bottom:1px solid var(--rule); }
.quote-nav a { display:flex; align-items:baseline; gap:32px; padding:15px 0; text-decoration:none; font:400 13px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); transition:color .2s; }
.quote-nav a span { color:var(--muted); letter-spacing:.04em; }
.quote-nav a::after { content:"→"; margin-left:auto; font-family:var(--sans); letter-spacing:0; opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s; }
.quote-nav a[aria-current] { color:var(--ink); }
.quote-nav a[aria-current] span { color:var(--accent); }
.quote-nav a[aria-current]::after, .quote-nav a:hover::after { opacity:1; transform:none; }
.quote-nav a:hover { color:var(--ink); }
.quote-main { min-width:0; border-left:1px solid var(--rule); padding:clamp(40px,3.6vw,56px) var(--gutter) var(--quote-end) clamp(24px,3vw,48px); }
.quote-main .q-step-head h3 { font-size:clamp(26px,2.4vw,40px); font-weight:400; letter-spacing:-.045em; }
.quote-main .q-form { grid-template-columns:1fr; row-gap:24px; }
.quote-main .q-side { border-top:1px solid var(--rule); padding-top:28px; }
.quote-main .q-fields { border-top:0; padding-top:0; }
.quote-main .q-send { padding-top:4px; }
.quote-main .q-form .btn[type=submit] { width:100%; min-height:56px; }
#q-paso-1, #q-paso-2, #q-paso-3 { scroll-margin-top:120px; }
.quote-main .configurator { grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-color:var(--rule); }
.quote-main .cfg-form { border-right-color:var(--rule); }
.quote-main .type-opt input:checked + label { border-color:var(--accent); background:rgba(249,168,37,.06); box-shadow:none; }
.quote-main .sheet-head { border-bottom-color:var(--rule); }
.quote-main .sheet-head h4 { font-size:clamp(24px,2vw,32px); font-weight:400; letter-spacing:-.04em; }

@media (max-width:860px) {
  #presupuesto.quote-section { grid-template-columns:1fr; }
  .quote-aside { position:static; padding:48px var(--gutter) 36px; border-bottom:1px solid var(--rule); }
  .quote-main { border-left:0; }
  .quote-title { font-size:clamp(44px,12vw,60px); }
  .quote-nav { width:100%; }
  .quote-main { padding:36px var(--gutter) 56px; }
  .quote-main .configurator { display:flex; flex-direction:column-reverse; }
  .quote-main .cfg-form { border-bottom:0; border-top:1px solid var(--rule); }
}

/* ---------- Contacto: columna de presentación con las dos acciones y una fila grande por medio de contacto ---------- */
.contact-section { display:grid; grid-template-columns:minmax(280px, 26.5%) minmax(0,1fr); margin-top:clamp(56px,6vw,112px); padding-bottom:clamp(56px,6vw,96px); background:var(--bg); }
.contact-aside { padding:clamp(40px,3.6vw,56px) clamp(24px,2.6vw,48px) 8px var(--gutter); border-right:1px solid var(--rule); }
.contact-title { margin:clamp(24px,2.4vw,40px) 0 0; font-size:clamp(48px,5.2vw,92px); font-weight:400; line-height:.9; letter-spacing:-.06em; }
.contact-sub { margin:clamp(22px,2.2vw,36px) 0 0; max-width:15em; font-size:clamp(17px,1.4vw,22px); line-height:1.3; letter-spacing:-.02em; color:var(--muted); }
.contact-actions { display:grid; justify-items:start; gap:18px; margin-top:clamp(36px,3.6vw,56px); }
.contact-actions .btn-ink { margin:0; text-transform:uppercase; font-size:clamp(13px,1vw,15px); }
.contact-mail { display:inline-flex; gap:14px; padding-bottom:6px; border-bottom:1px solid var(--rule); font:400 12px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--ink); transition:border-color .2s; }
.contact-mail span { color:var(--accent); transition:transform .3s; }
.contact-mail:hover { border-color:var(--ink); }
.contact-mail:hover span { transform:translateX(4px); }
.contact-rows { list-style:none; margin:0; padding:clamp(28px,2.6vw,40px) var(--gutter) 0 clamp(24px,3vw,48px); }
.contact-rows li { border-bottom:1px solid var(--rule); }
.contact-rows li:first-child { border-top:1px solid var(--rule); }
.crow { display:grid; grid-template-columns:clamp(44px,4vw,72px) clamp(96px,9vw,150px) minmax(0,1fr) auto; align-items:baseline; gap:16px; padding:clamp(20px,2vw,30px) 0; text-decoration:none; color:var(--ink); }
.crow-n { font:400 clamp(14px,1.1vw,18px)/1 var(--mono); color:var(--accent); }
.crow-k { font:400 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.crow-v { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; font-size:clamp(24px,2.5vw,42px); line-height:1.1; letter-spacing:-.04em; overflow-wrap:anywhere; }
.crow-v a { color:inherit; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; transition:background-size .3s; }
.crow-v a:hover { background-size:100% 1px; }
.crow-v i { font-style:normal; color:var(--muted); }
.crow-v small { flex-basis:100%; margin-top:8px; font:400 11px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.crow-arrow { font-size:clamp(20px,1.8vw,28px); color:var(--accent); transition:transform .3s; }
.crow-map { display:inline-flex; gap:12px; padding-bottom:6px; border-bottom:1px solid var(--rule); font:400 11px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.crow-map span { color:var(--accent); }
a.crow:hover .crow-arrow { transform:translate(4px,-4px); }
a.crow:hover .crow-v { color:var(--ink-2); }
a.crow:hover .crow-map { border-color:var(--ink); }

@media (max-width:860px) {
  .contact-section { grid-template-columns:1fr; }
  .contact-aside { padding:48px var(--gutter) 36px; border-right:0; }
  .contact-title { font-size:clamp(44px,12vw,60px); }
  .contact-actions .btn-ink { width:100%; }
  .contact-rows { padding:8px var(--gutter) 0; }
  .crow { grid-template-columns:36px minmax(0,1fr) auto; gap:8px 12px; }
  .crow-k { grid-column:2; }
  .crow-v { grid-column:2; grid-row:2; font-size:clamp(20px,6vw,26px); }
  .crow-arrow, .crow-map { grid-column:3; grid-row:1 / span 2; align-self:center; }
  .crow-map { font-size:10px; }
}

/* El botón flotante de WhatsApp no tapa "Volver arriba" al final de la página. */
.site-end { padding-right:calc(var(--gutter) + 72px); }

/* Aviso de "Mail copiado" */
.copy-toast { position:fixed; left:50%; bottom:24px; z-index:60; margin:0; padding:14px 20px; background:var(--ink); color:#fff; font:400 12px/1.2 var(--mono); letter-spacing:.06em; opacity:0; visibility:hidden; transform:translate(-50%, 8px); transition:opacity .25s, transform .3s, visibility .25s; pointer-events:none; }
.copy-toast.is-on { opacity:1; visibility:visible; transform:translate(-50%, 0); }

/* ---------- Sistemas: en escritorio el rótulo es solo texto; en celular cada bloque es desplegable ---------- */
.sys-toggle { display:block; width:100%; padding:0; border:0; background:none; text-align:left; color:inherit; font:inherit; cursor:default; pointer-events:none; }
.sys-count, .sys-plus { display:none; }
/* Obras: la fila de las tres obras chicas no cambia nada en escritorio */
.wcard-row { display:contents; }

@media (max-width:860px) {
  .sys-label { padding:0; border-bottom:0; }
  .sys-toggle { display:flex; align-items:baseline; gap:16px; padding:22px var(--gutter); cursor:pointer; pointer-events:auto; }
  .sys-toggle .sys-big { font-size:26px; }
  .sys-count { display:block; margin-left:auto; font:400 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .sys-plus { display:block; width:18px; font-style:normal; font-size:24px; font-weight:300; line-height:1; text-align:center; color:var(--ink); transition:transform .3s; }
  .sys-row.is-open .sys-plus { transform:rotate(45deg); }
  .sys-row:not(.is-open) .sys-body { display:none; }
  .sys-row.is-open .sys-label { border-bottom:1px solid var(--rule); }

  /* Obras: las tres chicas se deslizan con el dedo, y se asoma la siguiente para que se entienda que hay más */
  .wcard-row { display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; border-bottom:1px solid var(--rule); }
  .wcard-row::-webkit-scrollbar { display:none; }
  .wcard-row .wcard { flex:0 0 78%; scroll-snap-align:start; border-bottom:0; padding-right:12px; }
  .wcard-row .wcard + .wcard { border-left:1px solid var(--rule); padding-left:16px; }
  .wcard-row .wcard:last-child { flex-basis:calc(78% + var(--gutter)); padding-right:var(--gutter); }
  .wcard-row .wcard h3 { font-size:22px; }
}