/* Portobello Real Estate — estilos */
:root {
  --arena: #ede6da;
  --arena-2: #e2d8c7;
  --claro: #f7f3ec;
  --tinta: #1a1916;
  --tinta-2: #5a554c;
  --linea: rgba(26, 25, 22, .16);
  --terracota: #b5582f;
  --oliva: #5d6a4c;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
  --cab-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--arena);
  color: var(--tinta);
  font: 400 clamp(15px, 1.05vw, 17px)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
h1, h2, h3 { font-weight: 400; margin: 0; }
::selection { background: var(--terracota); color: var(--claro); }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }

.saltar { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--tinta); color: var(--claro); padding: 8px 14px; }
.saltar:focus { left: 8px; }

.eyebrow {
  font: 500 12px/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 1.2em;
}

/* grano sutil */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Cargador ---------- */
.loader {
  position: fixed; inset: 0; z-index: 300;
  background: var(--tinta); color: var(--claro);
  display: grid; place-items: center;
  transition: clip-path 1.1s var(--ease-io);
  clip-path: inset(0 0 0 0);
}
.loader img { width: min(340px, 60vw); opacity: 0; transform: translateY(14px); animation: loaderIn .9s var(--ease) .1s forwards; }
.loader__barra { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 48px; height: 1px; background: rgba(247, 243, 236, .2); }
.loader__barra i { display: block; height: 100%; width: 0; background: var(--claro); transition: width .6s var(--ease); }
.loader__num { position: absolute; right: var(--gutter); bottom: 60px; font: 400 clamp(48px, 9vw, 140px)/1 var(--serif); }
.loader.is-fuera { clip-path: inset(0 0 100% 0); }
@keyframes loaderIn { to { opacity: 1; transform: none; } }

/* ---------- Cabecera ---------- */
.cab {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--cab-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gutter);
  transition: background .5s var(--ease), transform .6s var(--ease), color .4s, height .4s var(--ease);
}
.cab__logo { position: relative; display: flex; align-items: flex-end; gap: 10px; }
.cab__logo .logo { width: clamp(118px, 11vw, 150px); height: auto; transition: opacity .4s; }
.cab__logo .logo--claro { position: absolute; left: 0; top: 0; opacity: 0; }
.cab__sub { font: 500 10px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; padding-bottom: 6px; white-space: nowrap; }
.cab__nav { display: flex; gap: clamp(20px, 3vw, 44px); font-size: 14px; }
.cab__nav a { position: relative; padding: 6px 0; }
.cab__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.cab__nav a:hover::after, .cab__nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.cab__menu { display: none; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.cab__burger { display: grid; gap: 6px; width: 28px; }
.cab__burger i { height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.cab.is-oculta { transform: translateY(-100%); }
.cab.is-solida { background: rgba(237, 230, 218, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); height: 68px; }

/* cabecera clara sobre el hero */
.cab-clara .cab:not(.is-solida) { color: var(--claro); }
.cab-clara .cab:not(.is-solida) .logo--tinta { opacity: 0; }
.cab-clara .cab:not(.is-solida) .logo--claro { opacity: 1; }
body.menu-abierto .cab { color: var(--claro); background: transparent; backdrop-filter: none; }
body.menu-abierto .cab .logo--tinta { opacity: 0; }
body.menu-abierto .cab .logo--claro { opacity: 1; }
body.menu-abierto .cab__burger i:first-child { transform: translateY(3.75px) rotate(45deg); }
body.menu-abierto .cab__burger i:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* menú a pantalla completa (móvil) */
.menu { position: fixed; inset: 0; z-index: 90; color: var(--claro); display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--cab-h) + 24px) var(--gutter) 32px; }
.menu[hidden] { display: none; }
.menu__fondo { position: absolute; inset: 0; z-index: -1; background: var(--tinta); clip-path: circle(0% at calc(100% - 40px) 40px); transition: clip-path .8s var(--ease-io); }
.menu.is-on .menu__fondo { clip-path: circle(150% at calc(100% - 40px) 40px); }
.menu__nav { display: grid; gap: 6px; }
.menu__nav > a { font: 400 clamp(40px, 11vw, 72px)/1.05 var(--serif); display: flex; align-items: flex-start; gap: 12px; opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.menu__nav small { font: 500 11px/1 var(--sans); letter-spacing: .1em; padding-top: .8em; opacity: .6; }
.menu__sub { display: grid; gap: 4px; padding: 6px 0 14px 34px; font-size: 15px; opacity: 0; transition: opacity .6s .3s; }
.menu__sub a { opacity: .75; }
.menu.is-on .menu__nav > a { opacity: 1; transform: none; }
.menu.is-on .menu__nav > a:nth-of-type(2) { transition-delay: .08s; }
.menu.is-on .menu__nav > a:nth-of-type(3) { transition-delay: .16s; }
.menu.is-on .menu__sub { opacity: 1; }
.menu__datos { display: grid; gap: 4px; font-size: 14px; opacity: .8; }

/* ---------- Revelados ---------- */
.linea { display: block; overflow: hidden; padding-bottom: .06em; }
.linea > span { display: inline-block; transform: none; transition: transform 1.2s var(--ease); }
.js .linea > span { transform: translateY(110%); }
.js .is-listo .linea > span { transform: none; }
.linea:nth-child(2) > span { transition-delay: .1s; }
[data-reveal] { transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(40px); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-words] .palabra { display: inline-block; opacity: .14; transition: opacity .6s; }
[data-reveal-words] .palabra.is-on { opacity: 1; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 28px; border-radius: 999px;
  background: var(--tinta); color: var(--claro);
  font: 500 14px/1 var(--sans); letter-spacing: .04em;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease);
}
.boton::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--terracota); border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--ease); }
.boton:hover::before { transform: none; }
.boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .5s var(--ease); }
.boton:hover svg { transform: translateX(4px); }
.boton--claro { background: var(--claro); color: var(--tinta); }
.boton--claro:hover { color: var(--claro); }
.boton[disabled] { opacity: .5; pointer-events: none; }

