/* =========================================================
   García Navarro Real Estate — homepage (propuesta v2, «La revista»)
   Pocas dobles páginas, una idea en cada una. Los colores de la casa:
   crema, antracita, oro y el azul noche de su pie.
   Tipografía: Ibarra Real Nova + General Sans (ver assets/fonts/fonts.css).
   ========================================================= */

:root {
  /* superficies claras */
  --crema: #F4EFEC;
  --crema-2: #EDE8E2;
  --blanco: #FFFFFF;
  --antracita: #42413F;
  --tinta: #2B2A28;
  --mute: rgba(66, 65, 63, .8);      /* ≥ 4,5:1 sobre crema y crema-2 */
  --hair: rgba(66, 65, 63, .16);

  /* oro: solo filetes, puntos y acentos pequeños */
  --oro: #C1A04F;
  --oro-2: #D9C38C;

  /* noche */
  --noche: #0B0D21;
  --noche-2: #15182E;
  --text-d: rgba(244, 239, 236, .86);
  --mute-d: rgba(244, 239, 236, .6);
  --hair-d: rgba(244, 239, 236, .14);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);

  --max-w: 1560px;
  --pad-x: max(clamp(20px, 4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
  --gap: clamp(16px, 1.6vw, 24px);
  --sy: clamp(88px, min(9vw, 14vh), 150px);
  --r: 3px;
  --edge: max(var(--pad-x), calc((100vw - var(--max-w)) / 2));
  --hh: 84px;

  /* tipografía (las familias y los ajustes vienen de fonts.css) */
  --f-display: var(--display, Georgia, serif);
  --f-caps: var(--caps, var(--display, Georgia, serif));
  --f-text: var(--text, "Helvetica Neue", Arial, sans-serif);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
html.is-locked, html.menu-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--antracita);
  font-family: var(--f-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern";
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
  overflow-x: clip;
}
img, video, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
p { text-wrap: pretty; }
::selection { background: var(--oro); color: var(--noche); }
:focus-visible { outline: 1px solid var(--oro); outline-offset: 4px; border-radius: 2px; }
[hidden] { display: none !important; }
main > section[id] { scroll-margin-top: 64px; }
section[tabindex="-1"]:focus { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: 16px; z-index: 200;
  padding: 12px 18px; background: var(--crema); color: var(--antracita);
  font-size: .8rem; font-weight: 500; letter-spacing: .04em;
  transform: translateY(-180%); transition: transform .3s var(--ease-out);
}
.skip:focus { transform: none; }

.container { width: 100%; max-width: calc(var(--max-w) + 2 * var(--pad-x)); margin-inline: auto; padding-inline: var(--pad-x); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* ---------- Tipografía ---------- */
.hero__title, .statement, .zone__name, .duo__title, .closing__title, .menu__list a {
  font-family: var(--f-display);
  font-weight: var(--display-weight, 400);
  letter-spacing: var(--display-track, -.01em);
  line-height: var(--display-lh, 1.06);
  text-rendering: optimizeLegibility;
}
/* Mancheta: versales espaciadas, como el logotipo GN */
.masthead, .loader__word, .footer__word {
  font-family: var(--f-caps);
  font-weight: var(--caps-weight, 400);
  letter-spacing: var(--caps-track, .22em);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
/* Pies de foto y etiquetas: versalitas pequeñas */
.cap, .no, .header__menu, .header__contact, .hero__cap, .hero__pause, .card__n, .card__meta,
.sel__count, .zone__n, .zone__go, .duo__k, .menu__n {
  font-family: var(--f-text);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}
.cap { color: var(--mute); }

/* N.º 0X — Título, sobre un filete de oro */
.no { color: var(--antracita); }
.no::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 14px; vertical-align: .32em; background: var(--oro); }
.no--dark { color: var(--text-d); }
.no--dark .no__n { color: var(--oro-2); }

/* El punto de oro, en lugar del punto final */
.stop {
  display: inline-block; width: 7px; height: 7px; margin-left: .1em;
  border-radius: 50%; vertical-align: baseline;
  background: var(--oro);
}

/* ---------- Enlaces: texto y flecha fina; el subrayado de oro se dibuja desde la izquierda ---------- */
.arrow { width: 1.55em; height: .66em; flex: none; fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; overflow: visible; }
.arrow path { vector-effect: non-scaling-stroke; }
.link {
  position: relative; display: inline-flex; align-items: center; gap: .7em;
  min-height: 2.4em;
  font-size: .9rem; font-weight: 500; letter-spacing: .01em; line-height: 1.2; white-space: nowrap;
}
.link::before, .link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(50% - 1.05em); height: 1px;
}
.link::before { background: currentColor; opacity: .3; }
.link::after { background: var(--oro); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .8s var(--ease-out); }
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.link .arrow { transition: transform .8s var(--ease-out); }
.link:hover .arrow, .link:focus-visible .arrow { transform: translateX(4px); }
.link--light { color: var(--crema); }
.link--light::before { opacity: .5; }

/* Subrayado sencillo (líneas de contacto, pie) */
.ul { position: relative; background: linear-gradient(var(--oro), var(--oro)) 0 100% / 0 1px no-repeat; transition: background-size .8s var(--ease-out), color .3s; padding-bottom: 2px; }
.ul:hover, .ul:focus-visible { background-size: 100% 1px; }

/* =========================================================
   Cursor: punto blanco de 8 px en modo diferencia
   ========================================================= */
.cursor { display: none; }
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor .cursor {
  position: fixed; left: 0; top: 0; z-index: 300; display: block;
  width: 0; height: 0; pointer-events: none; mix-blend-mode: difference;
}
.cursor__dot {
  position: absolute; left: -4px; top: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blanco); opacity: 0;
  transition: transform .5s var(--ease-out), opacity .3s;
}
.cursor.is-visible .cursor__dot { opacity: 1; }
.cursor.is-hover .cursor__dot { transform: scale(1.8); }
.cursor.is-down .cursor__dot { transform: scale(.7); }
.cursor.is-hover.is-down .cursor__dot { transform: scale(1.4); }

