/* ==========================================================================
   ARENZA · Nuestro método / Our Approach (clave mtn) — /metodo/, /en/approach/
   (05-11, documento de Iker §2.D) Cinco partes, en este orden: por qué somos diferentes (héroe navy con el tachado
   del revisor), criterios de selección (la sección del edificio + la ficha tipo resumida), proceso (6 pasos),
   experiencia (ejecutado frente a proyectado) y análisis (la ficha tipo completa, ilustrativa). /nosotros/ y
   /en/about/ son ya redirecciones a la portada (#about) y no cargan esta hoja.
   Anti-glitch: aquí solo se animan transform, scale, opacity y clip-path, cada propiedad con un único motor (CSS;
   GSAP no toca nada de este archivo). Los estados ocultos existen solo con html.js + movimiento permitido, y se
   apagan con .mtn-off si mtn.js no llega. Lo del héroe entra por CSS (keyframes), sin esperar al JS.
   ========================================================================== */

/* ---------- comunes ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* .enter-lines del núcleo parte de translateY(108%): con interlineado corto la tinta de Cormorant (astas, puntos
     de las íes) asomaba por el relleno inferior de la máscara antes de subir. Aquí la línea sale de más abajo. */
  .mtn .enter-lines > span > span { animation-name: mtn-rise; }
}
@keyframes mtn-rise { from { transform: translateY(calc(100% + .34em)); } }
/* máscaras de línea en rejilla: sus márgenes negativos no se colapsan (mismo interlineado dentro y entre líneas) */
.mtn .enter-lines { display: grid; }
/* luz de ventana del cierre: quieta en táctil (norma 4: nada ligado al scroll en iOS) */
@media (hover: none), (pointer: coarse) { .mtn .gobo { --gy: 0% !important; } }

.mtn .section { padding-block: calc(var(--section) * .85); }
@media (max-width: 899px) { .mtn .crumbs { display: none; } }

.mtn-head { row-gap: 22px; margin-bottom: clamp(36px, 4.5vw, 72px); align-items: end; }
.mtn-head .h-1 { text-wrap: balance; }
.mtn-head__p { max-width: 40ch; }

/* fotos de sección: a sangre en móvil; desde 900 px, --r sangra hasta el borde derecho de la pantalla
   (--bleed = margen + lo que sobra a los lados de .wrap por encima de 1520 px). Revelado: data-reveal="clip". */
.mtn { --bleed: calc(var(--margin) + max(0px, (100vw - var(--maxw)) / 2)); }
.mtn-pic { margin: 0; display: grid; gap: 12px; align-content: start; justify-self: stretch; }
.mtn-pic__media { position: relative; width: 100%; aspect-ratio: var(--ar, 4 / 5); overflow: hidden; background: var(--sand); }
.mtn-pic__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
@media (max-width: 899px) { .mtn-pic__media { width: auto; margin-inline: calc(-1 * var(--margin)); } }
@media (min-width: 600px) and (max-width: 899px) { .mtn-pic__media { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) {
  .mtn-pic__media { max-height: 82svh; }
  .mtn-pic--r { margin-right: calc(-1 * var(--bleed)); }
}
/* SplitText: en rejilla, el alto queda idéntico antes y después de partir (las máscaras no colapsan márgenes) */
.mtn :is([data-split], [data-reveal="lines"]).is-split { display: grid; }
.mtn-exp__side > h2 { justify-self: stretch; }
/* .link-arrow del núcleo: su subrayado es un fondo con transition de background-size y, al pasar, una animation
   sobre la misma propiedad (norma 13). Aquí el filete es un ::after que se recoge y se redibuja solo con transform. */
.mtn .link-arrow > span { position: relative; background: none; transition: none; }
.mtn .link-arrow > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: 0 50%; }
@media (hover: hover) {
  .mtn .link-arrow:hover > span { animation: none; }
  .mtn .link-arrow:hover > span::after { animation: mtn-redraw .8s var(--ease-out); }
}
@keyframes mtn-redraw {
  0% { transform: scaleX(1); transform-origin: 100% 50%; }
  45% { transform: scaleX(0); transform-origin: 100% 50%; }
  46% { transform: scaleX(0); transform-origin: 0 50%; }
  100% { transform: scaleX(1); transform-origin: 0 50%; }
}
/* número de fila (versalitas doradas tabulares) */
.mtn-why__n, .mtn-crit__n, .mtn-ph__n, .mtn-card__n { font: 500 var(--fs-micro)/1 var(--sans); letter-spacing: .16em; font-variant-numeric: lining-nums tabular-nums; }

