/* =============================================================
   PARQUET CASTILLA — v2 «Galería nocturna»
   1. Tokens
   ============================================================= */
:root {
  /* Fondo: casi negro con tinte cálido de madera. Nunca #000. */
  --bg:        #0E0A07;
  --bg-2:      #150F0A;
  --bg-3:      #1C150E;   /* tarjetas */
  --bg-4:      #241B12;   /* tarjeta elevada */

  /* Texto: crema, nunca blanco puro */
  --cream:     #F4EDDD;
  --cream-2:   #D8CBB4;
  --cream-3:   #A2937A;   /* metadatos */

  /* Un solo acento */
  --amber:     #C98F3C;
  --amber-2:   #E3AE5E;
  --amber-dim: rgba(201, 143, 60, .16);

  --line:      rgba(244, 237, 221, .13);
  --line-2:    rgba(244, 237, 221, .07);

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

  --gutter: clamp(1.15rem, 5vw, 4rem);
  --maxw: 1240px;
  --nav-h: 74px;
  --radius: 14px;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrumentserif-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrumentserif-italic-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/plexmono-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/plexmono-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* Ficha técnica: números, medidas y referencias. El idioma del oficio. */
.spec {
  font-family: var(--mono); font-weight: 400;
  font-size: .78rem; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--cream-3); text-transform: uppercase;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  color-scheme: dark;            /* barras de scroll y controles nativos en oscuro */
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;              /* clip, no hidden: no rompe sticky */
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);   /* justo bajo la barra, sin dejar asomar la sección anterior */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  font-weight: 400;
  line-height: 1.62;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }

/* Táctil: sin retardo de 300 ms y sin el destello azul por defecto */
a, button, summary, label, input, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(201, 143, 60, .18);
}
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.06; letter-spacing: -.01em; font-weight: 400; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--amber); color: #17100A; }

:focus-visible {
  outline: 2px solid var(--amber-2);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilidades
   ============================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; background: var(--cream); color: var(--bg);
  border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.muted { color: var(--cream-3); }

/* Un teléfono o un precio nunca deben partirse a mitad de línea */
a[href^="tel:"], .hero-price, .gama-precio, .tabla td.destacado { white-space: nowrap; }

.eyebrow {
  font-family: var(--mono);
  font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 1.1rem;
}
/* Marca de cota, como en un plano */
.eyebrow::before {
  content: ""; display: inline-block; width: 26px; height: 5px;
  border-left: 1px solid var(--amber); border-bottom: 1px solid var(--amber);
  border-right: 1px solid var(--amber);
  vertical-align: middle; margin-right: .7rem; opacity: .75;
  transform: translateY(-2px);
}

.h-display {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.3rem + 4vw, 4.4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.012em;
}
.h-display em { font-style: italic; color: var(--amber-2); }

.lead {
  margin-top: 1.35rem;
  max-width: 56ch;
  color: var(--cream-2);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.16rem);
}

.section-head { max-width: var(--maxw); margin: 0 auto 3.4rem; padding-inline: var(--gutter); }
.section-head-wide { max-width: var(--maxw); }

.stars { color: var(--amber-2); letter-spacing: .16em; font-size: .95rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600; color: var(--amber-2);
  border-bottom: 1px solid var(--amber-dim);
  padding: .6rem 0 .35rem;   /* altura táctil suficiente */
  transition: border-color .35s var(--ease-out), gap .35s var(--ease-out);
}
.link-arrow:hover { border-color: var(--amber-2); gap: .95rem; }

/* =============================================================
   4. Botones
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .78rem 1.35rem;
  border-radius: 999px;
  font-weight: 600; font-size: .95rem; letter-spacing: .005em;
  min-height: 46px;
  position: relative;
  transition: transform .4s var(--ease-out), background-color .35s var(--ease-out),
              color .35s var(--ease-out), border-color .35s var(--ease-out),
              box-shadow .4s var(--ease-out);
}
.btn-lg { padding: 1rem 1.7rem; font-size: 1rem; min-height: 54px; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--amber);
  color: #17100A;
  box-shadow: 0 10px 34px -14px rgba(201, 143, 60, .8);
}
.btn-primary:hover { background: var(--amber-2); transform: translateY(-2px); box-shadow: 0 18px 44px -14px rgba(201, 143, 60, .9); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  border: 1px solid var(--line);
  color: var(--cream);
  background: rgba(244, 237, 221, .03);
}
.btn-ghost:hover { border-color: var(--amber); color: var(--amber-2); transform: translateY(-2px); background: rgba(201,143,60,.07); }

.btn-nav { padding: .55rem 1.05rem; min-height: 40px; font-size: .9rem;
  border: 1px solid var(--amber-dim); color: var(--amber-2); background: rgba(201,143,60,.08); }
.btn-nav:hover { background: var(--amber); color: #17100A; border-color: var(--amber); }

/* =============================================================
   5. Splash
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: var(--bg);
  animation: splashSafety .01s 4.5s forwards;   /* red de seguridad si falla el JS */
}
.splash.is-out {
  opacity: 0; pointer-events: none;
  transition: opacity .7s var(--ease-out), clip-path .9s var(--ease-out);
  clip-path: inset(0 0 100% 0);
}
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }

.splash-mark { display: flex; align-items: center; gap: 1rem; }
.splash-word {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 3.4vw, 1.7rem);
  color: var(--cream); letter-spacing: .02em; white-space: nowrap;
  opacity: 0; animation: splashWord .9s .15s var(--ease-out) forwards;
}
.splash-line {
  display: block; height: 1px; width: 0; background: var(--amber);
  animation: splashLine 1.1s .35s var(--ease-out) forwards;
}
@keyframes splashWord { to { opacity: 1; } }
@keyframes splashLine { to { width: clamp(28px, 9vw, 90px); } }

/* =============================================================
   6. Cursor
   ============================================================= */
.cursor { position: fixed; inset: 0; z-index: 1500; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease-out); }
.cursor.is-ready { opacity: 1; }
.cursor-dot, .cursor-ring {
  position: absolute; top: 0; left: 0; border-radius: 50%;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--amber-2); }