.chip { display: inline-block; padding: 7px 12px; border: 1px solid currentColor; border-radius: 999px; font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.chip--vendido { background: var(--terracota); border-color: var(--terracota); color: var(--claro); }

/* ---------- Hero inicio ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; color: var(--claro); overflow: hidden; background: var(--tinta); }
.hero__slides, .hero__slide { position: absolute; inset: 0; margin: 0; }
.hero__slide { opacity: 0; transition: opacity 1.6s var(--ease); }
.hero__slide.is-on { opacity: 1; z-index: 1; }
.hero__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7s linear; }
.hero__slide.is-on .hero__img { transform: scale(1); }
.hero__velo { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(20, 18, 15, .45) 0%, rgba(20, 18, 15, 0) 30%, rgba(20, 18, 15, .15) 55%, rgba(20, 18, 15, .7) 100%); }
.hero__txt { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(150px, 24vh, 240px); }
.hero__eyebrow { font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 24px; opacity: 0; transition: opacity 1s .4s; }
.is-listo .hero__eyebrow { opacity: .9; }
.hero__titulo { font: 400 clamp(60px, 13vw, 250px)/.86 var(--serif); letter-spacing: -.02em; }
.hero__titulo .linea:nth-child(2) { padding-left: clamp(0px, 12vw, 260px); }
.hero__pie { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hero__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; flex: 1; max-width: 1100px; }
.hero__lista a { display: block; font-size: 13px; line-height: 1.3; opacity: .55; transition: opacity .4s; position: relative; padding-bottom: 12px; }
.hero__lista a span { display: block; font-size: 11px; letter-spacing: .1em; margin-bottom: 4px; }
.hero__lista a i { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: rgba(247, 243, 236, .25); }
.hero__lista a i::after { content: ''; position: absolute; inset: 0; background: var(--claro); transform: scaleX(0); transform-origin: left; }
.hero__lista a.is-on, .hero__lista a:hover { opacity: 1; }
.hero__lista a.is-on i::after { animation: progreso 6s linear forwards; }
@keyframes progreso { to { transform: scaleX(1); } }
.hero__scroll { display: grid; justify-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.hero__scroll i { width: 1px; height: 56px; background: rgba(247, 243, 236, .3); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--claro); animation: gota 2s var(--ease-io) infinite; }
@keyframes gota { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding: 22px 0; background: var(--terracota); color: var(--claro); }
.marquee__pista { display: flex; width: max-content; gap: 40px; align-items: center; animation: marquee 40s linear infinite; font: 400 clamp(28px, 4vw, 56px)/1 var(--serif); }
.marquee__pista b { font: 400 18px/1 var(--sans); color: #f2c9a8; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Intro + cifras ---------- */
.intro { padding: clamp(80px, 14vw, 200px) var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.intro__txt { grid-column: 3 / -1; font: 400 clamp(28px, 3.6vw, 60px)/1.12 var(--serif); margin: 0; letter-spacing: -.01em; }
.cifras { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: clamp(48px, 8vw, 120px) 0 0; border-top: 1px solid var(--linea); }
.cifras div { padding-top: 20px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.cifras dt { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.cifras dd { margin: 0; font: 400 clamp(56px, 8vw, 128px)/.9 var(--serif); }

/* ---------- Secciones ---------- */
.seccion-cab { padding: 0 var(--gutter); margin-bottom: clamp(40px, 6vw, 80px); display: flex; align-items: baseline; gap: 24px; }
.seccion-cab--fila { justify-content: space-between; }
.seccion-cab__num { font-size: 14px; margin: 0; color: var(--tinta-2); }
.seccion-cab__titulo { font: 400 clamp(48px, 8.5vw, 150px)/.92 var(--serif); letter-spacing: -.02em; }
.seccion-cab__ayuda { font-size: 13px; color: var(--tinta-2); margin: 0; }

.enlace-grande { display: flex; align-items: center; justify-content: space-between; margin: clamp(80px, 10vw, 160px) var(--gutter) 0; padding: 32px 0; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); font: 400 clamp(32px, 5vw, 80px)/1 var(--serif); transition: color .4s, padding .6s var(--ease); }
.enlace-grande svg { width: clamp(32px, 4vw, 64px); height: auto; fill: none; stroke: currentColor; stroke-width: 1; transition: transform .6s var(--ease); }
.enlace-grande:hover { color: var(--terracota); padding-left: 24px; }
.enlace-grande:hover svg { transform: translateX(-24px); }

/* ---------- Invierte ---------- */
.invierte { position: relative; min-height: 92svh; display: flex; align-items: flex-end; color: var(--claro); overflow: hidden; }
.invierte__img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; transform: translateY(var(--py, 0)); }
.invierte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 18, 15, .75), rgba(20, 18, 15, .1) 70%); }
.invierte__txt { position: relative; z-index: 1; padding: var(--gutter); padding-bottom: clamp(48px, 8vw, 120px); max-width: 1100px; }
.invierte__txt h2 { font: 400 clamp(36px, 5.4vw, 92px)/1 var(--serif); margin-bottom: 40px; letter-spacing: -.01em; }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: var(--claro); padding: clamp(80px, 12vw, 180px) var(--gutter) 28px; }
.pie__cta { border-bottom: 1px solid rgba(247, 243, 236, .15); padding-bottom: clamp(60px, 8vw, 120px); }
.pie__eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin: 0 0 16px; }
.pie__grande { font: 400 clamp(52px, 10vw, 180px)/.92 var(--serif); letter-spacing: -.02em; display: inline-block; transition: color .4s; }
.pie__grande:hover { color: #d98b62; }
.pie__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding: 56px 0; font-size: 14px; line-height: 1.8; }
.pie__grid h2 { font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .5; margin-bottom: 18px; }
.pie__grid p { margin: 0; }
.pie__grid a { opacity: .85; transition: opacity .3s; }
.pie__grid a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.pie__logo { width: 160px; margin-bottom: 16px; }
.pie__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; opacity: .5; border-top: 1px solid rgba(247, 243, 236, .15); padding-top: 24px; }