/* =========================================================
   Intro: la mancheta se descubre y un filete de oro se traza
   ========================================================= */
.loader {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  color: var(--crema);
  animation: loader-failsafe 0s linear 5s forwards;
}
.no-js .loader, .rm .loader { display: none; }
.loader__bg { position: absolute; inset: 0; background: var(--noche); clip-path: inset(0 0 0 0); }
.loader__inner { position: relative; display: grid; justify-items: center; gap: 22px; transform: translateY(-10px); }
.loader__mono { width: auto; height: 44px; opacity: 0; transform: translateY(10px); }
.loader__word {
  padding: .2em 0 .2em var(--caps-track, .22em); margin-block: -.2em;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  clip-path: inset(0 100% 0 0);
}
.loader__rule { display: block; width: 120px; height: 1px; background: var(--oro); transform: scaleX(0); }
.loader.is-drawing .loader__mono { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); }
.loader.is-drawing .loader__word { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-io) .15s; }
.loader.is-drawing .loader__rule { transform: none; transition: transform 1.2s var(--ease-io) .45s; }
.is-loaded .loader { pointer-events: none; }
.is-loaded .loader__bg { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-io); }
.is-loaded .loader__inner { opacity: 0; transform: translateY(-34px); transition: opacity .45s, transform 1s var(--ease-io); }
@keyframes loader-failsafe { to { visibility: hidden; opacity: 0; } }

/* =========================================================
   Cabecera: mancheta de revista. Transparente sobre la portada;
   después, barra crema de 64 px con filete
   ========================================================= */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding-top: env(safe-area-inset-top);
  color: var(--crema);
  transition: transform .7s var(--ease-out), color .5s;
}
.header::before {
  content: ""; position: absolute; inset: 0;
  background: var(--crema); box-shadow: inset 0 -1px 0 var(--hair);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.header.is-solid { color: var(--antracita); --hh: 64px; }
.header.is-solid::before { opacity: 1; }
.menu-open .header { color: var(--crema); --hh: 84px; }
.menu-open .header::before { opacity: 0; }
.header.is-hidden { transform: translateY(-100%); }
.header:has(:focus-visible) { transform: none; }
.header__bar {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  height: var(--hh);
  max-width: calc(var(--max-w) + 2 * var(--pad-x)); margin-inline: auto; padding-inline: var(--pad-x);
  transition: height .6s var(--ease-out);
}
.header__menu {
  justify-self: start; display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding-right: 8px;
}
.header__lines { position: relative; width: 22px; height: 7px; }
.header__lines i {
  position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform .6s var(--ease-out), top .6s var(--ease-out);
}
.header__lines i:first-child { top: 0; }
.header__lines i:last-child { top: 6px; }
.header__menu[aria-expanded="true"] .header__lines i { top: 3px; }
.header__menu[aria-expanded="true"] .header__lines i:first-child { transform: rotate(32deg); }
.header__menu[aria-expanded="true"] .header__lines i:last-child { transform: rotate(-32deg); }
.masthead {
  justify-self: center; display: inline-flex; align-items: center; min-height: 44px;
  margin-right: calc(-1 * var(--caps-track, .22em));
  font-size: clamp(1.05rem, .55vw + .55rem, 1.35rem);
  transition: opacity .4s var(--ease-out);
}
.masthead:hover { opacity: .72; }
.header__contact {
  justify-self: end; display: inline-flex; align-items: center; min-height: 44px; padding-left: 8px;
  transition: opacity .5s var(--ease-out), visibility 0s;
}
.header__menu > span:last-child, .header__contact {
  background: linear-gradient(var(--oro), var(--oro)) 0 calc(50% + .95em) / 0 1px no-repeat;
  transition: background-size .8s var(--ease-out), opacity .5s var(--ease-out), visibility 0s;
}
.header__menu:hover > span:last-child, .header__contact:hover { background-size: 100% 1px; }
.header__menu > span:last-child { display: inline-flex; align-items: center; min-height: 44px; }
.menu-open .header__contact { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s linear .4s; }
/* En la cabecera el foco es el mismo subrayado de oro del hover, sin caja */
@media (min-width: 768px) {
  .header__menu:focus-visible, .header__contact:focus-visible, .masthead:focus-visible { outline: none; }
  .header__menu:focus-visible > span:last-child, .header__contact:focus-visible { background-size: 100% 1px; }
  .masthead:focus-visible { text-decoration: underline 1px var(--oro); text-underline-offset: 6px; }
}
/* Sobre la portada: una sombra apenas visible para que la mancheta se lea sobre el cielo */
.header:not(.is-solid) .masthead, .header:not(.is-solid) .header__menu, .header:not(.is-solid) .header__contact { text-shadow: 0 0 2px rgba(11, 13, 33, .5), 0 0 10px rgba(11, 13, 33, .7); }
.menu-open .header .masthead, .menu-open .header .header__menu, .menu-open .header .header__contact { text-shadow: none; }

/* =========================================================
   Menú a pantalla completa (noche)
   ========================================================= */
.menu {
  position: fixed; inset: 0; z-index: 55;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--noche); color: var(--crema);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 1s var(--ease-io), visibility 0s linear 1s;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 1s var(--ease-io), visibility 0s; }