.cursor-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(227, 174, 94, .55);
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              margin .35s var(--ease-out), background-color .35s var(--ease-out),
              border-color .35s var(--ease-out);
}
.cursor.is-hover .cursor-ring {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  background: rgba(201, 143, 60, .14); border-color: var(--amber-2);
}
.cursor.is-hover .cursor-dot { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* =============================================================
   7. Grano y luz ambiente
   ============================================================= */
.grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: .32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* Luz de obra: sigue al cursor en el hero.
   Es un elemento de tamaño fijo que se mueve con transform. Pintar un
   degradado a pantalla completa en cada fotograma sale carísimo. */
.light {
  position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none;
  width: 54rem; height: 54rem; margin: -27rem 0 0 -27rem;
  background: radial-gradient(circle closest-side,
              rgba(227, 174, 94, .24) 0%, rgba(201, 143, 60, .1) 42%, transparent 72%);
  transform: translate3d(60vw, 34vh, 0);
  will-change: transform;
}

/* =============================================================
   8. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  transition: background-color .45s var(--ease-out), border-color .45s var(--ease-out),
              backdrop-filter .45s var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* Con la barra transparente, los enlaces caen sobre las fotos del mosaico.
   Este velo garantiza el contraste sin romper la sensación de barra flotante. */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,10,7,.92) 0%, rgba(14,10,7,.6) 55%, transparent 100%);
  transition: opacity .45s var(--ease-out);
}
.nav.is-solid::before { opacity: 0; }

.nav.is-solid {
  background: rgba(14, 10, 7, .93);
  border-bottom-color: var(--line-2);
}
@supports (backdrop-filter: blur(14px)) {
  .nav.is-solid { background: rgba(14, 10, 7, .72); backdrop-filter: blur(16px) saturate(140%); }
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  min-height: var(--nav-h);
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 1.4rem;
}
.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; padding-block: .55rem; }
.brand-mark { color: var(--amber); display: block; transition: transform .5s var(--ease-out); }
.brand:hover .brand-mark { transform: rotate(-4deg); }
/* El nombre de la empresa es lo primero que tiene que verse */
.brand-text {
  font-family: var(--serif); font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.8rem);
  letter-spacing: .005em; color: var(--cream); line-height: 1;
}
/* En el pie no manda tanto: ahí se queda contenido */
.footer-brand .brand-text { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.85rem); }
.brand-text em { font-style: italic; color: var(--amber-2); }

.nav-links { display: none; gap: 1.7rem; font-size: .93rem; font-weight: 500; }
.nav-links a { position: relative; color: var(--cream-2); padding-block: .3rem; transition: color .3s var(--ease-out); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--amber); transition: width .4s var(--ease-out);
}
.nav-links a:hover { color: var(--cream); }
.nav-links a:hover::after { width: 100%; }
.nav .btn-nav { display: none; }

.nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; }
.nav-toggle-bars { display: grid; gap: 5px; }
.nav-toggle-bars i { display: block; width: 22px; height: 1.5px; background: var(--cream); transition: transform .4s var(--ease-out); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.nav-drawer {
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  padding: 1rem var(--gutter) 1.6rem;
  display: grid; gap: .15rem;
}
.nav-drawer[hidden] { display: none; }
.nav-drawer a { padding: .85rem 0; border-bottom: 1px solid var(--line-2); font-size: 1.05rem; }
.nav-drawer-cta { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.1rem; }

/* =============================================================
   9. Hero
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 2rem) 0 clamp(3rem, 7vh, 5rem);
  overflow: hidden;
  isolation: isolate;
}
/* Mosaico: las obras reales son fotos verticales de móvil.
   En vez de disimularlo, la composición se construye con columnas. */
.mosaico {
  position: absolute; inset: 0; z-index: 0;
  display: flex; gap: .5rem; justify-content: flex-end;
  overflow: hidden;
}
.mosaico-col {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: .5rem;
  will-change: transform;
}
.mosaico-col[data-dir="up"]   { animation: mosaicoUp 78s linear infinite; }
.mosaico-col[data-dir="down"] { animation: mosaicoUp 94s linear infinite reverse; }
.mosaico-col-3 { display: none; }
.mosaico img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 6px;
}
@keyframes mosaicoUp { to { transform: translateY(-50%); } }

/* En vertical el texto va abajo: arriba se deja ver la obra y el velo
   se cierra justo donde empieza a leerse. */
.hero-tint {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(14,10,7,.42) 0%, rgba(14,10,7,.5) 26%, rgba(14,10,7,.88) 55%,
      rgba(14,10,7,.95) 80%, var(--bg) 100%),
    linear-gradient(96deg, rgba(14,10,7,.75) 0%, rgba(14,10,7,.55) 45%, rgba(14,10,7,.3) 100%);
}
.hero-inner {
  position: relative; z-index: 4;
  max-width: var(--maxw); width: 100%; margin: 0 auto;
  padding-inline: var(--gutter);
}
.kicker {
  font-family: var(--mono);
  font-size: .76rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream-3);
}
.kicker .sep { color: var(--amber); margin-inline: .3rem; }

.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.35rem, 1.3rem + 3.6vw, 3.95rem);
  font-weight: 400; line-height: 1.02; letter-spacing: -.015em;
  margin-top: 1.1rem;
  max-width: 15ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.hero-title em { font-style: italic; color: var(--amber-2); }

.hero-sub {
  margin-top: 1.1rem; max-width: 52ch;
  color: var(--cream-2);
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem);
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }

/* Ancla de precio, compuesta como la cota de un plano */
.hero-anchor {
  position: relative;
  margin-top: 1.5rem; padding-top: 1.1rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem;
  max-width: 46ch;
}
.hero-anchor::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.hero-price {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.55rem);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.hero-price strong { font-weight: 500; color: var(--amber-2); }
.hero-price-note { color: var(--cream-3); font-size: .86rem; }

.hero-trust {
  position: relative; z-index: 4;
  margin: 1.5rem auto 0; max-width: var(--maxw); width: 100%;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: .7rem;
  padding-block: .6rem;
  font-size: .9rem; color: var(--cream-2);
  transition: color .3s var(--ease-out);
}
.hero-trust:hover { color: var(--cream); }
.hero-trust strong { color: var(--cream); font-weight: 700; }

