/* Web de Conga Capital · Real Estate · Investment & Asset Management · v3 «Dossier vivo», versión clara
   Se lee como el dossier ejecutivo de un inversor: rejilla suiza, titulares grandes, esquinas rectas, mucho blanco.
   Todo va sobre crema y blanco con texto azul marino; el bronce es la luz de los datos. El método es un plano claro.
   Estructura: 1 tokens · 2 base · 3 componentes · 4 secciones en estático · 5 escenas (.mov) · 6 puntos de corte · 7 movimiento.
   La base es la versión estática y completa (sin JavaScript o con movimiento reducido); las escenas cuelgan de .mov,
   que app.js pone en <html>, y de las mismas media queries que construir.py escribe en data-media. */

@font-face { font-family: 'Geist'; src: url(fuentes/geist.woff2) format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(fuentes/geist-mono.woff2) format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }

/* ===================== 1. Tokens ===================== */
:root {
  color-scheme: light;
  --marino: #172A3A;
  --marino-2: #22394D;
  --crema: #FAF9F6;
  --crema-2: #F2EFE9;
  --blanco: #FFFFFF;
  --gris: #5F666B;
  --bronce: #B39A72;        /* trazos y filetes; nunca texto */
  --bronce-t: #7F6844;      /* bronce en texto pequeño (contraste AA sobre crema y blanco) */
  --bronce-d: #9A7B4F;      /* trazos de datos del dibujo */
  --linea-c: #E2DDD3;
  --verde: rgba(80, 120, 70, .55);
  --tinta: #34424D;         /* texto secundario sobre imagen con velo (más margen de contraste que el gris) */
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ancho: 1280px;
  --margen: clamp(20px, 5vw, 72px);
  --hueco: clamp(16px, 2.2vw, 32px);
  --sec: clamp(72px, 8vw, 112px);
  --cab: 72px;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --fondo: var(--crema); --fg: var(--marino); --fg2: var(--gris); --fg3: var(--gris); --linea: var(--linea-c); --filete: var(--bronce);
}
[data-tema="claro"] { --fondo: var(--crema); --fg: var(--marino); --fg2: var(--gris); --fg3: var(--gris); --linea: var(--linea-c); --filete: var(--bronce); }

/* ===================== 2. Base ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 12px); scrollbar-gutter: stable; background: var(--crema); }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0; background: var(--crema); color: var(--gris);
  font-family: var(--sans); font-size: clamp(16px, 1vw, 17px); line-height: 1.6; font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip; overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--sans); font-weight: 500; color: var(--marino); text-wrap: balance; }
h2 { font-size: clamp(34px, 4.8vw, 72px); line-height: 1; letter-spacing: -.04em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--bronce-t); outline-offset: 3px; }
::selection { background: #E9DCC4; color: var(--marino); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.foco { object-position: var(--foco, 50% 50%); }

/* ===================== 3. Componentes ===================== */
.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.saltar { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--marino); color: var(--crema); font-weight: 600; text-decoration: none; }
.saltar:focus { top: 12px; }
.saltar--escena:focus { position: fixed; top: calc(var(--cab) + 12px); }

.etiqueta { display: flex; align-items: center; gap: 10px; font: 500 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.etiqueta::before { content: ''; flex: none; width: 24px; height: 1px; background: var(--bronce); }
.entradilla { margin-top: 24px; max-width: 34em; font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.55; color: var(--gris); }
.nota { font-size: 13px; line-height: 1.5; color: var(--gris); }

.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: 2px; background: transparent;
  font: 500 14.5px/1.2 var(--sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .45s var(--curva), color .45s var(--curva), border-color .45s var(--curva);
}
.boton .flecha { flex: none; transition: transform .45s var(--curva); }
.boton:hover .flecha { transform: translateX(4px); }
.boton--oscuro { background: var(--marino); color: var(--crema); }
.boton--oscuro:hover { background: var(--marino-2); }
.boton--sec { background: transparent; border-color: rgba(23, 42, 58, .35); color: var(--marino); }
.boton--sec:hover { border-color: var(--marino); }
.boton--mini { min-height: 36px; padding: 0 14px; font-size: 13px; }

.enlace { display: inline-flex; align-items: center; gap: 8px; color: var(--marino); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Leyenda de cada imagen (obligatoria: render, IA o fotografía) */
.leyenda {
  position: absolute; top: 14px; left: 14px; z-index: 3; max-width: calc(100% - 28px);
  padding: 5px 8px; border-radius: 2px; background: rgba(250, 249, 246, .92);
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marino);
}
.contador { position: absolute; top: 14px; right: 14px; z-index: 3; padding: 5px 8px; border-radius: 2px; background: rgba(250, 249, 246, .92); font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; color: var(--marino); font-variant-numeric: tabular-nums; }
.marco { position: relative; display: block; }

.estado { display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px; border: 1px solid rgba(23, 42, 58, .3); border-radius: 2px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--marino); white-space: nowrap; }
.estado::before { content: ''; flex: none; width: 5px; height: 5px; background: var(--bronce); }

.ver { display: inline-flex; align-items: center; gap: 6px; font: 500 14.5px/1.2 var(--sans); color: var(--marino); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.ver__flecha { display: inline-block; transition: transform .45s var(--curva); }

.punto-vivo { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bronce); }
.logo { display: block; width: auto; height: 46px; }

/* ===================== 4. Secciones (estático y completo) ===================== */

/* ---------- Cabecera ---------- */
.cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--cab); color: var(--marino); background: rgba(250, 249, 246, .96); border-bottom: 1px solid var(--linea-c); transition: background-color .45s var(--curva), border-color .45s var(--curva); }
.js .cabecera { background: transparent; border-bottom-color: transparent; }
.js .cabecera::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: -24px; background: linear-gradient(180deg, rgba(250, 249, 246, .78), rgba(250, 249, 246, 0)); pointer-events: none; transition: opacity .45s var(--curva); }
.js .cabecera.desplazada { background: rgba(250, 249, 246, .92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--linea-c); }
.js .cabecera.desplazada::before { opacity: 0; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .js .cabecera.desplazada { background: rgba(250, 249, 246, .97); } }
.cabecera__fila { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marca { display: inline-flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(20px, 2.2vw, 34px); }
.nav a { position: relative; display: inline-block; padding: 10px 0; font: 500 14px/1 var(--sans); color: var(--marino); opacity: .82; text-decoration: none; transition: opacity .3s var(--curva); }
.nav a:hover, .nav a[aria-current="true"] { opacity: 1; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--bronce); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--curva); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.cabecera__acciones { display: flex; align-items: center; gap: 8px; }
.boton--cab { min-height: 40px; padding: 0 18px; font-size: 14px; background: var(--marino); color: var(--crema); }
.boton--cab:hover { background: var(--marino-2); }
.menu-boton { display: none; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--marino); cursor: pointer; }
.cabecera__progreso { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--bronce); transform-origin: left center; transform: scaleX(0); display: none; }
.js .cabecera__progreso { display: block; }

