/* LUJO URBAN — exploración conceptual sin restricciones (/lujourban-vision/)
   Hoja de estilos propia y aislada. Sin JS: las interacciones usan <details>/<summary> nativos. */

:root {
  --v-bg: #0b0907;
  --v-surface: rgba(255, 255, 255, 0.035);
  --v-border: rgba(227, 184, 115, 0.16);
  --v-text: #f4efe7;
  --v-muted: rgba(244, 239, 231, 0.55);
  --v-gold: #e3b873;
  --v-rose: #d98f6a;
  --v-blue: #9db6c7;
  --v-glow: rgba(227, 184, 115, 0.07);
  --v-glow-soft: rgba(227, 184, 115, 0.025);
}

/* La casa cambia de temperatura según la hora a la que llegas */
html.lv-day {
  --v-glow: rgba(227, 184, 115, 0.1);
  --v-glow-soft: rgba(227, 184, 115, 0.04);
}

html.lv-night {
  --v-bg: #070605;
  --v-glow: rgba(157, 182, 199, 0.05);
  --v-glow-soft: rgba(157, 182, 199, 0.018);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; scroll-behavior: smooth; }

body {
  position: relative;
  background: var(--v-bg);
  color: var(--v-text);
  font-family: "Barlow", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grano sutil — le da a toda la casa la misma textura, de principio a fin */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,0.9) 0.6px, transparent 0.6px),
    radial-gradient(rgba(255,255,255,0.6) 0.6px, transparent 0.6px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1.5px 2.5px;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.vision-tag {
  margin: 0 0 6px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--v-gold);
}

.vision-title {
  margin: 0 0 14px;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.9rem, 6.5vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.vision-intro {
  margin: 0 0 28px;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--v-muted);
  max-width: 56ch;
}

.vision-section {
  padding: 72px 24px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ---------- APERTURA: el instante antes de ver algo ---------- */

.vision-open {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.vision-open::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  background:
    radial-gradient(circle at 28% 30%, rgba(227, 184, 115, 0.09) 0%, transparent 40%),
    radial-gradient(circle at 74% 70%, rgba(157, 182, 199, 0.06) 0%, transparent 46%);
  filter: blur(70px);
  animation: v-drift 28s ease-in-out infinite alternate;
}

@keyframes v-drift {
  from { transform: translate(-3%, -2%) scale(1); }
  to   { transform: translate(3%, 2%) scale(1.07); }
}

/* Capa más lejana: estrellas casi quietas, dándole profundidad real al vacío */
.vision-stars {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background-image:
    radial-gradient(1px 1px at 8% 22%, rgba(244, 239, 231, 0.45) 50%, transparent 52%),
    radial-gradient(1px 1px at 19% 64%, rgba(244, 239, 231, 0.3) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 33% 12%, rgba(227, 184, 115, 0.4) 50%, transparent 52%),
    radial-gradient(1px 1px at 47% 78%, rgba(244, 239, 231, 0.28) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 58% 38%, rgba(244, 239, 231, 0.4) 50%, transparent 52%),
    radial-gradient(1px 1px at 71% 86%, rgba(227, 184, 115, 0.32) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 83% 28%, rgba(244, 239, 231, 0.36) 50%, transparent 52%),
    radial-gradient(1px 1px at 92% 60%, rgba(244, 239, 231, 0.26) 50%, transparent 52%),
    radial-gradient(1px 1px at 64% 8%, rgba(244, 239, 231, 0.3) 50%, transparent 52%),
    radial-gradient(1px 1px at 14% 92%, rgba(227, 184, 115, 0.3) 50%, transparent 52%);
  animation: v-stars-drift 140s linear infinite alternate;
}

@keyframes v-stars-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-2.5%, -1.8%); }
}

/* Una estrella fugaz, rara y breve — un guiño que no se repite seguido */
.vision-shooting-star {
  position: absolute;
  top: 16%;
  left: 6%;
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(244, 239, 231, 0.85) 70%, var(--v-gold));
  box-shadow: 0 0 10px rgba(244, 239, 231, 0.5);
  transform-origin: left center;
  z-index: 2;
  opacity: 0;
  animation: v-shooting-star 20s ease-in infinite;
}

