/* ==========================================================================
   eldormitorio · /propietarios  —  versión 5 «editorial + producto»
   Landing de captación de propietarios. Hoja única, sin dependencias.

   Dirección (elegida por el titular, 20-oct-2026): combinación de
     A · composición editorial: titulares en EB Garamond (la letra del
         logotipo), mucho blanco, filetes finos, fotografía protagonista
         con pie de foto;
     B · tarjetas de producto: el servicio «visible» (liquidación del día 15,
         contrato firmado, fianza depositada) flotando sobre la foto; piezas
         con doble marco; botones con el icono encajado.
   Movimiento sobrio: cortinillas en titulares, barridos al aparecer las
   fotos, entrada escalonada de las tarjetas. Todo respeta «reducir
   movimiento» y la página funciona entera sin JavaScript.

   Índice
     1. Fuentes            8. ¿Es para usted? (división)   15. Inquilinos
     2. Tokens             9. Relato del plano            16. Preguntas
     3. Base               10. Qué hacemos (bento)        17. Cierre
     4. Tipografía         11. Cómo funciona + CTA        18. Pie
     5. Botones            12. Cuentas claras + tarjeta   19. Botón fijo móvil
     6. Cabecera           13. Galería anclada            20. Movimiento
     7. Hero               14. Respaldo profesional       21. Legales y 404
   ========================================================================== */


/* 1. Fuentes autoalojadas (licencia OFL; nada se pide a terceros) ---------- */
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-wght.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";       /* logotipo y titulares */
  src: url("fonts/eb-garamond-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}


/* 2. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light;
  --white: #ffffff;
  --paper: #f6f6f5;          /* fondo alterno, neutro (no crema) */
  --ink: #141414;
  --ink-2: #5c5c5f;          /* 6,6:1 sobre blanco */
  --ink-3: #6e6e73;          /* rótulos del plano */
  --line: #e4e4e2;
  --hair: rgba(20, 20, 20, .08);
  --verde: #008066;          /* acción principal (5,1:1 con blanco) */
  --verde-2: #015758;
  --tint: #e2f1ec;
  --ambar-tint: #fff1d6;
  --black: #0f0f0f;

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(96px, 11vw, 176px);
  --r-photo: 8px;            /* fotos editoriales: esquina casi recta */
  --r-card: 22px;            /* tarjetas de producto */
  --r-shell: 30px;           /* doble marco: exterior */
  --nav-h: 72px;
  --sticky-h: 84px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow-float: 0 0 0 1px var(--hair), 0 24px 60px -14px rgba(20, 20, 20, .24);
}


/* 3. Base y accesibilidad -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  font-family: var(--font); font-size: 1.125rem; line-height: 1.6;
  color: var(--ink); background: var(--white);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
strong { font-weight: 650; }
ul, ol { list-style: none; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible, .closing :focus-visible, .tile-photo :focus-visible { outline-color: var(--white); }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: 12px;
  background: var(--ink); color: var(--white); text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.icon {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section.alt { background: var(--paper); }
.section.dark { background: var(--black); color: #f2f2f2; }


/* 4. Tipografía ------------------------------------------------------------
   Garamond regular (nunca negrita) para titulares y cifras; Figtree para
   todo lo demás. Escala: H1 hasta 8rem · H2 hasta 5,25rem · H3 1,375rem. */
