/* =========================================================================
   NÚCLEO CONSULTORIOS — styles.css
   Identidad visual heredada de Monte Líbano 255: marfil, verde bosque,
   grafito y acento champagne. Los nombres de tokens son los mismos que en
   cliente.css de ML255 (--c-forest, --c-champagne, --c-bg…), así que
   premium.css y cualquier componente de ML se pueden reutilizar.

   Layout: retícula editorial a 1200px con gutter fluido; el cotizador es
   el centro del sitio (controles a la izquierda, cotización a la derecha).

   ÍNDICE
   1. Tokens          6. Ticker           11. Ubicación
   2. Base            7. Cotizador        12. CTA final y footer
   3. Tipografía      7b. Planta del nivel 13. Barra fija móvil
   4. Botones         8. Formatos         14. Modales y formularios
   5. Header y hero   9. Por qué Núcleo   15. Responsive
   5b. Edificio, amenidades y niveles     10. Proceso (línea de tiempo en celular)
   ========================================================================= */

/* ---------------------------------------------------------------------
   1. TOKENS — diseño de un solo tema (claro), deliberado como en ML255
   --------------------------------------------------------------------- */
:root{
  color-scheme: light;

  --c-bg:            #FBF9F4;   /* marfil */
  --c-bg-alt:        #F3EFE6;   /* marfil profundo */
  --c-white:         #FFFFFF;
  --c-ink:           #16201A;   /* tinta verdosa */
  --c-graphite:      #3A413C;
  --c-stone:         #7C8079;   /* gris piedra */
  --c-stone-light:   #D3CFC4;
  --c-line:          rgba(22,32,26,.12);
  --c-line-strong:   rgba(22,32,26,.26);
  --c-forest:        #1E3A2B;   /* verde bosque */
  --c-forest-dark:   #132A1E;
  --c-champagne:     #C6AE7C;
  --c-champagne-dark:#94804F;
  --c-on-dark:       #FBF9F4;
  --c-on-dark-soft:  rgba(251,249,244,.70);
  --c-on-dark-line:  rgba(251,249,244,.16);
  --c-on-dark-dim:   rgba(251,249,244,.54);   /* pasos aún no alcanzados (contraste AA sobre bosque) */
  --c-on-dark-dot:   rgba(251,249,244,.35);   /* borde de los puntos de la línea de tiempo */
  --c-error:         #9A3B2C;

  --font-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-sans:  "Manrope", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 5vw, 64px);
  --maxw: 1200px;
  --header-h: 76px;
  --section-y: clamp(72px, 10vw, 128px);

  --shadow-soft: 0 10px 30px rgba(19,42,30,.08);
  --shadow-lift: 0 22px 50px rgba(19,42,30,.14);

  /* Curva lenta sin rebote para la planta del nivel (premium.css define
     la misma como --ease-soft; aquí va con respaldo por si no se carga) */
  --ease-plan: var(--ease-soft, cubic-bezier(.25,.46,.30,1));
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
body{
  margin:0;
  background: var(--c-bg);
  color: var(--c-graphite);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.ne-modal-open body, .ne-nav-open body{ overflow:hidden; }
img, svg{ max-width:100%; }
a{ color: inherit; }
button{ font: inherit; color: inherit; }
:focus-visible{ outline: 2px solid var(--c-champagne-dark); outline-offset: 3px; }

.container{
  width:100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline: var(--gutter);
}
main > section{ padding-block: var(--section-y); }

/* ---------------------------------------------------------------------
   3. TIPOGRAFÍA
   --------------------------------------------------------------------- */
h1, h2, h3{ margin:0; color: var(--c-ink); text-wrap: balance; }
p{ margin:0; }

.eyebrow{
  font-size: 11px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--c-champagne-dark);
  margin-bottom: 18px;
}
.eyebrow-light{ color: var(--c-champagne); }

.section-head{ max-width: 680px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.005em;
}
.section-lead{
  margin-top: 22px;
  font-size: 17px;
  color: var(--c-graphite);
  max-width: 60ch;
}

/* ---------------------------------------------------------------------
   4. BOTONES
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height: 48px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: none;
  white-space: nowrap;
}
.btn .ic{ font-size: 15px; letter-spacing: 0; }
.btn-block{ width:100%; }

.btn-primary{ background: var(--c-forest); color: var(--c-white); }
.btn-primary:hover{ background: var(--c-forest-dark); }

.btn-outline{ border-color: var(--c-line-strong); color: var(--c-ink); background: transparent; }

.btn-light{ background: var(--c-bg); color: var(--c-forest-dark); }
.btn-light:hover{ background: var(--c-white); }

.btn-ghost-light{ border-color: var(--c-on-dark-line); color: var(--c-on-dark); background: transparent; }

.link{
  background:none; border:0; padding:0; cursor:pointer;
  color: var(--c-forest); text-decoration: underline; text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------
   5. HEADER Y HERO
   --------------------------------------------------------------------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  background: rgba(251,249,244,.0);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height: var(--header-h);
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline: var(--gutter);
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand-mark{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--c-line-strong);
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-serif); font-size:16px; letter-spacing:.04em;
  color: var(--c-ink);
  flex-shrink:0;
}
.brand-mark-light{ border-color: var(--c-on-dark-line); color: var(--c-on-dark); }
.brand-text{
  font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--c-ink);
}
.brand-text em{ font-style: normal; font-weight: 400; color: var(--c-stone); }

.main-nav{ display:flex; align-items:center; gap: 30px; }
.main-nav > a, .main-nav > .nav-link{
  position:relative;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration:none; color: var(--c-graphite);
  background:none; border:0; padding: 6px 0; cursor:pointer;
}
.main-nav > a::after, .main-nav > .nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--c-champagne-dark);
  transform: scaleX(0); transform-origin:left;
  transition: transform .4s ease;
}
.main-nav > a:hover::after, .main-nav > .nav-link:hover::after{ transform: scaleX(1); }

.nav-toggle{
  display:none;
  width:44px; height:44px; border:0; background:none; cursor:pointer;
  position:relative; color: var(--c-ink);
}
.nav-toggle span{
  position:absolute; left:11px; right:11px; height:1.5px; background: currentColor;
  transition: transform .35s ease, top .35s ease;
}
.nav-toggle span:first-child{ top:17px; }
.nav-toggle span:last-child{ top:26px; }
.nav-toggle[aria-expanded="true"] span:first-child{ top:21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ top:21px; transform: rotate(-45deg); }

.hero{
  position:relative;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(40px, 7vw, 88px)) !important;
  padding-bottom: clamp(56px, 7vw, 96px) !important;
  overflow:hidden;
}
.hero-inner{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items:center;
}
.hero-copy{ min-width:0; }
.hero-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.7rem, 6vw, 4.9rem);
  line-height: 1.0;
  letter-spacing: -.012em;
}
.hero-title em{ font-style: italic; color: var(--c-forest); }
.hero-sub{
  margin-top: 26px;
  font-size: 18px; line-height: 1.6;
  max-width: 46ch;
}
/* Cifras del hero: tres columnas iguales; la cifra nunca se parte en dos
   líneas (nowrap) y su tamaño se ajusta al ancho disponible. */