@keyframes v-shooting-star {
  0%, 91%   { opacity: 0; transform: translate(0, 0) rotate(20deg); }
  92%       { opacity: 1; transform: translate(2vw, 2vh) rotate(20deg); }
  96%       { opacity: 1; transform: translate(58vw, 38vh) rotate(20deg); }
  97%, 100% { opacity: 0; transform: translate(66vw, 44vh) rotate(20deg); }
}

.vision-open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, var(--v-glow) 0%, rgba(11,9,7,0.94) 72%);
  transition: background 1.2s ease;
}

.vision-wordmark {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.vision-wordmark span {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  letter-spacing: 0.34em;
}

.vision-wordmark span:first-child {
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  color: var(--v-muted);
}

.vision-wordmark span:last-child {
  position: relative;
  font-size: clamp(2.6rem, 11vw, 4rem);
  text-shadow: 0 0 32px rgba(227, 184, 115, 0.3);
  background: linear-gradient(110deg, #b9874a 28%, var(--v-gold) 42%, #fff3d9 50%, var(--v-gold) 58%, #b9874a 72%);
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: v-shine 5.5s ease-in-out infinite;
}

@keyframes v-shine {
  0%, 38%  { background-position: 100% 0; }
  62%, 100% { background-position: -80% 0; }
}

.vision-wordmark::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--v-gold), transparent);
}

/* Destellos que cruzan el vacío negro, aparecen y se esconden, uno tras otro */
.vision-fly {
  position: absolute;
  top: 50%;
  left: 0;
  width: 58px;
  height: 58px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(227, 184, 115, 0.28);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 22px rgba(227, 184, 115, 0.14);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  animation-name: v-fly-across;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.vision-fly-1 { top: 20%; width: 60px; height: 60px; animation-duration: 17s; animation-delay: 0s; }
.vision-fly-2 { top: 60%; width: 46px; height: 46px; animation-duration: 21s; animation-delay: 6s; }
.vision-fly-3 { top: 78%; width: 54px; height: 54px; animation-duration: 19s; animation-delay: 12.5s; }

@keyframes v-fly-across {
  0%   { transform: translateX(-12vw) translateY(0) rotate(-8deg); opacity: 0; }
  10%  { opacity: 0.45; }
  50%  { transform: translateX(56vw) translateY(-34px) rotate(5deg); opacity: 0.45; }
  90%  { opacity: 0; }
  100% { transform: translateX(118vw) translateY(14px) rotate(12deg); opacity: 0; }
}

.vision-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(70vw, 480px);
  height: min(70vw, 480px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 184, 115, 0.22) 0%, rgba(227, 184, 115, 0.06) 45%, transparent 72%);
  filter: blur(18px);
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 2;
  animation: v-halo 6s ease-in-out infinite;
}

@keyframes v-halo {
  0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

.vision-open-content {
  position: relative;
  z-index: 3;
  padding: 0 24px;
  max-width: 620px;
  animation: v-rise 1.1s ease both;
}

.vision-scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: v-cue-rise 1.4s ease 0.6s both;
}

.vision-scroll-line {
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, transparent, var(--v-gold));
  animation: v-cue-stretch 2.6s ease-in-out infinite;
  transform-origin: top;
}

.vision-scroll-text {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--v-muted);
}

@keyframes v-cue-stretch {
  0%, 100% { transform: scaleY(0.6); opacity: 0.5; }
  50%      { transform: scaleY(1); opacity: 1; }
}

@keyframes v-cue-rise {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.vision-open-line {
  margin: 16px 0 0;
  font-family: "Barlow Condensed", sans-serif;
  font-style: italic;
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  color: var(--v-muted);
}

@keyframes v-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- LA GENTE DEL SELLO (presentación directa) ---------- */

.people-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.people-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--v-border);
  background: var(--v-surface);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.people-row:hover {
  border-color: rgba(227, 184, 115, 0.4);
  transform: translateY(-2px);
}

.people-row img,
.people-empty {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.people-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(227, 184, 115, 0.06);
  color: var(--v-gold);
  font-size: 1.2rem;
}

.people-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.people-name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  color: var(--v-text);
}

.people-role {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-gold);
}

.people-tagline {
  font-size: 0.88rem;
  color: var(--v-muted);
}