.h1, .h2, .serif {
  font-family: var(--serif); font-weight: 400;
  text-wrap: balance;
}
.h1 { font-size: clamp(3.1rem, 1.5rem + 4.6vw, 6.6rem); line-height: .95; letter-spacing: -.028em; }
.h1 .line { display: block; }
.h1 .line-soft { color: var(--ink-2); }
.h2 { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5.25rem); line-height: 1; letter-spacing: -.022em; }
.h3 { font-size: 1.375rem; font-weight: 650; line-height: 1.3; letter-spacing: -.012em; }
.lead {
  font-size: clamp(1.2rem, 1.08rem + .55vw, 1.45rem); line-height: 1.5;
  color: var(--ink-2); max-width: 36ch; text-wrap: pretty;
}
.dark .lead { color: #a8a8ad; }
.section-head { margin-bottom: clamp(48px, 6vw, 88px); }
.section-head .lead { margin-top: 20px; }


/* 5. Botones: píldora con el icono encajado a la derecha -------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; padding: 8px 8px 8px 26px;
  border-radius: 999px; border: 0;
  font: 600 1.0625rem/1.2 var(--font);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .2s var(--ease);
}
.btn-ico {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  transition: transform .45s var(--ease-out), background-color .35s var(--ease);
}
.btn-ico .icon { width: 19px; height: 19px; stroke-width: 1.9; }
.btn:hover .btn-ico { transform: translate(2px, -1px) scale(1.06); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--verde); color: var(--white); }
.btn-primary .btn-ico { background: rgba(255, 255, 255, .18); }
.btn-primary:hover { background: var(--verde-2); }
.btn-quiet { background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.btn-quiet .btn-ico { background: var(--paper); color: var(--verde); }
.btn-quiet:hover { box-shadow: 0 0 0 1.5px var(--ink); }
.btn-ghost { color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06); }
.btn-ghost .btn-ico { background: rgba(255, 255, 255, .16); }
.btn-ghost:hover { background: var(--white); color: var(--ink); }
.btn-ghost:hover .btn-ico { background: var(--paper); }
.btn-sm { min-height: 46px; padding: 6px 6px 6px 20px; font-size: 1rem; gap: 10px; }
.btn-sm .btn-ico { width: 34px; height: 34px; }

.cta-row { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 560px) {
  .cta-row { flex-direction: row; flex-wrap: wrap; }
  .closing .cta-row { justify-content: center; }
}
@media (max-width: 559px) { .cta-row .btn { width: 100%; } }


/* 6. Cabecera editorial ------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  height: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.nav-links { display: flex; gap: 28px; font-size: .9375rem; }
.nav-links a { color: var(--ink-2); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #000; text-decoration: none; justify-self: center; }
.brand img { height: 30px; width: auto; }
.brand-name { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1; color: #000; transform: translateY(-1px); }
.nav-cta { justify-self: end; }
@media (max-width: 899px) {
  .nav { height: 64px; }
  :root { --nav-h: 64px; }
  .nav-in { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .brand { justify-self: start; }
  .brand-name { font-size: 1.5rem; }
}


/* 7. Hero: composición editorial + tarjetas de producto --------------------- */
.hero { padding-top: clamp(32px, 5vw, 80px); }
.hero-grid { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.18fr .82fr; } }
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 10px; border-radius: 999px;
  box-shadow: 0 0 0 1px var(--line); background: var(--white);
  font-size: .875rem; font-weight: 600; color: var(--ink-2); line-height: 1.3;
}
.badge img { height: 18px; width: auto; }
.hero .h1 { margin-top: 28px; }
.hero-lead {
  margin-top: 32px; max-width: 36ch;
  font-size: clamp(1.2rem, 1.08rem + .55vw, 1.45rem); line-height: 1.5; color: var(--ink-2);
}
.hero-lead strong { color: var(--ink); }
.hero .cta-row { margin-top: 36px; }

/* la escena: foto en marco 4:5 con tres tarjetas flotando */
.hero-scene { position: relative; padding: 28px 0 8px; }
.scene-frame { margin: 0; }
.hero-slides {
  position: relative; aspect-ratio: 4 / 5; max-height: 76vh; width: 100%;
  border-radius: var(--r-photo); overflow: hidden; background: var(--paper);
}
.slide { position: absolute; inset: 0; display: block; opacity: 0; }
.slide.s1 { opacity: 1; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.scene-cap, .fig-cap {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 12px; font-size: .875rem; color: var(--ink-2);
}

.pcard {
  position: absolute; z-index: 2;
  display: grid; gap: 4px;
  padding: 16px 18px; border-radius: var(--r-card);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-float);
  font-size: .9375rem; line-height: 1.35;
}
.pc-label { font-size: .8125rem; color: var(--ink-2); }
.pc-title { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; }
.pc-note { font-size: .8125rem; color: var(--ink-2); }
.pc-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair);
  font-size: .875rem; font-weight: 550;
}
.pc-chip { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--tint); color: var(--verde-2); font-size: .8125rem; font-weight: 700; }
.pc-ck { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--verde); color: var(--white); }
.pc-ck .icon { width: 13px; height: 13px; stroke-width: 2.8; }
.pc-1 { left: -56px; top: 12%; width: 280px; }
.pc-2 { right: -36px; top: 46%; width: 250px; }
.pc-3 { left: -40px; bottom: 14%; width: 270px; }
@media (max-width: 999px) {
  .hero-scene { margin-inline: 8px; }
  .hero-slides { max-height: none; }
  .pc-1 { left: -14px; top: 4px; width: min(250px, 70%); }
  .pc-2 { right: -14px; top: auto; bottom: 22%; width: min(230px, 66%); }
  .pc-3 { display: none; }
  .pc-1 .pc-chip { display: none; }
  .pc-row { font-size: .8125rem; }
}