.hero-price{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 36px;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.hp-item{
  display:flex; flex-direction:column; gap:4px;
  padding: 18px 20px 18px 0;
  min-width: 0;
}
.hp-item + .hp-item{ padding-left: 20px; border-left: 1px solid var(--c-line); }
.hp-num{
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 2.5vw, 2.2rem);
  font-weight: 500; line-height: 1.1;
  color: var(--c-ink);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.hp-label{
  font-size: 10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  line-height: 1.5;
  color: var(--c-stone);
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap: 12px; margin-top: 34px; }

.hero-visual{ min-width:0; }
.hero-facade svg{ display:block; width:100%; height:auto; overflow:visible; }
.hero-caption{
  margin-top: 8px;
  font-size: 11px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--c-stone);
  text-align:center;
  min-height: 1.6em;
}

/* Fachada (SVG generado en app.js a partir de CONFIG.niveles) */
.he-dim line{ stroke: var(--c-champagne-dark); stroke-width:1; }
.he-dim text{ font-family: var(--font-sans); font-size: 9.5px; letter-spacing: .26em; fill: var(--c-champagne-dark); font-weight:600; }
.he-roofbox{ fill: var(--c-bg-alt); stroke: var(--c-line-strong); stroke-width:1; }
.he-cornice{ fill: var(--c-ink); }
.he-roof{ fill: var(--c-bg-alt); stroke: var(--c-ink); stroke-width:1.2; }
.he-dormer{ fill: var(--c-white); stroke: var(--c-ink); stroke-width:1.1; }
.he-frame{ fill: var(--c-white); stroke: var(--c-ink); stroke-width:1.2; }
.he-pier{ stroke: var(--c-ink); stroke-width:1; }
.he-floor{ stroke: var(--c-ink); stroke-width:1.4; }
.he-ground{ stroke: var(--c-ink); stroke-width:1.6; }
.he-surround{ fill: none; stroke: var(--c-line-strong); stroke-width:1; }
.he-window{ fill: var(--c-bg-alt); stroke: var(--c-graphite); stroke-width:.8; transition: fill .5s ease; }
.he-mullion{ stroke: var(--c-line-strong); stroke-width:.8; }
.he-balc{ fill: none; stroke: var(--c-graphite); stroke-width:.9; }
.he-rail line{ stroke: var(--c-graphite); stroke-width:.7; }
.he-fascia{ fill: var(--c-forest-dark); }
.he-brand{ font-family: var(--font-sans); font-size: 10px; font-weight:700; letter-spacing:.36em; fill: var(--c-bg); }
.he-column{ fill: var(--c-bg-alt); stroke: var(--c-ink); stroke-width:1; }
.he-glass{ fill: rgba(30,58,43,.10); stroke: var(--c-line-strong); stroke-width:.8; }
.he-hit{ fill: transparent; }
.he-band{ fill: transparent; transition: fill .45s ease; }
.he-leader{ stroke: var(--c-champagne-dark); stroke-width:1; }
.he-leader-muted{ stroke: var(--c-stone-light); }
.he-lvl-key{ font-family: var(--font-sans); font-size: 10px; font-weight:700; letter-spacing:.2em; fill: var(--c-graphite); transition: fill .3s ease; }
.he-lvl-m2{ font-family: var(--font-serif); font-size: 19px; font-weight:600; fill: var(--c-ink); transition: fill .3s ease; }
.he-occ-key{ font-family: var(--font-sans); font-size: 10px; font-weight:700; letter-spacing:.2em; fill: var(--c-stone); }
.he-occ-label{ font-family: var(--font-serif); font-size: 13px; font-style: italic; fill: var(--c-stone); }

/* Niveles ocupados por la panadería: más tenues */
.he-occupied .he-window, .he-occupied .he-surround{ opacity:.55; }
.he-occupied .he-rail line{ opacity:.7; }

