/* Línea 013 · tokens y maquetación. El motor (engine/scrollcraft.css) se tematiza
   desde aquí; no se restyla nada de .sc-stage / .sc-copy / [data-sc-*]. */

:root {
  --beige: #EBE3D2;
  --beige-claro: #F5F1E8;
  --verde: #414833;
  --carbon: #252820;
  --piedra: #CFC6B5;
  --negro: #000000;

  --sc-canvas: var(--beige);
  --sc-surface: var(--beige-claro);
  --sc-ink: var(--carbon);
  --sc-ink-soft: #5A5747;
  --sc-accent: var(--verde);
  --sc-accent-ink: var(--beige);
  --sc-hairline: var(--piedra);
  --sc-hairline-strong: #B9AF9C;

  --sc-font-display: "Cormorant Garamond", "Times New Roman", serif;
  --sc-font-text: "Manrope", system-ui, sans-serif;
  --sc-font-mono: "Manrope", system-ui, sans-serif;

  --sc-t-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --sc-leading-body: 1.6;
  --sc-measure: 58ch;
  --sc-gutter: clamp(1.25rem, 6vw, 7rem);
  --sc-maxw: 90rem;
  --sc-section: clamp(6rem, 12vw, 13rem);
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px; --sc-r-pill: 999px;

  --sc-shadow-color: 45 20% 20%;
  --sc-e1: none; --sc-e2: none; --sc-e3: none;
  --sc-edge: none;

  --bar-h: 4.5rem;
}

html { scroll-padding-top: var(--bar-h); }
body { color: var(--sc-ink); }
[data-sc-progress] { display: none; }

/* ---------------------------------------------------------- tipografía -- */
.display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
  color: var(--sc-ink);
}
.display--xl { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.4rem); }
.display--lg { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.9rem); }
.display--md { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); }
.lede { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.5; max-width: 40ch; margin: 0; text-wrap: pretty; }
.body { max-width: var(--sc-measure); color: var(--sc-ink-soft); margin: 0; text-wrap: pretty; }
.eyebrow {
  margin: 0;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-accent);
}
.note { color: var(--sc-ink-soft); max-width: var(--sc-measure); margin: var(--sc-8) 0 0; }
.quote {
  font-family: var(--sc-font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.15;
  color: var(--sc-accent); margin: var(--sc-6) 0 0; max-width: 24ch; text-wrap: balance;
}
.link { color: var(--sc-accent); text-decoration-color: var(--piedra); transition: text-decoration-color 160ms var(--sc-ease-out); }
.link:hover { text-decoration-color: currentColor; }

.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.wrap--narrow { max-width: 62rem; }
.stack > * + * { margin-top: var(--sc-5); }
.section { padding-block: var(--sc-section); }
.section__head { max-width: 44rem; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.section--lead { padding-top: clamp(5rem, 10vw, 9rem); }
.actions { margin-top: var(--sc-7); }

/* ------------------------------------------------------------- botones -- */
.btn {
  display: inline-block; padding: 0.95em 1.7em;
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  border: 1px solid var(--sc-accent); border-radius: var(--sc-r-pill);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn--solid:hover { background: #2F3525; border-color: #2F3525; }
.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn--ghost:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* ---------------------------------------------------------------- logo -- */
.logo { width: 100%; height: auto; display: block; }
.logo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------- intro -- */
.intro {
  position: fixed; inset: 0; z-index: 80;
  background: var(--negro);
  display: grid; place-items: center;
  color: var(--beige);
  transition: opacity 1100ms var(--sc-ease-in-out), visibility 0s linear 1100ms;
}
.intro__logo { width: clamp(6.5rem, 16vw, 10rem); will-change: transform; }
.intro.is-leaving { opacity: 0; visibility: hidden; }
.intro.is-gone { display: none; }

/* ------------------------------------------------------------ cabecera -- */
.site-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  color: var(--beige);
  opacity: 0; visibility: hidden;
  transition: opacity 600ms var(--sc-ease-out), visibility 0s linear 600ms, background-color 320ms var(--sc-ease-out), color 320ms var(--sc-ease-out), box-shadow 320ms var(--sc-ease-out);
}
.site-bar.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
.site-bar.is-solid { background: color-mix(in oklab, var(--beige) 92%, transparent); color: var(--sc-ink); box-shadow: 0 1px 0 var(--piedra); backdrop-filter: blur(10px); }
.site-bar.is-solid .site-bar__brand { color: var(--sc-accent); }
.site-bar__brand { width: 3.7rem; color: var(--beige); justify-self: start; transition: color 320ms var(--sc-ease-out); }
.site-bar__nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); justify-self: center; grid-column: 2; }
.site-bar__nav a { text-decoration: none; font-weight: 500; font-size: 0.98rem; color: inherit; }
.site-bar__nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); }
.site-bar__nav .btn { margin-left: clamp(0.5rem, 2vw, 2rem); }
.site-bar__toggle { display: none; }

@media (min-width: 861px) {
  .site-bar__nav .btn { position: absolute; right: clamp(1rem, 3vw, 2.5rem); top: 50%; translate: 0 -50%; margin: 0; }
}
@media (max-width: 860px) {
  .site-bar { grid-template-columns: auto 1fr auto; }
  .site-bar__toggle {
    display: inline-block; grid-column: 3; justify-self: end;
    background: none; border: 1px solid currentColor; border-radius: var(--sc-r-pill);
    padding: 0.55em 1.1em; font-size: 0.9rem; font-weight: 600; color: inherit; cursor: pointer;
  }
  .site-bar__nav {
    display: none; position: absolute; left: 0; right: 0; top: var(--bar-h);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--beige); color: var(--sc-ink); box-shadow: 0 1px 0 var(--piedra);
    padding: 0.5rem 0 1rem;
  }
  .site-bar.is-open .site-bar__nav { display: flex; }
  .site-bar__nav a { padding: 0.9rem clamp(1rem, 6vw, 2rem); font-size: 1.1rem; }
  .site-bar__nav .btn { margin: 0.75rem clamp(1rem, 6vw, 2rem) 0; align-self: flex-start; color: var(--sc-accent); }
}

/* ---------------------------------------------------------------- hero -- */
.hero {
  --sc-canvas: #0A0906;
  --sc-ink: var(--beige);
  color: var(--beige);
  background: var(--negro);
}
.hero [data-sc-stage] {
  /* Fondo de carga coherente con el comedor antes de recibir el póster. */
  background: #9A8D79;
}
.hero__scrim {
  --sc-scrim-a: 70%;
  /* Una vez desaparece el titular, recuperar toda la luz del comedor. */
  opacity: clamp(0, calc((0.4 - var(--sc-p, 0)) * 16.67), 1);
}
.hero__copy { max-width: min(40rem, 80vw); bottom: clamp(3.5rem, 12vh, 8rem); }
.hero__title { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); line-height: 1.02; margin: 0; letter-spacing: -0.01em; }
.hero__sub { margin: 0.6em 0 0; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); color: color-mix(in oklab, var(--beige) 86%, transparent); }
.hero__hint {
  position: absolute; z-index: var(--sc-z-copy); left: 50%; bottom: clamp(1.5rem, 5vh, 3rem); translate: -50% 0;
  margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--beige);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.hero__hint::before { content: ""; width: 1px; height: 2.2rem; background: currentColor; opacity: 0.8; }