/* cifras en Garamond, separadas por filetes */
.trust-strip {
  margin-top: clamp(56px, 7vw, 112px);
  display: grid; border-top: 1px solid var(--ink);
}
.trust-strip li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.ts-num { display: block; font-family: var(--serif); font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); line-height: 1; letter-spacing: -.02em; }
.ts-pre { font-size: .5em; color: var(--ink-2); letter-spacing: 0; }
.ts-label { display: block; margin-top: 10px; font-size: .9375rem; color: var(--ink-2); max-width: 28ch; }
@media (min-width: 760px) {
  .trust-strip { grid-template-columns: repeat(3, 1fr); }
  .trust-strip li { border-bottom: 0; padding: 24px 28px 0 0; }
}


/* 7b. Manifiesto ----------------------------------------------------------- */
.manifesto { padding-block: clamp(96px, 12vw, 200px) clamp(64px, 8vw, 120px); }
.manifesto-text {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.25rem, 1.2rem + 4vw, 5rem); line-height: 1.06; letter-spacing: -.02em;
  max-width: 24ch; text-wrap: balance;
}


/* 8. ¿Es para usted? — división editorial ------------------------------------ */
.split-grid { display: grid; gap: clamp(36px, 6vw, 112px); }
@media (min-width: 1000px) {
  .split-grid { grid-template-columns: .82fr 1.18fr; align-items: start; }
  .split-head { position: sticky; top: calc(var(--nav-h) + 48px); }
}
.split-head .lead { margin-top: 20px; }
.fit-list { border-top: 1px solid var(--ink); }
.fit-list li {
  display: flex; align-items: center; gap: 20px;
  padding: 26px 0; border-bottom: 1px solid var(--line);
  font-size: clamp(1.1875rem, 1.08rem + .45vw, 1.5rem); font-weight: 550; line-height: 1.35; letter-spacing: -.01em;
}
.fit-list .icon { width: 28px; height: 28px; color: var(--verde); }


/* 9. Relato del plano --------------------------------------------------------
   Móvil: el plano queda fijo arriba y las razones pasan por debajo.
   Escritorio: foto + plano (tarjeta de producto) fijos a la izquierda.
   El JS pone data-state="1…4" en .story-sticky según la razón visible. */
