/* ============================================================
   BRAND JUNGLE — shell para las páginas de caso

   Header y footer del sitio, replicados para /work/*/.

   Va todo con valores literales y prefijo .bj- porque cada caso trae
   su propio <style> con sus variables, su reset y su paleta. Importar
   tokens.css o platform.css aquí sobrescribiría el diseño del cliente:
   Harmony es lima sobre negro, ExplorActive crema, Los Espíritus
   morado. El shell tiene que envolverlos sin tocarlos.

   Por la misma razón no se incluye el dock: el conmutador claro/oscuro
   no tiene sentido sobre una paleta de cliente fija.
   ============================================================ */

.bj-shell,
.bj-shell * { box-sizing: border-box; }

/* ---------- Header ---------- */
.bj-shell-header {
  position: sticky;
  top: 0;
  z-index: 200;
  padding: 1.25rem 0 0;
  background: transparent;
}

.bj-shell-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(1200px, 100% - clamp(2.5rem, 5vw, 5rem));
  margin: 0 auto;
  height: 64px;
  padding: 0 0.75rem 0 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 251, 248, 0.16);
  background: linear-gradient(140deg, rgba(18, 22, 3, 0.86), rgba(18, 22, 3, 0.66));
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: visible;
}

.bj-shell-brand {
  display: inline-flex;
  align-items: center;
  gap: 1.125rem;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  overflow: visible;
}

.bj-shell-logo {
  width: 78px;
  height: 78px;
  flex: none;
  display: block;
  margin: -7px 0;
  overflow: visible;
  filter: drop-shadow(0 0 16px rgba(156, 176, 1, 0.42));
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms ease;
}

/* Sin elevación ni giro: solo el destello del gradiente (corrección #3) */

.bj-shell-wordmark {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  color: #fafbf8;
  white-space: nowrap;
  line-height: 1;
  display: inline-block;
}

.bj-shell-wordmark span { font-weight: 400; }

.bj-shell-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bj-shell-links a {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: #fafbf8;
  padding-block: 0.375rem;
  position: relative;
}

.bj-shell-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #a9dc5c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bj-shell-links a:hover::after,
.bj-shell-links a:focus-visible::after { transform: scaleX(1); }

.bj-shell-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bj-shell-lang {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.bj-shell-lang a { color: rgba(250, 251, 248, 0.76); text-decoration: none; }
.bj-shell-lang a:hover { color: #fafbf8; }
.bj-shell-lang span { color: rgba(250, 251, 248, 0.34); }

/* CTA: mismo gradiente y regla de contraste que el resto del sitio */
.bj-shell-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.125rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #dcdc62 0%, #bcd94b 46%, #7fc24a 100%);
  color: #000200;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(220, 220, 98, 0.35), 0 8px 26px rgba(156, 176, 1, 0.34);
  transition: box-shadow 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bj-shell-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(220, 220, 98, 0.55), 0 12px 38px rgba(156, 176, 1, 0.52);
}

.bj-shell-back {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8125rem;
  color: rgba(250, 251, 248, 0.76);
  text-decoration: none;
}

.bj-shell-back:hover { color: #fafbf8; }

/* ---------- Footer ---------- */
.bj-shell-footer {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: clamp(3rem, 2.5rem + 2vw, 4.5rem) 0 2rem;
  border-top: 1px solid rgba(250, 251, 248, 0.14);
  background: linear-gradient(180deg, #0f1201 0%, #161b02 100%);
  color: #fafbf8;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* Rescoldo verde, igual que en el pie de la home */
.bj-shell-footer::before {
  content: "";
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 30% 88%, rgba(169, 220, 92, 0.30) 0%, rgba(169, 220, 92, 0) 62%),
    radial-gradient(34% 40% at 72% 96%, rgba(220, 220, 98, 0.20) 0%, rgba(220, 220, 98, 0) 60%);
  filter: blur(58px);
}

.bj-shell-footer::after {
  content: "";
  position: absolute;
  inset: 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%);
}

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

.bj-shell-foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2.5rem;
  width: min(1200px, 100% - clamp(1.25rem, 4vw, 2.5rem) * 2);
  margin: 0 auto;
}

.bj-shell-foot-logo { width: 56px; height: 56px; display: block; }

.bj-shell-foot-wordmark {
  margin: 1rem 0 0;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.16em;
  color: #fafbf8;
}

.bj-shell-foot-wordmark span { font-weight: 400; }

.bj-shell-tagline {
  margin: 0.375rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.0625rem;
  color: rgba(250, 251, 248, 0.70);
}

.bj-shell-foot-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bj-shell-foot-grid a {
  font-size: 0.875rem;
  color: rgba(250, 251, 248, 0.70);
  text-decoration: none;
  transition: color 200ms ease;
}

.bj-shell-foot-grid a:hover { color: #fafbf8; text-decoration: underline; text-underline-offset: 3px; }

.bj-shell-microline {
  width: min(1200px, 100% - clamp(1.25rem, 4vw, 2.5rem) * 2);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 251, 248, 0.14);
}

.bj-shell-microline p {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 251, 248, 0.52);
}

