/* ============================================================
   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 wipe ---- */
.hero-d { justify-content: flex-start; }
.hero-d .ba-stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #0c0c0c; }
.hero-d .ba-layer { position: absolute; inset: 0; }
.hero-d .ba-layer image-slot { display: block; width: 100%; height: 100%; }
/* "después" sits underneath (left reveal); "antes" on top, clipped from the left */
.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 12%);} 100% { clip-path: inset(0 0 0 88%);} }
.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: 12%;} 100% { left: 88%;} }
.hero-d .ba-divider .knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--gr-yellow); color: var(--gr-black);
  display: grid; place-items: center; font-size: 20px; font-weight: 800; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.hero-d .ba-tag { position: absolute; bottom: 26px; z-index: 4; font-family: var(--gr-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.55);
  padding: 7px 14px; border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(4px); }
.hero-d .ba-tag-before { right: 26px; }
.hero-d .ba-tag-after { left: 26px; }
.hero-d .ba-scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,8,8,.92) 0%, rgba(8,8,8,.72) 34%, rgba(8,8,8,.28) 62%, rgba(8,8,8,0) 86%); }
.hero-d .wrap { position: relative; z-index: 5; }
.hero-d .ba-stage [data-empty] { z-index: 6; }
@media (max-width: 860px) {
  .hero-d .ba-scrim { background: linear-gradient(0deg, rgba(8,8,8,.95) 0%, rgba(8,8,8,.6) 50%, rgba(8,8,8,.4) 100%); }
}
@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); } }