.hero__skip {
  position: absolute; z-index: var(--sc-z-copy); right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1.5rem, 5vh, 3rem);
  font-size: 0.82rem; letter-spacing: 0.04em; color: color-mix(in oklab, var(--beige) 82%, transparent);
  text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--beige) 40%, transparent); padding-bottom: 0.15em;
  opacity: calc(1 - (var(--sc-p, 0) - 0.72) * 6);
  transition: color 160ms var(--sc-ease-out);
}
.hero__skip:hover { color: var(--beige); }
/* Export nativo para cada orientación. El canvas siempre ocupa el viewport y
   HeroSequence recorta desde los píxeles fuente; nunca se amplía por CSS. */
.hero .sc-stage__poster, .hero video[data-sc-scrub], .hero .hero__seq {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}
/* ScrollCraft no selecciona este canvas (se retira data-sc-sequence antes del
   mount), así que su geometría y su relevo del póster se declaran aquí. */
.hero .hero__seq {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 380ms var(--sc-ease-out);
}
.hero.is-custom-sequence video[data-sc-scrub] { opacity: 0 !important; }
.hero.is-custom-sequence:not(.is-seq-ready) .sc-stage__poster { opacity: 1; }
.hero.is-custom-sequence.is-seq-ready .hero__seq { opacity: 1; }
.hero.is-custom-sequence.is-seq-ready .sc-stage__poster { opacity: 0; }
.hero.is-media-switching .sc-stage__poster { opacity: 1; }
.hero.is-media-switching video[data-sc-scrub],
.hero.is-media-switching .hero__seq { opacity: 0; }
/* Funde a beige al final del acto, para que el contenido no entre con un corte. */
.hero__fade {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background: linear-gradient(to top, var(--beige) 0%, var(--beige) 8%, color-mix(in oklab, var(--beige) 55%, transparent) 26%, transparent 48%);
  opacity: calc((var(--sc-p, 0) - 0.86) * 8);
}
@media (max-width: 860px) {
  .hero__scrim {
    --sc-scrim-a: 92%;
    /* El comedor es más luminoso: una banda inferior protege todo el texto móvil. */
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 86%, transparent) 24%,
      color-mix(in oklab, var(--sc-canvas) 70%, transparent) 38%,
      transparent 58%);
  }
  .hero__copy { bottom: clamp(5.5rem, 16vh, 8rem); }
  .hero__skip { right: auto; left: var(--sc-gutter); bottom: 1.5rem; }
  .hero__hint { display: none; }
}

/* ----------------------------------------------------------- servicios -- */
.steps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.steps__head { position: sticky; top: calc(var(--bar-h) + 2rem); }
.steps__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--piedra); }
.step {
  display: grid; grid-template-columns: 4rem 1fr; gap: 1rem;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) 0; border-bottom: 1px solid var(--piedra);
}
.step__num { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.6rem; color: var(--sc-accent); line-height: 1.2; }
.step__title { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); line-height: 1.1; margin: 0 0 0.45em; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .steps__head { position: static; }
  .step { grid-template-columns: 3rem 1fr; }
}

/* ---------------------------------------------------------- soluciones -- */
.systems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem); }
.system__fig { margin: 0; overflow: hidden; background: var(--beige-claro); aspect-ratio: 16 / 10; }
.system__fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 1400ms var(--sc-ease-out); }
.system.sc-in .system__fig img { transform: none; }
.system__meta { padding-top: 1.25rem; display: grid; grid-template-columns: 6.5rem 1fr; column-gap: 1.25rem; align-items: start; }
.system__meta .diag { grid-row: 1 / span 2; }
.system__name { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.1; margin: 0 0 0.35em; }
@media (max-width: 860px) {
  .systems { grid-template-columns: 1fr; }
}

/* Esquemas en planta: la hoja se mueve una vez, cuando la tarjeta entra en pantalla. */
.diag { width: 6.5rem; height: auto; overflow: visible; color: var(--sc-accent); }
.diag line { stroke: currentColor; stroke-linecap: round; }
.diag__wall { stroke-width: 1; opacity: 0.35; }
.diag__fixed { stroke-width: 2; opacity: 0.45; }
.diag__leaf { stroke-width: 3; transform-box: view-box; }
.diag__pin { fill: currentColor; }
.diag--pivot .diag__leaf { transform-origin: 44px 40px; }
.diag--swing .diag__leaf { transform-origin: 24px 40px; }
.system.sc-in .diag--pivot .diag__leaf { animation: diag-pivot 1500ms 350ms var(--sc-ease-in-out) both; }
.system.sc-in .diag--swing .diag__leaf { animation: diag-swing 1500ms 350ms var(--sc-ease-in-out) both; }
.system.sc-in .diag--slide .diag__leaf { animation: diag-slide 1500ms 350ms var(--sc-ease-in-out) both; }
.system.sc-in .diag--tele .diag__leaf--1 { animation: diag-tele-1 1500ms 350ms var(--sc-ease-in-out) both; }
.system.sc-in .diag--tele .diag__leaf--2 { animation: diag-tele-2 1500ms 350ms var(--sc-ease-in-out) both; }
.system.sc-in .diag--tele .diag__leaf--3 { animation: diag-tele-3 1500ms 350ms var(--sc-ease-in-out) both; }
@keyframes diag-pivot { to { transform: rotate(-58deg); } }
@keyframes diag-swing { to { transform: rotate(-70deg); } }
@keyframes diag-slide { to { transform: translateX(44px); } }
@keyframes diag-tele-1 { to { transform: translateX(0); } }
@keyframes diag-tele-2 { to { transform: translateX(-38px); } }
@keyframes diag-tele-3 { to { transform: translateX(-76px); } }

