/* ============================================================
   KW URUGUAY — Sistema visual
   Paleta conservada del proyecto original; profundidad, movimiento
   y escala completamente nuevos.
   ============================================================ */

:root {
  /* --- Paleta (conservada) --- */
  --navy-deep:  #1E2761;
  --navy:       #2A367C;
  --navy-soft:  #4352A5;
  --navy-ink:   #141B45;
  --amber:      #C9A961;
  --amber-light:#E4CD8E;
  --amber-tint: #FAEEDA;
  --amber-dark: #854F0B;
  --cream:      #F7F4EE;
  --card:       #FFFFFF;
  --bg-subtle:  #F7F8FB;
  --ink:        #1A1A1A;
  --ink-soft:   #6E7080;
  --ink-faint:  #A9A499;
  --line:       #E4E6ED;
  --ok:         #1E7A34;
  --ok-light:   #43C46B;   /* mismo verde, subido en luminosidad para fondos oscuros */
  --ok-bg:      #EAF4EC;
  --danger:     #B3261E;
  --danger-bg:  #FBE7E5;

  /* --- Profundidad: escala de elevación --- */
  --lift-1: 0 1px 2px rgba(20,27,69,.06), 0 2px 8px rgba(20,27,69,.04);
  --lift-2: 0 2px 4px rgba(20,27,69,.07), 0 8px 24px rgba(20,27,69,.08);
  --lift-3: 0 8px 16px rgba(20,27,69,.10), 0 24px 56px rgba(20,27,69,.14);
  --lift-4: 0 20px 40px rgba(20,27,69,.16), 0 48px 100px rgba(20,27,69,.22);

  /* --- Movimiento --- */
  --ease:      cubic-bezier(.22,.9,.3,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-fast:  .18s;
  --dur:       .34s;
  --dur-slow:  .7s;

  /* --- Métrica --- */
  --shell:     1280px;
  --gut:       clamp(20px, 4vw, 40px);
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--navy-deep);
  margin: 0;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

/* Superficies del navegador tematizadas */
::selection { background: var(--amber); color: var(--navy-deep); }
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}
* { scrollbar-width: thin; scrollbar-color: var(--amber) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--navy-soft) 40%, transparent);
  border-radius: 6px; border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--amber); background-clip: content-box; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   TIPOGRAFÍA DE ESCALA
   ============================================================ */
.display   { font-size: clamp(38px, 6.5vw, 84px); line-height: .98; letter-spacing: -.035em; }
.display-2 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.03; letter-spacing: -.03em; }
.h-sec     { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -.025em; }
.lede      { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65; color: var(--ink-soft); max-width: 62ch; }

.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber-dark);
}
.eyebrow--light { color: var(--amber-light); }
.eyebrow--lg { font-size: 13px; }

/* Números grandes — el dato manda */
.figure {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--navy-deep);
}

/* ============================================================
   FONDO 3D — capas con parallax y desvanecido por scroll
   ============================================================ */
.depth-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--cream);
  pointer-events: none;
}

/* Capa de imagen: renders inmobiliarios fundidos con el fondo */
.depth-layer {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 1.1s var(--ease);
  /* Fundido a los bordes: la foto no tiene borde duro, se disuelve */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 35%, #000 22%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 50% 35%, #000 22%, transparent 72%);
}
.depth-layer.is-active { opacity: var(--layer-opacity, .3); }

/* Velo que garantiza legibilidad del texto sobre cualquier foto */
.depth-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 60% at 78% 8%, rgba(201,169,97,.14), transparent 62%),
    linear-gradient(180deg, rgba(247,244,238,.55) 0%, rgba(247,244,238,.86) 55%, var(--cream) 100%);
}

/* Malla sutil que da sensación de plano y profundidad */
.depth-grid {
  position: absolute; inset: -20%;
  background-image:
    linear-gradient(rgba(30,39,97,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,39,97,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(700px) rotateX(58deg) translateY(28%) scale(2.1);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, transparent 88%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 42%, transparent 88%);
  opacity: .8;
}

/* Orbes de luz que flotan lentamente: profundidad sin WebGL */
.depth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  will-change: transform;
}
.depth-orb--a { width: 46vw; height: 46vw; left: -12vw; top: -10vw;
  background: radial-gradient(circle, rgba(67,82,165,.5), transparent 68%);
  animation: orbFloat 26s var(--ease) infinite alternate; }
.depth-orb--b { width: 38vw; height: 38vw; right: -8vw; top: 22vh;
  background: radial-gradient(circle, rgba(201,169,97,.42), transparent 68%);
  animation: orbFloat 34s var(--ease) infinite alternate-reverse; }