/* ---------- Adaptación ---------- */
@media (max-width: 899px) {
  .bj-shell-links { display: none; }
}

@media (max-width: 719px) {
  .bj-shell-logo { width: 74px; height: 74px; margin: -8px 0; }
  .bj-shell-wordmark { font-size: 0.8125rem; letter-spacing: 0.12em; }
  .bj-shell-foot-grid { grid-template-columns: 1fr; gap: 2rem; }
  .bj-shell-lang { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bj-shell-logo,
  .bj-shell-brand:hover .bj-shell-logo { transition: none; transform: none; }
}

/* ============================================================
   Blindaje contra el CSS propio de cada caso

   Los Espíritus estiliza con selectores de elemento —header{}, footer{},
   nav{}, ul{}— que alcanzan también al shell. Y su header es sticky en
   top:0, igual que el nuestro: dos barras peleando por el mismo sitio.

   Aquí se neutraliza sin tocar el CSS del cliente: el shell re-declara
   lo que pueda heredar, y el header del caso deja de ser sticky. Su nav
   sigue visible y funcional, pero scrollea con su página — que es lo
   correcto: es la maqueta del cliente dentro de nuestro marco, no una
   segunda barra de navegación del sitio.
   ============================================================ */

header.bj-shell-header {
  border: none;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  margin: 0;
  text-align: left;
}

footer.bj-shell-footer {
  text-align: left;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

/* El blindaje contra `nav{display:flex;gap:8px}` de Los Espíritus se acota
   al nav del PIE. El de la cabecera necesita ser flex, y con `.bj-shell nav`
   —especificidad (0,1,1)— yo le estaba ganando a `.bj-shell-nav` (0,1,0):
   el header dejaba de ser flex y los enlaces caían fuera de la píldora. */
.bj-shell-foot-grid nav { display: block; gap: 0; }

header.bj-shell-header nav.bj-shell-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.bj-shell ul { list-style: none; margin: 0; padding: 0; }
.bj-shell p { margin: 0; }

/* Un solo sticky en la página: el nuestro */
/* R37 #4 — .site-header quedaba atrapado por este blindaje: se escribio
   cuando los casos usaban .bj-shell-header, y tras la unificacion de la
   v3.6e el unico header del sitio es justo el que anulaba. Con position
   static el z-index:60 no aplica y el hero se le pintaba encima. */
body > header:not(.bj-shell-header):not(.site-header) {
  position: static !important;
  top: auto !important;
}


/* Tablet: 50px de margen a cada lado y menú replegado (correcciones #5–#7) */
@media (max-width: 1023px) {
  .bj-shell-nav { width: calc(100% - 100px); padding-right: 0.5rem; }
  .bj-shell-links { display: none; }
  .bj-shell-back { display: none; }
}

@media (max-width: 719px) {
  .bj-shell-header { padding-top: 0.875rem; }
  .bj-shell-nav { width: calc(100% - 2rem); }
  .bj-shell-logo { width: 66px; height: 66px; margin: -1px 0; }
  .bj-shell-brand { gap: 0.75rem; }
}


/* Los navlinks se declaran con especificidad suficiente para que ningún
   reset del caso (ul{}, nav{}, *{}) los pueda replegar por accidente. */
.bj-shell-nav ul.bj-shell-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1023px) {
  .bj-shell-nav ul.bj-shell-links { display: none; }
}

/* ============================================================
   DOCK en las páginas de caso

   Mismo widget que en la home: progreso de lectura, chat, idioma y CTA.
   Va con valores literales, como el resto del shell, porque estas
   páginas no cargan los tokens del sitio.

   Sin conmutador de tema: cada caso tiene la paleta fija del cliente
   —Harmony lima sobre negro, ExplorActive crema, Los Espíritus morado—
   y un botón claro/oscuro ahí solo cambiaría el marco, no la pieza.
   ============================================================ */
.bj-dock {
  position: fixed;
  right: clamp(0.875rem, 2vw, 1.5rem);
  bottom: clamp(0.875rem, 2vw, 1.5rem);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 251, 248, 0.16);
  background: linear-gradient(150deg, rgba(22, 27, 3, 0.92), rgba(12, 15, 1, 0.86));
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color: #fafbf8;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

.bj-dock .dock-progress {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
}

.bj-dock .dock-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.bj-dock .dock-ring circle { fill: none; stroke-width: 2.5; }
.bj-dock .ring-track { stroke: rgba(250, 251, 248, 0.16); }
.bj-dock .ring-fill {
  stroke: #a9dc5c;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p, 0));
  transition: stroke-dashoffset 160ms linear;
}

.bj-dock .dock-pct {
  font-size: 0.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bj-dock .dock-sep { width: 1px; height: 24px; background: rgba(250, 251, 248, 0.16); flex: none; }

.bj-dock .dock-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.bj-dock .dock-lang a { padding: 0.25rem 0.1875rem; color: rgba(250, 251, 248, 0.76); text-decoration: none; }
.bj-dock .dock-lang a:hover { color: #fafbf8; }
.bj-dock .dock-lang a[aria-current="true"] { color: #a9dc5c; }
.bj-dock .dock-lang > span { color: rgba(250, 251, 248, 0.34); }

.bj-dock .dock-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bj-dock .dock-btn:hover { background: rgba(156, 176, 1, 0.20); transform: translateY(-1px); }
.bj-dock .dock-btn:focus-visible { outline: 2px solid #a9dc5c; outline-offset: 2px; }
.bj-dock .dock-btn svg { width: 19px; height: 19px; }

.bj-dock .dock-chat { position: relative; }
.bj-dock .dock-chat::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #a9dc5c;
  box-shadow: 0 0 8px rgba(169, 220, 92, 0.9);
}
.bj-dock.chat-open .dock-chat::after { display: none; }

.bj-dock .dock-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 38px;
  padding: 0 0.9375rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #dcdc62 0%, #bcd94b 46%, #7fc24a 100%);
  color: #000200;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(220, 220, 98, 0.35), 0 8px 26px rgba(156, 176, 1, 0.34);
}
.bj-dock .dock-cta svg { width: 15px; height: 15px; }

/* Panel de chat */
.bj-chat-panel {
  position: fixed;
  right: clamp(0.875rem, 2vw, 1.5rem);
  bottom: calc(clamp(0.875rem, 2vw, 1.5rem) + 58px);
  z-index: 301;
  width: min(360px, calc(100vw - 1.75rem));
  max-height: min(540px, calc(100vh - 8rem));
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid rgba(250, 251, 248, 0.16);
  background: linear-gradient(150deg, rgba(22, 27, 3, 0.96), rgba(12, 15, 1, 0.92));
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
  color: #fafbf8;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 240ms ease, transform 240ms ease, visibility 240ms;
}
.bj-chat-panel.is-open { opacity: 1; visibility: visible; transform: none; }

.bj-chat-panel .chat-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 0.875rem 0.875rem 1.125rem;
  border-bottom: 1px solid rgba(250, 251, 248, 0.16);
}
.bj-chat-panel .chat-avatar {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, #dcdc62, #7fc24a);
  color: #000200;
}
.bj-chat-panel .chat-avatar svg { width: 17px; height: 17px; }
.bj-chat-panel .chat-title { font-size: 0.875rem; font-weight: 600; line-height: 1.2; }
.bj-chat-panel .chat-status { font-size: 0.6875rem; color: rgba(250, 251, 248, 0.70); }
.bj-chat-panel .chat-head .dock-btn { margin-left: auto; width: 30px; height: 30px; }

.bj-chat-panel .chat-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 1rem 1.125rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.bj-chat-panel .chat-msg { max-width: 84%; padding: 0.625rem 0.875rem; border-radius: 14px; font-size: 0.8125rem; line-height: 1.5; }
.bj-chat-panel .chat-msg-bot { align-self: flex-start; background: rgba(250, 251, 248, 0.075); border: 1px solid rgba(250, 251, 248, 0.14); border-bottom-left-radius: 5px; }
.bj-chat-panel .chat-msg-user { align-self: flex-end; background: linear-gradient(135deg, #dcdc62, #7fc24a); color: #000200; border-bottom-right-radius: 5px; }
.bj-chat-panel .chat-note { align-self: stretch; padding: 0.5rem 0.75rem; border-radius: 10px; border: 1px dashed rgba(250, 251, 248, 0.20); font-size: 0.6875rem; line-height: 1.45; color: rgba(250, 251, 248, 0.70); margin: 0; }
.bj-chat-panel .chat-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.bj-chat-panel .chat-chip { padding: 0.375rem 0.6875rem; border-radius: 999px; border: 1px solid rgba(250, 251, 248, 0.14); background: transparent; color: inherit; font-family: inherit; font-size: 0.6875rem; cursor: pointer; }
.bj-chat-panel .chat-chip:hover { border-color: #a9dc5c; background: rgba(156, 176, 1, 0.14); }

.bj-chat-panel .chat-form { display: flex; gap: 0.5rem; padding: 0.75rem 0.875rem; border-top: 1px solid rgba(250, 251, 248, 0.16); }
.bj-chat-panel .chat-input { flex: 1; min-width: 0; padding: 0.625rem 0.875rem; border-radius: 999px; border: 1px solid rgba(250, 251, 248, 0.14); background: rgba(250, 251, 248, 0.05); color: inherit; font-family: inherit; font-size: 0.8125rem; }
.bj-chat-panel .chat-input::placeholder { color: rgba(250, 251, 248, 0.52); }
.bj-chat-panel .chat-send { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: none; border-radius: 50%; background: linear-gradient(135deg, #dcdc62, #7fc24a); color: #000200; cursor: pointer; }
.bj-chat-panel .chat-send svg { width: 17px; height: 17px; }

@media (max-width: 599px) { .bj-dock .dock-cta span { display: none; } .bj-dock .dock-cta { padding: 0 0.75rem; } }
@media (max-width: 479px) { .bj-dock .dock-lang { display: none; } }
@media (max-height: 520px) { .bj-dock { display: none; } }


/* La barra ancla el centrado: cada pieza se alinea por sí misma */
header.bj-shell-header nav.bj-shell-nav > * { align-self: center; }
.bj-shell-brand { align-self: center; align-items: center; }
.bj-shell-logo { align-self: center; margin-block: -7px; margin-inline: 0; }
.bj-shell-wordmark { align-self: center; }

/* ============================================================
   Modo claro del shell

   El conmutador se replica de la home, así que tiene que hacer algo
   coherente. Cambia el marco de Brand Jungle —header, pie y dock— y
   deja intacta la pieza del cliente, que tiene su propia paleta fija.
   Un botón que no cambiara nada visible sería un control roto.
   ============================================================ */

/* ============================================================
   Burger del shell — paridad con la home

   El header de las páginas de caso repliega el menú por debajo de
   1024px igual que la home, así que necesita el mismo control para
   volver a abrirlo. Aquí el menú se despliega como panel bajo la
   píldora, porque no hay una barra lateral donde alojarlo.
   ============================================================ */
.bj-shell-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  margin-left: 0.5rem;
}

.bj-shell-toggle-bar {
  height: 2px;
  width: 22px;
  background: #fafbf8;
  border-radius: 2px;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}

.bj-shell-toggle[aria-expanded="true"] .bj-shell-toggle-bar:first-child {
  transform: translateY(4px) rotate(45deg);
}
.bj-shell-toggle[aria-expanded="true"] .bj-shell-toggle-bar:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.bj-shell-toggle:focus-visible { outline: 2px solid #a9dc5c; outline-offset: 2px; }

@media (max-width: 1023px) {
  .bj-shell-toggle { display: flex; }

  /* El menú desplegado cuelga de la píldora */
  .bj-shell-nav ul.bj-shell-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    padding: 0.5rem;
    border-radius: 18px;
    border: 1px solid rgba(250, 251, 248, 0.16);
    background: linear-gradient(140deg, rgba(18, 22, 3, 0.96), rgba(18, 22, 3, 0.88));
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  }

  .bj-shell-links.is-open li { width: 100%; }
  .bj-shell-links.is-open a {
    display: block;
    padding: 0.75rem 0.875rem;
    border-radius: 10px;
  }
  .bj-shell-links.is-open a:hover { background: rgba(156, 176, 1, 0.16); }
  .bj-shell-links.is-open a::after { display: none; }

  header.bj-shell-header nav.bj-shell-nav { position: relative; }
}

/* ============================================================
   Realce de los mockups

   Los mockups de laptop se pierden sobre fondo oscuro: el marco del
   dispositivo es casi negro y el borde no se distingue del fondo de la
   sección. Un resplandor verde detrás los separa y los identifica como
   pieza de producto.

   Va en ::before con z-index negativo para quedar detrás del marco sin
   tocar la estructura del caso, y con pointer-events desactivados para
   que no intercepte clics en los mockups interactivos.
   ============================================================ */
.laptop {
  position: relative;
  isolation: isolate;
}

.laptop::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14% -10% -22%;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 50% 46%, rgba(169, 220, 92, 0.42) 0%, rgba(169, 220, 92, 0) 70%),
    radial-gradient(72% 62% at 50% 58%, rgba(156, 176, 1, 0.30) 0%, rgba(156, 176, 1, 0) 72%),
    radial-gradient(96% 84% at 50% 66%, rgba(63, 122, 24, 0.24) 0%, rgba(63, 122, 24, 0) 76%);
  filter: blur(58px);
}

/* Un segundo halo, más ceñido, marca el filo del dispositivo */
.laptop::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2% -1.5% -6%;
  pointer-events: none;
  border-radius: 22px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(220, 220, 98, 0.20) 0%, rgba(220, 220, 98, 0) 72%);
  filter: blur(26px);
}

/* Respiración lenta: el resplandor no debe quedarse plano */
@media (prefers-reduced-motion: no-preference) {
  .laptop::before { animation: laptop-glow 9s ease-in-out infinite alternate; }
}

@keyframes laptop-glow {
  from { opacity: 0.82; transform: scale(1); }
  to { opacity: 1; transform: scale(1.035); }
}

/* En claro el resplandor se contiene: sobre papel un halo fuerte
   ensucia en vez de destacar. */

@media (max-width: 719px) {
  .laptop::before { filter: blur(34px); }
  .laptop::after { filter: blur(16px); }
}

/* ============================================================
   Iconografía propia de cada caso

   Cada marca lleva su propio juego de Phosphor y, sobre todo, su propio
   PESO: Harmony en bold —coherente con su lima agresiva de fintech— y
   ExplorActive en light, más aireado. Así se distinguen aunque algún
   día coincidiera un glifo, y ninguno repite los de Brand Jungle, que
   van en regular.

   El color lo toma cada caso de su propio acento, no del verde de
   Brand Jungle: el icono pertenece a la pieza del cliente.
   ============================================================ */
.case-ico {
  width: 18px;
  height: 18px;
  flex: none;
  display: inline-block;
  vertical-align: -0.22em;
  color: currentColor;
  opacity: 0.62;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.crm-nav-item { display: inline-flex; align-items: center; gap: 0.625rem; }

.crm-nav-item:hover .case-ico { opacity: 1; transform: translateX(1px); }

.crm-nav-item.is-active .case-ico,
.crm-nav-item.active .case-ico { opacity: 1; }

/* Harmony: lima propia */
.crm-nav-item.is-active .case-ico { color: #c7ff00; }

/* Los iconos del creador de piezas, algo mayores */
.asset-tile .case-ico,
.mini-feat .case-ico { width: 22px; height: 22px; }

@media (max-width: 719px) {
  .case-ico { width: 16px; height: 16px; }
}

/* ============================================================
   Ajustes de ExplorActive (ronda de revisión)

   Van aquí, no en el <style> del caso, para que sean reversibles sin
   tocar el archivo original y para que el orden de cascada los respalde.
   ============================================================ */

/* ---------- Indicador de scroll: más arriba y más presente ---------- */
.scroll-cue {
  bottom: 72px !important;
  opacity: 1 !important;
  gap: 12px !important;
}

.scroll-cue span,
.scroll-cue > *:first-child {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.scroll-cue svg,
.scroll-cue i {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue { animation: bj-scroll-bob 2.1s ease-in-out infinite; }
}

@keyframes bj-scroll-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 7px); }
}

/* ---------- Eyebrows más legibles ---------- */
.eyebrow-row .eyebrow {
  font-size: 15px;
  letter-spacing: 0.2em;
}

.eyebrow-dot {
  width: 11px;
  height: 11px;
}

/* ---------- Los dos teléfonos, exactamente iguales ----------
   El segundo llevaba un ancho en línea y su pantalla usaba min-height,
   así que cada uno medía lo que medía su contenido. Ahora el marco manda
   y el contenido se ajusta dentro. */
.tilt-phone {
  width: 250px !important;
  flex: none;
}

.tilt-phone .scr {
  height: 470px;
  min-height: 0 !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tilt-phone .scr::-webkit-scrollbar { width: 0; }
.tilt-phone .scr { scrollbar-width: none; }

/* ---------- Botones semifuncionales ----------
   No hacen nada, pero se comportan: responden al cursor, al foco y al
   clic. Un botón que no acusa recibo se lee como interfaz rota. */
.fx-bar,
.fx-review,
.flow-card,
.screen-cta,
.asset-tool,
.mini-feat {
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 180ms ease, filter 180ms ease;
}

.fx-bar:hover,
.fx-review:hover,
.flow-card:hover,
.screen-cta:hover,
.asset-tool:hover,
.mini-feat:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(26, 36, 16, 0.18);
  filter: brightness(1.03);
}

.fx-bar:active,
.fx-review:active,
.flow-card:active,
.screen-cta:active,
.asset-tool:active,
.mini-feat:active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 4px 10px rgba(26, 36, 16, 0.14);
}

.fx-pin { transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); cursor: pointer; }
.fx-pin:hover { transform: rotate(45deg) scale(1.35); }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
  .fx-bar, .fx-review, .flow-card, .screen-cta, .asset-tool, .mini-feat,
  .fx-pin { transition: none; }
}

