/* claro.css — tema claro: la paleta de lavistaresidences.com.mx.
   Fondo crema, texto tinta, verde del pie como color fuerte, salvia y agua como apoyo,
   terracota solo como acento. Se carga al final y sustituye los fondos oscuros del resto de hojas. */

:root {
  --night: #F2EDE4;                 /* lo que antes era negro ahora es el crema del sitio */
  --night-2: #EBE4D6;
  --green: #3D4E38;
  --green-deep: #2B3828;
  --sage: #6F7E66;
  --water: #3D5A5E;
  --line-light: rgba(22, 20, 19, 0.14);
  --shade: 34, 46, 31;              /* velo verde profundo para leer texto sobre foto, en vez de negro */
  --warm: 60, 45, 30;
}

/* ---------- Cristal claro ---------- */
.glass {
  color: var(--ink);
  background:
    radial-gradient(120% 90% at var(--gx) var(--gy), rgba(255, 255, 255, 0.8), transparent 55%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.78), rgba(242, 237, 228, 0.68) 45%, rgba(235, 228, 214, 0.74));
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 28px rgba(255, 255, 255, 0.3),
    0 30px 70px -30px rgba(var(--warm), 0.5), 0 0 46px -26px rgba(61, 78, 56, 0.55);
}
.glass::before {
  background: conic-gradient(from var(--ang), rgba(255, 255, 255, 0.75) 0 52%, rgba(111, 126, 102, 0.85) 64%, #fff 73%, rgba(184, 97, 44, 0.75) 82%, rgba(255, 255, 255, 0.75) 96%);
}

/* ---------- Barra ---------- */
.nav.is-solid { background: rgba(242, 237, 228, 0.88); color: var(--ink); box-shadow: 0 1px 0 rgba(22, 20, 19, 0.08); }
.nav.is-solid .nav-logo img { filter: brightness(0.14); }
.nav.is-solid .nav-cta { background: var(--green); color: var(--paper); }
.nav.is-solid .nav-cta:hover { background: var(--green-deep); }

/* ---------- Intro ---------- */
.intro { color: var(--ink); }
.intro-half.top { background: radial-gradient(70% 130% at 50% 100%, #FBF8F2 0%, #F2EDE4 45%, #EBE4D6 80%); }
.intro-half.bot { background: radial-gradient(70% 130% at 50% 0%, #E3E7DC 0%, #EEE9DE 45%, #EBE4D6 80%); }
.intro-line { background: linear-gradient(90deg, transparent, var(--sage) 18%, var(--green) 50%, var(--sage) 82%, transparent); box-shadow: 0 0 22px 1px rgba(111, 126, 102, 0.6); }
.intro-meta { color: var(--ink-soft); }
.intro-meta b { color: var(--terracota-deep); }

/* ---------- Portada ---------- */
.hero-shade {
  background:
    linear-gradient(to bottom, rgba(var(--shade), 0.42), transparent 22%),
    linear-gradient(to left, rgba(var(--shade), 0.34), rgba(var(--shade), 0.12) 30%, transparent 52%);
}
.hero .glass { color: var(--ink); }
.hero .glass .eyebrow { color: var(--terracota-deep); }
.hero-sub { color: var(--ink-soft); }
.hero-hint { color: var(--ink); border-top-color: rgba(22, 20, 19, 0.14); }
.hint-pulse, .chip-dot { background: var(--terracota); box-shadow: none; }
.gauge-ticks i { background: rgba(22, 20, 19, 0.22); }
.gauge-ticks i.is-near { background: rgba(22, 20, 19, 0.5); }
.gauge-ticks i.is-on { background: var(--terracota); box-shadow: 0 0 12px 1px rgba(184, 97, 44, 0.55); }
.gauge-code, .plan-txt strong, .plan-go { color: var(--ink); }
.plan-txt { color: var(--ink-soft); }
.plan-eyebrow { color: var(--terracota-deep); }
.plan-thumb { background: #E6DECF; box-shadow: inset 0 0 0 1px rgba(22, 20, 19, 0.1); }
.tower-tag { background: rgba(242, 237, 228, 0.82); color: var(--ink); border-color: rgba(255, 255, 255, 0.9); }
.tower-tag:hover { background: var(--green); color: var(--paper); border-color: var(--green); }
.hero .hero-tip { background: linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(242, 237, 228, 0.86)); color: var(--ink); }
.hero-tip .tip-where, .hero-tip .tip-meta { color: var(--ink-soft); }
.hero-tip .tip-go { color: var(--terracota-deep); }
.band.is-scan { fill: rgba(242, 237, 228, 0.5); stroke: #fff; }
.band.is-picked { fill: rgba(61, 78, 56, 0.6); stroke: #fff; }

/* ---------- Transición portada → departamento ---------- */
.xfer {
  background:
    radial-gradient(50% 60% at 30% 70%, rgba(111, 126, 102, 0.35), transparent 70%),
    radial-gradient(45% 55% at 78% 25%, rgba(184, 97, 44, 0.16), transparent 70%), var(--paper);
}
.xfer-token { color: var(--green); text-shadow: none; }
.xfer-ring { border-color: var(--green); box-shadow: 0 0 24px 2px rgba(61, 78, 56, 0.5); }

/* ---------- Departamento ---------- */
.depto { color: var(--ink); }
.depto-stage { background: radial-gradient(ellipse 70% 60% at 50% 48%, #FCFAF5 0%, #F2EDE4 55%, #E7DFD0 100%); }
.depto-stage::before {
  background:
    linear-gradient(rgba(61, 78, 56, 0.16) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(61, 78, 56, 0.16) 1px, transparent 1px) 0 0 / 48px 100%;
}
.depto-stage::after {
  mix-blend-mode: multiply;
  background:
    radial-gradient(38% 34% at 26% 74%, rgba(184, 97, 44, 0.1), transparent 70%),
    radial-gradient(34% 30% at 78% 24%, rgba(111, 126, 102, 0.2), transparent 70%);
}
.hs { color: var(--paper); }
.hs-dot::before { background: var(--green); box-shadow: 0 0 0 3px #fff, 0 3px 12px rgba(var(--warm), 0.5); }
.hs-dot::after { border-color: rgba(61, 78, 56, 0.55); background: rgba(255, 255, 255, 0.35); }
.hs:hover .hs-dot::before, .hs.is-on .hs-dot::before { background: var(--terracota); }
.hs-label { background: var(--green); }
.tool { background: rgba(255, 255, 255, 0.7); color: var(--ink); }
.tool:hover { background: #fff; border-color: rgba(22, 20, 19, 0.4); }
.stage-hint { color: var(--ink-soft); }
.rooms button { background: rgba(255, 255, 255, 0.7); color: var(--ink); }
.rooms button:hover { border-color: rgba(22, 20, 19, 0.45); }
.rooms button[aria-selected="true"] { background: var(--green); color: var(--paper); border-color: var(--green); }
.rooms.has-pill button[aria-selected="true"] { color: var(--paper); }
.rooms-pill { background: var(--green); box-shadow: 0 10px 26px -10px rgba(61, 78, 56, 0.8); }
.depto-panel { background: var(--paper); }
.panel-lead, .panel-delivery { color: var(--ink-soft); }
.specs dt, .picker-label { color: var(--ink-soft); }
.depto-panel .eyebrow { color: var(--terracota-deep); }
.seg button, .stepper button, .stepper select { color: var(--ink); }
.seg button:hover, .stepper button:hover:not([disabled]) { background: rgba(22, 20, 19, 0.06); }
.seg button[aria-pressed="true"] { background: var(--green); color: var(--paper); }
.picker.glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 24px 50px -32px rgba(var(--warm), 0.55); }
.depto .btn-ghost { border-color: rgba(22, 20, 19, 0.3); color: var(--ink); }
.depto .btn-ghost:hover { border-color: var(--ink); background: rgba(22, 20, 19, 0.05); }
.tour-start { background: var(--green); color: var(--paper); box-shadow: 0 14px 34px -10px rgba(61, 78, 56, 0.7); }
.tour-start-ico { background: var(--paper); }
.tour-start-ico::after { border-left-color: var(--green); }
.tour-start-ico::before { border-color: rgba(242, 237, 228, 0.6); }

/* ---------- Recorrido ---------- */
.tour { background: var(--paper); }
.tour-shade {
  background:
    linear-gradient(to top, rgba(var(--shade), 0.72) 0%, rgba(var(--shade), 0.22) 26%, transparent 46%),
    linear-gradient(to bottom, rgba(var(--shade), 0.36) 0%, transparent 20%);
}
.tour-close, .tour-arrow, .tour-tabs button { background: rgba(242, 237, 228, 0.86); color: var(--ink); border-color: rgba(255, 255, 255, 0.9); }
.tour-close:hover, .tour-arrow:hover { background: var(--green); color: var(--paper); border-color: var(--green); }
.tour-tabs button:hover { border-color: var(--green); }
.tour-tabs button[aria-selected="true"] { background: var(--green); color: var(--paper); border-color: var(--green); }
.tour-tabs button i { background: rgba(255, 255, 255, 0.2); }
.tour.has-clip .tour-view canvas, .tour.has-clip .tour-flat { filter: blur(22px) brightness(1.02) saturate(0.9); }
.tour-clip { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 40px 120px -20px rgba(var(--warm), 0.6); }

/* ---------- Escenas ---------- */
.scene { color: var(--ink); }
.sc-aurora i { opacity: 0.5; filter: blur(100px); }
.sc-aurora i:nth-child(1) { background: radial-gradient(circle, rgba(111, 126, 102, 0.55), transparent 65%); }
.sc-aurora i:nth-child(2) { background: radial-gradient(circle, rgba(184, 97, 44, 0.22), transparent 65%); }
.sc-aurora i:nth-child(3) { background: radial-gradient(circle, rgba(61, 90, 94, 0.3), transparent 65%); }

/* La vista como eje */
.sv-photo { background: #E6DECF; }
.sv-photo::after {
  background: linear-gradient(to top, rgba(var(--shade), 0.66), transparent 55%), linear-gradient(to right, rgba(var(--shade), 0.3), transparent 50%);
}
.sv-frame { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 40px 100px -34px rgba(var(--warm), 0.6), 0 0 70px -26px rgba(61, 78, 56, 0.6); }
.sv-frame::before { background: conic-gradient(from var(--ang), transparent 0 55%, rgba(111, 126, 102, 0.95) 68%, #fff 75%, rgba(184, 97, 44, 0.7) 82%, transparent 94%); }
/* el crema cubre la foto y las letras la dejan ver */
.sv-mask { background: var(--paper); mix-blend-mode: screen; }
.sv-mask-txt { color: #000; }
.sv-glow .sv-mask-txt { -webkit-text-stroke: 1px rgba(61, 78, 56, 0.5); text-shadow: 0 0 30px rgba(61, 78, 56, 0.28); }
.sv-hud { color: var(--ink-soft); }
.sv-hud-a { color: var(--terracota-deep) !important; }
.sv-hud-a::before { box-shadow: none; }
.sv-hud-d i { background: linear-gradient(var(--green), transparent); }
.sv-sweep { mix-blend-mode: multiply; background: linear-gradient(90deg, transparent, rgba(111, 126, 102, 0.18) 40%, rgba(61, 78, 56, 0.3) 50%, rgba(111, 126, 102, 0.18) 60%, transparent); }
.sv-h-line { background: linear-gradient(90deg, transparent, #fff 12%, #fff 88%, transparent); box-shadow: 0 0 18px 2px rgba(255, 255, 255, 0.8); }
.sv-h-tag { background: rgba(242, 237, 228, 0.9); color: var(--ink); border-color: #fff; box-shadow: 0 10px 30px -10px rgba(var(--warm), 0.6); }
.sv-h-tag b { color: var(--terracota-deep); }
.sv-h-dot { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); }
@keyframes svPing { to { box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); } }
.sv-eyebrow { color: var(--terracota-deep); }
.sv-claim { color: color-mix(in srgb, var(--ink) calc(var(--e, 0) * 100%), var(--paper)); text-shadow: 0 2px 40px rgba(var(--shade), calc((1 - var(--e, 0)) * 0.55)); }
.sv-claim em { color: color-mix(in srgb, var(--terracota-deep) calc(var(--e, 0) * 100%), #FFE3CB); text-shadow: 0 2px 40px rgba(var(--shade), calc((1 - var(--e, 0)) * 0.6)); }
.sv-p { color: var(--ink-soft); }
.scene .glass.sv-card { color: var(--ink-soft); }
.sv-card strong { color: var(--ink); }
.sv-card .plan-eyebrow { color: var(--terracota-deep); }
.sv-chip i { background: var(--sage); box-shadow: 0 0 0 4px rgba(111, 126, 102, 0.2); }
.sv-nums dt { color: var(--ink-soft); }
.sv-nums div + div::before { background: linear-gradient(transparent, rgba(61, 78, 56, 0.5), transparent); box-shadow: none; }
@keyframes svHit { from { transform: scale(1.16); color: var(--terracota); } }

/* Así se vive */
.sl-col { background: #E0D8C8; box-shadow: 0 0 0 1px rgba(255, 255, 255, calc((1 - var(--ue, 0)) * 0.8)), 0 30px 70px -30px rgba(var(--warm), calc((1 - var(--ue, 0)) * 0.7)); }
.sl-col::after { background: linear-gradient(to top, rgba(var(--shade), 0.55), transparent 34%); }
.sl-tag b { color: var(--terracota-deep); text-shadow: none; }
.sl-tag span { color: var(--ink-soft); }
.sl-tag strong { color: var(--ink); }
.sl-seam { background: linear-gradient(transparent, var(--sage) 30%, #fff 50%, var(--sage) 70%, transparent); box-shadow: 0 0 16px 1px rgba(111, 126, 102, 0.6); }
.sl-shade { background: linear-gradient(to top, rgba(var(--shade), 0.82), rgba(var(--shade), 0.3) 45%, rgba(var(--shade), 0.42)); }
.sl-eye, .sl-quote { color: var(--paper); }
.sl-eye b { color: #FFE3CB; }
.sl-quote em { color: #FFD9BA; text-shadow: none; }

/* Amenidades */
.sa-live-in { background: #E0D8C8; }
.sa-live { filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.95)) drop-shadow(-16px 0 34px rgba(var(--shade), 0.4)); }
.sa-edge { background: linear-gradient(transparent, #fff 28%, #fff 72%, transparent); box-shadow: 0 0 40px 8px rgba(255, 255, 255, 0.7); }
.sa-shade {
  background: linear-gradient(to top, rgba(var(--shade), 0.86) 0%, rgba(var(--shade), 0.3) 34%, transparent 56%), linear-gradient(to bottom, rgba(var(--shade), 0.4), transparent 22%);
}
.sa-hook-eye { color: var(--terracota-deep); }
.sa-big { color: var(--green); text-shadow: 0 0 50px rgba(242, 237, 228, 0.95), 0 0 14px rgba(242, 237, 228, 0.8); }
.sa-rest { color: var(--ink); text-shadow: 0 0 24px rgba(242, 237, 228, 1), 0 0 8px rgba(242, 237, 228, 0.9); }
.sa-rest em { color: var(--terracota-deep); }
.sa-deck i { background-color: #E0D8C8; box-shadow: 0 30px 70px -26px rgba(var(--warm), 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.sa-ui, .sa-titles h3 { color: var(--paper); }
.sa-top { color: rgba(242, 237, 228, 0.9); }
.sa-top b { color: #FFE3CB; }
.sa-roll { color: #FFE3CB; text-shadow: none; }
.sa-bar { background: rgba(242, 237, 228, 0.3); }
.sa-bar i { background: linear-gradient(90deg, var(--sage), #fff); box-shadow: none; }
.sa-card p { color: var(--ink); }
.sa-rail button { background: #E0D8C8; border-color: rgba(255, 255, 255, 0.55); }
.sa-rail button.is-on { border-color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8), 0 12px 30px -8px rgba(var(--shade), 0.9); }

/* ---------- Agenda ---------- */
.agenda { background: var(--paper); color: var(--ink); }
.agenda-text .eyebrow { color: var(--terracota-deep); }
.agenda-text h2 em { color: var(--terracota-deep); }
.agenda-contact span, .field label, .form-unit, .form-legal { color: var(--ink-soft); }
.agenda-contact a:hover { color: var(--terracota-deep); }
.field input, .field textarea { color: var(--ink); border-bottom-color: rgba(22, 20, 19, 0.3); }
.field input::placeholder, .field textarea::placeholder { color: rgba(22, 20, 19, 0.38); }
.field input:focus, .field textarea:focus { border-bottom-color: var(--green); box-shadow: 0 1px 0 var(--green); }
.was-validated input:invalid { border-bottom-color: var(--terracota); }
.form-status { color: var(--ink); }
.agenda-vid.is-on { opacity: 1; }
.agenda-fx::after {
  background:
    linear-gradient(100deg, rgba(242, 237, 228, 0.97) 0%, rgba(242, 237, 228, 0.86) 40%, rgba(242, 237, 228, 0.55) 100%),
    linear-gradient(to bottom, var(--paper), transparent 20%, transparent 80%, var(--paper));
}
.agenda .aurora { mix-blend-mode: multiply; opacity: 0.35; }

/* ---------- Pie (verde del sitio) ---------- */
.footer, .footer-base { border-top-color: rgba(242, 237, 228, 0.16); }

/* ---------- Botones ---------- */
.btn-accent { background: var(--green); color: var(--paper); }
.btn-accent:hover { background: var(--green-deep); }
::selection { background: var(--green); color: var(--paper); }