/* GAPS Consultores - sitio web.
   Tokens y tipografía: Brand Toolkit v2 (07_Web). Estructura y movimiento: adaptados de la plantilla
   "Law firm website template" de 8B (MIT, ver LICENCIA-plantilla-8B.txt). */

/* ---------- Fuentes (SIL OFL 1.1) ---------- */
@font-face { font-family: 'Newsreader'; src: url('fonts/newsreader-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/newsreader-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/newsreader-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/plus-jakarta-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/plus-jakarta-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Tokens de marca ---------- */
:root {
  --gaps-carbon: #19171C;
  --gaps-violeta: #8D36E8;
  --gaps-ciruela: #301C3A;
  --gaps-lavanda: #EEE6F7;
  --gaps-papel: #F6F4F0;
  --gaps-violeta-oscuro: #6F28C4;
  --gaps-grafito: #383734;
  --gaps-gris: #6E6C66;
  --gaps-filete: #D8D5CC;
  --gaps-blanco: #FFFFFF;
  --gaps-error: #A33A3A;
  --gaps-exito: #2F7A4F;

  --font-editorial: 'Newsreader', Georgia, serif;
  --font-rational: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  --font-index: 'JetBrains Mono', Consolas, monospace;
  --measure: 62ch;
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 56px);
  --nav-h: 72px;
  --idx-h: 52px;
  --sec-pad: clamp(80px, 10vw, 160px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --fast: 150ms ease-out;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--gaps-papel); color: var(--gaps-grafito); font-family: var(--font-rational); font-size: 1rem; line-height: 1.6; overflow-x: clip; }
h1, h2, h3 { font-family: var(--font-editorial); font-weight: 300; color: var(--gaps-carbon); line-height: 1.08; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.6rem); }
h3 { font-size: 1.75rem; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--gaps-violeta-oscuro); text-underline-offset: 3px; }
a:hover { color: var(--gaps-violeta); }
:focus-visible { outline: 2px solid var(--gaps-violeta); outline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
main:focus { outline: none; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.saltar { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--gaps-carbon); color: var(--gaps-papel); padding: 12px 18px; font-weight: 600; }
.saltar:focus { top: 12px; color: var(--gaps-papel); }

.rotulo { font-family: var(--font-index); font-size: .75rem; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--gaps-violeta); font-variant-ligatures: none; }
.num { font-family: var(--font-index); font-size: .75rem; letter-spacing: .06em; color: var(--gaps-violeta); font-variant-ligatures: none; }
.sobre-lavanda .rotulo, .sobre-lavanda .num, .panel .rotulo, .panel .num { color: var(--gaps-violeta-oscuro); }
.inverse .rotulo { color: var(--gaps-lavanda); }

/* Íconos */
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; flex: none; }
.ic .ic-a { stroke: var(--gaps-violeta); }
.ic rect.ic-a { fill: var(--gaps-violeta); stroke: none; }

/* Botones y enlaces */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; font: 600 1rem/1 var(--font-rational); text-decoration: none; border: 1px solid var(--gaps-carbon); border-radius: 0; cursor: pointer; transition: background-color var(--fast), color var(--fast), border-color var(--fast); }
.btn .ic { width: 20px; height: 20px; transition: transform var(--fast); }
.btn .ic .ic-a, .btn .ic path { stroke: currentColor; }
.btn:hover .ic { transform: translateX(3px); }
.btn-primary { background: var(--gaps-carbon); color: var(--gaps-papel); }
.btn-primary:hover { background: var(--gaps-violeta-oscuro); border-color: var(--gaps-violeta-oscuro); color: #fff; }
.btn-secondary { background: transparent; color: var(--gaps-carbon); }
.btn-secondary:hover { background: var(--gaps-carbon); color: var(--gaps-papel); }
.btn[disabled] { opacity: .6; cursor: progress; }
.enlace { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gaps-carbon); text-decoration: none; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size var(--fast), color var(--fast); }
.enlace .ic { width: 18px; height: 18px; transition: transform var(--fast); }
.enlace .ic path { stroke: var(--gaps-violeta); }
.enlace:hover { color: var(--gaps-violeta-oscuro); }
.enlace:hover .ic { transform: translateX(4px); }