.story { overflow: clip; }
.story .section-head { margin-bottom: clamp(24px, 4vw, 64px); }
.story-grid { display: grid; }
@media (max-width: 999px) { .story-visual { display: contents; } }
.story-sticky {
  position: sticky; top: var(--nav-h); z-index: 2;
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 12px 0 8px;
}
.story-photos { display: none; }
.plan { margin: 0; }
.plan svg { width: 100%; height: auto; max-height: 25svh; margin-inline: auto; overflow: visible; }
.plan-caption { margin-top: 8px; min-height: 2.9em; font-size: 1rem; line-height: 1.4; font-weight: 600; text-align: center; text-wrap: balance; }
.cap { display: none; }
.story-sticky[data-state="0"] .cap-0, .story-sticky[data-state="1"] .cap-1,
.story-sticky[data-state="2"] .cap-2, .story-sticky[data-state="3"] .cap-3,
.story-sticky[data-state="4"] .cap-4 { display: block; }
.plan .walls { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: square; }
.plan .inner { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: square; }
.plan .door { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.plan .rail { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.plan .room { fill: var(--tint); transition: fill .6s var(--ease); }
.plan .common { fill: var(--white); transition: fill .6s var(--ease); }
.plan .free-mark { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: 0; transition: opacity .4s, stroke .4s; }
.plan .area-label { font: 500 13px var(--font); fill: var(--ink-3); transition: fill .6s; }
.plan .room-label { font: 650 15px var(--font); fill: var(--ink); letter-spacing: -.01em; }
.plan .st { font: 650 13px var(--font); opacity: 0; transition: opacity .4s; }
.plan .st-free { fill: var(--ink-2); }
.plan .st-next { fill: #8a5300; }
.plan .badge { transform-box: fill-box; transform-origin: center; transition: opacity .4s, transform .5s cubic-bezier(.2, .9, .3, 1.35); }
.plan .badge circle { fill: var(--verde); }
.plan .badge path { fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.story-sticky[data-state="1"] .r3 { fill: var(--white); }
.story-sticky[data-state="1"] .free-mark, .story-sticky[data-state="1"] .st-free { opacity: 1; }
.story-sticky[data-state="1"] .b3 { opacity: 0; transform: scale(.4); }
.story-sticky[data-state="2"] .r3 { fill: var(--ambar-tint); }
.story-sticky[data-state="2"] .free-mark { opacity: 1; stroke: #b26b00; }
.story-sticky[data-state="2"] .st-next { opacity: 1; }
.story-sticky[data-state="2"] .b3 { opacity: 0; transform: scale(.4); }
.story-sticky[data-state="3"] .badge { animation: badge-pulse .7s var(--ease) both; }
.story-sticky[data-state="3"] .b2 { animation-delay: .1s; }
.story-sticky[data-state="3"] .b3 { animation-delay: .2s; }
.story-sticky[data-state="3"] .b4 { animation-delay: .3s; }
.story-sticky[data-state="4"] .common { fill: #eef7f3; }
.story-sticky[data-state="4"] .area-label { fill: var(--verde-2); }
@keyframes badge-pulse { 50% { transform: scale(1.3); } }

.story-step {
  position: relative; min-height: 62svh;
  display: flex; flex-direction: column; justify-content: center; padding-block: 32px;
}
.story-step:last-child { min-height: 48svh; }
.story-step::before {
  content: ""; position: absolute; left: -20px; top: 50%;
  width: 3px; height: 0; border-radius: 3px; background: var(--verde);
  transform: translateY(-50%); transition: height .5s var(--ease);
}
.js-story .story-step.is-active::before { height: 7.5em; }
@media (max-width: 999px) { .story-step::before { left: -12px; } }
.step-kicker { font-size: .9375rem; font-weight: 650; color: var(--verde); }
.story-title {
  margin-top: 10px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.75rem); line-height: 1.02; letter-spacing: -.02em;
  text-wrap: balance;
}
.story-step p { margin-top: 18px; max-width: 34ch; font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem); line-height: 1.5; color: var(--ink-2); }

@media (min-width: 1000px) {
  .story-grid { grid-template-columns: 1.1fr 1fr; column-gap: clamp(48px, 7vw, 120px); }
  .story-sticky {
    top: calc(var(--nav-h) + 6vh);
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 0; display: flex; flex-direction: column;
  }
  .story-photos {
    display: block; position: relative; aspect-ratio: 4 / 3.1;
    border-radius: var(--r-photo); overflow: hidden; background: var(--paper);
  }
  .story-photos .sp {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.04);
    transition: opacity .9s var(--ease), transform 1.4s var(--ease);
  }
  .story-sticky[data-state="0"] .sp-1, .story-sticky[data-state="1"] .sp-1,
  .story-sticky[data-state="2"] .sp-2, .story-sticky[data-state="3"] .sp-3,
  .story-sticky[data-state="4"] .sp-4 { opacity: 1; transform: none; }
  /* el plano, como tarjeta de producto flotando sobre la foto */
  .plan {
    order: 2; position: relative; z-index: 1;
    width: 60%; margin: -150px 0 0 -32px;
    background: var(--white); border-radius: var(--r-card);
    padding: 22px 22px 14px; box-shadow: var(--shadow-float);
  }
  .plan svg { max-height: none; }
  .story-step { min-height: 80vh; }
  .story-step:first-child { min-height: 60vh; justify-content: flex-start; padding-top: 12vh; }
}


/* 10. Qué hacemos — bento con doble marco (exterior + núcleo) ---------------- */
.bento { display: grid; gap: 14px; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bento { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.tile {
  padding: 6px; border-radius: var(--r-shell);
  background: rgba(20, 20, 20, .035); box-shadow: 0 0 0 1px var(--hair);
}
.tile-in {
  height: 100%; border-radius: calc(var(--r-shell) - 6px);
  background: var(--white); padding: 28px 26px 30px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.tile .icon { width: 30px; height: 30px; color: var(--verde); stroke-width: 1.5; }
.tile .h3 { margin-top: 20px; }
.tile p { margin-top: 8px; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.55; }
.tile-photo .tile-in {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 460px; padding: 0; display: flex; align-items: flex-end; color: var(--white);
}
.tile-photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tile-photo .tile-in::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, 0) 75%);
}
.tile-photo-text { padding: 30px; }
.tile-photo .h3 { margin-top: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; }
.tile-photo p { color: rgba(255, 255, 255, .9); max-width: 42ch; font-size: 1.125rem; margin-top: 10px; }
.tile-dark .tile-in { background: var(--ink); color: var(--white); }
.tile-dark .icon { color: #7fd1bd; }
.tile-dark p { color: #bdbdc2; }
.tile-dark .h3 { font-family: var(--serif); font-weight: 400; font-size: 1.85rem; line-height: 1.1; letter-spacing: -.015em; }
@media (min-width: 640px)  { .tile-photo { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .tile-photo { grid-column: span 2; grid-row: span 2; } }
@media (max-width: 639px) {
  .tile:not(.tile-photo) .tile-in { display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; padding: 22px 20px 24px; }
  .tile:not(.tile-photo) .icon { grid-row: span 2; }
  .tile:not(.tile-photo) .h3 { margin-top: 0; }
}


/* 11. Cómo funciona — numerales en Garamond --------------------------------- */
.steps { display: grid; border-top: 1px solid var(--ink); }
.step { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.step-num { grid-row: span 2; font-family: var(--serif); font-size: 3.25rem; line-height: .9; color: var(--verde); }
.step p { margin-top: 6px; color: var(--ink-2); }
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(5, 1fr); column-gap: 28px; border-top: 0; }
  .step { display: block; padding: 0; border-bottom: 0; border-top: 1px solid var(--ink); padding-top: 22px; }
  .step-num { display: block; font-size: 4.5rem; }
  .step .h3 { margin-top: 26px; }
}

.cta-band {
  margin-top: clamp(64px, 8vw, 112px);
  padding: 6px; border-radius: var(--r-shell);
  background: rgba(20, 20, 20, .035); box-shadow: 0 0 0 1px var(--hair);
}
.cta-band > div:first-child, .cta-band > .cta-row { position: relative; }
.cta-band {
  display: grid; gap: 0;
}
.cta-band-title { font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -.02em; }
.cta-band-sub { margin-top: 10px; color: var(--ink-2); }
.cta-band > div:first-child {
  border-radius: calc(var(--r-shell) - 6px) calc(var(--r-shell) - 6px) 0 0;
  background: var(--white); padding: clamp(28px, 5vw, 52px) clamp(24px, 5vw, 52px) 0;
}
.cta-band > .cta-row {
  border-radius: 0 0 calc(var(--r-shell) - 6px) calc(var(--r-shell) - 6px);
  background: var(--white); padding: 28px clamp(24px, 5vw, 52px) clamp(28px, 5vw, 52px);
}
@media (min-width: 1000px) {
  .cta-band { grid-template-columns: 1fr auto; }
  .cta-band > div:first-child { border-radius: calc(var(--r-shell) - 6px) 0 0 calc(var(--r-shell) - 6px); padding-bottom: clamp(28px, 5vw, 52px); }
  .cta-band > .cta-row { border-radius: 0 calc(var(--r-shell) - 6px) calc(var(--r-shell) - 6px) 0; align-items: center; align-content: center; padding-top: clamp(28px, 5vw, 52px); }
}


/* 12. Cuentas claras (fondo oscuro) + tarjeta de liquidación ----------------- */
.ledger-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1000px) { .ledger-grid { grid-template-columns: 1.15fr .85fr; gap: 88px; } }
.ledger { display: grid; border-top: 1px solid #3a3a3c; }
.ledger li { padding: clamp(24px, 3.4vw, 36px) 0; border-bottom: 1px solid #2c2c2e; display: grid; gap: 8px; }
.ledger .big { font-family: var(--serif); font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.9rem); line-height: 1.06; letter-spacing: -.015em; color: var(--white); text-wrap: balance; }
.ledger p { color: #a8a8ad; max-width: 52ch; }
.statement-wrap { display: grid; place-items: center; padding: 24px 8px; perspective: 1100px; }
.statement-card {
  width: min(100%, 420px);
  background: var(--white); color: var(--ink);
  border-radius: 28px; padding: 28px 28px 0; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 90px rgba(0, 128, 102, .4);
  transform: rotate(-2.5deg);
  transition: transform .5s var(--ease);
}
.sc-head { display: flex; align-items: center; gap: 8px; }
.sc-logo { height: 22px; width: auto; }
.sc-brand { font-family: var(--serif); font-size: 1.25rem; color: #000; line-height: 1; }
.sc-chip { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--tint); color: var(--verde-2); font-size: .9375rem; font-weight: 700; }
.sc-title { margin-top: 26px; font-family: var(--serif); font-size: 2rem; line-height: 1.05; letter-spacing: -.015em; }
.sc-sub { margin-top: 4px; color: var(--ink-2); font-size: 1rem; }
.sc-rows { margin-top: 20px; }
.sc-rows li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.4; font-weight: 550; }
.sc-check { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--verde); color: var(--white); }
.sc-check .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.sc-foot { margin: 8px -28px 0; padding: 18px 28px; background: var(--verde); color: var(--white); font-weight: 650; font-size: 1.0625rem; }
.statement-wrap.is-tilting .statement-card {
  animation: none;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-1.5deg);
  transition: transform .12s linear;
}
.js-statement .sc-check { transform: scale(0); }
.js-statement .statement-wrap.is-in .sc-check { animation: tick .5s cubic-bezier(.2, .9, .3, 1.4) both; }
.js-statement .statement-wrap.is-in li:nth-child(2) .sc-check { animation-delay: .35s; }
.js-statement .statement-wrap.is-in li:nth-child(3) .sc-check { animation-delay: .7s; }
.js-statement .statement-wrap.is-in li:nth-child(4) .sc-check { animation-delay: 1.05s; }
@keyframes tick { from { transform: scale(0); } to { transform: scale(1); } }


/* 13. Galería anclada --------------------------------------------------------
   Base: carrusel horizontal con imán. Escritorio con soporte: la sección
   mide 320vh, su interior se queda fijo y la pista avanza en horizontal. */
.hgallery { padding-block: var(--section-y); overflow: clip; }
.hg-head { margin-bottom: clamp(36px, 5vw, 64px); }
.hg-head .lead { margin-top: 18px; }
.hg-viewport {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.hg-viewport::-webkit-scrollbar { display: none; }
.hg-viewport:focus-visible { outline-offset: -3px; }
.hg-track { display: flex; gap: 16px; width: max-content; }
.hg-item { scroll-snap-align: start; width: 86vw; max-width: 980px; }
.hg-item img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-photo); background: var(--paper); }
.hg-item figcaption { margin-top: 12px; font-size: .9375rem; color: var(--ink-2); }
@media (min-width: 900px) { .hg-item { width: 60vw; } .hg-track { gap: 28px; } }
@keyframes hg-slide { to { transform: translateX(calc(-100% + 100vw - 2 * var(--gutter))); } }


/* 14. Respaldo profesional --------------------------------------------------- */
.credential { border-top: 1px solid var(--ink); padding-top: 32px; }
.credential-logo { width: clamp(130px, 14vw, 170px); height: auto; }
.credential-name { margin-top: 28px; font-family: var(--serif); font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem); line-height: 1.02; letter-spacing: -.02em; }
.credential-role { margin-top: 14px; color: var(--ink-2); max-width: 56ch; }
.backing-text { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--ink-2); max-width: 60ch; }
.checks { display: grid; gap: 14px; margin-top: 28px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 550; }
.checks .icon { color: var(--verde); margin-top: 2px; stroke-width: 2.2; }


