/* NAVE — arquitectura e interiorismo (web de concepto de Arkevo)
   Pizarra y blanco roto, Geist en mayúsculas, rótulos numerados con filete.
   Sistema de componentes propio (rehecho el 2026-10-13). */

:root {
  /* azul pizarra, blanco roto y un óxido apagado que casi no aparece */
  --char: #14181C;
  --char-2: #1A1F24;
  --char-3: #20262C;
  --slate: #283037;
  --slate-2: #313A42;
  --stone: #D6D1C6;
  --stone-2: #9B978F;
  --stone-3: #BBB6AC;
  --mute: #79766F;
  --oxide: #A9654B;
  --dim: #2A3138;
  --dim-2: #47505A;
  --err: #C38A73;
  --line: rgba(214, 209, 198, .09);
  --line-2: rgba(214, 209, 198, .2);

  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --m: clamp(16px, 2.4vw, 36px);
  --gap: clamp(24px, 4vw, 72px);
  --sec: clamp(90px, 10vw, 150px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --head: 60px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--head); }
body { margin: 0; background: var(--char); color: var(--stone); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
sup { font-size: .3em; vertical-align: top; position: relative; top: .3em; margin-left: .03em; font-weight: 500; }
::selection { background: var(--stone); color: var(--char); }
:focus-visible { outline: 1px solid var(--stone); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 300; padding: 10px 14px; background: var(--stone); color: var(--char); }
.skip:focus { left: 8px; }

.wrap { width: 100%; padding-inline: var(--m); }
.mono { font-family: var(--mono); }
.mute { color: var(--mute); }

/* titulares */
.big { margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: -.035em; line-height: .88; }
.h2 { margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: -.03em; line-height: .9; font-size: clamp(40px, 5.6vw, 92px); }

/* ---------- Rótulo de sección: 03 —— Obras ---------- */
.kick { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--stone-2); }
.kick b { font-weight: 500; color: var(--stone); }
.kick i { width: 36px; height: 1px; background: var(--dim-2); flex: none; }

/* ---------- Cabecera de sección común ---------- */
.sec { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px var(--gap); align-items: end; padding: 0 var(--m) clamp(36px, 4.5vw, 64px); }
.sec .kick { grid-column: 1 / -1; }
.sec__side { display: grid; gap: 20px; justify-items: start; max-width: 30em; }
.sec__side p { margin: 0; font-size: 13.5px; color: var(--stone-3); }
@media (max-width: 860px) { .sec { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Enlace de acción: subrayado que crece + flecha ---------- */
.go { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }
.go span { padding-bottom: 4px; background-image: linear-gradient(var(--stone), var(--stone)), linear-gradient(var(--line-2), var(--line-2)); background-size: 0 1px, 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .7s var(--ease-out); }
.go i { font-style: normal; transition: transform .6s var(--ease-out); }
.go:hover span, .go:focus-visible span { background-size: 100% 1px, 100% 1px; }
.go:hover i, .go:focus-visible i { transform: translateX(5px); }
.ul { position: relative; font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: .02em; padding-bottom: 3px; }
.ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .6s var(--ease-out); }
.ul:hover::after { transform: scaleX(0); }
.btn { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 54px; padding: 0 18px; border: 0; background: var(--slate); color: var(--stone); cursor: pointer; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; transition: background .3s; }
.btn i { font-style: normal; font-size: 16px; transition: transform .6s var(--ease-out); }
.btn:hover { background: var(--slate-2); }
.btn:hover i { transform: translateX(5px); }
.back { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--stone-2); transition: color .3s; }
.back:hover { color: var(--stone); }

/* ---------- Cargador ---------- */
.intro { position: fixed; inset: 0; z-index: 200; background: var(--char); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--m); pointer-events: none; transition: transform 1.1s var(--ease-io); }
.intro__n { position: absolute; top: var(--m); right: var(--m); font: 500 13px var(--mono); color: var(--stone-2); }
.intro__bar { position: absolute; top: calc(var(--m) + 26px); right: var(--m); width: 120px; height: 1px; background: var(--line-2); }
.intro__bar em { display: block; height: 100%; background: var(--stone); transform-origin: left; transform: scaleX(var(--p, 0)); }
.intro__word { position: relative; display: flex; overflow: hidden; font-weight: 600; font-size: 31vw; line-height: .8; letter-spacing: -.05em; }
.intro__word span { display: inline-block; transform: translateY(102%); animation: rise 1s var(--ease-io) forwards; }
.intro__word span:nth-child(2) { animation-delay: .08s; } .intro__word span:nth-child(3) { animation-delay: .16s; } .intro__word span:nth-child(4) { animation-delay: .24s; }
@keyframes rise { to { transform: none; } }
.intro.is-out { transform: translateY(-101%); }
.no-intro .intro, html:not(.js) .intro { display: none; }

/* ---------- Cabecera ---------- */
.hd { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: var(--head); display: grid; grid-template-columns: 1fr 1fr 2fr 1fr; align-items: center; gap: 16px; padding: 0 var(--m); background: rgba(18,20,22,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .01em; }
.hd__brand { font-weight: 700; letter-spacing: 0; font-size: 15px; }
.hd__brand sup { color: var(--oxide); font-size: .6em; top: .1em; }
.hd__mid { color: var(--mute); font: 500 11px var(--mono); }
.hd__nav { display: flex; gap: 24px; justify-content: center; color: var(--mute); }
.hd__nav a { transition: color .3s; }
.hd__nav a:hover, .hd__nav a[aria-current] { color: var(--stone); }
.hd__r { justify-self: end; display: flex; align-items: center; gap: 18px; }
.hd__lang { color: var(--mute); }
.hd__lang:hover { color: var(--stone); }
.hd__cta { padding: 9px 14px; background: var(--slate); transition: background .3s; }
.hd__cta:hover { background: var(--slate-2); }
.hd__menu { display: none; background: none; border: 0; padding: 6px 0; cursor: pointer; font: inherit; text-transform: uppercase; }
.menu { display: none; }
@media (max-width: 900px) {
  .hd { grid-template-columns: 1fr auto; }
  .hd__mid, .hd__nav, .hd__cta { display: none; }
  .hd__menu { display: inline-block; }
  .menu { display: grid; position: fixed; inset: var(--head) 0 0; z-index: 99; align-content: start; padding: 20px var(--m); background: var(--char); clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-io); }
  .menu[hidden] { display: grid; visibility: hidden; }
  .menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
  .menu a { display: flex; gap: 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 34px; letter-spacing: -.03em; text-transform: uppercase; }
  .menu a span { font: 500 12px var(--mono); color: var(--mute); }
}