@keyframes orbFloat {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(6vw, 8vh, 0) scale(1.16); }
}

/* Variante oscura del escenario (hero, paneles inmersivos) */
.depth-stage--dark { background: var(--navy-ink); }
.depth-stage--dark .depth-veil {
  background:
    radial-gradient(80% 55% at 76% 6%, rgba(201,169,97,.2), transparent 60%),
    linear-gradient(180deg, rgba(20,27,69,.42) 0%, rgba(20,27,69,.78) 60%, var(--navy-ink) 100%);
}

/* ------------------------------------------------------------
   ESCENARIO DE VIDRIO AZUL
   Catálogo, mapa, ficha de unidad, favoritos, legajo y calculadora.
   La foto del fondo se ve más y encima va un vidrio esmerilado en
   el navy del sitio; las tarjetas dejan pasar algo de ese fondo.
   ------------------------------------------------------------ */
.stage-glass .depth-stage { background: var(--navy-ink); }

/* Más transparencia: el render se nota debajo del vidrio */
.stage-glass .depth-layer.is-active { opacity: .85; }

.stage-glass .depth-veil {
  /* Desenfoque corto: la foto se sigue reconociendo, el texto se sigue leyendo */
  /* Original .46/.56/.66 → .40/.50/.60 (primer pedido) → 20% más
     transparente de nuevo → .32/.40/.48 */
  background:
    radial-gradient(72% 48% at 78% 4%, rgba(201,169,97,.14), transparent 60%),
    linear-gradient(180deg, rgba(20,27,69,.32) 0%, rgba(20,27,69,.40) 55%, rgba(20,27,69,.48) 100%);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
          backdrop-filter: blur(7px) saturate(1.15);
}
.stage-glass .depth-grid { opacity: .16; }

/* Con la foto más nítida, el texto que apoya directo sobre ella lleva una
   sombra corta: no se ve como efecto, pero lo despega de las zonas claras. */
.stage-glass .cat-side-inner,
.stage-glass .section-head h1,
.stage-glass .section-head .lede,
.stage-glass .unit-crumbs { text-shadow: 0 1px 12px rgba(20,27,69,.7); }
.stage-glass .depth-orb  { opacity: .35; }

/* Superficies: vidrio claro apoyado sobre el azul */
.stage-glass .card,
.stage-glass .panel {
  background: rgba(255,255,255,.74);
  border-color: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
          backdrop-filter: blur(16px) saturate(1.2);
}
.stage-glass .card--hover:hover { background: rgba(255,255,255,.86); }

.stage-glass .amenity,
.stage-glass .empty,
.stage-glass .tl-card { background: rgba(255,255,255,.7); }

.stage-glass .table-wrap { background: rgba(255,255,255,.62); }
.stage-glass table.data th { background: rgba(247,248,251,.75); }

/* Los campos dentro de una tarjeta de vidrio necesitan más cuerpo */
.stage-glass .field input,
.stage-glass .field select,
.stage-glass .field textarea { background: rgba(255,255,255,.85); }

/* El panel inmersivo mantiene su peso: es el cierre de cada pantalla */
.stage-glass .panel-deep { background: linear-gradient(155deg, rgba(20,27,69,.94) 0%, rgba(30,39,97,.92) 52%, rgba(42,54,124,.9) 100%); }

/* ------------------------------------------------------------
   TIPOGRAFÍA SOBRE ESCENARIO OSCURO
   Tanto el escenario oscuro (Inicio, ficha de desarrollo) como el
   de vidrio azul (el resto) dejan un fondo navy, así que el texto que
   apoya directo sobre él —títulos, bajadas, viñetas, cifras— tiene
   que ser claro. Las superficies claras (tarjetas, tablas, avisos)
   recuperan su tipografía original en el bloque siguiente.
   ------------------------------------------------------------ */