/* ---------- Cabecera ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); border-bottom: 1px solid transparent; transition: transform .35s var(--ease), border-color var(--fast); }
/* El desenfoque va en una capa aparte: en el propio .nav atraparía al menú móvil (position: fixed). */
.nav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--gaps-papel) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav.is-scrolled { border-bottom-color: var(--gaps-filete); }
.nav.is-oculta { transform: translateY(-100%); }
.nav:focus-within { transform: none; }
.nav__in { height: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 32px; }
.nav__logo { flex: none; margin-right: auto; position: relative; z-index: 2; }
.nav__logo img { width: 140px; }
.nav__menu { display: flex; align-items: center; gap: 32px; }
.nav__links { display: flex; gap: 28px; }
.nav__links a { color: var(--gaps-carbon); text-decoration: none; font-size: .95rem; font-weight: 600; padding: 6px 0; background: linear-gradient(var(--gaps-violeta), var(--gaps-violeta)) 0 100% / 0 2px no-repeat; transition: background-size .25s var(--ease); }
.nav__links a:hover, .nav__links a[aria-current] { background-size: 100% 2px; }
.nav__cta { min-height: 44px; padding: 0 20px; font-size: .95rem; }
.nav__toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 12px; background: none; border: 0; color: var(--gaps-carbon); font: 600 .95rem var(--font-rational); cursor: pointer; }
.nav__toggle .ic:last-child { display: none; }
@media (max-width: 1000px) {
  .nav__toggle { display: inline-flex; position: relative; z-index: 2; }
  .nav__menu { position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 40px; padding: calc(var(--nav-h) + 24px) var(--gutter) 48px; background: var(--gaps-papel); visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .25s; }
  .nav__links { flex-direction: column; gap: 6px; }
  .nav__links a { font: 300 clamp(2.2rem, 9vw, 3.4rem)/1.15 var(--font-editorial); background-size: 0 1px; }
  .menu-abierto .nav__menu { visibility: visible; opacity: 1; transition: opacity .25s; }
  .menu-abierto .nav__toggle .ic:nth-of-type(1) { display: none; }
  .menu-abierto .nav__toggle .ic:last-child { display: block; }
  .menu-abierto body { overflow: hidden; }
  .nav__cta { min-height: 52px; }
  html:not(.js) .nav__menu { position: static; visibility: visible; opacity: 1; padding: 0; background: none; }
}

/* ---------- Opening ---------- */
.hero { position: relative; min-height: 100svh; display: flex; overflow: hidden; --p: 0; }
.hero__fondo { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 34%, #000 70%, transparent 96%); mask-image: linear-gradient(180deg, transparent 4%, #000 34%, #000 70%, transparent 96%); }
.territorio { width: 100%; height: 100%; transform: scale(calc(1 + var(--p) * .12)) translateY(calc(var(--p) * -4%)); transform-origin: 60% 60%; }
.ter-curvas path { fill: none; stroke: var(--gaps-filete); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ter-curvas .ter-maestra { stroke: #C9C5BA; }
.ter-corredor { fill: none; stroke: var(--gaps-violeta); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ter-nodo { fill: var(--gaps-papel); stroke: var(--gaps-violeta); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.hero__in { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; gap: 32px; padding-top: calc(var(--nav-h) + clamp(32px, 6vh, 72px)); padding-bottom: clamp(140px, 22vh, 220px); }
.hero__t { font-size: clamp(2.7rem, 1rem + 5.4vw, 6rem); line-height: 1.02; letter-spacing: -0.022em; max-width: 15.5em; align-self: center; }
.hero__t .w { display: inline-block; }
.hero__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 48px; }
.hero__bajada { max-width: 46ch; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.5; color: var(--gaps-carbon); order: 2; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; order: 1; }
.hero__diagonal { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(90px, 18vw, 260px); transform-origin: 100% 100%; transform: scaleY(calc(1 + var(--p) * .8)); }
.hero__diagonal .d1 { fill: var(--gaps-lavanda); }
.hero__diagonal .d2 { fill: var(--gaps-violeta); }
.hero-foto img { width: 100%; filter: saturate(.85); }
.respaldo ul { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--gaps-carbon); }
.respaldo li { padding: 24px 0; display: grid; gap: 6px; }
.respaldo strong { font: 300 clamp(2.4rem, 5vw, 4rem)/1 var(--font-editorial); color: var(--gaps-carbon); }

/* Cabeceras de sección: título a la izquierda, nota a la derecha alineada al pie */
.cab2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(48px, 7vw, 88px); }
.cab2 h2 { margin-top: 18px; max-width: 16em; }
.cab2__nota { max-width: 40ch; color: var(--gaps-grafito); font-size: 1.05rem; }

/* ---------- Sectores: paneles apilados ---------- */
.sectores { padding-top: var(--sec-pad); }
.indice { position: sticky; top: var(--nav-h); z-index: 20; height: var(--idx-h); background: var(--gaps-papel); border-top: 1px solid var(--gaps-carbon); transition: top .35s var(--ease); }
.nav.is-oculta ~ main .indice { top: 0; }
.indice ul { height: 100%; display: flex; gap: clamp(16px, 4vw, 48px); align-items: center; overflow-x: auto; scrollbar-width: none; }
.indice a { display: inline-flex; gap: 10px; align-items: baseline; white-space: nowrap; font-size: .92rem; font-weight: 600; color: var(--gaps-gris); text-decoration: none; padding: 6px 0; background: linear-gradient(var(--gaps-carbon), var(--gaps-carbon)) 0 100% / 0 2px no-repeat; transition: color var(--fast), background-size .3s var(--ease); }
.indice a:hover, .indice a[aria-current] { color: var(--gaps-carbon); background-size: 100% 2px; }
.panel { position: relative; background: var(--gaps-lavanda); border-top: 1px solid var(--gaps-carbon); --cubre: 0; }
.panel::after { content: ''; position: absolute; inset: 0; background: var(--gaps-ciruela); opacity: calc(var(--cubre) * .55); pointer-events: none; }
.panel--urbano { background: #E7DDF3; }
.panel__in { min-height: calc(100svh - var(--nav-h) - var(--idx-h)); display: grid; grid-template-columns: 1fr minmax(0, 1.15fr) 1fr; grid-template-rows: auto auto 1fr; gap: 16px 40px; padding-block: clamp(28px, 5vh, 56px); }
.panel__rot { grid-column: 1 / -1; }
.panel__t { grid-column: 1 / -1; font-size: clamp(2.6rem, 1rem + 4.6vw, 5.6rem); line-height: .98; letter-spacing: -0.025em; max-width: 12em; position: relative; z-index: 2; }
.panel__fig { grid-column: 2; grid-row: 3; align-self: center; position: relative; margin: 12px 0; }
.panel__lamina { position: relative; z-index: 1; background: var(--gaps-papel); border: 1px solid var(--gaps-carbon); padding: 4%; }
.panel__intro { grid-column: 1; grid-row: 3; align-self: end; max-width: 36ch; color: var(--gaps-carbon); }
.panel__act { grid-column: 3; grid-row: 3; align-self: end; display: grid; gap: 14px; justify-items: start; }
.activos li { padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--gaps-carbon) 22%, transparent); color: var(--gaps-carbon); font-size: .95rem; }
.activos li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--gaps-carbon) 22%, transparent); }
.activos { width: 100%; margin-bottom: 8px; }
/* Piezas violeta detrás de cada lámina (la diagonal de la marca, en bloques) */
.pz { position: absolute; z-index: 0; background: var(--gaps-violeta); transform-origin: 0 50%; }
.panel--productivo .pz1 { left: -14%; top: 58%; width: 52%; height: 22%; }
.panel--productivo .pz2 { right: -10%; top: -8%; width: 30%; height: 16%; transform-origin: 100% 50%; }
.panel--productivo .pz3 { left: 30%; bottom: -9%; width: 44%; height: 6%; background: var(--gaps-ciruela); }
.panel--urbano .pz1 { left: -9%; top: -9%; width: 44%; height: 44%; }
.panel--urbano .pz2 { right: -9%; bottom: -9%; width: 32%; height: 32%; transform-origin: 100% 100%; background: var(--gaps-ciruela); }
.panel--urbano .pz3 { display: none; }
.panel--infraestructura .pz1 { left: -16%; top: 34%; width: 132%; height: 10%; transform: skewY(-12deg); transform-origin: 0 50%; }
.panel--infraestructura .pz2 { left: -16%; top: 50%; width: 132%; height: 4%; transform: skewY(-12deg); transform-origin: 0 50%; opacity: .45; }
.panel--infraestructura .pz3 { right: -7%; top: -7%; width: 14%; height: 14%; transform-origin: 100% 0; background: var(--gaps-ciruela); }