.vision-note {
  margin: 22px 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: rgba(244, 239, 231, 0.32);
  font-style: italic;
}

/* ---------- LA VOZ DE LA CASA (manifiesto editorial) ---------- */

.voice-section {
  padding: 88px 24px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid var(--v-border);
  border-bottom: 1px solid var(--v-border);
}

.voice-section .vision-tag { text-align: center; }

.voice-line {
  margin: 0 0 30px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 4.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--v-muted);
}

.voice-line:last-child { margin-bottom: 0; }

.voice-line strong {
  display: inline-block;
  margin-top: 2px;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  letter-spacing: 0.02em;
  background: linear-gradient(110deg, #b9874a 28%, var(--v-gold) 42%, #fff3d9 50%, var(--v-gold) 58%, #b9874a 72%);
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: v-shine 7s ease-in-out infinite;
}

.voice-line + .voice-line strong { animation-delay: 0.6s; }
.voice-line + .voice-line + .voice-line strong { animation-delay: 1.2s; }

/* ---------- UN LUGAR CON NOMBRE PROPIO ---------- */

.place-section {
  position: relative;
  text-align: left;
}

.place-section::before {
  content: "Cali";
  position: absolute;
  top: -0.4em;
  right: 6%;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(3.5rem, 16vw, 9rem);
  letter-spacing: 0.04em;
  color: rgba(227, 184, 115, 0.05);
  pointer-events: none;
  z-index: 0;
  line-height: 1;
}

.place-section .vision-tag,
.place-section .vision-title,
.place-section .vision-intro {
  position: relative;
  z-index: 1;
}

/* ---------- VOCES DE ADENTRO ---------- */

.voices-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.voice-card {
  margin: 0;
  padding: 22px;
  border-radius: 14px;
  border: 1px solid var(--v-border);
  background: var(--v-surface);
}

.voice-card p {
  margin: 0 0 14px;
  font-family: "Barlow Condensed", sans-serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--v-text);
}

.voice-card cite {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v-gold);
}

/* ---------- CONSTELACIÓN ---------- */

.constellation {
  position: relative;
  min-height: 620px;
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
}

.constellation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(244, 239, 231, 0.5) 50%, transparent 52%),
    radial-gradient(1px 1px at 28% 64%, rgba(244, 239, 231, 0.35) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 46% 30%, rgba(244, 239, 231, 0.4) 50%, transparent 52%),
    radial-gradient(1px 1px at 62% 78%, rgba(244, 239, 231, 0.3) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 78% 22%, rgba(227, 184, 115, 0.4) 50%, transparent 52%),
    radial-gradient(1px 1px at 88% 58%, rgba(244, 239, 231, 0.32) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 36% 88%, rgba(244, 239, 231, 0.28) 50%, transparent 52%),
    radial-gradient(1px 1px at 8% 70%, rgba(227, 184, 115, 0.3) 50%, transparent 52%);
  opacity: 0.7;
}

.constellation > * {
  position: relative;
  z-index: 1;
}

.star {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 128px;
  text-align: center;
  transition: transform 0.3s ease;
}

.star:hover { transform: translateY(-6px); }

.star img,
.star-empty {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--v-border);
  box-shadow: 0 0 0 0 var(--glow-color, rgba(227,184,115,0.35));
  transition: box-shadow 0.3s ease;
}

.star-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(227, 184, 115, 0.06);
  color: var(--v-gold);
  font-size: 1.4rem;
}

.star:hover img,
.star:hover .star-empty {
  box-shadow: 0 0 34px 6px var(--glow-color, rgba(227,184,115,0.35));
}

.star span {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--v-text);
}

.star-active-mark {
  position: absolute;
  top: -2px;
  right: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--v-gold);
  box-shadow: 0 0 0 0 rgba(227, 184, 115, 0.5);
  animation: v-pulse-small 2.4s ease-out infinite;
}