.menu-movil { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--crema); color: var(--marino); }
.menu-movil[open] { display: flex; flex-direction: column; animation: fundido .35s var(--curva); }
.menu-movil::backdrop { background: var(--crema); }
.menu-movil__cabecera { display: flex; align-items: center; justify-content: space-between; height: var(--cab); flex: none; }
.menu-movil__cerrar { display: grid; place-items: center; width: 46px; height: 46px; margin-right: -10px; border: 0; background: none; color: var(--marino); cursor: pointer; }
.menu-movil__nav { flex: 1; display: flex; align-items: center; }
.menu-movil__nav ul { width: 100%; }
.menu-movil__nav li { border-top: 1px solid var(--linea-c); }
.menu-movil__nav li:last-child { border-bottom: 1px solid var(--linea-c); }
.menu-movil__nav a { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; font: 500 32px/1.1 var(--sans); letter-spacing: -.03em; color: var(--marino); text-decoration: none; }
.menu-movil__nav a small { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--bronce-t); }
.menu-movil__pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: max(28px, env(safe-area-inset-bottom)); flex: none; }

/* ---------- Portada ---------- */
.apertura { position: relative; }
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 640px; min-height: max(640px, 100vh); min-height: max(640px, 100svh); background: var(--crema); color: var(--marino); overflow: clip; --p: 0; }
.hero__figura { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--c, var(--crema-2)); overflow: hidden; }
.hero__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero__velo { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 249, 246, .97) 0%, rgba(250, 249, 246, .93) 36%, rgba(250, 249, 246, .6) 58%, rgba(250, 249, 246, 0) 80%),
              linear-gradient(180deg, rgba(250, 249, 246, .55) 0%, rgba(250, 249, 246, 0) 16%), linear-gradient(0deg, rgba(250, 249, 246, .45) 0%, rgba(250, 249, 246, 0) 22%); }
.hero__cuerpo { position: relative; z-index: 2; }
.hero__contenido { padding-top: calc(var(--cab) + 64px); padding-bottom: clamp(72px, 11vh, 120px); }
.hero__contenido > * { max-width: 760px; }
.hero__eyebrow { display: flex; align-items: center; gap: 12px; font: 500 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); }
.hero__titulo { margin-top: 24px; max-width: 12em !important; font-size: clamp(48px, 6.4vw, 96px); line-height: .96; letter-spacing: -.048em; color: var(--marino); }
.hero__sub { margin-top: 28px; max-width: 34em !important; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--tinta); }
.hero__leyenda { position: absolute; z-index: 3; right: var(--margen); bottom: 26px; padding: 5px 8px; border-radius: 2px; background: rgba(250, 249, 246, .92); font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marino); }
.hero__ley-corta { display: none; }

/* ---------- Cifra +500 ---------- */
.cifra { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 72vh; min-height: 72svh; padding: 64px var(--margen); background: var(--crema); color: var(--marino); text-align: center; }
.cifra__valor { padding-inline: .08em; font: 300 clamp(96px, calc(25vw + 16px), 320px)/.8 var(--sans); letter-spacing: -.06em; color: #172A3A; font-variant-numeric: tabular-nums; }
.cifra__texto { display: flex; align-items: center; gap: 18px; margin-top: 28px; font: 500 12.5px/1.4 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--marino); }
.cifra .filete { flex: none; width: 64px; height: 1px; background: var(--bronce); }

/* ---------- Servicios ---------- */
.servicios { padding-block: var(--sec); background: var(--crema); }
.servicios__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); grid-template-rows: auto 1fr; }
.servicios__cabecera { grid-column: 6 / -1; grid-row: 1; padding-left: clamp(24px, 3vw, 48px); }
.servicios__cabecera h2 { margin-top: 22px; }
.servicios__figura { grid-column: 1 / 6; grid-row: 1 / span 2; min-height: 640px; overflow: hidden; background: var(--c, var(--crema-2)); }
.servicios__img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none; object-fit: cover; }
.servicios__lista { grid-column: 6 / -1; grid-row: 2; align-self: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; margin-top: 56px; padding-left: clamp(24px, 3vw, 48px); }
.servicio { position: relative; padding-top: 22px; border-top: 1px solid var(--linea-c); }
.servicio::before { content: ''; position: absolute; top: -1px; left: 0; width: 56px; height: 1px; background: var(--marino); transform-origin: left center; }
.servicio__num { display: block; font: 300 clamp(40px, 3.4vw, 52px)/1 var(--sans); letter-spacing: -.04em; color: var(--marino); font-variant-numeric: tabular-nums; }
.servicio__titulo { margin-top: 18px; font-size: clamp(21px, 1.6vw, 24px); line-height: 1.15; letter-spacing: -.02em; }
.servicio__texto { margin-top: 10px; max-width: 30em; font-size: 15.5px; line-height: 1.6; color: var(--gris); }

/* ---------- Proyectos ---------- */
.proyectos { padding-top: var(--sec); padding-bottom: var(--sec); background: var(--blanco); }
.proyectos__cabecera { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.proyectos__cabecera > div { grid-column: 1 / 8; }
.proyectos__cabecera h2 { margin-top: 22px; }
.proyectos__cabecera .entradilla { grid-column: 8 / -1; margin-top: 0; }
.indice { display: none; }
.tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 48px); }
.tarjeta { position: relative; background: var(--blanco); }
.tarjeta__marco { aspect-ratio: 4 / 3; overflow: hidden; background: var(--crema-2); }
.tarjeta__marco > .foto, .tarjeta__marco > .diptico { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.foto { position: relative; background: var(--c, var(--crema-2)); overflow: hidden; }
.foto img, .diptico__pieza img, .foto video, .diptico__pieza video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.diptico { display: grid; grid-template-columns: 2fr 3fr; gap: 4px; }
.diptico__pieza { position: relative; overflow: hidden; background: var(--c, var(--crema-2)); }
.diptico__pieza--hoy .leyenda { max-width: calc(100% - 24px); }
.diptico__pieza:last-child .leyenda { max-width: calc(100% - 104px); }
.tarjeta__texto { padding-top: 20px; }
.tarjeta__lugar { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.tarjeta__nombre { margin-top: 10px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.03em; }
.tarjeta__abrir { color: inherit; text-decoration: none; }
.tarjeta__abrir::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 4; }
.tarjeta__abrir:focus-visible { outline: none; }
.tarjeta:has(.tarjeta__abrir:focus-visible) .tarjeta__marco { outline: 2px solid var(--bronce-t); outline-offset: 4px; }
.tarjeta__dato { margin-top: 8px; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--marino); }
.tarjeta__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }
.tarjeta__resumen { margin-top: 12px; max-width: 34em; font-size: 15px; line-height: 1.55; color: var(--gris); }
.tarjeta:hover .ver__flecha { transform: translate(2px, -2px); }
.tarjetas-caja > .nota { margin-top: clamp(40px, 5vw, 64px); padding-top: 18px; border-top: 1px solid var(--linea-c); max-width: 820px; }

