/* Landing de escritorio. Carbón para la maqueta, hueso para la obra y ocre como acento. El móvil tiene su propia hoja: movil.css */
.landing { --nav-h: 76px; }
.plano { font: 400 .72rem/1.5 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
.landing h2 { font-weight: 500; letter-spacing: -.04em; line-height: 1; font-size: clamp(2.6rem, 1.3rem + 4.4vw, 6rem); }

/* Navegación sobre oscuro */
.landing .nav { position: fixed; inset: 0 0 auto; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--dark-ink); transition: background-color .3s, border-color .3s; }
.landing .nav.is-scrolled { background: rgb(28 31 36 / .95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgb(255 255 255 / .1); }
.landing .brand img { width: 196px; }
.landing .nav__links a { color: rgb(244 241 234 / .72); font-size: .9rem; }
.landing .nav__links a::after { background: var(--accent-fill); height: 2px; }
.landing .nav__links a[aria-current="true"] { color: #fff; }
@media (hover: hover) and (pointer: fine) { .landing .nav__links a:hover { color: #fff; } }
.nav__tel { font: 400 .86rem/1 "Geist Mono", monospace; text-decoration: none; padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / .4); }
.landing .nav__toggle { border-color: rgb(255 255 255 / .3); }
:where(.landing) :focus-visible { outline-color: currentColor; }

.btn--blanco { background: #a8763e; color: #1c1f24; }
@media (hover: hover) and (pointer: fine) { .btn--blanco:hover { background: #bd8a50; } }
.enlace { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; border-bottom: 1px solid currentColor; }
.enlace i { transition: transform var(--ui) var(--ease); }
@media (hover: hover) and (pointer: fine) { .enlace:hover i { transform: translateX(4px); } }
.enlace--tinta { margin-top: clamp(40px, 5vw, 64px); font-weight: 500; }

/* Portada */
.portada { position: relative; isolation: isolate; height: 100dvh; min-height: 640px; background: var(--dark); color: var(--dark-ink); overflow: hidden; }
.portada::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgb(28 31 36 / .9) 0%, rgb(28 31 36 / .62) 34%, transparent 62%), linear-gradient(0deg, rgb(28 31 36 / .55), transparent 30%), linear-gradient(180deg, rgb(28 31 36 / .6), transparent 16%); }
.poster, .portada canvas, .proceso__fijo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster { object-fit: cover; transition: opacity .6s; }
[data-escena].is-3d .poster { opacity: 0; }
.portada canvas { z-index: 0; }
.portada__texto { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(36px, 6vh, 72px); pointer-events: none; }
.portada__texto a { pointer-events: auto; }
.portada .plano { color: rgb(244 241 234 / .68); }
.portada h1 { margin-top: 20px; font-size: clamp(3.4rem, 1rem + 6.6vw, 8.6rem); line-height: .94; letter-spacing: -.055em; font-weight: 500; }
.portada__sub { margin-top: 26px; max-width: 38ch; font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); color: rgb(244 241 234 / .78); }
.portada__acciones { margin-top: 30px; display: flex; align-items: center; gap: 28px; }
.portada__nota { position: absolute; z-index: 1; right: max(32px, calc((100vw - 1320px) / 2)); bottom: 20px; max-width: 42ch; text-align: right; color: rgb(244 241 234 / .86) !important; text-shadow: 0 1px 8px rgb(28 31 36 / .7); }

/* Cabeceras de sección */
.cabecera { display: grid; gap: 18px; align-items: end; }
@media (min-width: 900px) { .cabecera { grid-template-columns: 7fr 5fr; gap: 48px; } }
.cabecera p { color: var(--ink-2); max-width: 44ch; font-size: 1.08rem; }

/* Galería escalonada: ninguna foto supera su resolución real */
.obra { padding: var(--section) 0; }
.galeria { list-style: none; margin: clamp(48px, 7vw, 104px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(56px, 7vw, 112px) clamp(16px, 2vw, 28px); }
.pieza a { display: block; text-decoration: none; }
.pieza figure { overflow: hidden; background: var(--surface-2); }
.pieza img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.03); transition: transform .9s var(--ease); }
@media (hover: hover) and (pointer: fine) { .pieza a:hover img { transform: scale(1.025); } }
.pieza h3 { margin-top: 16px; font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; }
.pieza--a { grid-column: 1 / span 8; } .pieza--a figure { aspect-ratio: 5 / 3; }
.pieza--b { grid-column: 9 / span 4; margin-top: 18%; } .pieza--b figure { aspect-ratio: 4 / 5; }
.pieza--c { grid-column: 1 / span 5; } .pieza--c figure { aspect-ratio: 4 / 3; }
.pieza--d { grid-column: 6 / span 7; margin-top: -9%; } .pieza--d figure { aspect-ratio: 4 / 3; }
.pieza--e { grid-column: 2 / span 6; } .pieza--e figure { aspect-ratio: 3 / 2; }
.pieza--f { grid-column: 8 / span 5; margin-top: 16%; } .pieza--f figure { aspect-ratio: 16 / 9; }
.ficha { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px 16px; font: 400 .74rem/1.4 "Geist Mono", monospace; font-variant-numeric: tabular-nums; }
.ficha dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }

/* Recorrido 3D con fotos reales. Sin .con-recorrido, la sección es la galería de arriba */
#recorrido-3d { display: none; }
.obra__barra, .obra__n { display: none; }
.obra__aviso { color: var(--ink-3); }
.obra__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 32px; }
.obra.con-recorrido { height: 760vh; padding: 0; background: var(--dark); color: var(--dark-ink); }
.con-recorrido .obra__fijo { position: sticky; top: 0; height: 100dvh; overflow: hidden; isolation: isolate; }
.con-recorrido #recorrido-3d { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.con-recorrido .obra__capa { position: relative; height: 100%; padding-block: calc(var(--nav-h) + 28px) 32px; display: flex; flex-direction: column; pointer-events: none; }
.con-recorrido .obra__capa a { pointer-events: auto; }
.con-recorrido .cabecera { display: block; }
.con-recorrido .cabecera h2 { max-width: 7ch; font-size: clamp(2.2rem, 1.2rem + 3vw, 4.4rem); }
.con-recorrido .cabecera p { margin-top: 16px; max-width: 26ch; font-size: 1rem; color: rgb(244 241 234 / .74); }
.con-recorrido .galeria { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: min(330px, 26vw); margin: auto 0 0; }
.con-recorrido .pieza { grid-area: 1 / 1; margin: 0; align-self: end; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s, transform .5s var(--ease), visibility 0s .35s; }
.con-recorrido .pieza.is-activo { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .5s var(--ease); }
.con-recorrido .pieza figure { display: none; }
.con-recorrido .pieza h3 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.2rem); line-height: 1.08; letter-spacing: -.03em; }
.con-recorrido .ficha { border-top-color: var(--accent-fill); }
.con-recorrido .ficha dt { color: #cf9f68; }
.con-recorrido .obra__pie { margin-top: 22px; }
.con-recorrido .obra__pie .enlace { margin: 0; }
.con-recorrido .obra__aviso { color: rgb(244 241 234 / .62); }
.con-recorrido .obra__n { display: inline; margin-right: 14px; color: #cf9f68; }
.con-recorrido .obra__barra { display: block; margin-top: 14px; height: 1px; background: rgb(255 255 255 / .18); }
.obra__barra i { display: block; height: 100%; background: var(--accent-fill); transform: scaleX(0); transform-origin: left; }

/* Proceso ligado al scroll */
.proceso { height: 620vh; background: var(--dark); color: var(--dark-ink); }
.proceso__fijo { position: sticky; top: 0; height: 100dvh; overflow: hidden; isolation: isolate; }
.proceso__fijo::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgb(28 31 36 / .86) 0%, rgb(28 31 36 / .5) 30%, transparent 52%); }
.proceso__capa { z-index: 1; position: relative; height: 100%; padding-block: calc(var(--nav-h) + 28px) 40px; display: flex; flex-direction: column; pointer-events: none; }
.proceso h2 { max-width: 11ch; font-size: clamp(2.2rem, 1.2rem + 3vw, 4.4rem); }
.pasos { list-style: none; margin: auto 0 0; padding: 0; width: min(420px, 38vw); display: grid; }
.paso { grid-area: 1 / 1; display: grid; grid-template-columns: 48px 1fr; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .45s var(--ease); }
.paso.is-activo { opacity: 1; transform: none; }
.paso > span { font: 400 .8rem/2.1 "Geist Mono", monospace; color: #cf9f68; }
.paso h3 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.paso p { margin-top: 10px; color: rgb(244 241 234 / .74); }
.proceso__barra { margin-top: 28px; height: 1px; background: rgb(255 255 255 / .18); }
.proceso__barra i { display: block; height: 100%; background: var(--accent-fill); transform: scaleX(0); transform-origin: left; }

/* Archivo */
.archivo { padding: var(--section) 0; background: var(--surface); }
.totales { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.totales > div { padding: 14px 16px 0 0; }
.totales dt { font: 400 .72rem/1.4 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.totales dd { margin-top: 6px; font-size: clamp(1.8rem, 1rem + 2.6vw, 3.6rem); font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.archivo__rejilla { margin-top: 32px; display: grid; gap: 24px; }
@media (min-width: 1000px) { .archivo__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; } }
.archivo__vista { position: relative; min-height: 460px; }
.archivo__vista canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.archivo__ficha { position: absolute; left: 0; top: 0; display: grid; gap: 2px; font: 400 .76rem/1.45 "Geist Mono", monospace; color: var(--ink-2); pointer-events: none; }
.archivo__ficha strong { font: 500 1.05rem/1.25 "Geist", sans-serif; color: var(--ink); letter-spacing: -.01em; }
.archivo__lista { max-height: 640px; overflow-y: auto; border-top: 1px solid var(--line); scrollbar-width: thin; }
.archivo__lista a { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; padding: 9px 4px; align-items: baseline; text-decoration: none; border-bottom: 1px solid var(--line); font-size: .94rem; transition: background-color .15s, padding .25s var(--ease); }
.archivo__lista a > span:first-child, .archivo__lista a > span:last-child { font: 400 .76rem/1.4 "Geist Mono", monospace; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.archivo__lista small { display: block; color: var(--ink-3); font-size: .8rem; }
.archivo__lista a.is-activo { background: var(--accent-fill); color: var(--on-accent); padding-inline: 12px; }
.archivo__lista a.is-activo span, .archivo__lista a.is-activo small { color: inherit; }
.nota { margin-top: 20px; max-width: 74ch; color: var(--ink-3); font-size: .88rem; }

/* Servicios: índice tipográfico */
.servicios { padding: var(--section) 0; }
.indice { margin-top: clamp(40px, 5vw, 72px); border-top: 2px solid var(--accent-fill); }
.indice a { display: grid; grid-template-columns: 1fr auto; gap: 4px 32px; padding: 24px 0; align-items: baseline; text-decoration: none; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .indice a { grid-template-columns: 6fr 5fr auto; } }
.indice h3 { font-size: clamp(1.5rem, 1rem + 2vw, 2.8rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; transition: transform .5s var(--ease); }
.indice p { color: var(--ink-2); }
.indice i { font-size: 1.3rem; color: var(--ink-3); transition: transform var(--ui) var(--ease); }
@media (hover: hover) and (pointer: fine) { .indice a:hover h3 { transform: translateX(14px); } .indice a:hover i { transform: translate(3px, -3px); color: var(--accent); } }

/* En obra */
.enobra { padding-bottom: var(--section); }
.enobra h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.8rem); max-width: 16ch; }
.enobra__fotos { margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.enobra__fotos figure { aspect-ratio: 3 / 4; overflow: hidden; }
.enobra__fotos figure:nth-child(even) { margin-top: 48px; }
.enobra__fotos img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.03); }

/* Estudio */
.estudio { padding: var(--section) 0; background: var(--accent-fill); color: var(--on-accent); --ink: #1c1f24; --ink-3: #1c1f24; --line: rgb(28 31 36 / .3); }
.estudio__rejilla { display: grid; gap: 40px; align-items: end; }
@media (min-width: 900px) { .estudio__rejilla { grid-template-columns: 4fr 8fr; gap: clamp(48px, 7vw, 112px); } }
.estudio figure { max-width: 420px; }
.estudio figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 16%; filter: saturate(.9) contrast(1.02); }
.estudio__cita { font-size: clamp(1.6rem, 1rem + 2.2vw, 3.2rem); line-height: 1.12; letter-spacing: -.035em; max-width: 24ch; text-wrap: balance; }
.landing .estudio h2 { margin-top: clamp(32px, 4vw, 56px); font-size: 1.4rem; letter-spacing: -.02em; line-height: 1.2; }
.estudio__cargo { margin-top: 6px; color: var(--ink-3); max-width: 52ch; }
.totales--estudio { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; }
.totales--estudio dd { font-size: clamp(1.7rem, 1rem + 1.8vw, 2.8rem); }

/* Contacto */
.contacto { padding: var(--section) 0; background: var(--dark); color: var(--dark-ink); }
.contacto__rejilla { display: grid; gap: 56px; }
@media (min-width: 1000px) { .contacto__rejilla { grid-template-columns: 1.15fr 1fr; gap: 96px; } }
.landing .contacto h2 { font-size: clamp(3rem, 1.4rem + 5.6vw, 7.4rem); letter-spacing: -.05em; text-wrap: balance; }
.vias { margin-top: 48px; border-top: 1px solid rgb(255 255 255 / .22); }
.vias a { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; padding: 16px 0; text-decoration: none; font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); border-bottom: 1px solid rgb(255 255 255 / .22); transition: padding .3s var(--ease); }
.vias .plano { color: rgb(244 241 234 / .6); }
@media (hover: hover) and (pointer: fine) { .vias a:hover { padding-left: 10px; } }
.contacto .form { background: transparent; color: inherit; padding: 0; }
.contacto .field input, .contacto .field select, .contacto .field textarea { background: rgb(255 255 255 / .05); color: inherit; border-color: rgb(255 255 255 / .28); }
.contacto .field select option { color: #111; }
.contacto .field__error, .contacto .form__status { color: inherit; }
.contacto .field [aria-invalid="true"] { border-color: #fff; }
.contacto :focus-visible { outline-color: #fff; }

.pie { padding: 22px 0; background: var(--dark); color: rgb(244 241 234 / .62); font-size: .86rem; border-top: 1px solid rgb(255 255 255 / .12); }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; }
.pie ul { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.pie li { white-space: nowrap; }
.pie a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pie a:hover { color: #fff; } }

/* Ventana estrecha de escritorio (o ?escritorio=1 en móvil) */
@media (max-width: 1040px) {
  .nav__tel { display: none; }
  .pasos { width: min(420px, 60vw); }
}
@media (max-width: 860px) {
  .landing .nav__links { background: var(--dark); border-bottom-color: rgb(255 255 255 / .12); }
  .landing .nav__links a { border-bottom-color: rgb(255 255 255 / .12); }
  .landing .nav__cta-mobile a { color: #fff; }
  .galeria > li { grid-column: 1 / -1; margin-top: 0; }
  .totales--estudio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enobra__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enobra__fotos figure:nth-child(even) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .proceso { height: 420vh; }
  .paso { transition: none; transform: none; }
}

/* Vivienda: misma mecánica que Proceso; aquí el lienzo además se arrastra */
.vivienda { height: 760vh; }
#vivienda-3d { cursor: grab; touch-action: pan-y; }
#vivienda-3d:active { cursor: grabbing; }
.vivienda .proceso__capa { position: relative; }
.vivienda__nota { margin-top: 14px; max-width: 78ch; color: rgb(244 241 234 / .62); }
@media (prefers-reduced-motion: reduce) { .vivienda { height: 520vh; } }

/* Vivienda: sección fija y muy larga; todo lo mueve el scroll */
.casa { height: 1500vh; background: #14171b; color: var(--dark-ink, #f4f1ea); }
.casa__fijo { position: sticky; top: 0; height: 100dvh; overflow: hidden; isolation: isolate; container-type: size; }
.casa__fijo canvas, .casa .poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.casa .poster { object-fit: cover; transition: opacity .6s; }
.casa.is-3d .poster { opacity: 0; }
.casa__fijo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(20 23 27 / .45) 0%, transparent 24%, transparent 62%, rgb(20 23 27 / .72) 100%); }
.casa__etiquetas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.casa__etiqueta { position: absolute; top: 0; left: 0; padding: 4px 9px; font: 400 .72rem/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: #f4f1ea; background: rgb(20 23 27 / .78); white-space: nowrap; }
.casa__capa { position: relative; z-index: 3; height: 100%; pointer-events: none; padding: calc(var(--nav-h) + 24px) max(24px, 4vw) 28px; display: flex; flex-direction: column; }
.casa__titulo { max-width: 18ch; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); text-shadow: 0 1px 18px rgb(0 0 0 / .45); }
.casa__cap { position: absolute; left: max(24px, 4vw); right: max(24px, 4vw); bottom: 96px; max-width: 520px; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .5s; }
.casa__cap.is-activo { opacity: 1; transform: none; }
.casa__cap h3 { font-size: clamp(2rem, 1.3rem + 2vw, 3.4rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.08; text-shadow: 0 1px 16px rgb(0 0 0 / .55); }
.casa__cap p { margin-top: 8px; color: rgb(244 241 234 / .88); text-shadow: 0 1px 10px rgb(0 0 0 / .6); }
.casa__pie { margin-top: auto; }
.casa__nota { margin-top: 12px; max-width: 78ch; color: rgb(244 241 234 / .78); font-size: .74rem; }
.casa__titulo { transition: opacity .4s; }
.casa.is-avanzada .casa__titulo { opacity: 0; }
.casa.sin-3d { height: 100vh; }
.casa.sin-3d .casa__cap:last-of-type { opacity: 1; transform: none; }

/* Cifras del archivo dentro de la cabecera de «Obra construida»: compactas, en la columna del texto. */
.obra__totales { margin-top: 28px; max-width: 380px; display: grid; grid-template-columns: repeat(3, auto); gap: 22px; border-top: 1px solid rgb(244 241 234 / .22); padding-top: 12px; }
.obra__totales > div { border: 0; padding: 0; }
.obra__totales dt { font: 400 .72rem/1.4 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .06em; color: rgb(244 241 234 / .6); }
.obra__totales dd { margin-top: 4px; font-size: 1.35rem; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }