/* Ventanas Ideal · gramática "Monografía": láminas con corte duro papel/tinta, índice en el margen.
   Solo marcado propio: .sc-stage y [data-sc-*] son el mecanismo del motor y no se reestilan. */

:root {
  --papel: #F1F0EB;
  --hoja: #FAF9F5;
  --tinta: #121517;
  --sc-canvas: var(--papel);
  --sc-surface: #E7E5DE;
  --sc-ink: #16191C;
  --sc-ink-soft: #545B61;
  --sc-accent: #1C7595;
  --sc-accent-ink: #F4F7F6;
  --sc-font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sc-font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sc-shadow-color: 40 10% 20%;
  --hilo: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --margen: 0px;
  --gut: clamp(1rem, 4vw, 2.5rem);
  --folio: 62px;
  --r: 4px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (min-width: 1100px) {
  :root { --margen: clamp(220px, 15.5vw, 252px); --folio: 0px; }
}

html { scroll-padding-top: calc(var(--folio) + env(safe-area-inset-top, 0px)); }
body { background: var(--papel); }
::selection { background: color-mix(in oklab, var(--sc-accent) 24%, transparent); }

.saltar {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 14px; border-radius: var(--r);
  background: var(--sc-ink); color: var(--papel); transform: translateY(-160%); transition: transform .16s var(--ease);
}
.saltar:focus-visible { transform: none; }

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

/* ------------------------------------------------------------------ marca, botones */
.marca {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sc-ink);
  font-family: var(--sc-font-display); font-size: 21px; font-weight: 450; letter-spacing: -0.01em; line-height: 1;
  font-variation-settings: "opsz" 24;
}
.marca__logo { display: block; width: 168px; height: auto; max-width: 100%; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: var(--r); background: var(--sc-accent); color: var(--sc-accent-ink); white-space: nowrap;
  font: 600 14px/1 var(--sc-font-text); letter-spacing: 0; text-decoration: none; cursor: pointer; border: 0;
  transition: background-color .16s var(--ease), transform .12s var(--ease);
}
.boton svg { width: 17px; height: 17px; flex: none; }
.boton:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: color-mix(in oklab, var(--sc-accent) 86%, #000); }
}
.boton--chico { min-height: 38px; padding: 0 12px; font-size: 13px; }
.boton--grande { min-height: 52px; padding: 0 22px; font-size: 15.5px; }
.boton--grande svg { width: 19px; height: 19px; }

.enlace { color: var(--sc-ink); text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--hilo); }
.enlace:hover { text-decoration-color: currentColor; }

.pie { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; margin: 14px 0 0; max-width: 52ch; }

/* ------------------------------------------------------------------ índice del margen (escritorio) */
.indice { display: none; }
@media (min-width: 1100px) {
  .indice {
    position: fixed; inset: 0 auto 0 0; width: var(--margen); z-index: 60; display: flex; flex-direction: column;
    justify-content: space-between; padding: 30px 14px 24px 22px; background: var(--papel);
    border-right: 1px solid var(--hilo);
  }
  .indice__lista { list-style: none; margin: 0; padding: 0; }
  .indice__lista a {
    position: relative; display: block; padding: 7px 0 7px 16px; color: var(--sc-ink-soft); text-decoration: none;
    font-size: 14px; line-height: 1.3; transition: color .16s var(--ease);
  }
  .indice__lista a::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 2px; margin-top: -1px;
    background: var(--sc-accent); transform: scaleX(0); transform-origin: left; transition: transform .24s var(--ease);
  }
  .indice__lista a[aria-current="true"] { color: var(--sc-ink); font-weight: 600; }
  .indice__lista a[aria-current="true"]::before { transform: scaleX(1); }
  .indice__lista a:hover { color: var(--sc-ink); }
  .indice__pie { display: grid; gap: 12px; justify-items: start; }
  .indice__tel { font-size: 13px; color: var(--sc-ink-soft); text-decoration: none; font-variant-numeric: tabular-nums; padding-left: 2px; }
  .indice__tel:hover { color: var(--sc-ink); }
}