/* Niveles en renta: encendidos, seleccionado y hover */
.he-level{ cursor:pointer; outline:none; }
.he-level.is-lit .he-window{ fill: rgba(198,174,124,.30); }
.he-level.is-selected .he-band{ fill: rgba(198,174,124,.14); }
.he-level.is-selected .he-window{ fill: var(--c-champagne); }
.he-level.is-selected .he-lvl-key{ fill: var(--c-champagne-dark); }
.he-level.is-hover .he-window,
.he-level:focus-visible .he-window{ fill: var(--c-forest); }
.he-level.is-hover .he-lvl-key, .he-level.is-hover .he-lvl-m2,
.he-level:focus-visible .he-lvl-key, .he-level:focus-visible .he-lvl-m2{ fill: var(--c-forest); }
.he-level:focus-visible .he-band{ stroke: var(--c-champagne-dark); stroke-width:2; }

/* ---------------------------------------------------------------------
   5b. EL EDIFICIO, AMENIDADES Y NIVELES
   --------------------------------------------------------------------- */
.building-stats{
  display:grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 32px;
  margin-bottom: 28px;
}
.stat{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap: 8px; padding-top: 18px; border-top: 1px solid var(--c-line-strong); min-width:0; }
.stat-num{ font-family: var(--font-serif); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight:500; line-height:1; color: var(--c-ink); font-variant-numeric: lining-nums; }
.stat-unit{ font-size: 13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--c-stone); }
.stat-label{ flex-basis:100%; margin-top: 8px; font-size: 14px; color: var(--c-graphite); }

/* Amenidades: franja editorial con hairlines y un ícono de línea por amenidad */
.amenities{
  display:grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  align-items:center; gap: 16px 32px;
  padding: 22px 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.amenities-label{
  font-size: 11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color: var(--c-champagne-dark);
}
.amenities-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 32px;
}
.amenity{ display:flex; align-items:center; gap: 14px; min-width:0; }
.am-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--c-champagne);
}
.am-icon svg{ width: 20px; height: 20px; fill:none; stroke: var(--c-forest); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.am-text{ display:flex; flex-direction:column; min-width:0; }
.am-name{ font-family: var(--font-serif); font-size: 1.3rem; font-weight:600; line-height:1.15; color: var(--c-ink); }
.am-detail{ font-size: 13px; color: var(--c-stone); }

.gallery{
  display:grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
}
.gallery-item{ margin:0; position:relative; overflow:hidden; background: var(--c-bg-alt); min-width:0; }
.gallery-item img{ display:block; width:100%; height:100%; aspect-ratio: 16 / 10; object-fit:cover; max-width:100%; transition: transform 1300ms cubic-bezier(.25,.46,.30,1); }
.gallery-item figcaption{
  position:absolute; left:0; bottom:0;
  padding: 8px 14px;
  background: var(--c-bg);
  font-size: 11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: var(--c-ink);
}
@media (hover: hover){ .gallery-item:hover img{ transform: scale(1.04); } }
.gallery-note{ margin-top: 10px; font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--c-stone); }

.levels{ background: var(--c-bg-alt); }
.level-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.level-card .space-card-media{ padding: 30px 40px 16px; }
.ms-on{ fill: var(--c-forest); stroke: var(--c-forest); stroke-width:1; }
.ms-off{ fill: var(--c-white); stroke: var(--c-line-strong); stroke-width:1; }
.ms-occ{ fill: var(--c-bg-alt); stroke: var(--c-line); stroke-width:1; }
.ms-ground{ stroke: var(--c-ink); stroke-width:1.2; }
.lc-head{ display:flex; align-items:baseline; justify-content:space-between; gap: 12px; flex-wrap:wrap; }
.lc-m2{ font-family: var(--font-serif); font-size: 1.7rem; font-weight:600; color: var(--c-forest); font-variant-numeric: lining-nums; white-space: nowrap; }
.lc-tags{ list-style:none; margin: 4px 0 6px; padding:0; display:flex; flex-wrap:wrap; gap: 6px; }
.lc-tags li{ padding: 4px 10px; border: 1px solid var(--c-line-strong); border-radius: 999px; font-size: 12px; color: var(--c-graphite); }
.lc-rows{ margin: 6px 0 14px; border-top: 1px solid var(--c-line); }
.lc-rows > div{ display:flex; justify-content:space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: 14px; }
.lc-rows dt{ color: var(--c-stone); }
.lc-rows dd{ margin:0; font-weight:700; color: var(--c-ink); font-variant-numeric: tabular-nums; text-align:right; }
.lc-actions{ display:flex; flex-direction:column; gap: 8px; margin-top:auto; }
.level-card .sc-uses{ flex: 0 0 auto; margin-bottom: 0; }

/* Pestañas de nivel en el cotizador */
.level-tabs{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin-top: 10px;
  border: 1px solid var(--c-line-strong);
}
.level-tab{
  display:flex; flex-direction:column; align-items:flex-start; gap: 0;
  min-width:0; padding: 12px 14px;
  border:0; background: transparent; cursor:pointer; text-align:left;
  transition: background-color .3s ease, color .3s ease;
}
.level-tab + .level-tab{ border-left: 1px solid var(--c-line-strong); }
.lt-key{ font-size: 10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--c-stone); }
.lt-m2{ font-family: var(--font-serif); font-size: 1.35rem; font-weight:600; color: var(--c-ink); line-height:1.2; white-space: nowrap; }
.level-tab:hover{ background: var(--c-bg); }
.level-tab.is-active{ background: var(--c-forest); }
.level-tab.is-active .lt-key{ color: var(--c-champagne); }
.level-tab.is-active .lt-m2{ color: var(--c-on-dark); }
.qc-label-spaced{ margin-top: 26px; }

/* ---------------------------------------------------------------------
   6. TICKER
   --------------------------------------------------------------------- */