.menu__inner {
  min-height: 100%;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto;
  column-gap: var(--gap); row-gap: clamp(24px, 4vh, 44px);
  padding-top: calc(84px + clamp(16px, 4vh, 48px) + env(safe-area-inset-top));
  padding-bottom: calc(clamp(18px, 3vh, 30px) + env(safe-area-inset-bottom));
}
.menu__nav { grid-column: 1 / span 7; align-self: center; }
.menu__list li { opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.menu.is-open .menu__list li { opacity: 1; transform: none; transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: calc(.38s + var(--i, 0) * 60ms); }
.menu__list a {
  display: flex; align-items: baseline; gap: clamp(1rem, 2vw, 2rem);
  padding: .12em 0;
  font-size: calc(min(clamp(2rem, 4.2vw, 3.6rem), 8vh) * var(--ds, 1)); line-height: 1.12;
  transition: opacity .5s var(--ease-out), transform .8s var(--ease-out);
}
.menu__n { flex: none; width: 2.2rem; color: var(--oro-2); font-variant-numeric: tabular-nums; transform: translateY(-1.4em); }
.menu__list:hover a { opacity: .35; }
.menu__list a:hover, .menu__list a:focus-visible { opacity: 1; transform: translateX(10px); }
.menu__list:hover a:focus-visible:not(:hover) { opacity: .35; transform: none; }
.menu__preview {
  grid-column: 9 / span 4; align-self: center; justify-self: end;
  position: relative; width: min(100%, calc(54vh * .8)); aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 4px; background: var(--noche-2);
  opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out);
}
.menu.is-open .menu__preview { opacity: 1; transform: none; transition: opacity 1s var(--ease-out) .5s, transform 1.4s var(--ease-out) .5s; }
.menu__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease-out), transform 1.4s var(--ease-out); }
.menu__preview img.is-leaving { opacity: 0; transform: scale(1.05); }
.menu__foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
  padding-top: 18px; border-top: 1px solid var(--hair-d);
  font-size: .85rem; line-height: 1.6; color: var(--text-d);
}
.menu__foot a { background: linear-gradient(var(--oro), var(--oro)) 0 100% / 0 1px no-repeat; transition: background-size .8s var(--ease-out), color .3s; }
.menu__foot a:hover, .menu__foot a:focus-visible { color: var(--crema); background-size: 100% 1px; }
.menu__lang { letter-spacing: .14em; color: var(--mute-d); }
.menu__lang [aria-current] { color: var(--crema); }

/* =========================================================
   Portada (vídeo a sangre)
   ========================================================= */