.on-dark .section h1,
.on-dark .section h2,
.on-dark .section h3,
.on-dark .section h4       { color: #fff; }
.on-dark .section p,
.on-dark .section li,
.on-dark .section .lede,
.on-dark .section .text-soft { color: rgba(255,255,255,.76); }
.on-dark .section .eyebrow  { color: var(--amber-light); }
.on-dark .section .stat b   { color: #fff; border-bottom-color: rgba(201,169,97,.55); }
.on-dark .section .stat span{ color: rgba(255,255,255,.62); }
.on-dark .section .btn--ghost {
  --btn-fg: #fff;
  border-color: rgba(255,255,255,.28);
}
.on-dark .section .btn--ghost:hover {
  background: rgba(255,255,255,.14);
  border-color: var(--amber);
}

/* Superficies claras: vuelven a la tipografía oscura */
.on-dark .card,
.on-dark .panel,
.on-dark .amenity,
.on-dark .tl-card,
.on-dark .notice,
.on-dark .empty,
.on-dark .map-panel,
.on-dark .table-wrap        { color: var(--ink); }
.on-dark .card h1, .on-dark .card h2,
.on-dark .card h3, .on-dark .card h4,
.on-dark .amenity h3        { color: var(--navy-deep); }
.on-dark .card p,
.on-dark .card li           { color: var(--ink); }
.on-dark .card .lede,
.on-dark .card .text-soft   { color: var(--ink-soft); }
.on-dark .card .eyebrow     { color: var(--amber-dark); }
.on-dark .card .stat b      { color: var(--navy-deep); border-bottom-color: var(--amber); }
.on-dark .card .stat span   { color: var(--ink-soft); }
.on-dark .card .btn--ghost  { --btn-fg: var(--navy-deep); border-color: var(--line); }
.on-dark .card .btn--ghost:hover { background: var(--bg-subtle); border-color: var(--navy-deep); }

/* .panel es la misma idea que .card (superficie clara sobre el fondo de
   vidrio oscuro) — Mi Cartera y la ficha de inversor la usan así */
.on-dark .panel h1, .on-dark .panel h2,
.on-dark .panel h3, .on-dark .panel h4 { color: var(--navy-deep); }
.on-dark .panel p,
.on-dark .panel li          { color: var(--ink); }
.on-dark .panel .lede,
.on-dark .panel .text-soft  { color: var(--ink-soft); }
.on-dark .panel .eyebrow    { color: var(--amber-dark); }
.on-dark .panel .btn--ghost { --btn-fg: var(--navy-deep); border-color: var(--line); }
.on-dark .panel .btn--ghost:hover { background: var(--bg-subtle); border-color: var(--navy-deep); }

/* Una tabla de datos también es una superficie clara, incluso cuando no
   está adentro de un .card/.panel (ej. Mi Cartera) */
.on-dark .table-wrap .btn--ghost { --btn-fg: var(--navy-deep); border-color: var(--line); }
.on-dark .table-wrap .btn--ghost:hover { background: var(--bg-subtle); border-color: var(--navy-deep); }

/* El estado vacío y el menú del catálogo también son superficies claras */
.on-dark .empty h1, .on-dark .empty h2,
.on-dark .empty h3, .on-dark .empty h4 { color: var(--navy-deep); }
.on-dark .empty p           { color: var(--ink-soft); }
.on-dark .empty .btn--ghost { --btn-fg: var(--navy-deep); border-color: var(--line); }
.on-dark .empty .btn--ghost:hover { background: var(--bg-subtle); border-color: var(--navy-deep); }

.on-dark .cat-side-inner    { color: var(--ink); }
.on-dark .cat-side-inner p  { color: var(--ink-soft); }
.on-dark .cat-side-inner li { color: inherit; }

/* Migas de la ficha de unidad: apoyan sobre el fondo, no sobre tarjeta */
.on-dark .unit-crumbs      { color: rgba(255,255,255,.5); }
.on-dark .unit-crumbs a    { color: rgba(255,255,255,.72); }
.on-dark .unit-crumbs a:hover { color: #fff; }

/* El panel inmersivo ya es oscuro: mantiene su propia escala clara */
.on-dark .panel-deep p      { color: rgba(255,255,255,.76); }
.on-dark .panel-deep .stat b{ color: #fff; border-bottom-color: rgba(201,169,97,.55); }

/* Un velo suave detrás de los bloques de texto largos apoya la lectura
   cuando la capa de foto del fondo aclara la zona. */
.on-dark .section .lede,
.on-dark .section > .shell > .split-media p {
  text-shadow: 0 1px 12px rgba(20,27,69,.55);
}

/* ============================================================
   REVELADO POR SCROLL

   El estado oculto SOLO se aplica cuando el JS confirmó que puede
   revelarlo (clase .js-reveal en <html>). Si el JS falla, no carga
   o el navegador no soporta IntersectionObserver, el contenido se
   ve normal: nunca queda una página en blanco.
   ============================================================ */
.js-reveal .reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* Revelado con rotación 3D — para tarjetas destacadas */
.js-reveal .reveal-3d {
  opacity: 0;
  transform: perspective(1200px) rotateX(12deg) translate3d(0, 44px, -60px);
  transition: opacity .95s var(--ease-out), transform .95s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js-reveal .reveal-3d.in { opacity: 1; transform: none; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  --btn-bg: var(--navy-deep);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur-fast);
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

.btn--amber  { --btn-bg: var(--amber); --btn-fg: var(--navy-deep); font-weight: 700; }
.btn--amber:hover { background: var(--amber-light); }
.btn--ghost  { --btn-bg: transparent; --btn-fg: var(--navy-deep); border-color: var(--line); }
.btn--ghost:hover { background: var(--bg-subtle); border-color: var(--navy-deep); }
.btn--on-dark { --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff; border-color: rgba(255,255,255,.28); }
.btn--on-dark:hover { background: rgba(255,255,255,.16); border-color: var(--amber); }
.btn--sm { padding: 9px 16px; font-size: 12.5px; }
.btn--block { width: 100%; }

/* Barrido de luz en el botón principal */
.btn--amber::after {
  content: ''; position: absolute; inset: 0 auto 0 -60%;
  width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); transition: left .55s var(--ease);
}
.btn--amber:hover::after { left: 120%; }

/* ============================================================
   TARJETAS
   ============================================================ */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}
.card--hover:hover { transform: translateY(-5px); box-shadow: var(--lift-3); border-color: var(--amber); }

/* Tarjeta con inclinación 3D según el mouse (JS añade --mx/--my) */
.tilt {
  transform-style: preserve-3d;
  transform:
    perspective(900px)
    rotateX(calc(var(--my, 0) * -5deg))
    rotateY(calc(var(--mx, 0) * 6deg))
    translateZ(0);
  transition: transform var(--dur) var(--ease);
}
.tilt > * { transform: translateZ(24px); }

/* Panel oscuro inmersivo — el "momento" de cada pantalla */
.panel-deep {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 60px);
  color: #fff;
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy-ink) 0%, var(--navy-deep) 52%, var(--navy) 100%);
  box-shadow: var(--lift-4);
}
.panel-deep::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 84% 6%, rgba(201,169,97,.22), transparent 62%);
}
.panel-deep::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(112deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px);
}
.panel-deep > * { position: relative; z-index: 1; }
.panel-deep h2, .panel-deep h3 { color: #fff; }

/* ============================================================
   INSIGNIAS Y CHIPS
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--line); background: var(--card); color: var(--navy-deep);
}
.badge--ok     { background: var(--ok-bg);     color: var(--ok);        border-color: transparent; }
.badge--amber  { background: var(--amber-tint);color: var(--amber-dark);border-color: rgba(201,169,97,.4); }
.badge--danger { background: var(--danger-bg); color: var(--danger);    border-color: transparent; }
.badge--dark   { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============================================================
   MÉTRICAS
   ============================================================ */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-inline: auto; }

