/* =========================================================================
   YAIMA CLAUSELL — DIRECCIÓN "UMBRAL"
   Editorial cálido. La casa se construye en tres dimensiones mientras el
   comprador avanza, pero el tono es de acompañamiento, no de topografía.
   ========================================================================= */

:root {
  /* --- neutros cálidos: corteza en vez de negro frío --- */
  --night: #1a1512;
  --night-2: #221b15;
  --ink: #2a231c;
  --ivory: #f6f2e9;
  --paper: #fbf8f2;
  --sand: #e0d5c0;
  --stone: #a2957f;          /* solo sobre fondo oscuro */
  --muted: #5d5344;          /* 6.7:1 sobre marfil */
  --line: rgba(224, 213, 192, 0.2);
  --line-2: rgba(42, 35, 28, 0.16);

  /* --- acentos --- */
  --cedar: #c0704a;          /* sobre fondo oscuro */
  --cedar-deep: #9e5230;     /* 5.1:1 sobre marfil */
  --olive: #6b7355;
  --wa: #25d366;
  --wa-press: #1fb856;

  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  /* el mono se retira: las etiquetas pasan a Archivo con tracking */
  --mono: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* --- escala tipográfica: seis peldaños, nada por debajo de 11px --- */
  --fs-label: 0.6875rem;     /* 11px  etiquetas */
  --fs-meta: 0.875rem;       /* 14px  metadatos */
  --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-h1: clamp(2.4rem, 7.2vw, 4.8rem);
  --fs-h2: clamp(1.95rem, 4.2vw, 3.3rem);

  /* --- ritmo vertical en tres pasos --- */
  --section-y: clamp(4.5rem, 9vw, 8rem);        /* apoyo */
  --section-y-lg: clamp(6rem, 12vw, 10rem);     /* hitos narrativos */
  --section-y-sm: clamp(3rem, 6vw, 4.5rem);     /* cierre y legales */

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1280px;
  --bar-h: 94px;
}

@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
  background: var(--night);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.05vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }
.sprite { display: none; }
.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

