/* ============================================================
   BRAND JUNGLE — CIERRE DE CASO (v3.6d, #45 · #46 · #63)

   Las tres paginas de caso terminan igual, con el tratamiento del
   CTA de la home. El cierre NO pertenece al cliente: es el momento
   en que la pagina deja de hablar de la marca y firma quien la hizo.
   Por eso va en verde Brand Jungle tambien en Los Espiritus.

   Se carga como hoja aparte para que las tres compartan una sola
   fuente y no puedan divergir.
   ============================================================ */
.bj-closer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(90px, 12vw, 150px) 0;
  text-align: center;
  color: #fafbf8;
  background: linear-gradient(180deg, #0f1201 0%, #161b02 50%, #0f1201 100%);
}

/* Capa de luz: la aurora del CTA de la home, misma composicion */
.bj-closer::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 68% 26%, rgba(169, 220, 92, 0.62) 0%, rgba(169, 220, 92, 0) 62%),
    radial-gradient(34% 40% at 18% 34%, rgba(220, 220, 98, 0.42) 0%, rgba(220, 220, 98, 0) 60%),
    radial-gradient(46% 52% at 40% 80%, rgba(156, 176, 1, 0.55) 0%, rgba(156, 176, 1, 0) 64%),
    radial-gradient(40% 44% at 90% 84%, rgba(63, 122, 24, 0.50) 0%, rgba(63, 122, 24, 0) 62%);
  background-size: 190% 190%;
  filter: blur(58px) saturate(1.35);
  will-change: transform, background-position;
  animation: bjc-flow 46s ease-in-out infinite alternate,
             bjc-drift 34s ease-in-out infinite alternate;
}

/* Velo de lectura */
.bj-closer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 96% at 50% 50%,
      rgba(12, 15, 1, 0.86) 0%, rgba(12, 15, 1, 0.70) 40%,
      rgba(12, 15, 1, 0.38) 72%, rgba(12, 15, 1, 0.08) 100%),
    linear-gradient(180deg, rgba(12, 15, 1, 0.55) 0%, rgba(12, 15, 1, 0) 22%,
      rgba(12, 15, 1, 0) 78%, rgba(12, 15, 1, 0.55) 100%);
}

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

@keyframes bjc-flow {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg)  scale(1.04); }
  50%  { transform: translate3d(3%, 3%, 0)   rotate(6deg)  scale(1.16); }
  100% { transform: translate3d(-2%, 4%, 0)  rotate(-5deg) scale(1.08); }
}
@keyframes bjc-drift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 40%; }
  100% { background-position: 30% 100%; }
}

.bj-closer .eyebrow,
.bj-closer .bjc-eyebrow {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #dcdc62;
  margin-bottom: 22px;
}

/* Titular en neon: nucleo casi blanco y tres halos verdes */
.bj-closer h2,
.bj-closer .bjc-title {
  font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.12;
  max-width: 22ch;
  margin: 0 auto;
  color: #fafbf8;
  text-shadow:
    0 0 6px rgba(250, 251, 248, 0.55),
    0 0 18px rgba(220, 220, 98, 0.85),
    0 0 42px rgba(169, 220, 92, 0.75),
    0 0 88px rgba(156, 176, 1, 0.55);
}

.bj-closer h2 span,
.bj-closer .bjc-title span { color: #dcdc62; }

html.js .bj-closer.is-lit h2,
html.js .bj-closer.is-lit .bjc-title {
  animation: bjc-strike 1100ms steps(1, end) both;
}

@keyframes bjc-strike {
  0%, 6%   { color: #929a84; text-shadow: none; }
  7%, 9%   { color: #fafbf8; text-shadow: 0 0 7px rgba(250,251,248,.5), 0 0 20px rgba(220,220,98,.7); }
  10%, 19% { color: #929a84; text-shadow: none; }
  20%, 26% { color: #fafbf8; text-shadow: 0 0 8px rgba(250,251,248,.6), 0 0 26px rgba(220,220,98,.85); }
  27%, 31% { color: #929a84; text-shadow: none; }
  32%, 34% { color: #fafbf8; text-shadow: 0 0 8px rgba(250,251,248,.6), 0 0 26px rgba(220,220,98,.85); }
  35%, 37% { color: #929a84; text-shadow: none; }
  38%, 41% { color: #fafbf8; text-shadow: 0 0 8px rgba(250,251,248,.6), 0 0 26px rgba(220,220,98,.85); }
  42%, 46% { color: #929a84; text-shadow: none; }
  47%, 100%{ color: #fafbf8;
             text-shadow: 0 0 6px rgba(250,251,248,.55), 0 0 18px rgba(220,220,98,.85),
                          0 0 42px rgba(169,220,92,.75), 0 0 88px rgba(156,176,1,.55); }
}

.bj-closer .bj-note,
.bj-closer .bjc-note {
  max-width: 58ch;
  margin: 24px auto 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(250, 251, 248, 0.74);
}

.bj-closer .closing-btn,
.bj-closer .bjc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 16px 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #dcdc62 0%, #bcd94b 46%, #7fc24a 100%);
  color: #000200;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(220, 220, 98, 0.35), 0 10px 34px rgba(156, 176, 1, 0.42);
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), box-shadow 260ms ease;
}

@media (hover: hover) {
  .bj-closer .closing-btn:hover,
  .bj-closer .bjc-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(220, 220, 98, 0.6), 0 16px 44px rgba(156, 176, 1, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bj-closer::before { animation: none; }
  html.js .bj-closer.is-lit h2,
  html.js .bj-closer.is-lit .bjc-title { animation: none; }
  .bj-closer .closing-btn, .bj-closer .bjc-btn { transition: none; }
}