/* Hausbau · One Page */

:root {
  --ink: #111111;
  --cream: #f6f5f2;
  --white: #ffffff;
  --form: #1c1c1b;
  --ph-dark: #2a2a28;
  --ph-light: #e8e6e2;
  --text: #46433f;
  --muted: #6f6c66;
  --num: #9c9992;
  --off: #b3b0aa;
  --unpainted: #cfccc6;
  --line: #d8d6d2;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-mask: cubic-bezier(.77,0,.18,1);
  --pad-x: clamp(24px, 4.5vw, 64px);
}

@property --s { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* ── Base ───────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--cream); }
body {
  font-family: Archivo, 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--ink); text-decoration: none; }
img { display: block; }
::selection { background: var(--ink); color: var(--white); }
input, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.32); }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

.g { display: grid; }
.hero__img img, .quienes__px img, .phrase__box img, .svc-img img, .banda__px img, .clientes__bg img, .car__item img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ── Keyframes ──────────────────────────────────────── */
@keyframes introMask {
  0%   { --s: 0px; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  28%  { --s: min(40vw, 260px); }
  60%  { --s: min(40vw, 260px); animation-timing-function: linear; }
  100% { --s: min(120vw, 1400px); }
}
@keyframes introOut { to { opacity: 0; visibility: hidden; } }
@keyframes heroIn { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes lineUp { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ruleIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pillIn { from { opacity: 0; transform: translateY(-140%); } to { opacity: 1; transform: translateY(0); } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ── Intro: isotipo HB recortado como ventana ───────── */
/* El SVG va inline como data-URI (comillas internas como %27) para que la máscara
   esté lista en el primer frame y la foto del hero no se vea antes que el logo. */
.intro-cover {
  position: fixed; inset: 0; z-index: 101; background: var(--cream); pointer-events: none;
  animation: introOut 1ms linear 160ms forwards;
}
.intro {
  position: fixed; inset: 0; z-index: 100; background: var(--cream); pointer-events: none;
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20579.11%20426.55%27%20fill%3D%27%23111111%27%3E%3Cpath%20d%3D%27M544.78%2C392.58l.14-282.71c0-1.63-1.07-4.37-1.9-5.44l-123.28-53.33-32.89-14.31c-3.33-1.45-7.32-1.44-10.68.03l-41.16%2C17.99-113.57%2C49.16c-2.3%2C1-4.25%2C2.09-4.25%2C4.67v18.96s-34.17-.02-34.17-.02l-.07-41.42%2C86.09-37.6L381.3%2C0l53.4%2C22.99%2C133.07%2C57.6c4.26%2C1.85%2C7.59%2C3.54%2C11.33%2C6.27l-.02%2C337.42c-2.43%2C2.21-6.34%2C1.53-9.41%2C1.77l-5.99.48-379.36.02c-1.14%2C0-3.38-2.12-3.37-3.18l.2-41.75%2C32.64.03.41%2C10.98%2C330.57-.04Z%27%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M275.36%2C244.52c-.25%2C3.09%2C4.91%2C3.45%2C13.43%2C11.06s11.55%2C16.91%2C11.76%2C28.06c.32%2C16.36-7.19%2C30.83-22.35%2C38.48-8.64%2C4.03-18.5%2C7.08-28.75%2C7.12l-83.44.33v-154.82s81.86-.03%2C81.86-.03l10.59%2C1.42c9.83%2C1.44%2C18.68%2C5.13%2C25.61%2C12.57%2C14.16%2C15.2%2C12.09%2C45.85-8.71%2C55.81ZM250.74%2C232.05c5.44-4.44%2C7.02-12.8%2C3.86-19.3-2.73-5.63-8.9-9.8-16.03-9.79l-34.38.02-.17%2C29.59c0%2C1.1%2C1.04%2C3.51%2C1.98%2C3.53l3.44.06c12.74.22%2C34.76%2C1.24%2C41.29-4.09ZM257.45%2C294.53c8-7.92%2C6.64-21.89-1.9-28.43-3.3-2.52-9.54-4.09-13.72-4.1l-37.78-.08.11%2C37.62%2C40.89-.11c3.5%2C0%2C9.63-2.15%2C12.4-4.9Z%27%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M96.05%2C329.61l-.19-63.7c-.09-1.42-4.59-2.67-5.72-2.21l-52.04.06v61.89c0%2C1.93-2.11%2C3.99-3.97%2C3.99l-31.99-.09C.8%2C327.8%2C0%2C325.05%2C0%2C322.51l.15-131.83%2C1.04-16.06%2C36.82.16.12%2C57.58%2C53.95.22c1.29%2C0%2C3.47-1.85%2C3.86-3l-.02-54.76%2C37.15-.12.02%2C154.57-37.03.33Z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E'), linear-gradient(#000, #000);
          mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20579.11%20426.55%27%20fill%3D%27%23111111%27%3E%3Cpath%20d%3D%27M544.78%2C392.58l.14-282.71c0-1.63-1.07-4.37-1.9-5.44l-123.28-53.33-32.89-14.31c-3.33-1.45-7.32-1.44-10.68.03l-41.16%2C17.99-113.57%2C49.16c-2.3%2C1-4.25%2C2.09-4.25%2C4.67v18.96s-34.17-.02-34.17-.02l-.07-41.42%2C86.09-37.6L381.3%2C0l53.4%2C22.99%2C133.07%2C57.6c4.26%2C1.85%2C7.59%2C3.54%2C11.33%2C6.27l-.02%2C337.42c-2.43%2C2.21-6.34%2C1.53-9.41%2C1.77l-5.99.48-379.36.02c-1.14%2C0-3.38-2.12-3.37-3.18l.2-41.75%2C32.64.03.41%2C10.98%2C330.57-.04Z%27%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M275.36%2C244.52c-.25%2C3.09%2C4.91%2C3.45%2C13.43%2C11.06s11.55%2C16.91%2C11.76%2C28.06c.32%2C16.36-7.19%2C30.83-22.35%2C38.48-8.64%2C4.03-18.5%2C7.08-28.75%2C7.12l-83.44.33v-154.82s81.86-.03%2C81.86-.03l10.59%2C1.42c9.83%2C1.44%2C18.68%2C5.13%2C25.61%2C12.57%2C14.16%2C15.2%2C12.09%2C45.85-8.71%2C55.81ZM250.74%2C232.05c5.44-4.44%2C7.02-12.8%2C3.86-19.3-2.73-5.63-8.9-9.8-16.03-9.79l-34.38.02-.17%2C29.59c0%2C1.1%2C1.04%2C3.51%2C1.98%2C3.53l3.44.06c12.74.22%2C34.76%2C1.24%2C41.29-4.09ZM257.45%2C294.53c8-7.92%2C6.64-21.89-1.9-28.43-3.3-2.52-9.54-4.09-13.72-4.1l-37.78-.08.11%2C37.62%2C40.89-.11c3.5%2C0%2C9.63-2.15%2C12.4-4.9Z%27%3E%3C%2Fpath%3E%3Cpath%20d%3D%27M96.05%2C329.61l-.19-63.7c-.09-1.42-4.59-2.67-5.72-2.21l-52.04.06v61.89c0%2C1.93-2.11%2C3.99-3.97%2C3.99l-31.99-.09C.8%2C327.8%2C0%2C325.05%2C0%2C322.51l.15-131.83%2C1.04-16.06%2C36.82.16.12%2C57.58%2C53.95.22c1.29%2C0%2C3.47-1.85%2C3.86-3l-.02-54.76%2C37.15-.12.02%2C154.57-37.03.33Z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E'), linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--s) auto, 100% 100%; mask-size: var(--s) auto, 100% 100%;
  -webkit-mask-position: calc(50vw - var(--s) * 0.5) calc(50vh - var(--s) * 0.7366 * 0.5), 0 0;
          mask-position: calc(50vw - var(--s) * 0.5) calc(50vh - var(--s) * 0.7366 * 0.5), 0 0;
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: introMask 3130ms linear 150ms both, introOut 1100ms ease-in-out 2180ms forwards;
}

/* ── Botones ────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; gap: 12px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
}
.btn--dark { background: var(--ink); color: var(--white); }
.btn--light { background: var(--white); color: var(--ink); }
.btn svg { flex: none; transition: transform 420ms var(--ease-out); }
.btn:hover svg { transform: translateX(5px); }

/* ── Header flotante ────────────────────────────────── */
.hdr {
  position: fixed; top: 46px; left: 24px; right: 24px; z-index: 50;
  max-width: 1392px; margin: 0 auto; height: 64px; border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 12px 0 30px;
  background: rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.2); backdrop-filter: blur(26px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.55);
  transition: background 400ms ease, box-shadow 400ms ease, top 500ms var(--ease-out);
  animation: pillIn 1100ms var(--ease-out) 2230ms both;
}
.hdr.is-scrolled { top: 10px; background: rgba(255,255,255,0.78); box-shadow: 0 14px 44px rgba(17,17,17,0.10); }
.hdr__logo { display: flex; align-items: center; }
.hdr__logo img { height: 22px; width: auto; }
.hdr__nav { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 300; letter-spacing: 0.005em; }
.hdr__links { display: flex; align-items: center; gap: 34px; }
.hdr__cta { height: 42px; padding: 0 20px 0 22px; }

.nav-link { position: relative; isolation: isolate; color: var(--ink); transition: color 300ms ease; }
.nav-link::before {
  content: ""; position: absolute; left: -14px; right: -14px; top: -7px; bottom: -7px; border-radius: 999px;
  background: var(--ink); z-index: -1; transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}
.nav-link:hover::before { transform: scaleX(1); }
.nav-link:hover { color: var(--white); }

.burger {
  display: none; width: 36px; height: 36px; border-radius: 999px; border: none; background: var(--ink); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0;
}
.burger span { display: block; width: 14px; height: 1px; background: var(--white); transition: transform 400ms var(--ease-out); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.menu-overlay { position: fixed; inset: 0; z-index: 49; background: rgba(17,17,17,0.25); }
.menu {
  position: fixed; top: 86px; left: 24px; right: 24px; z-index: 51; background: var(--white); border-radius: 22px;
  padding: 14px 22px 22px; box-shadow: 0 20px 60px rgba(17,17,17,0.18);
  animation: menuIn 500ms var(--ease-out) both; display: flex; flex-direction: column;
}
.menu__link {
  display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--ph-light);
  font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
}
.menu__cta { margin-top: 22px; justify-content: center; height: 52px; font-size: 11px; }

/* ── Encabezado de sección ──────────────────────────── */
.sec-head { display: flex; align-items: center; gap: 16px; }
.sec-head__n { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.08em; color: var(--num); }
.sec-head__rule { width: 48px; height: 1px; background: var(--line); }
.sec-head__label { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.sec-head--dark .sec-head__n { color: rgba(255,255,255,0.5); }
.sec-head--dark .sec-head__rule { background: rgba(255,255,255,0.25); }
.sec-head--dark .sec-head__label { color: rgba(255,255,255,0.7); }

.sec { max-width: 1440px; margin: 0 auto; padding: 150px var(--pad-x) 140px; scroll-margin-top: 40px; }
.card { margin: 0 24px; border-radius: 26px; }
.h2 { margin: 0; font-size: clamp(34px, 3.6vw, 56px); font-weight: 200; line-height: 1.08; letter-spacing: -0.025em; text-wrap: pretty; }

/* ── Hero ───────────────────────────────────────────── */
.hero { padding: 24px; }
.hero__box { position: relative; height: calc(100vh - 48px); min-height: 600px; border-radius: 26px; overflow: hidden; background: var(--ph-dark); color: var(--white); }
.hero__px { position: absolute; inset: -6% 0; }
.hero__zoom { position: absolute; inset: 0; animation: heroIn 3200ms var(--ease-out) 0ms both; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1600ms ease; }
.hero__slide.is-active { opacity: 1; }
.hero__img { position: absolute; inset: 0; transform: scale(1.08); transition: transform 7000ms linear; }
.hero__slide.is-active .hero__img { transform: scale(1); }
.hero__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(17,17,17,0.22) 0%, rgba(17,17,17,0) 28%, rgba(17,17,17,0.08) 52%, rgba(17,17,17,0.62) 100%); }
.hero__txt {
  pointer-events: none; position: absolute; left: clamp(24px, 4vw, 56px); right: clamp(24px, 4vw, 56px); bottom: clamp(28px, 4vw, 52px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 40px; align-items: end;
}
.hero__h1 { margin: 0; font-size: clamp(40px, 5.2vw, 84px); font-weight: 200; line-height: 0.98; letter-spacing: -0.035em; }
.hero__h1 .line { display: block; overflow: hidden; padding-bottom: 0.18em; margin-bottom: -0.12em; }
.hero__h1 .line__in { display: block; animation: lineUp 1500ms var(--ease-out) both; }
.hero__side { display: flex; flex-direction: column; gap: 22px; padding-bottom: 14px; }
.hero__kicker { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; animation: fadeUp 1300ms var(--ease-out) 2930ms both; }
.hero__rule { height: 1px; background: rgba(255,255,255,0.6); transform-origin: left center; animation: ruleIn 1400ms var(--ease-mask) 3030ms both; }
.hero__lead { margin: 0; font-size: 15px; line-height: 1.65; text-wrap: pretty; animation: fadeUp 1300ms var(--ease-out) 3180ms both; }
.hero__btn { pointer-events: auto; align-self: flex-start; height: 46px; padding: 0 22px 0 24px; animation: fadeUp 1300ms var(--ease-out) 3330ms both; }

/* ── Reveal ─────────────────────────────────────────── */
.js [data-rv] { opacity: 0; transform: translateY(30px); transition: opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-rv="mask"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 18px); transition: clip-path 1400ms var(--ease-mask); transition-delay: var(--d, 0ms); }
.js [data-rv].is-in { opacity: 1; transform: none; }
.js [data-rv="mask"].is-in { clip-path: inset(0 0 0 0 round 18px); }
.gsap [data-rv] { transition: none !important; }
[data-ch] { display: inline-block; will-change: transform, opacity; }
[data-wd] { display: inline-block; white-space: nowrap; }

/* ── 01 Quiénes somos ───────────────────────────────── */
.quienes__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.quienes__img { height: clamp(480px, 48vw, 700px); border-radius: 18px; overflow: hidden; background: var(--ph-light); }
.quienes__px { height: 116%; margin-top: -8%; }
.quienes__body { display: flex; flex-direction: column; gap: 34px; }
.quienes__statement { margin: 0; font-size: clamp(28px, 2.8vw, 42px); font-weight: 200; line-height: 1.2; letter-spacing: -0.02em; display: flex; flex-wrap: wrap; column-gap: 0.26em; }
.quienes__statement [data-w] { color: var(--unpainted); transition: color 500ms ease; }
.quienes__statement [data-w].is-on { color: var(--ink); }
.quienes__copy { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.quienes__copy p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--text); text-wrap: pretty; }
.quienes__copy p.is-strong { color: var(--ink); }
.stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--ink); padding-top: 28px; margin-top: 6px; }
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat__n { font-size: clamp(44px, 4.4vw, 68px); font-weight: 200; line-height: 0.9; letter-spacing: -0.03em; }
.stat__label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

