/* ==========================================================================
   FLAKS Chrome — UI compartida que envuelve cada landing demo: la barra
   superior (logo + dropdown de rubros + WhatsApp) y el botón flotante
   "Volver a todas las demos". A propósito usa SIEMPRE los mismos colores de
   marca FLAKS, sin tomar nada de la paleta de la landing que envuelve — así
   se lee claramente como "de FLAKS", separado de la identidad visual de cada
   demo. Pensado para cargarse DESPUÉS del style.css propio de cada landing.
   ========================================================================== */

:root {
  --flaks-green: #00ff7f;
  --flaks-green-dark: #00cc66;
  --flaks-ink: #0a0e0c;
  --flaks-muted: #5c6b64;
  --flaks-line: #e7ece9;
  --flaks-bg: #ffffff;
}

/* ---------- Barra superior ---------- */
.flaks-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* Violeta típico de FLAKS: gradiente flaks-dark → flaks-dark-secondary. */
  background: linear-gradient(135deg, #110e1e 0%, #211545 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

.flaks-bar-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.flaks-bar-logo { height: 20px; width: auto; display: block; }

.flaks-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Dropdown de rubros */
.flaks-dropdown { position: relative; }

.flaks-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e8e4f5;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.flaks-dropdown-toggle:hover,
.flaks-dropdown.is-open .flaks-dropdown-toggle {
  border-color: var(--flaks-green);
  background: rgba(0, 255, 127, 0.12);
  color: var(--flaks-green);
}
.flaks-dropdown-toggle svg { transition: transform 0.2s ease; }
.flaks-dropdown.is-open .flaks-dropdown-toggle svg { transform: rotate(180deg); }

.flaks-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--flaks-line);
  border-radius: 14px;
  box-shadow: 0 20px 40px -18px rgba(10, 14, 12, 0.28);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.flaks-dropdown.is-open .flaks-dropdown-menu { display: flex; }

.flaks-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--flaks-ink);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease;
}
.flaks-dropdown-menu a:hover { background: #f2fbf6; }
.flaks-dropdown-menu a.is-current {
  color: var(--flaks-green-dark);
  font-weight: 700;
  background: rgba(0, 255, 127, 0.08);
  pointer-events: none;
}
.flaks-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}

/* Contactanos por WhatsApp (CTA de la barra FLAKS) */
.flaks-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25d366;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 7px 15px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.flaks-contact svg { flex-shrink: 0; }
.flaks-contact:hover {
  transform: translateY(-1px);
  background: #1fb959;
  box-shadow: 0 10px 22px -10px rgba(37, 211, 102, 0.6);
}

/* ---------- Flotante "volver a todas las demos" ---------- */
/* La animación de flotado vive en el SPAN interno (no en el link) para que el
   hover del link pueda usar su propia transición de transform sin pisarse con
   la animación infinita. */
.flaks-float-back {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 900;
  display: inline-block;
  text-decoration: none;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0 14px 32px -14px rgba(10, 14, 12, 0.35);
  border: 1px solid rgba(10, 14, 12, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.flaks-float-back:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(10, 14, 12, 0.4);
}

.flaks-float-back-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  color: var(--flaks-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  animation: flaks-float-bob 3.2s ease-in-out infinite;
}

.flaks-float-back-inner svg { flex-shrink: 0; }

@keyframes flaks-float-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .flaks-bar { padding: 9px 14px; }
  .flaks-dropdown-toggle span.flaks-label-full { display: none; }
  .flaks-contact span.flaks-label-full { display: none; }
  .flaks-contact { padding: 8px 11px; }
  .flaks-float-back { left: 14px; bottom: 14px; }
  .flaks-float-back-inner { padding: 11px 16px; font-size: 0.78rem; }
}