/* ---------- Cabeceras de página ---------- */
.pagina-cab { padding: calc(var(--cab-h) + clamp(60px, 10vw, 160px)) var(--gutter) clamp(48px, 6vw, 96px); }
.pagina-cab__titulo { font: 400 clamp(64px, 15vw, 260px)/.88 var(--serif); letter-spacing: -.03em; }
.pagina-cab--contacto .linea:nth-child(2) { padding-left: clamp(0px, 14vw, 300px); }

/* ---------- Índice de proyectos ---------- */
.indice { padding: 0 var(--gutter) clamp(80px, 12vw, 180px); position: relative; }
.indice__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.indice__fila a { display: grid; grid-template-columns: 60px 1fr 200px 220px; align-items: center; gap: 24px; padding: clamp(20px, 2.6vw, 36px) 0; border-bottom: 1px solid var(--linea); transition: color .4s, padding .6s var(--ease); position: relative; }
.indice__num { font-size: 12px; color: var(--tinta-2); }
.indice__nombre { font: 400 clamp(32px, 5vw, 84px)/1 var(--serif); letter-spacing: -.01em; transition: transform .6s var(--ease); }
.indice__zona { font-size: 14px; color: var(--tinta-2); }
.indice__estado { text-align: right; }
.indice__thumb { display: none; }
.indice__lista:hover .indice__fila a { color: rgba(26, 25, 22, .35); }
.indice__lista .indice__fila a:hover { color: var(--tinta); }
.indice__fila a:hover .indice__nombre { transform: translateX(24px); font-style: italic; }
.indice__preview { position: fixed; left: 0; top: 0; z-index: 5; width: clamp(240px, 24vw, 380px); aspect-ratio: 4 / 5; pointer-events: none; overflow: hidden; opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .4s, transform .5s var(--ease); border-radius: 2px; }
.indice__preview img { width: 100%; height: 100%; object-fit: cover; }
.indice__preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- Ficha ---------- */
.ficha-hero { position: relative; height: 100svh; min-height: 560px; color: var(--claro); overflow: hidden; background: var(--tinta); }
.ficha-hero__media { position: absolute; inset: 0; transition: clip-path 1.6s var(--ease-io); }
.js .ficha-hero__media { clip-path: inset(12% 12% 12% 12%); }
.js .is-listo .ficha-hero__media { clip-path: inset(0 0 0 0); }
.ficha-hero__img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.15 - var(--hz, 0) * .15)); }
.ficha-hero__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 15, .45), rgba(20, 18, 15, 0) 30%, rgba(20, 18, 15, .65)); }
.ficha-hero__txt { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(32px, 6vw, 72px); }
.ficha-hero__txt .eyebrow a { opacity: .75; }
.ficha-hero__titulo { font: 400 clamp(56px, 11vw, 200px)/.9 var(--serif); letter-spacing: -.02em; }
.ficha-hero__dir { margin: 20px 0 0; font-size: 14px; opacity: .85; max-width: 46ch; }
.chip--hero { position: absolute; right: var(--gutter); top: calc(var(--cab-h) + 20px); background: rgba(20, 18, 15, .3); backdrop-filter: blur(6px); }
.chip--hero.chip--vendido { background: var(--terracota); }