/* ============================================================
   Mockup del sitio de ExplorActive
   ============================================================ */

/* ---------- Foco detrás del mockup ----------
   El .laptop ya lleva su resplandor general; este es el de la sección
   del sitio, más grande y más abierto, porque aquí el dispositivo ocupa
   casi todo el ancho y necesita separarse del fondo oscuro. */
.website-pin-inner {
  position: relative;
  isolation: isolate;
}

.website-pin-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18% -14% -26%;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 50% 44%, rgba(213, 253, 94, 0.34) 0%, rgba(213, 253, 94, 0) 68%),
    radial-gradient(70% 60% at 50% 56%, rgba(169, 220, 92, 0.26) 0%, rgba(169, 220, 92, 0) 74%),
    radial-gradient(100% 88% at 50% 66%, rgba(63, 122, 24, 0.20) 0%, rgba(63, 122, 24, 0) 78%);
  filter: blur(86px);
}

@media (prefers-reduced-motion: no-preference) {
  .website-pin-inner::before { animation: laptop-glow 11s ease-in-out infinite alternate; }
}

/* ---------- El eslogan respira ----------
   Estaba en line-height 1.05 y con una tipografía de pincel de
   ascendentes y descendentes largas: las dos líneas se tocaban. */
.mini-hero-copy h2 {
  line-height: 1.18;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.5);
}