/* ---------- Modal de proyecto ---------- */
.modal { width: min(1240px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--linea-c); border-radius: 2px; background: var(--blanco); color: var(--gris); overflow: hidden; }
.modal::backdrop { background: rgba(23, 42, 58, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal[open] { animation: modal-entra .45s var(--curva); }
.modal[open]::backdrop { animation: fundido .45s var(--curva); }
html:not(.js) .modal:target { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 90; width: 100%; max-height: none; height: 100%; margin: 0; overflow-y: auto; border: 0; border-radius: 0; }
.modal__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); max-height: calc(100dvh - 48px); }
.modal__cerrar { position: absolute; top: 16px; right: 16px; z-index: 5; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--linea-c); border-radius: 2px; background: var(--blanco); color: var(--marino); cursor: pointer; }
.galeria { position: relative; min-height: 0; background: var(--crema-2); }
.galeria__pista { display: flex; height: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__pista:focus-visible { outline-offset: -4px; }
.galeria__item { position: relative; flex: 0 0 100%; min-height: min(68dvh, 720px); scroll-snap-align: start; background: var(--c, var(--crema-2)); }
.galeria__item img, .galeria__item video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.galeria__item--vertical video { object-fit: contain; }
.video__boton { position: absolute; left: 14px; bottom: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--linea-c); border-radius: 2px; background: rgba(255, 255, 255, .94); color: var(--marino); font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.video__boton:hover { background: var(--blanco); }
.video__boton:focus-visible { outline: 2px solid var(--marino); outline-offset: 2px; box-shadow: 0 0 0 5px var(--blanco); }
.video__icono { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.video__boton--parado .video__icono { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.galeria__item .video__boton { left: 20px; bottom: 72px; }
.galeria__flecha { position: absolute; bottom: 20px; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--linea-c); border-radius: 2px; background: rgba(255, 255, 255, .94); color: var(--marino); cursor: pointer; transition: background-color .3s var(--curva); }
.galeria__flecha:hover { background: var(--blanco); }
.galeria__flecha--ant { right: 76px; }
.galeria__flecha--sig { right: 20px; }
.galeria__contador { position: absolute; left: 20px; bottom: 30px; z-index: 3; padding: 5px 8px; border-radius: 2px; background: rgba(250, 249, 246, .92); font: 500 12px/1 var(--mono); letter-spacing: .12em; color: var(--marino); font-variant-numeric: tabular-nums; }
.modal__info { padding: clamp(32px, 4vw, 56px); padding-top: clamp(48px, 5vw, 72px); overflow-y: auto; }
.modal__lugar { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bronce-t); }
.modal__titulo { margin-top: 14px; font-size: clamp(30px, 3vw, 44px); line-height: 1.04; letter-spacing: -.035em; color: var(--marino); }
.modal__tipo { margin-top: 12px; font-size: 15px; font-weight: 500; color: var(--marino); }
.modal .estado { margin-top: 16px; }
.modal__desc { margin-top: 22px; font-size: 16.5px; line-height: 1.65; }
.magnitudes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 28px 0 0; }
.magnitudes div { padding: 16px 0; border-top: 1px solid var(--linea-c); }
.magnitudes dt { font: 500 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.magnitudes dd { margin: 8px 0 0; font: 300 clamp(26px, 2.2vw, 32px)/1.05 var(--sans); letter-spacing: -.03em; color: var(--marino); font-variant-numeric: tabular-nums; }
.magnitudes dd.magnitudes__texto { font-size: clamp(17px, 1.3vw, 20px); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; }
.modal__nota { margin-top: 26px; font-size: 13px; line-height: 1.55; color: var(--gris); }

/* ---------- Presencia (mapa; solo si datos.json → mapa.publicar) ---------- */
.presencia { padding-block: var(--sec); background: var(--crema); --p: 1; }
.presencia__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: stretch; }
.presencia__texto { grid-column: 1 / 6; }
.presencia h2 { margin-top: 22px; }
.mapa__lista { display: grid; gap: 14px; margin-top: 40px; }
.mapa__lista li { font-size: 15px; line-height: 1.55; color: var(--gris); }
.mapa__prov { display: inline-block; margin-right: 6px; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bronce-t); }
.municipio { cursor: default; transition: color .3s var(--curva); }
.municipio.activo { color: var(--marino); }
.mapa__fuente { margin-top: 32px; font: 500 10.5px/1.5 var(--mono); letter-spacing: .04em; color: var(--gris); }
.mapa { grid-column: 6 / -1; display: flex; flex-direction: column; gap: 14px; min-height: 560px; }
.mapa__lienzo { position: relative; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: end; }
.mapa__espana, .mapa__detalle { display: block; width: 100%; height: auto; overflow: visible; }
.mapa__detalle { max-height: 560px; overflow: hidden; border: 1px solid var(--linea-c); background: var(--blanco); }
.mapa__leyenda { position: static; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; padding: 0; background: none; color: var(--gris); max-width: none; }
.mapa-puntos { fill: none; stroke: rgba(23, 42, 58, .18); stroke-width: 3.4; stroke-linecap: round; }
.mapa-contorno { fill: rgba(23, 42, 58, .02); stroke: rgba(23, 42, 58, .14); stroke-width: 1; }
.mapa-costa { fill: none; stroke: rgba(23, 42, 58, .3); stroke-width: 1.4; stroke-linejoin: round; }
.mapa-recuadro { fill: none; stroke: rgba(23, 42, 58, .14); stroke-dasharray: 3 4; }
.mapa-caja { fill: rgba(179, 154, 114, .06); stroke: var(--bronce-d); stroke-width: 1.2; stroke-dasharray: 4 4; }
.pin-halo { fill: rgba(179, 154, 114, .22); }
.pin-nucleo { fill: var(--bronce-d); stroke: var(--blanco); stroke-width: 1.5; }
.pin.activo .pin-nucleo { fill: var(--marino); }
.mapa-rotulo { font: 500 24px var(--mono); letter-spacing: .04em; fill: var(--marino); paint-order: stroke; stroke: var(--blanco); stroke-width: 6px; stroke-linejoin: round; }