/* ---------- 01 · por qué somos diferentes (héroe navy) ------------------------
   El texto del Framer tal cual. El tachado (filete dorado) se dibuja una vez sobre «una agencia» y «un portal
   inmobiliario», y esas palabras se apagan a media tinta: lo que no somos. Cabecera crema encima (data-header=dark). */
.mtn-why { position: relative; padding-top: calc(var(--hdr-h) + clamp(20px, 4.6vw, 72px)); padding-bottom: calc(var(--section) * .8); }
.mtn-why__grid { row-gap: 18px; align-items: start; }
.mtn-why .crumbs ol, .mtn-why .crumbs [aria-current] { color: var(--cream-72); }
.mtn-why .crumbs a { color: var(--paper); }
.mtn-why__mark { margin-top: 4px; }
.mtn-why__t { font: 300 clamp(2.375rem, 5.4vw, 6rem)/.98 var(--serif); letter-spacing: -.018em; margin-top: 4px; }
.mtn-why__t > span > span { text-wrap: balance; }
.mtn-why__t em { color: var(--gold-light); }
.mtn-strike { position: relative; display: inline-block; }
.mtn-strike > span { display: inline-block; opacity: .46; }
.mtn-strike::after { content: ""; position: absolute; left: -.05em; right: -.05em; top: .56em; height: max(2px, .03em); background: var(--gold-light); transform-origin: 0 50%; }
.mtn-strike--join::after { right: -.3em; }   /* «un portal ‿ inmobiliario»: el filete cruza el espacio hasta la palabra siguiente */
@media (prefers-reduced-motion: no-preference) {
  .mtn-strike::after { animation: mtn-strike var(--sl, .8s) var(--ease-inout) var(--sd, 1.2s) both; }
  .mtn-strike > span { animation: mtn-dim .9s ease calc(var(--sd, 1.2s) + .45s) both; }
  .vt-in .mtn-strike::after { animation-delay: calc(var(--sd, 1.2s) + var(--vt-shift)); }
  .vt-in .mtn-strike > span { animation-delay: calc(var(--sd, 1.2s) + .45s + var(--vt-shift)); }
}
.mtn-strike--join::after { animation-timing-function: cubic-bezier(.55, 0, .9, .5); }
.mtn-strike--join + .mtn-strike::after { animation-timing-function: cubic-bezier(.1, .5, .3, 1); }
@keyframes mtn-strike { from { transform: scaleX(0); } }
@keyframes mtn-dim { from { opacity: 1; } }