.hero-scroll { position: absolute; left: 50%; bottom: 1.6rem; z-index: 4; width: 1px; height: 46px;
  background: var(--line); overflow: hidden; }
.hero-scroll span { display: block; width: 100%; height: 40%; background: var(--amber);
  animation: scrollHint 2.4s var(--ease-soft) infinite; }
@keyframes scrollHint { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(250%); } }

/* =============================================================
   10. Ficha técnica en movimiento
   ============================================================= */
.ficha {
  border-block: 1px solid var(--line-2);
  background: var(--bg-2);
  overflow: hidden;
  padding-block: 1.15rem;
  position: relative;
  --mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: var(--mask); mask-image: var(--mask);
}
.ficha-track { display: flex; width: max-content; animation: fichaRun 46s linear infinite; }
.ficha:hover .ficha-track { animation-play-state: paused; }
.ficha-run { display: flex; align-items: center; flex: 0 0 auto; }
.ficha-run li {
  font-family: var(--mono); font-size: .8rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cream-2);
  white-space: nowrap; padding-inline: 1.5rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.ficha-run li::after {
  content: ""; width: 5px; height: 5px; background: var(--amber);
  transform: rotate(45deg); flex: 0 0 auto;
}
.ficha-run li b { color: var(--amber-2); font-weight: 500; }
@keyframes fichaRun { to { transform: translateX(-50%); } }

/* Junta de dilatación: el separador de secciones es una junta de lamas */
.junta {
  height: 3px; border: 0; margin: 0;
  background: repeating-linear-gradient(90deg,
    var(--line) 0 34px, transparent 34px 38px, var(--line-2) 38px 96px, transparent 96px 100px);
  opacity: .8;
}

/* =============================================================
   11. Montaje — efecto firma
   ============================================================= */
