/* ============================================================
   SCENES — escenas distintas para warranty → contacto
   Reemplaza el monolito dark-flow uniforme con un ritmo:
   dark vault · CREAM calendar · dark lounge · cream-island · dark dawn
============================================================ */

/* ── Liberar atmósferas que dark-flow estaba matando ────────── */
.dark-flow > * {
  background-image: none;
}
.dark-flow .warranty::before,
.dark-flow .warranty::after,
.dark-flow .capacity::before,
.dark-flow .capacity::after,
.dark-flow .faq::before,
.dark-flow .faq::after,
.dark-flow .contact::before,
.dark-flow .contact::after {
  display: block !important;
}

/* ════════════════════════════════════════════════════════════
   1 · WARRANTY · "Vault" — blueprint grid + sello esquina
════════════════════════════════════════════════════════════ */
.dark-flow .warranty {
  position: relative;
  background-color: #1F1612 !important;
  background-image:
    linear-gradient(rgba(245, 238, 233, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 238, 233, 0.022) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  background-position: -1px -1px !important;
}
.dark-flow .warranty::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 100% at 0% 50%, rgba(123, 160, 152, 0.10), transparent 60%),
    radial-gradient(ellipse 80% 50% at 100% 0%, rgba(242, 149, 128, 0.08), transparent 65%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(0, 0, 0, 0.45), transparent 70%) !important;
  pointer-events: none;
  z-index: 0;
}
/* Crosshairs en esquinas — marca de plano técnico */
.dark-flow .warranty::after {
  content: '' !important;
  position: absolute;
  inset: 2.5rem;
  background:
    linear-gradient(rgba(255, 213, 79, 0.35), rgba(255, 213, 79, 0.35)) top left / 16px 1px no-repeat,
    linear-gradient(rgba(255, 213, 79, 0.35), rgba(255, 213, 79, 0.35)) top left / 1px 16px no-repeat,
    linear-gradient(rgba(255, 213, 79, 0.35), rgba(255, 213, 79, 0.35)) top right / 16px 1px no-repeat,
    linear-gradient(rgba(255, 213, 79, 0.35), rgba(255, 213, 79, 0.35)) top right / 1px 16px no-repeat,
    linear-gradient(rgba(255, 213, 79, 0.35), rgba(255, 213, 79, 0.35)) bottom left / 16px 1px no-repeat,
    linear-gradient(rgba(255, 213, 79, 0.35), rgba(255, 213, 79, 0.35)) bottom left / 1px 16px no-repeat,
    linear-gradient(rgba(255, 213, 79, 0.35), rgba(255, 213, 79, 0.35)) bottom right / 16px 1px no-repeat,
    linear-gradient(rgba(255, 213, 79, 0.35), rgba(255, 213, 79, 0.35)) bottom right / 1px 16px no-repeat;
  pointer-events: none;
  z-index: 0;
}
.dark-flow .guarantee {
  position: relative;
  overflow: hidden;
}
.dark-flow .guarantee::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at top right, rgba(255, 213, 79, 0.12), transparent 65%);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   2 · CAPACITY (CUPOS) · "Calendar break" — escena cream
   Punto medio luminoso del recorrido. Rompe el dark.