.hero {
  position: relative; isolation: isolate;
  height: 100vh; height: 100svh; min-height: 600px;
  overflow: hidden; overflow: clip;
  color: var(--crema);
  background: linear-gradient(180deg, #1B2A3A 0%, var(--noche-2) 60%, var(--noche) 100%);
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity 1.4s var(--ease-out); }
.hero__video.is-playing { opacity: 1; }
/* Sombra suave: abajo a la izquierda (titular) y un velo muy leve arriba (mancheta) y al pie (pie de foto) */
.hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 120px at 50% 0, rgba(11, 13, 33, .62) 0%, rgba(11, 13, 33, .34) 55%, rgba(11, 13, 33, 0) 100%),
    linear-gradient(180deg, rgba(11, 13, 33, .74) 0, rgba(11, 13, 33, .5) 64px, rgba(11, 13, 33, .18) 124px, rgba(11, 13, 33, 0) 200px),
    radial-gradient(72% 62% at 0% 100%, rgba(11, 13, 33, .78) 0%, rgba(11, 13, 33, .6) 42%, rgba(11, 13, 33, .2) 70%, rgba(11, 13, 33, 0) 88%),
    radial-gradient(42% 30% at 100% 100%, rgba(11, 13, 33, .7) 0%, rgba(11, 13, 33, .48) 45%, rgba(11, 13, 33, 0) 90%),
    radial-gradient(24% 18% at 100% 0%, rgba(11, 13, 33, .34) 0%, rgba(11, 13, 33, 0) 100%),
    linear-gradient(0deg, rgba(11, 13, 33, .42) 0, rgba(11, 13, 33, 0) 150px);
}
.hero__inner {
  position: relative; height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; align-content: end; column-gap: 2rem;
  padding-bottom: calc(clamp(36px, 6.5vh, 64px) + env(safe-area-inset-bottom));
}
.hero__main { display: grid; justify-items: start; gap: 18px; }
.hero__title {
  max-width: 14em;
  font-size: calc(clamp(1.9rem, 3vw, 3.1rem) * var(--ds, 1));
  text-shadow: 0 0 2px rgba(11, 13, 33, .25), 0 0 22px rgba(11, 13, 33, .4);
}
.hero__link { text-shadow: 0 0 2px rgba(11, 13, 33, .4), 0 0 12px rgba(11, 13, 33, .55); }
.hero__aside { display: flex; align-items: center; gap: 18px; padding-bottom: .3em; }
.hero__cap { color: var(--crema); text-shadow: 0 0 2px rgba(11, 13, 33, .55), 0 0 10px rgba(11, 13, 33, .72); }
.hero__cap span { display: inline-block; transition: opacity .45s var(--ease-out); }
.hero__cap span.is-swapping { opacity: 0; }
.hero__pause {
  position: relative; display: inline-flex; align-items: center; gap: 18px;
  min-width: 44px; min-height: 44px; margin-block: -12px;
  color: var(--crema); text-shadow: 0 0 2px rgba(11, 13, 33, .45), 0 0 12px rgba(11, 13, 33, .6);
  transition: color .3s;
}
.hero__pause::before { content: ""; width: 1px; height: 11px; background: rgba(244, 239, 236, .5); transition: opacity .3s; }
/* Mientras cambia el pie de foto, el filete no se queda solo */
.hero__aside:has(.is-swapping) .hero__pause::before { opacity: 0; }
.hero__pause:hover { color: var(--crema); }
.hero__pause:focus-visible { outline-offset: 2px; }

/* Entrada: tras el telón */
.js:not(.is-loaded) .hero__media { transform: scale(1.1); }
.is-loaded .hero__media { transform: none; transition: transform 2.8s var(--ease-out) .05s; }
.js:not(.is-loaded) [data-hero-fade] { opacity: 0; transform: translateY(26px); }
.is-loaded [data-hero-fade] {
  opacity: 1; transform: none;
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: calc(.6s + var(--i, 0) * .14s);
}
.js:not(.is-loaded) .hero__title .stop { transform: scale(0); }
.is-loaded .hero__title .stop { transform: none; transition: transform .8s var(--ease-out) 1.45s; }
.js:not(.is-loaded) .header__bar { opacity: 0; translate: 0 -40%; }
.is-loaded .header__bar { opacity: 1; translate: 0 0; transition: opacity 1.2s var(--ease-out) .7s, translate 1.2s var(--ease-out) .7s, height .6s var(--ease-out); }
.is-ready .header__bar { transition: height .6s var(--ease-out); }

/* =========================================================
   N.º 01 — Nosotros
   ========================================================= */
.about { padding: var(--sy) 0 calc(var(--sy) / 2); background: var(--crema); }
.about__fig { position: relative; grid-column: 1 / span 5; align-self: start; }
.about__frame {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; aspect-ratio: 4 / 5; max-height: 78svh;
  border-radius: var(--r); background: var(--crema-2);
}
.about__img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; max-width: none; object-fit: cover; }
.about__cap { position: absolute; left: 0; top: calc(100% + 14px); }
.about__body { grid-column: 8 / span 5; align-self: stretch; display: flex; flex-direction: column; }
/* La entradilla arriba, sobre su filete; el texto al pie, a ras de la foto */
.about__body .no { margin-bottom: auto; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.statement {
  max-width: 18em; margin-top: clamp(22px, 3vh, 32px);
  font-size: calc(clamp(1.5rem, 2.2vw, 2.3rem) * var(--ds, 1)); line-height: 1.16;
  color: var(--tinta);
}
.lw { display: inline; }
.js .lw__i { opacity: var(--o, .18); transition: opacity .25s linear; }
.about__line { max-width: 40ch; margin-top: clamp(18px, 2.4vh, 26px); color: var(--mute); }
.about__link { align-self: flex-start; margin-top: 10px; margin-bottom: -.6em; }
.js [data-clip] { clip-path: inset(100% 0 0 0 round var(--r)); }
.js [data-clip] img { transform: scale(1.18); }
.js [data-clip].is-in { clip-path: inset(0 0 0 0 round var(--r)); transition: clip-path 1.6s var(--ease-io); }
.js [data-clip].is-in img { transform: none; transition: transform 2.2s var(--ease-out) .1s; }

/* =========================================================
   N.º 02 — La selección: galería horizontal (scroll nativo y arrastre)
   ========================================================= */
.sel {
  --img-h: clamp(340px, min(calc(clamp(320px, 38vw, 600px) * 1.25), calc(100svh - 290px)), 750px);
  --card-w: calc(var(--img-h) * .8);
  position: relative; overflow: hidden; overflow: clip;
  padding: calc(var(--sy) / 2) 0 var(--sy);
  background: var(--crema);
}
.sel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding-bottom: 10px; border-bottom: 1px solid var(--hair);
}
.sel__head .link { margin-block: -.4em; }
.sel__head .link::before { display: none; }
.sel__rail { margin-top: 34px; will-change: translate; }
.sel__track {
  position: relative;
  display: flex; align-items: flex-start; gap: clamp(20px, 2.4vw, 40px);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-inline: var(--edge); scroll-padding-inline: var(--edge);
  scrollbar-width: none; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.sel__track::-webkit-scrollbar { display: none; }
.sel__track:focus-visible { outline-offset: -2px; }
.sel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.sel__track.is-dragging a { pointer-events: none; }
.card { position: relative; flex: 0 0 var(--card-w); min-width: 0; scroll-snap-align: start; }
.card__media { position: relative; height: var(--img-h); overflow: hidden; isolation: isolate; border-radius: var(--r); background: var(--crema-2); }
.card__zoom { position: absolute; inset: 0; display: block; overflow: hidden; transition: transform 1.8s var(--ease-out); }
.card__img { position: absolute; top: 0; left: -6%; width: 112%; max-width: none; height: 100%; object-fit: cover; object-position: var(--op, 50%) 50%; }
.card:hover .card__zoom, .card:focus-within .card__zoom { transform: scale(1.04); }
.card__cap { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); margin-top: 16px; }
.card__n { padding-top: .2em; color: var(--mute); font-variant-numeric: tabular-nums; }
.card__title { font-family: var(--f-text); font-size: .95rem; font-weight: 500; line-height: 1.35; letter-spacing: 0; color: var(--tinta); }
.card__a { background: linear-gradient(var(--oro), var(--oro)) 0 100% / 0 1px no-repeat; transition: background-size .8s var(--ease-out); }
.card:hover .card__a { background-size: 100% 1px; }
.card__a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__a:focus-visible { outline: none; }
.card__a:focus-visible::after { outline: 1px solid var(--oro); outline-offset: 6px; }
.card__meta { margin-top: 5px; color: var(--mute); }