/* Láminas (ilustraciones) */
.il { width: 100%; height: auto; overflow: visible; }
.il-l path, .il-l circle, .il-l rect, .il-grueso { fill: none; stroke: var(--gaps-carbon); stroke-width: 1.4; stroke-linejoin: round; }
.il-grueso { stroke-width: 2.4; }
.il-l.il-grueso path { stroke-width: 2.4; }
.il-t path { fill: none; stroke: var(--gaps-gris); stroke-width: 1; }
.il-a path, .il-a.il-grueso path { fill: none; stroke: var(--gaps-violeta); stroke-width: 2.4; }
.il-a.il-grueso path { stroke-width: 5; }
.il-f, .il-f rect, .il-f path { fill: var(--gaps-lavanda); stroke: none; }
.il-papel { fill: var(--gaps-blanco); }
.il-x { font-family: var(--font-index); font-size: 13px; letter-spacing: .08em; fill: var(--gaps-gris); }
.il-x-a { fill: var(--gaps-violeta-oscuro); }
.il-c { text-anchor: middle; }
.il-durmientes { fill: none; stroke: var(--gaps-gris); stroke-width: 12; stroke-dasharray: 1.4 9; }
.il-nodo circle, .il-nodo rect { fill: var(--gaps-blanco); stroke: var(--gaps-carbon); stroke-width: 2; }