/* ---------- Portada: nombre vertical · texto e índice · foto a sangre ---------- */
.hero { position: relative; display: grid; grid-template-columns: auto minmax(300px, 1fr) minmax(0, 1.8fr); grid-template-rows: minmax(0, 1fr); height: 100svh; min-height: 640px; padding-top: var(--head); }
.hero__word { margin: 0 0 0 var(--m); padding: var(--m) 0; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 600; font-size: 220px; line-height: .8; letter-spacing: -.05em; white-space: nowrap; text-transform: uppercase; color: var(--stone); overflow: hidden; }
.hero__word span { display: inline-block; }
.hero__word sup { display: inline-block; writing-mode: horizontal-tb; transform: rotate(180deg); color: var(--oxide); font-size: .2em; top: 0; margin: .25em 0 0; vertical-align: top; }
@media (max-width: 900px) { .hero__word sup { writing-mode: inherit; transform: none; font-size: .3em; top: .3em; margin: 0 0 0 .03em; } }
.hero__info { display: flex; flex-direction: column; gap: 30px; padding: var(--m) clamp(18px, 2.4vw, 40px); min-width: 0; }
.hero__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; white-space: nowrap; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--stone-2); }
.hero__txt { display: grid; gap: 22px; justify-items: start; margin-top: auto; }
.hero__txt p { margin: 0; max-width: 21em; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.3; letter-spacing: -.01em; color: var(--stone); }
.hero__idx { list-style: none; margin: auto 0 0; padding: 0; }
.hero__idx button { position: relative; width: 100%; display: grid; grid-template-columns: 40px 1fr; align-items: baseline; padding: 12px 0 13px; border: 0; background: none; cursor: pointer; text-align: left; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--mute); transition: color .4s var(--ease); }
.hero__idx button span { font: 500 11px var(--mono); }
.hero__idx button:hover, .hero__idx button.on { color: var(--stone); }
.hero__idx i { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-2); }
.hero__idx em { display: block; height: 100%; background: var(--stone); transform-origin: left; transform: scaleX(0); }
.hero__idx .on em { animation: prog var(--dur, 6s) linear forwards; }
.hero__idx.is-still .on em { animation: none; transform: none; }
@keyframes prog { to { transform: scaleX(1); } }
.hero__base { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.hero__meta { display: flex; gap: 28px; margin: 0; font-weight: 600; font-size: 12.5px; text-transform: uppercase; }
.hero__meta dt { color: var(--mute); font-weight: 500; }
.hero__meta dd { margin: 2px 0 0; }
.hero__social { display: grid; gap: 4px; justify-items: end; font: 500 11px var(--mono); text-transform: uppercase; color: var(--stone-2); }
.hero__social a:hover { color: var(--stone); }
.hero__ph { position: relative; overflow: hidden; background: var(--char-2); }
.hero__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ease), transform 1.8s var(--ease-out); }
.hero__ph img.on { opacity: 1; transform: none; }
.js:not(.no-intro) .hero__word span { opacity: 0; }
.is-in .hero__word span { opacity: 1 !important; transition: opacity 1.2s var(--ease) .1s; }
.js:not(.no-intro) .hero__ph { clip-path: inset(0 0 0 100%); }
.is-in .hero__ph { clip-path: inset(0 0 0 0) !important; transition: clip-path 1.3s var(--ease-io) .15s; }
@media (max-width: 900px) {
  /* en móvil: foto → nombre montado sobre su borde → texto, índice y datos */
  .hero { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .hero__ph { order: 1; height: 62svh; min-height: 360px; }
  .hero__ph::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(20,24,28,.85)); pointer-events: none; }
  .hero__word { order: 2; position: relative; z-index: 2; margin: -.4em var(--m) 0; padding: 0; writing-mode: horizontal-tb; transform: none; overflow: visible; }
  .hero__info { order: 3; padding: 26px var(--m) var(--m); gap: 28px; }
  .hero__txt { margin-top: 0; }
  .hero__idx { margin-top: 0; }
  .hero__base { flex-wrap: wrap; }
  .hero__social { justify-items: start; grid-auto-flow: column; gap: 16px; }
}

/* ---------- 01 Obras ---------- */
.works { padding-top: var(--sec); }
.work { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap); align-items: end; padding: 0 var(--m); margin-bottom: clamp(70px, 9vw, 140px); }
.work:last-child { margin-bottom: 0; }
.work--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.work--flip .work__img { order: 2; }
.work__img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--char-2); }
.work__img img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transition: filter .8s var(--ease); will-change: transform; }
.work:hover .work__img img { filter: brightness(1.06); }
.work__info { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.work__n { font: 500 12px var(--mono); color: var(--stone-2); }
.work__t { margin: 0; font-weight: 600; font-size: clamp(34px, 4vw, 68px); line-height: .9; letter-spacing: -.035em; text-transform: uppercase; }
.work__t a { transition: color .4s var(--ease); }
.work__t a:hover { color: var(--stone-3); }
.work__lead { margin: 0; max-width: 30em; font-size: 14.5px; color: var(--stone-3); }
.work__data { margin: 0; font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--mute); }
.work__data span { margin: 0 8px; }
.work .go { margin-top: 8px; }
@media (max-width: 860px) {
  .work, .work--flip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .work--flip .work__img { order: 0; }
}