.ficha-intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: clamp(80px, 12vw, 180px) var(--gutter) clamp(48px, 6vw, 96px); }
.ficha-intro__col:first-child { grid-column: 1 / span 4; }
.ficha-intro__col:last-child { grid-column: 6 / -1; }
.ficha-intro__h { font: 400 clamp(24px, 2.4vw, 36px)/1.15 var(--serif); max-width: 18ch; }
.ficha-intro__desc { font: 400 clamp(28px, 3.4vw, 56px)/1.12 var(--serif); margin: 0 0 40px; letter-spacing: -.01em; }

.ficha-cifras { padding: 0 var(--gutter); }
.cifras--ficha { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0; border-top: 1px solid var(--tinta); }
.cifras--ficha div { flex-direction: column; border-right: 1px solid var(--linea); padding: 28px 24px 28px 0; }
.cifras--ficha div:last-child { border-right: 0; }

.ficha-claves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; padding: clamp(48px, 6vw, 96px) var(--gutter); }
.clave { background: var(--claro); padding: clamp(28px, 3.4vw, 48px); border-radius: 2px; display: flex; gap: 20px; align-items: flex-start; }
.clave h2 { font: 400 clamp(24px, 2.4vw, 38px)/1.1 var(--serif); }
.clave__ico { font-size: 20px; line-height: 1.4; color: var(--terracota); }
.clave--acento { background: var(--oliva); color: var(--claro); }
.clave--acento .clave__ico { color: #e7c9a5; }

.ficha-galeria { padding: clamp(48px, 6vw, 96px) 0; overflow: hidden; }
.galeria { display: flex; gap: 16px; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.galeria::-webkit-scrollbar { display: none; }
.galeria.is-arrastrando { cursor: grabbing; scroll-snap-type: none; }
.galeria.is-arrastrando .galeria__item { pointer-events: none; }
.galeria__item { flex: 0 0 auto; height: clamp(320px, 62vh, 680px); scroll-snap-align: start; overflow: hidden; border-radius: 2px; background: var(--arena-2); }
.galeria__item img { height: 100%; width: auto; max-width: none; object-fit: cover; transition: transform 1.2s var(--ease); }
.galeria__item:hover img { transform: scale(1.04); }
.galeria--obra .galeria__item { height: clamp(260px, 44vh, 480px); }
.ficha-galeria--obra { background: var(--arena-2); }

.ficha-planos { padding: clamp(48px, 6vw, 96px) 0; }
.planos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 0 var(--gutter); }
.plano { background: #fff; padding: clamp(16px, 2vw, 32px); text-align: left; border-radius: 2px; position: relative; }
.plano img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; transition: transform .8s var(--ease); }
.plano:hover img { transform: scale(1.03); }
.plano span { display: flex; justify-content: space-between; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding-top: 16px; border-top: 1px solid var(--linea); margin-top: 16px; }
.plano i { font-style: normal; font-size: 18px; line-height: 1; }
.docs { padding: 24px var(--gutter) 0; display: flex; gap: 16px; flex-wrap: wrap; }
.doc { display: inline-flex; gap: 16px; align-items: center; padding: 18px 24px; border: 1px solid var(--tinta); border-radius: 999px; font-size: 14px; transition: background .4s, color .4s; }
.doc svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.doc:hover { background: var(--tinta); color: var(--claro); }

.ficha-ubicacion { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); padding: clamp(80px, 10vw, 160px) var(--gutter); background: var(--tinta); color: var(--claro); }
.ubicacion__dir { font-size: 15px; opacity: .75; margin: 24px 0 40px; max-width: 40ch; }
.distancias { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(247, 243, 236, .2); }
.distancias li { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(247, 243, 236, .2); }
.distancias span { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.distancias b { font: 400 clamp(28px, 2.8vw, 44px)/1 var(--serif); }

.ficha-entorno { padding: clamp(80px, 10vw, 160px) 0; }
.entorno { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: 0 var(--gutter); }
.entorno__item { margin: 0; overflow: hidden; border-radius: 2px; }
.entorno__item > div { height: 100%; }
.entorno__item img { width: 100%; height: 115%; object-fit: cover; transform: translateY(var(--py, 0)); }
.entorno__item--0 { grid-column: 1 / span 7; aspect-ratio: 4 / 3; }
.entorno__item--1 { grid-column: 9 / span 4; aspect-ratio: 3 / 4; margin-top: 18vw; }
.entorno__item--2 { grid-column: 3 / span 6; aspect-ratio: 16 / 10; margin-top: -6vw; }

.ficha-form { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); padding: clamp(80px, 10vw, 160px) var(--gutter); background: var(--claro); }
.ficha-form h2 { font: 400 clamp(48px, 7vw, 120px)/.95 var(--serif); margin-bottom: 24px; }
.ficha-form__txt > p:not(.eyebrow) { max-width: 36ch; color: var(--tinta-2); }
.ficha-form__tel { font: 400 22px/1.5 var(--serif); color: var(--tinta) !important; margin-top: 32px; }

