/* =========================================================
   BARR Strategic Advisors LLC — Sistema visual
   Paleta: rojo · negro · gris claro
   ========================================================= */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Rojo ladrillo/óxido: propio de BARR, más profundo que un carmesí genérico.
     Se reserva para acciones principales y la fase activa. */
  --red: #A8201A;
  --red-dark: #82170F;
  --red-soft: #EFDDD9;
  --red-on-dark: #F08A80;  /* rojo aclarado para texto pequeño sobre negro (≥4.5:1) */
  /* Grises grafito/acero: llevan casi todos los acentos */
  --steel: #4A525C;
  --steel-2: #6C747E;
  --steel-soft: #DCDFE3;
  --graphite: #24272C;
  /* Paleta de estado (solo en el Chequeo de salud), siempre con ícono + texto */
  --st-good: #0CA30C;
  --st-warn: #FAB219;
  --st-crit: #EC835A;
  --ink: #141416;
  --ink-2: #2A2A2E;
  --gray-50: #F2F2F0;
  --gray-100: #E8E8E5;
  --gray-200: #DADAD5;
  --gray-300: #C9C9C3;
  --gray-500: #8C8C88;
  --gray-600: #5C5C59;
  --white: #FFFFFF;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius: 14px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --header-h: 76px;
  /* Identidad de movimiento (arquetipo "Corporate"):
     una curva firma para el 80 % de las animaciones + 3 duraciones */
  --ease: cubic-bezier(.23, 1, .32, 1);          /* ease-out fuerte: entradas y UI */
  --ease-io: cubic-bezier(.77, 0, .175, 1);      /* movimiento en pantalla */
  --dur-quick: 160ms;                            /* press / hover */
  --dur: 280ms;                                  /* cambios de estado */
  --dur-reveal: 700ms;                           /* entradas al hacer scroll */
  --shadow: 0 1px 0 rgba(20,20,22,.04), 0 12px 32px -12px rgba(20,20,22,.18);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--gray-100);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
::selection { background: var(--red); color: #fff; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.h2, .hero__title, .h3, .cta-band p { text-wrap: balance; }
a, button, label, select, [role="tab"] { touch-action: manipulation; }

/* ---------- Buttons ---------- */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 22px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 15px; font-stretch: 105%;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) var(--ease), scale var(--dur-quick) var(--ease);
  will-change: transform;
}
.btn:active, .srv__tab:active, .quote:active, .hero__scope a:active, .lang__btn:active, .burger:active, .seg span:active { scale: .97; }
.btn svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translate(2px, -2px); }
.btn--sm { --h: 40px; padding: 0 16px; font-size: 14px; }
.btn--lg { --h: 56px; padding: 0 28px; font-size: 16px; }
.btn--red { background: var(--red); color: #fff; box-shadow: 0 10px 24px -10px rgba(168,32,26,.55); }
.btn--red:hover { background: var(--red-dark); }
.btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--line:hover { background: var(--ink); color: #fff; }

/* ---------- Custom cursor (retícula de topografía) ---------- */
.cursor { position: fixed; inset: 0; pointer-events: none; z-index: 1000; display: none; }
.has-cursor .cursor { display: block; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor label, .has-cursor .tilt, .has-cursor [role="tab"] { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; will-change: transform; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--red); border-radius: 50%; }
.cursor__ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid rgba(20,20,22,.55); border-radius: 50%;
  transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s, border-color .3s;
  display: grid; place-items: center;
}
.cursor__ring i { position: absolute; background: rgba(20,20,22,.7); transition: opacity .2s; }
.cursor__ring i:nth-child(1), .cursor__ring i:nth-child(2) { width: 1px; height: 7px; left: 50%; }
.cursor__ring i:nth-child(1) { top: -4px; } .cursor__ring i:nth-child(2) { bottom: -4px; }
.cursor__ring i:nth-child(3), .cursor__ring i:nth-child(4) { height: 1px; width: 7px; top: 50%; }
.cursor__ring i:nth-child(3) { left: -4px; } .cursor__ring i:nth-child(4) { right: -4px; }
.cursor__label { font: 600 15px var(--font); color: #fff; opacity: 0; transition: opacity .2s; }
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--red); border-color: var(--red); }
.cursor.is-hover .cursor__ring i { opacity: 0; }
.cursor.is-hover .cursor__label { opacity: 1; }
.cursor.is-hover .cursor__dot { opacity: 0; }
.cursor.is-dark .cursor__ring { border-color: rgba(255,255,255,.6); }
.cursor.is-dark .cursor__ring i { background: rgba(255,255,255,.8); }
.cursor.is-down .cursor__ring { transform-origin: center; scale: .85; }

/* ---------- Scroll progress ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Header ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); transition: background .3s, box-shadow .3s, height .3s; }
.header.is-scrolled { background: rgba(241,241,238,.82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 rgba(20,20,22,.08); --header-h: 64px; }
.header__inner { height: 100%; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 34px; height: 34px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__text strong { font-size: 20px; font-weight: 800; font-stretch: 120%; letter-spacing: .04em; }
.brand__text small { white-space: nowrap; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-600); margin-top: 3px; }
.nav { display: flex; gap: 2px; }
.nav a:first-child { display: none; } /* el logo ya lleva a Inicio */
.nav a { position: relative; white-space: nowrap; text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 8px 10px; border-radius: 999px; color: var(--ink-2); transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav a.is-current { color: var(--ink); }
.header__tools { display: flex; align-items: center; gap: 12px; }

.lang { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--gray-300); }
.lang__btn { position: relative; z-index: 1; border: 0; background: none; padding: 6px 12px; min-height: 36px; min-width: 44px; font: 600 12.5px var(--mono); letter-spacing: .08em; cursor: pointer; border-radius: 999px; color: var(--gray-600); transition: color .25s; }
.lang__btn[aria-pressed="true"] { color: #fff; }
.lang__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--ink); transition: transform .35s var(--ease); }
html[lang="en"] .lang__thumb { transform: translateX(100%); }

.burger { display: none; width: 44px; height: 44px; border: 0; background: var(--ink); border-radius: 50%; position: relative; cursor: pointer; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; transition: transform .3s var(--ease); }
.burger span:first-child { top: 17px; } .burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 90; background: var(--gray-100); padding: calc(var(--header-h) + 24px) var(--gutter) 32px; display: flex; flex-direction: column; gap: 32px; }
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { display: flex; align-items: baseline; gap: 14px; text-decoration: none; font-size: clamp(30px, 9vw, 44px); font-weight: 700; font-stretch: 112%; padding: 8px 0; border-bottom: 1px solid var(--gray-300); animation: menuIn .5s var(--ease) both; }
.mobile-menu nav a em { font: 500 12px var(--mono); color: var(--steel-2); font-style: normal; }
.mobile-menu nav a:nth-child(2) { animation-delay: .04s } .mobile-menu nav a:nth-child(3) { animation-delay: .08s }
.mobile-menu nav a:nth-child(4) { animation-delay: .12s } .mobile-menu nav a:nth-child(5) { animation-delay: .16s } .mobile-menu nav a:nth-child(6) { animation-delay: .2s }
@keyframes menuIn { from { opacity: 0; transform: translateY(16px); } }