/* ------------------------------------------------------------------ folio (teléfono y tableta) */
.folio {
  position: fixed; inset: 0 0 auto 0; height: calc(var(--folio) + env(safe-area-inset-top, 0px)); z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: env(safe-area-inset-top, 0px) var(--gut) 0; background: var(--papel); border-bottom: 1px solid var(--hilo);
}
.folio .marca__logo { width: auto; height: 46px; }
.folio__lamina { font-size: 12.5px; color: var(--sc-ink-soft); margin-right: auto; padding-left: 12px; border-left: 1px solid var(--hilo); line-height: 1.2; }
@media (min-width: 1100px) { .folio { display: none; } }
@media (max-width: 440px) {
  .folio .marca__logo { height: 42px; }
  .folio__lamina { display: none; }
  .folio .boton--chico { margin-left: auto; padding: 0 11px; font-size: 12.5px; }
}

/* ------------------------------------------------------------------ láminas */
.lamina { position: relative; background: var(--papel); color: var(--sc-ink); }
.lamina--tinta {
  --sc-ink: #ECEDE8; --sc-ink-soft: #A3ACB1; --sc-accent: #7CC7E4; --sc-accent-ink: #0B1A21;
  --hilo: color-mix(in oklab, #ECEDE8 16%, transparent);
  background: var(--tinta); color: var(--sc-ink);
}
.lamina__cuerpo {
  margin-left: var(--margen); padding: clamp(5rem, 10vw, 9rem) var(--gut) clamp(4.5rem, 9vw, 8rem);
  max-width: calc(var(--margen) + 88rem);
}
@media (min-width: 1100px) { .lamina__cuerpo { padding-left: clamp(3rem, 5.5vw, 6rem); padding-right: clamp(2.5rem, 5vw, 6rem); } }

h2 { text-wrap: balance; }
p { text-wrap: pretty; }
.lamina h2 {
  font-family: var(--sc-font-display); font-weight: 380; letter-spacing: var(--sc-track-snug);
  line-height: var(--sc-leading-tight); margin: 0; font-variation-settings: "opsz" 60;
}
.lamina--tinta h2 { font-weight: 360; letter-spacing: -0.012em; }

/* ------------------------------------------------------------------ PORTADA */
:where(.portada__stage) { position: relative; }
.portada__stage { height: 100vh; height: 100svh; overflow: clip; background: var(--papel); }
.escena { position: absolute; inset: 0 0 0 var(--margen); overflow: hidden; background: #DCD8CF; }
.lienzo { position: absolute; left: var(--lx, 0px); top: var(--ly, 0px); width: var(--lw, 1376px); height: var(--lh, 768px); }
.plano { position: absolute; inset: 0; transform-origin: 46.18% 37.04%; }
.plano img { display: block; width: 100%; height: 100%; max-width: none; }
.plano--previa { z-index: 0; }
.plano--paisaje { z-index: 1; opacity: 0; }
.plano--sala { z-index: 3; opacity: 0; isolation: isolate; }
.plano--sillon {
  z-index: 4; opacity: 0; inset: auto; left: 66.875%; top: 48.519%; width: 33.125%; height: 48.642%;
  transform-origin: 37.107% 93.655%;
}
.plano--luz {
  z-index: 5; pointer-events: none; mix-blend-mode: soft-light; opacity: 0;
  background:
    radial-gradient(34% 30% at 44% 30%, rgb(255 250 236 / 0.5), transparent 70%),
    linear-gradient(112deg, transparent 30%, rgb(255 246 226 / 0.2) 46%, transparent 62%);
}
[data-escena].esta-lista .plano--paisaje,
[data-escena].esta-lista .plano--sala,
[data-escena].esta-lista .plano--sillon { opacity: 1; transition: opacity .5s var(--ease); }
[data-escena].esta-lista .plano--luz { opacity: 1; transition: opacity 1.2s var(--ease); }
/* el paisaje vivo (loop de 9 s) entra sobre la foto fija cuando ya está corriendo */
.plano--paisaje video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; transition: opacity .9s var(--ease); }
.plano--paisaje video.esta-viva { opacity: 1; }

/* los marcos toman el acabado: textura multiplicada sobre el perfil blanco, recortada con la máscara medida */
.marcos {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: multiply;
  background-image: var(--textura-v, none); background-size: calc(80px * var(--s, 0.5) * 1.6) calc(160px * var(--s, 0.5) * 1.6);
  -webkit-mask: url(assets/portada/marcos.webp) 0 0 / 100% 100% no-repeat;
          mask: url(assets/portada/marcos.webp) 0 0 / 100% 100% no-repeat;
  transition: opacity .35s var(--ease);
}
[data-escena][data-acabado]:not([data-acabado="blanco"]) .marcos { opacity: 1; }

/* El titular: la primera línea vive afuera (entre el paisaje y la sala); la segunda, adentro. */
.titular { margin: 0; font-family: var(--sc-font-display); font-weight: 360; letter-spacing: -0.022em; line-height: 1; color: var(--sc-ink); font-variation-settings: "opsz" 72; }
.titular__lejos, .titular__cerca { display: block; }
.portada__sub { margin: 0; color: var(--sc-ink); max-width: 36ch; line-height: 1.5; }
.rotulo__pie { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--sc-ink); }
.rotulo__pie span { font-weight: 600; }