/* Aparición de las tarjetas (se desplaza el contenido, no la tarjeta: así el snap no se mueve) */
.js .sel__track .card { opacity: 0; transition: opacity 1.6s var(--ease-out) calc(var(--i, 0) * 90ms); }
.js .sel__track .card > * { translate: 80px 0; transition: translate 1.8s var(--ease-out) calc(var(--i, 0) * 90ms); }
.js .sel__track.is-in .card { opacity: 1; }
.js .sel__track.is-in .card > * { translate: none; } /* none: el enlace de la tarjeta vuelve a cubrir la foto */

/* Progreso: filete con relleno de oro, contador y flechas */
.sel__foot { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); margin-top: clamp(24px, 3.6vh, 36px); }
.sel__bar { position: relative; flex: 1; height: 1px; background: var(--hair); }
.sel__bar i { position: absolute; inset: 0; background: var(--oro); transform: scaleX(var(--p, .1429)); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.sel__count { flex: none; color: var(--antracita); font-variant-numeric: tabular-nums; }
.sel__nav { display: flex; margin-right: -12px; }
.sel__btn { display: grid; place-items: center; width: 44px; height: 44px; color: var(--antracita); transition: opacity .3s, color .3s; }
.sel__btn .arrow { width: 22px; height: 10px; transition: transform .6s var(--ease-out); }
.sel__btn[data-prev]:hover .arrow { transform: translateX(-3px); }
.sel__btn[data-next]:hover .arrow { transform: translateX(3px); }
.sel__btn[aria-disabled="true"] { opacity: .28; pointer-events: none; }
.js .sel__foot { opacity: 0; translate: 0 20px; transition: opacity 1.6s var(--ease-out) .5s, translate 1.6s var(--ease-out) .5s; }
.js .sel__foot.is-in { opacity: 1; translate: 0 0; }

/* =========================================================
   N.º 03 — La costa (noche)
   ========================================================= */
.coast {
  --row-pad: clamp(8px, 1.55vh, 18px);
  position: relative;
  padding-block: var(--sy);
  background: var(--noche); color: var(--crema);
}
.coast__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem 3rem; padding-bottom: 10px; }
.coast .zone:first-child .zone__link { padding-top: calc(var(--row-pad) + 10px); }
.coast__line { font-size: .95rem; line-height: 1.5; color: var(--mute-d); }
.zones { border-top: 1px solid var(--hair-d); }
.zone__link {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center;
  padding: var(--row-pad) 0;
  border-bottom: 1px solid var(--hair-d);
  transition: opacity .6s var(--ease-out);
}
.zone__n { grid-column: 1; color: var(--mute-d); font-variant-numeric: tabular-nums; }
.zone__name {
  grid-column: 2 / span 7;
  font-size: calc(min(clamp(1.8rem, 3.2vw, 3.2rem), 5.6vh) * var(--ds, 1)); line-height: 1.1;
  transition: transform .9s var(--ease-out);
}
.zone__name .stop { width: 7px; height: 7px; }
.zone__go {
  grid-column: 10 / span 3; justify-self: end;
  display: inline-flex; align-items: center; gap: .9em; color: var(--text-d);
  opacity: 0; transform: translateX(-10px);
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-out);
}
.zone__thumb { display: none; }
.zones.is-hover .zone:not(.is-active) .zone__link { opacity: .3; }
.zone__link:focus-visible { opacity: 1 !important; outline-offset: -1px; }
.zone.is-active .zone__name { transform: translateX(1.2rem); }
.zone.is-active .zone__go, .zone__link:focus-visible .zone__go { opacity: 1; transform: none; }
/* Las filas llegan escalonadas */
.js .zones .zone { opacity: 0; translate: 0 30px; transition: opacity 1.4s var(--ease-out), translate 1.4s var(--ease-out); transition-delay: calc(var(--k, 0) * 70ms); }
.js .zones.is-rows .zone { opacity: 1; translate: 0 0; }