.ticker{
  background: var(--c-forest-dark);
  color: var(--c-on-dark-soft);
  overflow:hidden;
  border-block: 1px solid var(--c-forest-dark);
}
.ticker-track{ display:flex; width:max-content; animation: neTicker 54s linear infinite; }
.ticker-set{ display:flex; }
.ticker-set span{
  display:inline-flex; align-items:center; gap: 28px;
  padding: 16px 0 16px 28px;
  font-size: 11px; font-weight: 600; letter-spacing: .3em; white-space: nowrap;
}
.ticker-set span::after{ content:"◆"; font-size: 6px; color: var(--c-champagne); }
@keyframes neTicker{ to{ transform: translateX(-50%); } }

/* ---------------------------------------------------------------------
   7. COTIZADOR
   --------------------------------------------------------------------- */
.quote{ background: var(--c-bg); }
.quote-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.quote-controls{
  min-width:0;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding: clamp(22px, 3.5vw, 40px);
}
.qc-label{
  display:block;
  font-size: 11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color: var(--c-stone);
}
.qc-readout{
  display:flex; align-items:center; gap: 12px;
  margin-top: 10px;
}
.qc-step{
  width: 52px; height: 52px; flex-shrink:0;
  border: 1px solid var(--c-line-strong); background: var(--c-bg);
  font-size: 22px; line-height:1; cursor:pointer; color: var(--c-ink);
  border-radius: 2px;
}
.qc-step:hover{ border-color: var(--c-forest); color: var(--c-forest); }
.qc-field{
  flex:1; min-width:0;
  display:flex; align-items:baseline; justify-content:center; gap: 10px;
  border-bottom: 1px solid var(--c-line-strong);
}
.qc-field input{
  width: 100%; min-width:0; max-width: 5.2ch;
  border:0; background:transparent; padding: 0;
  font-family: var(--font-serif);
  font-size: clamp(3.4rem, 8vw, 5.2rem);
  font-weight: 500; line-height: 1.1;
  color: var(--c-ink);
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
  -moz-appearance: textfield;
}
.qc-field input::-webkit-outer-spin-button,
.qc-field input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qc-field input:focus{ outline:none; }
.qc-field:focus-within{ border-bottom-color: var(--c-forest); }
.qc-unit{ font-family: var(--font-serif); font-size: 1.8rem; color: var(--c-stone); }

.qc-range{
  --pct: 0%;
  -webkit-appearance:none; appearance:none;
  width:100%; height: 28px; margin-top: 26px;
  background: transparent; cursor:pointer;
}
.qc-range::-webkit-slider-runnable-track{
  height: 2px;
  background: linear-gradient(90deg, var(--c-forest) var(--pct), var(--c-stone-light) var(--pct));
}
.qc-range::-moz-range-track{ height:2px; background: var(--c-stone-light); }
.qc-range::-moz-range-progress{ height:2px; background: var(--c-forest); }
.qc-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width: 22px; height: 22px; margin-top: -10px;
  border-radius: 50%;
  background: var(--c-white); border: 2px solid var(--c-forest);
  box-shadow: 0 2px 8px rgba(19,42,30,.18);
}
.qc-range::-moz-range-thumb{
  width: 18px; height: 18px; border-radius:50%;
  background: var(--c-white); border: 2px solid var(--c-forest);
}
.qc-range:focus-visible{ outline: none; }
.qc-range:focus-visible::-webkit-slider-thumb{ box-shadow: 0 0 0 4px rgba(198,174,124,.45); }
.qc-scale{
  display:flex; justify-content:space-between;
  font-size: 11px; letter-spacing:.14em; color: var(--c-stone);
  margin-top: 4px;
}
.qc-error{ margin-top: 14px; font-size: 14px; color: var(--c-error); }

.qc-presets{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 24px; }
.chip{
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--c-line-strong); border-radius: 999px;
  background: transparent; cursor:pointer;
  font-size: 13px; font-weight: 600; color: var(--c-graphite);
  font-variant-numeric: tabular-nums;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.chip:hover{ border-color: var(--c-forest); color: var(--c-forest); }
.chip.is-active{ background: var(--c-forest); border-color: var(--c-forest); color: var(--c-white); }
.chip-full{ border-style: dashed; }
.chip-full.is-active{ border-style: solid; }

/* Tarjeta de resultado */
.quote-result{
  min-width:0;
  position: sticky; top: calc(var(--header-h) + 24px);
  background: var(--c-forest-dark);
  color: var(--c-on-dark);
  padding: clamp(26px, 3.5vw, 40px);
  display:flex; flex-direction:column; gap: 10px;
  transition: opacity .3s ease;
}
.quote-result.is-muted .qr-main, .quote-result.is-muted .qr-rows{ opacity:.45; }
.qr-eyebrow{ font-size: 11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color: var(--c-champagne); }
.qr-format{ font-size: 14px; color: var(--c-on-dark-soft); }
.qr-main{ display:flex; align-items:baseline; flex-wrap:wrap; gap: 4px 10px; margin-top: 10px; }
.qr-amount{
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  font-weight: 500; line-height: 1;
  color: var(--c-on-dark);
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap:anywhere;
}
.qr-per{ font-size: 15px; color: var(--c-on-dark-soft); }
.qr-tax{ font-size: 12px; letter-spacing:.14em; text-transform:uppercase; color: var(--c-champagne); }
.qr-rows{ margin: 18px 0 18px; border-top: 1px solid var(--c-on-dark-line); }
.qr-rows > div{
  display:flex; justify-content:space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--c-on-dark-line);
  font-size: 14px;
}
.qr-rows dt{ color: var(--c-on-dark-soft); }
.qr-rows dd{ margin:0; font-weight:600; font-variant-numeric: tabular-nums; text-align:right; }
.qr-note{ margin-top: 8px; font-size: 12px; line-height: 1.55; color: var(--c-on-dark-soft); }