@keyframes v-pulse-small {
  0%   { box-shadow: 0 0 0 0 rgba(227, 184, 115, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(227, 184, 115, 0); }
  100% { box-shadow: 0 0 0 14px rgba(227, 184, 115, 0); }
}

.star-active-label {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v-gold);
  font-weight: 700;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.star.is-active:hover .star-active-label {
  opacity: 1;
  transform: translateY(0);
}

.star-a { --glow-color: rgba(227, 184, 115, 0.45); top: 0; left: 6%; }
.star-b { --glow-color: rgba(217, 143, 106, 0.45); top: 230px; left: 52%; }
.star-c { --glow-color: rgba(157, 182, 199, 0.45); top: 460px; left: 14%; }

/* ---------- EL SONIDO DETRÁS DEL SILENCIO ---------- */

.vision-brewing {
  position: relative;
  padding: 56px 24px;
  text-align: center;
  overflow: hidden;
}

.vision-brewing::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      115deg,
      var(--v-glow-soft) 0px,
      var(--v-glow-soft) 1px,
      transparent 1px,
      transparent 64px
    );
  opacity: 0.7;
}

.brewing-text {
  position: relative;
  margin: 0 auto;
  max-width: 44ch;
  font-family: "Barlow Condensed", sans-serif;
  font-style: italic;
  font-size: clamp(0.96rem, 3.4vw, 1.12rem);
  line-height: 1.6;
  color: var(--v-muted);
}

/* ---------- ARCHIVO VIVO (crate apilada) ---------- */

.crate {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 40px 0 24px;
}

.crate-cover {
  position: relative;
  width: 168px;
  margin-left: -52px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--v-border);
  box-shadow: 0 18px 38px rgba(0,0,0,0.5);
  transition: transform 0.3s ease, z-index 0s;
}

.crate-cover:first-child { margin-left: 0; transform: rotate(-7deg); }
.crate-cover:nth-child(2) { transform: rotate(2deg); }
.crate-cover:nth-child(3) { transform: rotate(9deg); }

.crate-cover:hover {
  transform: translateY(-14px) rotate(0deg) scale(1.04);
  z-index: 5;
}

.crate-cover img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.crate-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 12px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.78), transparent);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--v-text);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.crate-cover:hover .crate-label,
.crate-cover:focus-visible .crate-label {
  opacity: 1;
  transform: translateY(0);
}

.crate-hint {
  margin: 4px 0 0;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(244, 239, 231, 0.32);
}

/* ---------- EL GESTO ---------- */

.vision-gesture {
  padding: 84px 24px;
  text-align: center;
  border-top: 1px solid var(--v-border);
  border-bottom: 1px solid var(--v-border);
  background: linear-gradient(180deg, rgba(227,184,115,0.04), rgba(227,184,115,0));
}

.gesture-text {
  margin: 0 auto;
  max-width: 46ch;
  font-family: "Barlow Condensed", sans-serif;
  font-style: italic;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  line-height: 1.55;
  color: var(--v-text);
}

/* ---------- CIERRE EN ESPIRAL ---------- */

.vision-close { text-align: left; }

.return-note {
  margin: -8px 0 22px;
  font-family: "Barlow Condensed", sans-serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--v-gold);
}

.vision-loop {
  display: inline-block;
  margin-top: 4px;
  color: var(--v-gold);
  font-weight: 600;
  border-bottom: 1px solid rgba(227, 184, 115, 0.4);
}

.vision-loop:hover { border-color: var(--v-gold); }

.vision-footer {
  padding: 26px 24px 44px;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(244, 239, 231, 0.3);
}

/* ===================================================================
   DESKTOP — más aire, más profundidad espacial, composiciones que
   conviven en lugar de apilarse.
   =================================================================== */

@media (min-width: 880px) {
  .vision-section { padding: 110px 48px; }

  .moments-wall {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .people-list { flex-direction: row; }
  .people-row { flex: 1; flex-direction: column; align-items: flex-start; gap: 14px; }
  .people-row img,
  .people-empty { width: 100%; height: 200px; border-radius: 12px; }

  .constellation { min-height: 520px; }
  .star-a { top: 10px; left: 8%; }
  .star-b { top: 60px; left: 46%; }
  .star-c { top: 300px; left: 22%; }

  .crate-cover { width: 220px; margin-left: -76px; }

  .vision-close { max-width: 640px; }

  .voice-line {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
  }

  .voice-line strong { margin-top: 0; }

  .voices-grid {
    flex-direction: row;
  }

  .voice-card { flex: 1; }
}