/* La foto que acompaña a la fila: centrada en el cursor */
.zone-float { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .zone-float {
    position: fixed; left: 0; top: 0; z-index: 40; display: block;
    width: clamp(240px, 19vw, 330px); aspect-ratio: 3 / 2; overflow: hidden;
    border-radius: 4px; background: var(--noche-2);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
    pointer-events: none; opacity: 0; visibility: hidden; scale: .7;
    transition: opacity .5s var(--ease-out), scale .7s var(--ease-out), visibility 0s linear .5s;
  }
  .zone-float.is-on { opacity: 1; visibility: visible; scale: 1; transition: opacity .7s var(--ease-out), scale .7s var(--ease-out), visibility 0s; }
  .zone-float img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.12); transition: opacity .55s var(--ease-out), transform 1.1s var(--ease-out);
  }
  .zone-float img.is-active { opacity: 1; transform: none; }
}

/* =========================================================
   N.º 04 — Vender / Comprar: dos fotos limpias con su texto al pie.
   La señalada se ensancha; el titular tiene medida fija, así que no se recompone.
   ========================================================= */
.duo { padding-block: var(--sy); background: var(--crema-2); }
.duo .no { padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.duo__wrap { padding-inline: var(--pad-x); margin-top: 34px; }
.duo__frame { display: flex; gap: var(--gap); max-width: var(--max-w); margin-inline: auto; }
.duo__panel {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  transition: flex-grow 1.75s var(--ease-out);
}
.duo__media {
  position: relative; height: clamp(340px, calc(100svh - 350px), 600px);
  overflow: hidden; isolation: isolate; border-radius: var(--r); background: var(--crema);
}
.duo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 1.8s var(--ease-out); }
.duo__panel--sell .duo__img { object-position: 24% 55%; }
.duo__panel--buy .duo__img { object-position: 42% 50%; }
.duo__content {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: last baseline; column-gap: 24px;
  padding-top: 20px;
}
.duo__k { grid-column: 1 / -1; color: var(--mute); }
.duo__title {
  max-width: 8.6em; margin-top: 8px;
  font-size: calc(clamp(1.5rem, 2vw, 2.1rem) * var(--ds, 1)); line-height: 1.08;
  color: var(--tinta); text-wrap: balance;
}
.duo__link { justify-self: end; }
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .duo__panel:hover { flex-grow: 1.35; }
  .duo__panel:hover .duo__img { transform: scale(1); }
}
.js .duo__content > * { opacity: 0; transform: translateY(24px); transition: opacity 2s var(--ease-out), transform 2s var(--ease-out); }
.js .duo__frame.is-in .duo__content > * { opacity: 1; transform: none; }
.duo__content > :nth-child(2) { transition-delay: .08s; }
.duo__content > :nth-child(3) { transition-delay: .16s; }
.duo__panel + .duo__panel .duo__content > :nth-child(1) { transition-delay: .12s; }
.duo__panel + .duo__panel .duo__content > :nth-child(2) { transition-delay: .2s; }
.duo__panel + .duo__panel .duo__content > :nth-child(3) { transition-delay: .28s; }

/* =========================================================
   Cierre a sangre (Sierra Bermeja; ?c=2: el puerto al atardecer) que se funde en noche
   ========================================================= */
.closing {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: clamp(620px, 100vh, 1040px); min-height: clamp(620px, 100svh, 1040px);
  background: var(--noche);
  color: var(--crema);
}
.closing__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* Gibraltar (x 50 %, y 35 % de la foto) queda arriba, siempre por encima del texto */
.closing__img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none; object-fit: cover; object-position: 50% 88%; transform-origin: 50% 60%; }
.closing--port .closing__img { object-position: 50% 30%; }
.closing__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 52% at 0% 100%, rgba(11, 13, 33, .5) 0%, rgba(11, 13, 33, .26) 50%, rgba(11, 13, 33, 0) 80%),
    linear-gradient(0deg, var(--noche) 0%, var(--noche) 3%, rgba(11, 13, 33, .76) 20%, rgba(11, 13, 33, .34) 40%, rgba(11, 13, 33, 0) 58%);
}
.closing--port .closing__shade {
  background:
    linear-gradient(0deg, var(--noche) 0%, var(--noche) 4%, rgba(11, 13, 33, .84) 24%, rgba(11, 13, 33, .34) 50%, rgba(11, 13, 33, 0) 70%),
    linear-gradient(90deg, rgba(11, 13, 33, .3) 0%, rgba(11, 13, 33, 0) 50%);
}
.closing__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 3rem;
  padding-top: 30vh; padding-bottom: calc(clamp(48px, 8vh, 88px) + env(safe-area-inset-bottom));
}
.closing__title { font-size: calc(clamp(1.9rem, 3vw, 3.1rem) * var(--ds, 1)); text-shadow: 0 1px 22px rgba(11, 13, 33, .3); }
.closing__lines { display: grid; gap: 4px; margin-top: 22px; font-size: 1rem; line-height: 1.6; color: rgba(244, 239, 236, .92); }
.closing__lines a { color: var(--crema); }
.closing__cap { color: var(--text-d); text-align: right; max-width: 19rem; padding-bottom: .35em; text-wrap: balance; }
.js [data-split] .stop { transform: scale(0); transition: transform .8s var(--ease-out) .9s; }
.js [data-split].is-in .stop { transform: none; }

