/* Tipografías servidas desde el propio sitio (SIL OFL 1.1, ver licencias/). */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fuentes/instrument-serif-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fuentes/instrument-serif-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(fuentes/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url(fuentes/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(fuentes/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(fuentes/inter-latin-700-normal.woff2) format('woff2'); }

:root {
  --noche: #0b1410;
  --papel: #f5f0e6;
  --tinta: #1c2a23;
  --suave: #3b463f;
  --linea: #d9d1c1;
  --oro: #e6cc9a;
  --barro: #8a472a;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--papel);
}
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ol, ul { margin: 0; }
body { background: var(--papel); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--barro); outline-offset: 4px; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shell { width: min(100% - 96px, 1280px); margin-inline: auto; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: .98; }
h1 em, h2 em { color: var(--barro); }
.antetitulo { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--barro); }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 22px; border-radius: 999px; font-size: 15px; font-weight: 600; transition: transform .2s, background .2s; }
.boton:hover { transform: translateY(-2px); }
.boton-claro { background: var(--oro); color: var(--noche); }
.boton-linea { border: 1px solid #fff9eccc; color: #fff9ec; }
.boton-linea:hover { background: #fff9ec1f; }
.boton-oscuro { background: var(--tinta); color: var(--papel); }
.boton-borde { border: 1px solid var(--tinta); }
.boton-borde:hover { background: #1c2a2312; }
.boton:active { transform: translateY(0) scale(.98); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.saltar { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 18px; border-radius: 999px; background: var(--papel); color: var(--tinta); font-weight: 600; transform: translateY(-160%); }
.saltar:focus-visible { transform: none; }

/* Cabecera fija sobre la escena */
.cabecera { position: fixed; z-index: 50; inset: 0 0 auto; color: #fff9ec; transition: background .3s, color .3s; }
.cabecera::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; background: linear-gradient(180deg, #070d0bd9, #070d0b8c 60%, transparent); transition: opacity .3s; }
.cabecera.en-papel::before { opacity: 0; }
.marca:hover { opacity: .8; }
.cabecera-in { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.cabecera nav { display: flex; gap: 32px; font-size: 14px; opacity: .85; }
.cabecera nav a:hover { color: var(--oro); }
.cabecera-cta { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; padding: 0 20px; border-radius: 999px; border: 1px solid currentColor; transition: background .2s; }
.cabecera-cta:hover { background: #fff9ec1f; }
.cabecera.en-papel .cabecera-cta:hover { background: #1c2a2312; }
.cabecera.en-papel { background: #f5f0e6e8; color: var(--tinta); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--linea); }

/* Inicio. Por defecto (sin WebGL, sin JavaScript o con movimiento reducido) es una portada
   fija con el relato en texto; la clase .con-3d activa la escena inmersiva. */
.experiencia { position: relative; background: var(--noche); color: #fff9ec; --alto: min(16.2vw, 28.8svh); }
.escenario { position: relative; padding-bottom: 72px; }
.portada-fija { width: 100%; height: 100svh; min-height: 560px; object-fit: cover; }
.escenario::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: max(100svh, 560px); background: linear-gradient(0deg, #070d0bf0 8%, #070d0b99 42%, transparent 70%); pointer-events: none; }
.con-3d .escenario::before { display: none; }
#escena, .velo, .hogar-velo, .fundido, .hogar-antes, .hogar-despues, .progreso, .pista { display: none; }
.capitulos { padding-block: 24px; }
.capitulo { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 8px clamp(24px, 5vw, 80px); padding-block: 40px; border-top: 1px solid #fff9ec26; }
.capitulo > :not(p:not(.antetitulo)) { grid-column: 1; }
.capitulo > p:not(.antetitulo) { grid-column: 2; grid-row: 1 / span 2; }
.capitulo h1, .capitulo h2 { margin-top: 14px; font-size: clamp(40px, 4.6vw, 72px); text-wrap: balance; }
.capitulo:first-child { position: absolute; z-index: 2; inset: 0 0 auto; height: max(100svh, 560px); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 max(48px, calc((100% - 1280px) / 2)) 64px; border: 0; }
.capitulo:first-child h1 { max-width: 16ch; font-size: clamp(48px, 6.4vw, 100px); }
.capitulo:first-child .acciones { margin-top: 28px; }
.capitulo em { color: var(--oro); }
.capitulo > p:not(.antetitulo) { max-width: 40ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; color: #f1eadc; }
.capitulo .antetitulo { color: var(--oro); }
.capitulo .punto { background: var(--oro); }
.hogar-final { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; padding-top: 40px; border-top: 1px solid #fff9ec26; }
.capitulo:first-child + .capitulo { border-top: 0; }
.hogar-final p { max-width: 32ch; font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; }

.con-3d .experiencia { height: 1000svh; }
.con-3d .escenario { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: 0; }
.con-3d .portada-fija { display: none; }
.con-3d #escena { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.con-3d .velo { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #070d0bc4, #070d0b70 32%, transparent 58%), linear-gradient(0deg, #070d0b8c, transparent 24%), linear-gradient(180deg, #070d0b80, transparent 18%); }
.con-3d .capitulos { display: block; position: absolute; inset: 0; padding: 0; pointer-events: none; }
.con-3d .capitulo, .con-3d .capitulo:first-child { display: block; position: absolute; inset: 50% auto auto 0; height: auto; translate: 0 -50%; max-width: min(46%, 600px); padding: 0; border: 0; opacity: 0; }
.con-3d .capitulo:first-child { opacity: 1; }
.con-3d .capitulo h1, .con-3d .capitulo h2 { margin-top: 18px; font-size: clamp(50px, 6vw, 96px); text-shadow: 0 4px 30px #050a08a0; }
.con-3d .capitulo > p:not(.antetitulo) { margin-top: 20px; max-width: 36ch; font-size: clamp(16px, 1.3vw, 19px); text-shadow: 0 1px 14px #050a08; }

.con-3d .progreso { position: absolute; inset: auto 0 26px; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f1eadc; }
.progreso-pct { min-width: 4ch; font-variant-numeric: tabular-nums; }
.progreso i { height: 1px; background: #fff9ec40; }
.progreso b { display: block; height: 100%; background: var(--oro); transform: scaleX(0); transform-origin: left; }
.progreso > span:last-child { opacity: .75; letter-spacing: .08em; }
.con-3d .pista { display: block; position: absolute; left: 50%; bottom: 64px; translate: -50% 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #f1eadc; animation: pista 2.4s ease-in-out infinite; }
@keyframes pista { 50% { transform: translateY(6px); } }

/* Hogar: la palabra recorta la casa y se abre hasta llenar la pantalla */
.con-3d .hogar-velo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--noche); visibility: hidden; pointer-events: none; }
.con-3d .fundido { display: block; position: absolute; inset: 0; background: var(--noche); opacity: 0; pointer-events: none; }
.con-3d .hogar-antes, .con-3d .hogar-despues { display: block; position: absolute; left: 0; right: 0; padding-inline: 24px; text-align: center; opacity: 0; pointer-events: none; }
.hogar-antes { bottom: calc(50% + var(--alto) / 2 + 26px); font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--oro); }
.hogar-despues { top: calc(50% + var(--alto) / 2 + 26px); font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 28px); color: #f1eadc; }
.con-3d .hogar-final { position: absolute; inset: auto 0 0; padding-block: 140px 70px; border: 0; opacity: 0; visibility: hidden; }
.con-3d .hogar-final::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: linear-gradient(0deg, #070d0bd9, transparent); }

/* Secciones de contenido */
.seccion { padding-block: clamp(80px, 9vw, 128px); }
.seccion h2 { margin-top: 20px; font-size: clamp(40px, 4.6vw, 72px); max-width: 16ch; }
.servicios { list-style: none; padding: 0; margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 3vw, 40px); }
.servicios img, .proceso-imagen, .contacto-imagen { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #d9d1c1; }
.servicios h3 { margin-top: 20px; }
.proceso-imagen, .contacto-imagen { margin-top: 32px; }
.pasos li > span { font-size: 13px; font-weight: 700; color: var(--barro); }
.servicios h3, .pasos h3 { margin-top: 14px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.servicios p, .pasos p, .contacto p { margin-top: 10px; color: var(--suave); line-height: 1.6; }
.proceso { background: #ebe4d6; }
.proceso-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.pasos { list-style: none; padding: 0; }
.pasos li { display: flex; gap: 20px; padding-block: 24px; border-top: 1px solid #cfc5b2; }
.pasos h3 { margin-top: 0; }
.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (min-width: 861px) {
  .seccion { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .seccion.contacto, .seccion.preguntas { display: grid; align-content: center; }
  .contacto > div:last-child { padding-top: clamp(40px, 9vw, 120px); }
}
.contacto ul { margin-top: 18px; padding-left: 20px; line-height: 1.9; }
.contacto li::marker { color: var(--barro); }
.contacto-acciones { margin-top: 28px; }
.contacto .nota { margin-top: 28px; font-size: 13px; line-height: 1.55; }
.pie { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-block: 28px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--suave); }
.pie .marca { color: var(--tinta); }
.pie nav { display: flex; gap: 20px; }
.pie nav a { display: inline-flex; align-items: center; min-height: 44px; }
.pie a:hover { color: var(--barro); }

.servicios-cuatro { grid-template-columns: repeat(4, 1fr); }
.obra-nueva { display: grid; grid-template-columns: minmax(0, 1fr) 2fr; gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--linea); }
.obra-nueva img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.obra-nueva h3 { font-size: 20px; font-weight: 600; }
.obra-nueva p { margin-top: 8px; color: var(--suave); line-height: 1.6; max-width: 52ch; }
@media (max-width: 1100px) { .servicios-cuatro { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } }

/* Para quién: banda oscura con los dos perfiles de cliente */
.para-quien { background: var(--noche); color: #fff9ec; }
.para-quien h2 em { color: var(--oro); }
.para-quien .antetitulo { color: var(--oro); }
.para-quien .punto { background: var(--oro); }
.perfiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: clamp(32px, 4vw, 56px); }
.perfiles article { padding: clamp(24px, 3vw, 40px); border: 1px solid #fff9ec26; border-radius: 6px; }
.perfiles h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.01em; }
.perfiles ul { margin-top: 18px; padding: 0; list-style: none; }
.perfiles li { padding: 14px 0 14px 28px; border-top: 1px solid #fff9ec1f; line-height: 1.55; color: #ece4d5; position: relative; }
.perfiles li::before { content: ""; position: absolute; left: 4px; top: 23px; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); }

/* Preguntas frecuentes */
.preguntas { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq details { border-top: 1px solid var(--linea); }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding-block: 16px; cursor: pointer; font-size: 18px; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--linea); border-radius: 50%; font-weight: 400; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--barro); }
.faq summary:focus-visible { outline: 3px solid var(--barro); outline-offset: 4px; }
.faq details p { padding: 0 48px 20px 0; color: var(--suave); line-height: 1.6; }

/* Página de créditos */
.pagina-texto .pie { border-top: 0; border-bottom: 1px solid var(--linea); }
.texto-legal { max-width: 880px; padding-block: 56px 96px; line-height: 1.6; color: var(--suave); }
.texto-legal h1 { font-size: clamp(44px, 6vw, 72px); color: var(--tinta); }
.texto-legal h2 { margin: 48px 0 12px; font-size: 34px; color: var(--tinta); }
.texto-legal p { margin-top: 14px; }
.texto-legal a { color: var(--barro); text-decoration: underline; text-underline-offset: 3px; }
.texto-legal table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 14px; }
.texto-legal th, .texto-legal td { padding: 10px 12px 10px 0; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
.texto-legal th { color: var(--tinta); font-weight: 600; }

@media (max-width: 860px) {
  .shell { width: calc(100% - 36px); }
  .cabecera nav { display: none; }
  .cabecera-in { min-height: 64px; }
  .cabecera-cta { padding: 9px 14px; font-size: 13px; }
  .capitulo { grid-template-columns: 1fr; }
  .capitulo > p:not(.antetitulo) { grid-column: 1; grid-row: auto; }
  .capitulo:first-child { padding: 0 18px 48px; }
  .acciones .boton { flex: 1 1 100%; }
  .con-3d .velo { background: linear-gradient(0deg, #070d0bf2 6%, #070d0bb8 40%, transparent 66%), linear-gradient(180deg, #070d0b80, transparent 16%); }
  .con-3d .capitulo, .con-3d .capitulo:first-child { top: auto; bottom: 74px; translate: none; max-width: none; right: 0; }
  .con-3d .capitulo h1, .con-3d .capitulo h2 { font-size: clamp(44px, 12vw, 64px); }
  .con-3d .progreso { grid-template-columns: auto auto 1fr; }
  .progreso > span:last-child { display: none; }
  .con-3d .pista { display: none; }
  .hogar-final, .con-3d .hogar-final { flex-direction: column; align-items: start; }
  .con-3d .hogar-final { padding-bottom: 40px; }
  .servicios, .servicios-cuatro, .proceso-in, .contacto, .perfiles, .preguntas, .obra-nueva { grid-template-columns: 1fr; }
  .faq details p { padding-right: 0; }
  .servicios li + li { margin-top: 28px; }
  .pie { flex-direction: column; align-items: start; }
  .texto-legal table, .texto-legal tbody, .texto-legal tr, .texto-legal td { display: block; }
  .texto-legal thead { display: none; }
  .texto-legal tr { padding-block: 10px; border-bottom: 1px solid var(--linea); }
  .texto-legal td { border: 0; padding: 2px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton { transition: none; }
  .boton:hover { transform: none; }
}

/* Captura de la imagen fija (?captura): solo la escena. */
.captura .cabecera, .captura .velo, .captura .capitulos, .captura .progreso, .captura .pista,
.captura .hogar-antes, .captura .hogar-despues, .captura .hogar-final { display: none !important; }

/* ==========================================================================
   Recorrido cinematográfico (portada)
   ========================================================================== */
.cine { position: relative; background: #050807; color: #fff9ec; }
.cine-escena { position: relative; min-height: 100svh; overflow: hidden; }
.cine-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine-velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #050807cc, #05080766 38%, transparent 64%), linear-gradient(0deg, #050807d9, transparent 30%), linear-gradient(180deg, #050807b3, transparent 22%); }
.cine-hud { position: absolute; inset: 84px 0 auto; display: flex; justify-content: space-between; gap: 16px; font: 500 11px/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: #e9e2d4; opacity: .8; }
.cine-tc { color: var(--oro); font-variant-numeric: tabular-nums; }
.cine-capitulos { position: absolute; inset: 0; pointer-events: none; }
.cine-capitulo { position: absolute; left: 0; bottom: 136px; max-width: min(560px, 46%); opacity: 0; }
.cine-capitulo.cine-intro { opacity: 1; max-width: min(640px, 52%); }
.cine-capitulo h1, .cine-capitulo h2 { margin-top: 16px; font-size: clamp(48px, 6vw, 96px); text-wrap: balance; text-shadow: 0 4px 30px #050807a0; }
.cine-capitulo h2 { font-size: clamp(44px, 5.2vw, 84px); }
.cine-capitulo em { color: var(--oro); }
.cine-capitulo > p:not(.antetitulo):not(.cine-num) { margin-top: 18px; max-width: 40ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: #f1eadc; }
.cine-capitulo .acciones { margin-top: 26px; }
.cine-capitulo .antetitulo { color: var(--oro); }
.cine-capitulo .punto { background: var(--oro); }
.cine-num { font: 500 12px/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.cine-regla { position: absolute; inset: auto 0 28px; }
.cine-regla-textos { display: flex; justify-content: space-between; font: 500 11px/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: #e9e2d4; }
.cine-etapa { color: var(--oro); }
.cine-marcas { position: relative; height: 18px; margin-top: 12px; border-bottom: 1px solid #fff9ec40; }
.cine-marcas i { position: absolute; bottom: 0; width: 1px; height: 6px; background: #fff9ec59; }
.cine-marcas i.alta { height: 14px; background: #fff9eca6; }
.cine-marcas b { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--oro); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px #e6cc9a99; }
.con-cine .cine { height: 800svh; }
.con-cine .cine-escena { position: sticky; top: 0; height: 100svh; }
/* Sin animación (movimiento reducido): portada fija con el primer texto. */
html:not(.con-cine) .cine-capitulo:not(.cine-intro), html:not(.con-cine) .cine-regla, html:not(.con-cine) .cine-hud { display: none; }

/* El piso: clip flotante sobre fondo desenfocado */
.el-piso { position: relative; overflow: hidden; background: var(--noche); color: #fff9ec; }
.el-piso-fondo { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none; object-fit: cover; } /* la imagen ya viene desenfocada y oscurecida */
.el-piso-in { position: relative; display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.el-piso h2 { font-size: clamp(56px, 7vw, 112px); }
.el-piso .antetitulo { color: var(--oro); }
.el-piso .punto { background: var(--oro); }
.el-piso-in > div > p { margin-top: 18px; max-width: 42ch; line-height: 1.6; color: #ece4d5; }
.datos { display: grid; grid-template-columns: repeat(4, auto); gap: 10px 28px; margin: 28px 0 30px; }
.datos dt { font: 500 10px/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: #cfc6b6; }
.datos dd { margin: 8px 0 0; font-family: var(--serif); font-size: 32px; }
.el-piso-clip { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; box-shadow: 0 40px 80px -30px #000c; }

/* Cifras */
.cifras { background: #0b1410; color: #fff9ec; }
.cifras .antetitulo { color: var(--oro); }
.cifras .punto { background: var(--oro); }
.cifras-lista { list-style: none; padding: 0; margin-top: 24px; }
.cifras-lista li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding-block: clamp(18px, 2.4vw, 30px); border-top: 1px solid #fff9ec1f; }
.cifras-lista li > span:first-child { grid-column: 1; }
.cifra { font-family: var(--serif); font-size: clamp(72px, 10vw, 150px); line-height: .9; color: #f6eedd; text-shadow: 0 0 40px #e6cc9a40; font-variant-numeric: tabular-nums; }
.cifra-ud { font-family: var(--serif); font-size: clamp(28px, 3vw, 44px); color: var(--oro); margin-left: 8px; }
.cifras-lista li { grid-template-columns: auto 1fr minmax(0, 1fr); }
.cifras-lista li > p { grid-column: 3; color: #d9d1c1; line-height: 1.55; }
.cifras-lista strong { display: block; margin-bottom: 4px; font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #fff9ec; }

/* Cada estancia */
.estancias { position: relative; background: #050807; color: #fff9ec; }
.estancias-escena { position: relative; height: 100svh; overflow: hidden; }
.estancias-titulo { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center; font-size: clamp(56px, 9vw, 150px); }
.estancias-titulo em { color: var(--oro); }
.estancia { position: absolute; inset: 0; margin: 0; opacity: 0; }
.estancia img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.estancia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #050807cc, transparent 45%); }
.estancia figcaption { position: absolute; z-index: 1; left: max(48px, calc((100% - 1280px) / 2)); bottom: 64px; font-family: var(--serif); font-size: clamp(44px, 6vw, 96px); line-height: .95; text-transform: uppercase; letter-spacing: .01em; }
.estancia figcaption span { display: block; font-size: .7em; color: var(--oro); }
.con-cine .estancias { height: 600svh; }
.con-cine .estancias-escena { position: sticky; top: 0; }
html:not(.con-cine) .estancias-escena { height: auto; display: grid; gap: 2px; }
html:not(.con-cine) .estancia { position: relative; opacity: 1; aspect-ratio: 16 / 9; }
html:not(.con-cine) .estancias-titulo { position: relative; padding-block: 80px; }

/* Cierre */
.cierre { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff9ec; overflow: hidden; }
.cierre > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cierre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #050807e6, #05080740 55%, transparent); }
.cierre-in { position: relative; z-index: 1; padding-bottom: clamp(56px, 8vw, 110px); }
.cierre h2 { font-size: clamp(56px, 8vw, 130px); max-width: 12ch; text-transform: uppercase; }
.cierre h2 em { color: var(--oro); }
.cierre p { margin: 18px 0 28px; max-width: 44ch; color: #ece4d5; line-height: 1.6; }

@media (max-width: 860px) {
  .cine-hud { inset: 72px 0 auto; font-size: 9px; }
  .cine-hud span:last-child { display: none; }
  .cine-velo { background: linear-gradient(0deg, #050807f2 10%, #050807b0 46%, transparent 72%), linear-gradient(180deg, #050807b3, transparent 22%); }
  .cine-capitulo, .cine-capitulo.cine-intro { max-width: none; right: 0; bottom: 96px; }
  .cine-capitulo h1 { font-size: clamp(40px, 11vw, 60px); }
  .cine-capitulo h2 { font-size: clamp(38px, 10vw, 56px); }
  .el-piso-in { grid-template-columns: 1fr; }
  .datos { grid-template-columns: repeat(2, auto); }
  .cifras-lista li { grid-template-columns: auto 1fr; }
  .cifras-lista li > p { grid-column: 1 / -1; }
  .estancia figcaption { left: 18px; bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .cine-video { display: none; }
  .cine-escena { background: url(cine/recorrido-poster.jpg) center / cover; }
}

/* Antes / después en las tarjetas de servicio */
.antes-despues { position: relative; }
.antes-despues span { position: absolute; top: 12px; padding: 4px 9px; border-radius: 999px; background: #10161bcc; color: #fff9ec; font: 500 10px/1.2 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.antes-despues span:first-of-type { left: 12px; }
.antes-despues span:last-of-type { left: calc(50% + 12px); }

/* Antes y después: deslizador sobre dos fotos con el mismo encuadre */
.transformacion { background: var(--noche); color: #fff9ec; }
.transformacion .antetitulo { color: var(--oro); }
.transformacion h2 em { color: var(--oro); }
.transformacion-intro { margin-top: 20px; max-width: 60ch; color: #e9e2d4; line-height: 1.6; }
.comparadores { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 40px) clamp(20px, 3vw, 40px); }
.comparador-bloque { margin: 0; }
.comparador-grande { grid-column: 1 / -1; }
.comparador { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #1f2a24; touch-action: pan-y; }
.comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparador-despues { clip-path: inset(0 0 0 var(--pos)); }
.comparador-linea { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff9ec; pointer-events: none; }
.comparador-linea::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; translate: -50% -50%; border-radius: 50%; background: #fff9ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 4px 18px #0006; transition: scale .2s; }
.comparador:hover .comparador-linea::after { scale: 1.08; }
.comparador:focus-within .comparador-linea::after { outline: 3px solid var(--oro); outline-offset: 3px; }
.comparador input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparador-etiqueta { position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: 999px; background: #0b1410cc; color: #fff9ec; font: 500 10px/1.2 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.comparador-etiqueta-d { left: auto; right: 14px; }
.comparador-bloque figcaption { margin-top: 14px; color: #e9e2d4; line-height: 1.55; }
.comparador-bloque figcaption strong { margin-right: 8px; color: #fff9ec; font-weight: 600; }
.transformacion-nota { margin-top: 32px; font-size: 13px; color: #c9c1b2; line-height: 1.55; max-width: 70ch; }
@media (max-width: 760px) { .comparadores { grid-template-columns: 1fr; } }
.pagina-transformacion { padding-top: clamp(130px, 13vw, 176px); }
.pagina-transformacion h1 { margin-top: 20px; font-size: clamp(44px, 5.4vw, 84px); max-width: 16ch; }
.pagina-transformacion h1 em { color: var(--oro); }
.transformacion-acciones { margin-top: 40px; }
.fondo-noche { background: var(--noche); }
.fondo-noche .pie { color: #e9e2d4; }
.fondo-noche .pie { border-top-color: #ffffff1f; } .fondo-noche .pie .marca { color: #fff9ec; }

/* Marca Altara Design: monograma + composición tipográfica (Instrument Serif e Inter) */
.marca { gap: 12px; letter-spacing: 0; }
.marca img { flex: none; }
.marca-texto { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.marca-nombre { font-family: var(--serif); font-size: 23px; font-weight: 400; letter-spacing: .24em; margin-right: -.24em; text-transform: uppercase; }
.marca-sub { margin-top: 4px; font-family: var(--sans); font-size: 8.5px; font-weight: 600; letter-spacing: 1.3em; margin-right: -1.3em; text-transform: uppercase; opacity: .78; }
.pie .marca-nombre { font-size: 20px; }
.pie .marca-sub { font-size: 7.5px; letter-spacing: 1.27em; margin-right: -1.27em; }

/* Servicios y precios */
.precios { background: #ece4d5; }
.precios-intro { margin-top: 20px; max-width: 62ch; color: var(--suave); line-height: 1.6; }
.tarifas { list-style: none; padding: 0; margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.tarifa { display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 36px); border-radius: 10px; background: var(--papel); border: 1px solid var(--linea); }
.tarifa-tipo, .pack-titulo span { font: 500 11px/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--barro); }
.tarifa h3 { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.01em; }
.tarifa-texto { margin-top: 12px; color: var(--suave); line-height: 1.6; }
.tarifa-precio { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linea); }
.precio-sin { font-family: var(--serif); font-size: clamp(44px, 4vw, 56px); line-height: 1; letter-spacing: -.02em; color: var(--tinta); }
.precio-ud { display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--suave); }
.precio-iva { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--tinta); }
.tarifa-incluye { margin-top: 20px; padding-left: 18px; line-height: 1.6; color: var(--suave); font-size: 15px; }
.tarifa-incluye li + li { margin-top: 6px; }
.tarifa-incluye li::marker { color: var(--barro); }
.tarifa-nota { margin-top: 16px; padding: 12px 14px; border-radius: 6px; background: #ece4d5; font-size: 13.5px; line-height: 1.55; color: var(--suave); }
.tarifa .boton { margin-top: auto; align-self: flex-start; }
.tarifa .tarifa-incluye:last-of-type + .boton, .tarifa .tarifa-nota + .boton { margin-top: 24px; }
.tarifa > .boton { margin-top: 24px; }
.boton-oscuro:hover { background: #2c3d34; }
.packs { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.pack-bloque { padding: clamp(24px, 2.4vw, 36px); border-radius: 10px; background: var(--papel); border: 1px solid var(--linea); }
.pack-bloque-oscuro { background: var(--noche); color: #fff9ec; border-color: var(--noche); }
.pack-titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; }
.pack-titulo span { display: block; margin-bottom: 12px; }
.pack-bloque-oscuro .pack-titulo span { color: var(--oro); }
.pack-desc { margin-top: 10px; color: var(--suave); line-height: 1.55; font-size: 15px; }
.pack-bloque-oscuro .pack-desc, .pack-bloque-oscuro .precio-ud { color: #d9d1c1; }
.pack-bloque-oscuro .precio-sin, .pack-bloque-oscuro .precio-iva { color: #fff9ec; }
.pack-tabla { width: 100%; margin-top: 20px; border-collapse: collapse; }
.pack-tabla thead th { padding: 0 8px 10px 0; text-align: left; font-size: 12px; font-weight: 600; color: var(--suave); border-bottom: 1px solid var(--linea); }
.pack-bloque-oscuro thead th { color: #d9d1c1; border-color: #ffffff26; }
.pack-tabla tbody th, .pack-tabla td { padding: 16px 8px 16px 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--linea); }
.pack-bloque-oscuro tbody th, .pack-bloque-oscuro td { border-color: #ffffff1f; }
.pack-tabla tbody th { font-weight: 600; white-space: nowrap; }
.pack-num { font-family: var(--serif); font-weight: 400; font-size: 30px; margin-right: 4px; }
.pack-tabla .precio-sin { font-size: 28px; }
.pack-tabla .precio-ud { display: block; margin: 4px 0 0; font-size: 12px; }
.pack-tabla .precio-iva { margin-top: 6px; font-size: 14px; }
.pack-tabla td:last-child { text-align: right; padding-right: 0; }
.boton-pack { min-height: 44px; padding: 10px 16px; font-size: 14px; white-space: nowrap; }
.pack-bloque-oscuro .boton-pack { background: var(--oro); color: var(--noche); }
.condiciones { margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid #cfc5b2; }
.condiciones h3 { font-size: 16px; font-weight: 600; }
.condiciones ul { margin-top: 12px; padding-left: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 32px; color: var(--suave); font-size: 14.5px; line-height: 1.55; }
.condiciones li::marker { color: var(--barro); }
.contacto-eleccion { margin-top: 24px; padding: 12px 16px; border-left: 3px solid var(--barro); background: #ece4d5; font-weight: 600; color: var(--tinta) !important; }
@media (max-width: 1100px) { .tarifas, .packs { grid-template-columns: 1fr; } .tarifa { max-width: 720px; } }
@media (max-width: 640px) {
  /* Los packs pasan a tarjetas: sin tablas con desplazamiento horizontal */
  .pack-tabla thead { display: none; }
  .pack-tabla, .pack-tabla tbody, .pack-tabla tr, .pack-tabla th, .pack-tabla td { display: block; width: 100%; }
  .pack-tabla tr { padding: 18px 0; border-bottom: 1px solid var(--linea); }
  .pack-bloque-oscuro .pack-tabla tr { border-color: #ffffff1f; }
  .pack-tabla tbody th, .pack-tabla td { padding: 4px 0; border: 0; }
  .pack-tabla td[data-titulo]::before { content: attr(data-titulo); display: block; margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--suave); }
  .pack-bloque-oscuro .pack-tabla td[data-titulo]::before { color: #d9d1c1; }
  .pack-tabla td:last-child { text-align: left; padding-top: 14px; }
  .boton-pack { width: 100%; }
}
@media (min-width: 1101px) { .tarifa h3 { min-height: 2.1em; } .tarifa-texto { min-height: 4.8em; } }

/* Explora la vivienda: visor 3D en primera persona */
.explora { background: var(--noche); color: #fff9ec; }
.explora .antetitulo { color: var(--oro); } .explora .punto { background: var(--oro); }
.explora h2 em { color: var(--oro); }
.explora-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.explora-texto > p { margin-top: 18px; max-width: 40ch; line-height: 1.6; color: #ece4d5; }
.explora-ayuda { margin-top: 22px; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14.5px; color: #e9e2d4; }
kbd { display: inline-block; min-width: 1.7em; margin-right: 3px; padding: 2px 6px; border: 1px solid #fff9ec55; border-bottom-width: 2px; border-radius: 5px; font: 600 12px/1.4 ui-monospace, 'SFMono-Regular', Menlo, monospace; text-align: center; color: #fff9ec; background: #ffffff10; }
.explora-texto .explora-aviso { margin-top: 24px; font-size: 13px; color: #c9c1b2; }
.solo-tactil { display: none !important; }
@media (hover: none) and (pointer: coarse) { .solo-tactil { display: revert !important; } .solo-raton { display: none !important; } }
.explora-visor { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #050806; box-shadow: 0 40px 80px -30px #000c; }
.explora-portada, .explora-escena, .explora-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.explora-portada { object-fit: cover; opacity: .55; }
.explora-lienzo { display: block; touch-action: none; outline: none; }
/* Viñeta y grano: acabado cinematográfico sobre el lienzo, igual en ordenador y móvil. */
.explora-vineta { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 48%, #0b141047 88%, #0b141082 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: cover, 160px 160px;
  mix-blend-mode: overlay; opacity: .5; }
/* En móvil no hay revelado de color por posproceso: la viñeta compensa con algo más de fuerza. */
.explora-vineta-movil { opacity: .62; }
.explora-capa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: radial-gradient(ellipse at center, #0b1410b3, #0b1410e6); color: #fff9ec; }
.explora-capa[hidden] { display: none; }
.explora-inicio { background: linear-gradient(0deg, #0b1410cc, #0b141033); }
.explora-inicio .boton { min-height: 56px; padding-inline: 30px; font-size: 16px; }
.explora-barra { width: min(320px, 70%); height: 4px; border-radius: 4px; background: #ffffff26; overflow: hidden; }
.explora-barra b { display: block; height: 100%; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.explora-pct { font: 500 12px ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .1em; color: #d9d1c1; }
.explora-panel-titulo { font-family: var(--serif); font-size: clamp(30px, 3vw, 44px); line-height: 1.05; }
.explora-panel-ayuda { max-width: 46ch; color: #e9e2d4; line-height: 1.7; }
.explora-capa .acciones { justify-content: center; margin-top: 6px; }
.explora-error-texto { max-width: 44ch; line-height: 1.6; }
.explora-hud { position: absolute; inset: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); pointer-events: none; }
.explora-hud[hidden] { display: none; }
.explora-sala { padding: 8px 12px; border-radius: 999px; background: #0b1410b3; color: #fff9ec; font: 500 11px/1.2 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; }
.explora-sala:empty { visibility: hidden; }
.explora-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; pointer-events: auto; }
.explora-botones button { min-height: 44px; padding: 0 16px; border: 1px solid #fff9ec59; border-radius: 999px; background: #0b1410b3; color: #fff9ec; font: 600 13px/1 var(--sans); cursor: pointer; }
.explora-botones button:hover { background: #0b1410e6; }
.explora-botones button:focus-visible, .explora-capa .boton:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.explora-pista { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; padding: 6px 12px; border-radius: 999px; background: #0b141099; font-size: 12px; color: #e9e2d4; }
.explora-stick { position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); width: 128px; height: 128px; border-radius: 50%; background: #0b141066; border: 1px solid #fff9ec4d; touch-action: none; }
.explora-stick[hidden] { display: none; }
.explora-stick span { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: #fff9ecd9; box-shadow: 0 4px 16px #0006; pointer-events: none; }
.explora-msg { position: absolute; left: 50%; bottom: 70px; translate: -50% 0; max-width: 90%; padding: 10px 16px; border-radius: 8px; background: #0b1410e6; color: #fff9ec; font-size: 14px; text-align: center; }
.explora-msg[hidden] { display: none; }
/* Activo: el visor ocupa toda la pantalla (también donde no existe la pantalla completa real) */
.explora-visor.activa { position: fixed; inset: 0; z-index: 400; aspect-ratio: auto; border-radius: 0; touch-action: none; }
.explora-visor.activa .explora-portada { display: none; }
.explora-visor:fullscreen { aspect-ratio: auto; border-radius: 0; }
html.explora-abierta, html.explora-abierta body { overflow: hidden; overscroll-behavior: none; }
@media (max-width: 860px) {
  .explora-in { grid-template-columns: 1fr; }
  .explora-visor { aspect-ratio: 4 / 3; }
  .explora-botones button { padding: 0 12px; font-size: 12px; }
}
.el-piso .acciones { margin-top: 28px; }
button.boton { background-color: transparent; color: inherit; border: 0; font-family: inherit; cursor: pointer; } button.boton-claro { background: var(--oro); color: var(--noche); } button.boton-linea { border: 1px solid #fff9eccc; color: #fff9ec; }
/* Acceso a la visita 360°: el panorama del salón, centrado en la terraza. */
.explora-enlace { display: block; text-decoration: none; }
.explora-enlace .explora-portada { opacity: .8; object-position: 50% 50%; transition: transform .6s, opacity .3s; }
.explora-enlace:hover .explora-portada, .explora-enlace:focus-visible .explora-portada { transform: scale(1.03); opacity: 1; }
.explora-enlace .boton { pointer-events: none; }

/* Precios: columna y bloque de Altara Partner. */
.pack-tabla .pack-partner .precio-sin { color: var(--barro); }
.partner { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(20px, 4vw, 56px); padding: clamp(24px, 3vw, 40px); border-radius: 10px; background: var(--noche); color: #fff9ec; }
.partner h3 { margin-top: 14px; font: 400 clamp(32px, 3vw, 44px)/1.02 var(--serif); letter-spacing: -.01em; }
.partner h3 em, .partner .tarifa-tipo { color: var(--oro); }
.partner-texto p { line-height: 1.6; color: #ece4d5; }
.partner-texto strong { color: #fff9ec; }
.partner-texto ul { margin-top: 14px; padding-left: 18px; line-height: 1.6; color: #d9d1c1; font-size: 15px; }
.partner-texto li + li { margin-top: 6px; }
.partner-texto li::marker { color: var(--oro); }
@media (max-width: 820px) { .partner { grid-template-columns: 1fr; } }

/* Página «Obra nueva» (obra-nueva.html): promotoras y constructoras. */
.on-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--noche); color: #fff9ec; }
.on-hero-imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.on-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0b141066, transparent 30%, #0b141099 62%, #0b1410f2); }
.on-hero-in { position: relative; z-index: 1; padding-block: 140px clamp(56px, 8vw, 104px); }
.on-hero .antetitulo { color: var(--oro); } .on-hero .punto { background: var(--oro); }
.on-hero h1 { margin-top: 20px; font-size: clamp(48px, 6.4vw, 104px); line-height: .96; max-width: 13ch; text-shadow: 0 2px 40px #0006; }
.on-hero h1 em { color: var(--oro); }
.on-hero-texto { margin-top: 22px; max-width: 54ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: #f1e9da; }
.on-hero .acciones { margin-top: 32px; }
.on-acabados { background: var(--noche); color: #fff9ec; }
.on-acabados .antetitulo, .on-acabados h2 em { color: var(--oro); } .on-acabados .punto { background: var(--oro); }
.on-acabados-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.on-texto-claro { margin-top: 18px; margin-bottom: 28px; max-width: 44ch; line-height: 1.6; color: #e9e2d4; }
.on-presupuesto { background: #ece4d5; }
.on-presupuesto-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.on-texto { margin-top: 18px; max-width: 46ch; line-height: 1.6; color: var(--suave); }
.on-factores { list-style: none; padding: 0; }
.on-factores li { padding-block: 18px; border-top: 1px solid #cfc5b2; color: var(--suave); line-height: 1.55; }
.on-factores li:last-child { border-bottom: 1px solid #cfc5b2; }
.on-factores strong { display: block; margin-bottom: 4px; color: var(--tinta); font-size: 17px; }
.on-presupuesto .acciones { margin-top: 28px; }
.on-nota { padding-block: 0 40px; font-size: 13px; color: var(--suave); }
.faq a { color: var(--barro); text-underline-offset: 3px; }
@media (max-width: 900px) { .on-acabados-in, .on-presupuesto-in { grid-template-columns: 1fr; } }
.enlace-flecha { display: inline-block; margin-top: 4px; color: var(--barro); font-weight: 600; text-underline-offset: 4px; }
.enlace-flecha:hover { text-decoration: underline; }
/* Menú: cada enlace en una línea; en pantallas medianas se ocultan los secundarios. */
.cabecera nav a { white-space: nowrap; }
@media (max-width: 1280px) { .cabecera nav { gap: 22px; } }
@media (max-width: 1180px) { .cabecera nav .nav-extra { display: none; } }
@media (max-width: 980px) { .cabecera nav { gap: 16px; font-size: 13px; } .cabecera-in { gap: 16px; } }
@media (max-width: 960px) { .cabecera nav .nav-medio { display: none; } }

/* Obra nueva: la experiencia de la promoción como portada, a pantalla completa. */
/* La experiencia empieza bajo la cabecera fija de la página: nada de la cabecera tapa sus botones. */
.on-experiencia { position: relative; height: 100svh; min-height: 560px; padding-top: 76px; background: var(--noche); }
.on-experiencia iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .on-experiencia { padding-top: 64px; } }
.on-intro { padding-block: clamp(64px, 8vw, 112px); }
.on-intro-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: end; }
.on-intro h2 { margin-top: 18px; font-size: clamp(40px, 4.6vw, 68px); max-width: 14ch; }
.on-intro p:not(.antetitulo) { max-width: 52ch; color: var(--suave); line-height: 1.65; }
.on-intro .acciones { margin-top: 26px; }
@media (max-width: 900px) { .on-intro-in { grid-template-columns: 1fr; } }