════════════════════════════════════════════════════════════ */
.dark-flow .capacity {
  position: relative;
  background-color: #F5EEE9 !important;
  color: var(--forest) !important;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(38, 28, 22, 0.10) 1px, transparent 1.5px),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(242, 149, 128, 0.13), transparent 70%) !important;
  background-size: 28px 28px, 100% 100% !important;
  background-position: 0 0, 0 0 !important;
  /* franjas de transición arriba/abajo para suavizar el corte con dark */
  border-top: 1px solid rgba(38, 28, 22, 0.06);
  border-bottom: 1px solid rgba(38, 28, 22, 0.06);
}
.dark-flow .capacity::before {
  content: '' !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(31, 22, 18, 0.18), transparent);
  pointer-events: none;
  z-index: 0;
}
.dark-flow .capacity::after {
  content: '' !important;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(0deg, rgba(31, 22, 18, 0.18), transparent);
  pointer-events: none;
  z-index: 0;
  filter: none !important;
}
.dark-flow .capacity .eyebrow { color: var(--tomato) !important; }
.dark-flow .capacity__title { color: var(--forest) !important; }
.dark-flow .capacity__title em { color: var(--tomato) !important; }
.dark-flow .capacity__subcopy { color: var(--forest-a60) !important; }
.dark-flow .capacity-slot {
  background: #FAF4EE !important;
  border: 1px solid rgba(38, 28, 22, 0.08) !important;
  color: var(--forest) !important;
  box-shadow: 0 8px 22px -16px rgba(38, 28, 22, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dark-flow .capacity-slot:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -16px rgba(38, 28, 22, 0.32);
}
.dark-flow .capacity-slot__month { color: var(--forest-a60) !important; }
.dark-flow .capacity-slot__status { color: var(--forest) !important; }
.dark-flow .capacity-slot__detail { color: var(--forest-a60) !important; }
.dark-flow .capacity-slot--full .capacity-slot__status { color: var(--forest-a60) !important; }
.dark-flow .capacity-slot--low .capacity-slot__status { color: var(--tomato) !important; }
.dark-flow .capacity-slot--mid .capacity-slot__status { color: #B8730A !important; }
.dark-flow .capacity-slot--open .capacity-slot__status { color: #5A7A2E !important; }
.dark-flow .capacity__note { color: var(--forest-a60) !important; }
@media (prefers-reduced-motion: reduce) {
  .dark-flow .capacity-slot { transition: none; }
  .dark-flow .capacity-slot:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════
   3 · FAQ · "Lounge" — dark cálido + paper grain diagonal
════════════════════════════════════════════════════════════ */
.dark-flow .faq {
  position: relative;
  background-color: #1F1612 !important;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(245, 238, 233, 0.014) 0px,
      rgba(245, 238, 233, 0.014) 1px,
      transparent 1px,
      transparent 7px) !important;
}
.dark-flow .faq::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 55% at 18% 22%, rgba(123, 160, 152, 0.13), transparent 60%),
    radial-gradient(ellipse 50% 60% at 82% 78%, rgba(242, 149, 128, 0.10), transparent 65%) !important;
  pointer-events: none;
  filter: blur(6px);
  z-index: 0;
}

/* ════════════════════════════════════════════════════════════
   4 · QUIZ HABLEMOS · "Cream-island" ya implementado en quiz.css
   Solo añadimos un par de adornos flotantes alrededor.
════════════════════════════════════════════════════════════ */
.dark-flow #hablemos {
  position: relative;
}
.dark-flow #hablemos::after {
  content: '' !important;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 6px at 8% 12%, rgba(242, 149, 128, 0.6), transparent 70%),
    radial-gradient(circle 4px at 92% 18%, rgba(123, 160, 152, 0.6), transparent 70%),
    radial-gradient(circle 5px at 6% 88%, rgba(255, 213, 79, 0.5), transparent 70%),
    radial-gradient(circle 7px at 94% 82%, rgba(242, 149, 128, 0.5), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ════════════════════════════════════════════════════════════
   5 · CONTACT · "Dawn close" — aurora coral + horizon line
════════════════════════════════════════════════════════════ */
.dark-flow .contact {
  position: relative;
  background-color: #150F0B !important;
}
.dark-flow .contact::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 35% at 50% 18%, rgba(242, 40, 22, 0.30), transparent 60%),
    radial-gradient(ellipse 60% 30% at 50% 32%, rgba(242, 149, 128, 0.20), transparent 65%),
    radial-gradient(ellipse 30% 40% at 12% 72%, rgba(123, 160, 152, 0.16), transparent 65%),
    radial-gradient(ellipse 30% 40% at 88% 78%, rgba(242, 149, 128, 0.10), transparent 65%) !important;
  pointer-events: none;
  filter: blur(6px);
  z-index: 0;
}
.dark-flow .contact::after {
  content: '' !important;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 110%, rgba(0, 0, 0, 0.7), transparent 60%) !important;
  pointer-events: none;
  z-index: 0;
}
/* Línea de horizonte sobre el header */
.dark-flow .contact .contact__header {
  position: relative;
  padding-top: 1.2rem;
}
.dark-flow .contact .contact__header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 80%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(242, 149, 128, 0.55) 50%,
    transparent 100%);
}

/* ── Reduced motion: simplificar patrones ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dark-flow .warranty,
  .dark-flow .faq {
    background-image: none !important;
  }
  .dark-flow .warranty::after { display: none !important; }
  .dark-flow #hablemos::after { display: none !important; }
}