/* ─────────────────────────────────────────────────────────────────────────
   Sillage — página de venta y alquiler de vending machines de decants.
   Capa de página sobre el sistema Nocturne: acá sólo viven layout, ritmo y
   escala web. Todo color, tipografía, radio y sombra sale de las variables
   de Nocturne (styles.css). No hay hex sueltos ni fuentes nuevas.

   RITMO: el texto apoya sobre una unidad de 28px (--leading), medio paso de
   14px para bloques compactos. El aire generoso vive ENTRE secciones; dentro
   de cada cluster (título + bajada + CTAs) los saltos son de una unidad.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 60ch;
  --maxw: 1240px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  text-wrap: pretty;
  /* el suelo iluminado del sistema, a escala de página: un bloom de acento
     anclado arriba a la derecha y una caída de sombra abajo a la izquierda —
     sombra, no color — sobre el fondo plano del token */
  background:
    radial-gradient(1250px 760px at 84% -180px,
      color-mix(in srgb, var(--color-accent-900) 80%, transparent), transparent 62%),
    radial-gradient(1100px 820px at -12% 92%,
      color-mix(in srgb, black 34%, transparent), transparent 58%),
    var(--color-bg);
  background-attachment: scroll;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge); }

/* — masthead ─────────────────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 40;
  padding-inline: max(var(--edge), calc((100% - var(--maxw)) / 2 + var(--edge)));
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.site-nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px calc(100% - 48px), transparent);
}
.nav-brand { display: flex; align-items: baseline; gap: 9px; letter-spacing: 0.02em; }
.brand-mark {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent),
              0 0 18px color-mix(in srgb, var(--color-accent) 60%, transparent);
  translate: 0 -1px;
}
.brand-sub {
  font-family: var(--font-body); font-weight: 400; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 46%, transparent);
}
.site-nav a { white-space: nowrap; transition: color .2s ease; }
.site-nav a.is-active { color: var(--color-accent); }
@media (max-width: 940px) { .site-nav .nav-link { display: none; } }
@media (max-width: 420px) { .brand-sub { display: none; } }

/* — reglas y kickers ─────────────────────────────────────────────────── */
.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px calc(100% - 48px), transparent);
}
.kicker {
  position: relative; display: block;
  font-size: 12px; line-height: var(--half); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent); font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}
.kicker::before {
  content: ""; position: absolute; left: -64px; top: calc(50% - 0.5px);
  width: 44px; height: 1px; background: var(--color-accent);
}
@media (max-width: 1400px) { .kicker::before { display: none; } }

.section-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1; letter-spacing: -0.02em;
  margin: 0; max-width: 22ch; margin-left: -0.04em;
}
.section-lede {
  font-size: 16.5px; line-height: var(--leading); max-width: var(--measure);
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
  margin: var(--leading) 0 0;
}

/* — hero ─────────────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: calc(2 * var(--leading)) clamp(32px, 5vw, 88px);
  align-items: center;
  padding: calc(3 * var(--leading)) 0 calc(3 * var(--leading));
}
.hero-copy { container-type: inline-size; }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 4.4vw, 56px);
  font-size: clamp(40px, 8.6cqi, 66px);
  line-height: 1.06; letter-spacing: -0.03em;
  margin: 0; margin-left: -0.05em;
}
.display .line { display: block; }
.display .hl { color: var(--color-accent-300); }
.hero .sub {
  font-size: 17px; line-height: var(--leading); max-width: 46ch;
  margin: calc(1.4 * var(--leading)) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: calc(1.3 * var(--leading)); }
.btn-lg { font-size: 15px; padding: calc(var(--space-3) * 0.95) calc(var(--space-6) * 1.05); }

.hero-spec {
  display: flex; flex-wrap: wrap; gap: var(--half) var(--space-6);
  margin: calc(1.6 * var(--leading)) 0 0; padding: 0; list-style: none;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
}
.hero-spec li { display: flex; align-items: center; gap: 8px; }
.hero-spec li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-accent); flex: none;
}

/* el escenario del producto: bloom, vitrina y reflejo de piso */
.stage { position: relative; isolation: isolate; }
.stage::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 46%; translate: -50% -50%;
  width: 108%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--color-accent) 26%, transparent),
    color-mix(in srgb, var(--color-accent-900) 45%, transparent) 55%,
    transparent 72%);
  filter: blur(6px);
}
.stage::after {
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: -18px; translate: -50% 0;
  width: 62%; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--color-accent) 34%, transparent), transparent 78%);
  filter: blur(9px);
}
.stage-figure { margin: 0; }
.stage-figure image-slot { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }

/* partículas: motas suspendidas, muy tenues, sólo ambiente */
.motes { position: absolute; inset: -6% -4%; z-index: -1; pointer-events: none; overflow: hidden; }
.motes i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent-200) 70%, transparent);
  opacity: 0; animation: drift 14s linear infinite;
}
.motes i:nth-child(1) { left: 12%; top: 78%; animation-duration: 15s; animation-delay: 0s; }
.motes i:nth-child(2) { left: 31%; top: 88%; animation-duration: 19s; animation-delay: 2.5s; }
.motes i:nth-child(3) { left: 54%; top: 82%; animation-duration: 17s; animation-delay: 5s; }
.motes i:nth-child(4) { left: 73%; top: 91%; animation-duration: 21s; animation-delay: 7.5s; }
.motes i:nth-child(5) { left: 88%; top: 76%; animation-duration: 16s; animation-delay: 10s; }
.motes i:nth-child(6) { left: 43%; top: 95%; animation-duration: 23s; animation-delay: 12s; }
@keyframes drift {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.85; }
  80%  { opacity: 0.5; }
  100% { transform: translateY(-340px) scale(1.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .motes { display: none; } }

/* — banda de especificaciones (el único fondo saturado del sistema) ──── */
.band {
  position: relative;
  background:
    radial-gradient(900px 440px at 86% -40%,
      color-mix(in srgb, var(--color-section-glow) 72%, transparent), transparent 64%),
    var(--color-section);
  padding: calc(2.4 * var(--leading)) 0;
}
.band .grid {
  display: grid; grid-template-columns: repeat(4, auto);
  justify-content: space-between; gap: calc(1.5 * var(--leading)) var(--leading);
}
.band-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 50px); line-height: 1.1;
  color: var(--color-text); margin: 0; margin-left: -0.05em;
  font-feature-settings: "tnum" 1;
}
.band-label {
  font-size: 12px; line-height: var(--half); letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 64%, transparent);
  margin: var(--half) 0 0; max-width: 18ch;
}

/* — bloques de sección ───────────────────────────────────────────────── */
.section { padding: calc(3.4 * var(--leading)) 0; }
.section-head { margin-bottom: calc(2 * var(--leading)); }

/* “Una nueva forma de vender fragancias” */
.lede-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--leading) clamp(32px, 6vw, 104px); align-items: start;
}
.lede-split p { font-size: 17px; line-height: var(--leading); margin: 0 0 var(--leading); }
.lede-split p:last-child { margin-bottom: 0; }
.lede-split .dim { color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* — beneficios ───────────────────────────────────────────────────────── */
.benefit-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--color-neutral-700) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neutral-700) 55%, transparent);
  border-radius: var(--radius-lg); overflow: hidden;
}
.benefit {
  background: color-mix(in srgb, var(--color-surface) 62%, transparent);
  padding: calc(1.3 * var(--leading)) var(--space-8) calc(1.5 * var(--leading));
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: background .3s ease;
}
.benefit:hover { background: color-mix(in srgb, var(--color-accent-900) 55%, var(--color-surface)); }
.benefit .icon {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-accent) 42%, transparent);
  color: var(--color-accent);
}
.benefit .icon svg { width: 18px; height: 18px; }
.benefit h3 { font-size: 18px; margin: var(--space-2) 0 0; letter-spacing: -0.01em; }
.benefit p {
  font-size: 14.5px; line-height: 1.6; margin: 0;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

/* — compra o alquiler ────────────────────────────────────────────────── */
.models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.model {
  position: relative; display: flex; flex-direction: column;
  padding: calc(1.6 * var(--leading)) clamp(20px, 2.4vw, 34px) calc(1.6 * var(--leading));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s ease, background .3s ease;
}
.model:hover { box-shadow: var(--shadow-md); }
.model--rent {
  background:
    radial-gradient(600px 300px at 100% -20%,
      color-mix(in srgb, var(--color-accent-900) 78%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-surface) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 34%, transparent);
}
.model--rent:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent), 0 16px 40px rgba(0,0,0,.5); }
.model-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.model h3 { font-size: 24px; margin: 0; letter-spacing: -0.015em; }
.model .lede {
  font-size: 15px; line-height: 1.6; margin: var(--space-3) 0 0; max-width: 40ch;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.model ul {
  list-style: none; margin: calc(1.2 * var(--leading)) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
  font-size: 14.5px; line-height: 1.55;
}
.model li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.model li svg { width: 14px; height: 14px; margin-top: 5px; color: var(--color-accent); }
.model .foot { margin-top: auto; padding-top: calc(1.4 * var(--leading)); }
.model .best-for {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  margin: 0 0 var(--space-3);
}

/* — cómo funciona ────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.step { position: relative; padding-top: calc(1.2 * var(--leading)); }
.step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, var(--color-neutral-700), color-mix(in srgb, var(--color-neutral-700) 20%, transparent));
}
.step.is-lit::before { background: linear-gradient(to right, var(--color-accent), color-mix(in srgb, var(--color-accent) 10%, transparent)); }
.step-num {
  font-size: 12px; letter-spacing: 0.14em; font-feature-settings: "tnum" 1;
  color: var(--color-accent); margin: 0 0 var(--space-4);
}
.step h3 { font-size: 19px; margin: 0 0 var(--space-2); letter-spacing: -0.01em; }
.step p {
  font-size: 14.5px; line-height: 1.6; margin: 0;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

/* — casos de uso ─────────────────────────────────────────────────────── */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: color-mix(in srgb, var(--color-neutral-700) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neutral-700) 50%, transparent);
  border-radius: var(--radius-lg); overflow: hidden;
}
.case {
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  padding: calc(1.4 * var(--leading)) var(--space-8);
  min-height: 168px; display: flex; flex-direction: column; gap: var(--space-2);
  transition: background .3s ease;
}
.case:hover { background: color-mix(in srgb, var(--color-accent-900) 48%, var(--color-bg)); }
.case .tagline {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-400); margin: 0;
}
.case h3 { font-size: 20px; margin: var(--space-2) 0 0; letter-spacing: -0.01em; }
.case p {
  font-size: 14px; line-height: 1.6; margin: var(--space-2) 0 0;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

/* — confianza / control operativo ────────────────────────────────────── */
.trust {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: calc(1.5 * var(--leading)) clamp(32px, 5vw, 88px); align-items: center;
}
.trust-figure { margin: 0; position: relative; }
.trust-figure image-slot { width: 100%; aspect-ratio: 5 / 4; border-radius: var(--radius-lg); }
.control-list { list-style: none; margin: calc(1.4 * var(--leading)) 0 0; padding: 0; }
.control-list li {
  display: grid; grid-template-columns: 1fr; gap: var(--space-1);
  padding: var(--space-4) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-neutral-700) 60%, transparent);
}
.control-list li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-700) 60%, transparent); }
.control-list strong { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; }
.control-list span { font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 62%, transparent); }

/* — CTA final ────────────────────────────────────────────────────────── */
.close-band {
  position: relative; overflow: hidden;
  padding: calc(3.6 * var(--leading)) 0 calc(3.2 * var(--leading));
  background:
    radial-gradient(1000px 520px at 78% -40%,
      color-mix(in srgb, var(--color-accent-900) 82%, transparent), transparent 66%),
    radial-gradient(900px 620px at -8% 110%,
      color-mix(in srgb, black 32%, transparent), transparent 60%);
}
.close-band::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px calc(100% - 48px), transparent);
}
.close-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(2 * var(--leading)) clamp(32px, 6vw, 96px); align-items: start;
}
.form { display: grid; gap: var(--space-4); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form .seg { width: 100%; }
.form .seg-opt { flex: 1; justify-content: center; }
.form-actions { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-2); }
.form-note { font-size: 12.5px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 48%, transparent); margin: 0; max-width: 34ch; }
.form-ok {
  display: none; align-items: center; gap: 10px; font-size: 14px;
  color: var(--color-accent-300);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.form-ok.is-visible { display: flex; }

.contact-lines { list-style: none; margin: calc(1.6 * var(--leading)) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-3); font-size: 15px; }
.contact-lines li { display: flex; align-items: center; gap: 10px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.contact-lines svg { width: 16px; height: 16px; color: var(--color-accent); flex: none; }

/* — pie ──────────────────────────────────────────────────────────────── */
.site-foot {
  padding: calc(1.6 * var(--leading)) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  flex-wrap: wrap;
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 48%, transparent);
}
.site-foot nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { color: var(--color-accent); }

/* — aparición al hacer scroll ────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.22,.7,.2,1), transform .8s cubic-bezier(.22,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* — variantes controlables desde el componente ──────────────────────── */
[data-noreveal] .reveal { opacity: 1; transform: none; }
[data-highlight="compra"] .model--rent {
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  box-shadow: var(--shadow-sm);
}
[data-highlight="compra"] .model--buy {
  background:
    radial-gradient(600px 300px at 100% -20%,
      color-mix(in srgb, var(--color-accent-900) 78%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-surface) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 34%, transparent);
}
[data-highlight="compra"] .model--buy:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent), 0 16px 40px rgba(0,0,0,.5);
}

/* — responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1140px) {
  .hero { grid-template-columns: 1fr; padding-top: calc(2 * var(--leading)); }
  .stage { max-width: 420px; margin-inline: auto; }
  .display { font-size: clamp(40px, 6.4vw, 64px); font-size: clamp(40px, 8.6cqi, 64px); }
}
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(1.6 * var(--leading)); }
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .lede-split, .models, .trust, .close-grid { grid-template-columns: 1fr; }
  .trust-figure { order: -1; }
  .band .grid { grid-template-columns: repeat(2, 1fr); justify-content: start; }
}
@media (max-width: 560px) {
  .cases, .benefit-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}