/* Cifra sobre una línea de libro contable: el número manda, la regla lo apoya.
   (Antes había un borde ámbar lateral; se reemplazó por esta regla inferior,
   más propia de un escritorio de inversión y menos genérica.) */
.stat { padding: 4px 2px 0; text-align: center; }
.stat b {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 26px; line-height: 1;
  color: var(--navy-deep);
  font-variant-numeric: tabular-nums;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--amber);
}
.stat span { display: block; margin-top: 9px; font-size: 11px; color: var(--ink-soft); line-height: 1.4; }
.panel-deep .stat b { color: #fff; border-bottom-color: rgba(201,169,97,.55); }
.panel-deep .stat span { color: rgba(255,255,255,.6); }

/* ============================================================
   COVERFLOW — carril 3D con arrastre
   (adaptado del componente Coverflow Carousel de 21st.dev)

   El carril además gira solo: ver KW.Coverflow en app.js.
   Mientras se mueve, las transiciones CSS se apagan (.is-live) y
   el movimiento lo maneja el JS; así no hay arrastre ni "smear".
   ============================================================ */
.coverflow {
  position: relative;
  width: 100%;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  padding: 30px 0 16px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.coverflow.is-dragging { cursor: grabbing; }

.coverflow-track {
  position: relative;
  width: 100%;
  height: var(--cf-h, 320px);
  transform-style: preserve-3d;
}

.coverflow-item {
  position: absolute;
  top: 0; left: 50%;
  width: var(--cf-w, 260px);
  height: var(--cf-h, 320px);
  margin-left: calc(var(--cf-w, 260px) / -2);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: var(--lift-3);
  transform-style: preserve-3d;
  transition: transform .55s var(--ease), opacity .55s var(--ease), filter .55s var(--ease);
  will-change: transform, opacity;
}
.coverflow.is-dragging .coverflow-item,
.coverflow.is-live .coverflow-item { transition: none; }

.coverflow-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* Las tarjetas laterales se apagan y retroceden */
.coverflow-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,27,69,.1) 0%, rgba(20,27,69,.82) 100%);
  opacity: var(--cf-veil, 1);
  transition: opacity .55s var(--ease);
}
.coverflow-item.is-center::after { --cf-veil: .82; }