/* ---------- Especialidades: escalera ---------- */
.esp { padding-block: var(--sec-pad); }
.esp__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px clamp(32px, 5vw, 80px); align-items: start; }
.esp__intro { position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: 22px; justify-items: start; }
.esp__intro h2 { max-width: 11em; }
.esp__bajada { max-width: 36ch; }
.escalera { display: grid; grid-template-columns: 1fr 1fr; }
.celda { background: var(--gaps-blanco); border: 1px solid var(--gaps-filete); margin: 0 -1px -1px 0; padding: clamp(22px, 2.4vw, 34px); min-height: 360px; display: flex; flex-direction: column; gap: 14px; }
.celda:nth-child(even) { transform: translateY(50%); }
.escalera { padding-bottom: 180px; }
.celda__ico .ic { width: 36px; height: 36px; stroke-width: 1.25; color: var(--gaps-carbon); }
.celda__t { font-size: clamp(1.6rem, 1.1rem + 1vw, 2.2rem); font-weight: 300; line-height: 1.08; }
.celda__t a { color: var(--gaps-violeta-oscuro); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease); }
.celda__t a:hover { background-size: 100% 1px; }
.celda__txt { color: var(--gaps-grafito); }
.medidor { margin-top: auto; display: grid; gap: 8px; }
.medidor__txt { font-size: .875rem; color: var(--gaps-gris); }
.medidor__txt strong { color: var(--gaps-carbon); }
.medidor__barra { display: block; height: 10px; background: var(--gaps-lavanda); position: relative; }
.medidor__fill { position: absolute; inset: 0 auto 0 0; background: var(--gaps-violeta); transform-origin: 0 50%; }
.m1 { width: 8.333%; } .m2 { width: 16.667%; } .m3 { width: 25%; } .m4 { width: 33.333%; } .m5 { width: 41.667%; } .m6 { width: 50%; }
.m7 { width: 58.333%; } .m8 { width: 66.667%; } .m9 { width: 75%; } .m10 { width: 83.333%; } .m11 { width: 91.667%; } .m12 { width: 100%; }

/* ---------- Matriz ---------- */
.matriz { padding-block: var(--sec-pad); background: var(--gaps-blanco); border-top: 1px solid var(--gaps-filete); }
.mz { width: 100%; border-collapse: collapse; }
.mz thead th { position: sticky; top: var(--nav-h); z-index: 2; background: var(--gaps-blanco); vertical-align: bottom; text-align: left; font-weight: 600; font-size: .85rem; line-height: 1.3; color: var(--gaps-carbon); padding: 16px 12px 16px 0; border-bottom: 2px solid var(--gaps-carbon); width: 13%; }
.mz thead th.mz__srv { width: auto; }
.mz thead th > span { display: block; }
.mz__ico .ic { width: 28px; height: 28px; margin-bottom: 10px; }
.mz__nom { margin-top: 2px; }
.mz .mz__sector th { text-align: left; padding: 40px 0 12px; font: 300 1.6rem/1.2 var(--font-editorial); color: var(--gaps-carbon); }
.mz .mz__sector .num { margin-right: 10px; vertical-align: .35em; }
.mz tbody tr:not(.mz__sector) { position: relative; }
.mz tbody tr:not(.mz__sector) > * { border-top: 1px solid var(--gaps-filete); padding: 16px 12px 16px 0; }
.mz tbody tr:not(.mz__sector):hover { background: var(--gaps-papel); }
.mz tbody th[scope=row] { text-align: left; font-weight: 400; }
.mz tbody th[scope=row] a { color: var(--gaps-carbon); text-decoration: none; }
.mz tbody th[scope=row] a:hover { color: var(--gaps-violeta-oscuro); text-decoration: underline; }
.mz td { vertical-align: middle; }
.punto { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--gaps-violeta); }
.mz .tags { display: none; }

/* ---------- Etiquetas de especialidad ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--gaps-filete); background: var(--gaps-blanco); color: var(--gaps-carbon); text-decoration: none; font-size: .85rem; line-height: 1.3; transition: border-color var(--fast), background-color var(--fast); }
.tags a:hover { border-color: var(--gaps-violeta); background: var(--gaps-lavanda); color: var(--gaps-carbon); }
.tags .ic { width: 18px; height: 18px; }

/* ---------- Proyectos y equipo (aparecen cuando hay datos aprobados) ---------- */
.proyectos { padding-block: var(--sec-pad); }
.proyectos h2 { margin: 18px 0 48px; }
.proy-lista { border-top: 2px solid var(--gaps-carbon); }
.proy { display: grid; grid-template-columns: 90px 1.4fr 1fr 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--gaps-filete); align-items: baseline; }
.proy h3 { font-size: 1.35rem; }
.equipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin-top: 56px; border-top: 1px solid var(--gaps-filete); }
.equipo li { padding: 24px 24px 24px 0; }
.equipo h3 { font-size: 1.4rem; }

/* ---------- Quiénes somos ---------- */
.nos { padding-block: var(--sec-pad); position: relative; }
.nos__t { font-size: 1.75rem; font-weight: 400; margin: 14px 0 36px; }
.nos__texto { font: 300 clamp(1.9rem, 1rem + 3vw, 3.8rem)/1.14 var(--font-editorial); color: var(--gaps-carbon); letter-spacing: -0.015em; max-width: 21em; }
.cierre { margin-top: clamp(48px, 7vw, 96px); padding-top: 28px; border-top: 2px solid var(--gaps-carbon); display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; justify-content: space-between; font-size: 1.15rem; color: var(--gaps-carbon); }