/* ---------- El isotipo sube sobre el eslogan ----------
   Estaba abajo, encima del indicador de scroll y sobre la figura de la
   foto, donde se confundía con ella. Arriba del titular funciona como
   marca de agua del hero. */
.mini-hero-copy {
  flex-direction: column;
  gap: 1.4vw;
}

.mini-iso-walker {
  position: static !important;
  order: -1;
  width: 3.4vw !important;
  min-width: 26px !important;
  margin: 0 auto;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}

@media (max-width: 719px) {
  .mini-iso-walker { width: 30px !important; }
  .mini-hero-copy { gap: 10px; }
}

/* ============================================================
   Fotos de fondo de las pantallas: bajan para verse mejor

   Las fotos son 4:3 y la pantalla del mockup 16:10, así que con
   background-size:cover se recorta un 16,7% del alto. Estaba centrado
   —8,3% arriba y 8,3% abajo— y eso cortaba justo por donde pasa el
   sujeto: al surfista por la cabeza y al buzo por arriba.

   A 18% quedan 3 puntos arriba y 13,7 abajo: la imagen baja, entra el
   sujeto entero y no se descubre ningún borde.
   ============================================================ */
.mini-feature-bg {
  background-position: center 18% !important;
}

/* La foto del hero ya iba desplazada; se ajusta al mismo criterio */
.mini-hero-bg {
  background-position: center 52% !important;
}