@media (min-width: 1100px) {
  .titular__lejos {
    position: absolute; z-index: 2; left: var(--ex, 0px); top: var(--ey, 0px); pointer-events: none;
    width: calc(2880px * var(--s, 0.5)); height: calc(1620px * var(--s, 0.5)); transform-origin: 46.18% 37.04%;
  }
  /* "Todo el" en el vidrio izquierdo y "paisaje." en la hoja central: el parteluz queda entre las dos palabras */
  .titular__t1, .titular__t2 { position: absolute; top: calc(250 / 1620 * 100%); font-size: calc(108px * var(--s, 0.5)); white-space: nowrap; }
  .titular__t1 { left: calc(735 / 2880 * 100%); }
  .titular__t2 { left: calc(1263 / 2880 * 100%); }
  .titular__cerca {
    position: absolute; z-index: 7; left: calc(var(--ex, 0px) + 735px * var(--s, 0.5)); top: calc(var(--ey, 0px) + 368px * var(--s, 0.5));
    font-size: calc(108px * var(--s, 0.5)); white-space: nowrap;
    /* filo de papel: la línea de adentro pasa por delante del marco y se sigue leyendo con acabados oscuros */
    paint-order: stroke fill; -webkit-text-stroke: 0.075em rgb(241 240 235 / 0.94);
  }
  .portada__sub {
    position: absolute; z-index: 7; left: calc(var(--ex, 0px) + 741px * var(--s, 0.5)); top: calc(var(--ey, 0px) + 514px * var(--s, 0.5));
    font-size: clamp(15px, calc(27px * var(--s, 0.5)), 19px); font-weight: 450;
    text-shadow: 0 0 2px rgb(241 240 235 / 0.95), 0 0 5px rgb(241 240 235 / 0.8), 0 0 10px rgb(241 240 235 / 0.45);
  }
  .rotulo {
    position: absolute; z-index: 7; left: calc(var(--margen) + 28px); bottom: 28px; width: 292px;
    padding: 14px 16px 15px; background: rgb(241 240 235 / 0.93); border-radius: var(--r); box-shadow: var(--sc-e2);
  }
}

/* Teléfono y tableta: titular arriba, escena abajo, sin tipografía entre planos */
@media (max-width: 1099px) {
  .portada__stage {
    display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; row-gap: 14px;
    padding: calc(var(--folio) + env(safe-area-inset-top, 0px) + 22px) var(--gut) 18px;
  }
  .titular { grid-row: 1; font-size: clamp(2.3rem, 1.4rem + 4.6vw, 3.6rem); line-height: 1.02; }
  .titular__lejos { color: var(--sc-ink); }
  .portada__sub { grid-row: 2; font-size: 16px; color: var(--sc-ink-soft); }
  .escena { grid-row: 3; position: relative; inset: auto; min-height: 240px; border-radius: 2px; }
  .plano--sillon { display: none; }
  .marcos { -webkit-mask-image: url(assets/portada/marcos-m.webp); mask-image: url(assets/portada/marcos-m.webp); }
  .rotulo { grid-row: 4; display: grid; grid-template-columns: 1fr; }
  .rotulo__pie { margin-bottom: 8px; font-size: 13px; }
}

/* ------------------------------------------------------------------ muestras de acabado (compartidas) */
.muestras { border: 0; margin: 0; padding: 0; min-width: 0; }
.muestras legend { padding: 0; margin-bottom: 8px; font-size: 13px; color: var(--sc-ink-soft); }
.muestras legend b { color: var(--sc-ink); font-weight: 600; }
.muestras__fila { display: flex; flex-wrap: wrap; gap: 6px; }
.muestra { position: relative; }
.muestra input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.muestra span {
  display: block; width: 30px; height: 30px; border-radius: 3px; cursor: pointer; background-size: 60px 30px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14); transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.muestra--blanco span { background: #F6F6F2; }
.muestra input:checked + span { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14), 0 0 0 2px var(--papel), 0 0 0 3.5px var(--sc-ink); }
.muestra input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .muestra span:hover { transform: translateY(-1px); } }
.muestras--todas .muestra span { width: 36px; height: 36px; background-size: 72px 36px; }
.muestras__nota { margin: 12px 0 0; font-size: 12.5px; color: var(--sc-ink-soft); }