/* ── 02 Lo que nos define (scroll horizontal) ───────── */
.hs { position: relative; background: var(--ink); color: var(--white); }
.hs__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.hs__head { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 0 clamp(24px, 4vw, 56px); margin-top: 40px; }
.hs__bar-wrap { width: min(220px, 30vw); height: 1px; background: rgba(255,255,255,0.18); position: relative; overflow: hidden; }
.hs__bar { position: absolute; inset: 0; background: var(--white); transform-origin: left center; transform: scaleX(0); }
.hs__track { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); padding: 0 clamp(24px, 4vw, 56px); will-change: transform; }
.phrase { flex: none; margin: 0; }
.phrase--tall { width: min(50vh, 84vw); }
.phrase--tall .phrase__box { height: min(70vh, 116vw); }
.phrase--square { width: min(53vh, 88vw); }
.phrase--square .phrase__box { height: min(53vh, 88vw); }
.phrase__box { position: relative; border-radius: 18px; overflow: hidden; background: var(--ph-dark); }
.phrase__box img { transition: transform 1100ms var(--ease-out); }
.phrase__box:hover img { transform: scale(1.04); }
.phrase__box::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 85% 55% at 50% 50%, rgba(17,17,17,0.55) 0%, rgba(17,17,17,0.28) 55%, rgba(17,17,17,0.12) 100%); }
.phrase__txt {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 28px; text-align: center;
  font-size: clamp(28px, 2.8vw, 44px); font-weight: 200; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
/* sin JS: pista con scroll horizontal nativo */
html:not(.js) .hs__sticky { position: static; height: auto; padding: 60px 0 80px; }
html:not(.js) .hs__track { overflow-x: auto; }

/* ── 03 Qué hacemos ─────────────────────────────────── */
.servicios__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.servicios__list { display: flex; flex-direction: column; }
.servicios__h2 { margin: 0 0 64px; max-width: 680px; }
.svc { border-top: 1px solid var(--ink); padding: 28px 0 30px; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.svc__arr { display: flex; padding-top: clamp(10px, 1.1vw, 18px); color: var(--off); transition: color 400ms ease; }
.svc__arr svg { transition: transform 600ms var(--ease-out); }
.svc__h { margin: 0; font: inherit; }
.svc__title {
  display: block; width: 100%; text-align: left; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: clamp(28px, 3vw, 46px); font-weight: 200; line-height: 1.1; letter-spacing: -0.02em; color: var(--off); transition: color 400ms ease;
}
.svc__desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 600ms var(--ease-out); }
.svc__desc > div { overflow: hidden; }
.svc__desc p { margin: 0; padding-top: 14px; font-size: 15px; line-height: 1.75; color: var(--text); max-width: 460px; text-wrap: pretty; }
.svc.is-active .svc__arr, .svc.is-active .svc__title { color: var(--ink); }
.svc.is-active .svc__arr svg { transform: rotate(45deg); }
.svc.is-active .svc__desc { grid-template-rows: 1fr; }
.svc-end { border-top: 1px solid var(--ink); }
.servicios__media { position: sticky; top: 120px; }
.servicios__frame { position: relative; height: clamp(460px, 48vw, 680px); border-radius: 18px; overflow: hidden; background: var(--ph-light); }
.svc-img { position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: scale(1.06); transition: opacity 700ms ease, transform 1200ms var(--ease-out); }
.svc-img.is-active { pointer-events: auto; opacity: 1; transform: scale(1); }

/* ── Banda parallax ─────────────────────────────────── */
.banda { position: relative; margin: 0 24px 24px; height: clamp(520px, 92vh, 980px); overflow: hidden; background: var(--ph-dark); color: var(--white); }
.banda__px { position: absolute; inset: -18% 0; }
.banda__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(17,17,17,0.35) 0%, rgba(17,17,17,0.15) 40%, rgba(17,17,17,0.55) 100%); }
.banda__txt { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; padding: clamp(28px, 4.5vw, 64px); }
.banda__h2 { margin: 0; font-size: clamp(34px, 5.4vw, 96px); font-weight: 200; line-height: 1.04; letter-spacing: -0.03em; }
.banda__h2 > span { display: block; }