/* La tarjeta elegida (calculadora) queda marcada aunque el carril siga girando */
.coverflow-item.is-selected { box-shadow: 0 0 0 2px var(--amber), var(--lift-3); }

/* Señal de que el carril está detenido para elegir */
.coverflow.is-paused .coverflow-item.is-center { box-shadow: 0 0 0 2px var(--amber-light), var(--lift-4); }

.coverflow-cap {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 16px 18px; color: #fff;
}
.coverflow-cap .code {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .1em; color: var(--amber-light);
}
.coverflow-cap .name { font-family: 'Fraunces', serif; font-size: 16px; margin: 4px 0 3px; line-height: 1.2; }
.coverflow-cap .meta { font-size: 11.5px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }

.coverflow-nav {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 14px;
}
.cf-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--navy-deep);
  display: grid; place-items: center;
  transition: all var(--dur) var(--ease);
}
.cf-btn:hover { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); transform: scale(1.06); }
.cf-btn svg { width: 16px; height: 16px; }

.cf-dots { display: flex; gap: 6px; align-items: center; }
.cf-dot {
  width: 7px; height: 7px; border-radius: 50%; border: 0;
  background: color-mix(in srgb, var(--navy-deep) 22%, transparent);
  padding: 0; transition: all var(--dur) var(--ease);
}
.cf-dot.is-active { background: var(--amber); width: 22px; border-radius: 4px; }

.cf-hint {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 11.5px; color: var(--ink-soft);
}
.cf-hint i { color: var(--amber-dark); font-size: 14px; }

/* ------------------------------------------------------------
   COVERFLOW VERTICAL — galería de la ficha de desarrollo.
   Mismo componente (KW.Coverflow), con data-coverflow-vertical: el
   anillo se anima en Y en vez de X. Ver Coverflow() en app.js.
   ------------------------------------------------------------ */
.coverflow--vertical {
  width: fit-content;   /* la base .coverflow trae width:100% — sin esto ocupa toda la zona ancha donde se centra, y el recuadro de foco/selección queda gigante en vez de ajustado a las fotos */
  max-width: 100%;
  height: 100%;
  padding: 16px 18px;   /* antes 26px/10px asimétrico — pensado para cuando el carril iba pegado al borde derecho */
  perspective-origin: 50% 50%;   /* antes 40% 50% — el carril ahora queda centrado, no contra un borde */
  touch-action: pan-x;
}
.coverflow--vertical .coverflow-track {
  height: 100%;
  width: var(--cf-w, 200px);
  margin-inline: auto;
}
.coverflow--vertical .coverflow-item {
  top: 50%; left: 0;
  margin-left: 0;
  margin-top: calc(var(--cf-h, 130px) / -2);
}

/* Visor grande a la izquierda + carril vertical centrado en el espacio
   libre a la derecha. Todo en proporciones (%, fr) — nada de anchos ni
   posiciones en píxeles fijos, para que la relación entre el visor, el
   carril y el borde de pantalla se mantenga igual en cualquier monitor,
   no solo en el ancho donde se probó. */
.dev-gallery-split {
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(0, 1fr);
  align-items: stretch;
}
.dev-gallery-viewer {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-deep);
  aspect-ratio: 4 / 3;
  box-shadow: var(--lift-3);
  width: 92%;         /* no ocupa toda su columna... */
  margin-left: 8%;    /* ...se corre un poco a la derecha, en proporción */
}
.dev-gallery-viewer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dev-gallery-viewer-cap {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 16px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(20,27,69,.88) 100%);
  color: #fff; font-size: 13.5px; line-height: 1.5;
}
.dev-gallery-cf-wrap {
  position: relative;
  min-width: 0;
  display: flex;
  justify-content: center;   /* centra el carril entre el visor y el borde de pantalla */
  align-items: stretch;
}
@media (max-width: 760px) {
  .dev-gallery-split { grid-template-columns: 1fr; }
  .dev-gallery-viewer { width: 100%; margin-left: 0; }
  .dev-gallery-cf-wrap { height: 130px; }
  .coverflow--vertical { padding: 0 16px; }
}