/* ---------- 03 Servicios ---------- */
.serv { padding-top: var(--sec); }
.serv__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gap); align-items: start; padding: 0 var(--m); }
.serv__stat { font: 500 11px var(--mono) !important; text-transform: uppercase; letter-spacing: .03em; color: var(--mute) !important; }
.svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.svc__row { border-bottom: 1px solid var(--line); }
.svc__row button { width: 100%; display: grid; grid-template-columns: 56px 1fr 18px; align-items: center; padding: 20px 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--stone-2); transition: color .4s var(--ease); }
.svc__row b { font-weight: 600; font-size: clamp(26px, 3vw, 46px); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.svc__n { font: 500 12px var(--mono); }
.svc__row button i { position: relative; width: 14px; height: 14px; }
.svc__row button i::before, .svc__row button i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .5s var(--ease-out); }
.svc__row button i::after { transform: rotate(90deg); }
.svc__row.on button, .svc__row button:hover { color: var(--stone); }
.svc__row.on button i::after { transform: none; }
.svc__d { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .6s var(--ease-out), visibility 0s .6s; }
.svc__d p { overflow: hidden; margin: 0; padding-left: 56px; max-width: 34em; font-size: 14px; color: var(--stone-3); }
.svc__row.on .svc__d { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .6s var(--ease-out); }
.svc__row.on .svc__d p { padding-bottom: 22px; }
.serv__foot { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-top: 40px; }
.serv__foot dl { display: flex; gap: 36px; margin: 0; font-weight: 600; font-size: 12.5px; text-transform: uppercase; }
.serv__foot dt { color: var(--mute); font-weight: 500; }
.serv__foot dd { margin: 2px 0 0; }
.serv__img { position: sticky; top: calc(var(--head) + 24px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--char-2); }
.serv__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .7s var(--ease), transform 1.4s var(--ease-out); }
.serv__img img.on { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .serv__grid { grid-template-columns: minmax(0, 1fr); }
  .serv__img { position: relative; top: auto; order: -1; aspect-ratio: 16 / 10; }
  .svc__row button { grid-template-columns: 40px 1fr 18px; }
  .svc__d p { padding-left: 40px; }
}

/* ---------- 04 Proceso ---------- */
.proc { padding-top: var(--sec); }
.proc__list { list-style: none; margin: 0; padding: 0 var(--m); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m); align-items: start; }
.step { display: grid; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.step:nth-child(2) { margin-top: clamp(0px, 4vw, 64px); }
.step:nth-child(3) { margin-top: clamp(0px, 8vw, 128px); }
.step__top { display: flex; justify-content: space-between; gap: 12px; font: 500 12px var(--mono); text-transform: uppercase; }
.step__n { color: var(--stone); }
.step__out { color: var(--mute); }
.step__img { aspect-ratio: 4 / 3; overflow: hidden; }
.step__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.step:hover .step__img img { transform: scale(1.04); }
.step__t { margin: 6px 0 0; font-weight: 600; font-size: clamp(28px, 2.8vw, 44px); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.step p { margin: 0; max-width: 26em; font-size: 14px; color: var(--stone-3); }
@media (max-width: 860px) { .proc__list { grid-template-columns: minmax(0, 1fr); gap: 44px; } .step:nth-child(n) { margin-top: 0; } }

/* ---------- 05 Estudio ---------- */
.studio { margin-top: var(--sec); padding: clamp(80px, 9vw, 130px) 0; background: var(--char-2); }
.studio__meta { display: flex; gap: 24px; margin: 0; font-weight: 600; font-size: 12.5px; text-transform: uppercase; color: var(--stone-2) !important; }
.studio__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--gap); align-items: end; padding: 0 var(--m); }
.studio__img { aspect-ratio: 4 / 5; overflow: hidden; max-width: 520px; }
.studio__img img { width: 100%; height: 100%; object-fit: cover; }
.studio__q { margin: 0; max-width: 19em; font-weight: 600; font-size: clamp(22px, 2.3vw, 36px); line-height: 1.12; letter-spacing: -.02em; }
.studio__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px var(--m); margin: 44px 0 0; padding-top: 18px; border-top: 1px solid var(--line-2); font-weight: 600; font-size: 12.5px; text-transform: uppercase; }
.studio__facts dt { color: var(--mute); font-weight: 500; }
.studio__facts dd { margin: 2px 0 0; }
.studio__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: clamp(50px, 6vw, 90px) var(--m) 0; }
.studio__strip figure { margin: 0; }
.studio__strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.studio__strip figcaption { margin-top: 8px; font: 500 11px var(--mono); text-transform: uppercase; color: var(--mute); }
@media (max-width: 860px) {
  .studio__grid { grid-template-columns: minmax(0, 1fr); }
  .studio__strip { grid-template-columns: 1fr 1fr; }
  .studio__strip figure:last-child { grid-column: 1 / -1; }
}

/* ---------- Marquesina ---------- */
.marq { overflow: hidden; padding-block: clamp(60px, 8vw, 110px) clamp(30px, 4vw, 60px); }
.marq__track { display: flex; align-items: center; width: max-content; will-change: transform; font-weight: 600; font-size: clamp(64px, 11vw, 190px); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; color: var(--dim-2); }
.marq__track i { width: .14em; height: .14em; margin: 0 .45em; background: var(--slate-2); flex: none; }

/* ---------- Materioteca ---------- */
.mat { padding-bottom: clamp(90px, 10vw, 140px); }
.mat__head { display: grid; grid-template-columns: 1fr 2fr; gap: var(--m); margin-bottom: clamp(36px, 4vw, 60px); }
.mat__head p { margin: 0; max-width: 30em; font-size: 14px; color: var(--stone-3); }
.mat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: start; }
.mat__grid figure { margin: 0; }
.mat__grid figure:nth-child(2) { margin-top: 90px; }
.mat__grid figure:nth-child(4) { margin-top: 140px; }
.mat__grid .ph { overflow: hidden; aspect-ratio: 3 / 4; }
.mat__grid figure:nth-child(3) .ph { aspect-ratio: 1; }
.mat__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.mat__grid figure:hover img { transform: scale(1.05); }
.mat__grid figcaption { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; text-transform: uppercase; }
.mat__grid figcaption span { color: var(--mute); font-family: var(--mono); font-size: 11px; }
.sub { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m); align-items: end; margin-top: clamp(50px, 6vw, 90px); }
.sub__t { font-size: clamp(40px, 5vw, 84px); color: var(--stone); }
.sub__t span { display: block; color: var(--dim-2); }
.sub form { display: grid; gap: 12px; }
.sub label { font: 500 11px var(--mono); text-transform: uppercase; color: var(--mute); }
.sub__row { display: flex; border-bottom: 1px solid var(--stone); }
.sub input { flex: 1; min-width: 0; padding: 12px 0; border: 0; background: none; outline: none; font-size: 15px; }
.sub button { border: 0; background: none; padding: 0 0 0 16px; cursor: pointer; font-weight: 600; font-size: 13px; text-transform: uppercase; }
.sub__ok { margin: 0; font: 500 12px var(--mono); color: var(--stone-2); }
@media (max-width: 860px) {
  .mat__head, .sub { grid-template-columns: 1fr; }
  .mat__grid { grid-template-columns: 1fr 1fr; }
  .mat__grid figure:nth-child(n) { margin-top: 0; }
  .mat__grid figure:nth-child(2n) { margin-top: 50px; }
}