.montaje { position: relative; padding: clamp(4.5rem, 11vh, 8rem) 0; }
.montaje-head { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.montaje-body {
  max-width: var(--maxw); margin: 3.2rem auto 0; padding-inline: var(--gutter);
  display: grid; gap: 2.6rem;
}
.montaje-visual { position: relative; }

.stage {
  position: sticky; top: calc(var(--nav-h) + 1.2rem);
  padding: 1.6rem;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.stage::after {   /* halo cálido bajo la escena */
  content: ""; position: absolute; inset: auto 0 -30% 0; height: 70%;
  background: radial-gradient(50% 60% at 50% 50%, rgba(201,143,60,.2), transparent 72%);
  pointer-events: none;
}
/* La perspectiva va en el padre, no dentro del transform de la escena:
   si se pone como perspective() en el propio transform, los hijos se
   proyectan sin ella y todo plano girado 90° colapsa a una línea. */
.stage-escena-wrap { perspective: 1400px; perspective-origin: 50% 42%; }
.stage-scene {
  position: relative;
  aspect-ratio: 4 / 3;
  transform: rotateX(54deg) rotateZ(-28deg) scale(.84);
  transform-style: preserve-3d;
}
/* preserve-3d también aquí: sin él, cada capa aplana el 3D de sus hijos
   y el rodapié y la puerta se quedan tumbados sobre el suelo. */
.layer { position: absolute; inset: 0; transform-style: preserve-3d; }

/* — aislante: sobresale por debajo de las lamas para que se vea — */
.layer-aislante {
  inset: -7% -6%;
  transform: translateZ(-10px);
  background: repeating-linear-gradient(45deg, #2C333A 0 9px, #333B43 9px 18px);
  border-radius: 3px;
  box-shadow: 0 22px 44px rgba(0,0,0,.55);
}
/* — lamas — */
.layer-planks { display: grid; grid-template-rows: repeat(8, 1fr); gap: 2px; transform: translateZ(0); }
.layer-planks i {
  display: block; border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 34px),
    linear-gradient(94deg, #8C5F30 0%, #A9773E 26%, #7E5429 55%, #9C6C37 78%, #85592C 100%);
  box-shadow: inset 0 1px 0 rgba(255,225,180,.16), inset 0 -1px 0 rgba(0,0,0,.35);
}
.layer-planks i:nth-child(even) { filter: brightness(1.08) saturate(1.05); }
.layer-planks i:nth-child(3n)   { filter: brightness(.93); }

/* Las piezas verticales se leen en el plano, como en un axonométrico.
   Levantarlas de verdad en 3D no se pinta de forma fiable en Chrome
   cuando conviven con una capa hermana que ocupa todo el plano. */

/* — rodapié: banda clara con sombra hacia dentro — */
.layer-rodapie { transform: translateZ(2px); }
.layer-rodapie span {
  position: absolute;
  background: linear-gradient(180deg, #F6EEDE, #C9BBA1);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.35), 0 3px 14px rgba(0,0,0,.55);
}
.layer-rodapie span:first-child { top: -3.5%; left: -3.5%; right: -3.5%; height: 6%; border-radius: 2px; }
.layer-rodapie span:last-child  { top: -3.5%; bottom: -3.5%; left: -3.5%; width: 4.6%; border-radius: 2px; }

/* — pletina: perfil metálico en el borde cercano — */
.layer-pletina {
  position: absolute; right: -4%; top: -3.5%; bottom: -3.5%; width: 5%;
  background: linear-gradient(90deg, #F2F5F8 0%, #A8AEB6 40%, #6E747C 62%, #D6DBE1 100%);
  transform: translateZ(3px); border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,.55);
}
/* — corte de puertas: la hoja y la holgura que deja el corte — */
.layer-puerta { transform: translateZ(4px); }
.layer-puerta span {
  position: absolute; left: 16%; width: 34%; top: -14%; height: 22%;
  background: linear-gradient(150deg, #6B4E2D 0%, #8A6739 45%, #4A3520 100%);
  border: 1px solid rgba(244,237,221,.24);
  border-radius: 2px;
  box-shadow: 0 8px 26px rgba(0,0,0,.6);
}
.layer-puerta span::after {   /* la holgura sobre la tarima */
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -7px; height: 4px;
  background: var(--amber-2);
  box-shadow: 0 0 16px rgba(227,174,94,.85);
  border-radius: 2px;
}
/* — brillo final — */
.layer-brillo {
  background: linear-gradient(102deg, transparent 34%, rgba(255,238,206,.4) 50%, transparent 66%);
  transform: translateZ(22px);
  mix-blend-mode: screen;
  opacity: 0;
}

/* Estado controlado por JS. Sin JS todo queda visible. */
.stage.is-driven .layer-aislante { opacity: 0; transform: translateZ(-14px) translateY(14%); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.stage.is-driven.s1 .layer-aislante { opacity: 1; transform: translateZ(-14px); }

/* El escalonado va aquí y no en atributos style= del HTML:
   la CSP bloquea los estilos en línea y las lamas aparecerían de golpe. */
.stage.is-driven .layer-planks i {
  opacity: 0; transform: translateX(46%);
  transition: opacity .55s var(--ease-out), transform .75s var(--ease-out);
}
.stage.is-driven .layer-planks i:nth-child(1) { transition-delay: 0ms; }
.stage.is-driven .layer-planks i:nth-child(2) { transition-delay: 70ms; }
.stage.is-driven .layer-planks i:nth-child(3) { transition-delay: 140ms; }
.stage.is-driven .layer-planks i:nth-child(4) { transition-delay: 210ms; }
.stage.is-driven .layer-planks i:nth-child(5) { transition-delay: 280ms; }
.stage.is-driven .layer-planks i:nth-child(6) { transition-delay: 350ms; }
.stage.is-driven .layer-planks i:nth-child(7) { transition-delay: 420ms; }
.stage.is-driven .layer-planks i:nth-child(8) { transition-delay: 490ms; }
.stage.is-driven.s2 .layer-planks i { opacity: 1; transform: translateX(0); }

.stage.is-driven .layer-rodapie span { opacity: 0; transition: opacity .55s var(--ease-out), transform .8s var(--ease-out); }
.stage.is-driven .layer-rodapie span:first-child { transform: translateY(-90%); }
.stage.is-driven .layer-rodapie span:last-child  { transform: translateX(-90%); }
.stage.is-driven.s3 .layer-rodapie span:first-child { opacity: 1; transform: translateY(0); }
.stage.is-driven.s3 .layer-rodapie span:last-child  { opacity: 1; transform: translateX(0); transition-delay: .14s; }

.stage.is-driven .layer-pletina { opacity: 0; transform: translateZ(3px) scaleY(.15); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
.stage.is-driven.s4 .layer-pletina { opacity: 1; transform: translateZ(3px) scaleY(1); }

.stage.is-driven .layer-puerta span { opacity: 0; transform: translateY(-70%); transition: opacity .55s var(--ease-out), transform .8s var(--ease-out); }
.stage.is-driven.s5 .layer-puerta span { opacity: 1; transform: translateY(0); }

.stage.is-driven.s6 .layer-brillo { animation: sheen 1.5s .1s var(--ease-soft) forwards; }
@keyframes sheen {
  0%   { opacity: 0; transform: translateZ(22px) translateX(-40%); }
  35%  { opacity: .85; }
  100% { opacity: 0; transform: translateZ(22px) translateX(45%); }
}

/* Anotación de plano: paso actual + dato técnico */
.stage-caption {
  position: relative; z-index: 2;
  margin-top: 1.2rem; padding-top: .8rem;
  border-top: 1px solid var(--line-2);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--amber);
}
.stage-caption span:last-child { color: var(--cream-3); font-weight: 400; letter-spacing: .06em; }

.capas { display: grid; gap: .2rem; }
.capa {
  padding: 1.7rem 0;
  border-top: 1px solid var(--line-2);
  transition: opacity .5s var(--ease-out);
}
.capa:last-child { border-bottom: 1px solid var(--line-2); }
.capa-num {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  color: var(--amber); margin-bottom: .55rem; letter-spacing: .1em;
}
.capa-num::after {
  content: ""; height: 1px; width: 0; background: var(--amber); opacity: .5;
  transition: width .7s var(--ease-out);
}
.capa.is-active .capa-num::after { width: 44px; }
.capa h3 { font-family: var(--serif); font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.15rem); font-weight: 400; }
.capa p { margin-top: .7rem; color: var(--cream-2); max-width: 52ch; }
.capa.is-active .capa-num { color: var(--amber-2); }
.capa.is-active h3 { color: var(--cream); }

.montaje-foot {
  max-width: var(--maxw); margin: 2.8rem auto 0; padding-inline: var(--gutter);
  color: var(--cream-3); font-size: .93rem;
}
.montaje-foot span { color: var(--cream); font-weight: 600; }

/* =============================================================
   11b. Presupuestos sin compromiso — obra real a tamaño grande
   ============================================================= */
.presupuesto {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) var(--gutter) clamp(1rem, 3vh, 2rem);
  display: grid; gap: 2.2rem; align-items: center;
}
.presupuesto-foto { position: relative; margin: 0; }
.presupuesto-foto img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
}
.presupuesto-foto figcaption {
  margin-top: .9rem; text-align: left;
  text-transform: none; letter-spacing: .04em;
}
.presupuesto-texto .lead { max-width: 44ch; }
.presupuesto-texto .cta-actions { margin-top: 1.8rem; }

/* =============================================================
   12. Precios
   ============================================================= */
.precios { padding: clamp(4.5rem, 11vh, 8rem) 0; background: var(--bg-2); border-block: 1px solid var(--line-2); }
.gamas {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  display: grid; gap: 1.2rem;
}
.gama {
  position: relative;
  padding: 2rem 1.7rem;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease-out), border-color .4s var(--ease-out), box-shadow .5s var(--ease-out);
  transform-style: preserve-3d;
}
.gama:hover { border-color: var(--amber-dim); box-shadow: 0 26px 60px -30px rgba(0,0,0,.9); }
.gama-destacada { background: var(--bg-4); border-color: var(--amber-dim); }
.gama-destacada::before {
  content: ""; position: absolute; inset: -1px; border-radius: var(--radius);
  border: 1px solid var(--amber); opacity: .32; pointer-events: none;
}
.gama-tag {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); font-weight: 500; margin-bottom: .9rem;
}
.gama-nombre { font-family: var(--serif); font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); font-weight: 400; }
.gama-precio { font-family: var(--mono); margin-top: .9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.gama-precio strong { font-size: clamp(2.2rem, 1.8rem + 1.6vw, 2.8rem); font-weight: 500; color: var(--amber-2); letter-spacing: -.03em; }
.gama-precio span { color: var(--cream-3); font-family: var(--sans); font-size: .95rem; margin-left: .35rem; }
.gama-precio-consulta { font-family: var(--serif); font-size: 1.5rem; font-style: italic; color: var(--cream-2); }
.gama-desc { margin-top: 1rem; color: var(--cream-2); font-size: .96rem; }
.gama-lista { margin-top: 1.3rem; display: grid; gap: .6rem; font-size: .94rem; }
.gama-lista li { position: relative; padding-left: 1.5rem; color: var(--cream-2); }
/* Palomita real: brazos de distinta longitud, no una uve */
.gama-lista li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 6px; height: 11px;
  border-right: 1.6px solid var(--amber); border-bottom: 1.6px solid var(--amber);
  transform: rotate(42deg);
}
.gama-nota { margin-top: 1.3rem; color: var(--cream-3); font-size: .82rem; line-height: 1.5; }
.gama .btn { margin-top: 1.5rem; }
.gama-lista + .gama-nota { margin-top: auto; padding-top: 1.3rem; }
.precios-foot { max-width: var(--maxw); margin: 2.4rem auto 0; padding-inline: var(--gutter); }