/* ------------------------------------------------------------
   FILTRO POR DESARROLLO (carril de la calculadora)
   Botones sueltos: se pueden marcar varios a la vez. Si sobran,
   la fila se desplaza y aparecen las flechas de los costados.
   ------------------------------------------------------------ */
.dev-filter {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 24px 4px;
}
.df-track {
  display: flex; gap: 8px;
  flex: 1; min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;                    /* la fila se maneja con las flechas */
  -ms-overflow-style: none;
  /* Los extremos se disuelven: se nota que hay más para el costado */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.df-track::-webkit-scrollbar { display: none; }

.df-chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-subtle);
  color: var(--ink-soft);
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.df-chip:hover { border-color: var(--amber); color: var(--navy-deep); }
.df-chip:active { transform: scale(.97); }

.df-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--ink-faint);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.df-count {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: var(--ink-faint);
  transition: color var(--dur) var(--ease);
}

.df-chip[aria-pressed="true"] {
  background: var(--navy-deep); border-color: var(--navy-deep); color: #fff;
  box-shadow: var(--lift-2);
}
.df-chip[aria-pressed="true"] .df-dot   { background: var(--amber); border-color: var(--amber); }
.df-chip[aria-pressed="true"] .df-count { color: var(--amber-light); }

/* Con algo marcado, los que quedan afuera se apagan un poco */
.dev-filter.has-selection .df-chip[aria-pressed="false"] { opacity: .62; }
.dev-filter.has-selection .df-chip[aria-pressed="false"]:hover { opacity: 1; }

.df-nav {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--navy-deep);
  display: grid; place-items: center;
  transition: all var(--dur) var(--ease);
}
.df-nav:hover:not(:disabled) { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); }
.df-nav:disabled { opacity: .3; cursor: default; }
.df-nav i { font-size: 15px; }

@media (max-width: 560px) { .dev-filter { padding-inline: 16px; } }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.field { margin-bottom: 15px; }
.field label {
  display: block; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  color: var(--ink);
  font-size: 14px;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--amber);
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(201,169,97,.16);
}
.field textarea { min-height: 90px; resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* Los <input type="file"> traen un ancho intrínseco del navegador (el del
   botón "Elegir archivos" + el nombre del archivo) y NO se encogen solos.
   Los que están sueltos dentro de un .panel —fuera de un .field, que ya
   les da width:100%— se pasaban unos píxeles del borde en pantallas
   chicas y hacían aparecer scroll horizontal en todo el panel. */
input[type="file"] { max-width: 100%; }
.field-hint { font-size: 11.5px; color: var(--ink-soft); margin-top: 5px; }
.field-error { font-size: 12px; color: var(--danger); margin-top: 5px; }

/* Filas de atributos dinámicas (amenities, stats, etc. en el admin de
   desarrollo) — sin min-width:0 un <input> no encoge por debajo de su
   ancho por defecto del navegador y la fila se sale en pantalla chica. */
.dyn-row { flex-wrap: wrap; }
.dyn-row input { min-width: 0; }

/* Deslizadores de la calculadora */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; padding: 0;
  border-radius: 3px; background: var(--line); border: 0;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy-deep); border: 3px solid var(--card);
  box-shadow: 0 2px 8px rgba(30,39,97,.35);
  transition: transform var(--dur-fast);
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.18); }
input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--navy-deep); border: 3px solid var(--card);
}
input[type=range]:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   AVISOS
   ============================================================ */