/* =========================================================
   Pie (noche, mínimo)
   ========================================================= */
.footer { position: relative; overflow: hidden; padding-top: clamp(28px, 4vw, 56px); background: var(--noche); color: var(--crema); }
.footer__brand { overflow: hidden; padding-top: .2rem; }
.footer__word {
  display: inline-block; padding-top: .12em; padding-bottom: .04em;
  font-size: 11vw; letter-spacing: .06em;
  color: rgba(244, 239, 236, .92);
  will-change: transform;
}
.footer__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px;
  margin-top: clamp(18px, 2.6vw, 36px); padding: 20px 0;
  border-top: 1px solid var(--hair-d);
  font-size: .8rem; line-height: 1.5; color: rgba(244, 239, 236, .72);
}
.footer__links { display: flex; gap: 0; }
.footer__links li + li::before { content: "·"; margin: 0 .55em; color: var(--mute-d); }
.footer__links a { transition: color .3s; }
.footer__links a:hover, .footer__links a:focus-visible { color: var(--crema); }
.footer__credits { padding: 0 0 calc(26px + env(safe-area-inset-bottom)); font-size: .72rem; line-height: 1.5; color: var(--mute-d); }

/* =========================================================
   Apariciones (solo con JS)
   ========================================================= */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .14em; margin-block: -.14em; }