/* =============================================================
   13. Obras
   ============================================================= */
.obras { padding: clamp(4.5rem, 11vh, 8rem) 0; }
.galeria {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  display: grid; gap: 1rem;
}
.obra {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--bg-3); border: 1px solid var(--line-2);
  transition: transform .55s var(--ease-out), border-color .4s var(--ease-out), box-shadow .55s var(--ease-out);
  transform-style: preserve-3d;
}
.obra img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  filter: saturate(1.02) brightness(.94);
  transition: transform .9s var(--ease-out), filter .6s var(--ease-out);
}
.obra-alta img { aspect-ratio: 3 / 4.6; }
.obra:hover { border-color: var(--amber-dim); box-shadow: 0 30px 70px -34px rgba(0,0,0,.95); }
.obra:hover img { transform: scale(1.06); filter: saturate(1.14) brightness(1.04); }
.obra figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.1rem .95rem;
  font-size: .87rem; color: var(--cream);
  background: linear-gradient(180deg, transparent, rgba(14,10,7,.9));
}
.obras-foot { max-width: var(--maxw); margin: 2.4rem auto 0; padding-inline: var(--gutter); }

/* =============================================================
   14. Reseñas
   ============================================================= */
.resenas { padding: clamp(4.5rem, 11vh, 8rem) 0; background: var(--bg-2); border-block: 1px solid var(--line-2); }
.resenas-grid {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  display: grid; gap: 1.1rem;
}
.resena {
  padding: 1.9rem 1.6rem;
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--radius);
  position: relative;
  display: flex; flex-direction: column;   /* la firma queda abajo en las tres */
}
.resena p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.12rem, 1rem + .55vw, 1.35rem);
  line-height: 1.42; margin-top: .9rem; color: var(--cream);
}
.resena cite {
  display: flex; flex-direction: column; gap: .25rem;
  margin-top: auto; padding-top: 1.3rem; font-style: normal;
}
.resena cite strong {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 400;
  color: var(--cream); letter-spacing: .01em;
}
.resena cite span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--cream-3);
}
.resenas-foot { max-width: var(--maxw); margin: 2.4rem auto 0; padding-inline: var(--gutter); }

/* =============================================================
   15. Proceso
   ============================================================= */
.proceso { padding: clamp(4.5rem, 11vh, 8rem) 0; }
.pasos {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  display: grid; gap: 0;
}
.paso {
  position: relative; padding: 2rem 0 2rem 3.6rem;
  border-left: 1px solid var(--line-2);
  margin-left: 1.1rem;
}
.paso:first-child { padding-top: 0; }
.paso:last-child { border-left-color: transparent; }
.paso-num {
  position: absolute; left: -1.15rem; top: 1.6rem;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--amber-dim);
  color: var(--amber-2); font-family: var(--mono); font-size: .85rem; font-weight: 500;
}
.paso:first-child .paso-num { top: -.4rem; }
.paso h3 { font-family: var(--serif); font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); font-weight: 400; }
.paso p { margin-top: .6rem; color: var(--cream-2); max-width: 54ch; }

/* =============================================================
   16. FAQ
   ============================================================= */
.faq { padding: clamp(4.5rem, 11vh, 8rem) 0; background: var(--bg-2); border-block: 1px solid var(--line-2); }
/* Alineada con el resto de secciones, no centrada:
   el desfase respecto al titular se nota. */
.faq-list { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.faq-item { border-bottom: 1px solid var(--line-2); max-width: 880px; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem);
  transition: color .3s var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--amber-2); }
.faq-item summary i {
  position: relative; flex: 0 0 18px; height: 18px;
}
.faq-item summary i::before, .faq-item summary i::after {
  content: ""; position: absolute; background: var(--amber);
  transition: transform .4s var(--ease-out), opacity .3s var(--ease-out);
}
.faq-item summary i::before { top: 8px; left: 0; width: 18px; height: 1.5px; }
.faq-item summary i::after  { left: 8px; top: 0; width: 1.5px; height: 18px; }
.faq-item[open] summary i::after { transform: rotate(90deg); opacity: 0; }
.faq-body { padding-bottom: 1.5rem; }
.faq-body p { color: var(--cream-2); max-width: 62ch; }
.faq-body strong { color: var(--cream); }

/* =============================================================
   17. CTA final
   ============================================================= */
.cta { position: relative; padding: clamp(5rem, 13vh, 9rem) 0; overflow: hidden; isolation: isolate; }
/* Sobresale por arriba y por abajo: el paralaje la desplaza un 8 %
   y sin este margen se vería el borde de la foto. */