/* ---------------------------------------------------------- materiales -- */
.materials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.material { margin: 0; }
.material__fig { overflow: hidden; aspect-ratio: 3 / 4; background: var(--beige-claro); }
.material__fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1800ms var(--sc-ease-out); }
.material.sc-in .material__fig img { transform: none; }
.material figcaption { padding-top: 1.1rem; }
.material__name { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem); line-height: 1.1; margin: 0 0 0.35em; }
@media (max-width: 860px) {
  .materials { grid-template-columns: 1fr; }
  .material__fig { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------ nosotros -- */
.section--about { background: var(--beige-claro); }
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ contacto -- */
.section--contact { border-top: 1px solid var(--piedra); }
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.direct { font-style: normal; margin-top: var(--sc-7); border-top: 1px solid var(--piedra); padding-top: 1.5rem; }
.direct p { margin: 0 0 0.5rem; }
.direct__place { color: var(--sc-ink-soft); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
.field { display: grid; gap: 0.45rem; grid-column: 1 / -1; }
.field--half { grid-column: span 1; }
.field label { font-weight: 500; font-size: 0.95rem; }
.req, .opt { font-weight: 400; font-size: 0.8rem; color: var(--sc-ink-soft); margin-left: 0.4em; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; background: var(--beige-claro); border: 1px solid var(--piedra); border-radius: var(--sc-r-sm);
  padding: 0.85em 1em; color: var(--sc-ink); transition: border-color 160ms var(--sc-ease-out);
}
.field input:focus, .field textarea:focus { border-color: var(--sc-accent); outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--sc-accent) 25%, transparent); }
.field textarea { resize: vertical; min-height: 9rem; }
.field input[type="file"] { padding: 0.6em 0; font-size: 0.95rem; }
.field input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--sc-accent); background: transparent;
  border: 1px solid var(--sc-accent); border-radius: var(--sc-r-pill); padding: 0.6em 1.2em; margin-right: 1rem; cursor: pointer;
}
.field__help { margin: 0; font-size: 0.85rem; color: var(--sc-ink-soft); }
.field__error { margin: 0; font-size: 0.88rem; color: #8A2E1F; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #8A2E1F; }
.field--check { grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: start; }
.field--check input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; }
.field--check label { font-weight: 400; font-size: 0.92rem; color: var(--sc-ink-soft); }
.field--check .field__error { grid-column: 1 / -1; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field--submit { gap: 1rem; margin-top: 0.5rem; }
.form__status { margin: 0; font-size: 0.95rem; color: var(--sc-ink-soft); max-width: var(--sc-measure); }
.form__status.is-error { color: #8A2E1F; }
.form__status.is-ok { color: var(--sc-accent); font-weight: 500; }
@media (max-width: 600px) { .field--half { grid-column: 1 / -1; } }

/* ----------------------------------------------------------------- pie -- */
.foot { border-top: 1px solid var(--piedra); padding-block: clamp(2.5rem, 5vw, 4rem); font-size: 0.95rem; color: var(--sc-ink-soft); }
.foot__grid { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.foot__brand { width: 4.2rem; color: var(--sc-accent); }
.foot__contact p, .foot__cookies { margin: 0 0 0.35rem; }
.foot__links { display: grid; gap: 0.35rem; justify-items: start; }
.foot__cookies { margin-top: 0.75rem; font-size: 0.85rem; }
@media (max-width: 700px) { .foot__grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------- páginas legales -- */
.legal { padding-block: calc(var(--bar-h) + 3rem) 5rem; }
.legal h1 { margin-bottom: 1.5rem; }
.legal h2 { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.6rem; margin: 2.5rem 0 0.75rem; }
.legal p, .legal li { max-width: var(--sc-measure); color: var(--sc-ink-soft); }
.pending { background: #F3E4B8; color: #5A4A10; padding: 0 0.3em; border-radius: 2px; }
.legal-bar { position: static; opacity: 1; visibility: visible; color: var(--sc-ink); background: var(--beige); box-shadow: 0 1px 0 var(--piedra); }
.legal-bar .site-bar__brand { color: var(--sc-accent); }

/* ------------------------------------------------- movimiento reducido -- */
@media (prefers-reduced-motion: reduce) {
  .intro { transition: none; }
  .site-bar { transition: none; }
  .system__fig img, .material__fig img { transform: none; transition: none; }
  .diag__leaf { animation: none !important; }
  .diag--pivot .diag__leaf { transform: rotate(-58deg); }
  .diag--swing .diag__leaf { transform: rotate(-70deg); }
  .diag--slide .diag__leaf { transform: translateX(44px); }
  .diag--tele .diag__leaf--2 { transform: translateX(-38px); }
  .diag--tele .diag__leaf--3 { transform: translateX(-76px); }
  .hero__hint { display: none; }
}

/* =================================================================
   Marca del catálogo (CATALOGO LINEA013.pdf): Cormorant en titulares y
   texto, sans geométrica como la de "CERRAMIENTOS" para rótulos, bloques
   en verde 013, trama de puntos, separador con V y folio de página.
   ================================================================= */
:root {
  --sans: "Jost", "Avenir Next", "Futura", system-ui, sans-serif;
  --sc-font-display: "Cormorant Garamond", "Times New Roman", serif;
  --sc-font-text: "Cormorant Garamond", "Times New Roman", serif;
  --sc-section: clamp(5.5rem, 10vw, 10rem);
  --sc-t-base: clamp(1.15rem, 1.05rem + 0.35vw, 1.3rem);
  --verde-claro: #565E48;
  --dots: radial-gradient(circle, color-mix(in oklab, var(--beige) 55%, transparent) 1.1px, transparent 1.6px);
}
body { font-family: var(--sc-font-text); font-weight: 500; -webkit-font-smoothing: antialiased; }
.body, .note, .lede { font-weight: 500; }

/* Titulares: versales espaciadas, como "SERVICIO" o "S O F T" */
.display {
  font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.04;
}
.display--xl { font-size: clamp(2.3rem, 1.3rem + 4vw, 5rem); }
.display--lg { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.5rem); }
.hero__title { font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; }
.hero__sub, .eyebrow, .site-bar__nav a, .btn, .step__num, .folio, .year,
.field label, .req, .opt, .field__help, .form__status, .hero__skip, .hero__hint, .foot, .direct, .system__num {
  font-family: var(--sans);
}
.hero__sub { font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.85rem; }
.eyebrow { font-weight: 400; font-size: 0.75rem; letter-spacing: 0.3em; }
.site-bar__nav a { font-weight: 400; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; }
.btn { font-weight: 400; font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; border-radius: 0; padding: 1.15em 2em; }
.btn--solid:hover { transform: translateY(-1px); }

/* Folio: la línea inferior de cada página del catálogo */
.folio {
  display: grid; grid-template-columns: 1fr 2fr 1fr auto; align-items: baseline;
  margin: clamp(4rem, 7vw, 6rem) auto 0; padding-top: 1.1rem;
  border-top: 1px solid color-mix(in oklab, currentColor 22%, transparent);
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in oklab, currentColor 62%, transparent);
}
.section > .folio { margin-bottom: calc(var(--sc-section) * -0.55); }

/* Separador con V y año (MMXXVI) */
.notch { display: block; width: min(20rem, 70%); height: auto; margin-top: var(--sc-7); fill: none; stroke: currentColor; stroke-width: 1.2; }
.year { margin: 1.4rem 0 0; font-size: 0.85rem; letter-spacing: 0.5em; }

/* Bloques en verde 013 */
#servicios, #materiales, #contacto, .foot {
  background: var(--verde); color: var(--beige);
  --sc-ink: var(--beige); --sc-ink-soft: color-mix(in oklab, var(--beige) 76%, transparent);
  --piedra: color-mix(in oklab, var(--beige) 22%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--beige) 40%, transparent);
  --sc-accent: var(--beige); --sc-accent-ink: var(--verde);
}
#servicios .display, #materiales .display, #contacto .display { color: var(--beige); }
#contacto .btn--solid:hover { background: #fff; border-color: #fff; }
.section--contact { border-top: 0; }
.foot { border-top: 1px solid color-mix(in oklab, var(--beige) 18%, transparent); }
.foot .foot__brand { color: var(--beige); }
/* Trama de puntos de la portada del catálogo */
#servicios, #contacto { position: relative; isolation: isolate; }
#servicios::before, #contacto::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(26rem, 45vw); height: 11rem; background: var(--dots); background-size: 22px 22px;
}
#servicios::before { top: 0; left: 0; -webkit-mask: linear-gradient(135deg, #000 10%, transparent 75%); mask: linear-gradient(135deg, #000 10%, transparent 75%); }
#contacto::after { bottom: 0; right: 0; -webkit-mask: linear-gradient(315deg, #000 10%, transparent 75%); mask: linear-gradient(315deg, #000 10%, transparent 75%); }

/* --- Presentación --- */
.lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 7rem); align-items: end; }
.lead__aside { border-top: 1px solid var(--piedra); padding-top: 1.5rem; }
.lead__aside .lede { max-width: 34ch; }