.w__i { display: inline-block; }
.js [data-split] .w__i { transform: translate3d(0, 110%, 0); transition: transform 1.6s var(--ease-out); transition-delay: calc(var(--i) * 60ms + var(--d, 0ms)); }
.js [data-split].is-in .w__i { transform: none; }
.js [data-reveal] { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity 2s var(--ease-out), transform 2.5s var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.is-missing { visibility: hidden; }

/* =========================================================
   Responsive
   ========================================================= */
/* Tabletas grandes en vertical y pantallas medianas */
@media (max-width: 1023px) {
  /* Columnas estrechas: el enlace pasa debajo del titular */
  .duo__content { grid-template-columns: minmax(0, 1fr); }
  .duo__link { justify-self: start; margin-top: 6px; }
  .zone__name { grid-column: 2 / span 8; }
  .zone__go { grid-column: 10 / span 3; }
}

@media (max-width: 900px) {
  .about .grid { display: flex; flex-direction: column; }
  .about__body { display: contents; }
  .about .no { order: 1; }
  .about__fig { order: 2; align-self: stretch; margin-top: 34px; }
  .statement { order: 3; margin-top: 52px; }
  .about__line { order: 4; }
  .about__link { order: 5; align-self: flex-start; }
  .about__frame { width: min(100%, calc(72svh * .8)); }
  .about__cap { position: static; margin-top: 12px; }
}

@media (max-width: 767px) {
  :root { --hh: 64px; --sy: clamp(72px, 18vw, 96px); }
  .header.is-solid { --hh: 56px; }
  .menu-open .header { --hh: 64px; }
  /* La misma mancheta que en escritorio: Menú · GARCÍA NAVARRO · Contacto, en pequeño */
  .header__bar { column-gap: 10px; }
  .masthead { font-size: clamp(.68rem, 2.9vw, .8rem); letter-spacing: calc(var(--caps-track, .22em) * .85); margin-right: calc(-.85 * var(--caps-track, .22em)); }
  .header__menu, .header__contact { font-size: .62rem; letter-spacing: .16em; }
  .header__menu { gap: 9px; padding-right: 0; }
  .header__lines { width: 18px; }
  .header__contact { padding-left: 0; }

  /* Portada: titular y enlace a la izquierda; el pie de foto, abajo a la derecha (como en escritorio) */
  .hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: 22px; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .hero__title { font-size: calc(clamp(1.9rem, 8.2vw, 2.3rem) * var(--ds, 1)); text-shadow: 0 1px 2px rgba(11, 13, 33, .35), 0 2px 24px rgba(11, 13, 33, .45); }
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(11, 13, 33, .76) 0, rgba(11, 13, 33, .52) 56px, rgba(11, 13, 33, .18) 110px, rgba(11, 13, 33, 0) 160px),
      linear-gradient(0deg, rgba(11, 13, 33, .82) 0%, rgba(11, 13, 33, .68) 26%, rgba(11, 13, 33, .42) 42%, rgba(11, 13, 33, .12) 56%, rgba(11, 13, 33, 0) 68%);
  }
  .hero__aside { justify-self: end; gap: 14px; padding-bottom: 0; }
  .hero__pause { gap: 14px; }

  /* N.º 01 */
  .about { padding-top: var(--sy); }

  /* N.º 02: la misma galería, asoma la siguiente tarjeta; cabecera y flechas como en escritorio */
  .sel { --card-w: min(64vw, 320px); --img-h: calc(var(--card-w) * 1.25); }
  .sel__head .link { margin-block: -.4em; font-size: .82rem; }
  .sel__more { display: none; }
  .sel__rail { margin-top: 28px; }
  .sel__track { scroll-snap-type: x mandatory; gap: 14px; }
  .card__cap { grid-template-columns: 2rem minmax(0, 1fr); margin-top: 12px; }
  .card__title { font-size: .88rem; }

  /* N.º 03: la lista de escritorio, sin miniaturas; una flecha fina indica que se puede tocar */
  .coast__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .zone__link { grid-template-columns: 1.9rem minmax(0, 1fr) auto; column-gap: 12px; padding: 14px 0; }
  .zone__n { grid-column: 1; }
  .zone__name { grid-column: 2; font-size: calc(clamp(1.45rem, 6.2vw, 1.9rem) * var(--ds, 1)); }
  .zone__go { grid-column: 3; font-size: 0; gap: 0; opacity: .55; transform: none; }
  .zone__go .arrow { width: 22px; height: 10px; }
  .zones.is-hover .zone:not(.is-active) .zone__link { opacity: 1; }
  .zone.is-active .zone__name { transform: none; }

  /* N.º 04: las dos fotos lado a lado, como en escritorio */
  .duo__wrap { margin-top: 28px; }
  .duo__frame { gap: 14px; }
  .duo__media { height: auto; aspect-ratio: 4 / 5; }
  .duo__img { transform: none; }
  .duo__content { padding-top: 14px; }
  .duo__k { font-size: .6rem; letter-spacing: .16em; }
  .duo__title { margin-top: 6px; font-size: calc(clamp(1.1rem, 4.9vw, 1.35rem) * var(--ds, 1)); line-height: 1.12; }
  .duo__link { margin-top: 4px; font-size: .78rem; gap: .5em; }
  .duo__link .arrow { width: 1.3em; }

  /* Cierre */
  .closing__img { top: -20%; }
  .closing__shade {
    background:
      linear-gradient(0deg, var(--noche) 0%, var(--noche) 4%, rgba(11, 13, 33, .82) 30%, rgba(11, 13, 33, .46) 50%, rgba(11, 13, 33, 0) 72%);
  }
  .closing--port .closing__shade {
    background: linear-gradient(0deg, var(--noche) 0%, var(--noche) 5%, rgba(11, 13, 33, .88) 34%, rgba(11, 13, 33, .56) 56%, rgba(11, 13, 33, 0) 78%);
  }
  .closing__inner { grid-template-columns: minmax(0, 1fr); padding-top: 36vh; }
  .closing__lines { gap: 0; margin-top: 14px; }
  .closing__lines li { padding-block: 10px; line-height: 1.5; }
  .closing__cap { text-align: left; padding-bottom: 0; }

  /* Pie */
  .footer__row { justify-content: flex-start; gap: 0 20px; }
  .footer__row > p { flex: 1 0 100%; padding-bottom: 4px; }
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Menú */
  .menu__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; padding-top: calc(64px + 32px + env(safe-area-inset-top)); }
  .menu__nav, .menu__foot { grid-column: 1 / -1; }
  .menu__nav { align-self: start; }
  .menu__preview { display: none; }
  .menu__list a { font-size: calc(clamp(2rem, 9vw, 2.5rem) * var(--ds, 1)); padding: .18em 0; }
  .menu__n { width: 1.8rem; }
  .menu__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .menu__info > span:first-child, .menu__info a { display: block; }
  .menu__info a { width: max-content; margin-top: 6px; }
  .menu__sep { display: none; }
}

/* Móvil en horizontal: la portada cabe en la pantalla */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero__title { font-size: calc(clamp(1.5rem, 3.4vw, 2rem) * var(--ds, 1)); }
  .sel { --img-h: 300px; }
  .duo__media { height: 62vh; }
}

@media (hover: none) {
  .zone-float { display: none !important; }
}

/* Dedos: zonas de toque de 44 px sin mover el diseño */
@media (pointer: coarse) {
  .link { min-height: 44px; }
  .ul::after, .menu__foot a::after { content: ""; position: absolute; inset: -12px -6px; }
  .menu__foot a { position: relative; }
  .menu__lang a::after { inset: -12px -14px; }
}

/* Movimiento reducido: todo quieto y visible */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .loader { display: none; }
  .js [data-reveal], .js [data-split] .w__i, .js .sel__foot, .js .zones .zone, .js .sel__track .card, .js .sel__track .card > *, .js .duo__content > *,
  .js:not(.is-loaded) [data-hero-fade], .js:not(.is-loaded) .header__bar { opacity: 1; transform: none; translate: none; }
  .js:not(.is-loaded) .hero__media, .js [data-clip] img, .js [data-split] .stop, .js:not(.is-loaded) .hero__title .stop { transform: none; }
  .js [data-clip] { clip-path: none; }
  .js .lw__i { opacity: 1; }
}