.cta-bg { position: absolute; inset: -12% 0; z-index: 0; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.95); }
.cta-tint {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(14,10,7,.88) 26%, rgba(14,10,7,.92) 76%, var(--bg) 100%);
}
.cta-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.cta-datos {
  margin-top: 3.4rem; padding-top: 2.4rem; border-top: 1px solid var(--line);
  display: grid; gap: 1.7rem;
}
.cta-datos dt {
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--amber); font-weight: 700; margin-bottom: .45rem;
}
.cta-datos dd { color: var(--cream); font-size: 1.02rem; line-height: 1.5; }
.cta-datos a { border-bottom: 1px solid var(--line); transition: border-color .3s var(--ease-out), color .3s var(--ease-out); }
.cta-datos a:hover { color: var(--amber-2); border-color: var(--amber-2); }

/* =============================================================
   17b. Páginas interiores
   ============================================================= */
.pagehead {
  position: relative; overflow: hidden; isolation: isolate;
  padding: calc(var(--nav-h) + 3.4rem) 0 clamp(3rem, 8vh, 5rem);
}
.pagehead-bg { position: absolute; inset: 0; z-index: 0; }
.pagehead-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.pagehead-tint {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,10,7,.96) 0%, rgba(14,10,7,.86) 55%, var(--bg) 100%),
    linear-gradient(96deg, var(--bg) 6%, rgba(14,10,7,.82) 60%, rgba(14,10,7,.7) 100%);
}
.pagehead-inner {
  position: relative; z-index: 4;
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
}
.migas {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cream-3); display: flex; gap: .6rem; margin-bottom: 1.4rem;
}
.migas a { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.migas a:hover { color: var(--amber-2); border-color: var(--amber-2); }
.migas span[aria-hidden] { color: var(--amber); }

.bloque { padding: clamp(3.6rem, 9vh, 6rem) 0; }
.bloque-alt { background: var(--bg-2); }

/* Bloque centrado: para secciones que son solo llamada a la acción,
   sin foto al lado que equilibre la composición. */
.bloque-centrado .section-head { text-align: center; margin-bottom: 0; }
.bloque-centrado .lead { margin-inline: auto; }
.bloque-centrado .cta-actions { justify-content: center; }
.bloque-centrado .eyebrow::before { margin-right: .7rem; }

/* Tabla comparativa */
.tabla-wrap {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  overflow-x: auto; overflow-y: visible;
}
.tabla { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .93rem; }
.tabla th, .tabla td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--line-2); }
.tabla thead th {
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
  border-bottom-color: var(--line); vertical-align: bottom;
}
.tabla tbody th { font-weight: 500; color: var(--cream); }
.tabla td { color: var(--cream-2); }
.tabla td.destacado {
  font-family: var(--mono); font-weight: 500; font-size: 1.15rem; color: var(--amber-2);
  font-variant-numeric: tabular-nums;
}
.tabla td.consulta { font-style: italic; color: var(--cream-3); }
.tabla tbody tr:hover td, .tabla tbody tr:hover th { background: rgba(244,237,221,.03); }
.tabla-nota { max-width: var(--maxw); margin: 1rem auto 0; padding-inline: var(--gutter); }

/* Ejemplo de presupuesto */
.ejemplo {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  display: grid; gap: 2rem;
}
.ejemplo-cuenta {
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 1.8rem 1.6rem; align-self: start;
}
.ejemplo-cuenta > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line-2);
}
.ejemplo-cuenta dt { color: var(--cream-3); font-size: .9rem; }
.ejemplo-cuenta dd { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--cream); }
.ejemplo-total { border-bottom: 0 !important; padding-top: 1.2rem !important; }
.ejemplo-total dt { color: var(--cream) !important; font-weight: 600; }
.ejemplo-total dd { color: var(--amber-2); font-size: 1.5rem; font-weight: 500; }
.ejemplo-texto p { color: var(--cream-2); max-width: 56ch; }
.ejemplo-texto p + p { margin-top: 1rem; }
.ejemplo-texto .btn { margin-top: 1.6rem; }

/* Contacto */
.vias {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  display: grid; gap: 1rem;
}
.via {
  display: block; padding: 1.8rem 1.6rem;
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--radius);
  transition: transform .5s var(--ease-out), border-color .4s var(--ease-out), background-color .4s var(--ease-out);
}
.via:hover { transform: translateY(-4px); border-color: var(--amber-dim); background: var(--bg-4); }
.via-tipo {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); margin-bottom: .8rem;
}
.via-dato {
  font-family: var(--serif); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem);
  color: var(--cream); word-break: break-word;
}
.via-nota { margin-top: .7rem; color: var(--cream-3); font-size: .88rem; }

/* Mapa a la carta: hasta que no se pulsa, no hay nada de Google */
.mapa {
  max-width: var(--maxw); margin: 2.6rem auto 0; padding-inline: var(--gutter);
}
.mapa-aviso {
  display: grid; gap: .9rem; justify-items: center; text-align: center;
  padding: clamp(2.4rem, 7vw, 4rem) 1.4rem;
  background:
    repeating-linear-gradient(45deg, rgba(244,237,221,.02) 0 12px, transparent 12px 24px),
    var(--bg-3);
  border: 1px solid var(--line-2); border-radius: var(--radius);
}
.mapa-pin { color: var(--amber); display: block; }
.mapa-dir { font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); color: var(--cream); }
.mapa-nota { color: var(--cream-3); font-size: .85rem; }
.mapa.is-cargado {
  padding-inline: var(--gutter);
}
.mapa iframe {
  width: 100%; height: clamp(300px, 46vh, 460px);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  /* El mapa de Google es blanco y deslumbra sobre el fondo oscuro */
  filter: grayscale(.4) sepia(.14) brightness(.9) contrast(1.03);
}

/* Catálogo de marcas */
.indice {
  /* +1px por el borde inferior de la barra: si no, se mete debajo */
  position: sticky; top: calc(var(--nav-h) + 1px); z-index: 500;
  background: rgba(14, 10, 7, .93);
  border-bottom: 1px solid var(--line-2);
  display: flex; gap: .3rem; overflow-x: auto;
  padding: .6rem var(--gutter);
  scrollbar-width: none;
}
.indice::-webkit-scrollbar { display: none; }
/* En pantallas estrechas el índice no cabe entero: el borde difuminado
   avisa de que hay más marcas hacia la derecha. */