/* ---------- 07 Reconocimiento: premios, prensa y clientes ---------- */
.rec { padding-top: var(--sec); }
.rec__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap); align-items: start; padding: 0 var(--m); }
.rec__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.rec__list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; transition: color .3s; }
.rec__list li > span:first-child { font: 500 11.5px var(--mono); color: var(--stone-2); padding-top: 2px; }
.rec__list b { font-weight: 600; text-transform: uppercase; }
.rec__list li > span:last-child { color: var(--mute); }
.rec__list li:hover > span:last-child { color: var(--stone-3); }
.rec__q { display: grid; gap: 24px; padding: clamp(24px, 3vw, 40px); background: var(--char-2); }
.rec__lbl { margin: 0; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--stone-2); }
.rec__view { overflow: hidden; }
.rec__track { display: flex; transition: transform .9s var(--ease-io); }
.voice { flex: 0 0 100%; margin: 0; }
.voice blockquote { margin: 0; font-size: clamp(20px, 1.9vw, 29px); line-height: 1.25; letter-spacing: -.01em; color: var(--stone); }
.voice figcaption { margin-top: 20px; font-size: 13px; color: var(--mute); }
.rec__tabs { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.rec__tabs button { padding: 4px 0; border: 0; background: none; cursor: pointer; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--mute); box-shadow: inset 0 -1px 0 transparent; transition: color .3s, box-shadow .3s; }
.rec__tabs button:hover { color: var(--stone-3); }
.rec__tabs button[aria-pressed="true"] { color: var(--stone); box-shadow: inset 0 -1px 0 var(--stone); }
@media (max-width: 860px) {
  .rec__grid { grid-template-columns: minmax(0, 1fr); }
  .rec__list li { grid-template-columns: 52px minmax(0, 1fr); }
  .rec__list li > span:last-child { grid-column: 2; }
}

/* ---------- 08 Sedes ---------- */
.place { padding-top: var(--sec); }
.place__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap); align-items: end; padding: 0 var(--m); }
.place__img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.place__img img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.place__r { display: grid; gap: 26px; justify-items: start; }
.place__site { display: grid; gap: 4px; width: 100%; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 14px; }
.place__site b { margin-bottom: 4px; font-weight: 600; font-size: 13px; text-transform: uppercase; }
@media (max-width: 860px) { .place__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Diario ---------- */
.journal { padding-block: clamp(90px, 10vw, 150px); }
.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post { position: relative; display: grid; grid-template-columns: 1fr 1fr 2fr 1fr; gap: var(--m); align-items: center; padding: 22px var(--m); border-bottom: 1px solid var(--line); transition: background .5s var(--ease); }
.post:hover { background: var(--char-2); }
.post__d { display: flex; align-items: baseline; gap: 10px; font-weight: 600; text-transform: uppercase; }
.post:hover .post__c { color: var(--stone); }
.post__d b { font-size: clamp(40px, 4vw, 64px); line-height: .9; letter-spacing: -.04em; font-weight: 600; }
.post__d span { font-size: 13px; color: var(--mute); }
.post__c { font: 500 12px var(--mono); text-transform: uppercase; color: var(--stone-2); transition: color .3s; }
.post__t { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.2; color: var(--stone-3); letter-spacing: -.01em; }
.post__img { justify-self: end; width: 140px; aspect-ratio: 4 / 3; overflow: hidden; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); filter: grayscale(.3); transition: transform 1.2s var(--ease-out), filter .6s var(--ease); }
.post:hover .post__img img { transform: none; filter: none; }
@media (max-width: 860px) {
  .post { grid-template-columns: auto 1fr; row-gap: 8px; }
  .post__c { grid-column: 2; grid-row: 1; }
  .post__t { grid-column: 1 / -1; }
  .post__img { grid-column: 1 / -1; justify-self: stretch; width: 100%; aspect-ratio: 16 / 9; }
}


/* ---------- Pie ---------- */
.ft { position: relative; padding-top: clamp(60px, 7vw, 100px); border-top: 1px solid var(--line); overflow: hidden; }
.ft__top { display: grid; grid-template-columns: 2fr 1fr; gap: var(--m); padding: 0 var(--m); }
.ft__t { font-size: clamp(64px, 11vw, 190px); }
.ft__t span { display: block; }
.ft__t a { display: block; transition: color .5s var(--ease); }
.ft__t a i { font-style: normal; display: inline-block; font-size: .6em; vertical-align: middle; transform: translateX(-.2em); opacity: 0; transition: transform .7s var(--ease-out), opacity .5s var(--ease); }
.ft__t a:hover { color: var(--stone-3); }
.ft__t a:hover i { transform: none; opacity: 1; }
.ft__side { display: grid; gap: 18px; align-content: start; justify-items: start; align-self: start; max-width: 300px; justify-self: end; font-size: 13.5px; color: var(--stone-3); }
.ft__side p { margin: 0; }
.ft__side .go { color: var(--stone); }
.ft__mid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--m); padding: clamp(20px, 3vw, 40px) var(--m) clamp(40px, 5vw, 70px); align-items: end; }
.ft--short .ft__mid { padding-top: 0; }
.ft__img { aspect-ratio: 16 / 10; overflow: hidden; }
.ft__img img { width: 100%; height: 100%; object-fit: cover; }
.ft__card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 16px; background: var(--char-2); color: var(--stone); border: 1px solid var(--line); }
.ft__card .ic { width: 48px; height: 48px; display: grid; place-items: center; background: var(--slate-2); color: var(--stone); font: 600 11px var(--mono); }
.ft__card b { display: block; font-weight: 600; text-transform: uppercase; font-size: 13px; }
.ft__card span { font-size: 12.5px; }
.ft__card .ul { grid-column: 1 / -1; justify-self: end; }
.ft__map { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--m); margin-top: 22px; font-weight: 600; font-size: 13px; text-transform: uppercase; }
.ft__map a { display: flex; gap: 14px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); transition: color .3s; }
.ft__map a span { color: var(--mute); font-family: var(--mono); font-weight: 500; font-size: 11px; }
.ft__map a:hover { color: var(--stone-3); }
.ft__base { display: flex; justify-content: space-between; gap: 20px; margin: 0 var(--m); padding: 16px 0 24px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--mute); text-transform: uppercase; }
.ft__base sup { color: var(--oxide); font-size: .7em; top: 0; }
.ft__base a { color: var(--stone); border-bottom: 1px solid var(--line-2); }
@media (max-width: 860px) { .ft__top, .ft__mid { grid-template-columns: 1fr; } .ft__side { justify-self: start; } .ft__base { flex-direction: column; } }