/* 15. Nuestros inquilinos ---------------------------------------------------- */
.tenants { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .tenants { grid-template-columns: 1fr 1fr; gap: 96px; } }
.tenants-fig { margin: 0; }
.tenants-fig img { width: 100%; height: auto; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: var(--r-photo); }
.statement { margin-top: 32px; font-family: var(--serif); font-size: clamp(1.9rem, 1.3rem + 2vw, 3.1rem); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.statement-note { margin-top: 24px; font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem); color: var(--ink-2); max-width: 42ch; }


/* 16. Preguntas frecuentes (<details> nativo) --------------------------------- */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; cursor: pointer;
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem); font-weight: 650; line-height: 1.35; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 14px 1.6px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.6px 14px no-repeat,
    var(--white);
  box-shadow: 0 0 0 1px var(--line);
  transition: transform .4s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 54px 26px 0; color: var(--ink-2); }
@media (max-width: 559px) { .faq .answer { padding-right: 0; } }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .4s var(--ease), content-visibility .4s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}


/* 17. Cierre a pantalla completa --------------------------------------------- */
.closing {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(92svh, 900px); display: flex; align-items: center;
  padding-block: 104px; background: #2b2b2b; color: var(--white); text-align: center;
}
.closing-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.closing-shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .56) 55%, rgba(0, 0, 0, .7) 100%); }
.closing-title { font-family: var(--serif); font-weight: 400; font-size: clamp(3.1rem, 1.6rem + 5.8vw, 7.5rem); line-height: .96; letter-spacing: -.025em; text-wrap: balance; }
.closing-lead { margin: 24px auto 0; max-width: 34ch; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.45; color: rgba(255, 255, 255, .9); }
.closing .cta-row { margin-top: 40px; }
.closing-alt { margin-top: 28px; font-size: 1rem; color: rgba(255, 255, 255, .85); }
.closing-alt a { color: var(--white); font-weight: 600; text-underline-offset: 3px; }