@media (max-width: 959px) {
  .indice {
    --desvanece: linear-gradient(90deg, #000 80%, rgba(0,0,0,.15) 100%);
    -webkit-mask-image: var(--desvanece); mask-image: var(--desvanece);
  }
}
@supports (backdrop-filter: blur(14px)) {
  .indice { background: rgba(14, 10, 7, .78); backdrop-filter: blur(14px) saturate(140%); }
}
.indice a {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cream-3); padding: .5rem .85rem; border-radius: 999px;
  border: 1px solid transparent;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.indice a:hover { color: var(--amber-2); border-color: var(--amber-dim); background: rgba(201,143,60,.07); }

.marca { padding: clamp(3.2rem, 8vh, 5.5rem) 0; scroll-margin-top: calc(var(--nav-h) + 52px); }
.marca-head { max-width: var(--maxw); margin: 0 auto 2.8rem; padding-inline: var(--gutter); }
.marca-head .h-display { font-size: clamp(2.4rem, 1.5rem + 4vw, 4rem); }

.modelos {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  display: grid; gap: 1rem;
}
.modelo {
  padding: 1.5rem 1.4rem;
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--radius);
  transition: border-color .4s var(--ease-out), background-color .4s var(--ease-out);
}
.modelo:hover { border-color: var(--amber-dim); background: var(--bg-4); }
.modelo h3 {
  font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.55rem); font-weight: 400;
  color: var(--cream);
}
.modelo-medida {
  margin-top: .6rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .03em;
  font-variant-numeric: tabular-nums; color: var(--amber-2);
}
.modelo-desc { margin-top: .8rem; color: var(--cream-2); font-size: .92rem; }

/* Marca con un solo modelo: ocupa la fila entera en vez de dejar
   media rejilla vacía, y reparte las referencias en columnas. */
.modelo:only-child { grid-column: 1 / -1; }
.modelo:only-child .refs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .45rem 1.6rem;
}

.refs {
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line-2);
  display: grid; gap: .45rem; font-size: .9rem;
}
.refs li { color: var(--cream-2); }
.refs b {
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  color: var(--amber); margin-right: .5rem; letter-spacing: .03em;
}
/* Sin código de referencia: se compactan en línea */
.refs-simple { display: flex; flex-wrap: wrap; gap: .4rem; }
.refs-simple li {
  padding: .3rem .7rem; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: .82rem; color: var(--cream-2);
}

.marca-nota {
  max-width: var(--maxw); margin: 1.4rem auto 0; padding-inline: var(--gutter);
  color: var(--cream-3); font-size: .9rem;
}

.marcas-lista {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  display: flex; flex-wrap: wrap; gap: .7rem;
}
.marcas-lista li {
  font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  color: var(--cream);
  padding: .7rem 1.3rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--bg-3);
}

/* Texto legal */
/* La barra es fija: la primera sección tiene que dejarle sitio */
.legal { padding: calc(var(--nav-h) + clamp(2rem, 6vh, 3.5rem)) 0 clamp(4rem, 10vh, 6rem); }
.legal-inner { max-width: 760px; margin: 0 auto; padding-inline: var(--gutter); }
.legal-inner h2 {
  font-family: var(--serif); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem);
  margin: 2.6rem 0 .9rem;
}
.legal-inner h2:first-of-type { margin-top: 0; }
.legal-inner p, .legal-inner li { color: var(--cream-2); }
.legal-inner p + p { margin-top: .9rem; }
.legal-inner ul { margin-top: .9rem; display: grid; gap: .5rem; }
.legal-inner li { position: relative; padding-left: 1.3rem; }
.legal-inner li::before { content: "—"; position: absolute; left: 0; color: var(--amber); }
.pendiente {
  margin-top: 1.4rem; padding: 1.1rem 1.2rem;
  border: 1px dashed var(--amber-dim); border-radius: 10px;
  background: rgba(201,143,60,.05);
  color: var(--cream-2); font-size: .9rem;
}
.legal-fecha { margin-top: 2.4rem; }
.pendiente strong { color: var(--amber-2); display: block; margin-bottom: .35rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

/* 404 */
.error404 {
  min-height: 78vh; display: grid; place-items: center; text-align: center;
  padding: calc(var(--nav-h) + 3rem) var(--gutter) 4rem;
}
.error404-num {
  font-family: var(--mono); font-size: clamp(3rem, 2rem + 6vw, 5rem);
  color: var(--amber); letter-spacing: .06em;
}
.error404 .lead { margin-inline: auto; }
.error404 .cta-actions { justify-content: center; }

/* =============================================================
   18. Footer
   ============================================================= */
.footer { border-top: 1px solid var(--line-2); padding: 3.4rem 0 6.5rem; background: var(--bg); }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  display: grid; gap: 2.2rem;
}
.footer-brand p { margin-top: .8rem; color: var(--cream-3); font-size: .92rem; max-width: 40ch; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; font-size: .93rem; }
.footer-nav a { color: var(--cream-2); border-bottom: 1px solid transparent; padding-block: .4rem; transition: color .3s var(--ease-out), border-color .3s var(--ease-out); }
.footer-nav a:hover { color: var(--amber-2); border-color: var(--amber-2); }
.footer-nap { color: var(--cream-3); font-size: .9rem; display: grid; gap: .6rem; }
.footer-nap strong { color: var(--cream-2); }
.footer-nap a { color: var(--cream-2); display: inline-block; padding-block: .3rem; }
.footer-nap a:hover { color: var(--amber-2); }
.footer-legal {
  max-width: var(--maxw); margin: 2.6rem auto 0; padding-inline: var(--gutter);
  color: var(--cream-3); font-size: .8rem;
}
/* Contador de visitas: discreto, en la misma línea del aviso de copyright */
.contador[hidden] { display: none; }
.contador b {
  font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--cream-2); letter-spacing: .02em;
}

/* =============================================================
   19. Barra de llamada (móvil)
   ============================================================= */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-2);
  border-top: 1px solid var(--line-2);
  transform: translateY(110%);
  transition: transform .5s var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar.is-visible { transform: translateY(0); }