/* ---------- Método (estático: dibujo terminado, pilares y los dos modelos) ---------- */
.metodo { position: relative; background: var(--crema); --p: 1; --e: 1; }
.metodo__escena { position: relative; padding-block: var(--sec); }
.metodo__escena::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
  background-image: linear-gradient(rgba(23, 42, 58, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 42, 58, .05) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(80% 70% at 60% 50%, #000, transparent); mask-image: radial-gradient(80% 70% at 60% 50%, #000, transparent); }
.metodo__portada { position: relative; z-index: 1; }
.metodo__titulo { margin-top: 22px; }
.metodo__ayuda, .metodo__hud, .pestanas, .metodo__lema, .metodo__chips, .carril { display: none; }
.metodo__rejilla { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 48px; }
.metodo__dibujo { order: -1; position: relative; min-width: 0; pointer-events: none; }
.metodo__camara { position: relative; max-width: 820px; margin-inline: auto; }
.dibujo { display: block; width: 100%; height: auto; }
.dibujo--movil { display: none; }
.metodo[data-modo="flip"] .solo-obra, .metodo[data-modo="obra"] .solo-flip { display: none; }
.metodo__ocaso { display: none; }
.metodo__rotulos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; max-width: 820px; margin: 32px auto 0; }
.rotulo__caja { padding: 14px 16px; border: 1px solid rgba(127, 104, 68, .4); border-radius: 2px; background: rgba(255, 255, 255, .94); }
.rotulo__titulo { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bronce-t); }
.rotulo__texto { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--gris); }
.tarjeta-hud { display: none; }
.metodo__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--hueco); }
.metodo__pasos { display: contents; }
.modo__titulo { padding-bottom: 14px; border-bottom: 1px solid var(--linea-c); font: 500 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bronce-t); }
.pasos { display: grid; gap: 20px; margin-top: 20px; }
.paso__num { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bronce-t); }
.paso__titulo { margin-top: 6px; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.15; letter-spacing: -.02em; color: var(--marino); }
.paso__texto { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--gris); }

/* Trazos del dibujo: plano claro */
.dibujo .suelo { stroke: rgba(23, 42, 58, .35); stroke-width: 1.5; }
.dibujo .l { fill: none; stroke: rgba(23, 42, 58, .85); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dibujo .fina { stroke-width: 1; stroke: rgba(23, 42, 58, .5); }
.dibujo .ladrillo { fill: none; stroke: rgba(127, 104, 68, .35); stroke-width: 1; }
.dibujo .grieta { stroke: var(--bronce-d); }
.dibujo .hierba { stroke: var(--verde); }
.dibujo .punteada { stroke-dasharray: 6 6; }
.dibujo .rejilla-datos { fill: none; stroke: rgba(127, 104, 68, .22); stroke-width: 1; }
.dibujo .dato-trazo { fill: none; stroke: var(--bronce-d); stroke-width: 1.2; }
.dibujo .dato-linea { fill: none; stroke: #8C6D3F; stroke-width: 2.2; }
.dibujo .nodo { fill: #8C6D3F; }
.dibujo .nodo-halo { fill: rgba(179, 154, 114, .28); }
.dibujo .escaneo { fill: var(--bronce); }
.dibujo .escaneo-halo { fill: rgba(179, 154, 114, .16); }
.dibujo .andamio { fill: none; stroke: rgba(127, 104, 68, .45); stroke-width: 1; }
.dibujo .fachada { fill: rgba(23, 42, 58, .045); }
.dibujo .carpinteria { stroke: rgba(23, 42, 58, .75); }
.dibujo .luz { fill: #E8C987; }
.dibujo .copa { fill: rgba(80, 120, 70, .12); stroke: var(--verde); stroke-width: 1; }
.dibujo .cinta { fill: none; stroke: var(--bronce-d); stroke-width: 1.5; }
.dibujo .cartel-fondo { fill: #D6BC8C; }
.dibujo .cartel-agujero { fill: var(--crema); }
.dibujo .cartel-texto { font: 600 18px var(--mono); fill: var(--marino); letter-spacing: .16em; }
.dibujo .mira { fill: none; stroke: var(--bronce-d); stroke-width: 1.4; }
/* Animación del dibujo: cada elemento lleva su ventana --a/--b dentro del progreso --d de la sección */
.e { --t: 1; }
.e-traza { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t)); }
.e-aparece { opacity: var(--t); }
.e-desaparece { opacity: calc(1 - var(--t)); }
.e-sube { opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 26px)); }
.e-escanea { transform: translateX(calc(var(--t) * var(--dx, 480px))); }
.e-enciende { opacity: calc(var(--t) * .62); }
.e-crece { transform: scaleY(var(--t)); transform-box: fill-box; transform-origin: 50% 100%; }
/* Sin movimiento, los rótulos y los chips se leen siempre (sus ventanas solo cuentan con la escena activa) */
.metodo__rotulos .e-aparece, .metodo__rotulos .e-desaparece, .metodo__chips .e-aparece, .metodo__chips .e-desaparece { opacity: 1; }

/* ---------- Equipo ---------- */
.sobre { padding-block: var(--sec); background: var(--blanco); }
.sobre__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: start; }
.sobre__cabecera { grid-column: 1 / 6; }
.sobre h2 { margin-top: 22px; }
.credencial { display: flex; align-items: center; gap: 18px; margin-top: 40px; }
.credencial__icono { flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--crema); box-shadow: 0 0 0 1px var(--linea-c); }
.credencial__svg { width: 44px; height: auto; }
.credencial__nombre { font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--marino); }
.credencial__lugar { margin-top: 4px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.credencial .enlace { margin-top: 10px; font-size: 14.5px; }
.sobre__texto { grid-column: 7 / -1; padding-top: 8px; }
/* balance y no pretty: con pretty, WebKit (Safari) cierra la pestaña a partir de ~1425 px de ancho */
.sobre__cita { max-width: 22em; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.3; letter-spacing: -.02em; color: var(--marino); text-wrap: balance; }
.sobre__cita::before { content: '«'; }
.sobre__cita::after { content: '»'; }
.sobre__p2 { margin-top: 28px; max-width: 34em; font-size: 17.5px; line-height: 1.65; color: var(--gris); }

/* ---------- Preguntas frecuentes ---------- */
.faq { padding-block: calc(var(--sec) * .6) var(--sec); background: var(--blanco); border-top: 1px solid var(--linea-c); }
.faq__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: start; }
.faq__titulo { grid-column: 1 / 6; }
.faq__lista { grid-column: 7 / -1; border-top: 1px solid var(--linea-c); }
.faq__item { border-bottom: 1px solid var(--linea-c); }
.faq__pregunta { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 17.5px; font-weight: 500; color: var(--marino); }
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after { content: '+'; flex: none; font: 300 22px/1 var(--sans); color: var(--bronce-t); }
.faq__item[open] .faq__pregunta::after { content: '−'; }
.faq__respuesta { max-width: 38em; padding: 0 0 18px; font-size: 16.5px; line-height: 1.6; color: var(--gris); }
.faq__respuesta a { color: var(--marino); }