.mtn-why__body { display: grid; gap: clamp(28px, 3.2vw, 48px); align-content: start; margin-top: clamp(20px, 3vw, 44px); }
.mtn-why__lead { color: var(--cream-72); max-width: 40ch; }
.mtn-why__list { border-top: 1px solid var(--line-night); }
.mtn-why__i { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 10px; padding-block: clamp(16px, 1.7vw, 24px); border-bottom: 1px solid var(--line-night); }
.mtn-why__n { color: var(--gold-light); padding-top: .62em; }
.mtn-why__p { font: 300 var(--fs-3)/1.18 var(--serif); letter-spacing: -.005em; color: var(--cream-72); text-wrap: pretty; }
.mtn-why__p strong { font-weight: inherit; color: var(--paper); }
.mtn-why__ph { margin: 0; display: grid; gap: 12px; align-content: start; }
.mtn-why__media { position: relative; width: 100%; aspect-ratio: 1500 / 1550; overflow: hidden; background: var(--ink-2); }
.mtn-why__media img { width: 100%; height: 100%; object-fit: cover; }
.mtn-why .caption { color: var(--cream-50); }
.mtn-why .caption b { color: var(--gold-light); }
@media (max-width: 899px) {
  .mtn-why__body { display: contents; }          /* móvil: titular, entradilla, foto y los cinco puntos */
  .mtn-why__body > * { grid-column: 1 / -1; }
  .mtn-why__lead { margin-top: 6px; }
  .mtn-why__ph { order: 1; margin-top: 18px; }
  .mtn-why__list { order: 2; margin-top: 26px; }
  .mtn-why__media { width: auto; margin-inline: calc(-1 * var(--margin)); }
}
@media (min-width: 600px) and (max-width: 899px) { .mtn-why__media { aspect-ratio: 3 / 2; } }
@media (min-width: 900px) {
  .mtn-why__ph { margin-top: clamp(20px, 3vw, 44px); margin-right: calc(-1 * var(--bleed)); }
  .mtn-why__ph .caption { padding-right: var(--bleed); }
  .mtn-why__media { aspect-ratio: 4 / 5; max-height: 80svh; }   /* más alta que la natural (casi cuadrada): equilibra la columna de los cinco puntos */
  .mtn-why__body { padding-right: var(--gutter); }
  .mtn-why__i { grid-template-columns: 3.5rem minmax(0, 1fr); }
}

