/* ============================================================
   GRUPO REMODELAR — Sitio Web
   Helvetica · Negro · Blanco · Rojo · + Amarillo obra
   Bordes rectos · sin gradientes decorativos · movimiento de obra
   ============================================================ */

:root {
  --gr-red:     #C0392B;
  --gr-black:   #141414;
  --gr-ink:     #0d0d0d;
  --gr-white:   #FFFFFF;
  --gr-yellow:  #FFC400;   /* amarillo de obra / cinta de peligro */
  --gr-gray-50:  #F5F5F5;
  --gr-gray-200: #E4E4E4;
  --gr-gray-300: #CCCCCC;
  --gr-gray-500: #9A9A9A;
  --gr-gray-700: #555555;
  --gr-gray-900: #1f1f1f;

  /* accent is tweakable — defaults to red */
  --gr-accent: var(--gr-red);

  --gr-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gr-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.16,1,.3,1);
  --maxw: 1280px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--gr-font);
  background: var(--gr-black);
  color: var(--gr-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---- typographic utilities ---- */
.mono {
  font-family: var(--gr-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.eyebrow {
  font-family: var(--gr-mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gr-gray-500);
}
.tracked {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
}
.display {
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

/* ============================================================
   CUSTOM CURSOR — survey crosshair / level tool
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  body.gr-cursor-on { cursor: none; }
  body.gr-cursor-on a,
  body.gr-cursor-on button,
  body.gr-cursor-on input,
  body.gr-cursor-on textarea,
  body.gr-cursor-on select { cursor: none; }
}
.gr-cursor {
  position: fixed; top: 0; left: 0;
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: difference;
  will-change: transform;
  transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease);
}
.gr-cursor::before,
.gr-cursor::after {
  content: ""; position: absolute; background: var(--gr-white);
}
.gr-cursor::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.gr-cursor::after  { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); }
.gr-cursor i {
  position: absolute; inset: 0; border: 1.5px solid var(--gr-white);
  border-radius: 50%; opacity: .55;
}
.gr-cursor.is-hot {
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
}
.gr-cursor-dot {
  position: fixed; top: 0; left: 0; width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px; background: var(--gr-yellow);
  border-radius: 50%; pointer-events: none; z-index: 99999;
  will-change: transform;
}

/* ============================================================
   NAV
   ============================================================ */
.gr-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px 28px;
  transition: background .3s var(--ease), padding .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.gr-nav.scrolled {
  background: rgba(16,16,16,0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: #2a2a2a; padding: 11px 28px;
}
.gr-nav .brand { display: flex; align-items: center; gap: 15px; }
.gr-nav .brand img { height: 38px; }
.gr-nav .brand .tag {
  font-family: var(--gr-mono); font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gr-gray-500);
  border-left: 1px solid #333; padding-left: 14px; line-height: 1.3; max-width: 130px;
}
.gr-nav .links { display: flex; align-items: center; gap: 2px; }
.gr-nav .links a {
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--gr-white); padding: 10px 14px;
  position: relative; transition: color .2s;
}
.gr-nav .links a span {
  position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--gr-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.gr-nav .links a:hover { color: var(--gr-white); }
.gr-nav .links a:hover span { transform: scaleX(1); }
.gr-cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--gr-yellow); color: var(--gr-black);
  font-weight: 800; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 11px 18px; border: 0; cursor: pointer;
  transition: transform .2s var(--ease), background .2s;
}
.gr-cta:hover { transform: translateY(-2px); }
.gr-cta .arrow { transition: transform .25s var(--ease); }
.gr-cta:hover .arrow { transform: translateX(4px); }
.gr-nav .burger { display: none; }

/* scroll progress */
.gr-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 950;
  background: var(--gr-accent); width: 0%;
}

/* ============================================================
   BLUEPRINT BACKGROUND GRID
   ============================================================ */
.blueprint-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

/* hazard tape strip */
.hazard {
  height: 12px; width: 100%;
  background: repeating-linear-gradient(
    -45deg, var(--gr-yellow) 0 22px, var(--gr-black) 22px 44px);
}
.hazard.thin { height: 7px; }

/* ============================================================
   SECTION CHROME
   ============================================================ */
.section { position: relative; padding: 120px 28px; }
.wrap { max-width: var(--maxw); margin: 0 auto; position: relative; }

.section-head { display: block; }
.section-head > div { margin: 0; }
.section-head .idx {
  font-family: var(--gr-mono); font-size: 15px; color: var(--gr-accent);
  letter-spacing: 0.1em; margin-bottom: 12px; line-height: 1;
}
.section-head h2 {
  margin: 0; font-weight: 800; font-size: clamp(28px, 3.8vw, 44px);
  line-height: 0.96; letter-spacing: -0.025em; text-transform: uppercase;
}
.section-head .lead {
  margin-top: 14px; max-width: 640px; color: var(--gr-gray-500); font-size: 18px; line-height: 1.6;
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal[data-in] { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .line-mask > span { transform: none; transition: none; }
}

/* clip-reveal for headlines */
.line-mask { overflow: hidden; display: block; }
.line-mask > span { display: block; transform: translateY(105%); transition: transform .9s var(--ease); }
.line-mask > span[data-in] { transform: none; }

/* ============================================================
   PLACEHOLDER (imagery)
   ============================================================ */
.ph {
  position: relative; overflow: hidden; background: #1b1b1b;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
  border: 1px solid #2c2c2c; display: flex; align-items: center; justify-content: center;
}
.ph .ph-tag {
  font-family: var(--gr-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--gr-gray-500); text-transform: uppercase; text-align: center; padding: 12px;
}
.ph.light { background: var(--gr-gray-50); border-color: var(--gr-gray-300);
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 10px, transparent 10px 20px); }
.ph.light .ph-tag { color: var(--gr-gray-700); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }

/* full-width image band */
.wideshot { margin-top: 48px; border: 1px solid #2a2a2a; overflow: hidden; }
.wideshot img { width: 100%; height: clamp(260px, 38vw, 460px); object-fit: cover; display: block; }

/* ============================================================
   FOOTER
   ============================================================ */
.gr-foot { background: var(--gr-ink); border-top: 1px solid #262626; padding: 70px 28px 40px; }
.gr-foot .row { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.gr-foot .brand img { height: 34px; margin-bottom: 18px; }
.gr-foot .brand p { color: var(--gr-gray-500); font-size: 13px; line-height: 1.7; max-width: 280px; }
.gr-foot h4 { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gr-gray-500); margin: 0 0 16px; }
.gr-foot .flink { display: block; color: var(--gr-white); font-size: 14px; padding: 5px 0; transition: color .2s, padding-left .2s; }
.gr-foot a.flink:hover { color: var(--gr-yellow); padding-left: 8px; }
.gr-foot .legal {
  margin-top: 54px; padding-top: 22px; border-top: 1px solid #262626;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-family: var(--gr-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gr-gray-700);
}

/* ============================================================
   HERO (shared)
   ============================================================ */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; overflow: hidden; padding: 120px 28px 90px; }
.hero .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px;
}
.hero .hero-eyebrow .dot { width: 8px; height: 8px; background: var(--gr-yellow); }
.hero .hero-eyebrow .dot.pulse { animation: gr-pulse 1.8s var(--ease) infinite; }
@keyframes gr-pulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.6);} }
.hero h1 {
  margin: 0; font-weight: 800; line-height: 0.86; letter-spacing: -0.03em;
  text-transform: uppercase; font-size: clamp(48px, 11vw, 168px);
}
.hero h1 .ya { color: var(--gr-accent); }
.hero h1 .yb { color: var(--gr-yellow); }
.hero .sub { margin-top: 28px; max-width: 460px; color: var(--gr-gray-300);
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; }