/* ---------- Aparición ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.2s var(--ease-out); }
.js .rv.in { opacity: 1; transform: none; }

/* =================== Página de obra =================== */
.pj { padding-top: calc(var(--head) + clamp(30px, 4vw, 60px)); }
.pj__head { display: grid; gap: 18px; padding: 0 var(--m); }
.pj__t { margin: 0; font-weight: 600; font-size: clamp(56px, 11vw, 190px); line-height: .82; letter-spacing: -.05em; text-transform: uppercase; }
.pj__data { margin: 6px 0 0; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--stone-2); }
.pj__data span { margin: 0 8px; color: var(--dim-2); }
.pj__cover { margin: clamp(30px, 4vw, 60px) var(--m) 0; height: min(86svh, 860px); overflow: hidden; position: relative; }
.pj__cover img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.pj__facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 var(--m); border-bottom: 1px solid var(--line); }
.pj__facts div { padding: 16px 16px 16px 0; }
.pj__facts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.pj__facts dt { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.pj__facts dd { margin: 4px 0 0; font-weight: 600; font-size: 14px; }
.pj__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--gap); padding: clamp(50px, 6vw, 90px) var(--m); }
.pj__lead { margin: 0; font-weight: 600; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.15; letter-spacing: -.015em; text-transform: uppercase; }
.pj__txt p { margin: 0 0 1em; max-width: 36em; font-size: 15.5px; line-height: 1.6; color: var(--stone-3); }
.pj__gal { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; padding: 0 var(--m) clamp(70px, 8vw, 120px); }
.pj__gal figure { margin: 0; }
.pj__gal img { width: 100%; object-fit: cover; transition: filter .8s var(--ease); }
.pj__gal figure:hover img { filter: brightness(1.06); }
.pj__gal figcaption { margin-top: 8px; font: 500 11px var(--mono); text-transform: uppercase; color: var(--mute); }
.pj__gal .a { grid-column: 1 / 6; } .pj__gal .a img { aspect-ratio: 3 / 4; }
.pj__gal .b { grid-column: 6 / 13; align-self: end; } .pj__gal .b img { aspect-ratio: 4 / 3; }
.pj__gal .c { grid-column: 3 / 11; margin-top: 30px; } .pj__gal .c img { aspect-ratio: 16 / 9; }
.pj__next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px var(--m); padding: clamp(50px, 6vw, 90px) var(--m); border-top: 1px solid var(--line); }
.pj__next span { grid-column: 1 / -1; font: 500 12px var(--mono); text-transform: uppercase; color: var(--mute); }
.pj__next strong { font-weight: 600; font-size: clamp(48px, 9vw, 160px); line-height: .84; letter-spacing: -.05em; text-transform: uppercase; transition: color .5s var(--ease); }
.pj__next i { font-style: normal; font-size: clamp(36px, 6vw, 100px); line-height: .9; transition: transform .7s var(--ease-out); }
.pj__next:hover strong { color: var(--stone-3); }
.pj__next:hover i { transform: translateX(10px); }
@media (max-width: 860px) {
  .pj__facts { grid-template-columns: 1fr 1fr; }
  .pj__facts div, .pj__facts div + div { padding: 12px 12px 12px 0; border-left: 0; border-top: 1px solid var(--line); }
  .pj__body { grid-template-columns: 1fr; }
  .pj__gal > figure { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .pj__gal img { aspect-ratio: 4 / 3 !important; }
  .pj__cover { height: 60svh; }
}

/* =================== Artículo =================== */
.ar { padding-top: calc(var(--head) + clamp(30px, 4vw, 60px)); }
.ar__head { display: grid; grid-template-columns: 1fr 3fr; gap: var(--m); padding: 0 var(--m); }
.ar__date { font-weight: 600; text-transform: uppercase; }
.ar__date b { display: block; font-size: clamp(64px, 8vw, 130px); line-height: .8; letter-spacing: -.05em; font-weight: 600; }
.ar__date span { display: block; margin-top: 10px; font-size: 14px; color: var(--mute); }
.ar__t { margin: 14px 0 0; font-weight: 600; font-size: clamp(34px, 4.6vw, 76px); line-height: .94; letter-spacing: -.035em; text-transform: uppercase; }
.ar__lead { margin: 26px 0 0; max-width: 34em; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; color: var(--stone-3); }
.ar__cover { margin: clamp(36px, 4vw, 64px) var(--m) 0; aspect-ratio: 16 / 7; overflow: hidden; }
.ar__cover img { width: 100%; height: 100%; object-fit: cover; }
.ar__body { display: grid; grid-template-columns: 1fr 3fr; gap: var(--m); padding: clamp(50px, 6vw, 90px) var(--m); }
.ar__side { font: 500 12px var(--mono); text-transform: uppercase; color: var(--mute); display: grid; gap: 6px; align-content: start; position: sticky; top: calc(var(--head) + 24px); }
.ar__col { max-width: 720px; font-size: 17.5px; line-height: 1.65; color: var(--stone-3); }
.ar__col p { margin: 0 0 1.1em; }
.ar__col h2 { margin: 1.8em 0 .6em; font-weight: 600; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -.01em; text-transform: uppercase; color: var(--stone); }
.ar__q { margin: 1.6em 0; padding: 22px 0; border-block: 1px solid var(--line-2); font-weight: 600; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; text-transform: uppercase; letter-spacing: -.02em; color: var(--stone); }
.ar__fig { margin: 2em 0; }
.ar__fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ar__fig figcaption { margin-top: 8px; font: 500 11px var(--mono); text-transform: uppercase; color: var(--mute); }
@media (max-width: 860px) { .ar__head, .ar__body { grid-template-columns: 1fr; } .ar__side { position: static; grid-auto-flow: column; justify-content: start; gap: 18px; } .ar__cover { aspect-ratio: 4 / 3; } }



/* =================== Contacto =================== */
.ct { padding-top: calc(var(--head) + clamp(30px, 4vw, 60px)); }
.ct__head { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 var(--m) clamp(30px, 4vw, 56px); }
.ct__head .kick { margin-bottom: 4px; }
.ct__t { font-size: 22vw; line-height: .8; white-space: nowrap; margin-top: 12px; }
.ct__t span { display: inline-block; }
.ct__lead { justify-self: end; max-width: 26em; margin: 22px 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; color: var(--stone-3); }
.ct__grid { display: grid; grid-template-columns: 1fr 2fr; border-top: 1px solid var(--line); }
.ct__info { display: flex; flex-direction: column; gap: 26px; padding: 34px var(--m); border-right: 1px solid var(--line); }
.ct__site { display: grid; gap: 4px; font-size: 14px; }
.ct__site b { font-weight: 600; text-transform: uppercase; font-size: 13px; margin-bottom: 4px; }
.ct__site .ul { justify-self: start; text-transform: none; font-size: 15px; margin-top: 4px; }
.ct__visit { margin: 0; padding: 14px 16px; border: 1px solid var(--line-2); font: 500 12px/1.5 var(--mono); text-transform: uppercase; color: var(--stone-2); }
.ct__img { margin-top: auto; aspect-ratio: 4 / 3; overflow: hidden; }
.ct__img img { width: 100%; height: 100%; object-fit: cover; }
.ct__formwrap { padding: 34px var(--m) 50px; }
.ct__form { display: grid; grid-template-columns: 1fr 1fr; gap: 30px var(--m); }
.fld { grid-column: 1 / -1; display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fld--half { grid-column: span 1; }
.fld label, .fld legend { padding: 0; font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--stone-2); }
.fld legend { margin-bottom: 10px; }
.fld em, .ct__req em { font-style: normal; color: var(--stone-3); }
.fld input, .fld textarea { width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; outline: none; font-size: 17px; color: var(--stone-3); transition: border-color .4s var(--ease); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--dim-2); }
.fld textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.fld input:focus, .fld textarea:focus { border-color: var(--stone); }
.fld input:user-invalid, .is-tried .fld input:invalid { border-color: var(--err); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 99px; font-weight: 600; font-size: 12.5px; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.chip:hover span { border-color: var(--stone); }
.chip input:checked + span { background: var(--slate-2); color: var(--stone); border-color: var(--stone-2); }
.chip input:focus-visible + span { outline: 1px solid var(--stone); outline-offset: 3px; }
.is-tried fieldset:has(input[required]:invalid) .chip span { border-color: var(--err); }
.ct__check { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--stone-3); cursor: pointer; }
.ct__check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--stone); flex: none; }
.ct__req { grid-column: 1 / 2; margin: 0; font: 500 11px var(--mono); text-transform: uppercase; color: var(--mute); align-self: center; }
.ct__send { grid-column: 2 / 3; width: 100%; }
.ct__ok { display: grid; gap: 22px; justify-items: start; padding-top: 20px; max-width: 560px; outline: none; }
.ct__ok[hidden], .ct__form[hidden] { display: none; }
.ct__ok svg { width: 56px; height: 56px; fill: none; stroke: var(--stone-2); stroke-width: 2; }
.ct__ok h2 { font-size: clamp(40px, 5vw, 80px); }
.ct__ok p { margin: 0; font-size: 15px; color: var(--stone-3); }
.ct__next { padding: clamp(60px, 7vw, 100px) var(--m) clamp(70px, 8vw, 120px); border-top: 1px solid var(--line); }
.ct__n { font: 500 12px var(--mono); color: var(--stone-2); }
.ct__next ol { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--m); }
.ct__next li { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.ct__next b { font-weight: 600; font-size: clamp(22px, 2vw, 30px); text-transform: uppercase; letter-spacing: -.02em; }
.ct__next p { margin: 0; font-size: 14px; color: var(--stone-3); }
@media (max-width: 900px) {
  .ct__grid { grid-template-columns: 1fr; }
  .ct__info { border-right: 0; border-bottom: 1px solid var(--line); }
  .ct__img { display: none; }
  .ct__form { grid-template-columns: 1fr; }
  .fld--half, .ct__req, .ct__send { grid-column: 1 / -1; }
  .ct__lead { justify-self: start; }
  .ct__next ol { grid-template-columns: 1fr; }
}



/* ---------- Mapa de obras ---------- */
.mp { padding-top: var(--sec); }
.mp__grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); border-block: 1px solid var(--line); }
.mp__side { display: flex; flex-direction: column; gap: 18px; padding: 28px var(--m) 32px; border-left: 1px solid var(--line); }
.mp__t { font-size: clamp(34px, 3.3vw, 56px); }
.mp__p { margin: 0; max-width: 28em; font-size: 13.5px; color: var(--stone-3); }
.mp__views { display: flex; gap: 4px; flex-wrap: wrap; }
.mp__views button { height: 34px; padding: 0 14px; border: 1px solid var(--line-2); background: none; cursor: pointer; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--stone-3); transition: background .3s, color .3s, border-color .3s; }
.mp__views button:hover { border-color: var(--stone); }
.mp__views button[aria-pressed="true"] { background: var(--slate-2); border-color: var(--stone-2); color: var(--stone); }
.mp__list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.mp__list li { border-bottom: 1px solid var(--line); }
.mp__list button { position: relative; width: 100%; display: grid; grid-template-columns: 52px 1fr; column-gap: 8px; align-items: baseline; padding: 11px 10px 11px 12px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--stone); transition: background .4s var(--ease); }
.mp__list button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--oxide); transform: scaleY(0); transition: transform .5s var(--ease-out); }
.mp__list button:hover, .mp__list button.on { background: var(--char-2); }
.mp__list button:hover::before, .mp__list button.on::before { transform: none; }
.mp__list span { grid-row: span 2; font: 500 11px var(--mono); color: var(--stone-2); }
.mp__list .is-hq span { color: var(--stone-2); }
.mp__list b { font-weight: 600; font-size: 14.5px; text-transform: uppercase; letter-spacing: -.01em; }
.mp__list i { font-style: normal; font: 500 11px var(--mono); text-transform: uppercase; color: var(--mute); }
.mp__canvas { position: relative; height: auto; min-height: min(84svh, 800px); background: var(--char-2); isolation: isolate; }
.mp__mini .mp__canvas { height: 440px; min-height: 0; }
.mp__hint { position: absolute; z-index: 500; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 8px 12px; background: rgba(18,20,22,.88); border: 1px solid var(--line-2); font: 500 11px var(--mono); text-transform: uppercase; color: var(--stone-3); pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); white-space: nowrap; }
.mp__hint.on { opacity: 1; }
.mp__axes { position: absolute; z-index: 400; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(214,209,198,.045) 1px, transparent 1px) 0 0 / 25% 100%, linear-gradient(rgba(214,209,198,.045) 1px, transparent 1px) 0 0 / 100% 25%; }
.mp__corner { position: absolute; z-index: 450; left: 14px; top: 12px; font: 500 11px var(--mono); text-transform: uppercase; color: var(--stone-2); pointer-events: none; }
/* Leaflet con la paleta de NAVE */
.mp .leaflet-container, .mp__mini .leaflet-container { width: 100%; height: 100%; background: var(--char-2); font: inherit; }
.mp .leaflet-tile-pane, .mp__mini .leaflet-tile-pane { filter: saturate(.7) brightness(.9) contrast(.95); }
.mp .leaflet-control-zoom, .mp__mini .leaflet-control-zoom { border: 0 !important; box-shadow: none !important; margin: 0 14px 14px 0 !important; }
.mp .leaflet-control-zoom a, .mp__mini .leaflet-control-zoom a { width: 36px !important; height: 36px !important; line-height: 34px !important; background: var(--char) !important; color: var(--stone) !important; border: 1px solid var(--line-2) !important; border-radius: 0 !important; font: 400 18px var(--sans) !important; }
.mp .leaflet-control-zoom a:hover, .mp__mini .leaflet-control-zoom a:hover { background: var(--slate) !important; border-color: var(--stone-2) !important; }
.mp .leaflet-control-zoom a + a, .mp__mini .leaflet-control-zoom a + a { margin-top: 2px; }
.mp .leaflet-control-attribution, .mp__mini .leaflet-control-attribution { background: rgba(18,20,22,.82) !important; color: var(--mute); font: 500 9.5px var(--mono); }
.mp .leaflet-control-attribution a, .mp__mini .leaflet-control-attribution a { color: var(--stone-2); }
.pin-wrap { background: none !important; border: 0 !important; }
.pin { display: grid; place-items: center; width: 32px; height: 32px; transform: translate(-50%, -50%); background: var(--char); border: 1px solid var(--stone-2); color: var(--stone); font: 500 10px var(--mono); transition: background .3s var(--ease), color .3s var(--ease), transform .45s var(--ease-out); box-shadow: 0 8px 20px -8px rgba(0,0,0,.7); }
.pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 8px; background: var(--stone-2); }
.pin--hq { border-radius: 50%; background: var(--slate-2); border-color: var(--stone-2); color: var(--stone); font-weight: 600; }
.pin--hq::after { background: var(--stone-2); }
.pin-wrap:hover .pin, .pin-wrap.on .pin { background: var(--oxide); border-color: var(--oxide); color: var(--stone); transform: translate(-50%, -50%) scale(1.14); }
.pin-wrap.on .pin--hq, .pin-wrap:hover .pin--hq { background: var(--oxide); border-color: var(--oxide); }
.mp .leaflet-popup-content-wrapper, .mp__mini .leaflet-popup-content-wrapper { padding: 0; border-radius: 0; background: var(--char); color: var(--stone); border: 1px solid var(--line-2); box-shadow: 0 24px 50px -20px rgba(0,0,0,.8); }
.mp .leaflet-popup-content { margin: 0; width: 256px !important; }
.mp .leaflet-popup-tip { background: var(--char); border: 1px solid var(--line-2); box-shadow: none; }
.mp .leaflet-container a.leaflet-popup-close-button { color: var(--stone); top: 6px; right: 6px; font-size: 20px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.mpop { display: block; color: var(--stone) !important; }
.mpop img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mpop div { display: grid; gap: 4px; padding: 12px 14px 14px; }
.mpop small { font: 500 10.5px var(--mono); text-transform: uppercase; color: var(--stone-2); }
.mpop strong { font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05; }
.mpop em { font-style: normal; font-size: 12.5px; color: var(--mute); }
.mpop span { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-weight: 600; font-size: 12px; text-transform: uppercase; }
.mpop:hover span { color: var(--stone); }
.pj__site { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--m); align-items: end; padding: 0 var(--m) clamp(70px, 8vw, 120px); }
.pj__site > div:first-child { display: grid; gap: 10px; justify-items: start; }
.pj__city { margin: 0; font-weight: 600; font-size: clamp(30px, 3.4vw, 54px); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.pj__coord { margin: 0 0 14px; font: 500 12px var(--mono); color: var(--mute); }
@media (max-width: 900px) {
  .mp__grid, .pj__site { grid-template-columns: minmax(0, 1fr); }
  .mp__side { border-left: 0; order: -1; }
  .mp__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-top: 0; gap: 0; }
  .mp__list li { flex: 0 0 74%; scroll-snap-align: start; border: 1px solid var(--line); border-right: 0; }
  .mp__list li:last-child { border-right: 1px solid var(--line); }
  .mp__canvas { height: 64svh; min-height: 380px; }
  .mp__grid > .mp__canvas { min-height: 0; }
  .mp__mini .mp__canvas { height: 340px; }
}