/* ---------- 02 · criterios: los tres del Framer + la sección del edificio con la ficha tipo resumida -------- */
.mtn-crit__body { row-gap: 40px; align-items: center; }
.mtn-crit__list { border-top: 1px solid var(--ink); }
.mtn-crit__i { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 10px; row-gap: 10px; padding-block: 22px 28px; border-bottom: 1px solid var(--line); }
.mtn-crit__n { grid-row: 1 / 3; color: var(--gold-ink); padding-top: .9em; }
.mtn-crit__t { font: 300 var(--fs-2)/1.02 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.mtn-crit__p { grid-column: 2; max-width: 42ch; }
.mtn-crit__fig { position: relative; display: grid; }
.mtn-crit__dib { width: 100%; }

/* la ficha tipo, en resumen (la completa está en «Nuestro análisis») */
.mtn-card { position: relative; z-index: 1; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px clamp(16px, 1.6vw, 24px) 10px; }
.mtn-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--ink); }
.mtn-card__top .wordmark { font-size: 11px; }
.mtn-card__top .micro { color: var(--mute); }
.mtn-card__tag.micro { justify-self: start; display: inline-block; margin: 12px 0 4px; font: italic 400 1.0625rem/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--gold-ink); }
.mtn-card__l li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; padding-block: 11px; border-bottom: 1px solid var(--line); font: 400 1.1875rem/1.2 var(--serif); }
.mtn-card__l small { display: block; margin-top: 5px; font: 400 12px/1.4 var(--sans); letter-spacing: .01em; color: var(--mute); }
.mtn-card__n { color: var(--gold-ink); }
.mtn-card__end { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px 4px; }
.mtn-card__end .micro { color: var(--mute); }
.mtn-card__more { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 500 var(--fs-micro)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.mtn-card__more .arw { width: 18px; rotate: 90deg; }
/* colocación: en móvil, bajo el dibujo y montada sobre su base; en escritorio, sobre la esquina inferior derecha */
@media (max-width: 899px) {
  .mtn-crit__dib { max-width: min(100%, 440px); }
  .mtn-card { width: min(88%, 22rem); justify-self: end; margin-top: -26%; }
}
@media (min-width: 900px) {
  .mtn-crit__list { grid-row: 1; }
  .mtn-crit__fig { grid-row: 1; padding-right: var(--gutter); }
  .mtn-crit__dib { width: min(86%, 78svh * .8); }
  .mtn-crit__i { grid-template-columns: 3.5rem minmax(0, 1fr); padding-block: clamp(22px, 2.2vw, 32px) clamp(28px, 2.8vw, 40px); }
  .mtn-card { position: absolute; right: var(--gutter); bottom: 4%; width: min(60%, 22rem); }
}

/* ---------- 03 · el proceso como índice ----------------------------------- */
.mtn-pr__body { row-gap: 36px; align-items: start; }
.mtn-pr__fig { --op: 50% 62%; }
@media (max-width: 899px) { .mtn-pr__fig { order: -1; } }
@media (min-width: 900px) { .mtn-pr__fig { position: sticky; top: calc(var(--hdr-h) + 32px); } }
.mtn-pr__list { border-top: 1px solid var(--ink); }
.mtn-ph { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 10px; row-gap: 8px; padding-block: 20px 22px; border-bottom: 1px solid var(--line); }
.mtn-ph__n { grid-row: 1 / 4; color: var(--mute-2); padding-top: .7em; }
.mtn-ph.is-key .mtn-ph__n { color: var(--gold-ink); }
.mtn-ph__t { font: 400 var(--fs-3)/1.15 var(--serif); }
.mtn-ph__p { grid-column: 2; font-size: 15px; line-height: 1.55; color: var(--mute); max-width: 46ch; }
.mtn-ph__note { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: -10px; font: 500 var(--fs-micro)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.mtn-ph__note i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
@media (min-width: 900px) { .mtn-ph { grid-template-columns: 3.5rem minmax(0, 1fr); padding-block: 24px 26px; } }
@media (min-width: 1360px) {
  .mtn-ph { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 15rem); column-gap: 0; align-items: baseline; }
  .mtn-ph__n { grid-row: auto; padding-top: 0; }
  .mtn-ph__t { display: flex; align-items: baseline; }
  /* guía de puntos de índice de libro (estática) */
  .mtn-ph__t::after { content: ""; flex: 1 1 32px; min-width: 32px; height: 2px; margin: 0 22px 0 18px; background: radial-gradient(circle, var(--gold) .8px, transparent 1.2px) 0 50% / 7px 2px repeat-x; opacity: .9; }
  .mtn-ph__p { grid-column: 3; grid-row: 1 / span 2; }
  .mtn-ph__note { grid-column: 2; grid-row: 2; }
}

/* ---------- 04 · experiencia: ejecutado frente a proyectado ---------------------------------------------
   Convención de plano: lo ejecutado se traza con línea continua y lo proyectado con línea discontinua (etiquetas
   y filetes de grupo). El proyecto ejecutado va en grande; las dos estrategias proyectadas, en pareja (4:5, mismos
   recortes de siempre: Almagro hacia la escalera y el comedor, Recoletos 1 hacia el balcón; fuera los televisores). */
.mtn-grp { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 2vw, 28px); color: var(--ink); }
.mtn-grp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--gold); flex: none; }
.mtn-grp::after { content: ""; flex: 1; border-top: 1px dashed var(--line-gold); }
.mtn-grp--done::before { background: var(--gold); }
.mtn-grp--done::after { border-top-style: solid; }
.mtn-lam { row-gap: 22px; }
.mtn-lam__media { position: relative; margin: 0; aspect-ratio: var(--ar, 3 / 2); overflow: hidden; background: var(--sand); }
.mtn-lam__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
.mtn-lam--2 .mtn-lam__media { --ar: 4 / 5; --op: 0% 50%; }
.mtn-lam--3 .mtn-lam__media { --ar: 4 / 5; --op: 100% 50%; }
.mtn-lam__card { display: grid; gap: 14px; justify-items: start; align-content: end; }
.mtn-lam__card .text-2 { max-width: 44ch; }
.mtn-lam__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mtn-st { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 5px; border: 1px dashed var(--gold); color: var(--ink); }
.mtn-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--gold); }
.mtn-st--done { border-style: solid; border-color: var(--ink); }
.mtn-st--done::before { background: var(--gold); box-shadow: none; }
.mtn-lam__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px var(--gutter); width: 100%; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.mtn-lam__dl dt { font: 500 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.mtn-lam__dl dd { font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.mtn-lam-pair { row-gap: clamp(48px, 6vw, 96px); align-items: start; }
.mtn-lam-pair .mtn-lam { display: grid; row-gap: 22px; align-content: start; }
.mtn-lam--1 + .wrap { margin-top: clamp(56px, 7vw, 112px); }
@media (max-width: 899px) { .mtn-lam__media { margin-inline: calc(-1 * var(--margin)); } }
@media (min-width: 600px) and (max-width: 899px) { .mtn-lam-pair .mtn-lam__media { width: 75%; margin-inline: 0; } .mtn-lam--2 .mtn-lam__media { margin-left: calc(-1 * var(--margin)); } .mtn-lam--3 .mtn-lam__media { margin-left: auto; margin-right: calc(-1 * var(--margin)); } }
@media (min-width: 900px) {
  .mtn-lam--1 { align-items: end; }
  .mtn-lam--1 .mtn-lam__media { width: calc(100% + var(--bleed)); max-height: 82svh; margin-left: calc(-1 * var(--bleed)); }
  .mtn-lam--1 .mtn-lam__card { padding-bottom: 4px; padding-left: var(--gutter); }
  /* pareja: cinco columnas cada una, pegadas a los márgenes; la proporción 4:5 manda (sin tope de alto que la deforme) */
  .mtn-lam-pair > .mtn-lam--2 { grid-column: 1 / 6; }
  .mtn-lam-pair > .mtn-lam--3 { grid-column: 8 / 13; }
}

/* ---------- 05 · nuestro análisis: la ficha tipo completa (momento firma), ilustrativa ---------------------- */
.mtn-exp__grid { row-gap: 48px; align-items: start; }
.mtn-exp__side { display: grid; gap: 20px; justify-items: start; align-content: start; }
.mtn-exp__side .text-2 { max-width: 40ch; }
.mtn-exp__note { display: grid; gap: 8px; max-width: 40ch; padding: 16px 18px 17px; border: 1px solid var(--line-gold); background: var(--paper); }
.mtn-exp__note b { font-weight: 500; color: var(--gold-ink); }
.mtn-exp__note span { font-size: var(--fs-sm); line-height: 1.5; color: var(--mute); }
.mtn-exp__more { width: 100%; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .mtn-exp__grid > .mtn-exp__side { grid-column: 1 / 6; position: sticky; top: calc(var(--hdr-h) + 40px); }
  .mtn-exp__grid > .mtn-doss { grid-column: 7 / 13; }
}

/* pila de expedientes: dos descartados detrás, asomando por arriba; el aprobado delante */
.mtn-doss { position: relative; padding-top: 104px; }
.mtn-sheet { background: var(--paper); border: 1px solid var(--line); }
.mtn-sheet--b {
  position: absolute; top: var(--t); left: var(--x); right: var(--x); height: 200px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 15px clamp(16px, 2.4vw, 32px) 0;
  box-shadow: 0 24px 50px -34px rgb(16 33 54 / .35);
}
.mtn-sheet--b2 { --t: 0px; --x: 7%; }
.mtn-sheet--b1 { --t: 52px; --x: 3.5%; }
.mtn-sheet__reason { font-size: 14px; line-height: 1.6; color: var(--mute); min-width: 0; padding-top: 2px; }
@media (max-width: 599px) {
  .mtn-doss { padding-top: 132px; }
  .mtn-sheet--b { padding-top: 12px; }
  .mtn-sheet--b2 { --x: 5%; }
  .mtn-sheet--b1 { --t: 66px; --x: 2.5%; }
  .mtn-sheet__reason { font-size: 12.5px; line-height: 1.35; }
}
.mtn-sheet--a { position: relative; z-index: 1; padding: clamp(22px, 3vw, 48px) clamp(18px, 3vw, 48px) clamp(18px, 2.4vw, 32px); box-shadow: var(--shadow); }
.mtn-sheet__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.mtn-sheet__top .wordmark { font-size: 13px; }
.mtn-sheet__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-block: 20px 18px; }
.mtn-sheet__tag.micro { font: italic 400 1.0625rem/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--gold-ink); }
.mtn-sheet__meta { display: grid; border-top: 1px solid var(--line); }
.mtn-sheet__meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 11px; border-bottom: 1px solid var(--line); }
.mtn-sheet__meta dt, .mtn-fr__h span, .mtn-sheet__fit > .micro, .mtn-sheet__end > .micro { font: 500 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.mtn-sheet__meta dd { font-size: 15px; line-height: 1.35; text-align: right; text-wrap: pretty; }
@media (min-width: 600px) {
  .mtn-sheet__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .mtn-sheet__meta > div { display: grid; gap: 6px; justify-content: start; }
  .mtn-sheet__meta dd { text-align: left; }
}
.mtn-fr { display: grid; column-gap: clamp(24px, 3vw, 44px); }
@media (min-width: 600px) { .mtn-fr { grid-template-columns: 1fr 1fr; } }
.mtn-fr__g { padding-block: 20px 18px; border-bottom: 1px solid var(--line); }
.mtn-fr__h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font: 400 1.375rem/1.1 var(--serif); }
.mtn-fr__h span { min-width: 2.2em; color: var(--gold-ink); }
.mtn-fr__l li, .mtn-fit li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: baseline; padding-block: 4px; font-size: 15px; line-height: 1.45; }
/* casilla de revisión: anillo fino siempre; el punto dorado se posa al revisar (solo transform) */
.mtn-dot { position: relative; display: block; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-gold); transform: translateY(-1px); }
.mtn-dot::after { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; background: var(--gold); }
.mtn-sheet__fit { display: grid; gap: 10px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.mtn-fit { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.mtn-sheet__end { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 14px 22px; padding-top: 26px; }
.mtn-sheet__sign { justify-self: end; font: 400 1.125rem/1.3 var(--serif); color: var(--mute); text-align: right; }
@media (max-width: 599px) { .mtn-sheet__end { grid-template-columns: auto 1fr; } .mtn-sheet__sign { grid-column: 1 / -1; justify-self: start; text-align: left; } }
.mtn-sheet__fine { margin-top: clamp(22px, 2.6vw, 34px); padding-top: 12px; border-top: 1px dashed var(--line-gold); font-size: 12px; line-height: 1.5; letter-spacing: .01em; color: var(--mute-2); }

/* tachados: filete fino, solo se anima transform */
.mtn-x { position: relative; display: inline-block; white-space: nowrap; }   /* una sola línea: el tachado es un filete */
.mtn-x::after { content: ""; position: absolute; left: -3px; right: -3px; top: 54%; height: 1.5px; background: rgb(140 58 43 / .8); transform-origin: 0 50%; }

/* ---------- 06 · cierre -------------------------------------------------- */
.cta-end.mtn-end { padding-top: calc(var(--section) * .8); }

/* ---------- estados de entrada (solo con JS y movimiento permitido) ------- */
/* una transición por propiedad y elemento; ninguna de estas piezas la toca GSAP */
.mtn-dot::after { transition: transform .5s var(--ease-out) calc(.1s + var(--i, 0) * .14s); }
.visto__o { clip-path: inset(-25% -6% -25% -6%); transition: clip-path .6s var(--ease-inout) var(--d, 0s); }
.visto--no { transition: opacity .3s ease var(--d, 0s); }
.mtn-x::after { transition: transform .7s var(--ease-inout) var(--d, 0s); }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.mtn-off) [data-mtn-on]:not(.is-on) .mtn-dot::after { transform: scale(0); }
  html.js:not(.mtn-off) [data-mtn-on]:not(.is-on) .visto__o { clip-path: inset(-25% 106% -25% -6%); }
  html.js:not(.mtn-off) [data-mtn-on]:not(.is-on) .visto--no { opacity: 0; }
  html.js:not(.mtn-off) [data-mtn-on]:not(.is-on) .mtn-x::after { transform: scaleX(0); }
}

/* el proceso: la planta acotada ocupa el sitio de la foto, fija al bajar */
.mtn-pr__dib { align-self: start; }
@media (max-width: 899px) { .mtn-pr__dib { order: -1; } }
@media (min-width: 900px) { .mtn-pr__dib { position: sticky; top: calc(var(--hdr-h) + 32px); } }
/* cierre con el Palacio de Cristal (la misma pieza que la panorámica de la portada) */
.cta-pano { margin-top: clamp(8px, 2vw, 32px); aspect-ratio: 2400 / 900; overflow: hidden; }
.cta-pano .dib__svg { width: 100%; height: 100%; }
@media (max-width: 899px) { .cta-pano { aspect-ratio: 4 / 3 !important; } }