/* ---------- Contacto ---------- */
.contacto { padding-block: var(--sec-pad); background: var(--gaps-lavanda); }
.contacto__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px clamp(40px, 6vw, 112px); align-items: start; }
.contacto__t { font-size: clamp(3rem, 1.6rem + 4.4vw, 6rem); line-height: .98; letter-spacing: -0.025em; margin: 16px 0 24px; }
.contacto__bajada { max-width: 38ch; color: var(--gaps-carbon); font-size: 1.1rem; }
.canales { margin-top: 40px; border-top: 1px solid color-mix(in srgb, var(--gaps-carbon) 25%, transparent); }
.canales li { display: grid; grid-template-columns: 28px 96px 1fr; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--gaps-carbon) 25%, transparent); }
.canales a { color: var(--gaps-carbon); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.canales a:hover { color: var(--gaps-violeta-oscuro); text-decoration: underline; }
.canal__ico { color: var(--gaps-carbon); }
.form { display: grid; gap: 28px; justify-items: start; }
.form__aviso, .form__priv { font-size: .875rem; color: var(--gaps-grafito); }
.form__campos { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--gaps-carbon); min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo input, .campo select, .campo textarea { width: 100%; font: 400 1rem var(--font-rational); padding: 12px 0; border: 0; border-bottom: 1px solid var(--gaps-carbon); background: transparent; color: var(--gaps-carbon); border-radius: 0; min-height: 48px; }
.campo select { -webkit-appearance: none; appearance: none; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2319171C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 28px; }
.campo textarea { resize: vertical; min-height: 128px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom: 2px solid var(--gaps-violeta-oscuro); padding-bottom: 11px; }
.campo [aria-invalid="true"] { border-bottom: 2px solid var(--gaps-error); padding-bottom: 11px; }
.campo__ayuda { font-weight: 400; color: var(--gaps-grafito); }
.campo .error { color: var(--gaps-error); font-weight: 400; min-height: 0; }
.campo .error:empty { display: none; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__estado:empty { display: none; }
.form__estado { width: 100%; }
.form__estado:focus { outline: none; }
.form__estado p { padding: 16px 18px; border-left: 3px solid; background: var(--gaps-blanco); color: var(--gaps-carbon); }
.form__estado .ok { border-color: var(--gaps-exito); }
.form__estado .mal { border-color: var(--gaps-error); }

/* ---------- Pie ---------- */
.inverse { background: var(--gaps-ciruela); color: var(--gaps-papel); }
.pie { position: relative; padding: clamp(96px, 12vw, 180px) 0 32px; }
.pie__diagonal { position: absolute; top: 0; left: 0; width: 100%; height: clamp(60px, 9vw, 140px); }
.pie__diagonal path { fill: var(--gaps-violeta); }
.pie__in { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.pie__marca img { width: 240px; }
.pie__lema { margin-top: 18px; font: 400 italic 1.15rem var(--font-editorial); color: var(--gaps-lavanda); }
.pie__tit { font: 400 .75rem/1.4 var(--font-index); letter-spacing: .08em; color: var(--gaps-lavanda); margin-bottom: 14px; }
.pie__col li { padding: 4px 0; font-size: .95rem; }
.pie a { color: var(--gaps-papel); text-decoration: none; }
.pie a:hover { color: var(--gaps-lavanda); text-decoration: underline; }
.pie__legal { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 72px; padding-top: 20px; padding-bottom: 72px; background: linear-gradient(color-mix(in srgb, var(--gaps-papel) 22%, transparent), color-mix(in srgb, var(--gaps-papel) 22%, transparent)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; font-size: .85rem; color: color-mix(in srgb, var(--gaps-papel) 80%, transparent); }
.pie__arriba { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.pie__arriba .ic { width: 18px; height: 18px; }
.pie__arriba .ic path { stroke: currentColor; }

/* WhatsApp flotante */
.wa { position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 40; width: 56px; height: 56px; display: grid; place-items: center; background: var(--gaps-carbon); color: var(--gaps-papel); transition: background-color var(--fast), transform .25s var(--ease); }
.wa:hover { background: var(--gaps-violeta-oscuro); color: #fff; transform: translateY(-2px); }
.wa .ic { width: 26px; height: 26px; }
.wa .ic .ic-a { stroke: currentColor; }

/* ---------- Páginas interiores ---------- */
.pag-cab { position: relative; padding: calc(var(--nav-h) + clamp(56px, 9vw, 128px)) 0 clamp(120px, 14vw, 200px); overflow: hidden; }
.pag-cab .wrap { position: relative; z-index: 1; }
.pag-cab__t { font-size: clamp(2.6rem, 1rem + 5vw, 5.6rem); line-height: 1; letter-spacing: -0.025em; max-width: 13em; margin: 18px 0 28px; }
.pag-cab__bajada { max-width: 52ch; font-size: 1.15rem; color: var(--gaps-carbon); }
.pag-cab__diagonal { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(70px, 12vw, 170px); }
.pag-cab__diagonal path { fill: var(--gaps-lavanda); }
.pag-idx { position: sticky; top: var(--nav-h); z-index: 20; background: var(--gaps-papel); border-top: 1px solid var(--gaps-carbon); border-bottom: 1px solid var(--gaps-filete); transition: top .35s var(--ease); }
.nav.is-oculta ~ main .pag-idx { top: 0; }
.pag-idx ul { display: flex; gap: clamp(16px, 4vw, 48px); overflow-x: auto; scrollbar-width: none; }
.pag-idx a { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; white-space: nowrap; color: var(--gaps-gris); font-weight: 600; font-size: .95rem; text-decoration: none; background: linear-gradient(var(--gaps-carbon), var(--gaps-carbon)) 0 100% / 0 2px no-repeat; transition: color var(--fast), background-size .3s var(--ease); }
.pag-idx a:hover, .pag-idx a[aria-current] { color: var(--gaps-carbon); background-size: 100% 2px; }
.pag-idx .ic { width: 20px; height: 20px; }

.grid-4-8 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(32px, 5vw, 88px); align-items: start; }
.sector { padding-block: clamp(64px, 8vw, 128px); border-top: 1px solid var(--gaps-filete); }
.sector:first-of-type { border-top: 0; }
.sector__lado { position: sticky; top: calc(var(--nav-h) + 80px); display: grid; gap: 18px; justify-items: start; }
.sector__t { font-size: clamp(2.2rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1.02; }
.sector__lamina { position: relative; overflow: hidden; background: var(--gaps-lavanda); padding: clamp(28px, 5vw, 56px) clamp(28px, 8vw, 120px); margin-bottom: 40px; }
.sector__papel { position: relative; z-index: 1; max-width: 520px; margin-inline: auto; background: var(--gaps-papel); border: 1px solid var(--gaps-carbon); padding: 4%; }
.sector__lamina .pz1 { left: 0; top: 54%; width: 34%; height: 18%; }
.sector__lamina .pz2 { right: 0; top: 12%; width: 22%; height: 12%; transform-origin: 100% 50%; background: var(--gaps-ciruela); }
.mv .sector__lamina .pz { transition: transform 1.1s .1s var(--ease); }
.mv .sector__lamina:not(.in) .pz { transform: scaleX(.1); }
.sector__intro { color: var(--gaps-carbon); }
.sector__lado .activos { margin-bottom: 10px; }
.sector__servicios { display: grid; }
.srv { padding: 36px 0 44px; border-top: 1px solid var(--gaps-filete); display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
.srv:first-child { border-top: 2px solid var(--gaps-carbon); }
.srv__t { grid-column: 1 / -1; font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.25rem); font-weight: 300; }
.srv__cuando { grid-column: 1 / -1; background: var(--gaps-lavanda); padding: 18px 22px; border-left: 3px solid var(--gaps-violeta); display: grid; gap: 6px; }
.srv__cuando .rotulo { color: var(--gaps-violeta-oscuro); }
.srv__cuando p:last-child { color: var(--gaps-carbon); font-size: 1.05rem; }
.srv__bloque { display: grid; gap: 10px; align-content: start; }
.srv__bloque:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
.srv__ref { grid-column: 1 / -1; font-size: .95rem; }
.entregables li { position: relative; padding: 7px 0 7px 22px; border-top: 1px solid var(--gaps-filete); color: var(--gaps-carbon); font-size: .95rem; }
.entregables li::before { content: ''; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; background: var(--gaps-violeta); }
.ent-btn { display: none; }

.esp-pag { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px clamp(32px, 5vw, 88px); align-items: start; padding-bottom: var(--sec-pad); }
.esp-idx { position: sticky; top: calc(var(--nav-h) + 32px); padding-top: 32px; }
.esp-idx ul { border-top: 2px solid var(--gaps-carbon); }
.esp-idx a { display: grid; grid-template-columns: 24px 26px 1fr auto; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--gaps-filete); color: var(--gaps-gris); text-decoration: none; font-weight: 600; font-size: .92rem; line-height: 1.3; transition: color var(--fast); }
.esp-idx a:hover, .esp-idx a[aria-current] { color: var(--gaps-carbon); }
.esp-idx a[aria-current] { box-shadow: inset 3px 0 0 var(--gaps-violeta); padding-left: 10px; margin-left: -10px; }
.esp-idx .ic { width: 22px; height: 22px; color: var(--gaps-carbon); }
.esp-idx__n { font-family: var(--font-index); font-size: .75rem; color: var(--gaps-gris); }
.esp-panel { padding-top: 32px; padding-bottom: clamp(56px, 7vw, 104px); }
.esp-panel + .esp-panel { border-top: 1px solid var(--gaps-filete); padding-top: clamp(56px, 7vw, 104px); }
.esp-panel__cab { display: grid; gap: 18px; justify-items: start; max-width: 760px; margin-bottom: 32px; }
.esp-panel__ico .ic { width: 44px; height: 44px; stroke-width: 1.2; color: var(--gaps-carbon); }
.esp-panel__t { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.02; }
.esp-panel__intro { font-size: 1.1rem; color: var(--gaps-carbon); max-width: 58ch; }
.esp-panel .medidor { width: min(100%, 420px); }
.participa-det { width: 100%; border-top: 1px solid var(--gaps-filete); border-bottom: 1px solid var(--gaps-filete); }
.participa-det summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; font-weight: 600; color: var(--gaps-carbon); }
.participa-det summary::-webkit-details-marker { display: none; }
.participa-det summary .ic { transition: transform .25s var(--ease); }
.participa-det[open] summary .ic { transform: rotate(45deg); }
.participa { padding: 4px 0 16px; display: grid; gap: 2px; }
.participa a { color: var(--gaps-carbon); text-decoration: none; font-size: .95rem; }
.participa a:hover { color: var(--gaps-violeta-oscuro); text-decoration: underline; }
.participa .num { margin-right: 8px; }
.esp-panel__srv .srv:first-child { border-top: 2px solid var(--gaps-carbon); }

.e404 { position: relative; min-height: 80svh; padding: calc(var(--nav-h) + 96px) 0 200px; overflow: hidden; }
.e404 h1 { font-size: clamp(2.6rem, 1rem + 5vw, 5.4rem); line-height: 1; margin: 18px 0 24px; max-width: 12em; }
.e404 p { max-width: 50ch; font-size: 1.1rem; }
.e404 .btn { margin-top: 32px; }

/* ---------- Movimiento (solo con JS y sin "reducir movimiento") ---------- */
@keyframes subir { from { opacity: 0; transform: translateY(.55em); } to { opacity: 1; transform: none; } }
@keyframes trazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.mv .hero__t .w { animation: subir .9s var(--ease) both; }
.mv .hero__t .w:nth-child(2) { animation-delay: .04s; } .mv .hero__t .w:nth-child(3) { animation-delay: .08s; } .mv .hero__t .w:nth-child(4) { animation-delay: .12s; }
.mv .hero__t .w:nth-child(5) { animation-delay: .16s; } .mv .hero__t .w:nth-child(6) { animation-delay: .2s; } .mv .hero__t .w:nth-child(7) { animation-delay: .24s; }
.mv .hero__t .w:nth-child(8) { animation-delay: .28s; } .mv .hero__t .w:nth-child(9) { animation-delay: .32s; } .mv .hero__t .w:nth-child(10) { animation-delay: .36s; }
.mv .hero__t .w:nth-child(11) { animation-delay: .4s; } .mv .hero__t .w:nth-child(12) { animation-delay: .44s; } .mv .hero__t .w:nth-child(n+13) { animation-delay: .48s; }
.mv .hero__rot, .mv .hero__pie { animation: aparecer 1s .5s both; }
.mv .ter-corredor { stroke-dasharray: 1; animation: trazar 2.6s .3s var(--ease) both; }
.mv .ter-nodo { animation: aparecer .6s 1.6s both; }
.mv .hero__diagonal { animation: aparecer 1.2s .2s both; }

.mv [data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.mv [data-rv].in { opacity: 1; transform: none; }
.mv .celda:nth-child(even)[data-rv] { transform: translateY(calc(50% - 60px)); }
.mv .celda:nth-child(even)[data-rv].in { transform: translateY(50%); }
.mv .celda:nth-child(2) { transition-delay: .08s; } .mv .celda:nth-child(3) { transition-delay: .16s; } .mv .celda:nth-child(4) { transition-delay: .24s; }
.mv .medidor__fill { transform: scaleX(.04); transition: transform 1.2s .35s var(--ease); }
.mv .in .medidor__fill, .mv .medidor.in .medidor__fill { transform: none; }
/* Filas de la matriz: el filete se dibuja desde la izquierda */
.mv .mz tbody tr[data-rv] { transform: none; }
.mv .mz tbody tr[data-rv] > * { border-top-color: transparent; background: linear-gradient(var(--gaps-filete), var(--gaps-filete)) 0 0 / 0 1px no-repeat; transition: background-size .9s var(--ease); }
.mv .mz tbody tr[data-rv].in > * { background-size: 100% 1px; }
.mv .mz tbody tr[data-rv].in > *:nth-child(2) { transition-delay: .05s; } .mv .mz tbody tr[data-rv].in > *:nth-child(3) { transition-delay: .1s; }
.mv .mz tbody tr[data-rv].in > *:nth-child(4) { transition-delay: .15s; } .mv .mz tbody tr[data-rv].in > *:nth-child(5) { transition-delay: .2s; }
.mv .mz tbody tr[data-rv]:hover > * { background-color: var(--gaps-papel); }
.mv .punto { transform: scale(0); transition: transform .5s .25s var(--ease); }
.mv .in .punto { transform: none; }
/* Paneles: las piezas violeta se abren desde un bloque chico y la lámina se dibuja */
.mv .panel__fig[data-rv] { transform: none; opacity: 1; }
.mv .panel__fig .pz { transition: transform 1.1s var(--ease), opacity .6s; }
.mv .panel__fig:not(.in) .pz { opacity: 0; transform: scale(.12); }
.mv .panel--infraestructura .panel__fig:not(.in) .pz1, .mv .panel--infraestructura .panel__fig:not(.in) .pz2 { transform: skewY(-12deg) scaleX(.06); }
.mv .panel__fig .pz2 { transition-delay: .12s; } .mv .panel__fig .pz3 { transition-delay: .24s; }
.mv .panel__lamina { transition: opacity .6s .1s; }
.mv .panel__fig:not(.in) .panel__lamina { opacity: 0; }
.mv .panel__t { transition: transform 1s var(--ease), opacity .8s; }
.mv .panel:not(.in) .panel__t { opacity: 0; transform: translateX(-6%); }
.mv [data-rv] .il path[pathLength]:not([stroke-dasharray]) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mv .in .il path[pathLength]:not([stroke-dasharray]) { animation: trazar 1.8s .35s var(--ease) both; }
.mv [data-rv] .il-f, .mv [data-rv] .il-x, .mv [data-rv] .il-nodo, .mv [data-rv] .il-durmientes, .mv [data-rv] .il path[stroke-dasharray] { opacity: 0; transition: opacity .8s 1.1s; }
.mv .in .il-f, .mv .in .il-x, .mv .in .il-nodo, .mv .in .il-durmientes, .mv .in .il path[stroke-dasharray] { opacity: 1; }
/* Texto que se entinta */
.mv [data-tinta] .w { color: #CFCBC2; transition: color .35s; }
.mv [data-tinta] .w.on { color: var(--gaps-carbon); }
.mv .srv[data-rv] { transform: translateY(18px); }
.mv .srv[data-rv].in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Pantallas medianas ---------- */
@media (min-width: 901px) and (min-height: 680px) {
  .panel { position: sticky; top: calc(var(--nav-h) + var(--idx-h)); }
  .panel:not(:last-child) { margin-bottom: 40vh; }
  .nav.is-oculta ~ main .panel { top: var(--idx-h); }
}
@media (max-width: 1100px) {
  .pie__in { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  .cab2 { grid-template-columns: 1fr; }
  .panel__in { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; padding-block: 48px 56px; gap: 20px 32px; }
  .panel__fig { grid-column: 1 / -1; grid-row: auto; max-width: 560px; width: 92%; justify-self: center; margin: 28px 0; }
  .panel__intro, .panel__act { grid-column: auto; grid-row: auto; align-self: start; }
  .panel::after { display: none; }
  .esp__grid, .contacto__grid, .grid-4-8, .esp-pag { grid-template-columns: 1fr; }
  .esp__intro, .sector__lado { position: static; }
  .esp-idx { position: static; padding-top: 0; }
}
/* ---------- Teléfonos ---------- */
@media (max-width: 760px) {
  .hero__in { padding-bottom: 120px; gap: 28px; }
  .hero__t { font-size: clamp(2.35rem, 1.3rem + 5.4vw, 3.4rem); align-self: start; margin-top: 4vh; }
  .hero__bajada { order: 1; }
  .hero__btns { order: 2; }
  .hero__btns .btn { flex: 1 1 auto; }
  .respaldo ul { grid-template-columns: 1fr; }
  .panel__in { grid-template-columns: 1fr; }
  .panel__fig { width: 86%; }
  .escalera { grid-template-columns: 1fr; padding-bottom: 0; }
  .celda, .mv .celda:nth-child(even)[data-rv], .mv .celda:nth-child(even)[data-rv].in { transform: none; }
  .celda { min-height: 0; }
  .mv .celda:nth-child(even)[data-rv]:not(.in) { transform: translateX(-40px); }
  /* Matriz: etiquetas debajo de cada servicio */
  .mz thead { display: none; }
  .mz, .mz tbody, .mz tr, .mz th { display: block; width: 100%; }
  .mz td { display: none; }
  .mz .mz__sector th { padding-top: 32px; }
  .mz tbody tr:not(.mz__sector) > th { padding: 16px 0 18px; }
  .mz .tags { display: flex; margin-top: 12px; }
  .mz .tags a { font-size: .8rem; padding: 4px 10px; }
  .srv { grid-template-columns: 1fr; gap: 20px; }
  .srv__ent.is-cerrado .entregables { display: none; }
  .ent-btn { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--gaps-carbon); font: 600 .95rem var(--font-rational); color: var(--gaps-carbon); cursor: pointer; }
  .form__campos { grid-template-columns: 1fr; }
  .campo { grid-column: 1 / -1; }
  .canales li { grid-template-columns: 28px 1fr; }
  .canales li .rotulo { grid-column: 2; }
  .canales li a { grid-column: 2; }
  .canales li .canal__ico { grid-row: 1 / span 2; }
  .proy { grid-template-columns: 1fr; gap: 6px; }
  .pie__in { grid-template-columns: 1fr; }
  .pie__legal { flex-direction: column; align-items: flex-start; }
  .pag-cab__t { font-size: clamp(2.3rem, 1.3rem + 5vw, 3.4rem); }
  .wa { width: 52px; height: 52px; }
}