.notice {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 16px; border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.5;
  border: 1px solid var(--line); background: var(--bg-subtle);
}
.notice i { flex: none; font-size: 17px; margin-top: 1px; }
.notice--info   { background: var(--amber-tint); border-color: rgba(201,169,97,.35); color: #5C4416; }
.notice--info i { color: var(--amber-dark); }
.notice--ok     { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.notice--error  { background: var(--danger-bg); border-color: transparent; color: var(--danger); }

/* Aviso de "solo lectura" para visitantes sin sesión */
.guest-lock {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--amber-dark);
  background: var(--amber-tint); border: 1px dashed rgba(201,169,97,.5);
  padding: 7px 13px; border-radius: 999px;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast-stack {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 11px;
  min-width: 260px; max-width: 380px;
  padding: 13px 17px; border-radius: var(--r-md);
  background: var(--navy-ink); color: #fff;
  font-size: 13.5px; box-shadow: var(--lift-3);
  pointer-events: auto;
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.in { opacity: 1; transform: none; }
.toast i { color: var(--amber-light); font-size: 17px; flex: none; }
.toast a { color: var(--amber-light); font-weight: 700; text-decoration: underline; white-space: nowrap; }

.toast { align-items: flex-start; }
.toast-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.toast-body > span { line-height: 1.5; }
.toast-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.toast-actions a { text-decoration: none; }
.toast-actions .btn { padding: 8px 14px; font-size: 12.5px; }
.toast-actions .btn--amber { color: var(--navy-deep); }
.toast-close {
  flex: none; margin: -4px -6px 0 2px;
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: rgba(255,255,255,.55);
  display: grid; place-items: center;
  transition: all var(--dur-fast);
}
.toast-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.toast-close i { font-size: 14px; color: inherit; }

/* ============================================================
   CARTEL PARA VISITANTES
   Aparece solo cuando alguien sin cuenta intenta una acción
   reservada: centrado, con el resto de la página desenfocada.
   ============================================================ */
.gate {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(20,27,69,.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
          backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gate.in { opacity: 1; }

.gate-card {
  position: relative;
  width: min(430px, 100%);
  padding: 34px 32px 30px;
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--lift-4);
  text-align: center;
  transform: translateY(16px) scale(.96);
  transition: transform var(--dur-slow) var(--ease-out);
}
.gate.in .gate-card { transform: none; }

.gate-icon {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--amber-tint); color: var(--amber-dark);
  font-size: 24px;
}
.gate-card h3 { font-size: 21px; line-height: 1.25; margin-bottom: 10px; }
.gate-card p {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
  margin: 0 auto 24px; max-width: 34ch;
}
.gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gate-actions .btn { min-width: 148px; }

.gate-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-soft);
  display: grid; place-items: center;
  transition: all var(--dur-fast);
}
.gate-close:hover { background: var(--bg-subtle); color: var(--navy-deep); }
.gate-close i { font-size: 16px; }

/* ============================================================
   ESTRELLA DE FAVORITO
   ============================================================ */
.fav-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.94);
  color: var(--ink-soft);
  transition: all var(--dur) var(--ease);
}
.fav-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.fav-btn:hover { transform: scale(1.12); border-color: var(--amber); color: var(--amber-dark); }
.fav-btn.is-on { color: var(--amber-dark); border-color: var(--amber); }
.fav-btn.is-on svg { fill: var(--amber); }
.fav-btn.pulse { animation: favPulse .45s var(--ease); }
@keyframes favPulse { 0%{transform:scale(1)} 45%{transform:scale(1.3)} 100%{transform:scale(1)} }

/* ============================================================
   MAPA
   ============================================================ */
#map { width: 100%; height: clamp(420px, 62vh, 640px); border-radius: var(--r-lg); z-index: 1; }
#map.map--sm { height: clamp(260px, 38vh, 360px); }
.leaflet-container { font-family: 'Inter', sans-serif; background: var(--bg-subtle); }

.kw-marker {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50% 50% 50% 6px;
  transform: rotate(-45deg);
  background: var(--navy-deep);
  border: 2.5px solid var(--amber);
  box-shadow: var(--lift-2);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kw-marker span { transform: rotate(45deg); color: var(--amber-light); font-size: 15px; }
.kw-marker:hover, .kw-marker.is-active { transform: rotate(-45deg) scale(1.15); box-shadow: var(--lift-3); }
.kw-marker.is-active { background: var(--amber); }
.kw-marker.is-active span { color: var(--navy-deep); }

/* Ventana flotante sobre el mapa */
.map-panel {
  position: absolute; z-index: 1000;
  left: 20px; bottom: 20px; width: min(360px, calc(100% - 40px));
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--card); box-shadow: var(--lift-4);
  opacity: 0; transform: translateY(20px) scale(.96);
  pointer-events: none;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.map-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.map-panel-media { position: relative; height: 150px; background: var(--navy-deep); }
.map-panel-media img { width: 100%; height: 100%; object-fit: cover; }
.map-panel-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20,27,69,.85) 100%);
}
.map-panel-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.9); color: var(--navy-deep);
  display: grid; place-items: center; font-size: 15px; line-height: 1;
}
.map-panel-body { padding: 16px 18px 18px; }

/* ============================================================
   GRÁFICO 3D DE LA CALCULADORA
   ============================================================ */
.chart-3d {
  position: relative;
  perspective: 1100px;
  padding: 8px 0;
}
.chart-3d-inner {
  transform: rotateX(6deg);
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease);
}
.chart-3d:hover .chart-3d-inner { transform: rotateX(2deg); }
.chart-3d svg { width: 100%; height: auto; overflow: visible; }