.siguiente { display: block; position: relative; height: 80svh; min-height: 420px; overflow: hidden; color: var(--claro); padding: var(--gutter); }
.siguiente__media { position: absolute; inset: 0; z-index: -1; background: var(--tinta); }
.siguiente__media img { width: 100%; height: 100%; object-fit: cover; opacity: .6; transform: scale(1.06); transition: transform 1.6s var(--ease), opacity .8s; }
.siguiente:hover .siguiente__media img { transform: scale(1); opacity: .8; }
.siguiente .eyebrow { position: absolute; top: var(--gutter); left: var(--gutter); }
.siguiente__nombre { position: absolute; left: var(--gutter); bottom: var(--gutter); margin: 0; font: 400 clamp(56px, 11vw, 200px)/.9 var(--serif); letter-spacing: -.02em; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 260; background: rgba(20, 18, 15, .96); display: grid; place-items: center; padding: 64px var(--gutter); opacity: 0; transition: opacity .4s; }
.lightbox[hidden] { display: none; }
.lightbox.is-on { opacity: 1; }
.lightbox img { max-width: 100%; max-height: calc(100svh - 128px); width: auto; object-fit: contain; }
.lightbox__cerrar { position: absolute; top: 20px; right: var(--gutter); color: var(--claro); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); color: var(--claro); font-size: 28px; width: 56px; height: 56px; border: 1px solid rgba(247, 243, 236, .3); border-radius: 50%; }
.lightbox__nav--prev { left: var(--gutter); }
.lightbox__nav--next { right: var(--gutter); }
.lightbox__cont { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: var(--claro); font-size: 12px; letter-spacing: .14em; margin: 0; }

/* ---------- Formularios ---------- */
.form { display: grid; gap: 28px; }
.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.form__trampa { position: absolute; left: -9999px; }
.campo { display: grid; gap: 6px; position: relative; }
.campo span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea { font: 400 18px/1.4 var(--sans); color: var(--tinta); background: transparent; border: 0; border-bottom: 1px solid var(--linea); padding: 10px 0; border-radius: 0; transition: border-color .3s; width: 100%; appearance: none; }
.campo select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a1916'/%3E%3C/svg%3E") right 4px center no-repeat; }
.campo textarea { resize: vertical; min-height: 110px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 0; border-color: var(--tinta); }
.campo.is-error input, .campo.is-error textarea { border-color: var(--terracota); }
.check { display: flex; gap: 12px; font-size: 14px; color: var(--tinta-2); align-items: flex-start; }
.check input { margin-top: 4px; accent-color: var(--terracota); width: 16px; height: 16px; }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.check.is-error { color: var(--terracota); }
.form__pie { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.form__estado { margin: 0; font-size: 14px; }
.form__estado.is-ok { color: var(--oliva); }
.form__estado.is-error { color: var(--terracota); }

/* ---------- Contacto ---------- */
.contacto { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 8vw, 140px); padding: 0 var(--gutter) clamp(80px, 12vw, 180px); }
.contacto__lead { font: 400 clamp(24px, 2.6vw, 40px)/1.15 var(--serif); margin: 0 0 48px; max-width: 26ch; }
.contacto__datos h2 { font: 400 clamp(36px, 4vw, 60px)/1 var(--serif); margin-bottom: 32px; }
.contacto__datos dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 18px 16px; border-top: 1px solid var(--linea); padding-top: 24px; font-size: 15px; }
.contacto__datos dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); padding-top: 3px; }
.contacto__datos dd { margin: 0; }
.contacto__datos a:hover { color: var(--terracota); }