/* La cabecera de las tarjetas de actividad tiene el mismo problema */
/* (el encuadre de .screen-top se define más abajo, a 12%) */

/* ============================================================
   ExplorActive · cierre del mockup y asistente del panel
   ============================================================ */

/* ---------- Última página del sitio: tres puertas de entrada ---------- */
.mini-outro {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4%;
  padding: 6% 7%;
  background: linear-gradient(160deg, #1a2410 0%, #0c1508 78%);
  color: #fff;
  text-align: center;
}

.mini-outro-copy h3 {
  font-family: "Brigantia", "Permanent Marker", cursive;
  font-size: clamp(18px, 3.2vw, 40px);
  line-height: 1.16;
  margin: 0;
}

.mini-outro-copy p {
  margin: 0.6em 0 0;
  font-size: clamp(9px, 1.15vw, 15px);
  color: rgba(255, 255, 255, 0.72);
}

.mini-outro-ctas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2%;
}

.mini-cta {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 5% 4%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 180ms ease, border-color 180ms ease;
}

.mini-cta:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.11);
}

.mini-cta b {
  font-size: clamp(9px, 1.25vw, 16px);
  letter-spacing: 0.16em;
}

.mini-cta span {
  font-size: clamp(7px, 0.95vw, 12px);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.66);
}