/* --- Servicios: fichas numeradas como la página "Servicio" --- */
#servicios .steps { grid-template-columns: 1fr; }
#servicios .steps__head { position: static; max-width: 46rem; text-align: center; margin-inline: auto; }
#servicios .steps__head .body { margin-inline: auto; }
#servicios .steps__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; border: 0; margin-top: clamp(2.5rem, 5vw, 4rem); }
#servicios .step {
  display: block; position: relative; overflow: hidden; border: 0; border-radius: 6px;
  background: var(--verde-claro); padding: 1.5rem 1.4rem 1.8rem; min-height: 15rem;
}
#servicios .step:nth-child(even) { transform: translateY(2.5rem); }
#servicios .step::after { content: ""; position: absolute; right: 0; bottom: 0; width: 7rem; height: 4.5rem; background: var(--dots); background-size: 9px 9px; -webkit-mask: linear-gradient(315deg, #000, transparent 80%); mask: linear-gradient(315deg, #000, transparent 80%); opacity: 0.7; }
#servicios .step__num { display: block; font-family: var(--sc-font-display); font-size: 2rem; font-weight: 400; letter-spacing: 0; padding: 0; margin-bottom: 2.2rem; color: var(--beige); }
#servicios .step__title { font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.15rem; margin-bottom: 0.7rem; }
#servicios .step .body { font-size: 1.05rem; line-height: 1.45; }
@media (max-width: 1100px) { #servicios .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } #servicios .step:nth-child(even) { transform: none; } #servicios .step { min-height: 0; } }
@media (max-width: 560px) { #servicios .steps__list { grid-template-columns: 1fr; } }

/* --- Soluciones: portada de modelo con banda verde y nombre vertical --- */
#soluciones .section__head { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(2rem, 6vw, 7rem); align-items: end; }
#soluciones .section__head > * { margin-top: 0; }
.systems { grid-template-columns: 1fr; gap: clamp(4rem, 8vw, 8rem); }
.system { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.system:nth-child(even) .system__fig { order: 2; }
.system__fig { position: relative; aspect-ratio: 3 / 2; display: grid; grid-template-columns: clamp(3.5rem, 7vw, 6.5rem) 1fr; background: var(--verde); }
.system__fig img { grid-column: 2; }
.system__fig::before {
  content: attr(data-name); grid-column: 1; grid-row: 1; align-self: center; justify-self: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--sans); font-weight: 300; font-size: clamp(1.1rem, 0.7rem + 1.2vw, 2rem); letter-spacing: 0.3em; color: var(--beige);
}
.system__meta { display: flex; flex-direction: column; align-items: flex-start; padding-top: 0; }
.system__num { order: -1; margin: 0 0 1.5rem; font-size: 0.75rem; letter-spacing: 0.24em; color: var(--sc-accent); }
.system__num span { opacity: 0.5; }
.system__meta .diag { width: 8rem; margin-bottom: 1.5rem; }
.system__name { font-weight: 400; text-transform: uppercase; letter-spacing: 0.3em; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); margin: 0 0 0.8rem; }
#soluciones .note { margin-top: clamp(4rem, 8vw, 7rem); padding-top: 1.5rem; border-top: 1px solid var(--piedra); max-width: none; }

/* --- Materiales (verde): fotos escalonadas --- */
.materials { align-items: start; }
.material:nth-child(2) { margin-top: clamp(0rem, 7vw, 6rem); }
.material:nth-child(3) { margin-top: clamp(0rem, 3.5vw, 3rem); }
.material figcaption { border-top: 1px solid var(--piedra); margin-top: 1.25rem; padding-top: 1.1rem; }
.material__name { font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.3rem; }

/* --- Nosotros: centrado como una página de modelo --- */
.section--about .about { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.section--about .about > * { max-width: 44rem; }
.section--about .body { margin-inline: auto; }
.section--about .quote { margin-inline: auto; max-width: 20ch; font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); }
.section--about .notch { margin-inline: auto; color: var(--sc-accent); }
.section--about .year { color: var(--sc-accent); }

/* --- Contacto (verde): campos con línea inferior --- */
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--sc-hairline-strong); border-radius: 0; padding: 0.7em 0;
  color: var(--beige); font-family: var(--sans); font-weight: 300; font-size: 1rem;
}
.field input:focus, .field textarea:focus { border-color: var(--beige); box-shadow: 0 1px 0 0 var(--beige); }
.field label { font-weight: 400; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.field--check label { text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-family: var(--sc-font-text); }
.field__error { color: #F2B8A8; } .field.is-invalid input, .field.is-invalid textarea { border-color: #F2B8A8; }
.form__status.is-error { color: #F2B8A8; }
.direct { font-weight: 300; }
.direct a { font-size: 1.05rem; color: var(--beige); }

@media (max-width: 860px) {
  #soluciones .section__head, .lead, .system { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .system:nth-child(even) .system__fig { order: 0; }
  .material:nth-child(n) { margin-top: 0; }
  .folio { grid-template-columns: auto 1fr auto; gap: 1rem; } .folio span:nth-child(3) { display: none; }
}
.site-bar__toggle { font-family: var(--sans); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; border-radius: 0; }

/* --- Instagram: carrusel deslizable --- */
.ig__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.ig__head .display { text-transform: none; letter-spacing: 0.01em; }
.ig__nav { display: flex; gap: 0.75rem; align-items: center; }
.ig__btn {
  width: 3rem; height: 3rem; border: 1px solid var(--sc-hairline-strong); background: transparent; color: var(--sc-ink);
  font-size: 1.1rem; cursor: pointer; transition: background-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out);
}
.ig__btn:hover { background: var(--verde); color: var(--beige); border-color: var(--verde); }
.ig__track {
  list-style: none; margin: 0; padding: 0 var(--sc-gutter) 0.5rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(14rem, 24vw, 22rem); gap: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sc-gutter); scrollbar-width: none;
}
.ig__track::-webkit-scrollbar { display: none; }
.ig__item { scroll-snap-align: start; }
.ig__card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--verde); }
.ig__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--sc-ease-out), opacity 300ms; }
.ig__card:hover img { transform: scale(1.04); opacity: 0.92; }
.ig__tag {
  position: absolute; top: 0.8rem; left: 0.8rem; padding: 0.35em 0.8em; background: var(--verde); color: var(--beige);
  font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
}
@media (max-width: 860px) { .ig__track { grid-auto-columns: 72vw; } .ig__btn { display: none; } }
.ig__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.ig__video.is-playing { opacity: 1; }
.ig__card .ig__tag { z-index: 1; }

/* --- Soluciones v3: cuatro fichas iguales, todo alineado --- */
.systems { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.2vw, 2rem); }
.system { display: flex; flex-direction: column; gap: 0; }
.system:nth-child(even) .system__fig { order: 0; }
.system__fig { display: block; aspect-ratio: 4 / 5; background: var(--beige-claro); }
.system__fig::before { content: none; }
.system__meta { padding-top: 1.25rem; border-top: 0; flex: 1; }
.system__num { margin-bottom: 1rem; }
.system__meta .diag { width: 6rem; margin-bottom: 1rem; }
.system__name { font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.5rem); letter-spacing: 0.22em; margin-bottom: 0.6rem; }
.system .body { font-size: 1.08rem; line-height: 1.5; }
@media (max-width: 1100px) { .systems { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; } }
@media (max-width: 560px) { .systems { grid-template-columns: 1fr; } }