:focus-visible { outline: 2px solid var(--cedar); outline-offset: 3px; }
::selection { background: var(--cedar); color: var(--ivory); }
.skip { position: absolute; left: -9999px; background: var(--ivory); color: var(--ink); padding: .75rem 1.25rem; z-index: 200; }
.skip:focus { left: .5rem; top: .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- estructura ---------- */
.wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--lg { padding-block: var(--section-y-lg); }      /* hitos narrativos */
.section--tight { padding-block: var(--section-y-sm); }   /* apoyo y cierre */

/* hoja de papel sobre la mesa oscura */
.sheet { background: var(--ivory); color: var(--ink); }
.sheet .tag { color: var(--muted); }
.sheet .note { color: var(--muted); }
.sheet .lead { color: #443c33; }

/* ---------- tipografía ---------- */
.tag {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  display: block;
}
.tag--rule { display: flex; align-items: center; gap: .75rem; }
.tag--rule::before { content: ""; width: 26px; height: 1px; background: var(--cedar); flex: none; }

.h1 { font-family: var(--display); font-weight: 400; font-size: var(--fs-h1); line-height: .97; letter-spacing: -.015em; text-wrap: balance; }
.h2 { font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.03; letter-spacing: -.012em; text-wrap: balance; }
.h1 em, .h2 em { font-style: italic; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: #c8bda9; max-width: 46ch; }
.note { font-size: var(--fs-meta); color: var(--stone); line-height: 1.55; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.5rem; min-height: 52px; border: 1px solid transparent;
  font-size: .9375rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}
.btn--wa { background: var(--wa); color: #08301a; }
.btn--wa:hover { background: var(--wa-press); transform: translateY(-1px); }
/* verde contenido: el canal se reconoce por el ícono, no por el relleno */
.btn--wa-soft { background: transparent; border-color: var(--line); color: var(--ivory); }
.btn--wa-soft .ico { fill: var(--wa); }
.btn--wa-soft:hover { background: rgba(224, 213, 192, .08); border-color: var(--cedar); }
.sheet .btn--wa-soft { border-color: var(--line-2); color: var(--ink); }
.sheet .btn--wa-soft:hover { background: rgba(42, 35, 28, .05); border-color: var(--cedar-deep); }
.btn--ghost { border-color: var(--line); color: var(--ivory); background: transparent; }
.btn--ghost:hover { background: rgba(224, 213, 192, .08); }
.sheet .btn--ghost { border-color: var(--line-2); color: var(--ink); }
.sheet .btn--ghost:hover { background: rgba(42, 35, 28, .05); }
.btn--sm { min-height: 44px; padding: .7rem 1.1rem; font-size: var(--fs-meta); }
.cta-block { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.cta-note { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .04em; color: var(--stone); max-width: 44ch; }
.cta-note b { color: var(--sand); font-weight: 500; }
.sheet .cta-note { color: var(--muted); }
.sheet .cta-note b { color: var(--ink); }
.textlink { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; text-decoration: none; padding-bottom: .35rem; border-bottom: 1px solid currentColor; }

/* ---------- cabecera ---------- */
.header { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.header.is-stuck { background: rgba(26, 21, 18, .92); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 62px; gap: 1.5rem; }
.brand { text-decoration: none; line-height: 1; display: block; }
.brand__name { font-family: var(--sans); font-weight: 600; font-size: var(--fs-meta); letter-spacing: .2em; text-transform: uppercase; }
.brand__meta { display: block; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin-top: .35rem; white-space: nowrap; }
@media (max-width: 419px) { .brand__meta { letter-spacing: .05em; font-size: .625rem; } }
.nav { display: none; gap: 1.85rem; }
.nav a { text-decoration: none; font-size: .8125rem; color: #c3b8a3; display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.nav a:hover { color: var(--ivory); border-bottom-color: var(--cedar); }
.header .btn--wa, .header .btn--wa-soft { display: none; }

/* =========================================================================
   PORTADA — fotografía a sangre, tipografía sobre dos fondos
   ========================================================================= */
.hero { position: relative; display: grid; }
.hero__photo { position: relative; grid-row: 1; overflow: hidden; opacity: 0; animation: heroPhoto 1.2s ease .05s forwards; }
.hero__photo img { width: 100%; height: 38svh; min-height: 250px; max-height: 380px; object-fit: cover; object-position: 50% 14%; }
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(26, 21, 18,.05) 35%, rgba(26, 21, 18,.75) 78%, var(--night) 100%);
}
.hero__fig { position: absolute; right: var(--gutter); bottom: 4.5rem; z-index: 2; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: rgba(242,239,231,.75); }

.hero__content { grid-row: 2; position: relative; z-index: 2; margin-top: -3rem; padding-bottom: clamp(2.5rem, 6vw, 5rem); display: grid; gap: clamp(.9rem, 2.2vw, 1.5rem); justify-items: start; }
.hero__eyebrow { opacity: 0; animation: heroRise .8s cubic-bezier(.2,.7,.2,1) .35s forwards; }
.hero__title { line-height: .93; max-width: 15ch; }
.hero__title .l { display: block; opacity: 0; animation: heroRise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero__title .l:nth-child(1) { animation-delay: .45s; }
.hero__title .l:nth-child(2) { animation-delay: .55s; }
.hero__title .l:nth-child(3) { animation-delay: .65s; }
.hero__title .l:nth-child(4) { animation-delay: .75s; }
.hero__title em { font-style: italic; color: #e6dcc8; }

.hero__sheet {
  position: relative; background: var(--ivory); color: var(--ink);
  padding: clamp(1.35rem, 4vw, 2.25rem);
  box-shadow: 0 26px 60px rgba(0,0,0,.55);
  display: grid; gap: 1rem; justify-items: start; max-width: 34rem;
  opacity: 0; animation: heroSheet 1s cubic-bezier(.2,.7,.2,1) .95s forwards;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.hero__sheet::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line-2); pointer-events: none; }
.hero__sheet > * { position: relative; z-index: 1; }
.hero__sheet .cta-note { color: var(--muted); }
.hero__sheet .cta-note b { color: var(--ink); font-weight: 600; }
.hero__sheet .lead { color: #443c33; max-width: 40ch; font-size: .9688rem; }
.hero__sheet .btn--wa { width: 100%; }
.hero__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); opacity: 0; animation: heroRise .8s ease 1.25s forwards; }

@keyframes heroRise { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
@keyframes heroSheet { from { opacity: 0; transform: translateY(2rem) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes heroPhoto { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* ---------- franja: línea de cota ---------- */
.strip { border-block: 1px solid var(--line); }
.strip__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.strip__item { padding: clamp(1.25rem, 3vw, 2rem) clamp(.75rem, 2vw, 1.75rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
.strip__item:nth-child(2n) { border-right: 0; }
.strip__item:nth-last-child(-n + 2) { border-bottom: 0; }
.strip__item p { font-size: var(--fs-meta); color: #b8ac97; margin-top: .35rem; line-height: 1.45; }
.strip__k { font-size: .9375rem; font-weight: 600; }

/* ---------- lista de preguntas (hoja clara) ---------- */
.qlist { border-top: 1px solid var(--line-2); margin-top: clamp(2rem, 4vw, 3rem); }
.qlist li { border-bottom: 1px solid var(--line-2); padding: clamp(1rem, 2.2vw, 1.5rem) 0; }
.qlist .q { font-family: var(--display); font-size: clamp(1.35rem, 3vw, 2.3rem); line-height: 1.12; }
.qlist em { font-style: italic; color: var(--cedar-deep); }

/* =========================================================================
   LA MAQUETA — nueve placas que se levantan al avanzar
   ========================================================================= */
.model-sec { background: var(--night-2); }
.model-grid { display: grid; gap: 0; margin-top: clamp(2rem, 4vw, 3rem); }
.model {
  --pw: 196px; --gap: 26px;
  perspective: 1100px;
  display: grid; place-items: center;
  height: 210px;
  position: sticky; top: 62px; z-index: 5;
  background: var(--night-2);
  border-bottom: 1px solid var(--line);
  margin-inline: calc(var(--gutter) * -1);
}
.model__stage { position: relative; width: var(--pw); height: var(--pw); transform-style: preserve-3d; }
.plate {
  position: absolute; inset: 0;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(224, 213, 192, .07) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, rgba(224, 213, 192, .07) 0 1px, transparent 1px 18px),
    rgba(224, 213, 192, .035);
  will-change: transform, opacity;
}
.plate.is-on { border-color: rgba(192, 112, 74, .75); background-color: rgba(192, 112, 74, .08); }
.plate--last.is-on { border-color: var(--wa); background-color: rgba(37, 211, 102, .2); box-shadow: 0 0 26px rgba(37, 211, 102, .35), 0 0 0 1px rgba(37, 211, 102, .5); }
.model__ground { position: absolute; inset: -14%; border: 1px dashed rgba(224, 213, 192, .16); transform: translateZ(-2px); }
.model__label { position: sticky; top: 240px; z-index: 5; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); text-align: center; padding: .55rem 0 1.25rem; background: var(--night-2); margin-inline: calc(var(--gutter) * -1); }

.steps { counter-reset: s; }
.steps li { border-bottom: 1px solid var(--line); padding: clamp(1.1rem, 2.4vw, 1.5rem) 0; display: grid; grid-template-columns: 3rem 1fr; gap: .25rem 1rem; opacity: 1; }
.steps h3, .steps p, .steps b { color: #8f8574; transition: color .35s ease; }
.steps li.is-on h3 { color: var(--ivory); }
.steps li.is-on p { color: #c2b7a3; }
.steps li.is-on b { color: var(--cedar); }
.steps li:last-child { border-bottom: 0; }
.steps b { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; padding-top: .3rem; }
.steps h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.2rem, 2.1vw, 1.5rem); line-height: 1.18; }
.steps p { grid-column: 2; font-size: .9375rem; max-width: 56ch; }

/* ---------- listas técnicas ---------- */
.checks { border-top: 1px solid var(--line); }
.checks li { border-bottom: 1px solid var(--line); padding: 1rem 0; font-size: .9375rem; color: #c4b9a5; }
.sheet .checks { border-color: var(--line-2); }
.sheet .checks li { border-color: var(--line-2); color: #443c33; }
.disclaimer { margin-top: 1.5rem; border-left: 2px solid var(--cedar); padding: .9rem 0 .9rem 1.1rem; font-size: .8438rem; color: var(--stone); line-height: 1.6; }
.sheet .disclaimer { color: var(--muted); }

.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1rem, 3vw, 2.5rem); border-top: 1px solid var(--line); margin-top: 1.75rem; }
.specs li { font-size: .8125rem; padding: .7rem 0; border-bottom: 1px solid var(--line); color: #bfb49f; line-height: 1.35; }

.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

/* ---------- Tampa ---------- */
.tampa__fig { position: relative; margin: 0; }
.tampa__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tampa__coord { position: absolute; left: 0; bottom: -1.5rem; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .16em; color: var(--stone); }

/* ---------- propiedades ---------- */
.flag { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--cedar); border-left: 2px dashed var(--cedar); padding-left: .75rem; width: fit-content; }
.props { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); perspective: 1200px; }
.prop {
  border: 1px solid var(--line);
  background: rgba(224, 213, 192, .025);
  padding: 1rem;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .3s ease,
              background-color .3s ease, box-shadow .35s ease;
}
.prop:hover { border-color: rgba(192, 112, 74, .55); background: rgba(224, 213, 192, .05); }
.prop__art { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); display: grid; place-items: center; padding: 1rem;
  background: repeating-linear-gradient(90deg, rgba(224, 213, 192,.05) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, rgba(224, 213, 192,.05) 0 1px, transparent 1px 22px), rgba(224, 213, 192,.02); }
.prop__art svg { width: 100%; max-width: 240px; height: auto; overflow: visible; }
.prop__art .ln { fill: none; stroke: var(--sand); stroke-width: 1.1; opacity: .85; vector-effect: non-scaling-stroke; }
.prop__art .dim { opacity: .4; }
.prop__art .dsh { stroke-dasharray: 4 4; opacity: .5; }
.prop:hover .prop__art .ln { stroke: var(--cedar); }
.prop__badge { position: absolute; top: .55rem; left: .55rem; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--cedar); border: 1px dashed var(--cedar); padding: .15rem .4rem; }
.prop__price { font-family: var(--display); font-size: 1.4rem; margin-top: 1rem; color: var(--ivory); }
.prop__loc { font-size: var(--fs-meta); color: #b3a894; margin-top: .2rem; }
.prop__specs { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-label); color: var(--stone); }
.prop .btn { margin-top: 1.1rem; }

/* ---------- Yaima ---------- */
.story__fig { position: relative; margin: 0; }
.story__fig img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 52% 8%; }
.story__fig figcaption { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: .75rem; }
.story__body { display: grid; gap: 1.1rem; justify-items: start; }
.story__body p { max-width: 50ch; color: #443c33; }
.story__pending { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .06em; color: var(--muted); border-top: 1px solid var(--line-2); padding-top: 1rem; width: 100%; line-height: 1.6; }

/* ---------- testimonios ---------- */
.tsts { display: grid; gap: 1rem; margin-top: 2.25rem; }
.tst { border: 1px dashed var(--line); padding: 1.25rem; display: grid; gap: .6rem; align-content: start; }
.tst b { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--cedar); font-weight: 400; }
.tst p { font-size: var(--fs-meta); color: #b3a894; line-height: 1.5; }
.tst__by { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-top: auto; }
.tst { min-height: 210px; }

/* ---------- WhatsApp ---------- */
.wa__steps { border-top: 1px solid var(--line); margin: 1.5rem 0; }
.wa__steps li { display: flex; gap: 1rem; align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; color: #c4b9a5; }
.wa__steps b { font-family: var(--mono); font-size: .75rem; color: var(--stone); font-weight: 400; }
.word { font-family: var(--mono); letter-spacing: .14em; border: 1px solid var(--wa); color: var(--wa); padding: .05rem .4rem; font-size: .8125rem; margin-inline: .2rem; }
.wa__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 14%; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.15rem 3rem 1.15rem 0; position: relative; font-size: 1rem; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .5rem; top: 1.45rem; width: 11px; height: 11px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .22s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer { padding: 0 3rem 1.35rem 0; color: #b3a894; max-width: 66ch; font-size: .9375rem; }

/* ---------- cierre ---------- */
.final { background: var(--night-2); overflow: hidden; position: relative; }
.final__inner { display: grid; gap: clamp(1.75rem, 4vw, 3rem); position: relative; z-index: 1; }
.final .h2 { font-size: clamp(2.1rem, 5.2vw, 4rem); max-width: 17ch; }

/* ---------- pie ---------- */
.footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__grid { display: grid; gap: 2.25rem; }
.footer h3 { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); font-weight: 400; margin-bottom: .9rem; }
.footer li { font-size: .9375rem; color: #c4b9a5; }
/* 44px reales de alto sin cambiar el aspecto */
.footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__legal li a { min-height: 44px; }
.footer__legal { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); display: grid; gap: .9rem; font-size: .8125rem; color: var(--stone); }
.footer__legal .pending { font-family: var(--mono); font-size: var(--fs-label); color: #e0a878; border: 1px dashed rgba(224, 168, 120, .4); padding: .75rem .9rem; line-height: 1.6; }

/* ---------- barra móvil ---------- */
.mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: .5rem var(--gutter) calc(.5rem + env(safe-area-inset-bottom)); background: rgba(26, 21, 18, .94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(120%); transition: transform .3s ease; }
.mobilebar.is-visible { transform: translateY(0); }
.mobilebar .btn { width: 100%; }
.mobilebar__note { text-align: center; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .08em; color: var(--stone); margin-top: .35rem; }

/* ---------- apariciones ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   Breakpoints
   ========================================================================= */
@media (max-width: 639px) {
  .props { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .props::-webkit-scrollbar { display: none; }
  .prop { flex: 0 0 76%; scroll-snap-align: start; }
  .prop__ph { aspect-ratio: 3 / 2; }
}

@media (min-width: 640px) {
  .props { grid-template-columns: repeat(2, 1fr); }
  .tsts { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .strip__grid { grid-template-columns: repeat(4, 1fr); }
  .strip__item { border-bottom: 0; }
  .strip__item:nth-child(2n) { border-right: 1px solid var(--line); }
  .strip__item:last-child { border-right: 0; }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .nav { display: flex; }
  .header .btn--wa, .header .btn--wa-soft { display: inline-flex; }
  .mobilebar { display: none; }

  .hero { display: block; min-height: 100svh; position: relative; }
  .hero__photo { position: absolute; inset: 0 0 0 46%; grid-row: auto; }
  .hero__photo img { height: 100%; min-height: 0; max-height: none; object-position: 46% 12%; }
  .hero__photo::after { background: linear-gradient(to right, var(--night) 2%, rgba(26, 21, 18,.55) 34%, transparent 68%); }
  .hero__content { position: relative; margin-top: 0; min-height: 100svh; align-content: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); gap: clamp(1.1rem, 2vw, 1.6rem); }
  .hero__title { max-width: 12ch; }
  .hero__sheet { max-width: 30rem; transform: translate3d(var(--px, 0), var(--py, 0), 0); }
  .hero__sheet .btn--wa { width: auto; }

  .model-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .model { --pw: 300px; --gap: 42px; height: 60vh; top: 18vh; margin-inline: 0; background: transparent; border-bottom: 0; }
  .model__label { position: static; background: transparent; margin-inline: 0; padding: 0; margin-top: .5rem; }
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide { grid-template-columns: .95fr 1.05fr; }
  .props { grid-template-columns: repeat(3, 1fr); }
  .prop:hover { transform: perspective(900px) rotateY(-3deg) translateY(-4px); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .final__inner { grid-template-columns: 1.1fr .9fr; align-items: end; }
  .faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; column-gap: clamp(2rem, 5vw, 4rem); row-gap: 0; grid-template-areas: "head list" "cta list"; }
  .faq__head { grid-area: head; }
  .faq__cta { grid-area: cta; align-self: start; margin-top: 2rem; }
  .faq { grid-area: list; }
  .story { align-items: center; }
  .story__fig img { aspect-ratio: 4 / 5; object-position: 52% 14%; }
}

@media (max-width: 899px) {
  .model-grid, .model-col { display: contents; }
  .model__label { top: 272px; }
  .faq__grid { display: flex; flex-direction: column; }
  .faq__head { order: 1; }
  .faq { order: 2; margin-top: 1.75rem; }
  .faq__cta { order: 3; margin-top: 1.75rem; }
}

/* =========================================================================
   UMBRAL — capa nueva
   Profundidad con transformaciones CSS. Sin WebGL, sin librerías, 0 KB de JS
   adicional salvo el observador de apariciones.
   ========================================================================= */

/* ---------- portada con profundidad real ---------- */
.hero { perspective: 1400px; }
.hero__content { transform-style: preserve-3d; }

/* la hoja flota por delante del plano del texto */
.hero__sheet {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .28),
    0 18px 40px rgba(0, 0, 0, .42),
    0 40px 90px rgba(0, 0, 0, .35);
}

/* ---------- tarjetas de propiedad: volumen al pasar ---------- */
.prop__art { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.prop:hover .prop__art { transform: translateZ(22px); }
.prop__price, .prop__loc { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.prop:hover .prop__price { transform: translateZ(12px); }

/* ---------- acordeón: apertura animada sin JS ---------- */
.faq .answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.2, .7, .2, 1);
}
.faq details[open] .answer-wrap { grid-template-rows: 1fr; }
.faq .answer-wrap > .answer { overflow: hidden; min-height: 0; }
.faq summary { min-height: 44px; display: flex; align-items: center; transition: color .2s ease; }
.faq summary:hover { color: var(--cedar); }

/* =========================================================================
   GALERÍA DE CIERRES — video vertical, carga solo al pulsar
   ========================================================================= */
.cierres { background: var(--night-2); }
.cierres__head { display: grid; gap: 1rem; max-width: 56ch; }

.cierres__rail {
  display: flex;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 1rem;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  perspective: 1200px;
}
.cierres__rail::-webkit-scrollbar { display: none; }

.clip {
  flex: 0 0 min(74%, 300px);
  scroll-snap-align: start;
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  background: #0f0c0a;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .3s ease;
}
.clip:hover { border-color: rgba(192, 112, 74, .55); }
.clip__media { position: relative; aspect-ratio: 9 / 16; display: block; }
.clip__media img,
.clip__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip__media video { position: absolute; inset: 0; }

.clip__play {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(to bottom, rgba(26, 21, 18, .1) 40%, rgba(26, 21, 18, .72) 100%);
  color: var(--ivory);
  transition: background-color .3s ease;
}
.clip__play::after {
  content: "";
  width: 58px; height: 58px;
  border: 1px solid rgba(246, 242, 233, .85);
  border-radius: 50%;
  background: rgba(26, 21, 18, .45) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f6f2e9'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") no-repeat 55% 50% / 26px;
  backdrop-filter: blur(3px);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), background-color .28s ease;
}
.clip__play:hover::after { transform: scale(1.07); background-color: rgba(192, 112, 74, .55); }
.clip.is-playing .clip__play { display: none; }

.clip__cap {
  padding: .85rem 1rem 1.1rem;
  font-size: var(--fs-meta);
  color: #c4b9a5;
  line-height: 1.45;
}
.clip__cap span {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: .45rem;
}

.cierres__note {
  margin-top: 1.5rem;
  font-size: var(--fs-meta);
  color: var(--stone);
  max-width: 62ch;
  line-height: 1.6;
}

/* ---------- testimonios reales ---------- */
.tst { min-height: 0; border: 1px solid var(--line); background: rgba(224, 213, 192, .025); }
.tst q { font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.32; quotes: "«" "»"; color: var(--ivory); }
.tst__src { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }

@media (min-width: 900px) {
  .clip { flex: 0 0 288px; }
  .clip:hover { transform: translateY(-6px) rotateY(-2.5deg); }
  .prop:hover { transform: perspective(1200px) rotateY(-3.5deg) translateY(-6px); box-shadow: -18px 22px 44px rgba(0, 0, 0, .34); }
}

@media (prefers-reduced-motion: reduce) {
  .clip:hover, .prop:hover { transform: none; }
  .prop:hover .prop__art, .prop:hover .prop__price { transform: none; }
  .faq .answer-wrap { transition: none; }
}

/* ---------- correcciones de contraste sobre hoja clara ---------- */
.sheet .tst { border-color: var(--line-2); background: rgba(42, 35, 28, .022); }
.sheet .tst q { color: var(--ink); }
.sheet .tst__src { color: var(--muted); }
.sheet .story__pending { color: var(--muted); border-color: var(--line-2); }

/* la insignia de muestra se queda a 4.48:1; se aclara para pasar 4.5 */
.prop__badge { color: #cf8055; border-color: #cf8055; }

/* la marca del encabezado también merece 44px reales */
.brand { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }

/* =========================================================================
   EL UMBRAL — la tarjeta de la portada deja de ser una hoja de papel
   y pasa a ser una puerta entreabierta: panel oscuro con bisagra a la
   izquierda y la luz cálida escapándose por la rendija del quicio.
   Solo transformaciones y degradados: 0 KB de JS.
   ========================================================================= */
.hero__sheet {
  --open: -6deg;              /* cuánto está entreabierta */
  --glow: .85;                /* intensidad de la luz del quicio */
  background:
    radial-gradient(115% 95% at 0% 50%, rgba(192, 112, 74, .22), transparent 60%),
    linear-gradient(135deg, rgba(52, 42, 34, .90), rgba(24, 19, 16, .95));
  color: var(--ivory);
  border: 1px solid rgba(224, 213, 192, .16);
  border-left: 0;
  backdrop-filter: blur(7px);
  box-shadow:
    -26px 34px 70px rgba(0, 0, 0, .55),
    0 2px 10px rgba(0, 0, 0, .45);
  transform-origin: left center;
  transform: perspective(1400px) rotateY(var(--open));
  animation: umbralOpen 1.15s cubic-bezier(.2, .7, .2, 1) .85s forwards;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1),
              box-shadow .55s ease, --glow .55s ease;
}

/* la rendija: una línea de luz cálida en el canto de la bisagra */
.hero__sheet::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(to bottom,
    transparent 0%, var(--cedar) 16%, #f0a87d 50%, var(--cedar) 84%, transparent 100%);
  box-shadow:
    0 0 16px rgba(240, 168, 125, calc(var(--glow) * 1.1)),
    0 0 44px rgba(192, 112, 74, calc(var(--glow) * .6));
  transition: box-shadow .55s ease;
}

/* el filete interior se aclara: sobre panel oscuro el original era invisible */
.hero__sheet::after {
  inset: 10px 10px 10px 14px;
  border-color: rgba(224, 213, 192, .11);
}

/* texto invertido: el panel ya no es claro */
.hero__sheet .lead { color: #dfd4c1; }
.hero__sheet .cta-note { color: var(--stone); }
.hero__sheet .cta-note b { color: var(--sand); font-weight: 600; }

@keyframes umbralOpen {
  from { opacity: 0; transform: perspective(1400px) rotateY(-22deg) translateX(-12px); }
  to   { opacity: 1; transform: perspective(1400px) rotateY(var(--open)); }
}

@media (min-width: 900px) {
  /* la puerta se abre un poco más al acercarse; el parallax se conserva */
  .hero__sheet {
    transform: perspective(1400px) translate3d(var(--px, 0), var(--py, 0), 0) rotateY(var(--open));
  }
  .hero__sheet:hover,
  .hero__sheet:focus-within {
    --open: -1.5deg;
    --glow: 1;
    box-shadow: -34px 42px 90px rgba(0, 0, 0, .6), 0 2px 10px rgba(0, 0, 0, .45);
  }
  @keyframes umbralOpen {
    from { opacity: 0; transform: perspective(1400px) rotateY(-22deg) translateX(-12px); }
    to   { opacity: 1; transform: perspective(1400px) translate3d(var(--px, 0), var(--py, 0), 0) rotateY(var(--open)); }
  }
}

/* en pantallas estrechas la puerta se abre menos: un giro fuerte deforma el texto */
@media (max-width: 599px) {
  .hero__sheet { --open: -3deg; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__sheet { --open: 0deg; transform: none; animation: none; opacity: 1; }
}

/* ---------- tarjetas de propiedad con fotografía ---------- */
.prop__art { padding: 0; background: #17130f; overflow: hidden; }
.prop__art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), filter .45s ease;
  filter: saturate(.94) contrast(1.02);
}
.prop:hover .prop__art img { transform: scale(1.05); filter: saturate(1.02) contrast(1.04); }
/* velo cálido: une la fotografía con la paleta de la página */
.prop__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(26, 21, 18, .55) 0%, rgba(26, 21, 18, .06) 45%, transparent 70%);
}
.prop__badge {
  z-index: 2; background: rgba(26, 21, 18, .72); backdrop-filter: blur(4px);
  border-style: solid; letter-spacing: .16em;
}
/* con foto, el translateZ del dibujo ya no aplica */
.prop:hover .prop__art { transform: none; }

/* ---------- credenciales en la sección Sobre Yaima ---------- */
.story__credentials {
  font-size: var(--fs-meta);
  color: var(--muted);
  border-top: 1px solid var(--line-2);
  padding-top: 1.1rem;
  width: 100%;
  line-height: 1.6;
  max-width: 52ch;
}

/* =========================================================================
   PÁGINAS LEGALES — documento largo sobre hoja clara
   ========================================================================= */
.legal { background: var(--ivory); color: var(--ink); min-height: 100svh; }
.legal .doc { padding-block: clamp(3rem, 8vw, 6rem); }
.legal .doc__head { display: grid; gap: 1rem; max-width: 40ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.legal .doc__updated { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.legal h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.15;
  margin-top: clamp(2.25rem, 4vw, 3rem); margin-bottom: .85rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line-2);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal p, .legal li { color: #443c33; max-width: 68ch; font-size: .9688rem; line-height: 1.72; }
.legal p + p { margin-top: .9rem; }
.legal ul { margin-top: .9rem; display: grid; gap: .55rem; }
.legal li { padding-left: 1.15rem; position: relative; }
.legal li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 1px; background: var(--cedar-deep); }
.legal a { color: var(--cedar-deep); text-underline-offset: 3px; }
.legal .back {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  font-size: .9375rem; font-weight: 600; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line-2); margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.legal .back:hover { border-bottom-color: var(--cedar-deep); color: var(--cedar-deep); }
.legal .aviso {
  margin-top: 2rem; border-left: 2px solid var(--cedar-deep);
  padding: .95rem 0 .95rem 1.15rem; font-size: var(--fs-meta); color: var(--muted); line-height: 1.65;
}

/* las páginas legales no cargan app.js: el encabezado necesita fondo propio */
.legal .header {
  background: var(--ivory);
  border-bottom: 1px solid var(--line-2);
  backdrop-filter: none;
}
.legal .brand__name { color: var(--ink); }
.legal .brand__meta { color: var(--muted); }
.legal .header__inner { min-height: 72px; }
.legal .skip { background: var(--ink); color: var(--ivory); }
.legal .tag { color: var(--muted); }

/* =========================================================================
   PORTADA v3 — fuera el recuadro
   El bloque de llamada deja de ser una caja: queda como texto editorial
   colgado de un filete de cedro. Y el verde saturado sale del botón
   principal: se queda solo en el ícono, que es lo que da el reconocimiento.
   ========================================================================= */
.hero__sheet {
  background: none;
  border: 0;
  border-left: 1px solid rgba(224, 213, 192, .28);
  backdrop-filter: none;
  box-shadow: none;
  transform: none;
  animation: heroRise .9s cubic-bezier(.2, .7, .2, 1) .85s forwards;
  padding: .35rem 0 .35rem clamp(1.1rem, 3vw, 1.6rem);
  max-width: 33rem;
  gap: 1.15rem;
  position: relative;
}
/* el filete de cedro marca el arranque, sin encerrar nada */
.hero__sheet::before {
  content: "";
  position: absolute; left: -1px; top: 0; width: 1px; height: 3.2rem;
  background: linear-gradient(to bottom, var(--cedar), transparent);
  box-shadow: 0 0 12px rgba(192, 112, 74, .5);
}
.hero__sheet::after { display: none; }

.hero__sheet .lead {
  color: #d8cdb9;
  font-size: clamp(1.02rem, 1.35vw, 1.1rem);
  max-width: 34ch;
}

/* llamada principal en crema: cálida, contundente y sin pelear con la paleta */
.hero__sheet .btn--wa {
  background: var(--ivory);
  color: var(--ink);
  width: auto;
  padding-inline: 1.65rem;
  border: 1px solid transparent;
}
.hero__sheet .btn--wa .ico { fill: var(--wa); }
.hero__sheet .btn--wa:hover {
  background: #fffdf7;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
}
.hero__sheet .cta-note { color: var(--stone); }
.hero__sheet .cta-note b { color: var(--sand); }

@media (min-width: 900px) {
  .hero__sheet { transform: translate3d(var(--px, 0), var(--py, 0), 0); }
  .hero__sheet:hover, .hero__sheet:focus-within { box-shadow: none; }
}
@media (max-width: 599px) {
  .hero__sheet { --open: 0deg; }
  .hero__sheet .btn--wa { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__sheet { animation: none; opacity: 1; transform: none; }
  .hero__sheet .btn--wa:hover { transform: none; }
}

/* =========================================================================
   LA CASA POR PIEZAS — cada etapa de compra levanta una parte real
   01 solar · 02 cimientos · 03 losa · 04 muros · 05 puerta y ventanas
   06 estructura · 07 techo · 08 porche · 09 llaves
   ========================================================================= */
.casa { width: 100%; height: 100%; overflow: visible; display: block; }
.casa path { vector-effect: non-scaling-stroke; }

.pieza {
  opacity: 0;
  transform: translateY(-22px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .3, 1.06);
}
.pieza.is-on { opacity: 1; transform: none; }

/* --- el solar --- */
.terreno { fill: none; stroke: rgba(224, 213, 192, .24); stroke-dasharray: 5 5; }
.rejilla { fill: none; stroke: rgba(224, 213, 192, .10); }

/* --- obra gruesa --- */
.cim  { fill: rgba(224, 213, 192, .07); stroke: rgba(224, 213, 192, .40); }
.losa { fill: rgba(224, 213, 192, .10); stroke: rgba(224, 213, 192, .48); }
.muro { fill: rgba(224, 213, 192, .06); stroke: rgba(224, 213, 192, .52); }
.der  { fill: rgba(224, 213, 192, .11); }
.izq  { fill: rgba(224, 213, 192, .04); }
.arista { fill: none; stroke: rgba(224, 213, 192, .5); }

/* --- huecos --- */
.hueco { fill: rgba(20, 16, 13, .8); stroke: rgba(224, 213, 192, .55); }

/* --- cubierta --- */
.cercha { fill: none; stroke: rgba(192, 112, 74, .75); stroke-dasharray: 4 3; }
.faldon { fill: rgba(192, 112, 74, .26); stroke: rgba(192, 112, 74, .85); }
.faldon--tras { fill: rgba(108, 60, 35, .6); stroke: rgba(192, 112, 74, .45); }
.hastial { fill: rgba(192, 112, 74, .15); stroke: rgba(192, 112, 74, .7); }

/* --- exteriores --- */
.porche { fill: rgba(224, 213, 192, .08); stroke: rgba(224, 213, 192, .42); }
.loseta { fill: rgba(224, 213, 192, .07); stroke: rgba(224, 213, 192, .3); }

/* --- etapa 09: se enciende la casa --- */
.luz {
  fill: rgba(243, 194, 126, .62);
  stroke: rgba(243, 194, 126, .92);
  filter: drop-shadow(0 0 7px rgba(243, 194, 126, .55));
}
.pieza--llaves.is-on .luz { animation: encender .8s ease .1s both; }
@keyframes encender { from { opacity: 0 } to { opacity: 1 } }

/* la maqueta ya no necesita perspectiva CSS: el SVG es isométrico */
.model { perspective: none; }
.model__stage { width: 100%; height: 100%; transform-style: flat; }
.model__label #modelPart { color: var(--cedar); }

@media (prefers-reduced-motion: reduce) {
  .pieza { transition: none; }
  .pieza--llaves.is-on .luz { animation: none; }
}

/* La columna de la maqueta debe ocupar todo el alto de la fila; si no,
   el sticky se agota a los ~580px y la casa desaparece mientras aún
   quedan etapas por leer. */
@media (min-width: 900px) {
  .model-col { align-self: stretch; display: flex; flex-direction: column; }
  .model { position: sticky; top: 16vh; }
}

/* el rótulo debe seguir a la maqueta, no quedarse en el flujo detrás de ella */
@media (min-width: 900px) {
  .model__label {
    position: sticky;
    top: calc(16vh + 60vh + .6rem);
    z-index: 5;
    text-align: left;
  }
}

/* La maqueta se ancla a su caja: con grid centrado el height:100% no resuelve
   y el SVG tomaba su alto intrínseco, desbordando sobre el texto en móvil. */
.model { overflow: hidden; }
.model__stage { position: absolute; inset: 0; width: auto; height: auto; }
.casa { width: 100%; height: 100%; overflow: visible; }

/* en móvil la casa necesita algo más de alto que las placas antiguas */
@media (max-width: 899px) {
  .model { height: 250px; }
  .model__label { top: 312px; }
}