/* Cada puerta con su color de marca */
.mini-cta--explore { border-color: rgba(43, 100, 138, 0.7); }
.mini-cta--explore b { color: #7FB6D6; }
.mini-cta--inspire { border-color: rgba(235, 128, 104, 0.7); }
.mini-cta--inspire b { color: #EB8068; }
.mini-cta--connect { border-color: rgba(213, 253, 94, 0.7); }
.mini-cta--connect b { color: #D5FD5E; }

.mini-outro .mini-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding-top: 3%;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: clamp(7px, 0.9vw, 12px);
  color: rgba(255, 255, 255, 0.6);
}

.mini-footer-credit { color: rgba(213, 253, 94, 0.85); }

/* ---------- Panel del asistente ---------- */
.xa-chat { display: grid; gap: 14px; }

.xa-chat-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(26, 36, 16, 0.05);
  border: 1px solid rgba(26, 36, 16, 0.10);
}

.xa-msg {
  max-width: 78%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
}

.xa-msg--bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid rgba(26, 36, 16, 0.12);
  border-bottom-left-radius: 5px;
}

.xa-msg--user {
  align-self: flex-end;
  background: #2B648A;
  color: #fff;
  border-bottom-right-radius: 5px;
}

.xa-chat-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.xa-chip {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(26, 36, 16, 0.16);
  background: transparent;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.xa-chip:hover { background: rgba(213, 253, 94, 0.22); border-color: #A9C64A; transform: translateY(-1px); }

.xa-chat-form { display: flex; gap: 8px; }

.xa-chat-form input {
  flex: 1;
  min-width: 0;
  padding: 11px 15px;
  border-radius: 999px;
  border: 1px solid rgba(26, 36, 16, 0.16);
  font: inherit;
  font-size: 13px;
}

.xa-chat-form button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: #D5FD5E;
  cursor: pointer;
  transition: transform 180ms ease;
}

.xa-chat-form button:hover { transform: translateY(-1px) scale(1.04); }
.xa-send-ico { width: 18px; height: 18px; color: #1A2410; }

/* ---------- La foto del buzo baja dentro del mismo marco ----------
   Solo cambia el encuadre de la imagen: la interfaz y el recuadro
   visible se quedan exactamente donde están. */
/* (definido más abajo) */

/* ============================================================
   Banner de cierre del mockup de ExplorActive

   El marcado ya existía —titular, los tres CTA de marca y el crédito—
   pero solo estaba estilado `.mini-footer`. Sin reglas para el resto,
   la última pantalla del mockup se veía prácticamente vacía.
   ============================================================ */
.mini-outro {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4%;
  padding: 6% 7% 0;
  background: linear-gradient(165deg, #1a2410 0%, #0c1508 100%);
  color: var(--cream, #F7FAE8);
  text-align: center;
}

.mini-outro-copy h3 {
  margin: 0;
  font-size: clamp(18px, 3.2vw, 40px);
  line-height: 1.1;
  color: #fff;
}

.mini-outro-copy p {
  margin: 0.5em 0 0;
  font-size: clamp(9px, 1.15vw, 15px);
  opacity: 0.72;
}

.mini-outro-ctas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2%;
}

.mini-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35em;
  padding: 4% 4.5%;
  border-radius: 14px;
  border: 1px solid rgba(247, 250, 232, 0.16);
  background: rgba(247, 250, 232, 0.06);
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 180ms ease, background-color 180ms ease;
}

.mini-cta b {
  font-size: clamp(9px, 1.15vw, 14px);
  letter-spacing: 0.14em;
}

.mini-cta span {
  font-size: clamp(7px, 0.95vw, 12px);
  opacity: 0.66;
  line-height: 1.35;
}

.mini-cta:hover {
  transform: translateY(-2px);
  background: rgba(247, 250, 232, 0.11);
}

/* Cada puerta con el color que le corresponde en el sistema de marca */
.mini-cta--explore:hover { border-color: var(--sky, #7FB2C9); }
.mini-cta--explore b { color: var(--sky, #7FB2C9); }
.mini-cta--inspire:hover { border-color: var(--coral, #EB8068); }
.mini-cta--inspire b { color: var(--coral, #EB8068); }
.mini-cta--connect:hover { border-color: var(--lime, #D5FD5E); }
.mini-cta--connect b { color: var(--lime, #D5FD5E); }

.mini-footer {
  margin-top: auto;
  height: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 1em;
  padding: 3% 0;
  border-top: 1px solid rgba(247, 250, 232, 0.14);
  background: transparent !important;
  font-size: clamp(7px, 0.95vw, 12px);
  opacity: 1 !important;
}

.mini-footer-credit { opacity: 0.6; }

/* ============================================================
   La foto del buzo baja dentro del mismo recuadro
   Solo cambia el encuadre; ni la interfaz ni el marco se tocan.
   ============================================================ */
.screen-top { background-position: center 12% !important; }

/* Los Espíritus: sus accesos llevan el icono a la izquierda, en el oro
   de la marca. Peso thin, coherente con su registro. */
nav button .case-ico { vertical-align: -0.2em; margin-right: 0.4em; opacity: 0.7; }
nav button.active .case-ico { opacity: 1; color: var(--gold, #C9A15C); }

/* ============================================================
   RONDA v3.6 — el header del shell desbordaba en movil

   `.bj-shell-cta` lleva white-space:nowrap y `.bj-shell-right` no
   encogia, asi que a 360px el bloque derecho terminaba en x=464 y
   arrastraba scroll horizontal. Afectaba a las TRES paginas de caso
   (Harmony desbordaba 885px), no solo a la nueva.

   Se corrige en la hoja compartida: el idioma sale del header en
   movil (ya no hay ES), el CTA se reduce a su icono y la pildora
   deja de forzar ancho.
   ============================================================ */
.bj-shell-nav { max-width: 100%; min-width: 0; }
.bj-shell-right { min-width: 0; flex: 0 1 auto; }
.bj-shell-brand { min-width: 0; }

@media (max-width: 719px) {
  .bj-shell-right { gap: 0.5rem; }

  /* El switch de idioma se retiro del sitio en la ronda v3.6 */
  .bj-shell-lang { display: none; }

  .bj-shell-cta {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    gap: 0.375rem;
  }

  /* Solo el icono: el rotulo no cabe junto al burger */
  .bj-shell-cta span,
  .bj-shell-cta .bj-shell-cta-label { display: none; }

  .bj-shell-wordmark { font-size: 0.75rem; letter-spacing: 0.08em; }
}

@media (max-width: 419px) {
  .bj-shell-cta { display: none; }   /* el CTA vive tambien en el drawer */
}