/* ------------------------------------------------------------------ VENTAJAS */
.ventajas .lamina__cuerpo { padding-top: clamp(4rem, 8vw, 7rem); }
.ventajas__titulo { font-size: var(--sc-t-3xl); max-width: 14ch; }
.ventajas__lista { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; border-top: 1px solid var(--hilo); }
.ventajas__lista li {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: baseline; padding: clamp(1.1rem, 2.2vw, 1.7rem) 0; border-bottom: 1px solid var(--hilo);
}
.ventajas__lista p { margin: 0; }
.ventajas__frase { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 340; line-height: 1.2; font-variation-settings: "opsz" 36; }
.ventajas__dato { color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.5; }
.ventajas__dato strong { color: var(--sc-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.ventajas__nota { margin: 1.5rem 0 0; font-size: 13px; color: var(--sc-ink-soft); max-width: 60ch; }
@media (max-width: 700px) {
  .ventajas__lista li { grid-template-columns: 1fr; row-gap: 6px; }
}

/* ------------------------------------------------------------------ EL PERFIL */
.perfil__rejilla {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr);
  grid-template-areas: "texto objeto" "ficha objeto"; column-gap: clamp(2rem, 5vw, 5.5rem); row-gap: 2.5rem; align-items: start;
}
.perfil__texto { grid-area: texto; max-width: 30rem; }
.perfil__titulo { font-size: var(--sc-t-3xl); }
.perfil__texto p { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.55; margin: 0; }
.perfil__objeto { grid-area: objeto; margin: 0; align-self: center; }
.perfil__lamina { max-width: 900px; }
.perfil__dibujo { display: block; width: auto; height: min(80vh, 880px); max-width: 100%; overflow: visible; margin-inline: auto; }
@media (max-width: 899px) { .perfil__dibujo { width: 100%; height: auto; } }
.guias path { fill: none; stroke: var(--sc-ink); stroke-width: 3.4; }
.guias circle { fill: var(--sc-accent); }
.guias .cota { stroke: var(--sc-accent); stroke-width: 4.2; }
.rotulos text { font-family: var(--sc-font-text); font-size: 58px; fill: var(--sc-ink); letter-spacing: 0.005em; }
.rotulos .rotulo-cota { font-weight: 600; fill: var(--sc-accent); }
.ficha-tecnica { grid-area: ficha; margin: 0; border-top: 1px solid var(--hilo); max-width: 30rem; }
.ficha-tecnica > div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 11px 0; border-bottom: 1px solid var(--hilo); font-size: 14.5px; }
.ficha-tecnica dt { color: var(--sc-ink-soft); }
.ficha-tecnica dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ficha-tecnica > div:last-child dd { font-weight: 500; max-width: 17rem; }
@media (max-width: 899px) {
  .perfil__rejilla { grid-template-columns: 1fr; grid-template-areas: "texto" "objeto" "ficha"; }
}