/* ---------- Texto ---------- */
.texto { padding: 0 var(--gutter) clamp(80px, 12vw, 160px); max-width: 860px; }
.texto__grande { font: 400 clamp(26px, 3vw, 44px)/1.15 var(--serif); }
.pendiente { padding: 20px 24px; border: 1px dashed var(--terracota); color: var(--terracota); font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero__lista { display: none; }
  .hero__pie { justify-content: flex-end; }
  .pie__grid { grid-template-columns: 1fr 1fr; }
  .pie__grid > div:first-child { grid-column: 1 / -1; }
  .indice__fila a { grid-template-columns: 40px 1fr auto; }
  .indice__zona { display: none; }
}
@media (max-width: 860px) {
  :root { --cab-h: 68px; }
  .cab__nav { display: none; }
  .cab__menu { display: inline-flex; }
  .intro__txt, .cifras { grid-column: 1 / -1; }
  .ficha-intro { grid-template-columns: 1fr; }
  .ficha-intro__col:first-child, .ficha-intro__col:last-child { grid-column: 1; }
  .ficha-claves, .ficha-ubicacion, .ficha-form, .contacto, .planos { grid-template-columns: 1fr; }
  .cifras--ficha { grid-template-columns: 1fr 1fr; }
  .cifras--ficha div { border-right: 0; border-bottom: 1px solid var(--linea); padding: 22px 0; }
  .entorno { grid-template-columns: 1fr; }
  .entorno__item--0, .entorno__item--1, .entorno__item--2 { grid-column: 1; margin-top: 0; aspect-ratio: 4 / 3; }
  .form__fila { grid-template-columns: 1fr; }
  .indice__fila a { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .indice__num { display: none; }
  .indice__estado { text-align: left; order: 3; }
  .indice__thumb { display: block; order: -1; aspect-ratio: 16 / 10; overflow: hidden; }
  .indice__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .indice__lista:hover .indice__fila a { color: inherit; }
  .indice__fila a:hover .indice__nombre { transform: none; }
  .indice__preview { display: none; }
  .galeria__item { height: 58vh; max-width: 86vw; }
  .galeria__item img { width: 100%; height: 100%; }
  .seccion-cab__ayuda { display: none; }
  .lightbox__nav { display: none; }
  .cifras { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .contacto__datos dl { grid-template-columns: 1fr; gap: 4px; }
  .contacto__datos dd { margin-bottom: 14px; }
}
@media (max-width: 480px) {
  .cab__sub { display: none; }
  .pie__grid { grid-template-columns: 1fr; }
  .cifras--ficha { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
  .js .linea > span { transform: none; }
  .js .ficha-hero__media { clip-path: none; }
  [data-reveal-words] .palabra { opacity: 1; }
}

/* ======================================================================
   Mejoras v2: vídeo, transiciones, horizontal, mapa, antes/después, marca
   ====================================================================== */

/* Scroll suave (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Transiciones entre páginas: la imagen del proyecto viaja a la portada de la ficha */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-sale .5s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-entra .7s var(--ease) both; }
::view-transition-group(*) { animation-duration: .9s; animation-timing-function: var(--ease-io); }
@keyframes vt-sale { to { opacity: 0; transform: translateY(-2vh); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(3vh); } }

/* Selector de idioma */
.idiomas { display: flex; gap: 2px; margin-left: clamp(8px, 1.5vw, 20px); padding-left: clamp(12px, 1.6vw, 24px); border-left: 1px solid currentColor; border-color: rgba(127, 127, 127, .35); }
.idiomas a { font-size: 11px; letter-spacing: .12em; padding: 4px 6px !important; opacity: .55; transition: opacity .3s; }
.idiomas a::after { display: none; }
.idiomas a[aria-current], .idiomas a:hover { opacity: 1; }
.cab__nav { align-items: center; }
.menu__datos .idiomas { border: 0; margin: 0 0 16px; padding: 0; }
.menu__datos .idiomas a { font-size: 14px; }

/* Vídeo de portada */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 58% 55%; animation: dolly 22s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.hero.is-pausado .hero__video { animation-play-state: paused; }
/* Travelling lento de cámara sobre el vídeo: ida y vuelta, sin corte visible */
@keyframes dolly {
  from { transform: scale(1.02) translate3d(1.2%, .6%, 0); }
  to { transform: scale(1.2) translate3d(-2.2%, -1.4%, 0); }
}
.hero__play { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(247, 243, 236, .45); display: grid; place-items: center; color: var(--claro); transition: background .3s, border-color .3s; flex: none; }
.hero__play:hover { background: rgba(247, 243, 236, .15); border-color: var(--claro); }
.hero__play-ico { width: 12px; height: 14px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hero.is-pausado .hero__play-ico { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.hero__pie { align-items: flex-end; }
.hero--video .hero__lista a { opacity: .75; }
.hero--video .hero__lista a i::after { display: none; }

/* La doble «l» del logo como elemento de marca */
.ll { display: flex; gap: 7px; height: clamp(80px, 12vw, 160px); align-items: flex-end; }
.ll i { display: block; width: 1.5px; height: 100%; background: currentColor; transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--ease-io); }
.ll i:last-child { height: 82%; transition-delay: .15s; }
.ll.is-visible i { transform: none; }
.ll--intro { grid-column: 1 / span 2; color: var(--terracota); }
.ll--ficha { margin-top: 40px; color: var(--terracota); }
.ll--pie { color: #d98b62; margin-bottom: 32px; height: 90px; }
.loader__ll { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 9px; height: 30vh; }
.loader__ll i { width: 1.5px; background: var(--claro); height: 100%; transform: scaleY(0); transform-origin: top; animation: llCrece 1s var(--ease-io) forwards; }
.loader__ll i:last-child { height: 82%; animation-delay: .12s; }
@keyframes llCrece { to { transform: scaleY(1); } }

/* Proyectos en horizontal */
.horizontal { position: relative; background: var(--tinta); color: var(--claro); }
.horizontal__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.horizontal__cab { display: flex; justify-content: space-between; align-items: baseline; padding: calc(var(--cab-h) + 8px) var(--gutter) 20px; gap: 24px; }
.horizontal__cab h2 { font: 400 clamp(28px, 3.4vw, 56px)/1 var(--serif); }
.horizontal__cont { font-size: 13px; letter-spacing: .14em; margin: 0; opacity: .7; }
.horizontal__pista { flex: 1; display: flex; gap: clamp(16px, 2vw, 32px); padding: 0 var(--gutter); align-items: stretch; will-change: transform; min-height: 0; }
.panel { flex: 0 0 min(72vw, 1100px); position: relative; min-height: 0; }
.panel__enlace { display: grid; grid-template-rows: 1fr auto; height: 100%; }
.panel__media { overflow: hidden; border-radius: 2px; min-height: 0; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.panel__enlace:hover .panel__media img { transform: scale(1.04); }
.panel__info { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 20px; padding: 20px 0 8px; }
.panel__num { font-size: 12px; opacity: .6; grid-row: span 2; }
.panel__nombre { font: 400 clamp(32px, 4vw, 68px)/1 var(--serif); }
.panel__zona { margin: 0; grid-column: 2; font-size: 14px; opacity: .7; }
.panel .chip { grid-row: 1; grid-column: 3; justify-self: end; }
.panel__ver { grid-column: 3; justify-self: end; display: inline-flex; gap: 8px; align-items: center; font-size: 13px; opacity: .8; }
.panel__ver svg, .panel__todos svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.panel--fin { flex-basis: min(40vw, 520px); display: grid; place-items: center; border: 1px solid rgba(247, 243, 236, .2); border-radius: 2px; margin-bottom: 60px; }
.panel__todos { font: 400 clamp(32px, 3.6vw, 60px)/1.05 var(--serif); display: inline-flex; gap: 16px; align-items: center; padding: 24px; text-align: center; transition: color .4s; }
.panel__todos:hover { color: #d98b62; }
.panel__todos svg { width: 36px; height: 36px; stroke-width: 1; }
.horizontal__barra { height: 1px; margin: 16px var(--gutter) 28px; background: rgba(247, 243, 236, .2); }
.horizontal__barra i { display: block; height: 100%; width: 100%; background: var(--claro); transform: scaleX(0); transform-origin: left; }

/* Mapa de Mallorca */
.mapa-isla { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(80px, 12vw, 180px) var(--gutter); background: var(--oliva); color: var(--claro); }
.mapa-isla__txt h2 { font: 400 clamp(44px, 6vw, 100px)/.95 var(--serif); margin-bottom: 28px; }
.mapa-isla__txt p { max-width: 38ch; opacity: .85; }
.mapa-isla__leyenda { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-top: 32px; letter-spacing: .04em; }
.leyenda-punto { width: 10px; height: 10px; border-radius: 50%; background: #f2c9a8; }
.leyenda-rombo { width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid var(--claro); margin-left: 14px; }
.mallorca { width: 100%; height: auto; overflow: visible; }
.mallorca__isla { fill: rgba(247, 243, 236, .1); stroke: rgba(247, 243, 236, .85); stroke-width: 1.4; stroke-linejoin: round; stroke-dasharray: 4000; stroke-dashoffset: 4000; transition: stroke-dashoffset 3s var(--ease-io), fill 1.5s 1.5s; }
.mallorca__rayado { opacity: 0; transition: opacity 1.5s 1.8s; }
.mallorca__raya { stroke: rgba(247, 243, 236, .16); stroke-width: 1; }
.is-dibujado .mallorca__isla { stroke-dashoffset: 0; }
.is-dibujado .mallorca__rayado { opacity: 1; }
.no-js .mallorca__isla, .mallorca--compacto .mallorca__isla { stroke-dashoffset: 0; }
.pin { opacity: 0; transition: opacity .8s 2s; }
.is-dibujado .pin, .mallorca--compacto .pin { opacity: 1; }
.pin__punto { fill: #f2c9a8; }
.pin__onda { fill: none; stroke: #f2c9a8; stroke-width: 1; transform-origin: center; transform-box: fill-box; animation: onda 2.4s var(--ease) infinite; }
@keyframes onda { from { transform: scale(.6); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.pin__guia { stroke: rgba(247, 243, 236, .5); stroke-width: 1; fill: none; }
.pin__zona { font: 400 44px/1 var(--serif); fill: var(--claro); }
.pin__proy { font: 500 21px/1 var(--sans); fill: rgba(247, 243, 236, .78); letter-spacing: .02em; transition: fill .3s; }
.pin a:hover .pin__proy, .pin a:focus .pin__proy { fill: #f2c9a8; text-decoration: underline; }
.pin__txt--izq text { text-anchor: end; }
.pin--oficina rect { fill: none; stroke: var(--claro); stroke-width: 2; }
.mallorca--compacto .pin { opacity: .45; }
.mallorca--compacto .pin.is-activo { opacity: 1; }
.mallorca--compacto .pin__zona { font-size: 40px; }
.mallorca--compacto .pin:not(.is-activo) .pin__onda { display: none; }
.ubicacion__mapa { align-self: center; }
.ficha-ubicacion .boton { margin-top: 40px; }
.contacto__mapa { background: var(--oliva); color: var(--claro); padding: 24px; margin: 32px 0 20px; border-radius: 2px; }

/* Antes y después */
.ficha-ad { padding: clamp(48px, 6vw, 96px) 0; }
.ficha-ad .seccion-cab__ayuda { max-width: 34ch; text-align: right; }
.ad { position: relative; margin: 0 auto; aspect-ratio: var(--ar, 16 / 9); width: min(calc(100% - 2 * var(--gutter)), calc(86svh * var(--ar, 1.78))); overflow: hidden; border-radius: 2px; background: var(--tinta); user-select: none; touch-action: pan-y; }
.ad__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad__antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ad__antes img { filter: saturate(.85); }
.ad__linea { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--claro); pointer-events: none; }
.ad__linea span { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--claro); color: var(--tinta); display: grid; place-items: center; font-size: 22px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.ad__etq { position: absolute; top: 20px; padding: 8px 14px; border-radius: 999px; background: rgba(20, 18, 15, .55); color: var(--claro); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(6px); pointer-events: none; }
.ad__etq--antes { left: 20px; }
.ad__etq--despues { right: 20px; }
.ad__rango { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ad__rango:focus-visible + .ad__linea, .ad:focus-within .ad__linea span { outline: 2px solid var(--terracota); }

/* Intro con la doble l */
.intro { align-items: start; }

@media (max-width: 860px) {
  .idiomas { display: none; }
  .menu__datos .idiomas { display: flex; }
  .horizontal__pin { position: static; height: auto; }
  .horizontal__pista { flex-direction: column; transform: none !important; gap: 48px; }
  .panel { flex: none; }
  .panel__media { aspect-ratio: 4 / 3; }
  .panel__info { grid-template-columns: auto 1fr; }
  .panel .chip, .panel__ver { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 8px; }
  .panel--fin { margin: 0; padding: 32px 0; }
  .horizontal__barra, .horizontal__cont { display: none; }
  .horizontal { padding-bottom: 64px; }
  .mapa-isla { grid-template-columns: 1fr; }
  .pin__zona, .mallorca--compacto .pin__zona { font-size: 70px; }
  .pin__proy { display: none; }
  .pin__punto { r: 10; }
  .ll--intro { grid-column: 1 / -1; height: 70px; }
  .ficha-ad .seccion-cab { flex-direction: column; gap: 8px; }
  .ficha-ad .seccion-cab__ayuda { display: block; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .mallorca__isla { stroke-dashoffset: 0; }
  .mallorca__rayado, .pin { opacity: 1; }
  .ll i { transform: none; }
  @view-transition { navigation: none; }
  .hero__video { animation: none; }
}