/* =========================================================
   HERO — "Obra viva": estructura 3D en construcción,
   curvas de nivel del terreno y anotaciones de plano.
   ========================================================= */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(16px, 4vh, 48px));
  display: flex; flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 85% 30%, #FAFAF8 0%, var(--gray-100) 55%, #E9E9E5 100%);
}
.hero__contours { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .9; }
.hero__contours path { fill: none; stroke: rgba(20,20,22,.09); stroke-width: 1; }
.hero__contours path.major { stroke: rgba(20,20,22,.16); }
.hero__contours path.red { stroke: rgba(168,32,26,.4); stroke-dasharray: 4 6; }
.hero__glow { position: absolute; z-index: -1; width: 60vw; height: 60vw; right: -12vw; top: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(74,82,92,.13), transparent 70%); filter: blur(10px); pointer-events: none; }

.hero__stage { position: absolute; inset: var(--header-h) 0 0 38%; z-index: 0; }
.hero__canvas { width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__canvas.is-ready { opacity: 1; }

.callout {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  font: 500 12px var(--mono); letter-spacing: .03em; white-space: nowrap;
  opacity: 0; transition: opacity .6s var(--ease);
  will-change: transform;
}
.callout.is-on { opacity: 1; }
.callout b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; }
.callout::before { content: ""; position: absolute; right: 100%; top: 50%; width: 36px; height: 1px; background: var(--ink); }
.callout::after { content: ""; position: absolute; right: calc(100% + 33px); top: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(74,82,92,.18); }
.callout { margin-left: 44px; translate: 0 -50%; }

.hero__inner { position: relative; z-index: 3; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; pointer-events: none; }
.hero__inner > * { pointer-events: auto; }
.hero__copy { max-width: 680px; padding: 8px 0 32px; }
.eyebrow { display: flex; align-items: center; gap: 12px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray-600); margin-bottom: 22px; }
.eyebrow__tick { width: 40px; height: 9px; border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); position: relative; }
.eyebrow__tick::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--ink); }

.hero__title {
  font-size: clamp(40px, 5.6vw, 84px);
  font-weight: 760; font-stretch: 86%;
  line-height: .96; letter-spacing: -0.035em;
  margin-bottom: 28px;
}
.hero__title em { font-style: normal; color: var(--red); font-stretch: 100%; }
.hero__title .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__title .ln > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.is-loaded .hero__title .ln > span { transform: none; }
.is-loaded .hero__title .ln:nth-child(2) > span { transition-delay: .09s; }
.is-loaded .hero__title .ln:nth-child(3) > span { transition-delay: .18s; }
.hero__lead { font-size: clamp(16.5px, 1.35vw, 19px); color: var(--ink-2); max-width: 590px; margin-bottom: 34px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__card {
  align-self: end; margin-bottom: 40px;
  width: 268px; padding: 16px 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.6);
  transform: perspective(900px) rotateY(-10deg) rotateX(4deg);
  transition: transform .6s var(--ease);
}
.hero__card:hover { transform: perspective(900px) rotateY(0) rotateX(0); }
.hero__card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hero__card footer { margin-top: 12px; color: var(--gray-600); font-size: 11px; }
.hero__card footer b { color: var(--red); }
.tag { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--gray-200); color: var(--gray-600); }
.mini-gantt { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mini-gantt li { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; font-size: 13px; }
.mini-gantt li i { position: relative; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--gray-200), var(--gray-200)); }
.mini-gantt li i::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 1%); width: calc(var(--w) * 1%); border-radius: 3px; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease); }
.is-loaded .mini-gantt li i::after { transform: none; }
.is-loaded .mini-gantt li:nth-child(2) i::after { transition-delay: .15s }
.is-loaded .mini-gantt li:nth-child(3) i::after { transition-delay: .3s }
.is-loaded .mini-gantt li:nth-child(4) i::after { transition-delay: .45s }
.mini-gantt li.is-now i::after { background: var(--red); }
.mini-gantt li.is-now span { font-weight: 700; }
.mini-gantt li:last-child i::after { background: repeating-linear-gradient(-45deg, var(--gray-500) 0 3px, transparent 3px 6px); }