/* ------------------------------------------------------------------ LA PLANTA (pico) */
:where(.planta__stage) { position: relative; }
.planta__stage { height: 100vh; height: 100svh; background: var(--tinta); }
.planta__pelicula { position: absolute; inset: 0 0 0 var(--margen); overflow: hidden; background: #0C0E10; }
.cotas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.cotas__trazo > * {
  fill: none; stroke: var(--sc-accent); stroke-width: var(--trazo, 2.4); stroke-linecap: round;
  stroke-dasharray: 1 1; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.6));
}
.cotas__trazo .c1 { stroke-dasharray: 0.014 0.012; stroke-width: calc(var(--trazo, 2.4) * 0.66); opacity: clamp(0, var(--cota, 0) * 4, 0.9); }
.cotas__trazo .c2 { stroke-dashoffset: calc(1 - clamp(0, (var(--cota, 0) - 0.05) * 2.6, 1)); }
.cotas__trazo .c3 { stroke-dashoffset: calc(1 - clamp(0, (var(--cota, 0) - 0.34) * 2.6, 1)); }
.cotas__texto text {
  font-family: var(--sc-font-text); font-size: 25px; fill: #F3F4F0; paint-order: stroke; stroke: rgb(8 10 12 / 0.62);
  stroke-width: 5px; stroke-linejoin: round; letter-spacing: 0.01em; opacity: clamp(0, (var(--cota, 0) - 0.62) * 4, 1);
}
.cotas__texto .t-a { font-size: 32px; font-weight: 600; fill: #F3F4F0; opacity: clamp(0, (var(--cota, 0) - 0.5) * 4, 1); }
.cotas--movil .solo-escritorio, .cotas:not(.cotas--movil) .solo-movil { display: none; }
.cotas--movil .cotas__texto text { font-size: 27px; }
.cotas--movil .cotas__texto .t-a { font-size: 33px; }
.planta__velo {
  z-index: 3; left: var(--margen);
  background: linear-gradient(to top, rgb(9 11 13 / 0.9), rgb(9 11 13 / 0.78) 20%, rgb(9 11 13 / 0.42) 34%, transparent 50%);
}
.planta__copy, .planta__pie {
  position: absolute; z-index: 4; left: calc(var(--margen) + clamp(1.25rem, 4vw, 4rem)); right: var(--gut);
  bottom: clamp(1.5rem, 5vh, 3.5rem); max-width: 40rem;
}
.planta__titulo { font-size: var(--sc-t-2xl); margin-bottom: 12px !important; }
.planta__copy p, .planta__pie p { margin: 0; color: var(--sc-ink); font-size: var(--sc-t-base); line-height: 1.55; max-width: 46ch; }
.planta__pie p + p { margin-top: 8px; color: var(--sc-ink-soft); }
.planta__pie b { font-weight: 600; }

/* ------------------------------------------------------------------ TU VENTANA */
.tuventana__rejilla {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.5fr);
  grid-template-areas: "intro plano" "aperturas plano" "muestras plano"; column-gap: clamp(2rem, 5vw, 5.5rem); row-gap: 2rem; align-items: start;
}
.tuventana__intro { grid-area: intro; }
.tuventana__titulo { font-size: var(--sc-t-3xl); }
.tuventana__intro p { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); margin: 0; max-width: 34ch; }
.aperturas { grid-area: aperturas; border: 0; margin: 0; padding: 0; min-width: 0; }
.aperturas legend, .muestras--todas legend { font-size: 13px; color: var(--sc-ink-soft); margin-bottom: 10px; padding: 0; }
.aperturas__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.apertura { position: relative; }
.apertura input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.apertura label {
  display: grid; gap: 6px; padding: 10px 10px 11px; border: 1px solid var(--hilo); border-radius: var(--r); cursor: pointer;
  background: color-mix(in oklab, var(--hoja) 60%, transparent); transition: border-color .16s var(--ease), background-color .16s var(--ease);
  font-size: 13.5px; line-height: 1.25;
}
.apertura svg { display: block; width: auto; height: 58px; max-width: 100%; margin: 2px auto 0; }
.apertura input:checked + label { border-color: var(--sc-ink); background: var(--hoja); font-weight: 600; }
.apertura input:focus-visible + label { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .apertura label:hover { border-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); } }
.tuventana__plano { grid-area: plano; margin: 0; position: sticky; top: calc(var(--folio) + 4vh); }
.tuventana__lamina { position: relative; background: #CFCDCA; border: 1px solid var(--hilo); border-radius: var(--r); overflow: hidden; aspect-ratio: 1400 / 1045; }
/* vista realista: render del sistema + acabado multiplicado sobre el perfil, recortado con su máscara */
.vista { --on: 0; --dip: 1; }
.vista[data-acabado]:not([data-acabado="blanco"]) { --on: 1; }
.vista.esta-cambiando { --dip: 0.3; }
.vista__foto { display: block; width: 100%; height: 100%; object-fit: cover; opacity: var(--dip); transition: opacity .16s var(--ease); }
.vista__acabado {
  position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--on) * var(--dip)); mix-blend-mode: multiply;
  background-image: var(--textura-ap, none); background-size: 44px 88px;
  -webkit-mask: var(--mascara-ap) 0 0 / 100% 100% no-repeat;
          mask: var(--mascara-ap) 0 0 / 100% 100% no-repeat;
  transition: opacity .2s var(--ease);
}
.esquina { position: absolute; right: 1.6%; bottom: 2%; width: clamp(54px, 10%, 104px); filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.18)); }
.esquina img { display: block; width: 100%; height: auto; }
.esquina__acabado { position: absolute; inset: 0; }
.esquina__acabado[hidden] { display: none; }
.muestras--todas { grid-area: muestras; }
@media (max-width: 899px) {
  .tuventana__rejilla { grid-template-columns: 1fr; grid-template-areas: "intro" "plano" "aperturas" "muestras"; }
  .tuventana__plano { position: relative; top: auto; }
}
@media (max-width: 520px) { .aperturas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ LA FICHA (cierre) */
.ficha { border-top: 1px solid var(--hilo); }
.ficha__rejilla {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  grid-template-areas: "intro hoja" "contacto hoja" "gremio gremio"; column-gap: clamp(2rem, 5vw, 5.5rem); row-gap: 2rem; align-items: start;
}
.ficha__intro { grid-area: intro; }
.ficha__titulo { font-size: var(--sc-t-3xl); }
.ficha__intro p { color: var(--sc-ink-soft); margin: 0; max-width: 38ch; }
.hoja { grid-area: hoja; background: var(--hoja); border: 1px solid var(--hilo); border-radius: var(--r); box-shadow: var(--sc-e2); }
.hoja__encabezado {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--hilo);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.hoja__encabezado span:first-child { color: var(--sc-ink); font-weight: 600; }
.hoja__campos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.campo { grid-column: span 3; display: grid; gap: 4px; padding: 12px 20px 13px; border-bottom: 1px solid var(--hilo); border-right: 1px solid var(--hilo); }
.campo--corto { grid-column: span 2; }
.campo--ancho { grid-column: span 6; border-right: 0; }
.hoja__campos > .campo:nth-child(2), .hoja__campos > .campo:nth-child(5), .hoja__campos > .campo:nth-child(7) { border-right: 0; }
.campo > span { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sc-ink-soft); }
.campo input, .campo select, .campo textarea {
  width: 100%; border: 0; padding: 4px 0; background: transparent; color: var(--sc-ink); font-size: 16px; line-height: 1.35;
  border-radius: 0; outline: none; resize: vertical; font-variant-numeric: tabular-nums;
}
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sc-ink-soft) 50%), linear-gradient(135deg, var(--sc-ink-soft) 50%, transparent 50%); background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 22px; cursor: pointer; }
.campo:focus-within { background: color-mix(in oklab, var(--sc-accent) 6%, transparent); }
.campo:focus-within > span { color: var(--sc-accent); }
.campo input::placeholder, .campo textarea::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.hoja__acciones { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px; }
.ficha__contacto { grid-area: contacto; display: grid; gap: 0; border-top: 1px solid var(--hilo); max-width: 26rem; }
.ficha__contacto p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--hilo); font-size: 14.5px; }
.ficha__contacto span { color: var(--sc-ink-soft); }
.ficha__contacto a { color: var(--sc-ink); text-decoration: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.ficha__contacto a:hover { color: var(--sc-accent); }
.ficha__gremio { grid-area: gremio; margin: 1rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--hilo); color: var(--sc-ink-soft); max-width: 70ch; }
.ficha__gremio a { color: var(--sc-ink); font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.colofon {
  margin-left: var(--margen); padding: 2rem var(--gut) 2.5rem; border-top: 1px solid var(--hilo); display: grid; gap: 6px;
  font-size: 13px; color: var(--sc-ink-soft);
}
@media (min-width: 1100px) { .colofon { padding-left: clamp(3rem, 5.5vw, 6rem); } }
.colofon p { margin: 0; max-width: 80ch; }
.marca--colofon { margin-bottom: 10px !important; }
.marca--colofon .marca__logo { width: 150px; }
@media (max-width: 899px) {
  .ficha__rejilla { grid-template-columns: 1fr; grid-template-areas: "intro" "hoja" "contacto" "gremio"; }
}
@media (max-width: 560px) {
  .campo, .campo--corto { grid-column: span 6; border-right: 0; }
  .hoja__campos > .campo--corto { grid-column: span 2; border-right: 1px solid var(--hilo); }
  .hoja__campos > .campo--corto:nth-child(5) { border-right: 0; }
  .campo { padding-inline: 16px; }
}

/* ------------------------------------------------------------------ movimiento reducido */
.es-quieta [data-sc-cue] { opacity: 1 !important; transform: none !important; }
.es-quieta.planta .planta__copy { bottom: auto; top: clamp(1.5rem, 6vh, 3.5rem); }
.es-quieta.planta .planta__velo { background: linear-gradient(to bottom, rgb(9 11 13 / 0.9), rgb(9 11 13 / 0.72) 18%, transparent 38%), linear-gradient(to top, rgb(9 11 13 / 0.9), rgb(9 11 13 / 0.7) 18%, transparent 40%); }
.es-quieta .cotas { --cota: 1; }