/* Hero A — jerarquía invertida: título chico, descripción protagonista */
.hero-a, .hero-d { justify-content: flex-start; padding-top: clamp(150px, 19vh, 230px); }
.hero-a .wrap, .hero-d .wrap { max-width: 1080px; margin-left: 0; margin-right: auto; }
.hero-a h1, .hero-d h1 { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.05; }
.hero-a .sub, .hero-d .sub {
  margin-top: 24px; max-width: 720px; color: var(--gr-white); font-weight: 600;
  font-size: clamp(32px, 5vw, 48px); line-height: 1.05; letter-spacing: -0.055em;
}
.hero-a .sub-detail, .hero-d .sub-detail { margin-top: 20px; max-width: 440px; color: var(--gr-gray-300);
  font-size: clamp(14px, 1.4vw, 17px); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.btn {
  display: inline-flex; align-items: center; gap: 11px; padding: 16px 26px;
  font-weight: 800; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1.5px solid var(--gr-white); background: transparent; color: var(--gr-white);
  cursor: pointer; transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn.solid { background: var(--gr-yellow); border-color: var(--gr-yellow); color: var(--gr-black); }
.btn.solid:hover { transform: translateY(-3px); }
.btn.ghost:hover { background: var(--gr-white); color: var(--gr-black); }
.btn.red { background: var(--gr-accent); border-color: var(--gr-accent); }
.btn.red:hover { transform: translateY(-3px); }

.hero-stats { display: flex; gap: 40px; margin-top: 56px; flex-wrap: wrap; }
.hero-stats .stat .v { font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1; letter-spacing: -0.02em; }
.hero-stats .stat .v em { font-style: normal; color: var(--gr-yellow); }
.hero-stats .stat .l { font-family: var(--gr-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gr-gray-500); margin-top: 8px; }

.tech-note { position: absolute; font-family: var(--gr-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gr-gray-700); pointer-events: none; }
.tech-note .tick { color: var(--gr-yellow); }

.scroll-hint { position: absolute; left: 28px; bottom: 30px; display: flex; align-items: center; gap: 12px;
  font-family: var(--gr-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gr-gray-500); }
.scroll-hint .bar { width: 46px; height: 1px; background: var(--gr-gray-700); position: relative; overflow: hidden; }
.scroll-hint .bar::after { content:""; position:absolute; inset:0; background: var(--gr-yellow); animation: gr-sweep 2.2s var(--ease) infinite; }
@keyframes gr-sweep { 0%{ transform: translateX(-100%);} 100%{ transform: translateX(100%);} }

/* ---- Hero A : blueprint ---- */
.hero-a .wrap { z-index: 3; }
.hero-a .crane-stage { position: absolute; top: 0; right: -2%; bottom: 0; width: min(620px, 52vw); z-index: 2; opacity: .9; }
@media (max-width: 860px) { .hero-a .crane-stage { opacity: .22; right: -20%; } }

/* animated architectural blueprint (draws itself, loops) */
.bp-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 1; opacity: .18; }
@media (max-width: 860px) { .bp-stage { opacity: .1; } }
.bp { width: min(1120px, 94%); height: auto; }
.bp * { fill: none; stroke: #c9d6e0; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.bp .dim { stroke: var(--gr-yellow); stroke-width: 1; }
.bp .fix { stroke: #9fb0bd; }
.bp text { fill: var(--gr-yellow); stroke: none; font-family: var(--gr-mono); font-size: 15px; letter-spacing: .08em; }
.bp .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bp-draw 11s ease-in-out infinite; }
@keyframes bp-draw {
  0% { stroke-dashoffset: 1; }
  22% { stroke-dashoffset: 0; }
  80% { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 1; }
}
.bp .sweep { stroke: var(--gr-yellow); stroke-width: 1.5; opacity: .55;
  animation: bp-sweep 11s ease-in-out infinite; }
@keyframes bp-sweep {
  0%, 8% { transform: translateX(0); opacity: 0; }
  22% { opacity: .6; }
  80% { transform: translateX(840px); opacity: .6; }
  88%, 100% { transform: translateX(840px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bp .draw { stroke-dashoffset: 0; animation: none; }
  .bp .sweep { display: none; }
}

/* ---- Hero B : split ---- */
.hero-b { padding: 0; }
.hero-b .split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.hero-b .left { display: flex; flex-direction: column; justify-content: center; padding: 130px 5vw 90px; }
.hero-b .right { position: relative; overflow: hidden; border-left: 1px solid #2a2a2a; }

/* video module ("obra en vivo") */
.hero-video { position: absolute; inset: 0; overflow: hidden; background: #0c0c0c; }
.hero-video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-screen { position: absolute; inset: 0; }
.vid-screen .vid-crane { position: absolute; right: -16%; bottom: -6%; width: 92%; height: 96%; opacity: .5;
  animation: gr-vidpan 22s ease-in-out infinite alternate; }
@keyframes gr-vidpan { from { transform: translateX(0) scale(1.02); } to { transform: translateX(-6%) scale(1.12); } }
.vid-scan { position: absolute; left: 0; right: 0; height: 2px; background: rgba(255,196,0,.45);
  box-shadow: 0 0 14px rgba(255,196,0,.5); animation: gr-vidscan 5.5s linear infinite; }
@keyframes gr-vidscan { 0% { top: -2%; } 100% { top: 102%; } }
.vid-lines { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(rgba(255,255,255,.035) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; }
.hero-video::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 120px 24px rgba(0,0,0,.7); }
.vid-ui { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px; pointer-events: none; }
.vid-top { display: flex; justify-content: space-between; align-items: center;
  font-family: var(--gr-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.vid-top .rec { display: flex; align-items: center; gap: 9px; color: var(--gr-white); }
.vid-top .rec i { width: 9px; height: 9px; background: var(--gr-red); border-radius: 50%; animation: gr-pulse 1.4s infinite; }
.vid-top .tc { color: var(--gr-yellow); }
.vid-bottom { display: flex; flex-direction: column; gap: 12px; }
.vid-bottom .meter { height: 6px; background: rgba(255,255,255,.16); position: relative; overflow: hidden; }
.vid-bottom .meter span { position: absolute; inset: 0 32% 0 0; background: var(--gr-yellow); }
.vid-btn { pointer-events: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  background: rgba(12,12,12,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid #444; color: var(--gr-white); font-family: var(--gr-font); font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 16px; cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s var(--ease); }
.vid-btn:hover { background: var(--gr-yellow); color: var(--gr-black); border-color: var(--gr-yellow); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .vid-screen .vid-crane, .vid-scan { animation: none !important; } }
@media (max-width: 860px) { .hero-b .split { grid-template-columns: 1fr; } .hero-b .right { min-height: 56vh; } .hero-b .left { padding: 110px 24px 70px; } }

/* ---- Hero C : industrial marquee ---- */
.hero-c { align-items: center; text-align: center; }
.hero-c .marquee { position: absolute; left: 0; right: 0; overflow: hidden; white-space: nowrap; z-index: 1; }
.hero-c .marquee.top { top: 17%; } .hero-c .marquee.bot { bottom: 15%; }
.hero-c .marquee .track { display: inline-block; will-change: transform; }
.hero-c .marquee .track span { font-weight: 800; font-size: clamp(40px, 9vw, 120px); text-transform: uppercase;
  letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.2px #3a3a3a; padding: 0 28px; }
.hero-c .marquee.top .track { animation: gr-mq-l 26s linear infinite; }
.hero-c .marquee.bot .track { animation: gr-mq-r 30s linear infinite; }
@keyframes gr-mq-l { from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@keyframes gr-mq-r { from{ transform: translateX(-50%);} to{ transform: translateX(0);} }
.hero-c .center { position: relative; z-index: 3; }
.hero-c .center .sub { margin-left: auto; margin-right: auto; }
.hero-c .hero-actions { justify-content: center; }
.hero-c .hero-stats { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .hero-c .marquee .track { animation: none !important; }
  .scroll-hint .bar::after, .hero .hero-eyebrow .dot.pulse { animation: none !important; }
}

/* ---- Blueprint crane animation ---- */
.crane { width: 100%; height: 100%; }
.crane line, .crane rect, .crane polyline, .crane circle, .crane path { vector-effect: non-scaling-stroke; }
.crane .trolley { animation: gr-trolley 9s ease-in-out infinite; }
@keyframes gr-trolley { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(-150px);} }
.crane .hookgrp { transform-box: fill-box; transform-origin: top center; animation: gr-pendulum 5.5s ease-in-out infinite; }
@keyframes gr-pendulum { 0%,100%{ transform: rotate(2.6deg);} 50%{ transform: rotate(-2.6deg);} }
.crane .swing { transform-box: view-box; transform-origin: 130px 300px; animation: gr-swing 8s ease-in-out infinite; }
@keyframes gr-swing { 0%,100%{ transform: rotate(-0.8deg);} 50%{ transform: rotate(0.8deg);} }
@media (prefers-reduced-motion: reduce) {
  .crane .trolley, .crane .hookgrp, .crane .swing { animation: none !important; }
}

/* ---- Hero D : before/after (bloque contenido) ---- */
.hero-d { padding: 0; min-height: 100vh; justify-content: center; }
.hero-d .split {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  align-items: center; gap: clamp(32px, 5vw, 72px);
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: 140px clamp(24px, 5vw, 56px) 96px;
}
.hero-d .left, .hero-d .right { min-width: 0; position: relative; z-index: 5; }

.hero-d .ba-card { display: flex; flex-direction: column; gap: 12px; }
.hero-d .ba-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: #0c0c0c; border: 1px solid #2a2a2a; overflow: hidden;
}
.hero-d .ba-layer { position: absolute; inset: 0; }
.hero-d .ba-layer image-slot { display: block; width: 100%; height: 100%; }
.hero-d .ba-after { z-index: 1; }
.hero-d .ba-before { z-index: 2; clip-path: inset(0 0 0 50%);
  animation: gr-ba-wipe 7s ease-in-out infinite alternate; }
@keyframes gr-ba-wipe { 0% { clip-path: inset(0 0 0 14%); } 100% { clip-path: inset(0 0 0 86%); } }
.hero-d .ba-divider { position: absolute; top: 0; bottom: 0; width: 2px; left: 50%; z-index: 4;
  background: linear-gradient(var(--gr-yellow), #fff 50%, var(--gr-yellow)); box-shadow: 0 0 22px rgba(255,196,0,.7);
  animation: gr-ba-div 7s ease-in-out infinite alternate; }
@keyframes gr-ba-div { 0% { left: 14%; } 100% { left: 86%; } }
.hero-d .ba-divider .knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 40px; height: 40px; border-radius: 50%; background: var(--gr-yellow); color: var(--gr-black);
  display: grid; place-items: center; font-size: 18px; font-weight: 800; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.hero-d .ba-tag { position: absolute; bottom: 16px; z-index: 5; font-family: var(--gr-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.62);
  padding: 6px 12px; border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hero-d .ba-tag-before { right: 16px; }
.hero-d .ba-tag-after { left: 16px; }
.hero-d .ba-caption { font-family: var(--gr-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gr-gray-500); }
.hero-d .ba-stage [data-empty] { z-index: 6; }
@media (max-width: 900px) {
  .hero-d .split { grid-template-columns: 1fr; gap: 36px; padding: 116px 24px 72px; }
  .hero-d .right { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-d .ba-before { animation: none !important; clip-path: inset(0 0 0 50%); }
  .hero-d .ba-divider { animation: none !important; left: 50%; }
}

/* ============================================================
   SERVICIOS — interactive index list
   ============================================================ */
.svc-group + .svc-group { margin-top: 64px; }
.svc-group .glabel { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.svc-group .glabel .gt { font-family: var(--gr-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gr-gray-500); }
.svc-group .glabel .gt b { color: var(--gr-yellow); }
.svc-group .glabel .gline { flex: 1; height: 1px; background: #2a2a2a; }

.svc-row {
  position: relative; display: grid; grid-template-columns: 64px 1fr auto 60px;
  align-items: center; gap: 24px; padding: 30px 22px; border-top: 1px solid #2a2a2a;
  overflow: hidden; cursor: default;
}
.svc-group .svc-row:last-child { border-bottom: 1px solid #2a2a2a; }
.svc-row .fill { position: absolute; inset: 0; background: var(--gr-accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); z-index: 0; }
.svc-row > * { position: relative; z-index: 1; transition: color .35s var(--ease); }
.svc-row .n { font-family: var(--gr-mono); font-size: 13px; color: var(--gr-gray-500); }
.svc-row .t { font-weight: 800; font-size: clamp(22px, 3vw, 38px); letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; }
.svc-row .d { color: var(--gr-gray-500); font-size: 14px; line-height: 1.55; max-width: 360px; }
.svc-row .go { font-size: 24px; text-align: right; transform: translateX(-6px); opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.svc-row:hover .fill { transform: scaleX(1); }
.svc-row:hover .n, .svc-row:hover .t, .svc-row:hover .d { color: var(--gr-white); }
.svc-row:hover .go { opacity: 1; transform: translateX(0); }
.svc-row.yellow .fill { background: var(--gr-yellow); }
.svc-row.yellow:hover .n, .svc-row.yellow:hover .t, .svc-row.yellow:hover .d, .svc-row.yellow:hover .go { color: var(--gr-black); }

/* Servicios sobre fondo claro ("Lo que hacemos") */
.section.light { background: #f4f3f0; }
.section.light .section-head h2 { color: var(--gr-ink); }
.section.light .section-head .lead { color: var(--gr-gray-700); }
.section.light .svc-group .glabel .gt { color: var(--gr-gray-700); }
.section.light .svc-group .glabel .gt b { color: var(--gr-accent); }
.section.light .svc-group .glabel .gline { background: #d9d6cf; }
.section.light .svc-row { border-top-color: #ddd9d1; }
.section.light .svc-group .svc-row:last-child { border-bottom-color: #ddd9d1; }
.section.light .svc-row .n { color: var(--gr-gray-700); }
.section.light .svc-row .t { color: var(--gr-ink); }
.section.light .svc-row .d { color: var(--gr-gray-700); }
.section.light .svc-row .go { color: var(--gr-ink); }
/* hover: en fondo claro el relleno rojo necesita texto blanco (la regla light pisa al hover por especificidad) */
.section.light .svc-row:hover .n,
.section.light .svc-row:hover .t,
.section.light .svc-row:hover .d,
.section.light .svc-row:hover .go { color: var(--gr-white); }
.section.light .svc-row.yellow:hover .n,
.section.light .svc-row.yellow:hover .t,
.section.light .svc-row.yellow:hover .d,
.section.light .svc-row.yellow:hover .go { color: var(--gr-black); }
@media (max-width: 700px) {
  .svc-row { grid-template-columns: 40px 1fr; padding: 22px 14px; gap: 8px 16px; }
  .svc-row .t { line-height: 1.04; }
  .svc-row .d { grid-column: 2; max-width: none; }
  .svc-row .go { display: none; }
}

/* ============================================================
   OBRAS — portfolio grid
   ============================================================ */
.obras-section { background: var(--gr-ink); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 38px; }
.filters button {
  font-family: var(--gr-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid #333; background: transparent; color: var(--gr-gray-500);
  cursor: pointer; transition: all .2s var(--ease);
}
.filters button:hover { color: var(--gr-white); border-color: var(--gr-gray-500); }
.filters button.on { background: var(--gr-yellow); border-color: var(--gr-yellow); color: var(--gr-black); font-weight: 700; }

.obra-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.obra-card { position: relative; overflow: hidden; cursor: pointer; background: #1b1b1b; }
.obra-card.c6 { grid-column: span 6; } .obra-card.c4 { grid-column: span 4; }
.obra-card.c8 { grid-column: span 8; } .obra-card.c12 { grid-column: span 12; }
.obra-card .ph { position: absolute; inset: 0; transition: transform .7s var(--ease); }
.obra-card:hover .ph { transform: scale(1.05); }
.obra-card .sizer { display: block; width: 100%; }
.obra-card .ovl { position: absolute; inset: 0; z-index: 2; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(to top, rgba(10,10,10,.86) 0%, rgba(10,10,10,0) 55%); }
.obra-card .ovl .cat { font-family: var(--gr-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gr-yellow); }
.obra-card .ovl h3 { margin: 6px 0 0; font-weight: 800; font-size: 22px; letter-spacing: -0.01em; text-transform: uppercase;
  transform: translateY(10px); opacity: .85; transition: transform .4s var(--ease), opacity .4s; }
.obra-card .ovl .meta { font-size: 12px; color: var(--gr-gray-500); margin-top: 6px; max-height: 0; opacity: 0; overflow: hidden; transition: all .4s var(--ease); }
.obra-card:hover .ovl h3 { transform: none; opacity: 1; }
.obra-card:hover .ovl .meta { max-height: 40px; opacity: 1; }
.obra-card .tag-corner { position: absolute; top: 0; left: 0; z-index: 3; background: var(--gr-black); color: var(--gr-yellow);
  font-family: var(--gr-mono); font-size: 10px; letter-spacing: 0.1em; padding: 6px 10px; }
@media (max-width: 860px) {
  .obra-card.c6, .obra-card.c4, .obra-card.c8 { grid-column: span 12; }
}

/* ============================================================
   PROCESO — build timeline
   ============================================================ */
.proceso-steps { position: relative; margin-top: 60px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.proceso-line { position: absolute; top: 36px; left: 0; right: 0; height: 3px; background: #2a2a2a; }
.proceso-line .fill { position: absolute; inset: 0; width: var(--fill, 0%); background: var(--gr-yellow); transition: width .2s linear; }
.pstep { padding: 0 24px 0 0; position: relative; }
.pstep .node { width: 18px; height: 18px; background: var(--gr-black); border: 3px solid #2a2a2a; margin: 27px 0 26px; position: relative; z-index: 2; transition: border-color .4s, background .4s; }
.pstep.lit .node { border-color: var(--gr-yellow); background: var(--gr-yellow); }
.pstep .pn { font-family: var(--gr-mono); font-size: 12px; color: var(--gr-accent); letter-spacing: 0.1em; }
.pstep h3 { margin: 10px 0 12px; font-weight: 800; font-size: clamp(20px, 2.4vw, 30px); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.pstep p { color: var(--gr-gray-500); font-size: 14px; line-height: 1.6; max-width: 250px; }
.pstep .tasks { margin: 16px 0 0; padding: 0; list-style: none; }
.pstep .tasks li { font-family: var(--gr-mono); font-size: 11px; color: var(--gr-gray-700); padding: 4px 0 4px 16px; position: relative; }
.pstep .tasks li::before { content: "+"; position: absolute; left: 0; color: var(--gr-yellow); }
@media (max-width: 860px) {
  .proceso-steps { grid-template-columns: 1fr; }
  .proceso-line { top: 0; bottom: 0; left: 8px; right: auto; width: 3px; height: auto; }
  .proceso-line .fill { width: 100%; height: var(--fill, 0%); }
  .pstep { padding: 0 0 36px 36px; }
  .pstep .node { position: absolute; left: 0; margin: 0; }
}

/* ============================================================
   CONTACTO — presupuesto
   ============================================================ */
.contacto-section { background: var(--gr-black); position: relative; }
.contacto-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: stretch; }
.contacto-grid h2 { font-weight: 800; font-size: clamp(40px, 6vw, 84px); line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; margin: 18px 0 0; }
.contacto-grid h2 .yb { color: var(--gr-yellow); }
.contact-lines { margin-top: 44px; display: flex; flex-direction: column; gap: 2px; }
.contact-line { display: flex; align-items: center; gap: 18px; padding: 20px 4px; border-top: 1px solid #2a2a2a; transition: padding-left .25s var(--ease); }
.contact-line:last-child { border-bottom: 1px solid #2a2a2a; }
.contact-line:hover { padding-left: 12px; }
.contact-line .k { font-family: var(--gr-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gr-gray-500); width: 92px; flex-shrink: 0; }
.contact-line .v { font-weight: 700; font-size: clamp(16px, 2vw, 22px); }
.contact-line:hover .v { color: var(--gr-yellow); }

.gr-form { display: flex; flex-direction: column; gap: 20px; background: #ffffff; border: 1px solid var(--gr-gray-300); padding: 44px; box-shadow: 0 26px 70px rgba(0,0,0,0.45); }
.gr-form .field label { display: block; font-family: var(--gr-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gr-gray-700); margin-bottom: 9px; }
.gr-form input, .gr-form select, .gr-form textarea {
  width: 100%; background: var(--gr-gray-50); border: 1px solid var(--gr-gray-300); color: var(--gr-ink);
  font-family: var(--gr-font); font-size: 16px; padding: 15px 16px; outline: none; transition: border-color .2s, background .2s; }
.gr-form input::placeholder, .gr-form textarea::placeholder { color: var(--gr-gray-500); }
.gr-form input:focus, .gr-form select:focus, .gr-form textarea:focus { border-color: var(--gr-accent); background: #fff; }
.gr-form, .gr-form .field, .gr-form .two, .gr-form input, .gr-form select, .gr-form textarea { min-width: 0; max-width: 100%; }
.gr-form .two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.gr-form textarea { resize: vertical; min-height: 120px; }
.gr-form .field:has(textarea) { flex: 1; display: flex; flex-direction: column; }
.gr-form .field:has(textarea) textarea { flex: 1; }
.gr-form .submit { display: inline-flex; align-items: center; justify-content: center; gap: 11px; background: var(--gr-yellow); color: var(--gr-black);
  border: 0; font-weight: 800; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; padding: 19px; cursor: pointer; transition: transform .2s var(--ease); margin-top: 4px; }
.gr-form .submit:hover { transform: translateY(-2px); }
.gr-form .note { font-family: var(--gr-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--gr-gray-500); text-align: center; }
@media (max-width: 860px) { .contacto-grid { grid-template-columns: minmax(0,1fr); gap: 40px; } .gr-form .two { grid-template-columns: minmax(0,1fr); } }

/* tweak: motion off */
body.gr-noanim *,
body.gr-noanim *::before,
body.gr-noanim *::after { animation: none !important; transition: none !important; }
body.gr-noanim .reveal { opacity: 1 !important; transform: none !important; }
body.gr-noanim .line-mask > span { transform: none !important; }
body.gr-noanim .bp .draw { stroke-dashoffset: 0 !important; }
body.gr-noanim .bp .sweep { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .section { padding: 80px 20px; }
  .gr-nav .links { display: none; }
  .gr-nav .brand .tag { display: none; }
  .section-head { gap: 16px; }
  .section-head .lead { max-width: none; }
}

/* mobile: el eyebrow gris (Construcción · Remodelación · Flipping…) se parte prolijo */
@media (max-width: 640px) {
  .hero .hero-eyebrow, .page-hero .hero-eyebrow { align-items: flex-start; gap: 9px; }
  .hero .hero-eyebrow .dot, .page-hero .hero-eyebrow .dot { margin-top: 3px; flex: 0 0 auto; }
  .eyebrow { letter-spacing: 0.12em !important; font-size: 11px !important; line-height: 1.55; }
}

/* ============================================================
   MULTI-PAGE NAV (burger + full-screen overlay)
   ============================================================ */
.gr-nav .links a.active { color: var(--gr-white); }
.gr-nav .links a.active span { transform: scaleX(1); }
.gr-nav .burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px; z-index: 901;
}
.gr-nav .burger span { display: block; width: 24px; height: 2px; background: var(--gr-white);
  transition: transform .3s var(--ease), opacity .2s; }
.gr-nav .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gr-nav .burger.open span:nth-child(2) { opacity: 0; }
.gr-nav .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; z-index: 899; background: rgba(12,12,12,.98);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 90px 28px; transform: translateY(-102%);
  visibility: hidden; opacity: 0;
  transition: transform .5s var(--ease), opacity .3s var(--ease), visibility 0s linear .5s;
}
.nav-overlay.open { transform: none; visibility: visible; opacity: 1; transition: transform .5s var(--ease), opacity .3s var(--ease); }
.nav-overlay a { font-weight: 800; font-size: clamp(26px, 7vw, 52px); text-transform: uppercase;
  letter-spacing: -0.02em; color: var(--gr-gray-500); padding: 8px 0; transition: color .2s, padding-left .25s var(--ease); }
.nav-overlay a:hover { color: var(--gr-white); padding-left: 12px; }
.nav-overlay a.active { color: var(--gr-yellow); }

/* Compact desktop nav — keep categories visible on narrower desktops */
@media (max-width: 1200px) and (min-width: 901px) {
  .gr-nav { gap: 14px !important; padding-left: 18px !important; padding-right: 18px !important; }
  .gr-nav .brand img { height: 44px !important; }
  .gr-nav .brand .tag { display: none; }
  .gr-nav .links { gap: 0; }
  .gr-nav .links a { font-size: 11px; letter-spacing: 0.08em; padding: 8px 9px; }
  .gr-nav .links a span { left: 9px; right: 9px; }
  .gr-cta { font-size: 10px; letter-spacing: 0.08em; padding: 9px 13px; }
}
@media (max-width: 900px) {
  .gr-nav .links { display: none; }
  .gr-nav .burger { display: flex; }
}
@media (min-width: 901px) { .nav-overlay { display: none !important; } }

/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.page-hero { position: relative; overflow: hidden; padding: 170px 28px 96px; border-bottom: 1px solid #2a2a2a; }
.page-hero .blueprint-grid { opacity: .4; }
.page-hero .wrap { position: relative; z-index: 3; }
.page-hero .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.page-hero .hero-eyebrow .dot { width: 8px; height: 8px; background: var(--gr-yellow); }
.page-hero .hero-eyebrow .dot.pulse { animation: gr-pulse 1.8s var(--ease) infinite; }
.page-hero h1 { margin: 0; font-weight: 800; line-height: 0.86; letter-spacing: -0.03em;
  text-transform: uppercase; font-size: clamp(46px, 9.5vw, 124px); }
.page-hero h1 .ya { color: var(--gr-accent); }
.page-hero h1 .yb { color: var(--gr-yellow); }
.page-hero .sub { margin-top: 26px; max-width: 540px; color: var(--gr-gray-300);
  font-size: clamp(15px, 1.6vw, 19px); line-height: 1.65; }
.page-hero .hero-actions { margin-top: 36px; }

/* feature: text + image two-column */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feature.flip .feature-media { order: -1; }
.feature + .feature { margin-top: 110px; }
.feature .idx { font-family: var(--gr-mono); color: var(--gr-accent); font-size: 12px; letter-spacing: .1em; margin-bottom: 14px; }
.feature h3 { margin: 0 0 18px; font-weight: 800; font-size: clamp(26px, 3.4vw, 46px);
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.94; }
.feature h3 .yb { color: var(--gr-yellow); }
.feature p { color: var(--gr-gray-300); font-size: 16px; line-height: 1.7; margin: 0 0 16px; max-width: 52ch; }
.feature p .hl { color: var(--gr-white); font-weight: 700; }
.feature .feature-media .ph { width: 100%; }
.feature .feature-media .sizer { display: block; padding-top: 78%; }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: 28px; }
  .feature.flip .feature-media { order: 0; }
  .feature + .feature { margin-top: 64px; }
}

/* spaces grid */
.spaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.space-card { position: relative; overflow: hidden; background: #1b1b1b; border: 1px solid #2a2a2a; cursor: pointer; }
.space-card .ph { position: absolute; inset: 0; border: 0; transition: transform .7s var(--ease); }
.space-card:hover .ph { transform: scale(1.05); }
.space-card .sizer { display: block; padding-top: 118%; }
.space-card .ovl { position: absolute; inset: 0; z-index: 2; padding: 22px; display: flex; flex-direction: column;
  justify-content: flex-end; background: linear-gradient(to top, rgba(10,10,10,.9) 0%, rgba(10,10,10,0) 62%); }
.space-card .ovl h4 { margin: 0; font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: -0.01em; }
.space-card .ovl p { margin: 8px 0 0; font-size: 13px; color: var(--gr-gray-300); line-height: 1.5; }
@media (max-width: 860px) { .spaces { grid-template-columns: 1fr; } }

/* chips list */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.chips span { font-family: var(--gr-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gr-gray-300); border: 1px solid #333; padding: 9px 13px; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 44px; }
.gallery .ph { aspect-ratio: 1 / 1; }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* simple prose block + stat band reused by interior pages */
.prose { max-width: 760px; }
.prose p { color: var(--gr-gray-300); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.75; margin: 0 0 20px; }
.prose p .hl { color: var(--gr-white); font-weight: 700; }
.band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #2a2a2a; border: 1px solid #2a2a2a; margin-top: 56px; }
.band .cell { background: var(--gr-black); padding: 34px 28px; }
.band .cell .v { font-weight: 800; font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.02em; line-height: 1; }
.band .cell .v em { font-style: normal; color: var(--gr-yellow); }
.band .cell .l { font-family: var(--gr-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gr-gray-500); margin-top: 12px; }
@media (max-width: 700px) { .band { grid-template-columns: 1fr; } }

/* steps / numbered list reused by flipping */
.numlist { margin-top: 48px; display: grid; gap: 0; }
.numrow { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 30px 0; border-top: 1px solid #2a2a2a; }
.numrow:last-child { border-bottom: 1px solid #2a2a2a; }
.numrow .nn { font-family: var(--gr-mono); font-size: 13px; color: var(--gr-accent); }
.numrow h4 { margin: 0 0 10px; font-weight: 800; font-size: clamp(20px, 2.6vw, 30px); text-transform: uppercase; letter-spacing: -0.02em; }
.numrow p { margin: 0; color: var(--gr-gray-500); font-size: 15px; line-height: 1.6; max-width: 60ch; }
@media (max-width: 700px) { .numrow { grid-template-columns: 1fr; gap: 8px; } }

/* points grid (why-us) */
.points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #2a2a2a; border: 1px solid #2a2a2a; margin-top: 48px; }
.point { background: var(--gr-black); padding: 30px 28px; transition: background .25s var(--ease); }
.point:hover { background: var(--gr-gray-900); }
.point .pi { font-family: var(--gr-mono); font-size: 12px; color: var(--gr-accent); letter-spacing: .1em; }
.point h4 { margin: 12px 0 10px; font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: -0.01em; }
.point p { margin: 0; color: var(--gr-gray-500); font-size: 14px; line-height: 1.6; }
@media (max-width: 700px) { .points { grid-template-columns: 1fr; } }

/* full-width CTA band */
.cta-band { position: relative; overflow: hidden; padding: 86px 28px; background: var(--gr-ink); border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; }
.cta-band .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.cta-band h3 { margin: 0; max-width: none; font-weight: 800; font-size: clamp(28px, 4vw, 52px); line-height: 1.02; text-transform: uppercase; letter-spacing: -0.02em; }
.cta-band h3 .yb { color: var(--gr-yellow); }

/* ARTÍCULO DE BLOG */
.post-hero h1 { text-transform: none !important; font-size: clamp(30px, 4.6vw, 60px) !important; line-height: 1.04 !important; }
.article-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; font-family: var(--gr-mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gr-gray-500); }
.article-meta .cat { color: var(--gr-accent); }
.prose .lede { font-size: clamp(18px, 2.1vw, 23px) !important; color: var(--gr-white) !important; line-height: 1.55 !important; font-weight: 500; }
.prose h2 { font-weight: 800; font-size: clamp(23px, 3vw, 34px); line-height: 1.06; text-transform: uppercase;
  letter-spacing: -0.02em; margin: 54px 0 18px; color: var(--gr-white); }
.prose h2 .yb { color: var(--gr-yellow); }
.prose h2 .ya { color: var(--gr-accent); }
.prose .pullquote { margin: 44px 0; padding: 8px 0 8px 28px; border-left: 3px solid var(--gr-accent);
  font-size: clamp(20px, 2.5vw, 30px); line-height: 1.35; font-weight: 600; color: var(--gr-white); letter-spacing: -0.01em; }
.prose ul.facts { list-style: none; margin: 26px 0; padding: 0; }
.prose ul.facts li { position: relative; padding: 16px 0 16px 30px; border-top: 1px solid #2a2a2a;
  color: var(--gr-gray-300); font-size: 16px; line-height: 1.65; }
.prose ul.facts li:last-child { border-bottom: 1px solid #2a2a2a; }
.prose ul.facts li::before { content: "+"; position: absolute; left: 0; top: 16px; color: var(--gr-yellow); font-family: var(--gr-mono); }
.prose ul.facts li b { color: var(--gr-white); }
.article-cta { margin-top: 44px; padding-top: 30px; border-top: 1px solid #2a2a2a; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.article-cta p { margin: 0; flex: 1; min-width: 220px; color: var(--gr-gray-300); font-size: 16px; line-height: 1.6; }

/* Artículo de blog sobre fondo BLANCO */
.light-article { background: #ffffff; }
.light-article .prose p { color: #3b3b3b; }
.light-article .prose .lede { color: var(--gr-ink) !important; }
.light-article .prose .hl { color: var(--gr-ink); }
.light-article .prose h2 { color: var(--gr-ink); }
.light-article .prose h2 .yb, .light-article .prose h2 .ya { color: var(--gr-accent); }
.light-article .prose .pullquote { border-left-color: var(--gr-accent); color: var(--gr-ink); }
.light-article .prose ul.facts li { border-top-color: #e4e1da; color: #3b3b3b; }
.light-article .prose ul.facts li:last-child { border-bottom-color: #e4e1da; }
.light-article .prose ul.facts li b { color: var(--gr-ink); }
.light-article .article-cta { border-top-color: #e4e1da; }
.light-article .article-cta p { color: #3b3b3b; }
.light-article .band { background: #e4e1da; border-color: #e4e1da; }
.light-article .band .cell { background: #f6f5f1; }
.light-article .band .cell .v { color: var(--gr-ink); }
.light-article .band .cell .v em { color: var(--gr-accent); }
.light-article .band .cell .l { color: var(--gr-gray-700); }
.light-article .wideshot { border-color: #e4e1da; }
.light-article .post-figure { margin: 0 0 8px; }
.light-article .post-figure img { height: auto; }
.light-article .post-figure figcaption { font-family: var(--gr-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gr-gray-500); margin-top: 10px; }

/* blog posts */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.post { display: flex; flex-direction: column; background: #1b1b1b; border: 1px solid #2a2a2a; transition: transform .3s var(--ease), border-color .3s; }
.post:hover { transform: translateY(-4px); border-color: var(--gr-gray-700); }
.post .ph { aspect-ratio: 16 / 10; border: 0; border-bottom: 1px solid #2a2a2a; }
.post .body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post .cat { font-family: var(--gr-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gr-accent); }
.post h3 { margin: 0; font-weight: 800; font-size: 20px; line-height: 1.06; text-transform: uppercase; letter-spacing: -0.01em; }
.post p { margin: 0; color: var(--gr-gray-500); font-size: 14px; line-height: 1.55; }
.post .soon { margin-top: auto; display: inline-block; align-self: flex-start; font-family: var(--gr-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gr-black); background: var(--gr-yellow); padding: 5px 9px; }
.post .more { margin-top: auto; font-family: var(--gr-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gr-yellow); transition: letter-spacing .2s var(--ease); }
.post:hover .more { letter-spacing: .2em; }
@media (max-width: 860px) { .posts { grid-template-columns: 1fr; } }

/* partners */
.partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.partner { background: #1b1b1b; border: 1px solid #2a2a2a; display: flex; flex-direction: column; transition: border-color .3s; }
.partner:hover { border-color: var(--gr-gray-700); }
.partner .logo { aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid #2a2a2a; background: var(--gr-gray-50); }
.partner .logo img { object-fit: contain; padding: 22px; background: var(--gr-gray-50); }
.partner .meta { padding: 18px; }
.partner .meta h4 { margin: 0 0 6px; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: -0.01em; }
.partner .meta span { font-family: var(--gr-mono); font-size: 11px; letter-spacing: .08em; color: var(--gr-gray-500); }
@media (max-width: 860px) { .partners { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   NAV DROPDOWN — Servicios inmobiliarios
   ============================================================ */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd > a { display: inline-flex; align-items: center; }
.nav-dd .cv { font-style: normal; font-size: 10px; margin-left: 7px; display: inline-block;
  transition: transform .25s var(--ease); color: var(--gr-gray-500); }
.nav-dd:hover > a, .nav-dd:focus-within > a { color: var(--gr-white); }
.nav-dd:hover .cv, .nav-dd:focus-within .cv { transform: rotate(180deg); color: var(--gr-yellow); }

.dd-panel {
  position: absolute; top: calc(100% + 4px); left: 6px; z-index: 920;
  min-width: 248px; display: flex; flex-direction: column;
  background: rgba(14,14,14,0.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid #2a2a2a; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
/* invisible hover bridge so the panel doesn't close in the gap */
.nav-dd::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.nav-dd:hover .dd-panel, .nav-dd:focus-within .dd-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.dd-panel a {
  display: block; padding: 12px 15px; font-size: 14px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--gr-gray-300);
  white-space: nowrap; border-left: 2px solid transparent; transition: color .18s, background .18s, padding-left .18s, border-color .18s;
}
.dd-panel a:hover { color: var(--gr-white); background: #1c1c1c; padding-left: 20px; border-left-color: var(--gr-yellow); }
.dd-panel a.all {
  font-family: var(--gr-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gr-yellow); margin-bottom: 6px; padding-bottom: 14px; border-bottom: 1px solid #2a2a2a; border-left: 0;
}
.dd-panel a.all:hover { padding-left: 15px; color: var(--gr-yellow); background: transparent; }

/* mobile overlay — expandable group */
.ov-group { display: flex; flex-direction: column; }
.ov-parent {
  display: flex; align-items: center; gap: 14px; background: none; border: 0; cursor: pointer;
  font-family: var(--gr-font); font-weight: 800; font-size: clamp(26px, 7vw, 52px);
  text-transform: uppercase; letter-spacing: -0.02em; color: var(--gr-gray-500);
  padding: 8px 0; text-align: left; transition: color .2s, padding-left .25s var(--ease);
}
.ov-parent:hover { color: var(--gr-white); padding-left: 12px; }
.ov-parent .cv { font-size: 0.5em; transition: transform .25s var(--ease); }
.ov-parent.open { color: var(--gr-yellow); }
.ov-parent.open .cv { transform: rotate(180deg); }
.ov-sub { display: flex; flex-direction: column; max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease); padding-left: 16px; }
.ov-sub.open { max-height: 460px; }
.ov-sub a { font-weight: 700; font-size: clamp(15px, 4.6vw, 22px); text-transform: none;
  letter-spacing: -0.01em; color: var(--gr-gray-300); padding: 8px 0; }
.ov-sub a:hover { color: var(--gr-white); padding-left: 10px; }

@media (min-width: 901px) { .ov-group { display: none !important; } }

/* ============================================================
   MOBILE GUTTERS — un solo margen lateral consistente
   ============================================================ */
@media (max-width: 900px) {
  html, body:not(.gr-home) { overflow-x: hidden; }
  :root { --gr-gutter: 20px; }
  body:not(.gr-home) .gr-nav, body:not(.gr-home) .gr-nav.scrolled { padding-left: var(--gr-gutter); padding-right: var(--gr-gutter); gap: 12px; }
  body:not(.gr-home) .gr-nav .brand img { height: 32px; }
  body:not(.gr-home) .gr-cta { font-size: 10px; letter-spacing: 0.08em; padding: 10px 12px; }
  body:not(.gr-home) .section { padding: 72px var(--gr-gutter); }
  body:not(.gr-home) .hero { padding: 116px var(--gr-gutter) 76px; min-height: auto; }
  body:not(.gr-home) .hero-a, body:not(.gr-home) .hero-d { padding-top: 132px; }
  body:not(.gr-home) .page-hero { padding: 132px var(--gr-gutter) 72px; }
  body:not(.gr-home) .cta-band { padding: 64px var(--gr-gutter); }
  body:not(.gr-home) .gr-foot { padding: 56px var(--gr-gutter) 32px; }
  body:not(.gr-home) .nav-overlay { padding: 96px var(--gr-gutter); }
  body:not(.gr-home) .hero-b .left { padding: 116px var(--gr-gutter) 70px; }
  body:not(.gr-home) .hero-d .split { padding: 124px var(--gr-gutter) 68px; }
  body:not(.gr-home) .band .cell { padding: 26px var(--gr-gutter); }
  body:not(.gr-home) .hero .wrap, body:not(.gr-home) .page-hero .wrap, body:not(.gr-home) .section .wrap, body:not(.gr-home) .cta-band .wrap { width: 100%; max-width: 100%; }
  body:not(.gr-home) .hero-a .wrap, body:not(.gr-home) .hero-d .wrap { max-width: 100%; }
  body:not(.gr-home) .hero-c .marquee .track span { padding: 0 18px; }
  body:not(.gr-home) .partners { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  body:not(.gr-home) .gallery { gap: 8px; }
}
@media (max-width: 420px) {
  :root { --gr-gutter: 18px; }
  body:not(.gr-home) .partners { grid-template-columns: 1fr; }
  body:not(.gr-home) .space-card .ovl { padding: 18px; }
  body:not(.gr-home) .post .body { padding: 20px 18px 22px; }
}

/* nav tuning (antes inline) — el bloque MOBILE GUTTERS lo sobreescribe en móvil */
.gr-nav.gr-nav-tuned { gap: 28px; padding: 33px 29px 17px 28px; border-width: 0; }
.gr-nav.gr-nav-tuned.scrolled { padding: 20px 29px 14px 28px; border-width: 0 0 1px; }
.gr-nav .brand img { height: 58px; width: auto; }
@media (max-width: 900px) {
  body:not(.gr-home) .gr-nav.gr-nav-tuned, body:not(.gr-home) .gr-nav.gr-nav-tuned.scrolled {
    padding-left: var(--gr-gutter); padding-right: var(--gr-gutter); gap: 12px;
  }
  body:not(.gr-home) .gr-nav.gr-nav-tuned { padding-top: 16px; padding-bottom: 14px; }
  body:not(.gr-home) .gr-nav.gr-nav-tuned.scrolled { padding-top: 11px; padding-bottom: 11px; }
  body:not(.gr-home) .gr-nav .brand img { height: 34px; }
  body:not(.gr-home) .gr-nav .brand .tag { display: none; }
}

/* ============================================================
   MOBILE FIXES — títulos, desbordes y grillas inline
   ============================================================ */
@media (max-width: 900px) {
  body:not(.gr-home) .hero h1, body:not(.gr-home) .page-hero h1 {
    font-size: clamp(26px, 9.4vw, 44px) !important;
    line-height: 0.94 !important; letter-spacing: -0.02em;
    hyphens: none !important; overflow-wrap: normal; word-break: normal;
  }
  body:not(.gr-home) .post-hero h1 { font-size: clamp(22px, 6.4vw, 30px) !important; hyphens: none !important; overflow-wrap: normal; }
  body:not(.gr-home) .section-head h2, body:not(.gr-home) .contacto-grid h2, body:not(.gr-home) .cta-band h3, body:not(.gr-home) .feature h3, body:not(.gr-home) .numrow h4 {
    font-size: clamp(22px, 7.2vw, 34px) !important; line-height: 1 !important;
    hyphens: none !important; overflow-wrap: normal; word-break: normal;
  }
  body:not(.gr-home) .hero .sub, body:not(.gr-home) .page-hero .sub, body:not(.gr-home) .section-head .lead { max-width: 100%; }
  /* grillas: forzar 1 columna aunque vengan con grid-template-columns inline */
  body:not(.gr-home) .points, body:not(.gr-home) .band, body:not(.gr-home) .spaces, body:not(.gr-home) .numrow, body:not(.gr-home) .feature, body:not(.gr-home) .contacto-grid, body:not(.gr-home) .posts, body:not(.gr-home) .proceso-steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body:not(.gr-home) .partners { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  body:not(.gr-home) .gallery { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  body:not(.gr-home) .point { padding: 24px var(--gr-gutter); }
  body:not(.gr-home) .point h4 { font-size: 18px; }
  /* contacto: clave arriba, valor abajo, sin cortes */
  body:not(.gr-home) .contact-line { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 0; }
  body:not(.gr-home) .contact-line .k { width: auto; }
  body:not(.gr-home) .contact-line .v { font-size: 17px; overflow-wrap: anywhere; }
  body:not(.gr-home) .contact-line:hover { padding-left: 0; }
  body:not(.gr-home) .gr-form { padding: 24px var(--gr-gutter); }
  body:not(.gr-home) .gr-foot .flink, body:not(.gr-home) .gr-foot a { overflow-wrap: anywhere; }
  body:not(.gr-home) .btn, body:not(.gr-home) .gr-cta { max-width: 100%; }
  body:not(.gr-home) .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  body:not(.gr-home) .hero-actions .btn { justify-content: center; }
}

/* nav móvil: bajar la barra para que el CTA y el ☰ no queden bajo la cámara/notch */
@media (max-width: 900px) {
  .gr-nav, .gr-nav.gr-nav-tuned {
    padding-top: calc(38px + env(safe-area-inset-top)) !important;
    padding-bottom: 14px !important;
  }
  .gr-nav.scrolled, .gr-nav.gr-nav-tuned.scrolled {
    padding-top: calc(30px + env(safe-area-inset-top)) !important;
    padding-bottom: 11px !important;
  }
}

/* contacto en móvil: clave arriba / valor abajo, también en la home */
@media (max-width: 900px) {
  .contact-line { flex-direction: column; align-items: flex-start; gap: 6px; }
  .contact-line .k { width: auto; }
  .contact-line .v { font-size: 17px; overflow-wrap: anywhere; }
  .contact-line:hover { padding-left: 0; }
}

/* carrete de imágenes en tarjetas de obra */
.obra-card .ph.shot { opacity: 0; transition: opacity .45s var(--ease), transform .7s var(--ease); }
.obra-card .ph.shot.on { opacity: 1; }
.obra-card .carousel-ui { position: absolute; z-index: 4; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; }
.obra-card .cbtn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35);
  background: rgba(10,10,10,.55); backdrop-filter: blur(6px); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  transition: background .25s, border-color .25s, color .25s; }
.obra-card .cbtn:hover { background: var(--gr-yellow); border-color: var(--gr-yellow); color: var(--gr-black); }
.obra-card .cdots { display: flex; gap: 6px; }
.obra-card .cdots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .25s, transform .25s; }
.obra-card .cdots i.on { background: var(--gr-yellow); transform: scale(1.35); }

/* ============================================================
   BANNER DE SOCIOS — marquee negro, logos en blanco
   ============================================================ */
.logo-banner { position: relative; margin-top: 52px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #000; border-top: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e; overflow: hidden; padding: 44px 0; }
.logo-banner::before, .logo-banner::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 3; pointer-events: none; }
.logo-banner::before { left: 0; background: linear-gradient(to right, #000 20%, transparent); }
.logo-banner::after { right: 0; background: linear-gradient(to left, #000 20%, transparent); }
.logo-track { display: flex; width: max-content; animation: gr-logo-slide 34s linear infinite; }
.logo-banner:hover .logo-track { animation-play-state: paused; }
.logo-run { display: flex; align-items: center; gap: 88px; padding-right: 88px; }
.logo-item { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.logo-item img { height: 82px; width: auto; max-width: 320px; object-fit: contain; opacity: .92; transition: opacity .3s; }
.logo-item:hover img { opacity: 1; }
@keyframes gr-logo-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-25%,0,0); } }
@media (max-width: 860px) {
  .logo-banner { padding: 32px 0; }
  .logo-run { gap: 56px; padding-right: 56px; }
  .logo-item img { height: 60px; max-width: 220px; }
  .logo-banner::before, .logo-banner::after { width: 56px; }
}
body.gr-noanim .logo-track { animation: none; }

/* ============================================================
   HOME · HERO EN MÓVIL — una línea, compacto y con antes/después visible
   ============================================================ */
@media (max-width: 900px) {
  .gr-home .hero-d { min-height: auto; }
  .gr-home .hero-d .split { padding: 118px 12px 18px; gap: 18px; }
  .gr-home .hero .hero-eyebrow { margin-bottom: 22px; }
  .gr-home .hero .hero-eyebrow .eyebrow { font-size: 9px; letter-spacing: .14em; }
  .gr-home .hero-d .h1-plain, .gr-home .hero-a .h1-plain {
    display: block; white-space: nowrap; font-size: min(5.1vw, 48px); letter-spacing: -0.05em;
  }
  .gr-home .hero-d .sub, .gr-home .hero-a .sub {
    margin-top: 14px; max-width: 100%; font-size: 21px; line-height: 1.22; font-weight: 700; color: #fff;
  }
  .gr-home .hero-d .sub-detail, .gr-home .hero-a .sub-detail { margin-top: 12px; max-width: 100%; font-size: 14px; line-height: 1.5; }
  .gr-home .hero .hero-actions { margin-top: 18px; gap: 10px; }
  .gr-home .hero .hero-actions .btn { padding: 12px 16px; font-size: 10.5px; letter-spacing: .1em; }
  .gr-home .hero-d .ba-stage { aspect-ratio: 16 / 11; }
  .gr-home .hero-d .ba-caption { font-size: 9.5px; }
  .gr-home .hero .scroll-hint { display: none; }
}

/* logo del header: nunca deformado por el flex */
.gr-nav .brand { flex: 0 0 auto; }
.gr-nav .brand img { width: auto !important; max-width: none; flex: 0 0 auto; object-fit: contain; }
@media (max-width: 900px) { .gr-nav .brand img { height: 40px; } }

/* ============================================================
   HOME · HERO EN ESCRITORIO — jerarquía y proporciones
   ============================================================ */
@media (min-width: 901px) {
  .hero-d .split { max-width: 1560px; }
  .hero-a .h1-plain, .hero-d .h1-plain { font-size: clamp(40px, 4.5vw, 88px); line-height: 1; letter-spacing: -0.045em; }
  .hero-a .sub, .hero-d .sub {
    margin-top: 22px; font-size: clamp(19px, 1.35vw, 27px); line-height: 1.2; font-weight: 700; color: #fff; max-width: 22ch;
  }
  .hero-a .sub-detail, .hero-d .sub-detail { margin-top: 20px; font-size: clamp(15px, 0.95vw, 18px); max-width: 46ch; }
  .hero-d .ba-card { margin-left: auto; }
  .hero-d .ba-stage { aspect-ratio: 4 / 5; height: min(66vh, 620px); width: auto; margin-left: auto; }
  .hero-d .ba-caption { text-align: right; }
  .hero .hero-actions { margin-top: 34px; }
  .gr-nav .gr-cta { flex: 0 0 auto; white-space: nowrap; }
  .gr-nav .links { flex: 1 1 auto; justify-content: center; }
}

/* eyebrow del hero en una sola línea */
.hero .hero-eyebrow { flex-wrap: nowrap; }
.hero .hero-eyebrow .eyebrow { white-space: nowrap; }
@media (max-width: 900px) {
  .gr-home .hero .hero-eyebrow .eyebrow { font-size: min(2.15vw, 12px) !important; letter-spacing: .015em; }
  .gr-home .hero .hero-eyebrow { gap: 8px; }
}