/* ---------------------------------------------------------------------
   7b. PLANTA DEL NIVEL (SVG generado en app.js)
   El JS solo escribe dos variables en el <svg>: --pl-pct (0 a 1) y
   --pl-x (posición del borde). El lavado y el borde se mueven con CSS,
   así el movimiento es suave y se apaga con prefers-reduced-motion.
   --------------------------------------------------------------------- */
.plate{ margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--c-line); }
.plate-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap: 4px 16px;
  font-size: 11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--c-stone);
  margin-bottom: 14px;
}
#plateLegend{ color: var(--c-champagne-dark); font-variant-numeric: tabular-nums; }
.plate-plan{
  position:relative;
  cursor: ew-resize;
  touch-action: pan-y;            /* el scroll vertical sigue funcionando en celular */
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.pl-svg{ display:block; width:100%; height:auto; overflow:visible; }

.pl-base{ fill: var(--c-bg); }
.pl-hatch{ stroke: var(--c-line); stroke-width: 1; }
.pl-outline{ fill:none; stroke: var(--c-ink); stroke-width: 1.4; }
.pl-mod{ stroke: var(--c-line-strong); stroke-width: .8; stroke-dasharray: 2 4; }

.pl-wash rect{
  transform-box: fill-box; transform-origin: 0 50%;
  transform: scaleX(var(--pl-pct, 0));
  transition: transform 700ms var(--ease-plan);
}
.pl-wash-base{ fill: var(--c-white); }
.pl-wash-tint{ fill: var(--c-champagne); fill-opacity: .34; }

.pl-scale line{ stroke: var(--c-champagne-dark); stroke-width: 1; }
.pl-scale text{
  font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: .12em;
  fill: var(--c-champagne-dark); font-variant-numeric: tabular-nums;
}

.pl-edge{
  transform: translateX(var(--pl-x, 0px));
  transition: transform 700ms var(--ease-plan);
}
.pl-edge-line{ stroke: var(--c-forest); stroke-width: 1.6; }
.pl-handle{ fill: var(--c-white); stroke: var(--c-forest); stroke-width: 1.6; }
.pl-grip{ stroke: var(--c-forest); stroke-width: 1; }
.pl-edge-txt{
  font-family: var(--font-serif); font-size: 20px; font-weight: 600;
  fill: var(--c-ink); font-variant-numeric: lining-nums tabular-nums;
}
.pl-in{ font-family: var(--font-serif); font-style: italic; font-size: 16px; }
.pl-in-own{ fill: var(--c-forest); }
.pl-in-free{ fill: var(--c-stone); }
.pl-cap{ font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; letter-spacing: .24em; fill: var(--c-stone); }
/* Recepción y sala de espera: área común del nivel, fuera de la cota */
.pl-rec{ fill: var(--c-bg-alt); stroke: var(--c-champagne-dark); stroke-width: 1; stroke-dasharray: 3 3; }
.pl-rec-txt{ font-family: var(--font-sans); font-size: 9px; font-weight: 700; letter-spacing: .22em; fill: var(--c-graphite); }
.pl-rec-sub{ font-family: var(--font-serif); font-style: italic; font-size: 12px; fill: var(--c-stone); }

@media (hover: hover){
  .plate-plan:hover .pl-handle{ fill: var(--c-bg-alt); }
}
/* Mientras se arrastra, el borde sigue al dedo o al cursor sin retraso */
.plate-plan.is-dragging .pl-wash rect,
.plate-plan.is-dragging .pl-edge{ transition: none; }
.plate-plan.is-dragging .pl-handle{ fill: var(--c-champagne); }

.plate-note{ margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--c-stone); }

/* ---------------------------------------------------------------------
   8. FORMATOS
   --------------------------------------------------------------------- */
.spaces{ background: var(--c-bg-alt); }
.space-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.space-card{
  display:flex; flex-direction:column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  min-width:0;
}
.space-card-media{
  position:relative;
  padding: 28px 24px 20px;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.space-card-media svg{ display:block; width:100%; height:auto; }
.mp-off{ fill: var(--c-white); stroke: var(--c-line-strong); stroke-width: 1; }
.mp-on{ fill: var(--c-forest); }
.space-card-tag{
  position:absolute; top: 10px; left: 24px;
  font-size: 10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color: var(--c-champagne-dark);
}
.space-card-body{ display:flex; flex-direction:column; gap: 8px; padding: 24px; flex:1; }
.space-card-name{ font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; line-height:1.1; }
.sc-range{ font-size: 13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--c-stone); }
.sc-price{ font-size: 15px; color: var(--c-graphite); }
.sc-price strong{ font-family: var(--font-serif); font-size: 1.5rem; font-weight:600; color: var(--c-ink); font-variant-numeric: lining-nums; }
.sc-uses{ font-size: 14px; color: var(--c-graphite); flex:1; margin-bottom: 12px; }

/* ---------------------------------------------------------------------
   9. POR QUÉ NÚCLEO
   --------------------------------------------------------------------- */
.benefit-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 32px;
}
.benefit{ padding-top: 24px; border-top: 1px solid var(--c-line-strong); min-width:0; }
.benefit h3{ font-family: var(--font-serif); font-size: 1.55rem; font-weight:500; line-height:1.15; margin-bottom: 12px; }
.benefit p{ font-size: 15px; }

/* ---------------------------------------------------------------------
   10. PROCESO
   --------------------------------------------------------------------- */