.hero__scope {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid rgba(20,20,22,.18);
  margin-bottom: 0;
}
.hero__scope a {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 14px 22px; text-decoration: none;
  font-size: 14px; font-weight: 600; line-height: 1.25;
  border-right: 1px solid rgba(20,20,22,.1);
  position: relative; transition: background .3s, color .3s;
}
.hero__scope a:first-child { padding-left: 0; }
.hero__scope a:last-child { border-right: 0; }
.hero__scope a em { font: 500 11px var(--mono); color: var(--steel); font-style: normal; }
.hero__scope a::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.hero__scope a:hover::before { transform: none; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease) var(--d, 0ms), transform var(--dur-reveal) var(--ease) var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Section heads ---------- */
section { position: relative; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray-600); margin-bottom: 18px; }
.kicker em { font-style: normal; color: var(--red); }
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--steel); }
.kicker--light { color: rgba(255,255,255,.7); }
.kicker--light em { color: var(--red-on-dark); }
.h2 { font-size: clamp(34px, 4.6vw, 64px); font-weight: 740; font-stretch: 90%; letter-spacing: -0.03em; line-height: 1; }
.h2--light { color: #fff; }
.h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 720; font-stretch: 92%; }
.section-head { max-width: 860px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .h2 { margin-bottom: 20px; }
.section-head__lead { font-size: 18px; color: var(--gray-600); max-width: 620px; }
.section-head--split { max-width: none; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
.section-head--split .h2 { margin-bottom: 0; }
.section-head--split .section-head__lead { margin: 0; }

/* =========================================================
   AUDIENCE
   ========================================================= */
.audience { padding: clamp(80px, 10vw, 140px) 0 0; background: var(--gray-50); }
.audience__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.audience__head { position: sticky; top: calc(var(--header-h) + 32px); }
.audience__head .h2 { margin-bottom: 28px; }
.audience__who { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--gray-300); }
.audience__who li { padding: 12px 0 12px 28px; border-bottom: 1px solid var(--gray-300); position: relative; font-weight: 500; }
.audience__who li::before { content: ""; position: absolute; left: 0; top: 22px; width: 14px; height: 2px; background: var(--steel-2); }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; perspective: 1200px; }
.quote {
  --rx: 0deg; --ry: 0deg;
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 250px; padding: 26px; border-radius: 20px;
  background: var(--white); text-decoration: none;
  box-shadow: var(--shadow);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), box-shadow .3s;
}
.quote:nth-child(even) { margin-top: 48px; margin-bottom: -48px; }
.quote:hover { box-shadow: 0 30px 50px -24px rgba(20,20,22,.35); }
.quote__mark { font-size: 90px; line-height: .6; color: var(--steel-2); font-weight: 800; transform: translateZ(30px); }
.quote p { font-size: clamp(22px, 2.1vw, 30px); font-weight: 700; font-stretch: 92%; line-height: 1.1; letter-spacing: -0.02em; margin: 18px 0; transform: translateZ(40px); }
.quote small { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--gray-600); transform: translateZ(20px); display: flex; gap: 8px; }
.quote small em { color: var(--steel); font-style: normal; }
.quote--steel { background: var(--graphite); color: #fff; }
.quote--steel .quote__mark { color: var(--red-on-dark); }
.quote--red .quote__mark { color: #fff; }
.quote--red small, .quote--red small em { color: rgba(255,255,255,.85); }

.ticker { margin-top: clamp(96px, 12vw, 160px); border-block: 1px solid var(--gray-300); overflow: hidden; padding: 22px 0; background: var(--gray-100); }
.ticker__track { display: flex; align-items: center; gap: 36px; width: max-content; animation: tick 40s linear infinite; }
.ticker__track span { font-size: clamp(28px, 4vw, 56px); font-weight: 800; font-stretch: 120%; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.2px var(--ink); }
.ticker__track span:nth-of-type(3n) { color: var(--ink); -webkit-text-stroke: 0; }
.ticker__track i { width: 14px; height: 14px; background: var(--steel-2); transform: rotate(45deg); flex: none; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }


/* =========================================================
   SERVICES
   ========================================================= */
.services { padding: clamp(80px, 10vw, 140px) 0; }
.srv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.srv__list { display: flex; flex-direction: column; border-top: 1px solid var(--gray-300); }
.srv__tab {
  position: relative; display: grid; grid-template-columns: 48px 1fr 24px; align-items: center;
  text-align: left; border: 0; background: none; cursor: pointer;
  padding: 20px 0; border-bottom: 1px solid var(--gray-300);
  font-size: clamp(18px, 1.7vw, 24px); font-weight: 650; font-stretch: 94%; letter-spacing: -0.01em;
  color: var(--gray-600); transition: color .3s, padding .4s var(--ease);
}
.srv__tab em { font: 500 12px var(--mono); font-style: normal; color: var(--gray-600); }
.srv__tab::after { content: "→"; font-weight: 400; opacity: 0; transform: translateX(-8px); transition: opacity var(--dur) ease, transform var(--dur) var(--ease); color: var(--steel); }
.srv__tab::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.srv__tab:hover { color: var(--ink); }
.srv__tab[aria-selected="true"] { color: var(--ink); padding-left: 10px; }
.srv__tab[aria-selected="true"] em { color: var(--red); }
.srv__tab[aria-selected="true"]::after { opacity: 1; transform: none; }
.srv__tab[aria-selected="true"]::before { transform: none; }
.srv__panels { position: sticky; top: calc(var(--header-h) + 24px); }
.srv__panel {
  position: relative; overflow: hidden;
  padding: clamp(28px, 3.4vw, 44px); border-radius: 24px;
  background: var(--white); box-shadow: var(--shadow);
}
.srv__panel::before { content: attr(data-n); position: absolute; right: 22px; top: 12px; font: 800 120px/1 var(--font); font-stretch: 125%; color: var(--gray-100); text-transform: uppercase; z-index: 0; pointer-events: none; }
.srv__panel > * { position: relative; z-index: 1; }
.srv__panel.is-active { animation: panelIn 320ms var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.srv__icon svg { width: 56px; height: 56px; margin-bottom: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.srv__icon svg .r { stroke: var(--red); }
.srv__panel.is-active .srv__icon svg * { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 1.2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.srv__need { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.srv__need .mono { color: var(--steel); }
.srv__need q { font-size: clamp(20px, 1.8vw, 26px); font-weight: 650; font-stretch: 94%; line-height: 1.2; letter-spacing: -0.01em; quotes: "“" "”"; }
.srv__panel > p { color: var(--ink-2); }
.srv__panel h3 { margin: 26px 0 12px; color: var(--gray-600); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 32px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 5px; background: var(--steel-soft); }
.checks li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 5px; height: 9px; border: solid var(--steel); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.note { margin-top: 18px; padding: 12px 14px; border-left: 3px solid var(--steel-2); background: var(--gray-50); font-size: 14.5px; color: var(--gray-600); }
.disclaimer { margin-top: 40px; padding-top: 20px; border-top: 1px dashed var(--gray-300); font-size: 14.5px; color: var(--gray-600); max-width: 760px; }

/* =========================================================
   BOARD (gráficos ilustrativos)
   ========================================================= */
.board { padding: clamp(80px, 10vw, 140px) 0; background: var(--white); }
.board__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.panel { margin: 0; padding: 22px; border-radius: 20px; background: var(--gray-50); box-shadow: inset 0 0 0 1px var(--gray-200); display: flex; flex-direction: column; min-width: 0; }
.panel--budget { grid-column: span 5; }
.panel--curve { grid-column: span 7; }
.panel--compare { grid-column: span 8; }
.panel--check { grid-column: span 4; }
.panel figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.panel__title { font-weight: 700; font-size: 16px; }
.panel__foot { margin: 16px 0 0; color: var(--gray-600); font-size: 11px; }
.legend { display: flex; gap: 18px; font-size: 13px; color: var(--ink-2); margin: -6px 0 6px; }
.legend > span { display: inline-flex; align-items: center; gap: 8px; }
.lg { width: 22px; height: 0; border-top: 2px solid; }
.lg--plan { border-color: var(--ink); border-top-style: dashed; }
.lg--real { border-color: var(--red); }

.chart-bars { display: grid; gap: 14px; }
.bar { display: grid; grid-template-columns: 112px 1fr 44px; align-items: center; gap: 12px; font-size: 14px; position: relative; }
.bar__track { height: 14px; position: relative; }
.bar__fill { position: absolute; inset: 0 auto 0 0; border-radius: 0 4px 4px 0; background: var(--steel); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease); }
.bar:hover .bar__fill { background: var(--graphite); }
.bar__val { font: 500 13px var(--mono); text-align: right; color: var(--ink); }
.is-drawn .bar__fill { transform: scaleX(1); }

.chart-line { position: relative; flex: 1; min-height: 220px; }
.chart-line svg { width: 100%; height: 100%; overflow: visible; }
.chart-line .grid line { stroke: var(--gray-200); stroke-width: 1; }
.chart-line .axis text { font: 11px var(--mono); fill: var(--gray-600); }
.chart-line .plan { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 5; }
.chart-line .real { fill: none; stroke: var(--red); stroke-width: 2; }
.chart-line .area { fill: url(#areaGrad); }
.chart-line .draw { stroke-dashoffset: 0; }
.chart-line .lbl { font: 500 11.5px var(--font); }
.chart-line .cross { stroke: var(--gray-500); stroke-width: 1; opacity: 0; }
.chart-line .mk { opacity: 0; stroke: var(--white); stroke-width: 2; }
.chart-line.is-hover .cross, .chart-line.is-hover .mk { opacity: 1; }
.tip { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: #fff; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.4; white-space: nowrap; opacity: 0; transform: translate(-50%, calc(-100% - 12px)); transition: opacity .15s; }
.tip b { font-family: var(--mono); font-weight: 500; }
.tip i { display: inline-block; width: 10px; height: 2px; margin-right: 6px; vertical-align: middle; }
.is-hover .tip, .tip.is-on { opacity: 1; }

.table-wrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.cmp th, .cmp td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--gray-200); }
.cmp thead th { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--gray-600); }
.cmp tbody th { font-weight: 600; }
.cmp tbody tr { transition: background .2s; }
.cmp tbody tr:hover { background: var(--white); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.dot--ok { background: var(--ink); }
.dot--part { background: transparent; box-shadow: inset 0 0 0 2px var(--red); }

.todo { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; flex: 1; }
.todo li { position: relative; padding-left: 30px; font-size: 14.5px; }
.todo li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--gray-300); background: var(--white); }
.todo li.done { color: var(--gray-600); }
.todo li.done::before { background: var(--ink); box-shadow: none; }
.todo li.done::after { content: ""; position: absolute; left: 6px; top: 6px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.meter { height: 8px; border-radius: 99px; background: var(--gray-200); overflow: hidden; }
.meter span { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--steel); border-radius: 99px; transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease) .3s; }
.panel.is-in .meter span { transform: none; }

/* =========================================================
   SPECIALTIES — sección oscura con capas 3D "explosionadas"
   ========================================================= */
.special { padding: clamp(90px, 11vw, 150px) 0; background: var(--graphite); color: #fff; overflow: hidden; isolation: isolate; }
.special__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 90% 0%, rgba(74,82,92,.28), transparent 70%),
    radial-gradient(40% 40% at 0% 100%, rgba(255,255,255,.06), transparent 70%);
}

.special .section-head__lead { color: rgba(255,255,255,.72); }
.special__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.spec { border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; outline: none; transition: box-shadow .3s; }
.spec:hover, .spec:focus-visible { box-shadow: inset 0 0 0 1px rgba(74,82,92,.7); }
.spec__visual { height: 290px; display: grid; place-items: center; perspective: 1000px; position: relative; }
.spec__visual::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 34px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }
.stack { --gap: var(--sgap, 16px); --sx: 58deg; --sz: -42deg; position: relative; width: 170px; height: 170px; transform-style: preserve-3d; transform: rotateX(var(--sx)) rotateZ(var(--sz)); transition: transform 900ms var(--ease-io); }
.spec:hover .stack, .spec:focus-visible .stack, .spec.is-auto .stack { --gap: 46px; --sx: 56deg; --sz: -30deg; }
.layer { position: absolute; inset: 0; border-radius: 6px; transform: translateZ(calc(var(--z) * var(--gap))); transition: transform 900ms var(--ease-io) calc(var(--z) * 40ms); box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.layer:nth-child(1) { --z: 3; } .layer:nth-child(2) { --z: 2; } .layer:nth-child(3) { --z: 1; } .layer:nth-child(4) { --z: 0; }
.stack:has(.layer:nth-child(3):last-child) .layer:nth-child(1) { --z: 2; }
.stack:has(.layer:nth-child(3):last-child) .layer:nth-child(2) { --z: 1; }
.stack:has(.layer:nth-child(3):last-child) .layer:nth-child(3) { --z: 0; }
/* materiales */
.l-board { background: #E9E9E6; }
.l-foam { background: radial-gradient(circle at 30% 30%, #fff8e6 0 3px, transparent 4px) 0 0 / 12px 12px, radial-gradient(circle at 70% 70%, #f2e3bd 0 4px, transparent 5px) 0 0 / 14px 14px, #EAD9A8; }
.l-frame { background: repeating-linear-gradient(90deg, #8C8C88 0 10px, transparent 10px 52px), rgba(255,255,255,.05); }
.l-sheath { background: repeating-linear-gradient(0deg, #3a3a3e 0 2px, #2c2c30 2px 9px); }
.l-sfrm { background: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.5px) 0 0 / 6px 6px, #B9B6AE; }
.l-steel { background: linear-gradient(90deg, transparent 0 18%, #5C5F66 18% 82%, transparent 82%), linear-gradient(0deg, transparent 0 44%, #4A4D54 44% 56%, transparent 56%), linear-gradient(90deg, transparent 0 44%, #6B6E75 44% 56%, transparent 56%); box-shadow: none; }
.l-slab { background: linear-gradient(135deg, #6f6f6c, #4b4b49); }
.l-wallA { background: linear-gradient(90deg, #8C8C88 0 44%, transparent 44% 56%, #8C8C88 56%); }
.l-joint { background: linear-gradient(90deg, transparent 0 44%, rgba(74,82,92,.25) 44% 56%, transparent 56%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.l-seal { background: linear-gradient(90deg, transparent 0 42%, var(--red) 42% 58%, transparent 58%); box-shadow: none; }
.spec__body { padding: 0 26px 28px; }
.spec__idx { color: var(--red-on-dark); margin-bottom: 8px; }
.spec__body h3 { font-size: 28px; font-weight: 740; font-stretch: 94%; margin-bottom: 12px; }
.spec__body > p:not(.spec__idx) { color: rgba(255,255,255,.72); margin: 0 0 18px; font-size: 15.5px; }
.spec__legend { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 8px; font: 500 11.5px var(--mono); letter-spacing: .03em; color: rgba(255,255,255,.75); }
.spec__legend li { display: flex; align-items: center; gap: 10px; transition: color var(--dur) ease; }
.spec__legend .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.spec:hover .spec__legend li, .spec:focus-visible .spec__legend li { color: #fff; }
.special__note { margin: 36px 0 0; font-size: 14px; color: rgba(255,255,255,.66); max-width: 760px; }

/* =========================================================
   ABOUT
   ========================================================= */
.about { padding: clamp(90px, 11vw, 150px) 0; background: var(--gray-100); }
.about__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 7vw, 110px); align-items: center; }
.about__copy .h2 { margin-bottom: 26px; }
.about__copy > p { color: var(--ink-2); font-size: 17.5px; }
.values { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.values li { padding: 18px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--gray-600); }
.values b { color: var(--ink); font-size: 16px; position: relative; padding-left: 14px; }
.values b::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: var(--steel-2); }

/* =========================================================
   PROCESS — barras tipo cronograma que se dibujan al hacer scroll
   ========================================================= */
.process { padding: clamp(90px, 11vw, 150px) 0; background: var(--white); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: s; }
.step { position: relative; padding: 0 22px 0 0; }
.step__bar { position: relative; height: 34px; margin-bottom: 26px; }
.step__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 1px; background: var(--gray-300); }
.step__bar span { position: absolute; top: 9px; height: 16px; left: 0; right: 10px; border-radius: 4px; background: var(--steel); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) calc(var(--i) * .22s); }
.step:nth-child(5) .step__bar span { background: repeating-linear-gradient(-45deg, var(--red) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1.5px var(--red); }
.step:nth-child(4) .step__bar span { background: var(--red); }
.timeline.is-in .step__bar span { transform: none; }
.step__n { display: block; font: 500 13px var(--mono); font-style: normal; color: var(--steel); margin-bottom: 10px; }
.step h3 { font-size: 21px; font-weight: 700; font-stretch: 95%; margin-bottom: 10px; }
.step p { font-size: 15.5px; color: var(--gray-600); }
.cta-band { margin-top: clamp(48px, 7vw, 90px); padding: clamp(28px, 4vw, 44px); border-radius: 28px; background: var(--graphite); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px); pointer-events: none; }
.cta-band p { margin: 0; font-size: clamp(24px, 3vw, 40px); font-weight: 740; font-stretch: 92%; letter-spacing: -0.02em; line-height: 1.1; position: relative; }
.cta-band .btn--red { position: relative; }

/* ---------- Scope ---------- */
.scope { padding: clamp(56px, 7vw, 90px) 0; background: var(--gray-100); border-top: 1px solid var(--gray-200); }
.scope__grid { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: clamp(24px, 4vw, 56px); }
.scope__lbl { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: #fff; margin-bottom: 14px; }
.scope__lbl--yes { background: var(--red); }
.scope__col p:last-child { color: var(--ink-2); margin: 0; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { padding: clamp(90px, 11vw, 150px) 0; background: var(--gray-50); }
.contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__info .h2 { margin-bottom: 22px; }
.contact__info > p { color: var(--ink-2); font-size: 18px; }
.info { margin: 36px 0 0; display: grid; gap: 22px; }
.info div { padding: 20px 0 0; border-top: 1px solid var(--gray-300); }
.info dt { color: var(--steel); margin-bottom: 8px; }
.info dd { margin: 0; font-size: 17px; font-weight: 500; }
.info__note, .info__pending { font-size: 14px !important; font-weight: 400 !important; color: var(--gray-600); margin-top: 8px !important; }
.form { padding: clamp(24px, 3.5vw, 40px); border-radius: 26px; background: var(--white); box-shadow: var(--shadow); display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; border: 0; padding: 0; margin: 0; min-width: 0; }
.field i { font-style: normal; font-weight: 400; color: var(--gray-600); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px var(--font); color: var(--ink);
  padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--gray-200); background: var(--gray-50);
  transition: border-color .2s, background .2s, box-shadow .2s; appearance: none; -webkit-appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141416' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 36px; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 4px rgba(20,20,22,.06); }
.field__err { display: none; color: var(--red); font-weight: 500; font-size: 13px; }
.is-invalid .field__err, .field__err--check.is-shown { display: block; }
.is-invalid input, .is-invalid select, .is-invalid textarea { border-color: var(--red); }
.field--radio legend { margin-bottom: 8px; padding: 0; }
.seg { display: flex; padding: 4px; border-radius: 12px; background: var(--gray-100); gap: 4px; }
.seg label { flex: 1; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: block; text-align: center; padding: 9px 8px; border-radius: 9px; font-weight: 500; transition: background .2s, color .2s; cursor: pointer; }
.seg input:checked + span { background: var(--ink); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.check input { width: 20px; height: 20px; accent-color: var(--red); flex: none; margin-top: 2px; }
.form__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form__status { margin: 0; font-size: 14px; color: var(--gray-600); flex: 1; min-width: 200px; }
.form__status.is-ok { color: var(--ink); }

/* ---------- Footer ---------- */
.footer { background: var(--graphite); color: rgba(255,255,255,.75); padding: 40px 0 32px; overflow: hidden; }
.footer__big { font-size: clamp(90px, 25vw, 360px); font-weight: 800; font-stretch: 125%; letter-spacing: -0.05em; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.18); margin: 0 0 40px -.04em; user-select: none; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer__name { color: #fff; font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.footer__lbl { color: #B9C0C8; margin-bottom: 12px; }
.footer nav { display: flex; flex-direction: column; gap: 6px; }
.footer nav a { text-decoration: none; color: #fff; opacity: .85; width: fit-content; }
.footer nav a:hover { opacity: 1; color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.footer__legal { font-size: 13px; color: rgba(255,255,255,.62); margin: 24px 0 10px; max-width: 900px; }
.footer__copy { color: rgba(255,255,255,.6); margin: 0; }

/* =========================================================
   Hero: línea de confianza
   ========================================================= */
.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 22px 0 0; font-size: 14px; }
.hero__trust a { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.hero__trust a:hover { color: var(--red); }
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: #1E9E5A; box-shadow: 0 0 0 0 rgba(30,158,90,.5); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(30,158,90,0); } 100% { box-shadow: 0 0 0 0 rgba(30,158,90,0); } }
.hero__tel { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; padding-left: 18px; border-left: 1px solid var(--gray-300); }

.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--red); color: #fff; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* =========================================================
   Nosotros: tarjeta de la firma
   ========================================================= */
.firm { perspective: 1200px; }
.firm__card {
  --rx: 0deg; --ry: 0deg;
  position: relative; max-width: 460px; aspect-ratio: 4 / 4.6; padding: clamp(24px, 3vw, 36px);
  border-radius: 28px; background: var(--ink); color: #fff; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform .5s var(--ease); box-shadow: 0 40px 60px -30px rgba(20,20,22,.55);
}
.firm__card::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(80% 60% at 100% 0%, rgba(74,82,92,.45), transparent 60%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cpath d='M5 5h90v14H58v72h37v14H5V91h37V19H5z' fill='none' stroke='white' stroke-opacity='.12' stroke-width='.8'/%3E%3C/svg%3E") 115% 120% / 70% no-repeat; pointer-events: none; }
.firm__card > * { position: relative; }
.firm__top { display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.75); transform: translateZ(20px); }
.firm__mark { width: 42px; height: 42px; color: #fff; }
.firm__name { font-size: clamp(64px, 8vw, 110px); font-weight: 800; font-stretch: 125%; letter-spacing: -0.04em; line-height: .85; margin: 0; transform: translateZ(50px); }
.firm__name span { display: block; font-size: 14px; font-family: var(--mono); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 14px; }
.firm__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; transform: translateZ(30px); }
.firm__facts div { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.firm__facts dt { font-size: 20px; font-weight: 760; font-stretch: 110%; }
.firm__facts dd { margin: 4px 0 0; font-size: 12px; color: rgba(255,255,255,.72); line-height: 1.3; }
.firm__dim { position: absolute; left: clamp(24px, 3vw, 36px); right: clamp(24px, 3vw, 36px); top: 50%; height: 1px; background: rgba(255,255,255,.12); }

/* =========================================================
   Calculadora
   ========================================================= */
.calc { padding: clamp(80px, 10vw, 140px) 0; background: var(--gray-100); }
.calc__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 16px; }
.calc__form { padding: clamp(22px, 3vw, 34px); border-radius: 24px; background: var(--white); box-shadow: var(--shadow); display: grid; gap: 22px; }
.calc__form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.calc__form legend { color: var(--steel); margin-bottom: 6px; padding: 0; }
.cfield { display: grid; grid-template-columns: 1fr 170px; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }
.cfield__in { position: relative; }
.cfield__in i { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font-style: normal; color: var(--gray-600); font-family: var(--mono); }
.cfield input { width: 100%; font: 500 16px var(--mono); padding: 11px 12px 11px 30px; border-radius: 12px; border: 1.5px solid var(--gray-200); background: var(--gray-50); color: var(--ink); text-align: right; transition: border-color var(--dur) ease, background-color var(--dur) ease; }
.cfield input:focus { outline: none; border-color: var(--ink); background: #fff; }
.slider { display: grid; gap: 10px; font-weight: 600; font-size: 15px; }
.slider > span { display: flex; justify-content: space-between; }
.slider output { font-family: var(--mono); font-weight: 500; }
.slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: var(--gray-200); outline-offset: 6px; }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(20,20,22,.3); cursor: pointer; transition: scale var(--dur-quick) var(--ease); }
.slider input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(20,20,22,.3); cursor: pointer; }
.slider input[type=range]:active::-webkit-slider-thumb { scale: 1.12; }
.slider--red input[type=range]::-webkit-slider-thumb { background: var(--red); }
.slider--red input[type=range]::-moz-range-thumb { background: var(--red); }
.calc__out { padding: clamp(22px, 3vw, 34px); border-radius: 24px; background: var(--ink); color: #fff; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; }
.calc__out::before { content: ""; position: absolute; right: -20%; top: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(74,82,92,.35), transparent); pointer-events: none; }
.calc__out > * { position: relative; }
.calc__lbl { color: rgba(255,255,255,.7); margin: 0; }
.calc__price { margin: -8px 0 0; font-size: clamp(48px, 6vw, 80px); font-weight: 780; font-stretch: 92%; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.calc__stack { display: flex; gap: 2px; height: 22px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.08); }
.calc__stack span { min-width: 3px; transition: flex-grow var(--dur) var(--ease); }
.c-mat { background: #FFFFFF; } .c-lab { background: #B9B9B4; } .c-eq { background: #77777A; }
.c-oh { background: repeating-linear-gradient(-45deg, #B9B9B4 0 2px, #3a3a3e 2px 5px); }
.c-ct { background: repeating-linear-gradient(90deg, #77777A 0 2px, #2a2a2e 2px 5px); }
.c-mg { background: var(--red); }
.calc__legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: 13.5px; }
.calc__legend li { display: grid; grid-template-columns: 12px 1fr auto 36px; align-items: center; gap: 8px; color: rgba(255,255,255,.8); }
.calc__legend i { width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.calc__legend b { font: 500 13px var(--mono); color: #fff; }
.calc__legend em { font: 400 12px var(--mono); font-style: normal; color: rgba(255,255,255,.6); text-align: right; }
.calc__legend li:last-child { color: #fff; font-weight: 600; }
.calc__alert { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 3px 0 0 var(--red-on-dark); }
.calc__alert p { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.85); }
.calc__alert .mono { color: var(--red-on-dark); margin-bottom: 6px; }
.calc__out .btn { align-self: flex-start; white-space: normal; text-align: center; height: auto; min-height: 48px; padding: 12px 22px; }
.calc__note { margin: 18px 0 0; font-size: 13.5px; color: var(--gray-600); }

/* =========================================================
   Planes y precios
   ========================================================= */
.plans { padding: clamp(90px, 11vw, 150px) 0; background: var(--gray-50); }
.free { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 18px; border-radius: 18px; background: var(--white); box-shadow: var(--shadow); }
.free p { margin: 0; flex: 1; min-width: 240px; font-size: 15px; color: var(--ink-2); }
.free strong { color: var(--ink); margin-right: 6px; }
.free__pulse { width: 12px; height: 12px; border-radius: 50%; background: #1E9E5A; flex: none; animation: ping 2.4s var(--ease) infinite; }
.plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; perspective: 1400px; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 20px;
  padding: clamp(24px, 2.6vw, 34px); border-radius: 24px; background: var(--white);
  box-shadow: inset 0 0 0 1px var(--gray-200);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) ease;
}
.plan:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--gray-300), 0 30px 50px -30px rgba(20,20,22,.35); }
.plan.is-picked { box-shadow: inset 0 0 0 2px var(--red), 0 30px 50px -30px rgba(74,82,92,.45); }
.plan--featured { background: var(--white); box-shadow: inset 0 0 0 2px var(--ink), 0 30px 60px -30px rgba(20,20,22,.4); transform: translateY(-10px); }
.plan--featured:hover { transform: translateY(-14px); }
.plan--dark { background: var(--graphite); color: #fff; box-shadow: none; }
.plan--dark .plan__desc, .plan--dark .plan__list li { color: rgba(255,255,255,.78); }
.plan--dark .plan__tier { color: #B9C0C8; }
.plan--dark .plan__list svg { color: var(--red-on-dark); }
.plan .plan__badge--steel { background: var(--steel); }
.plan__badge { position: absolute; top: -13px; left: 50%; translate: -50% 0; padding: 5px 14px; border-radius: 999px; background: var(--red); color: #fff; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.plan__tier { color: var(--steel); margin: 0 0 10px; }
.plan h3 { font-size: clamp(22px, 2vw, 27px); font-weight: 740; font-stretch: 94%; margin-bottom: 14px; }
.plan__price { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 12px; }
.plan__price b { font-size: clamp(52px, 5vw, 68px); font-weight: 800; font-stretch: 95%; line-height: .9; letter-spacing: -0.04em; }
.plan__cur { font: 500 12px var(--mono); letter-spacing: .06em; margin-top: 6px; color: inherit; opacity: .7; }
.plan__desc { margin: 0; font-size: 15px; color: var(--gray-600); }
.plan__list { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid currentColor; border-top-color: rgba(127,127,127,.25); display: grid; gap: 11px; flex: 1; align-content: start; }
.plan__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.plan__list svg { width: 16px; height: 16px; margin-top: 3px; color: var(--steel); }
.plan__cta { width: 100%; }
.plans__note { margin: 26px 0 0; font-size: 13.5px; color: var(--gray-600); max-width: 820px; }

/* Quiz */
.quiz { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(20px, 4vw, 56px); padding: clamp(24px, 3.5vw, 44px); border-radius: 28px; background: var(--white); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.quiz::after { content: "?"; position: absolute; right: -10px; bottom: -70px; font: 800 260px/1 var(--font); font-stretch: 125%; color: var(--gray-100); pointer-events: none; }
.quiz > * { position: relative; z-index: 1; }
.quiz__k { color: var(--steel); margin: 0 0 10px; }
.quiz__head h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 740; font-stretch: 92%; margin-bottom: 24px; }
.quiz__bar { height: 4px; border-radius: 99px; background: var(--gray-200); overflow: hidden; }
.quiz__bar span { display: block; height: 100%; background: var(--red); transform-origin: left; transform: scaleX(0); transition: transform var(--dur) var(--ease); }
.quiz__step[hidden], .quiz__result[hidden] { display: none; }
.quiz__step { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.quiz__step.is-active { animation: stepIn 280ms var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } }
.quiz__step legend { font-weight: 700; font-size: 18px; margin-bottom: 12px; padding: 0; }
.quiz__step button { text-align: left; padding: 15px 18px; border-radius: 14px; border: 1.5px solid var(--gray-200); background: var(--gray-50); cursor: pointer; font-size: 15.5px; font-weight: 500; transition: border-color var(--dur-quick) ease, background-color var(--dur-quick) ease, scale var(--dur-quick) var(--ease); }
.quiz__step button:hover { border-color: var(--ink); background: #fff; }
.quiz__step button:active { scale: .98; }
.quiz__result { animation: stepIn 280ms var(--ease); }
.quiz__result .mono { color: var(--gray-600); margin: 0 0 6px; }
.quiz__plan { font-size: clamp(26px, 3vw, 38px); font-weight: 760; font-stretch: 92%; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 22px; }
.quiz__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { padding: clamp(80px, 10vw, 130px) 0; background: var(--white); }
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 6vw, 96px); align-items: start; }
.faq__grid .h2 { margin-bottom: 22px; }
.faq__cta { color: var(--gray-600); }
.faq__cta a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-underline-offset: 4px; }
.faq__list { border-top: 1px solid var(--gray-300); }
.qa { border-bottom: 1px solid var(--gray-300); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 0; cursor: pointer; font-size: clamp(17px, 1.5vw, 20px); font-weight: 650; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--gray-100); flex: none; transition: background-color var(--dur) ease, rotate var(--dur) var(--ease); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: var(--ink); }
.qa summary i::after { rotate: 90deg; transition: rotate var(--dur) var(--ease); }
.qa[open] summary i { background: var(--steel); }
.qa[open] summary i::before, .qa[open] summary i::after { background: #fff; }
.qa[open] summary i::after { rotate: 0deg; }
.qa p { margin: 0 0 22px; padding-right: 46px; color: var(--ink-2); }
.qa[open] p { animation: stepIn 280ms var(--ease); }

/* Contacto: enlaces */
.info__link { text-decoration: none; font-weight: 600; background-image: linear-gradient(var(--red), var(--red)); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur) var(--ease); word-break: break-word; }
.info__link:hover { background-size: 100% 2px; }
.footer a[href^="tel"], .footer a[href^="mailto"] { color: #fff; text-decoration: none; }
.footer a[href^="tel"]:hover, .footer a[href^="mailto"]:hover { text-decoration: underline; text-decoration-color: var(--red); }

/* =========================================================
   Dock de contacto rápido
   ========================================================= */
.dock { position: fixed; z-index: 80; right: 18px; bottom: 18px; display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(20,20,22,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 40px -14px rgba(20,20,22,.55);
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity var(--dur) ease, transform var(--dur) var(--ease); }
.dock.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dock__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; transition: background-color var(--dur-quick) ease, scale var(--dur-quick) var(--ease); }
.dock__btn svg { width: 18px; height: 18px; }
.dock__btn:hover { background: rgba(255,255,255,.12); }
.dock__btn:active { scale: .96; }
.dock__btn--red { background: var(--red); }
.dock__btn--red:hover { background: var(--red-dark); }

@media (max-width: 980px) {
  .calc__grid, .quiz, .faq__grid { grid-template-columns: 1fr; }
  .plans__grid { grid-template-columns: 1fr; gap: 26px; }
  .plan--featured, .plan--featured:hover { transform: none; }
  .firm__card { margin: 0 auto; }
}
@media (max-width: 760px) {
  .cfield { grid-template-columns: 1fr 140px; }
  .calc__legend { grid-template-columns: 1fr; }
  .dock { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; }
  .dock__btn { flex: 1; justify-content: center; padding: 0 8px; gap: 6px; font-size: 13.5px; white-space: nowrap; }
  .dock__btn svg { width: 16px; height: 16px; }
  .footer { padding-bottom: 96px; }
  .firm__facts dt { font-size: 17px; }
  .hero__tel { padding-left: 0; border-left: 0; }
}

/* =========================================================
   Chequeo de salud — paleta de estado (verde · ámbar · naranja)
   ========================================================= */
.btn--light { background: #fff; color: var(--graphite); }
.btn--light:hover { background: var(--st-good); color: #0b1a10; }
.health { padding: clamp(90px, 11vw, 150px) 0; background: #1B1E22; color: #fff; overflow: hidden; isolation: isolate; }
.health::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(40% 40% at 0% 0%, rgba(12,163,12,.16), transparent 70%),
  radial-gradient(40% 40% at 100% 100%, rgba(250,178,25,.12), transparent 70%); }
.health .section-head__lead { color: rgba(255,255,255,.72); }
.health .kicker::before { background: var(--st-good); }
.hc { display: grid; grid-template-columns: 1.35fr .9fr; gap: 16px; align-items: start; }
.hc__form { display: grid; gap: 10px; }
.hc__row { border: 0; margin: 0; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; transition: box-shadow var(--dur) ease, background-color var(--dur) ease; }
.hc__row legend { float: left; padding: 0; font-weight: 650; font-size: 16px; }
.hc__row[data-state="good"] { box-shadow: inset 4px 0 0 var(--st-good), inset 0 0 0 1px rgba(255,255,255,.08); }
.hc__row[data-state="warn"] { box-shadow: inset 4px 0 0 var(--st-warn), inset 0 0 0 1px rgba(255,255,255,.08); }
.hc__row[data-state="crit"] { box-shadow: inset 4px 0 0 var(--st-crit), inset 0 0 0 1px rgba(255,255,255,.08); }
.hc__opts { display: flex; gap: 6px; }
.hc__opt { position: relative; }
.hc__opt input { position: absolute; opacity: 0; inset: 0; }
.hc__opt span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; cursor: pointer; font-size: 13.5px; color: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: background-color var(--dur-quick) ease, color var(--dur-quick) ease, box-shadow var(--dur-quick) ease, scale var(--dur-quick) var(--ease); }
.hc__opt span:active { scale: .96; }
.hc__opt i { font-style: normal; font-size: 11px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); }
.hc__opt b { font-weight: 600; }
.hc__opt:hover span { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.hc__opt input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.hc__opt--good input:checked + span { background: var(--st-good); color: #06200A; box-shadow: none; }
.hc__opt--warn input:checked + span { background: var(--st-warn); color: #1B1E22; box-shadow: none; }
.hc__opt--crit input:checked + span { background: var(--st-crit); color: #1B1E22; box-shadow: none; }
.hc__opt input:checked + span i { background: rgba(0,0,0,.18); }
.hc__tip { grid-column: 1 / -1; margin: 2px 0 0; font-size: 14px; color: rgba(255,255,255,.72); animation: stepIn 280ms var(--ease); }
.hc__tip::before { content: "→ "; color: var(--st-warn); }
.hc__row[data-state="crit"] .hc__tip::before { color: var(--st-crit); }
.hc__panel { position: sticky; top: calc(var(--header-h) + 24px); padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: #F2F2F0; color: var(--ink); display: grid; gap: 14px; --band: var(--steel-2); }
.hc__panel[data-band="good"] { --band: var(--st-good); }
.hc__panel[data-band="warn"] { --band: var(--st-warn); }
.hc__panel[data-band="crit"] { --band: var(--st-crit); }
.hc__lbl { margin: 0; color: var(--steel); }
.gauge { position: relative; max-width: 280px; }
.gauge svg { width: 100%; overflow: visible; }
.gauge path { fill: none; stroke-width: 16; stroke-linecap: round; }
.gauge__track { stroke: var(--gray-200); }
.gauge__val { stroke: var(--band); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 600ms var(--ease), stroke 280ms ease; }
.gauge__num { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font-size: 52px; font-weight: 800; font-stretch: 92%; line-height: 1; font-variant-numeric: tabular-nums; }
.gauge__num small { font-size: 15px; font-weight: 500; color: var(--gray-600); margin-left: 2px; }
.hc__state { margin: 0; font-weight: 650; font-size: 17px; padding-left: 12px; border-left: 4px solid var(--band); transition: border-color 280ms ease; }
.hc__counts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hc__counts li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px; border-radius: 12px; background: #fff; font-size: 12.5px; color: var(--gray-600); }
.hc__counts i { font-style: normal; font-size: 11px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.hc__counts .is-good i { background: var(--st-good); }
.hc__counts .is-warn i { background: var(--st-warn); color: #1B1E22; }
.hc__counts .is-crit i { background: var(--st-crit); color: #1B1E22; }
.hc__counts b { font-size: 18px; color: var(--ink); }
.hc__rec { padding: 16px; border-radius: 16px; background: var(--graphite); color: #fff; animation: stepIn 280ms var(--ease); }
.hc__rec[hidden] { display: none; }
.hc__rec .mono { margin: 0 0 4px; color: #B9C0C8; }
.hc__plan { margin: 0 0 14px; font-size: 22px; font-weight: 740; font-stretch: 94%; line-height: 1.15; }
.hc__note { margin: 0; font-size: 12.5px; color: var(--gray-600); }
@media (max-width: 980px) {
  .hc { grid-template-columns: 1fr; }
  .hc__panel { position: static; }
}
@media (max-width: 760px) {
  .hc__row { grid-template-columns: 1fr; }
  .hc__opts { display: grid; grid-template-columns: repeat(3, 1fr); }
  .hc__opt span { justify-content: center; padding: 0 6px; font-size: 12.5px; }
}

/* =========================================================
   Efectos de scroll
   ========================================================= */
/* Titulares: palabras que suben desde una máscara */
.h2.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.h2.split .w > span { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--ease); }
.h2.split.is-in .w > span { transform: none; }

/* Telón: el recorte se aplica desde JS sobre cada sección */
.audience, .services, .health, .board, .calc, .special, .plans, .about, .process, .faq, .contact { will-change: clip-path; }

/* Indicador de nivel (pisos del edificio) */
.level { position: fixed; z-index: 70; right: 22px; top: 50%; height: min(56vh, 460px); width: 28px; translate: 0 -50%;
  opacity: 0; pointer-events: none; transition: opacity var(--dur) ease; }
.level.is-on { opacity: 1; pointer-events: auto; }
.level__rail { position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: rgba(74,82,92,.22); border-radius: 2px; }
.level__fill { position: absolute; inset: 0; background: var(--red); transform-origin: top; transform: scaleY(0); border-radius: 2px; }
.level__ticks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.level__ticks li { position: absolute; left: 0; translate: 0 -50%; }
.level__ticks a { display: flex; align-items: center; justify-content: flex-end; flex-direction: row-reverse; gap: 10px; text-decoration: none; width: 28px; height: 22px; }
.level__ticks a span { flex: none; width: 28px; text-align: center; font: 500 9.5px var(--mono); color: var(--steel); background: var(--gray-100); border-radius: 4px; padding: 2px 0; box-shadow: inset 0 0 0 1px rgba(74,82,92,.3); transition: background-color var(--dur) ease, color var(--dur) ease, scale var(--dur-quick) var(--ease); }
.level__ticks a em { position: absolute; right: 38px; white-space: nowrap; font: 500 11.5px var(--mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; background: var(--graphite); color: #fff; opacity: 0; translate: 6px 0; pointer-events: none; transition: opacity var(--dur) ease, translate var(--dur) var(--ease); }
.level__ticks a:hover em, .level__ticks a:focus-visible em { opacity: 1; translate: 0 0; }
.level__ticks a:hover span { scale: 1.1; }
.level__ticks a:active span { scale: .95; }
.level__ticks li.is-cur a span { background: var(--red); color: #fff; box-shadow: none; }
.level__now { position: absolute; right: 0; bottom: -54px; margin: 0; padding: 6px 8px; border-radius: 10px; background: rgba(242,242,240,.92); box-shadow: 0 6px 18px -8px rgba(20,20,22,.35); display: grid; justify-items: end; gap: 2px; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel); white-space: nowrap; }
.level__now b { font: 700 18px var(--font); font-stretch: 110%; color: var(--ink); }
.level__now b::before { content: "N"; font-size: 11px; color: var(--steel-2); margin-right: 2px; }
@media (max-width: 1359px) { .level { display: none; } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1260px) {
  .nav { display: none; }
  .burger { display: block; }
}
@media (max-width: 1180px) {
  .hero__scope { grid-template-columns: repeat(4, 1fr); }
  .hero__scope a:nth-child(4) { border-right: 0; }
  .hero__scope a:nth-child(5) { padding-left: 0; }
  .hero__scope a:nth-child(n+5) { border-top: 1px solid rgba(20,20,22,.1); }
}
@media (max-width: 980px) {
  .hero__inner { order: 1; flex: none; }
  .hero__stage { order: 2; position: relative; inset: auto; height: clamp(320px, 62vw, 460px); margin-top: -8px; }
  .hero__scope { order: 3; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__card { display: none; }
  .callout { display: none; }
  .audience__grid, .srv, .about__grid, .contact__grid, .section-head--split { grid-template-columns: 1fr; }
  .section-head--split { gap: 18px; }
  .audience__head, .srv__panels { position: static; }
  .board__grid > * { grid-column: span 12 !important; }
  .special__grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 28px; }
  .step { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; padding: 0; }
  .step__bar { grid-row: span 3; height: auto; margin: 0; }
  .step__bar::before { left: 16px; right: auto; top: 0; bottom: -28px; width: 1px; height: auto; }
  .step__bar span { left: 9px; right: auto; top: 0; width: 16px; height: 100%; min-height: 60px; transform: scaleY(0); transform-origin: top; }
  .timeline.is-in .step__bar span { transform: none; }
  .step:last-child .step__bar::before { bottom: 0; }
  .scope__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .about { overflow: hidden; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .header__cta { display: none; }
  .hero { min-height: auto; }
  .hero__copy { padding-bottom: 28px; }
  .hero__actions .btn { width: 100%; }
  .hero__scope { grid-template-columns: 1fr 1fr; margin-top: 8px; }
  .hero__scope a { padding: 14px 12px 16px 0 !important; border-right: 0; border-top: 1px solid rgba(20,20,22,.1); }
  .hero__scope a:nth-child(odd) { padding-left: 0 !important; }
  .hero__scope a:nth-child(even) { padding-left: 12px !important; border-left: 1px solid rgba(20,20,22,.1); }
  .hero__scope a:first-child { border-top: 0; }
  .hero__scope a:nth-child(2) { border-top: 0; }
  .quotes { grid-template-columns: 1fr; }
  .quote:nth-child(even) { margin: 0; }
  .quote { min-height: 0; }
  .form__row { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 92px 1fr 40px; font-size: 13px; }
  .footer__grid { grid-template-columns: 1fr; }
  .cta-band .btn { width: 100%; }
  .srv__panel::before { font-size: 80px; }
  .brand__text small { font-size: 8.5px; }
}


@media (forced-colors: active) {
  .bar__fill, .meter span, .step__bar span { background: CanvasText; }
}

/* =========================================================
   Páginas legales
   ========================================================= */
.legal-page { background: var(--gray-50); }
.legal-head { position: sticky; top: 0; z-index: 10; background: rgba(242,242,240,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-200); }
.legal-head .container { display: flex; align-items: center; gap: 16px; height: 68px; }
.legal { max-width: 760px; padding: 56px var(--gutter) 96px; margin: 0 auto; }
.legal h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 760; font-stretch: 90%; margin: 14px 0 10px; }
.legal h2 { font-size: 21px; font-weight: 700; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--ink-2); }
.legal-back { margin-left: auto; font-size: 14px; font-weight: 600; text-decoration: none; }
.legal-back:hover { color: var(--red); }
.legal-date { color: var(--steel); margin: 0 0 18px; }
.legal-lead { font-size: 18px; padding: 16px 18px; border-radius: 14px; background: var(--white); box-shadow: inset 4px 0 0 var(--steel); }
.legal-toc { margin: 28px 0 8px; padding: 18px 20px; border-radius: 16px; background: var(--white); }
.legal-toc .mono { margin: 0 0 8px; color: var(--steel); }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; font-size: 14.5px; }
.legal-toc li { break-inside: avoid; margin-bottom: 4px; }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover { color: var(--red); text-decoration: underline; }
.legal h2 { scroll-margin-top: 90px; }
.legal a { text-underline-offset: 3px; }
.legal-404 .btn { margin: 6px 8px 0 0; }
.legal-foot { background: var(--graphite); color: rgba(255,255,255,.75); padding: 28px 0; }
.legal-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 10px; }
.legal-foot a { color: #fff; text-decoration: none; }
.legal-foot a:hover { text-decoration: underline; }
.legal-foot .mono { margin: 0; font-size: 11.5px; color: rgba(255,255,255,.6); text-transform: none; }
@media (max-width: 760px) {
  .legal-toc ol { columns: 1; }
  .legal-back { display: none; }
  .legal-head .lang { margin-left: auto; }
}
html[lang="es"] [lang="en"].lx, html[lang="en"] [lang="es"].lx { display: none; }
.form__legal { margin: 0; font-size: 12.5px; color: var(--gray-600); display: flex; gap: 8px; align-items: flex-start; }
.form__legal::before { content: ""; flex: none; width: 12px; height: 14px; margin-top: 2px; background: var(--steel); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M2 6V4a4 4 0 0 1 8 0v2h1v8H1V6zm2 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M2 6V4a4 4 0 0 1 8 0v2h1v8H1V6zm2 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat; }