/* --- Carta de acabados (página 25 del catálogo) --- */
.finishes { margin-top: clamp(4rem, 8vw, 6.5rem); display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); }
.finishes__title { margin: 0 0 1.25rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--piedra); max-width: 28rem; font-family: var(--sans); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; }
.finishes__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.finishes__list img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.finishes__list span { display: block; margin-top: 0.6rem; font-family: var(--sans); font-weight: 300; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }
.finishes__note { margin: 0; font-family: var(--sans); font-weight: 300; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--sc-ink-soft); }
@media (max-width: 860px) { .finishes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Contacto: render bajo los datos --- */
.contact__fig { margin: var(--sc-7) 0 0; aspect-ratio: 4 / 3; overflow: hidden; }
.contact__fig img { width: 100%; height: 100%; object-fit: cover; }
.finishes__list img { height: auto !important; aspect-ratio: 16 / 10 !important; }
@media (max-width: 560px) { .system__fig { aspect-ratio: 4 / 3; } }

/* =================================================================
   Cristal (referencias en marca/referencias-botones): pastillas
   redondeadas, translúcidas, con desenfoque y un brillo fino arriba.
   ================================================================= */
:root {
  --glass-blur: blur(18px) saturate(160%);
  --glass-bg: color-mix(in oklab, var(--beige-claro) 58%, transparent);
  --glass-edge: color-mix(in oklab, #fff 55%, transparent);
  --glass-shadow: inset 0 1px 0 color-mix(in oklab, #fff 60%, transparent), 0 10px 30px -14px rgb(37 40 32 / 0.35);
  --r-card: 18px;
}
.btn {
  border-radius: 999px; padding: 1.05em 1.9em;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition: background-color 220ms var(--sc-ease-out), color 220ms var(--sc-ease-out), transform 160ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--solid { background: color-mix(in oklab, var(--verde) 88%, transparent); border-color: color-mix(in oklab, #fff 18%, transparent); color: var(--beige); }
.btn--solid:hover { background: var(--verde); border-color: color-mix(in oklab, #fff 25%, transparent); transform: translateY(-1px); }
.btn--ghost { background: var(--glass-bg); border-color: var(--glass-edge); color: var(--sc-ink); }
.btn--ghost:hover { background: color-mix(in oklab, var(--beige-claro) 80%, transparent); }
#contacto .btn--solid, #servicios .btn--solid { background: color-mix(in oklab, var(--beige) 90%, transparent); color: var(--verde); border-color: color-mix(in oklab, #fff 50%, transparent); }
#contacto .btn--solid:hover { background: var(--beige-claro); }
.field input[type="file"]::file-selector-button { border-radius: 999px; background: color-mix(in oklab, var(--beige) 14%, transparent); border-color: color-mix(in oklab, var(--beige) 35%, transparent); color: var(--beige); }

/* Barra superior: logo y menú flotando en cápsulas de cristal */
.site-bar, .site-bar.is-solid { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: 0.6rem; }
.site-bar__brand {
  width: 3.4rem; padding: 0.45rem; border-radius: 16px;
  background: color-mix(in oklab, #15140f 22%, transparent); border: 1px solid color-mix(in oklab, #fff 28%, transparent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow);
}
.site-bar.is-solid .site-bar__brand { background: var(--glass-bg); border-color: var(--glass-edge); }
@media (min-width: 861px) {
  .site-bar__nav {
    gap: 0.25rem; padding: 0.35rem; border-radius: 999px;
    background: color-mix(in oklab, #15140f 22%, transparent); border: 1px solid color-mix(in oklab, #fff 28%, transparent);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow);
    transition: background-color 320ms var(--sc-ease-out), border-color 320ms var(--sc-ease-out);
  }
  .site-bar.is-solid .site-bar__nav { background: var(--glass-bg); border-color: var(--glass-edge); }
  .site-bar__nav a:not(.btn) { padding: 0.7em 1.25em; border-radius: 999px; transition: background-color 200ms var(--sc-ease-out); }
  .site-bar__nav a:not(.btn):hover { text-decoration: none; background: color-mix(in oklab, currentColor 12%, transparent); }
  .site-bar__nav .btn { top: calc(50% + 0.3rem); }
  .site-bar:not(.is-solid) .site-bar__nav .btn { background: color-mix(in oklab, #15140f 22%, transparent); border-color: color-mix(in oklab, #fff 28%, transparent); color: var(--beige); }
}
@media (max-width: 860px) {
  .site-bar__toggle {
    border-radius: 999px; padding: 0.75em 1.3em;
    background: color-mix(in oklab, #15140f 22%, transparent); border: 1px solid color-mix(in oklab, #fff 28%, transparent);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow);
  }
  .site-bar.is-solid .site-bar__toggle, .site-bar.is-open .site-bar__toggle { background: var(--glass-bg); border-color: var(--glass-edge); color: var(--sc-ink); }
  .site-bar.is-open .site-bar__brand { background: var(--glass-bg); border-color: var(--glass-edge); color: var(--sc-accent); }
  /* Menú desplegable como panel de cristal (referencia 2) */
  .site-bar__nav {
    left: auto; right: clamp(1rem, 3vw, 2.5rem); top: calc(var(--bar-h) + 0.6rem); width: min(16rem, calc(100vw - 2rem));
    padding: 0.5rem; gap: 0.15rem; border-radius: 26px;
    background: color-mix(in oklab, var(--beige-claro) 72%, transparent); border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow), 0 24px 48px -20px rgb(37 40 32 / 0.4);
  }
  .site-bar__nav a { padding: 0.95rem 1.1rem; border-radius: 18px; font-size: 0.82rem; }
  .site-bar__nav a:not(.btn):active { background: color-mix(in oklab, var(--verde) 10%, transparent); }
  .site-bar__nav .btn { margin: 0.4rem 0 0; align-self: stretch; text-align: center; background: color-mix(in oklab, var(--verde) 90%, transparent); color: var(--beige); border-color: transparent; }
}

/* Esquinas redondeadas en fotos y fichas */
.system__fig, .material__fig, .contact__fig, .ig__card, .finishes__list img, #servicios .step, .lead__aside { border-radius: var(--r-card); }
.lead__aside { border-radius: 0; }
.ig__btn {
  border-radius: 999px; background: var(--glass-bg); border-color: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow);
}
.ig__tag { border-radius: 999px; background: color-mix(in oklab, var(--verde) 70%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid color-mix(in oklab, #fff 25%, transparent); }
.hero__skip { padding: 0.55em 1.1em; border: 1px solid color-mix(in oklab, #fff 30%, transparent); border-radius: 999px; background: color-mix(in oklab, #15140f 22%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* --- Móvil: servicios deslizables, contacto directo --- */
.quick { display: none; }
@media (max-width: 860px) {
  #servicios .steps__list {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--sc-gutter) * -1); padding: 0 var(--sc-gutter) 0.5rem; scroll-padding-inline: var(--sc-gutter);
  }
  #servicios .steps__list::-webkit-scrollbar { display: none; }
  #servicios .step { scroll-snap-align: start; min-height: 14rem; }
  #servicios .step:nth-child(even) { transform: none; }
  .quick { display: flex; gap: 0.6rem; margin-top: var(--sc-6); }
  .quick .btn { flex: 1; text-align: center; }
  #contacto .quick .btn--ghost { background: color-mix(in oklab, var(--beige) 12%, transparent); color: var(--beige); border-color: color-mix(in oklab, var(--beige) 35%, transparent); }
  .contact__fig { aspect-ratio: 16 / 10; margin-top: var(--sc-6); }
  .contact { gap: 3rem; }
}

/* Contacto como botón propio a la derecha; el logo, sin cápsula. */
.site-bar__cta { grid-column: 3; justify-self: end; }
.site-bar:not(.is-solid) .site-bar__cta { background: color-mix(in oklab, #15140f 22%, transparent); border-color: color-mix(in oklab, #fff 28%, transparent); color: var(--beige); }
@media (min-width: 861px) { .site-bar__menu-cta { display: none !important; } }
@media (max-width: 860px) { .site-bar__cta { display: none; } }
.site-bar__brand, .site-bar.is-solid .site-bar__brand, .site-bar.is-open .site-bar__brand {
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; width: 3.4rem;
}

/* =================================================================
   2026-10-10 · Cabecera centrada, fichas minimalistas, bloque catálogo
   ================================================================= */
/* Cabecera: menú a la izquierda, logo grande en el centro, contacto a la derecha */
.site-bar--center { --bar-h: 5.75rem; height: var(--bar-h); }
.site-bar--center .site-bar__brand { grid-column: 2; grid-row: 1; justify-self: center; width: clamp(4.2rem, 6vw, 5.4rem); }
.site-bar--center .site-bar__nav { grid-column: 1; grid-row: 1; justify-self: start; }
.site-bar--center .site-bar__cta { grid-column: 3; grid-row: 1; }
html { scroll-padding-top: 5.75rem; }
@media (max-width: 860px) {
  .site-bar--center { grid-template-columns: 1fr auto 1fr; --bar-h: 5rem; }
  .site-bar--center .site-bar__brand { width: 4.4rem; }
  .site-bar--center .site-bar__toggle { grid-column: 3; grid-row: 1; }
  .site-bar--center .site-bar__nav { grid-column: auto; grid-row: auto; }
}

/* Fichas de soluciones: número + nombre en una línea, esquema a la derecha con su propio espacio */
.system__meta { padding-top: 1.4rem; }
.system__row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--piedra); }
.system__name { display: flex; align-items: baseline; gap: 0.9rem; margin: 0; font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem); letter-spacing: 0.24em; }
.system__name .system__num { margin: 0; font-family: var(--sans); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.12em; color: var(--sc-ink-soft); }
.system__meta .diag { width: 3.6rem; margin: 0; flex: none; }
.diag__wall { stroke-width: 0.8; opacity: 0.3; }
.diag__fixed { stroke-width: 1.4; opacity: 0.4; }
.diag__leaf { stroke-width: 2; }
.diag__pin { r: 2.6; fill: var(--sc-canvas, var(--beige)); stroke: currentColor; stroke-width: 1.2; }
.system .body { font-size: 1.05rem; }

/* Bloque catálogo: las páginas en abanico, se abren al pasar el ratón */
.catalog {
  margin-top: clamp(4rem, 8vw, 6.5rem); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2rem, 5vw, 4.5rem); border-radius: 28px; background: var(--verde); color: var(--beige); text-decoration: none; overflow: hidden; position: relative; isolation: isolate;
}
.catalog::after { content: ""; position: absolute; z-index: -1; right: 0; bottom: 0; width: 18rem; height: 10rem; background: var(--dots); background-size: 20px 20px; -webkit-mask: linear-gradient(315deg, #000 10%, transparent 75%); mask: linear-gradient(315deg, #000 10%, transparent 75%); }
.catalog__pages { position: relative; display: block; aspect-ratio: 16 / 10; }
.catalog__page {
  position: absolute; left: 6%; top: 8%; width: 82%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px;
  box-shadow: 0 30px 60px -25px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.06);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.catalog__page--3 { transform: translate(10%, -6%) rotate(7deg); }
.catalog__page--2 { transform: translate(6%, -3%) rotate(3.5deg); }
.catalog__page--1 { transform: translate(2%, 0) rotate(-1deg); }
.catalog__page--0 { transform: translate(-4%, 5%) rotate(-5deg); }
@media (hover: hover) {
  .catalog:hover .catalog__page--3 { transform: translate(22%, -16%) rotate(12deg); }
  .catalog:hover .catalog__page--2 { transform: translate(12%, -8%) rotate(6deg); }
  .catalog:hover .catalog__page--1 { transform: translate(2%, -1%) rotate(0deg); }
  .catalog:hover .catalog__page--0 { transform: translate(-10%, 9%) rotate(-8deg); }
  .catalog:hover .catalog__btn { background: var(--beige-claro); }
}
.catalog__text { display: grid; gap: 1rem; justify-items: start; }
.catalog .eyebrow { color: var(--beige); }
.catalog__title { font-family: var(--sc-font-display); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.05; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); }
.catalog__models { font-family: var(--sans); font-weight: 300; font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.85; }
.catalog__desc { color: color-mix(in oklab, var(--beige) 78%, transparent); font-size: 1.1rem; }
.catalog__btn { margin-top: 0.75rem; background: color-mix(in oklab, var(--beige) 92%, transparent); color: var(--verde); border-color: color-mix(in oklab, #fff 50%, transparent); }
@media (max-width: 860px) {
  .catalog { grid-template-columns: 1fr; padding: 1.75rem 1.5rem 2rem; border-radius: 22px; }
  .catalog__pages { margin: 0.5rem 0 0.75rem; }
}
@media (prefers-reduced-motion: reduce) { .catalog__page { transition: none; } }
.catalog__page { height: auto; }
.catalog__text { position: relative; z-index: 1; }
.site-bar--center .site-bar__brand { width: clamp(4.8rem, 7.5vw, 7rem); }
.site-bar--center { --bar-h: 6.5rem; }
@media (max-width: 860px) { .site-bar--center .site-bar__brand { width: 4.8rem; } .site-bar--center { --bar-h: 5.25rem; } }
.site-bar--center.is-solid {
  background: color-mix(in oklab, var(--beige) 72%, transparent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--piedra) 70%, transparent);
}

/* =================================================================
   2026-10-10 · Contacto en tarjetas redondeadas y pie con logo grande
   ================================================================= */
.quick { display: none !important; }
.contact { align-items: stretch; }
.contact__info { display: flex; flex-direction: column; }
.reach { list-style: none; margin: var(--sc-7) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.reach__wide { grid-column: 1 / -1; }
.reach__card {
  display: grid; gap: 0.35rem; padding: 1.1rem 1.3rem; border-radius: 18px; text-decoration: none; color: var(--beige);
  background: color-mix(in oklab, var(--beige) 7%, transparent); border: 1px solid color-mix(in oklab, var(--beige) 16%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 10%, transparent);
  transition: background-color 220ms var(--sc-ease-out), transform 160ms var(--sc-ease-out), border-color 220ms var(--sc-ease-out);
}
a.reach__card:hover { background: color-mix(in oklab, var(--beige) 13%, transparent); border-color: color-mix(in oklab, var(--beige) 30%, transparent); }
a.reach__card:active { transform: scale(0.98); }
.reach__label { font-family: var(--sans); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.65; }
.reach__value { font-family: var(--sans); font-weight: 300; font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.12rem); letter-spacing: 0.01em; overflow-wrap: anywhere; }
.contact__fig { margin-top: 0.75rem; border-radius: 18px; flex: 1; min-height: 14rem; aspect-ratio: auto; }

.form--card {
  align-self: start; padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: 28px; gap: 1.4rem 1rem;
  background: var(--verde-claro); border: 1px solid color-mix(in oklab, var(--beige) 14%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 12%, transparent), 0 40px 80px -40px rgb(0 0 0 / 0.45);
}
.form__head { grid-column: 1 / -1; margin: 0 0 0.25rem; font-family: var(--sc-font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); color: var(--beige); }
.form--card .field input[type="text"], .form--card .field input[type="email"], .form--card .field input[type="tel"], .form--card .field textarea {
  border: 1px solid color-mix(in oklab, var(--beige) 18%, transparent); border-radius: 14px; padding: 0.85em 1em;
  background: color-mix(in oklab, #15140f 14%, transparent);
}
.form--card .field input:focus, .form--card .field textarea:focus { border-color: color-mix(in oklab, var(--beige) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--beige) 14%, transparent); }
.form--card .field label { font-size: 0.7rem; }
.form--card .req, .form--card .opt { opacity: 0.6; }
.form--card .field--submit .btn { width: 100%; text-align: center; padding-block: 1.25em; }
@media (max-width: 860px) {
  .reach { grid-template-columns: 1fr; }
  .contact__fig { min-height: 0; aspect-ratio: 16 / 10; flex: none; }
  .form--card { border-radius: 22px; }
}

/* Pie: logo grande a la izquierda, columnas a la derecha */
.foot { padding-block: clamp(3rem, 6vw, 5rem) 0; }
.foot__grid { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(2rem, 5vw, 5rem); flex-wrap: wrap; }
.foot__brand { width: clamp(6.5rem, 10vw, 9rem); flex: none; }
.foot__cols { display: flex; gap: clamp(2rem, 5vw, 5.5rem); flex-wrap: wrap; }
.foot__col p { margin: 0 0 0.5rem; font-family: var(--sans); font-weight: 300; font-size: 0.92rem; }
.foot__title { font-weight: 400 !important; font-size: 0.68rem !important; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.6; margin-bottom: 1rem !important; }
.foot .link { color: var(--beige); text-decoration-color: color-mix(in oklab, var(--beige) 30%, transparent); }
.foot__cookies { opacity: 0.6; font-size: 0.8rem !important; margin-top: 0.75rem !important; }
.foot__base {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 5vw, 4rem); padding-block: 1.4rem;
  border-top: 1px solid color-mix(in oklab, var(--beige) 16%, transparent);
  font-family: var(--sans); font-weight: 300; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6;
}
@media (max-width: 700px) {
  .foot__grid { flex-direction: column; }
  .foot__brand { width: 7rem; }
  .foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; width: 100%; }
  .foot__cols .foot__col:first-child { grid-column: 1 / -1; }
}
.form--card .field--check label { font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.form--card .field__help { font-weight: 300; opacity: 0.75; }
.site-bar.is-solid {
  background: color-mix(in oklab, var(--beige) 72%, transparent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--piedra) 70%, transparent);
}

/* =================================================================
   Cristales y colores en movimiento: dos cintas infinitas en sentidos
   opuestos; se paran al pasar el ratón y la muestra se levanta.
   ================================================================= */
.finishes { gap: clamp(3rem, 6vw, 5rem); }
.finishes__row { display: grid; gap: 1.5rem; }
.finishes__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--piedra); padding-bottom: 0.8rem; }
.finishes__head .finishes__title { margin: 0; padding: 0; border: 0; }
.finishes__count { margin: 0; font-family: var(--sans); font-weight: 300; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }
.ribbon {
  display: flex; overflow: hidden; margin-inline: calc(var(--sc-gutter) * -1); padding-block: 1rem 0.5rem;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ribbon__track {
  list-style: none; margin: 0; padding: 0 0.6rem 0 0.6rem; display: flex; gap: 1.2rem; flex: none;
  animation: ribbon 46s linear infinite;
}
.ribbon--rev .ribbon__track { animation-direction: reverse; animation-duration: 58s; }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
@keyframes ribbon { to { transform: translateX(calc(-100% - 0px)); } }
.swatch {
  position: relative; flex: none; width: clamp(9.5rem, 15vw, 13rem); aspect-ratio: 7 / 9; border-radius: 20px; overflow: hidden;
  box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.08);
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), box-shadow 500ms;
}
.swatch img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms cubic-bezier(.2,.8,.2,1); }
.swatch:hover { transform: translateY(-10px) rotate(-1.5deg); box-shadow: 0 30px 50px -24px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.15); }
.swatch:hover img { transform: scale(1.08); }
/* Brillo que cruza el cristal, como un reflejo */
.swatch--glass::before {
  content: ""; position: absolute; inset: -40% -60%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.55) 48%, rgb(255 255 255 / 0.15) 52%, transparent 60%);
  transform: translateX(-60%); animation: sheen 5.5s ease-in-out infinite;
}
.swatch--glass:nth-child(2n)::before { animation-delay: 1.4s; }
.swatch--glass:nth-child(3n)::before { animation-delay: 2.6s; }
@keyframes sheen { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }
.swatch__name, .swatch__tag { position: absolute; z-index: 2; left: 0.8rem; font-family: var(--sans); text-transform: uppercase; }
.swatch__name {
  bottom: 0.8rem; right: 0.8rem; padding: 0.55em 0.9em; border-radius: 999px; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.2em;
  color: var(--carbon); background: color-mix(in oklab, var(--beige-claro) 72%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); border: 1px solid rgb(255 255 255 / 0.5);
  text-align: center;
}
.swatch__tag { top: 0.8rem; font-size: 0.58rem; letter-spacing: 0.22em; padding: 0.45em 0.8em; border-radius: 999px; color: var(--beige); background: rgb(20 20 15 / 0.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.finishes__note { text-align: center; max-width: 46rem; margin-inline: auto; }
@media (max-width: 860px) { .swatch { width: 8.5rem; border-radius: 16px; } .ribbon__track { gap: 0.9rem; } }
@media (prefers-reduced-motion: reduce) {
  .ribbon { overflow-x: auto; } .ribbon__track { animation: none; } .ribbon__track[aria-hidden] { display: none; }
  .swatch--glass::before { animation: none; display: none; }
}

/* =================================================================
   Móvil minimalista: un único margen lateral para todo, nada toca
   los bordes, menos ruido y ritmo vertical constante.
   ================================================================= */
@media (max-width: 860px) {
  :root { --sc-gutter: 1.5rem; --sc-section: 4.75rem; }
  .display--xl { font-size: 2.3rem; line-height: 1.04; }
  .display--lg { font-size: 1.9rem; line-height: 1.06; }
  .body, .lede { font-size: 1.08rem; line-height: 1.6; }
  .section__head { margin-bottom: 2.5rem; }
  .folio { display: none; }

  /* Cintas deslizables dentro del margen, recortadas con esquinas */
  #servicios .steps__list { margin-inline: 0; padding: 0 0 0.25rem; scroll-padding-inline: 0; grid-auto-columns: 84%; gap: 0.75rem; border-radius: 18px; }
  .ribbon { margin-inline: 0; border-radius: 20px; padding-block: 0.75rem 0.25rem;
    -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .swatch { width: 7.6rem; }
  .ig__track { margin-inline: var(--sc-gutter); padding: 0 0 0.25rem; scroll-padding-inline: 0; grid-auto-columns: 74%; gap: 0.75rem; border-radius: 18px; }
  .ig__head { margin-bottom: 1.75rem; }

  /* Bloques más sobrios */
  .lead { gap: 1.75rem; }
  .systems { gap: 2.75rem; }
  .system__fig { border-radius: 18px; }
  .materials { gap: 2.25rem; }
  .finishes { margin-top: 3.5rem; gap: 2.75rem; }
  .finishes__count { display: none; }
  .catalog { margin-top: 3.5rem; }
  .section--about .quote { font-size: 1.7rem; }
  .contact { gap: 2.25rem; }
  .form--card { padding: 1.5rem 1.25rem; }
  .hero__copy { left: var(--sc-gutter); right: var(--sc-gutter); }
  .site-bar { padding-inline: var(--sc-gutter); }
  .site-bar__nav { right: var(--sc-gutter); }
  .foot__base { flex-direction: column; gap: 0.4rem; }
}
.foot__base { width: auto; margin-inline: var(--sc-gutter); padding-inline: 0; }
@media (min-width: 861px) { .foot__base { max-width: calc(var(--sc-maxw) - 2 * var(--sc-gutter)); margin-inline: max(var(--sc-gutter), (100% - var(--sc-maxw)) / 2 + var(--sc-gutter)); } }

/* --- Zona de trabajo y preguntas frecuentes --- */
.section--area { background: var(--beige-claro); }
.area { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.zones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.zone { display: grid; gap: 0.4rem; padding: 1.2rem 1.3rem; border-radius: 18px; background: color-mix(in oklab, var(--beige) 70%, transparent); border: 1px solid var(--piedra); }
.zone--wide { grid-column: 1 / -1; background: var(--verde); color: var(--beige); border-color: transparent; }
.zone__name { font-family: var(--sc-font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.2rem; }
.zone__towns { font-family: var(--sans); font-weight: 300; font-size: 0.85rem; letter-spacing: 0.02em; opacity: 0.8; }
.faq { margin-top: clamp(4rem, 8vw, 6.5rem); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); }
.faq__title { margin: 0; font-family: var(--sc-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.faq__list { border-top: 1px solid var(--piedra); }
.faq__item { border-bottom: 1px solid var(--piedra); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 0;
  font-family: var(--sc-font-display); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 500;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 999px; font-family: var(--sans); font-weight: 300;
  background: var(--glass-bg); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); transition: transform 300ms var(--sc-ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin: 0 0 1.3rem; max-width: 60ch; color: var(--sc-ink-soft); }
@media (max-width: 860px) { .area, .faq { grid-template-columns: 1fr; } .zones { grid-template-columns: 1fr; } .faq { margin-top: 3.5rem; gap: 1.25rem; } }
.section--area { background: var(--beige); } .section--area .zone:not(.zone--wide) { background: var(--beige-claro); }

/* =================================================================
   Móvil v2: todo centrado, más pequeño y ordenado
   ================================================================= */
@media (max-width: 860px) {
  :root { --sc-section: 4rem; }
  .display--xl { font-size: 1.85rem; }
  .display--lg { font-size: 1.55rem; }
  .body, .lede { font-size: 0.98rem; line-height: 1.6; }
  .eyebrow { font-size: 0.66rem; }
  .btn { font-size: 0.68rem; padding: 1em 1.6em; }

  /* Portada */
  .hero__copy { text-align: center; left: var(--sc-gutter); right: var(--sc-gutter); max-width: none; }
  .hero__title { font-size: 1.9rem; }
  .hero__sub { font-size: 0.72rem; }
  .hero__skip { left: 50%; translate: -50% 0; font-size: 0.72rem; }

  /* Cabeceras y textos de sección centrados */
  .lead, .lead__aside, .steps__head, .section__head, #soluciones .section__head, .ig__head, .area__head, .contact__info > .display, .contact__info > .body,
  .faq__title, .section--about .about, .material figcaption, .catalog__text { text-align: center; }
  .lead .display, .lead__aside .lede, .section__head .body, .steps__head .body, .area__head .body { margin-inline: auto; }
  .lead__aside { border-top: 0; padding-top: 0; }
  .eyebrow { justify-content: center; }
  .stack > .eyebrow, .area__head .eyebrow { display: flex; }
  .actions, .catalog__text { justify-items: center; justify-content: center; display: flex; flex-direction: column; align-items: center; }
  .ig__head { flex-direction: column; align-items: center; gap: 1rem; }
  .ig__head .stack { display: grid; justify-items: center; }
  .finishes__head { justify-content: center; }
  .finishes__head .finishes__title { text-align: center; }
  #servicios .step { text-align: left; }

  /* Soluciones: 2×2 con la foto entera, pequeña y ordenada */
  .systems { grid-template-columns: 1fr 1fr; gap: 2rem 0.9rem; }
  .system__fig { aspect-ratio: 4 / 5; border-radius: 14px; }
  .system__fig img { object-fit: cover; }
  .system__meta { align-items: center; text-align: center; padding-top: 0.9rem; }
  .system__row { flex-direction: column-reverse; gap: 0.5rem; padding-bottom: 0.7rem; margin-bottom: 0.6rem; }
  .system__name { flex-direction: column; align-items: center; gap: 0.25rem; font-size: 0.82rem; letter-spacing: 0.16em; }
  .system__meta .diag { width: 2.8rem; }
  .system .body { font-size: 0.86rem; line-height: 1.5; }
  #soluciones .note { text-align: center; font-size: 0.95rem; }

  /* Materiales más compactos */
  .materials { grid-template-columns: 1fr 1fr; gap: 1.5rem 0.9rem; }
  .materials .material:last-child { grid-column: 1 / -1; }
  .material__fig { aspect-ratio: 4 / 5; border-radius: 14px; }
  .materials .material:last-child .material__fig { aspect-ratio: 16 / 10; }
  .material__name { font-size: 0.92rem; }
  .material .body { font-size: 0.86rem; }

  /* Catálogo, zona, preguntas y contacto */
  .catalog__title { font-size: 1.6rem; }
  .zone { text-align: center; }
  .zone__name { font-size: 1rem; }
  .faq__item summary { font-size: 1rem; text-align: left; }
  .reach__card { text-align: center; justify-items: center; }
  .form__head { text-align: center; font-size: 1.15rem; }
  .section--about .quote { font-size: 1.45rem; }

  /* Pie centrado */
  .foot__grid { align-items: center; text-align: center; }
  .foot__brand { width: 6rem; }
  .foot__cols { grid-template-columns: 1fr 1fr; justify-items: center; text-align: center; }
  .foot__base { align-items: center; text-align: center; }
}

/* --- Proyectos realizados --- */
.projects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 3rem) clamp(1rem, 2vw, 1.75rem); }
.project__link { display: grid; gap: 0.55rem; text-decoration: none; color: inherit; }
.project__fig { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: var(--beige-claro); }
.project__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--sc-ease-out); }
.project__link:hover .project__fig img { transform: scale(1.04); }
.project__tag { margin-top: 0.6rem; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sc-ink-soft); }
.project__title { font-family: var(--sc-font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); }
.project__desc { color: var(--sc-ink-soft); font-size: 1rem; line-height: 1.55; }
.project__spec { font-family: var(--sans); font-weight: 300; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 1000px) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .projects { gap: 1.75rem 0.9rem; }
  .project__link { text-align: center; justify-items: center; }
  .project__fig { border-radius: 14px; width: 100%; }
  .project__title { font-size: 0.9rem; } .project__desc { font-size: 0.86rem; } .project__spec { font-size: 0.6rem; }
}

/* --- Páginas de zona y de espacio --- */
.subpage .legal-bar { position: sticky; top: 0; z-index: 70; display: flex; justify-content: space-between; align-items: center; height: var(--bar-h); padding-inline: var(--sc-gutter); background: color-mix(in oklab, var(--beige) 82%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.subpage .legal-bar .site-bar__cta { display: inline-block; color: var(--sc-ink); }
.sub-hero { padding-top: clamp(2.5rem, 6vw, 5rem); }
.sub-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.sub-hero__fig { margin: 0; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; }
.sub-hero__fig img { width: 100%; height: 100%; object-fit: cover; }
.sub-hero__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.crumbs { font-family: var(--sans); font-weight: 300; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.crumbs a { color: inherit; }
.sub-more { margin-top: clamp(4rem, 8vw, 6rem); display: grid; gap: 1.25rem; }
.zone--link { text-decoration: none; color: inherit; transition: transform 200ms var(--sc-ease-out), background-color 200ms; }
.zone--link:hover { transform: translateY(-2px); }
.zones li { list-style: none; }
@media (max-width: 860px) {
  .sub-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .sub-hero__grid .body { margin-inline: auto; }
  .sub-hero__actions { justify-content: center; }
  .sub-hero__fig { aspect-ratio: 4 / 3; border-radius: 16px; }
  .crumbs { text-align: center; }
}