.process{ background: var(--c-forest-dark); color: var(--c-on-dark-soft); }
.section-head-light .section-title{ color: var(--c-on-dark); }
.section-head-light .section-lead{ color: var(--c-on-dark-soft); }
.section-head-light .eyebrow{ color: var(--c-champagne); }
.timeline{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--c-on-dark-line);
}
.timeline-step{
  padding: 28px 24px 32px 0;
  min-width:0;
}
.timeline-step + .timeline-step{ padding-left: 24px; border-left: 1px solid var(--c-on-dark-line); }
.ts-num{
  display:block;
  font-family: var(--font-serif); font-size: 2.6rem; line-height:1;
  color: var(--c-champagne);
  margin-bottom: 18px;
}
.ts-title{ font-size: 13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: var(--c-on-dark); margin-bottom: 10px; }
.ts-desc{ font-size: 14.5px; line-height:1.6; }
/* El riel y los puntos solo existen en la versión vertical de celular */
.timeline-wrap{ position:relative; }
.timeline-rail{ display:none; }
.ts-dot{ display:none; }

/* --- Celular: línea de tiempo vertical que se llena al hacer scroll -------
   Misma lógica que Monte Líbano 255: los pasos se vuelven entradas
   compactas colgadas de un riel; el trazo champagne avanza con el scroll y
   cada punto se enciende al alcanzarlo (app.js → actualizarLineaProceso). */
@media (max-width: 760px){
  .timeline-wrap{ padding-left: 30px; }
  .timeline{ display:block; border-top: 0; }
  .timeline-rail{
    display:block; position:absolute; left:5px; top:7px; bottom:7px; width:1px;
    background: var(--c-on-dark-line);
  }
  .timeline-rail-fill{
    position:absolute; left:0; top:0; width:1px; height:0;
    background: var(--c-champagne);
    transition: height 140ms linear;
  }
  .timeline-step, .timeline-step + .timeline-step{
    position:relative;
    padding: 0 0 28px; border:0;
    display:grid; grid-template-columns: 28px minmax(0, 1fr); align-items:baseline;
    column-gap: 12px; row-gap: 6px;
  }
  .timeline-step:last-child{ padding-bottom: 0; }
  .ts-dot{
    display:block; position:absolute; left:-30px; top:6px;
    width:11px; height:11px; border-radius:50%;
    background: var(--c-forest-dark); border:1px solid var(--c-on-dark-dot);
    transition: background-color .32s ease, border-color .32s ease, transform .32s ease;
  }
  .ts-num{
    margin:0; font-family: var(--font-sans); font-size: 13px; font-weight:700; letter-spacing:.14em;
    color: var(--c-on-dark-dim);
    transition: color .32s ease;
  }
  .ts-title{ grid-column: 2; margin:0; font-size: 14.5px; letter-spacing:.1em; color: var(--c-on-dark-dim); transition: color .32s ease; }
  .ts-desc{ grid-column: 2; font-size: 13.5px; line-height:1.5; color: var(--c-on-dark-dim); transition: color .32s ease; }

  /* Paso alcanzado por el trazo */
  .timeline-step.is-reached .ts-dot{ background: var(--c-champagne); border-color: var(--c-champagne); transform: scale(1.12); }
  .timeline-step.is-reached .ts-num{ color: var(--c-champagne); }
  .timeline-step.is-reached .ts-title{ color: var(--c-on-dark); }
  .timeline-step.is-reached .ts-desc{ color: var(--c-on-dark-soft); }
}

/* ---------------------------------------------------------------------
   11. UBICACIÓN
   --------------------------------------------------------------------- */
.location-grid{
  display:grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items:center;
}
.location-copy{ min-width:0; }
.location-address{
  display:flex; flex-direction:column; gap: 4px;
  margin-top: 28px;
  font-style: normal; font-size: 17px;
}
.location-address strong{ font-family: var(--font-serif); font-size: 1.7rem; font-weight:500; color: var(--c-ink); }
.location-ctas{ display:flex; flex-wrap:wrap; gap: 12px; margin-top: 32px; }
.location-visual{ min-width:0; border: 1px solid var(--c-line); background: var(--c-white); padding: 12px; }
.map-graphic{ display:block; width:100%; height:auto; }
.mg-bg{ fill: var(--c-bg); }
.mg-grid line{ stroke: var(--c-line); stroke-width:1; }
.mg-avenue{ fill:none; stroke: var(--c-stone-light); stroke-width: 22; stroke-linecap: butt; }
.mg-avenue-label{ font-family: var(--font-sans); font-size: 10px; font-weight:700; letter-spacing:.3em; fill: var(--c-stone); }
.mg-pin-halo{ fill: rgba(30,58,43,.12); stroke: var(--c-forest); stroke-width:1; }
.mg-pin-dot{ fill: var(--c-forest); }
.mg-pin-label{ font-family: var(--font-sans); font-size: 10.5px; font-weight:700; letter-spacing:.24em; fill: var(--c-forest); }
.mg-north{ font-family: var(--font-sans); font-size: 11px; font-weight:700; fill: var(--c-stone); }
.map-caption{ margin-top: 8px; font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--c-stone); }

/* ---------------------------------------------------------------------
   12. CTA FINAL Y FOOTER
   --------------------------------------------------------------------- */
.final-cta{ background: var(--c-forest); color: var(--c-on-dark); padding-block: clamp(56px, 8vw, 96px) !important; }
.final-cta-inner{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap: 32px; }
.final-title{
  font-family: var(--font-serif); font-weight:500;
  font-size: clamp(2rem, 4vw, 3rem); line-height:1.08;
  color: var(--c-on-dark);
  max-width: 18ch;
}
.final-ctas{ display:flex; flex-wrap:wrap; gap: 12px; }