.callbar-btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 56px; font-weight: 700; font-size: .97rem;
}
.callbar-tel { background: var(--amber); color: #17100A; }
.callbar-wa  { background: var(--bg-3); color: var(--cream); }

/* =============================================================
   20. Revelados
   ============================================================= */
.reveal, [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .85s var(--ease-out), transform .95s var(--ease-out);
}
.reveal.is-revealed, [data-reveal].is-revealed { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }   /* defensa: nunca invisible */

.reveal:nth-child(2) { transition-delay: .07s; }
.reveal:nth-child(3) { transition-delay: .14s; }
.reveal:nth-child(4) { transition-delay: .21s; }
.reveal:nth-child(5) { transition-delay: .28s; }

/* Escalonado dentro de las rejillas */
.gamas > [data-reveal]:nth-child(2),
.galeria > [data-reveal]:nth-child(2),
.resenas-grid > [data-reveal]:nth-child(2),
.vias > [data-reveal]:nth-child(2) { transition-delay: .08s; }
.gamas > [data-reveal]:nth-child(3),
.galeria > [data-reveal]:nth-child(3),
.resenas-grid > [data-reveal]:nth-child(3),
.vias > [data-reveal]:nth-child(3) { transition-delay: .16s; }
.galeria > [data-reveal]:nth-child(4) { transition-delay: .24s; }
.galeria > [data-reveal]:nth-child(n+5) { transition-delay: .3s; }

/* =============================================================
   21. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .strip-list { grid-template-columns: repeat(4, 1fr); }
  .resenas-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 720px) {
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .modelos { grid-template-columns: repeat(2, 1fr); align-items: start; }
  /* Las listas largas en dos columnas: iguala mucho las alturas
     de las tarjetas y la rejilla deja de verse dentada. */
  .refs { grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: .45rem 1.4rem; }
  .vias { grid-template-columns: repeat(3, 1fr); }
  .presupuesto { grid-template-columns: 1.35fr 1fr; gap: 3.2rem; }
  .ejemplo { grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: start; }
  .cta-datos { grid-template-columns: repeat(2, 1fr); gap: 2.2rem; }
  .footer-inner { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 2.6rem; }
  .resenas-grid { grid-template-columns: repeat(3, 1fr); }
  .gamas { grid-template-columns: repeat(3, 1fr); }
  .pasos { grid-template-columns: repeat(2, 1fr); gap: 0 2.6rem; }
}

@media (min-width: 720px) {
  .mosaico { left: 26%; }
  .hero-tint { background:
    linear-gradient(180deg, rgba(14,10,7,.38) 0%, rgba(14,10,7,.44) 30%, rgba(14,10,7,.85) 58%, rgba(14,10,7,.93) 82%, var(--bg) 100%),
    linear-gradient(96deg, var(--bg) 14%, rgba(14,10,7,.72) 42%, rgba(14,10,7,.22) 100%); }
}

@media (min-width: 960px) {
  :root { --nav-h: 84px; }
  .mosaico { left: 53%; gap: .7rem; }
  .mosaico-col { gap: .7rem; }
  .mosaico-col-3 { display: flex; }
  .hero-tint { background:
    linear-gradient(180deg, rgba(14,10,7,.6) 0%, rgba(14,10,7,.2) 34%, rgba(14,10,7,.72) 84%, var(--bg) 100%),
    linear-gradient(96deg, var(--bg) 34%, rgba(14,10,7,.6) 50%, rgba(14,10,7,.08) 100%); }
  .hero-title { max-width: none; text-wrap: pretty; }   /* el salto lo marca el <br> */
  .hero-sub { max-width: 37ch; }
  .hero-anchor { max-width: 33ch; }
  .nav-links { display: flex; }
  .nav .btn-nav { display: inline-flex; }
  .nav-toggle { display: none; }
  .nav-drawer { display: none !important; }
  .callbar { display: none; }
  .footer { padding-bottom: 3.4rem; }

  /* Sin align-items:start: la columna del visual tiene que estirarse
     hasta el final de la lista para que el sticky tenga recorrido. */
  .montaje-body { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .capas { padding-block: 4vh 22vh; }
  .capa { padding: 2.6rem 0; opacity: .4; }
  .capa.is-active { opacity: 1; }

  .galeria { grid-template-columns: repeat(4, 1fr); align-items: start; }
  .obra-alta { margin-top: -1.6rem; }

  .pasos { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .paso { border-left: 0; border-top: 1px solid var(--line-2); margin-left: 0;
    padding: 3rem 1.6rem 0 0; }
  .paso:first-child { padding-top: 3rem; }
  .paso-num { left: 0; top: -1.15rem; }
  .paso:first-child .paso-num { top: -1.15rem; }

  .cta-datos { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1280px) {
  .stage { padding: 2.4rem; }
}

/* -------------------------------------------------------------
   Pantallas grandes y televisores.
   Casi todo el sistema está en rem, así que subiendo la raíz
   escala el conjunto en bloque en vez de dejar una columna
   pequeña perdida en el centro de una pantalla enorme.
   ------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --maxw: 1400px; --nav-h: 92px; }
  html { font-size: 17px; }
}

/* Full HD: sirve tanto a un monitor grande como a una tele de salón */
@media (min-width: 1900px) {
  :root { --maxw: 1520px; --nav-h: 96px; }
  html { font-size: 18px; }
}

@media (min-width: 2100px) {
  :root { --maxw: 1660px; --nav-h: 104px; }
  html { font-size: 19.5px; }

  /* A partir de aquí el mosaico deja de sangrar hasta el borde y se alinea
     con el contenedor: si no, el texto queda con un margen enorme a la
     izquierda y las fotos pegadas al canto derecho, y se ve descentrado. */
  .mosaico {
    left: calc((100vw - var(--maxw)) / 2 + var(--maxw) * .46);
    right: calc((100vw - var(--maxw)) / 2);
  }
}

@media (min-width: 3000px) {
  :root { --maxw: 2100px; --nav-h: 124px; }
  html { font-size: 24px; }
}

/* =============================================================
   22. Movimiento reducido — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .mosaico-col { animation: none; }
  .ficha-track { animation-duration: 140s; }
  .hero-scroll span { animation: none; opacity: .5; }
  .stage.is-driven.s6 .layer-brillo { animation: none; opacity: 0; }
  .splash-line, .splash-word { animation-duration: .01s; }
}