/* 18. Pie -------------------------------------------------------------------- */
.footer { background: var(--paper); border-top: 1px solid var(--line); padding-block: 56px; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.footer .brand { justify-self: start; }
.footer .brand img { height: 26px; }
.footer .brand-name { font-size: 1.5rem; }
.footer-links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a { color: var(--ink); text-underline-offset: 3px; padding: 6px 0; }
.footer-legal { margin-top: 20px; max-width: 70ch; }
.footer-copy { margin-top: 12px; }


/* 19. Botón fijo de WhatsApp (solo móvil) ------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--line);
  transition: transform .35s var(--ease), visibility 0s;
}
.sticky-cta .btn { width: 100%; }
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom)); }
  .js-sticky .sticky-cta:not(.is-visible) { transform: translateY(110%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; }
}
@media (min-width: 768px) { .sticky-cta { display: none; } }


/* 20. Movimiento (sobrio) ------------------------------------------------------
   Solo si el sistema no pide reducirlo. Tiempo de carga: el titular sube por
   líneas, la foto del hero se abre y las tarjetas entran escalonadas. Al
   desplazarse: cortinilla en titulares, barrido en fotos, manifiesto que se
   ilumina y galería anclada. */
.hero .h1 .line { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero .h1 .line-in { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .hero .h1 .line-in { animation: line-up 1.2s var(--ease-out) both; }
  .hero .h1 .line:nth-child(2) .line-in { animation-delay: .12s; }
  .badge, .hero-lead, .hero .cta-row { animation: rise 1s var(--ease-out) both; }
  .badge { animation-delay: .05s; }
  .hero-lead { animation-delay: .3s; }
  .hero .cta-row { animation-delay: .42s; }
  .hero-slides { animation: frame-open 1.6s var(--ease-out) .1s both; }
  .pcard { animation: card-in 1s var(--ease-out) both; }
  .pc-1 { animation-delay: .9s; }
  .pc-2 { animation-delay: 1.1s; }
  .pc-3 { animation-delay: 1.3s; }
  .trust-strip { animation: rise 1s var(--ease-out) .6s both; }

  /* fundido lento entre cuatro fotos reales dentro del marco (el JS añade
     .is-playing cuando las fotos 2-4 ya están cargadas) */
  .hero.is-playing .slide { animation: slide-kb 32s linear infinite both; }
  .hero.is-playing .s1 { animation-delay: -2s; }
  .hero.is-playing .s2 { animation-delay: 6s; }
  .hero.is-playing .s3 { animation-delay: 14s; }
  .hero.is-playing .s4 { animation-delay: 22s; }

  .statement-card { animation: float 7s ease-in-out infinite alternate; }

  @supports (animation-timeline: view()) {
    .section-head .h2, .split-head .h2, .hg-head .h2, .tenants .h2, .closing-title, .story-title {
      animation: curtain linear both; animation-timeline: view(); animation-range: entry 10% entry 75%;
    }
    .reveal-img, .story-photos, .hg-item img {
      animation: wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;
    }
    .closing-img { animation: closing-img linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
  @supports (animation-timeline: view()) and ((-webkit-background-clip: text) or (background-clip: text)) {
    .manifesto-text span {
      color: transparent;
      background: linear-gradient(90deg, var(--ink) 50%, #c9c9cc 50%) 100% 0 / 200% 100% no-repeat;
      -webkit-background-clip: text; background-clip: text;
      -webkit-box-decoration-break: slice; box-decoration-break: slice;
      animation: manifesto linear both; animation-timeline: view(); animation-range: entry 70% cover 55%;
    }
  }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hgallery { height: 320vh; padding-block: 0; view-timeline-name: --hg; }
    .hg-sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; }
    .hg-viewport { overflow: visible; scroll-snap-type: none; }
    .hg-track { animation: hg-slide linear both; animation-timeline: --hg; animation-range: contain 0% contain 100%; }
    .hg-item img { max-height: 58vh; animation: none; }
  }
}
/* brillo que sigue al cursor y ligera elevación en las piezas (solo ratón) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .spot { position: relative; transition: transform .5s var(--ease-out); }
  .spot .tile-in { position: relative; isolation: isolate; }
  .spot .tile-in::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 128, 102, .1), transparent 60%);
    opacity: 0; transition: opacity .4s var(--ease);
  }
  .spot:hover .tile-in::before { opacity: 1; }
  .spot:hover { transform: translateY(-4px); }
}

@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes line-up { from { transform: translateY(105%); } }
@keyframes frame-open { from { clip-path: inset(6% 6% 6% 6% round 8px); transform: scale(1.04); } to { clip-path: inset(0 round 8px); transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes slide-kb {
  0%   { opacity: 0; transform: scale(1.1); }
  6%   { opacity: 1; }
  25%  { opacity: 1; }
  31%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes float { from { transform: rotate(-2.5deg) translateY(0); } to { transform: rotate(-1deg) translateY(-12px); } }
@keyframes curtain { from { clip-path: inset(0 0 100% 0); transform: translateY(.3em); } to { clip-path: inset(0 0 -12% 0); transform: none; } }
@keyframes wipe { from { clip-path: inset(10% 8% 10% 8% round 8px); transform: scale(1.06); } to { clip-path: inset(0 round 8px); transform: none; } }
@keyframes closing-img { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes manifesto { to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .js-statement .sc-check { transform: none; }
  .statement-card { transform: none; }
}


/* 21. Páginas legales y 404 --------------------------------------------------- */
.doc { padding-block: clamp(56px, 9vw, 120px); min-height: 60vh; }
.doc .h2 { margin-bottom: 28px; }
.doc p { max-width: 68ch; color: var(--ink-2); }
.doc p + p { margin-top: 16px; }
.doc .btn { margin-top: 32px; }
.doc a:not(.btn) { color: var(--verde); text-underline-offset: 3px; }
.doc-date { font-size: 1rem; }
.doc h2.h3 { margin-top: 44px; margin-bottom: 12px; color: var(--ink); }
.doc-list { max-width: 68ch; display: grid; gap: 8px; margin: 12px 0 16px; color: var(--ink-2); }
.doc-list strong { color: var(--ink); }
.doc-table { max-width: 68ch; overflow-x: auto; margin: 16px 0; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.doc-table th { font-weight: 650; }
.doc-table td { color: var(--ink-2); }
.doc-table td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
/* cabecera simple en legales (sin enlaces de sección) */
.doc-page .nav-links { visibility: hidden; }