.site-footer{
  background: var(--c-forest-dark);
  color: var(--c-on-dark-soft);
  padding-block: 64px calc(32px + env(safe-area-inset-bottom, 0px));
  font-size: 14px;
}
.footer-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.footer-name{ margin-top: 16px; font-family: var(--font-serif); font-size: 1.5rem; color: var(--c-on-dark); }
.footer-claim{ margin-top: 4px; }
.footer-col{ display:flex; flex-direction:column; align-items:flex-start; gap: 10px; min-width:0; }
.footer-head{ font-size: 11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color: var(--c-champagne); margin-bottom: 4px; }
.footer-col a, .footer-col button{
  background:none; border:0; padding:0; cursor:pointer; text-align:left;
  color: var(--c-on-dark-soft); text-decoration:none; font-size: 14px;
}
.footer-col a:hover, .footer-col button:hover{ color: var(--c-on-dark); }
.footer-col span{ overflow-wrap:anywhere; }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap: 8px 24px;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--c-on-dark-line);
  font-size: 12px; letter-spacing:.06em;
}

/* ---------------------------------------------------------------------
   13. BARRA FIJA MÓVIL
   --------------------------------------------------------------------- */
.sticky-cta{
  display:none;
  position: fixed; left:0; right:0; bottom:0; z-index: 400;
  align-items:center; justify-content:space-between; gap: 16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--c-bg);
  border-top: 1px solid var(--c-line-strong);
  box-shadow: 0 -10px 30px rgba(19,42,30,.10);
  transform: translateY(110%);
  transition: transform .45s cubic-bezier(.16,.84,.44,1);
}
.sticky-cta.is-visible{ transform: translateY(0); }
.sticky-cta-info{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.sticky-cta-info strong{ font-family: var(--font-serif); font-size: 1.35rem; font-weight:600; color: var(--c-ink); }
.sticky-cta-info span{ font-size: 13px; color: var(--c-graphite); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   14. MODALES Y FORMULARIOS
   --------------------------------------------------------------------- */
.overlay{
  position: fixed; inset: 0; z-index: 1000;
  display:flex; align-items:center; justify-content:center;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.overlay-backdrop{
  position:absolute; inset:0;
  background: rgba(19,42,30,.55);
  opacity:0; transition: opacity .4s ease;
}
.overlay.is-open .overlay-backdrop{ opacity:1; }
.overlay-panel{
  position:relative;
  width: 100%; max-width: 680px;
  max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--c-bg);
  padding: clamp(28px, 4vw, 48px);
  opacity:0; transform: translateY(18px);
  box-shadow: var(--shadow-lift);
}
.overlay-panel-card{ max-width: 480px; }
.overlay.is-open .overlay-panel{ opacity:1; transform:none; }
.overlay-close{
  position:absolute; top: 12px; right: 12px;
  width: 44px; height: 44px;
  border:0; background:none; cursor:pointer;
  font-size: 28px; line-height:1; color: var(--c-stone);
}
.overlay-close:hover{ color: var(--c-ink); }
.overlay-title{
  font-family: var(--font-serif); font-weight:500;
  font-size: clamp(1.9rem, 4vw, 2.5rem); line-height:1.08;
  padding-right: 32px;
}
.overlay-sub{ margin-top: 10px; font-size: 15px; color: var(--c-graphite); }

.progress{
  list-style:none; margin: 22px 0 8px; padding:0;
  display:flex; gap: 6px;
}
.progress li{
  flex:1; min-width:0;
  padding-top: 10px;
  border-top: 2px solid var(--c-stone-light);
  font-size: 10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color: var(--c-stone);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.progress li.is-active{ border-top-color: var(--c-forest); color: var(--c-forest); }
.progress li.is-done{ border-top-color: var(--c-champagne-dark); color: var(--c-champagne-dark); }

.form{ display:flex; flex-direction:column; gap: 18px; margin-top: 18px; }
.form-block{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap: 16px; min-width:0; }
/* La línea divisoria va como sombra: un <legend> corta los bordes del fieldset */
.form-block + .form-block{ box-shadow: inset 0 1px 0 var(--c-line); }
.form-block + .form-block legend{ padding-top: 22px; }
.form-block legend{
  padding:0; margin-bottom: 14px;
  font-family: var(--font-serif); font-size: 1.35rem; font-weight:600; color: var(--c-ink);
}
.field-row{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field{ display:flex; flex-direction:column; gap: 6px; min-width:0; }
.field label, .field-label{
  font-size: 11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--c-graphite);
}
.field input:not([type=radio]):not([type=checkbox]), .field select, .field textarea{
  width:100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: 2px;
  background: var(--c-white);
  color: var(--c-ink);
  font: 16px/1.4 var(--font-sans);
}
.field textarea{ resize: vertical; min-height: 88px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--c-forest); box-shadow: 0 0 0 3px rgba(30,58,43,.12); }
.field-hint{ font-size: 12.5px; color: var(--c-stone); }
.field-error{ font-size: 12.5px; color: var(--c-error); min-height: 0; }
.field-error:empty{ display:none; }
.field.has-error input:not([type=radio]):not([type=checkbox]), .field.has-error select{ border-color: var(--c-error); }
.field-amount{ justify-content:flex-start; }
.amount-live{
  font-family: var(--font-serif); font-size: 2rem; font-weight:500; line-height: 1.2;
  color: var(--c-forest); font-variant-numeric: lining-nums tabular-nums;
}

.choices{ display:flex; flex-wrap:wrap; gap: 8px; }
.choice{ position:relative; cursor:pointer; }
.choice input{ position:absolute; opacity:0; width:1px; height:1px; }
.choice span{
  display:inline-flex; align-items:center; min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--c-line-strong); border-radius: 999px;
  background: var(--c-white);
  font-size: 14px; color: var(--c-graphite);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.choice input:checked + span{ background: var(--c-forest); border-color: var(--c-forest); color: var(--c-white); }
.choice input:focus-visible + span{ outline: 2px solid var(--c-champagne-dark); outline-offset: 2px; }
.field.has-error .choice span{ border-color: var(--c-error); }

.field-check{ padding-top: 6px; }
.check{ display:flex; align-items:flex-start; gap: 12px; font-size: 14px; text-transform:none; letter-spacing:0; font-weight:400; cursor:pointer; }
.field .check{ font-size: 14px; letter-spacing: 0; text-transform:none; font-weight:400; color: var(--c-graphite); }
.check-inline{ margin-top: 8px; }
.check input{ width: 20px; height: 20px; margin-top: 1px; accent-color: var(--c-forest); flex-shrink:0; }

.form-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap: 12px; margin-top: 12px; }

.review{ margin-top: 18px; }
.review-head{
  margin: 22px 0 8px;
  font-size: 11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: var(--c-champagne-dark);
}
.review-list, .confirm-grid, .contact-rows{ margin:0; }
.review-list > div, .confirm-grid > div, .contact-rows > div{
  display:flex; justify-content:space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--c-line);
  font-size: 15px;
}
.review-list dt, .confirm-grid dt, .contact-rows dt{ color: var(--c-stone); flex-shrink:0; }
.review-list dd, .confirm-grid dd, .contact-rows dd{ margin:0; text-align:right; color: var(--c-ink); font-weight:600; min-width:0; overflow-wrap:anywhere; }