/* ---------- Modo captura (?capture) ---------- */
.capture .hero { height: 900px; min-height: 0; }
.capture .hero__ph { height: auto; }
.capture .rv { opacity: 1 !important; transform: none !important; }
.capture .hero__word span { opacity: 1 !important; transform: none !important; }
.capture .hero__ph { clip-path: none !important; }
.capture .hero__idx .on em { animation: none; transform: none; }
.capture .mp__canvas { min-height: 640px; }
.capture .hero__ph img, .capture .serv__img img, .capture .svc__d { transition: none !important; }
.capture .hero__ph img.on, .capture .serv__img img.on { opacity: 1; transform: none; }
@media (max-width: 900px) { .capture .hero { height: auto; } .capture .hero__ph { height: 520px; } }

/* ---------- Formulario: resumen de errores y estado ocupado ---------- */
.ct__err { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-left: 2px solid var(--err); background: rgba(195, 138, 115, .07); font: 500 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .02em; color: var(--err); }
.ct__err[hidden] { display: none; }
.is-tried .ct__check input:invalid + span { color: var(--err); }
.ct__send { position: relative; overflow: hidden; }
.ct__send:disabled { cursor: progress; }
.is-busy .ct__send::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--stone); transform-origin: left; animation: busy .8s var(--ease-io) forwards; }
.is-busy .ct__send i { animation: nudge .8s var(--ease-io) infinite; }
@keyframes busy { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nudge { 50% { transform: translateX(6px); opacity: .4; } }
.sub button:disabled { cursor: default; color: var(--stone-2); }

/* ---------- Gracias ---------- */
.gr { padding-top: calc(var(--head) + clamp(30px, 4vw, 60px)); }
.gr__head { padding: 0 var(--m) clamp(40px, 5vw, 72px); }
.gr__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.gr__ref { font: 500 12px var(--mono); letter-spacing: .04em; color: var(--stone-2); }
.gr__t { --fs0: clamp(60px, 15.5vw, 290px); margin: clamp(18px, 2.5vw, 34px) 0 0; font-weight: 600; font-size: var(--fs, var(--fs0)); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; }
.gr__l { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.gr__l > span { display: inline-block; color: var(--stone-2); }
.gr__name > span { color: var(--stone); }
.gr__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px var(--gap); align-items: end; margin-top: clamp(26px, 3.5vw, 50px); }
.gr__lead { grid-column: 2; margin: 0; max-width: 28em; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.35; letter-spacing: -.01em; color: var(--stone); }
.gr__concept { grid-column: 1; grid-row: 1; justify-self: start; display: flex; gap: 12px; align-items: center; margin: 0; padding: 11px 14px; border: 1px solid var(--line-2); font: 500 11.5px/1.45 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--stone-2); }
.gr__concept i { flex: none; width: 8px; height: 8px; border: 1px solid var(--stone-2); }
.gr__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); border-top: 1px solid var(--line); }
.gr__rc { padding: clamp(28px, 3vw, 44px) var(--m) clamp(40px, 5vw, 70px); border-right: 1px solid var(--line); }
.gr__rch { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--stone-2); font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--stone-2); }
.gr__mark { font: 600 15px var(--sans); letter-spacing: -.01em; color: var(--stone); }
.gr__mark sup { color: var(--oxide); font-size: .6em; }
.gr__rc dl { margin: 0; }
.gr__row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 13px 0; border-bottom: 1px dashed var(--line-2); }
.gr__row dt { font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--mute); flex: none; }
.gr__row dd { margin: 0; text-align: right; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .01em; min-width: 0; overflow-wrap: anywhere; }
.gr__row:first-child dd { font: 500 13px var(--mono); letter-spacing: .03em; }
.gr__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 34px; }
.gr__cta .btn { min-width: 220px; }
.gr__next { padding: clamp(28px, 3vw, 44px) var(--m) clamp(50px, 6vw, 90px); }
.gr__next ol { list-style: none; margin: 22px 0 0; padding: 0; counter-reset: s; }
.gr__next li { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 20px; padding: 20px 0 22px; border-top: 1px solid var(--line-2); counter-increment: s; }
.gr__next li::before { content: counter(s, decimal-leading-zero); position: absolute; right: 0; top: 20px; font: 500 12px var(--mono); color: var(--dim-2); }
.gr__when { grid-row: span 2; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--stone-2); padding-top: 6px; }
.gr__next b { font-weight: 600; font-size: clamp(22px, 2.1vw, 32px); line-height: 1; text-transform: uppercase; letter-spacing: -.02em; padding-right: 30px; }
.gr__next p { margin: 0; max-width: 34em; font-size: 14px; color: var(--stone-3); }
/* entrada: el titular sube desde su línea, el resto aparece en cascada */
.js .gr__l > span { transform: translateY(105%); }
.js .gr__top, .js .gr__intro > *, .js .gr__rc, .js .gr__next li { opacity: 0; transform: translateY(22px); }
.js .gr__rch { border-bottom-color: transparent; background: linear-gradient(var(--stone-2), var(--stone-2)) 0 100% / 0 1px no-repeat; }
.is-in .gr__l > span { transform: none; transition: transform 1.2s var(--ease-io) .1s; }
.is-in .gr__l + .gr__l > span { transition-delay: .22s; }
.is-in .gr__top, .is-in .gr__intro > *, .is-in .gr__rc, .is-in .gr__next li { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease-out); }
.is-in .gr__top { transition-delay: .05s; }
.is-in .gr__intro > * { transition-delay: .55s; }
.is-in .gr__intro > * + * { transition-delay: .65s; }
.is-in .gr__rc { transition-delay: .75s; }
.is-in .gr__rch { background-size: 100% 1px; transition: background-size 1.4s var(--ease-io) 1s; }
.is-in .gr__next li { transition-delay: calc(.85s + var(--i) * .1s); }
@media (max-width: 900px) {
  .gr__intro, .gr__grid { grid-template-columns: minmax(0, 1fr); }
  .gr__lead, .gr__concept { grid-column: 1; grid-row: auto; }
  .gr__rc { border-right: 0; border-bottom: 1px solid var(--line); }
  .gr__next li { grid-template-columns: minmax(0, 1fr); }
  .gr__when { grid-row: auto; padding-top: 0; }
  .gr__cta .btn { width: 100%; }
}
.capture .gr__l > span, .capture .gr__top, .capture .gr__intro > *, .capture .gr__rc, .capture .gr__next li { opacity: 1 !important; transform: none !important; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .intro { display: none; }
  .js .rv { opacity: 1; transform: none; }
  .js .hero__word span { opacity: 1; transform: none; }
  .js .hero__ph { clip-path: none; }
  .hero__idx .on em { animation: none; transform: none; }
  .js .gr__l > span, .js .gr__top, .js .gr__intro > *, .js .gr__rc, .js .gr__next li { opacity: 1; transform: none; }
  .js .gr__rch { background-size: 100% 1px; }
}