/* ---------- Contacto ---------- */
.contacto { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; min-height: 680px; min-height: max(680px, 100vh); min-height: max(680px, 100svh); padding-block: calc(var(--cab) + 48px) 72px; background: var(--crema); overflow: clip; }
.contacto__figura { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--c, var(--crema-2)); overflow: hidden; }
.contacto__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.contacto__figura .leyenda { top: auto; left: auto; right: var(--margen); bottom: 24px; }
.contacto__velo { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: linear-gradient(90deg, rgba(250, 249, 246, .97) 0%, rgba(250, 249, 246, .92) 42%, rgba(250, 249, 246, .55) 70%, rgba(250, 249, 246, .2) 100%); }
.contacto__rejilla { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center; }
.contacto__intro { grid-column: 1 / 7; }
.contacto h2 { margin-top: 22px; color: var(--marino); }
.contacto__texto { margin-top: 24px; max-width: 30em; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--tinta); }
.contacto__correo { margin-top: 22px; font-size: 15px; color: var(--tinta); }
.contacto__correo a { color: var(--marino); white-space: nowrap; text-underline-offset: 4px; }
.contacto__abrir { margin-top: 24px; }
.formulario { grid-column: 8 / -1; padding: 32px; border: 1px solid var(--linea-c); border-radius: 2px; background: rgba(255, 255, 255, .95); box-shadow: 0 24px 60px -36px rgba(23, 42, 58, .35); }
.formulario.plegado { display: none; }
.formulario__titulo { font: 500 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--marino); }
.formulario__fila { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0 20px; align-items: end; }
.campo { margin-top: 22px; }
.campo label { display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.campo__opcional { letter-spacing: .04em; text-transform: none; }
.campo input, .campo textarea { display: block; width: 100%; margin-top: 8px; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(23, 42, 58, .30); border-radius: 0; background: transparent; font: 400 16px/1.5 var(--sans); color: var(--marino); transition: border-color .3s var(--curva); }
.campo textarea { resize: vertical; min-height: 84px; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--bronce-t); box-shadow: 0 1px 0 0 var(--bronce-t); }
.formulario .boton { margin-top: 28px; }
.formulario__nota { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--gris); }
.formulario__nota a { color: var(--marino); }
.formulario__estado { margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--tinta); }
.formulario__estado--ok { color: #2F6B3F; }
.formulario__estado--error { color: #A12B2B; }
.formulario__estado:empty { display: none; }
.formulario[aria-busy="true"] .boton { opacity: .6; cursor: progress; }
/* campo trampa para robots: fuera de la vista y del orden de tabulación */
.campo--trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pie ---------- */
.pie { background: var(--crema-2); color: var(--gris); font-size: 13px; border-top: 1px solid var(--linea-c); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; min-height: 96px; padding-block: 24px; }
.pie__marca { display: flex; align-items: center; gap: 18px; margin-right: auto; }
.pie__logo { color: var(--marino); }
.pie__logo .logo { height: 34px; }
.pie__linea { color: var(--gris); }
.pie__nav ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie__nav a { color: var(--gris); text-decoration: none; transition: color .3s var(--curva); }
.pie__nav a:hover { color: var(--marino); }

/* ---------- Páginas legales y 404 ---------- */
.pagina-legal { background: var(--crema); }
.legal { background: var(--crema); color: var(--gris); padding: calc(var(--cab) + clamp(56px, 8vw, 104px)) 0 clamp(80px, 10vw, 140px); }
.legal__rejilla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.legal__cabecera { position: sticky; top: calc(var(--cab) + 32px); }
.legal h1 { margin-top: 18px; font-size: clamp(36px, 4vw, 54px); line-height: 1.04; letter-spacing: -.035em; color: var(--marino); }
.legal__fecha { margin-top: 16px; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--gris); }
.legal__nav ul { display: grid; gap: 8px; margin-top: 32px; }
.legal__nav a { color: var(--marino); text-decoration: none; border-bottom: 1px solid transparent; }
.legal__nav a[aria-current="page"] { border-bottom-color: var(--bronce); }
.legal__texto { max-width: 720px; font-size: 16.5px; line-height: 1.75; }
.legal__texto h2 { margin-top: 44px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; color: var(--marino); }
.legal__texto h2:first-child { margin-top: 0; }
.legal__texto p, .legal__texto ul { margin-top: 14px; }
.legal__texto ul { padding-left: 20px; list-style: disc; }
.legal__texto li + li { margin-top: 6px; }
.legal__texto a { color: var(--marino); }
.pagina-404 .error { min-height: 100dvh; display: flex; align-items: center; padding-block: 64px; background: var(--crema); }
.pagina-404 .marca { margin-bottom: 72px; }
.pagina-404 .logo { height: 48px; }
.pagina-404 h1 { margin-top: 18px; font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -.04em; color: var(--marino); }

/* ===================== 5. Escenas de scroll (.mov) ===================== */

/* Momento 1 · cortina: el +500 sube sobre la portada fija; el texto de la portada se va */
@media (min-width: 1024px) and (min-height: 640px) {
  .mov .hero { position: sticky; top: 0; z-index: 1; }
  .mov .cifra { box-shadow: 0 -40px 70px -30px rgba(23, 42, 58, .18); }
  .mov .hero__contenido { transform: translate3d(0, calc(-72px * var(--p)), 0); opacity: calc(1 - 1.6 * var(--p)); }
}

/* Servicios: paralaje interno de la imagen (±4 %) */
.mov .servicios__img { transform: translate3d(0, calc((.5 - var(--p, .5)) * 8%), 0); }

/* Momento 2 · índice de proyectos fijo (escritorio ancho) */
@media (min-width: 1180px) and (min-height: 640px) {
  .mov .indice { display: block; position: relative; height: calc(100vh + var(--n) * 46vh); height: calc(100svh + var(--n) * 46svh); --p: 0; }
  .mov .tarjetas-caja { display: none; }
  .mov .proyectos__cabecera { margin-bottom: 0; }
  .mov .proyectos { padding-bottom: 0; }
  .mov .indice__escena { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: calc(var(--cab) + 32px); padding-bottom: 40px; background: var(--blanco); overflow: clip; display: flex; }
  .mov .indice__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: center; }
  .mov .indice__columna { grid-column: 1 / 6; align-self: center; }
  .mov .indice__escenario { grid-column: 6 / -1; position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: calc(100vh - var(--cab) - 140px); max-height: calc(100svh - var(--cab) - 140px); align-self: center; }
}
.indice__filas { border-bottom: 1px solid var(--linea-c); }
.fila { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 0 16px; width: 100%; min-height: 76px; padding: 12px 0; border: 0; border-top: 1px solid var(--linea-c); background: none; color: var(--gris); text-align: left; cursor: pointer; transition: color .45s var(--curva); }
.fila::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--bronce); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--curva); }
.fila.activa { color: var(--marino); }
.fila.activa::before { transform: scaleX(1); }
.fila__num { align-self: start; padding-top: 4px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.fila.activa .fila__num { color: var(--bronce-t); }
.fila__nombre { display: grid; gap: 4px; font: 500 20px/1.2 var(--sans); letter-spacing: -.02em; }
.fila__lugar { font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.fila__cifra { display: grid; justify-items: end; gap: 4px; text-align: right; }
.fila__valor { font: 300 clamp(26px, 2.2vw, 32px)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fila__calif { max-width: 13em; font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.indice__fichas { position: relative; height: 168px; margin-top: 20px; }
.ficha { position: absolute; top: 0; left: 0; right: 0; display: grid; gap: 12px; align-content: start; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s var(--curva), transform .45s var(--curva), visibility 0s linear .45s; }
.ficha.activa { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--curva), transform .45s var(--curva), visibility 0s; }
.ficha__tipo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 15px; font-weight: 500; color: var(--marino); }
.ficha__resumen { font-size: 15.5px; line-height: 1.5; color: var(--gris); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ficha .ver { justify-self: start; margin-top: 4px; }
.indice .nota { margin-top: 8px; }
.indice__figura { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--curva), visibility 0s linear .7s; --loc: clamp(0, calc(var(--p, 0) * var(--n) - var(--k)), 1); }
.indice__figura.activa { opacity: 1; visibility: visible; transition: opacity .7s var(--curva), visibility 0s; }
.indice__marco { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
.indice__marco > .foto, .indice__marco > .diptico { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.indice__figura .foto img, .indice__figura .diptico__pieza img, .indice__figura .foto video, .indice__figura .diptico__pieza video { transform: scale(1.06) translate3d(0, calc((.5 - var(--loc)) * 3%), 0); }
.indice__marco .ver__flecha { position: absolute; right: 18px; bottom: 18px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 2px; background: var(--blanco); color: var(--marino); opacity: 0; transition: opacity .45s var(--curva); }
.indice__escenario:hover .ver__flecha { opacity: 1; }
.mov [data-activa="si"][data-cerca="si"] .indice__figura.activa img, .mov [data-activa="si"][data-cerca="si"] .indice__figura.activa video { will-change: transform; }

/* Pila de tarjetas en móvil: cada proyecto se queda fijado y el siguiente lo cubre */
@media (max-width: 760px) and (min-height: 620px) {
  .mov .tarjeta { position: sticky; top: calc(var(--cab) + 12px + var(--k) * 8px); margin-inline: calc(-1 * var(--margen)); padding-inline: var(--margen); transform-origin: 50% 0; transform: scale(calc(1 - .05 * var(--c, 0))); }
  .mov .tarjeta::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--blanco); opacity: calc(.7 * var(--c, 0)); pointer-events: none; }
  .mov .tarjeta__marco { max-height: calc(100vh - var(--cab) - 270px); max-height: calc(100svh - var(--cab) - 270px); }
  .mov .tarjeta__texto { padding-bottom: 18px; }
}

/* Zoom del mapa (solo si se publica Presencia) */
.mov .presencia, .mov .mapa {
  --enc: clamp(0, calc((var(--p) - .10) / .20), 1);
  --zoom: clamp(0, calc((var(--p) - .30) / .20), 1);
  --rot: clamp(0, calc((var(--p) - .48) / .08), 1);
}
.mov .mapa__lienzo { display: block; overflow: hidden; }
.mov .mapa__espana, .mov .mapa__detalle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: none; border: 0; background: none; }
.mov .mapa__espana { transform-origin: var(--orx, 50%) var(--ory, 50%); transform: translate(calc(-1 * var(--ox, 0px) * var(--zoom)), calc(-1 * var(--oy, 0px) * var(--zoom))) scale(calc(1 + (var(--sf, 2.6) - 1) * var(--zoom))); opacity: clamp(0, calc(1 - (var(--zoom) - .3) / .6), 1); }
.mov .mapa__detalle { transform-origin: 50% 50%; transform: translate(calc(var(--ox, 0px) * (1 - var(--zoom))), calc(var(--oy, 0px) * (1 - var(--zoom)))) scale(calc(var(--d0, .4) + (1 - var(--d0, .4)) * var(--zoom))); opacity: clamp(0, calc((var(--zoom) - .15) / .6), 1); }
.mov .mapa__detalle .mapa__rotulos { opacity: var(--rot); }
.mov .mapa__grupo, .mov .mapa__lista li { --g: clamp(0, calc(var(--enc) * 5 - var(--k)), 1); }
.mov .mapa__grupo { opacity: calc(.25 + .75 * var(--g)); }
.mov .mapa__espana .mapa__grupo { opacity: calc((.25 + .75 * var(--g)) * clamp(0, calc(1 - var(--zoom) * 4), 1)); }
.mov .mapa__lista li { opacity: calc(.45 + .55 * var(--g)); }
.mov .mapa__leyenda { position: absolute; top: 0; left: 0; display: block; padding: 5px 8px; background: rgba(250, 249, 246, .92); color: var(--marino); }
.mov .mapa__ley-espana { opacity: clamp(0, calc(1 - var(--zoom) * 2), 1); }
.mov .mapa__ley-detalle { position: absolute; left: 8px; top: 5px; white-space: nowrap; opacity: clamp(0, calc(var(--zoom) * 2 - 1), 1); }
.mov .mapa { position: relative; }

/* Momento 3 · método a pantalla completa: el edificio se construye, un paso cada vez */
@media (min-height: 560px) {
  .mov .metodo { height: 360vh; height: 360svh;
    --d: clamp(0, calc((var(--p) - .10) / .86), 1);
    --cam: clamp(0, calc((var(--d) - .02) / .16), 1);
    --ocaso: clamp(0, calc((var(--d) - .80) / .15), 1);
    --portada: clamp(0, calc((var(--p) - .04) / .06), 1);
    --ui: clamp(0, calc((var(--p) - .06) / .06), 1); }
  .mov .metodo .e { --t: clamp(0, calc((var(--d) - var(--a)) / (var(--b) - var(--a))), 1); }
  .mov .metodo__escena { position: sticky; top: 0; height: 100vh; height: 100svh; padding: var(--cab) 0 0; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .mov .metodo__portada { grid-area: 1 / 1; align-self: center; text-align: center; opacity: calc(1 - var(--portada)); transform: translate3d(0, calc(-40px * var(--portada)), 0) scale(calc(1 - .04 * var(--portada))); pointer-events: none; }
  .mov .metodo__portada .etiqueta { justify-content: center; }
  .mov .metodo__portada .entradilla { margin-inline: auto; }
  .mov .metodo__titulo { font-size: clamp(44px, 7.4vw, 120px); line-height: .98; letter-spacing: -.045em; }
  .mov .metodo__titulo .palabra { opacity: clamp(.14, calc((var(--e) - .30 - var(--w) * .10) / .12), 1); }
  .mov .metodo__ayuda { display: block; margin-top: 28px; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
  .mov .metodo__rejilla { grid-area: 1 / 1; min-height: 0; margin: 0 auto; gap: 0; opacity: var(--ui); }
  .mov .metodo__hud { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bronce-t); }
  .mov .pestanas { display: flex; border: 1px solid var(--linea-c); border-radius: 2px; background: var(--blanco); }
  .mov .pestanas button { flex: 1; display: grid; gap: 4px; justify-items: start; min-height: 52px; padding: 9px 14px; border: 0; border-radius: 1px; background: transparent; color: var(--gris); text-align: left; cursor: pointer; transition: background-color .45s var(--curva), color .45s var(--curva); }
  .mov .pestanas button span { font: 600 15px/1.1 var(--sans); color: inherit; }
  .mov .pestanas button small { font: 500 10px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
  .mov .pestanas button[aria-pressed="true"] { background: var(--marino); color: var(--crema); }
  .mov .metodo__panel { display: flex; flex-direction: column; gap: 22px; }
  .mov .metodo__pasos { display: block; position: relative; }
  .mov .modo { display: none; }
  .mov .metodo[data-modo="flip"] .modo[data-modo-texto="flip"], .mov .metodo[data-modo="obra"] .modo[data-modo-texto="obra"] { display: block; }
  .mov .modo__titulo { display: none; }
  .mov .pasos { display: grid; margin: 0; }
  .mov .paso { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 14px, 0); visibility: hidden; transition: opacity .45s var(--curva), transform .45s var(--curva), visibility 0s linear .45s; }
  .mov .paso.activo { opacity: 1; transform: none; visibility: visible; transition: opacity .45s var(--curva), transform .45s var(--curva), visibility 0s; }
  .mov .paso__titulo { margin-top: 12px; font-size: clamp(26px, 3vw, 46px); line-height: 1.05; letter-spacing: -.03em; }
  .mov .paso__texto { margin-top: 12px; max-width: 26em; font-size: clamp(15.5px, 1.2vw, 18px); }
  .mov .metodo__dibujo { order: 0; display: flex; align-items: flex-end; justify-content: center; min-height: 0; height: 100%; container-type: size; }
  .mov .metodo__camara { flex: none; width: auto; max-width: none; height: min(100cqh, 100cqw * 620 / 760); aspect-ratio: 760 / 620; margin: 0; transform: scale(calc(1.28 - .28 * var(--cam))); transform-origin: 50% 88%; }
  .mov [data-activa="si"][data-cerca="si"] .metodo__camara { will-change: transform; }
  .mov .metodo__camara .dibujo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .mov .metodo__rotulos { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; max-width: none; margin: 0; }
  .mov .metodo__rotulos .e-aparece, .mov .metodo__chips .e-aparece { opacity: var(--t); }
  .mov .metodo__rotulos .e-desaparece, .mov .metodo__chips .e-desaparece { opacity: calc(1 - var(--t)); }
  .mov .metodo .rotulo { position: absolute; left: var(--x); top: var(--y); width: max-content; max-width: min(240px, calc(33% - 20px)); transform: translate(16px, -50%); }
  .mov .metodo .rotulo--izq { transform: translate(calc(-100% - 16px), -50%); }
  .mov .rotulo__caja { padding: 8px 12px; }
  .mov .rotulo__texto { font-size: 13px; }
  .mov .tarjeta-hud { position: absolute; left: var(--x); top: var(--y); display: block; width: min(220px, 28%); }
  .mov .tarjeta-hud__caja { padding: 10px 12px 12px; border: 1px solid rgba(127, 104, 68, .4); border-radius: 2px; background: rgba(255, 255, 255, .94); }
  .mov .tarjeta-hud__titulo { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bronce-t); }
  .mov .tarjeta-hud svg { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
  .mov .tarjeta-hud svg .hud-rejilla { fill: none; stroke: rgba(127, 104, 68, .2); }
  .mov .metodo__ocaso { display: block; position: absolute; left: -20%; right: -20%; bottom: 0; height: 55%; background: radial-gradient(60% 70% at 50% 100%, rgba(214, 170, 120, .16), rgba(214, 170, 120, 0) 70%); opacity: var(--ocaso); pointer-events: none; }
  .mov .carril { display: block; position: relative; padding-top: 2px; }
  .mov .carril__linea { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--linea-c); }
  .mov .carril__relleno { position: absolute; top: -.5px; left: 0; right: 0; height: 2px; background: var(--bronce); transform: scaleX(var(--d)); transform-origin: left center; }
  .mov .carril__marcas { display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mov .metodo[data-modo="flip"] .carril__marcas[data-modo-texto="flip"], .mov .metodo[data-modo="obra"] .carril__marcas[data-modo-texto="obra"] { display: grid; }
  .mov .carril__marcas button { display: block; width: 100%; min-height: 44px; padding: 12px 8px 12px 0; border: 0; background: none; font: 500 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color .45s var(--curva); }
  .mov .carril__marcas button[aria-current="step"] { color: var(--marino); }
}
.hud-banda { fill: rgba(179, 154, 114, .16); }
.hud-curva { fill: none; stroke: #8C6D3F; stroke-width: 2; }
.hud-barra { fill: rgba(179, 154, 114, .85); }

/* Equipo: el manifiesto se enciende palabra a palabra */
.mov .sobre__cita .palabra { opacity: clamp(.3, calc(var(--p, 1) * (var(--n) + 3) - var(--i)), 1); }

/* ===================== 6. Puntos de corte ===================== */
@media (min-width: 1024px) and (min-height: 560px) {
  .mov .metodo__rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; column-gap: var(--hueco); padding-bottom: 14px; }
  .mov .metodo__panel { grid-column: 1 / 5; grid-row: 1; align-self: center; padding-bottom: 24px; }
  .mov .metodo__pasos { min-height: 210px; }
  .mov .metodo__dibujo { grid-column: 5 / -1; grid-row: 1; margin-right: calc(-1 * var(--margen)); }
  .mov .carril { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 1180px) {
  .nav ul { gap: 18px; }
}
@media (max-width: 1179px) {
  .mov .tarjeta-hud { display: none; }
}
@media (max-width: 1023px) {
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero__figura { position: relative; top: auto; left: auto; right: auto; bottom: auto; flex: 1 1 auto; min-height: 34vh; min-height: 34svh; }
  .hero__img { object-position: var(--foco-m, var(--foco, 50% 50%)); }
  .hero__figura::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: linear-gradient(180deg, rgba(250, 249, 246, .6) 0%, rgba(250, 249, 246, 0) 18%), linear-gradient(0deg, var(--crema) 0%, rgba(250, 249, 246, 0) 30%); }
  .hero__velo { display: none; }
  .hero__cuerpo { flex: none; }
  .hero__contenido { padding-top: 20px; padding-bottom: 28px; }
  .hero__leyenda { right: var(--margen); bottom: 12px; }
  .hero__ley-larga { display: none; }
  .hero__ley-corta { display: inline; }
  .servicios__rejilla { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .servicios__cabecera, .servicios__figura, .servicios__lista { grid-column: 1; grid-row: auto; padding-left: 0; }
  .servicios__figura { min-height: 0; aspect-ratio: 16 / 9; margin: 48px calc(-1 * var(--margen)) 0; }
  .servicios__lista { margin-top: 48px; }
  .proyectos__cabecera { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .proyectos__cabecera > div, .proyectos__cabecera .entradilla { grid-column: 1; }
  .presencia__rejilla { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .presencia__texto, .mapa { grid-column: 1; }
  .mapa { order: -1; min-height: 0; }
  .mov .mapa__lienzo { height: 60vh; height: 60svh; max-height: 560px; }
  .metodo__panel { grid-template-columns: minmax(0, 1fr); }
  .dibujo--escritorio { display: none; }
  .dibujo--movil { display: block; }
  .sobre__rejilla, .faq__rejilla { grid-template-columns: minmax(0, 1fr); }
  .faq__titulo, .faq__lista { grid-column: 1; }
  .faq__lista { margin-top: 24px; }
  .sobre__cabecera, .sobre__texto { grid-column: 1; }
  .sobre__texto { padding-top: 36px; }
  .contacto { display: block; min-height: 0; padding: 0 0 var(--sec); }
  .contacto__figura { position: relative; z-index: 0; aspect-ratio: 16 / 10; }
  .contacto__figura::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, var(--crema) 0%, rgba(250, 249, 246, 0) 40%); }
  .contacto__figura .leyenda { top: 14px; right: auto; left: 14px; bottom: auto; }
  .contacto__velo { display: none; }
  .contacto__rejilla { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-top: 8px; }
  .contacto__intro, .formulario { grid-column: 1; }
  .legal__rejilla { grid-template-columns: minmax(0, 1fr); }
  .legal__cabecera { position: static; }
}
@media (max-width: 1023px) and (min-height: 560px) {
  .mov .metodo__rejilla { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; row-gap: 10px; padding-top: 14px; padding-bottom: 10px; align-content: stretch; }
  .mov .metodo__panel { display: contents; }
  .mov .metodo__hud { display: none; }
  .mov .pestanas { grid-row: 1; }
  .mov .metodo__lema { display: none; grid-row: 2; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bronce-t); }
  .mov .metodo[data-modo="flip"] .metodo__lema[data-modo-texto="flip"], .mov .metodo[data-modo="obra"] .metodo__lema[data-modo-texto="obra"] { display: block; }
  .mov .metodo__chips { display: grid; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .mov .chip span { display: block; padding: 6px 10px; border: 1px solid rgba(127, 104, 68, .4); border-radius: 2px; background: rgba(255, 255, 255, .94); font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bronce-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mov .metodo__dibujo { grid-row: 4; align-items: center; }
  .mov .metodo__camara { aspect-ratio: 560 / 580; height: min(100cqh, 100cqw * 580 / 560, 40vh); height: min(100cqh, 100cqw * 580 / 560, 40svh); }
  .mov .metodo__rotulos { display: none; }
  .mov .metodo__pasos { grid-row: 5; min-height: 132px; }
  .mov .carril { grid-row: 6; }
  .mov .paso__titulo { margin-top: 8px; font-size: clamp(26px, 7.2vw, 30px); }
  .mov .paso__texto { margin-top: 6px; font-size: 16px; }
}
@media (max-width: 960px) {
  :root { --cab: 64px; }
  .nav { display: none; }
  .menu-boton { display: grid; }
  .logo { height: 38px; }
  .boton--cab { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
  .modal { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .modal__panel { display: block; height: 100%; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
  .galeria__pista { height: auto; }
  .galeria__item { min-height: 0; aspect-ratio: 4 / 3; }
  .modal__cerrar { position: fixed; }
  .modal__info { overflow: visible; padding-bottom: max(40px, env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  .foco { object-position: var(--foco-m, var(--foco, 50% 50%)); }
  .etiqueta { font-size: 11px; }
  .hero__titulo { font-size: clamp(36px, 10.6vw, 46px); }
  .hero__eyebrow { align-items: flex-start; font-size: 11px; }
  .hero__eyebrow .punto-vivo { margin-top: 4px; }
  .hero__eyebrow-texto > span { display: block; }
  .hero__eyebrow-texto .sep { display: none; }
  .hero__sub { margin-top: 18px; font-size: 16px; }
  .hero .botones { margin-top: 26px; }
  .cifra { min-height: 46vh; min-height: 46svh; }
  .cifra__texto { gap: 12px; font-size: 11px; letter-spacing: .22em; }
  .cifra .filete { width: 36px; }
  .servicios__figura { aspect-ratio: 4 / 3; }
  .servicios__lista { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .servicio { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; }
  .servicio__num { grid-row: 1 / span 2; font-size: 40px; }
  .servicio__titulo { margin-top: 2px; }
  .tarjetas { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .tarjeta__marco { aspect-ratio: 4 / 5; margin-inline: calc(-1 * var(--margen)); }
  .mapa__lienzo { grid-template-columns: minmax(0, 1fr); }
  .mapa__leyenda { grid-template-columns: minmax(0, 1fr); }
  .credencial { gap: 14px; margin-top: 28px; }
  .credencial__icono { width: 64px; height: 64px; }
  .credencial__svg { width: 32px; }
  .sobre__cita { font-size: 24px; }
  .contacto .botones { display: grid; grid-template-columns: minmax(0, 1fr); }
  .formulario { padding: 24px 20px; }
  .formulario__fila { grid-template-columns: minmax(0, 1fr); }
  .pie__fila { flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 28px; }
  .pie__marca { margin-right: 0; flex-direction: column; align-items: flex-start; gap: 12px; }
  .modal__panel .magnitudes { gap: 0 18px; }
  .menu-movil__pie { flex-direction: column; align-items: stretch; }
  .menu-movil__pie .enlace { align-self: flex-start; }
  .mov .metodo { height: 330vh; height: 330svh; }
  .mov .carril__marcas button { color: transparent; overflow: visible; }
  .mov .carril__marcas button[aria-current="step"] { color: var(--marino); }
  .mov .pestanas button { min-height: 48px; padding: 8px 12px; }
  .mov .pestanas button small { font-size: 10px; letter-spacing: .02em; }
  .contacto__abrir { width: 100%; }
}
@media (max-width: 760px) and (min-height: 700px) and (max-height: 799px) {
  .mov .tarjeta__marco { aspect-ratio: 1 / 1; }
}
@media (max-width: 760px) and (max-height: 699px) {
  .mov .tarjeta__marco { aspect-ratio: 4 / 3; }
}
@media (min-width: 381px) and (max-width: 760px) {
  .hero .botones { display: grid; grid-template-columns: 1.35fr 1fr; }
  .hero .boton { padding-inline: 16px; }
}
@media (max-width: 380px) {
  .hero .botones { display: grid; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .mov .chip span { white-space: normal; padding: 5px 8px; }
}
@media (max-width: 339px) {
  .cabecera__cta { display: none; }
}

/* ===================== 7. Movimiento ===================== */
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js .entra { animation: entra .9s var(--curva) both; }
  .js .entra--2 { animation-delay: .08s; }
  .js .entra--3 { animation-delay: .18s; }
  .js .entra--4 { animation-delay: .28s; }
  .js .revelar { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--curva), transform .9s var(--curva); }
  .js .revelar.visible { opacity: 1; transform: none; }
  .js .cifra .filete { transform: scaleX(0); transition: transform 1.2s var(--curva) .2s; }
  .js .cifra .filete:first-child { transform-origin: right center; }
  .js .cifra .filete:last-child { transform-origin: left center; }
  .js .cifra.visible .filete { transform: scaleX(1); }
  .js .servicio::before { transform: scaleX(0); transition: transform 1.1s var(--curva) .15s; }
  .js .servicio.visible::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}