.confirm{ margin-top: 24px; }
.confirm-eyebrow{ font-size: 11px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color: var(--c-forest); }
.confirm-folio{
  margin: 6px 0 18px;
  font-family: var(--font-serif); font-size: clamp(2.2rem, 6vw, 3rem); font-weight:500; color: var(--c-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.confirm-msg{ margin-top: 18px; font-size: 15px; }
.confirm-ask{ margin-top: 18px; font-weight: 600; color: var(--c-ink); }

.contact-rows{ margin-top: 20px; }
.contact-rows dd{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap: 10px; }
.copy{
  padding: 4px 10px; border:1px solid var(--c-line-strong); border-radius: 999px;
  background: transparent; cursor:pointer;
  font-size: 11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--c-graphite);
}
.copy:hover{ border-color: var(--c-forest); color: var(--c-forest); }

.legal-body{ margin-top: 18px; font-size: 15px; max-width: 62ch; }
.legal-body h3{ font-size: 12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin: 22px 0 6px; color: var(--c-ink); }
.legal-body p + p{ margin-top: 10px; }

/* ---------------------------------------------------------------------
   15. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1080px){
  .level-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .building-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
  .space-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .timeline{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline-step:nth-child(4){ padding-left:0; border-left:0; }
  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px){
  :root{ --header-h: 64px; }
  .nav-toggle{ display:block; }
  .main-nav{
    position: fixed; left:0; right:0; bottom:0;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    flex-direction:column; align-items:stretch; gap:0;
    padding: 16px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
    background: var(--c-bg);
    border-top: 1px solid var(--c-line);
    overflow-y:auto;
    visibility:hidden; opacity:0; transform: translateY(-8px);
    transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
  }
  .main-nav.is-open{ visibility:visible; opacity:1; transform:none; transition: opacity .35s ease, transform .35s ease; }
  .main-nav > a, .main-nav > .nav-link{
    padding: 18px 0; border-bottom: 1px solid var(--c-line);
    font-size: 13px; text-align:left; color: var(--c-ink);
  }
  .main-nav > a::after, .main-nav > .nav-link::after{ display:none; }
  .main-nav > .btn{ margin-top: 24px; }

  .hero-inner{ grid-template-columns: minmax(0, 1fr); }
  .hero-visual{ order: 2; }
  .quote-grid{ grid-template-columns: minmax(0, 1fr); }
  .quote-result{ position: static; }
  .location-grid{ grid-template-columns: minmax(0, 1fr); }
  .amenities{ grid-template-columns: minmax(0, 1fr); }
  .sticky-cta{ display:flex; }
  .site-footer{ padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px){
  .space-grid, .benefit-grid, .level-grid{ grid-template-columns: minmax(0, 1fr); }
  .gallery{ grid-template-columns: minmax(0, 1fr); }
  .level-tab{ padding: 10px; }
  .field-row{ grid-template-columns: minmax(0, 1fr); }
  .footer-grid{ grid-template-columns: minmax(0, 1fr); }
  .hero-price{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-item{ padding-right: 16px; }
  .hp-item + .hp-item{ padding-left: 16px; }
  .hp-item:nth-child(3){ grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); }
  .hero-ctas .btn, .location-ctas .btn, .final-ctas .btn{ flex: 1 1 100%; }
  .form-actions .btn{ flex: 1 1 100%; }
  .overlay{ padding: 0; align-items:flex-end; }
  .overlay-panel{ max-height: calc(100% - 24px - env(safe-area-inset-top, 0px)); padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .qc-step{ width: 46px; height: 46px; }
  .amenities-list{ flex-direction: column; gap: 14px; }

  /* Planta: el SVG se reduce en celular, así que sus textos crecen en
     unidades del dibujo para seguir siendo legibles (~10–14px reales). */
  .pl-scale text{ font-size: 15px; }
  .pl-edge-txt{ font-size: 27px; }
  .pl-in{ font-size: 21px; }
  .pl-cap{ font-size: 13px; letter-spacing: .18em; }
  .pl-rec-txt{ font-size: 12px; letter-spacing: .14em; }
  .pl-rec-sub{ font-size: 15px; }
  .pl-handle{ stroke-width: 2.2; }
  .pl-edge-line{ stroke-width: 2.2; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ticker-track{ animation:none; flex-wrap:wrap; width:auto; }
  .ticker-set + .ticker-set{ display:none; }
  .ticker-set{ flex-wrap:wrap; }
  .pl-wash rect, .pl-edge{ transition: none; }
  .timeline-rail-fill, .ts-dot, .ts-num, .ts-title, .ts-desc{ transition: none; }
}