.chart-plane {
  fill: url(#planeGrad);
  opacity: .5;
}
.chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-line--property  { stroke: var(--navy-deep); }
.chart-line--portfolio { stroke: var(--amber); }
.chart-area--property  { fill: url(#areaNavy); }
.chart-area--portfolio { fill: url(#areaAmber); }

/* Animación de trazado */
.chart-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: drawLine 1.5s var(--ease-out) forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* ============================================================
   TABLAS
   ============================================================ */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th, table.data td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--bg-subtle); white-space: nowrap;
}
table.data tbody tr { transition: background var(--dur-fast); }
table.data tbody tr:hover { background: var(--bg-subtle); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Nombre como acceso a la ficha — reemplaza el botón "Ver ficha" aparte */
.investor-name-link { color: var(--ink); }
.investor-name-link b {
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px; transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.investor-name-link:hover b,
.investor-name-link:focus-visible b { color: var(--amber-dark); text-decoration-color: currentColor; }

/* ============================================================
   ACCESIBILIDAD / MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-reveal .reveal, .js-reveal .reveal-3d { opacity: 1 !important; transform: none !important; }
  .depth-layer.is-active { opacity: .22; }
  .depth-orb { animation: none; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--navy-deep); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ============================================================
   VISOR DE FOTOS (lightbox) — carril de la ficha de unidad
   ============================================================ */
.kw-lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: none; align-items: center; justify-content: center;
  background: rgba(20, 27, 69, .94);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.kw-lightbox.is-open { display: flex; opacity: 1; }
body.kw-lightbox-lock { overflow: hidden; }

.kw-lightbox-figure {
  margin: 0; max-width: min(88vw, 1100px); max-height: 82vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.kw-lightbox-figure img {
  max-width: 100%; max-height: 74vh; object-fit: contain;
  border-radius: var(--r-md); box-shadow: var(--lift-4);
}
.kw-lightbox-figure figcaption {
  color: rgba(255,255,255,.75); font-size: 13px; text-align: center;
}

.kw-lightbox-close {
  position: absolute; top: 22px; right: 26px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08);
  color: #fff; font-size: 24px; line-height: 1; display: grid; place-items: center;
  transition: all var(--dur) var(--ease);
}
.kw-lightbox-close:hover { background: var(--amber); border-color: var(--amber); color: var(--navy-deep); }

.kw-lightbox-nav {
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08);
  color: #fff; display: grid; place-items: center; margin: 0 18px;
  transition: all var(--dur) var(--ease);
}
.kw-lightbox-nav:hover { background: var(--amber); border-color: var(--amber); color: var(--navy-deep); }
.kw-lightbox-nav svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
  .kw-lightbox-nav { position: absolute; top: 50%; margin: -25px 12px 0; }
  .kw-lightbox-prev { left: 0; }
  .kw-lightbox-next { right: 0; }
}

/* ============================================================
   GUÍAS DE ALINEACIÓN (herramienta de medición, no decorativa)
   Se activan con ?grid=1 desde el checkbox de /admin/contenido,
   para revisar que cada bloque del inicio calce con el resto.
   ============================================================ */
.align-grid {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.align-grid-inner {
  max-width: var(--shell);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gut);
}
.align-grid-cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  height: 100%;
  border-left: 1px solid rgba(200,40,40,.55);
  border-right: 1px solid rgba(200,40,40,.55);
}
.align-grid-cols > div { border-right: 1px solid rgba(30,39,97,.14); }
.align-grid-cols > div:last-child { border-right: 0; }


/* ============================================================
   SELECTOR DE ÍCONOS (amenities del desarrollo, Panel → editar
   desarrollo) — botón que muestra el ícono elegido y abre un panel
   compartido con una grilla de íconos reales para tocar, en vez de
   tener que escribir el nombre del ícono a mano. Ver app/views/pages
   /admin/development-form.php.
   ============================================================ */
.icon-pick-trigger {
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--navy-deep);
  display: grid; place-items: center; font-size: 18px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.icon-pick-trigger:hover { border-color: var(--amber-dark); background: rgba(201,169,97,.08); }

.icon-pick-panel {
  position: absolute; z-index: 60;
  width: min(420px, 90vw);
  max-height: 340px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--lift-4);
  padding: 10px;
}
.icon-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px;
}
.icon-pick-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--navy-deep); text-align: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.icon-pick-opt i { font-size: 20px; color: var(--amber-dark); }
.icon-pick-opt span { font-size: 10.5px; line-height: 1.25; color: var(--ink-soft); }
.icon-pick-opt:hover { background: rgba(201,169,97,.12); border-color: var(--amber-dark); }