/* ── 04 Con quién trabajamos ────────────────────────── */
.clientes { position: relative; isolation: isolate; margin: 72px 24px; padding: 120px 0 140px; overflow: hidden; display: flex; flex-direction: column; gap: 56px; }
.clientes__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.clientes__bg img { object-position: center 40%; opacity: 0.5; filter: blur(1px); transform: scale(1.02); }
.clientes__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246,245,242,0.55) 0%, rgba(246,245,242,0.35) 45%, rgba(246,245,242,0.85) 100%); }
.clientes__grid { width: 100%; padding: 0 var(--pad-x); grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 6vw, 96px); align-items: end; }
.clientes__head { display: flex; flex-direction: column; gap: 26px; }
.clientes__h2 { max-width: 400px; }
.tags { list-style: none; margin: 0; padding: 0 0 6px; display: flex; flex-wrap: wrap; gap: 10px; }
.tags li { display: flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(246,245,242,0.85); font-size: 15px; font-weight: 300; white-space: nowrap; }
.car { display: flex; gap: 12px; width: max-content; will-change: transform; }
.car__item { flex: none; width: clamp(260px, 30vw, 440px); aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--ph-light); }

/* ── 05 Contacto ────────────────────────────────────── */
.contacto { background: var(--ink); color: var(--white); scroll-margin-top: 24px; }
.contacto__grid { max-width: 1392px; padding: 130px var(--pad-x) 120px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); }
.contacto__info { display: flex; flex-direction: column; gap: 30px; }
.contacto__logo { height: clamp(44px, 4.4vw, 64px); width: auto; align-self: flex-start; margin-bottom: 6px; }
.contacto__h2 { margin: 0; font-size: clamp(54px, 7vw, 112px); font-weight: 200; line-height: 0.95; letter-spacing: -0.035em; }
.cdata { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,0.2); margin-top: 20px; }
.cdata a { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.12); color: var(--white); }
.cdata a span:first-child { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.cdata a span:last-child { font-size: 15px; font-weight: 300; text-align: right; }

.form { display: flex; flex-direction: column; gap: 36px; align-self: start; padding: clamp(28px, 3.6vw, 52px); border-radius: 18px; background: var(--form); border: 1px solid rgba(255,255,255,0.08); }
.form__title { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.form__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field__label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.field__input {
  border: none; border-bottom: 1px solid rgba(255,255,255,0.25); background: transparent; padding: 8px 0 12px;
  font-size: 16px; font-weight: 300; color: var(--white); border-radius: 0; transition: border-color 300ms ease;
}
textarea.field__input { line-height: 1.6; resize: none; }
.field__input:focus { outline: none; border-bottom-color: var(--white); }
.field__input[aria-invalid="true"] { border-bottom-color: #e3907f; }
.chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips legend { padding: 0; margin-bottom: 14px; }
.chips__list { display: flex; flex-wrap: wrap; gap: 10px; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip span {
  display: block; white-space: nowrap; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); background: transparent;
  color: var(--white); font-size: 13px; font-weight: 300; cursor: pointer; transition: background 300ms ease, color 300ms ease, border-color 300ms ease;
}
.chip input:checked + span { background: var(--white); color: var(--ink); border-color: var(--white); }
.chip input:focus-visible + span { outline: 1px solid var(--white); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.form__msg { font-size: 13px; color: rgba(255,255,255,0.6); }
.form__msg.is-error { color: #e9a597; }
.form__btn { gap: 14px; height: 52px; padding: 0 26px 0 30px; font-weight: 400; }
.form__btn[disabled] { opacity: 0.6; cursor: wait; }

/* ── Footer ─────────────────────────────────────────── */
.footer { max-width: 1440px; margin: 0 auto; padding: 56px var(--pad-x) 40px; display: flex; flex-direction: column; gap: 44px; }
.footer a:hover { color: var(--muted); }
.footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer__logo { height: 64px; width: auto; }
.footer__cols { display: flex; gap: 64px; flex-wrap: wrap; font-size: 14px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; font-size: 11px; color: var(--muted); }
.footer__bottom a { color: var(--muted); }

/* ── Tablet 761–1100 ────────────────────────────────── */
@media (min-width: 761px) and (max-width: 1100px) {
  .hero__txt { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hero__side { max-width: 420px; padding-bottom: 0; }
  .hero__h1 { font-size: 7vw; }
}

/* ── Mobile ≤760 ────────────────────────────────────── */
@media (max-width: 760px) {
  .hdr__links, .hdr__cta { display: none; }
  .burger { display: flex; }
  .g { grid-template-columns: minmax(0, 1fr) !important; }
  .hdr { top: 24px; height: 52px; padding: 0 9px 0 20px; }
  .hdr.is-scrolled { top: 8px; }
  .hero { padding: 12px; }
  .hero__box { height: calc(100svh - 24px); min-height: 560px; border-radius: 20px; }
  .hero__txt { gap: 26px; left: 22px; right: 22px; bottom: 26px; }
  .hero__h1 { font-size: 10vw; }
  .hero__side { padding-bottom: 0; gap: 18px; }
  .sec { padding: 88px 22px; }
  .card { margin-left: 12px; margin-right: 12px; border-radius: 20px; }
  .quienes__img { height: 115vw; }
  .servicios__media { position: relative; top: 0; order: -1; }
  .servicios__frame { height: 92vw; }
  .servicios__grid { gap: 40px; }
  .servicios__h2 { margin-bottom: 40px; }
  .hs__head { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 18px; }
  .hs__head > div:first-child { white-space: nowrap; }
  .hs__bar-wrap { width: 100%; }
  .form { padding: 26px 20px; }
}

/* ── Movimiento reducido: sin intro, sin animaciones ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro, .intro-cover { display: none; }
  .hdr, .hero__zoom, .hero__h1 .line__in, .hero__kicker, .hero__rule, .hero__lead, .hero__btn, .menu { animation: none !important; }
  .hero__img { transform: none !important; transition: none; }
  .js [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .quienes__statement [data-w] { color: var(--ink); }
}