/*
 * Banana Friends · Web premium 2026
 * Capa exclusivamente visual. No modifica flujos, datos ni comportamiento.
 * La marca conserva su degradado rojo → naranja → dorado en web-shell.css.
 */

:root {
  color-scheme: light;
  --bf-bg: #f5f5f7;
  --bf-surface: #ffffff;
  --bf-surface-soft: #fafafa;
  --bf-ink: #161617;
  --bf-ink-soft: #3f3f43;
  --bf-muted: #76767d;
  --bf-line: rgba(22, 22, 23, 0.09);
  --bf-line-strong: rgba(22, 22, 23, 0.16);
  --bf-red: #ff004f;
  --bf-red-dark: #d90043;
  --bf-red-soft: #fff0f5;
  --bf-text-orange: #ff5a12;
  --bf-green: #248a5a;
  --bf-radius-xl: 32px;
  --bf-radius-lg: 24px;
  --bf-radius-md: 17px;
  --bf-radius-control: 14px;
  --bf-shadow-card:
    0 24px 70px rgba(21, 21, 23, 0.075), 0 3px 12px rgba(21, 21, 23, 0.035);
  --bf-shadow-float:
    0 30px 90px rgba(21, 21, 23, 0.16), 0 8px 24px rgba(21, 21, 23, 0.08);
  --bf-shadow-small:
    0 10px 30px rgba(21, 21, 23, 0.06), 0 2px 7px rgba(21, 21, 23, 0.025);
}

html {
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bf-bg);
  scroll-behavior: smooth;
}

body.bf-web-page {
  --accent: var(--bf-red);
  --accent-1: var(--bf-red);
  --accent-2: var(--bf-red);
  --accent-3: var(--bf-red);
  --accent-gradient: var(--bf-red);
  --feed-accent: var(--bf-red);
  --feed-accent-dark: var(--bf-red-dark);
  --plans-accent: var(--bf-red);
  --chat-accent: var(--bf-red);
  --notif-accent: var(--bf-red);
  min-height: 100vh !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--bf-bg) !important;
  color: var(--bf-ink) !important;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter,
    Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.bf-web-page * {
  box-sizing: border-box;
}

body.bf-web-page :where(button, input, textarea, select) {
  font: inherit;
}

body.bf-web-page :where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid rgba(255, 0, 79, 0.2) !important;
  outline-offset: 3px;
}

body.bf-web-page :where(button, a) {
  -webkit-tap-highlight-color: transparent;
}

body.bf-web-page :where(button, a):active {
  transform: scale(0.975);
}

/* --------------------------------------------------------------------------
   Navegación global · precisa, limpia y reconocible
   -------------------------------------------------------------------------- */

body.bf-web-page .bf-web-header {
  position: sticky !important;
  z-index: 1900 !important;
  top: 0 !important;
  width: 100% !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(22, 22, 23, 0.075) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 5px 24px rgba(21, 21, 23, 0.035) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
}

body.bf-web-page .bf-web-header-inner {
  width: min(calc(100% - (var(--bf-space-page) * 2)), 1180px) !important;
  max-width: 1180px !important;
  height: 76px !important;
  gap: 18px !important;
  margin: 0 auto !important;
}

body.bf-web-page .bf-web-brand {
  gap: 10px !important;
}

body.bf-web-page .bf-web-brand-mark {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(21, 21, 23, 0.075) !important;
}

body.bf-web-page .bf-web-brand-name {
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.055em !important;
}

body.bf-web-page .bf-web-search {
  width: auto !important;
  min-width: 270px !important;
  max-width: 500px !important;
  height: 46px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 15px !important;
  background: rgba(246, 246, 248, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease !important;
}

body.bf-web-page .bf-web-search:focus-within {
  border-color: rgba(255, 0, 79, 0.32) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255, 0, 79, 0.075) !important;
}

body.bf-web-page .bf-web-search input {
  font-size: 1rem !important;
  font-weight: 520 !important;
}

body.bf-web-page .bf-web-search-place {
  color: #65656c !important;
  font-size: 0.875rem !important;
}

body.bf-web-page .bf-web-search button {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: var(--bf-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
  transition:
    background 0.18s ease,
    transform 0.18s ease !important;
}

body.bf-web-page .bf-web-search button:hover {
  background: var(--bf-red) !important;
}

body.bf-web-page .bf-web-nav {
  gap: 22px !important;
}

body.bf-web-page .bf-web-nav a {
  padding: 28px 0 25px !important;
  color: #68686f !important;
  font-size: 1rem !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

body.bf-web-page .bf-web-nav a:hover,
body.bf-web-page .bf-web-nav a.is-active {
  color: var(--bf-ink) !important;
}

body.bf-web-page .bf-web-nav a.is-active::after {
  right: -3px !important;
  bottom: 16px !important;
  left: -3px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--bf-red) !important;
}

body.bf-web-page .bf-web-nav a[href="/conocer"],
body.bf-web-page .bf-web-mobile-menu a[href="/conocer"] {
  display: none !important;
}

body.bf-web-page .bf-web-actions {
  gap: 9px !important;
}

body.bf-web-page .bf-web-communication {
  position: relative !important;
  display: flex !important;
  width: 94px !important;
  height: 46px !important;
  align-items: center !important;
  padding: 3px !important;
  overflow: hidden !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 16px !important;
  background: rgba(245, 245, 247, 0.9) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 7px 18px rgba(21, 21, 23, 0.045) !important;
}

body.bf-web-page .bf-web-communication::before {
  display: none !important;
}

body.bf-web-page .bf-web-communication::after {
  position: absolute !important;
  z-index: 0 !important;
  top: 3px !important;
  left: 3px !important;
  width: 43px !important;
  height: 38px !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 5px 14px rgba(21, 21, 23, 0.09) !important;
  content: "" !important;
  opacity: 0 !important;
  transform: translate3d(0, 0, 0) scale(0.9) !important;
  transition:
    opacity 0.18s ease,
    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body.bf-web-page .bf-web-communication[data-bf-comm-target]::after {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

body.bf-web-page
  .bf-web-communication[data-bf-comm-target="notifications"]::after {
  transform: translate3d(43px, 0, 0) scale(1) !important;
}

body.bf-web-page .bf-web-icon-link {
  position: relative !important;
  z-index: 1 !important;
  width: 43px !important;
  height: 38px !important;
  flex: 0 0 43px !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: #55555b !important;
  transition:
    color 0.18s ease,
    transform 0.2s ease !important;
}

body.bf-web-page .bf-web-icon-link:hover,
body.bf-web-page .bf-web-icon-link.is-active {
  color: var(--bf-ink) !important;
}

body.bf-web-page .bf-web-icon-link:hover svg {
  transform: translateY(-1px) scale(1.06);
}

body.bf-web-page .bf-web-icon-link svg {
  width: 20px !important;
  height: 20px !important;
  transition: transform 0.2s ease !important;
}

body.bf-web-page .bf-web-badge,
body.bf-web-page .bf-web-dot,
body.bf-web-page .notif-dot,
body.bf-web-page .notification-unread-dot,
body.bf-web-page .chat-unread-dot {
  background: var(--bf-red) !important;
}

body.bf-web-page .bf-web-account {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  overflow: visible !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #202023 !important;
  box-shadow:
    0 0 0 1px var(--bf-line-strong),
    0 8px 20px rgba(21, 21, 23, 0.12) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

body.bf-web-page .bf-web-account::after {
  position: absolute;
  right: 5px;
  bottom: -4px;
  left: 5px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 0 0 999px 999px;
  background: rgba(255, 255, 255, 0.54);
  box-shadow: 0 5px 12px rgba(21, 21, 23, 0.12);
  content: "";
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.bf-web-page .bf-web-account:hover {
  box-shadow:
    0 0 0 1px var(--bf-line-strong),
    0 12px 28px rgba(21, 21, 23, 0.16) !important;
  transform: translateY(-1px);
}

body.bf-web-page .bf-web-account img,
body.bf-web-page .bf-web-account > span {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

@media (min-width: 941px) {
  body.bf-web-page .bf-web-header-inner {
    width: min(calc(100% - (var(--bf-space-page) * 2)), 1180px) !important;
    max-width: 1180px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body.bf-web-page .bf-web-nav {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  body.bf-web-page .bf-web-actions {
    margin-left: 0 !important;
  }

  body.bf-web-page .bf-web-menu-button {
    display: none !important;
  }
}

body.bf-web-page .bf-web-mobile-menu {
  border: 1px solid var(--bf-line) !important;
  border-radius: 23px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: var(--bf-shadow-float) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
}

body.bf-web-page .bf-web-mobile-menu a {
  border-radius: 14px !important;
  color: var(--bf-ink-soft) !important;
  font-size: 0.82rem !important;
}

body.bf-web-page .bf-web-mobile-menu a:hover,
body.bf-web-page .bf-web-mobile-menu a.is-active {
  background: #f2f2f4 !important;
  color: var(--bf-ink) !important;
}

body.bf-web-page .bf-web-mobile-create {
  background: var(--bf-red) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Controles y superficies comunes
   -------------------------------------------------------------------------- */

body.bf-web-page
  :is(
    .feed-create-button,
    .plans-create-button,
    .chat-new-button,
    .publish-btn,
    .create-submit,
    .pg-send,
    .save-btn,
    .avatar-btn,
    .location-btn,
    .edit-submit,
    .feed-login-gate-btn,
    .comment-login-btn,
    .radar-apply-btn,
    .bf-community-cta-plan
  ) {
  min-height: 46px !important;
  border: 1px solid var(--bf-red) !important;
  border-radius: 15px !important;
  background: var(--bf-red) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 11px 24px rgba(255, 0, 79, 0.19) !important;
  font-weight: 760 !important;
  text-shadow: none !important;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

body.bf-web-page
  :is(
    .feed-create-button,
    .plans-create-button,
    .chat-new-button,
    .publish-btn,
    .create-submit,
    .pg-send,
    .save-btn,
    .avatar-btn,
    .location-btn,
    .edit-submit,
    .feed-login-gate-btn,
    .comment-login-btn,
    .radar-apply-btn,
    .bf-community-cta-plan
  ):not(:disabled):hover {
  background: var(--bf-red-dark) !important;
  box-shadow: 0 15px 30px rgba(255, 0, 79, 0.23) !important;
  transform: translateY(-1px);
}

body.bf-web-page
  :is(
    .plan-join-btn,
    .pd-action-btn-primary,
    .send-btn,
    .gc-btn.primary,
    .edit-profile-btn
  ) {
  border-color: var(--bf-ink) !important;
  border-radius: 15px !important;
  background: var(--bf-ink) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.bf-web-page
  :is(
    .ui-modal-card,
    .glass-modal,
    .create-sheet,
    .edit-sheet,
    .edit-profile-sheet,
    .comments-sheet,
    .pg-sheet,
    .chat-sheet,
    .attach-sheet,
    .acts-sheet,
    .gc-panel
  ) {
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--bf-ink) !important;
  box-shadow: var(--bf-shadow-float) !important;
  backdrop-filter: blur(34px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(180%) !important;
}

body.bf-web-page :is(input, textarea, select) {
  color: var(--bf-ink);
}

/* --------------------------------------------------------------------------
   Portada · editorial y social, no una app estirada
   -------------------------------------------------------------------------- */

body.bf-page-home .bf-community-home {
  width: min(calc(100% - 48px), 1220px) !important;
  padding: 34px 0 80px !important;
}

body.bf-page-home .bf-community-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr) !important;
  min-height: 545px !important;
  overflow: hidden !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 34px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-card) !important;
}

body.bf-page-home .bf-community-cover {
  min-height: 545px !important;
}

body.bf-page-home .bf-community-cover::after {
  background: linear-gradient(
    180deg,
    rgba(10, 10, 12, 0.01) 42%,
    rgba(10, 10, 12, 0.48) 100%
  ) !important;
}

body.bf-page-home .bf-community-cover-label {
  bottom: 24px !important;
  left: 24px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(18, 18, 20, 0.48) !important;
  color: #fff !important;
  font-size: 0.7rem !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

body.bf-page-home .bf-community-cover-label > span {
  background: #ffbf36 !important;
}

body.bf-page-home .bf-community-summary {
  padding: 52px 48px 44px !important;
}

body.bf-page-home .bf-community-eyebrow {
  color: var(--bf-red-dark) !important;
  font-size: 0.7rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.13em !important;
}

body.bf-page-home .bf-community-summary h1 {
  max-width: 520px !important;
  font-size: clamp(2.65rem, 4vw, 4.1rem) !important;
  font-weight: 790 !important;
  letter-spacing: -0.065em !important;
  line-height: 0.98 !important;
}

body.bf-page-home .bf-community-summary > p:not(.bf-community-eyebrow) {
  max-width: 520px !important;
  margin-top: 20px !important;
  color: var(--bf-muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.58 !important;
}

body.bf-page-home .bf-community-facts {
  gap: 12px 20px !important;
  margin-top: 27px !important;
  padding-bottom: 27px !important;
  border-color: var(--bf-line) !important;
}

body.bf-page-home .bf-community-facts span {
  color: #55555b !important;
  font-size: 0.74rem !important;
}

body.bf-page-home .bf-community-share {
  width: 48px !important;
  height: 48px !important;
  border: 1px solid var(--bf-line-strong) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-home .bf-community-join {
  border-radius: 999px !important;
  background: var(--bf-red) !important;
  background-image: none !important;
  box-shadow: 0 12px 26px rgba(255, 0, 79, 0.2) !important;
}

body.bf-page-home .bf-community-member-state .bf-community-join.is-member {
  border: 1px solid rgba(22, 22, 23, 0.42) !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-home .bf-community-tabs {
  position: sticky !important;
  z-index: 1500 !important;
  top: 76px !important;
  min-height: 74px !important;
  margin-top: 18px !important;
  padding: 0 8px 0 20px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.87) !important;
  box-shadow: 0 10px 28px rgba(21, 21, 23, 0.05) !important;
  backdrop-filter: blur(24px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(175%) !important;
}

body.bf-page-home .bf-community-tabs nav {
  height: 72px !important;
  gap: 30px !important;
}

body.bf-page-home .bf-community-tabs nav a {
  color: #707076 !important;
  font-size: 0.79rem !important;
}

body.bf-page-home .bf-community-tabs nav a.is-active {
  color: var(--bf-ink) !important;
}

body.bf-page-home .bf-community-create-plan {
  height: 48px !important;
  border: 1px solid var(--bf-line-strong) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: none !important;
}

body.bf-page-home .bf-community-create-plan svg {
  background: var(--bf-red-soft) !important;
  color: var(--bf-red-dark) !important;
}

body.bf-page-home .bf-community-grid {
  grid-template-columns: minmax(0, 1fr) 330px !important;
  gap: 42px !important;
  padding-top: 54px !important;
}

body.bf-page-home .bf-community-heading {
  margin-bottom: 22px !important;
}

body.bf-page-home .bf-community-heading h2,
body.bf-page-home .bf-community-card h2 {
  color: var(--bf-ink) !important;
  font-weight: 790 !important;
  letter-spacing: -0.045em !important;
}

body.bf-page-home .bf-plan-list {
  gap: 16px !important;
}

body.bf-page-home .bf-plan-card {
  grid-template-columns: 210px minmax(0, 1fr) 108px !important;
  min-height: 178px !important;
  overflow: hidden !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-small) !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}

body.bf-page-home .bf-plan-card:hover {
  border-color: var(--bf-line-strong) !important;
  box-shadow: var(--bf-shadow-card) !important;
  transform: translateY(-3px) !important;
}

body.bf-page-home .bf-plan-body {
  padding: 23px 19px 19px 23px !important;
}

body.bf-page-home .bf-plan-actions a {
  border-radius: 12px !important;
  background: var(--bf-ink) !important;
}

body.bf-page-home .bf-community-card {
  padding: 26px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-home .bf-photo-grid a {
  border-radius: 18px !important;
  background: #ececef !important;
}

body.bf-page-home .bf-community-cta {
  min-height: 205px !important;
  margin-top: 68px !important;
  padding: 44px 48px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 30px !important;
  background: #171719 !important;
  box-shadow: var(--bf-shadow-card) !important;
}

body.bf-page-home .bf-community-cta h2 {
  font-size: clamp(2rem, 3.2vw, 3rem) !important;
}

/* --------------------------------------------------------------------------
   Feeds · lectura editorial, datos y publicación intactos
   -------------------------------------------------------------------------- */

body.bf-page-feeds > .feed {
  width: min(calc(100% - 48px), 1120px) !important;
  max-width: 1120px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 28px auto 70px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bf-page-feeds .feed-list-heading {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 18px !important;
  padding: 22px 24px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 23px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-feeds .feed-list-heading h1 {
  color: var(--bf-ink) !important;
  font-size: clamp(1.75rem, 3vw, 2.35rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.052em !important;
}

body.bf-page-feeds .feed-list-heading p {
  color: var(--bf-muted) !important;
}

body.bf-page-feeds .feed-stories {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 22px !important;
  padding: 18px 20px 16px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 23px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-feeds .story-ring {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(145deg, var(--bf-red), #ff5a12, #ffb000) border-box !important;
}

body.bf-page-feeds .feed-posts,
body.bf-page-feeds main.feed-posts {
  width: 100% !important;
  max-width: none !important;
  gap: 22px !important;
  padding: 0 0 60px !important;
  overflow: visible !important;
}

body.bf-page-feeds .feed-posts > article.post {
  width: min(100%, 680px) !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 26px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-card) !important;
  color: var(--bf-ink) !important;
  transition:
    box-shadow 0.22s ease,
    transform 0.22s ease !important;
}

body.bf-page-feeds .feed-posts > article.post:hover {
  box-shadow:
    0 28px 80px rgba(21, 21, 23, 0.1),
    0 4px 14px rgba(21, 21, 23, 0.04) !important;
  transform: translateY(-2px);
}

body.bf-page-feeds .feed-posts > article.post .post-media {
  border-radius: 25px 25px 0 0 !important;
  background: #0d0d0e !important;
}

body.bf-page-feeds .feed-posts > article.post .post-actions {
  border-radius: 0 0 25px 25px !important;
  background: #fff !important;
}

body.bf-page-feeds .post-action-btn,
body.bf-page-feeds .post-stats-btn--plain {
  border: 1px solid transparent !important;
  background: #f2f2f4 !important;
  color: var(--bf-ink) !important;
  box-shadow: none !important;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease !important;
}

body.bf-page-feeds .post-action-btn:hover,
body.bf-page-feeds .post-stats-btn--plain:hover {
  border-color: var(--bf-line-strong) !important;
  background: #fff !important;
  transform: translateY(-1px);
}

body.bf-page-feeds .plus-icon {
  color: var(--bf-red) !important;
}

body.bf-page-feeds
  :is(
    #globalSoundToggle.active,
    .media-viewer__sound.active,
    .post-sound-toggle.active
  ) {
  background: var(--bf-red) !important;
  box-shadow: 0 10px 26px rgba(255, 0, 79, 0.2) !important;
}

body.bf-page-profile input:checked + .switch {
  background: var(--bf-red) !important;
}

body.bf-page-feeds .like-btn.liked {
  background: var(--bf-red-soft) !important;
  color: var(--bf-red) !important;
}

body.bf-page-feeds .create-sheet,
body.bf-page-feeds .comments-sheet {
  width: min(calc(100% - 40px), 720px) !important;
  border-radius: 30px 30px 0 0 !important;
}

body.bf-page-feeds :is(.create-section-card, .feed-login-gate-card) {
  border: 1px solid var(--bf-line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Planes · una ficha completa por fila, ancho web real
   -------------------------------------------------------------------------- */

body.bf-page-planes > .app {
  width: min(calc(100% - 48px), 1180px) !important;
  max-width: 1180px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 28px auto 72px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  scroll-snap-type: none !important;
}

body.bf-page-planes .top-snap {
  width: 100% !important;
  scroll-snap-align: none !important;
}

body.bf-page-planes .filters {
  position: sticky !important;
  z-index: 1400 !important;
  top: 88px !important;
  width: fit-content !important;
  margin: 0 0 18px !important;
  padding: 5px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: var(--bf-shadow-small) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
}

body.bf-page-planes :is(.filter, .filter-map) {
  min-height: 44px !important;
  padding: 0 17px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: #66666d !important;
  font-size: 0.8rem !important;
  font-weight: 740 !important;
  box-shadow: none !important;
}

body.bf-page-planes :is(.filter, .filter-map).active {
  background: var(--bf-ink) !important;
  color: #fff !important;
}

body.bf-page-planes .plans-list-heading,
body.bf-page-planes .pg-head {
  width: 100% !important;
  margin: 0 0 22px !important;
  padding: 25px 26px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-planes .plans-eyebrow,
body.bf-page-planes .pg-sheet-kicker,
body.bf-page-planes .create-kicker {
  color: var(--bf-red-dark) !important;
}

body.bf-page-planes .plans-list-heading h1,
body.bf-page-planes .pg-title {
  color: var(--bf-ink) !important;
  font-size: clamp(1.9rem, 3.2vw, 2.55rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
}

body.bf-page-planes #planesActivitiesWrap,
body.bf-page-planes #planesRestaurantsWrap {
  display: none !important;
}

body.bf-page-planes .card {
  width: 100% !important;
  height: auto !important;
  min-height: 330px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 25px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-card) !important;
  scroll-snap-align: none !important;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease !important;
}

body.bf-page-planes .card:hover {
  border-color: var(--bf-line-strong) !important;
  box-shadow:
    0 30px 80px rgba(21, 21, 23, 0.105),
    0 4px 14px rgba(21, 21, 23, 0.04) !important;
  transform: translateY(-3px) !important;
}

body.bf-page-planes .card-image {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  height: auto !important;
  min-height: 330px !important;
  grid-template-columns: minmax(350px, 39%) minmax(0, 1fr) !important;
  overflow: visible !important;
  border-radius: 0 !important;
}

body.bf-page-planes .card-image > img {
  width: 100% !important;
  height: 100% !important;
  min-height: 330px !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.25, 1) !important;
}

body.bf-page-planes .card:hover .card-image > img {
  transform: scale(1.02) !important;
}

body.bf-page-planes .card-overlay {
  position: relative !important;
  inset: auto !important;
  min-width: 0 !important;
  min-height: 330px !important;
  padding: 24px 26px 22px !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
}

body.bf-page-planes .card-glass-meta {
  position: relative !important;
  inset: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--bf-ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.bf-page-planes .card-glass-meta::before {
  display: none !important;
}

body.bf-page-planes .meta-title {
  color: var(--bf-ink) !important;
  font-size: clamp(1.45rem, 2.3vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
}

body.bf-page-planes :is(.meta-subdesc, .meta-location, .meta-stats) {
  color: var(--bf-muted) !important;
}

body.bf-page-planes .plan-people-strip {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  margin-bottom: 18px !important;
  transform: none !important;
}

body.bf-page-planes :is(.plan-action-btn, .plan-details-btn) {
  min-width: 42px !important;
  min-height: 42px !important;
  border: 1px solid var(--bf-line-strong) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: none !important;
}

body.bf-page-planes :is(.plan-action-btn, .plan-details-btn):hover {
  background: #f3f3f5 !important;
}

body.bf-page-planes #planesGruposWrap {
  width: 100% !important;
  padding: 0 0 40px !important;
}

body.bf-page-planes .pg-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body.bf-page-planes .pg-item {
  min-height: 150px !important;
  padding: 17px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 21px !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: var(--bf-shadow-small) !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}

body.bf-page-planes .pg-item:hover {
  border-color: var(--bf-line-strong) !important;
  box-shadow: var(--bf-shadow-card) !important;
  transform: translateY(-3px) !important;
}

body.bf-page-planes :is(.pg-name, .pg-desc, .pg-meta) {
  color: var(--bf-ink) !important;
}

body.bf-page-planes :is(.pg-desc, .pg-meta) {
  color: var(--bf-muted) !important;
}

body.bf-page-planes .map-wrap {
  border: 1px solid var(--bf-line) !important;
  border-radius: 25px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-card) !important;
}

body.bf-page-planes
  :is(.pg-card, .create-section, .pg-field input, .pg-field textarea) {
  border-color: var(--bf-line) !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Notificaciones · jerarquía clara y estados discretos
   -------------------------------------------------------------------------- */

body.bf-page-notifications .notifications-view {
  width: min(calc(100% - 48px), 1120px) !important;
  max-width: 1120px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 28px auto 72px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bf-page-notifications .notifications-header {
  position: relative !important;
  top: auto !important;
  margin: 0 0 18px !important;
  padding: 23px 24px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-notifications .notifications-brand-copy .brand-mark-text {
  color: var(--bf-ink) !important;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.052em !important;
}

body.bf-page-notifications
  :is(
    .stat-card,
    .notif-search,
    .notif-pill,
    .notification-row,
    .notif-empty-state
  ) {
  border-color: var(--bf-line) !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-notifications :is(.stat-card, .notif-pill).is-active {
  border-color: var(--bf-ink) !important;
  background: var(--bf-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.bf-page-notifications .notification-row {
  border-radius: 20px !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}

body.bf-page-notifications .notification-row:hover {
  border-color: var(--bf-line-strong) !important;
  box-shadow: var(--bf-shadow-card) !important;
  transform: translateY(-2px);
}

body.bf-page-notifications .notification-row.unread {
  border-left: 4px solid var(--bf-red) !important;
  background: linear-gradient(90deg, var(--bf-red-soft), #fff 16%) !important;
}

body.bf-page-notifications :is(.notification-chip, .chip-actividad) {
  border-color: var(--bf-line) !important;
  background: #f2f2f4 !important;
  color: #56565c !important;
}

body.bf-page-notifications
  :is(.notification-category-badge, .notification-icon, .empty-state-icon)
  svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.8 !important;
}

/* --------------------------------------------------------------------------
   Lista de chats · amplitud y lectura de producto serio
   -------------------------------------------------------------------------- */

body.bf-page-chats > .feed {
  width: min(calc(100% - 48px), 1120px) !important;
  max-width: 1120px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 28px auto 72px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bf-page-chats .chat-native-title > span {
  color: var(--bf-red-dark) !important;
}

body.bf-page-chats
  :is(.chat-search, .chat-category-tabs, .events-section, .chats-section) {
  border: 1px solid var(--bf-line) !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-chats :is(.events-section, .chats-section) {
  border-radius: 24px !important;
}

body.bf-page-chats .chat-category-tabs button.active {
  background: var(--bf-ink) !important;
  color: #fff !important;
}

body.bf-page-chats .chat-item-wrapper {
  border-color: var(--bf-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  transition:
    background 0.18s ease,
    transform 0.18s ease !important;
}

body.bf-page-chats .chat-item-wrapper:hover {
  background: #f7f7f9 !important;
  transform: translateX(2px);
}

body.bf-page-chats :is(.rel-mini-btn.match, .rel-mini-btn.amigo) {
  border-color: var(--bf-line) !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
}

body.bf-page-chats .rel-mini-btn svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.8 !important;
}

/* --------------------------------------------------------------------------
   Conversaciones y grupos · escritorio contenido, móvil a pantalla completa
   -------------------------------------------------------------------------- */

body.bf-page-chat-conversation,
body.bf-page-group-chat {
  overflow: hidden !important;
  background: var(--bf-bg) !important;
}

body.bf-page-chat-conversation .chat-view,
body.bf-page-group-chat .chat-view {
  display: flex !important;
  width: min(calc(100% - 48px), 1100px) !important;
  max-width: 1100px !important;
  height: calc(100dvh - 116px) !important;
  min-height: 620px !important;
  flex-direction: column !important;
  margin: 20px auto !important;
  overflow: hidden !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-card) !important;
}

body.bf-page-chat-conversation .chat-header,
body.bf-page-group-chat .chat-header {
  position: relative !important;
  z-index: 3 !important;
  top: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bf-line) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--bf-ink) !important;
  box-shadow: none !important;
  backdrop-filter: blur(24px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(175%) !important;
}

body.bf-page-chat-conversation :is(.chat-user-name, .chat-user-lastseen),
body.bf-page-group-chat :is(.chat-user-name, .chat-user-lastseen) {
  color: var(--bf-ink) !important;
}

body.bf-page-chat-conversation .chat-user-lastseen,
body.bf-page-group-chat .chat-user-lastseen {
  color: var(--bf-muted) !important;
}

body.bf-page-chat-conversation .chat-messages,
body.bf-page-group-chat .chat-messages {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  background: #f2f2f4 !important;
  scrollbar-color: rgba(22, 22, 23, 0.18) transparent !important;
}

body.bf-page-chat-conversation .chat-bubble.me,
body.bf-page-group-chat .chat-bubble.me {
  border: 0 !important;
  border-radius: 19px 19px 5px 19px !important;
  background: var(--bf-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.bf-page-chat-conversation .chat-bubble.other,
body.bf-page-group-chat .chat-bubble.other {
  border: 1px solid var(--bf-line) !important;
  border-radius: 19px 19px 19px 5px !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: 0 5px 16px rgba(21, 21, 23, 0.04) !important;
}

body.bf-page-chat-conversation .chat-input,
body.bf-page-group-chat .chat-input {
  position: relative !important;
  inset: auto !important;
  z-index: 4 !important;
  flex: 0 0 auto !important;
  border-top: 1px solid var(--bf-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.bf-page-chat-conversation .chat-input textarea,
body.bf-page-group-chat .chat-input textarea {
  border: 1px solid var(--bf-line) !important;
  border-radius: 16px !important;
  background: #f3f3f5 !important;
  color: var(--bf-ink) !important;
  box-shadow: none !important;
}

body.bf-page-chat-conversation
  :is(.action-btn, .chat-block-btn, .attach-btn, .mic-btn),
body.bf-page-group-chat
  :is(.action-btn, .gc-settings-btn, .attach-btn, .mic-btn, .emoji-btn) {
  border: 1px solid var(--bf-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: none !important;
}

body.bf-page-group-chat :is(.gc-emoji, .gc-panel) {
  border: 1px solid var(--bf-line) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: var(--bf-ink) !important;
  box-shadow: 0 -24px 80px rgba(21, 21, 23, 0.2) !important;
}

body.bf-page-group-chat
  :is(
    .gc-card,
    .gc-member,
    .gc-emoji-search,
    .gc-emoji-tab,
    .gc-emoji-btn,
    .gc-desc textarea
  ) {
  border-color: var(--bf-line) !important;
  background: #f6f6f8 !important;
  color: var(--bf-ink) !important;
  box-shadow: none !important;
}

body.bf-page-group-chat .gc-emoji-tab.active {
  background: var(--bf-ink) !important;
  color: #fff !important;
}

body.bf-page-group-chat .gc-member-sub {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--bf-muted) !important;
}

body.bf-page-group-chat .gc-member-presence {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border-radius: 50% !important;
  background: #a6a6ab !important;
}

body.bf-page-group-chat .gc-member-presence.is-online {
  background: var(--bf-green) !important;
}

/* --------------------------------------------------------------------------
   Cuenta, perfil y ajustes · identidad personal, no panel genérico
   -------------------------------------------------------------------------- */

body.bf-page-cuenta .cuenta-page-heading,
body.bf-page-cuenta > .profile,
body.bf-page-profile .profile-page-shell {
  width: min(calc(100% - 48px), 1120px) !important;
  max-width: 1120px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

body.bf-page-cuenta .cuenta-page-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-top: 28px !important;
  margin-bottom: 18px !important;
  padding: 23px 25px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 23px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-cuenta .cuenta-page-eyebrow,
body.bf-page-settings .settings-page-eyebrow {
  display: block !important;
  margin-bottom: 7px !important;
  color: var(--bf-red-dark) !important;
  font-size: 0.7rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
}

body.bf-page-cuenta .cuenta-page-heading h1,
body.bf-page-settings .feed-logo {
  margin: 0 !important;
  color: var(--bf-ink) !important;
  font-size: clamp(2rem, 3.2vw, 2.65rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
}

body.bf-page-cuenta .cuenta-page-heading p,
body.bf-page-settings .settings-page-copy {
  margin: 8px 0 0 !important;
  color: var(--bf-muted) !important;
  font-size: 0.9rem !important;
}

body.bf-page-cuenta .cuenta-page-shortcuts {
  display: flex !important;
  gap: 9px !important;
}

body.bf-page-cuenta .cuenta-page-shortcuts a {
  position: relative !important;
  display: inline-flex !important;
  min-height: 44px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  border: 1px solid var(--bf-line-strong) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: none !important;
  font-size: 0.78rem !important;
  font-weight: 740 !important;
  text-decoration: none !important;
}

body.bf-page-cuenta .cuenta-page-shortcuts svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
}

body.bf-page-cuenta > .profile,
body.bf-page-profile .profile {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 28px !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: var(--bf-shadow-card) !important;
}

body.bf-page-cuenta > .profile::before,
body.bf-page-profile .profile::before {
  display: block !important;
  height: 116px !important;
  margin: -24px -24px 0 !important;
  background:
    radial-gradient(circle at 18% 0, rgba(255, 176, 0, 0.18), transparent 38%),
    radial-gradient(circle at 78% 20%, rgba(255, 0, 79, 0.14), transparent 40%),
    #f1f1f3 !important;
  content: "" !important;
}

body.bf-page-cuenta > .profile {
  margin-bottom: 72px !important;
  padding: 24px !important;
}

body.bf-page-cuenta .profile-header,
body.bf-page-profile .profile-header {
  position: relative !important;
  z-index: 1 !important;
  margin-top: -54px !important;
}

body.bf-page-cuenta .profile-avatar img,
body.bf-page-profile .profile-avatar img {
  border: 5px solid #fff !important;
  box-shadow:
    0 0 0 1px var(--bf-line),
    0 14px 34px rgba(21, 21, 23, 0.14) !important;
}

body.bf-page-cuenta :is(.profile-name, .profile-bio p, .stat strong),
body.bf-page-profile :is(.profile-name, .profile-bio p, .stat strong) {
  color: var(--bf-ink) !important;
}

body.bf-page-cuenta :is(.profile-bio p, .stat span),
body.bf-page-profile :is(.profile-bio p, .stat span) {
  color: var(--bf-muted) !important;
}

body.bf-web-page .profile-location {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--bf-muted) !important;
}

body.bf-web-page .profile-location svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.8 !important;
}

body.bf-page-cuenta .profile-actions,
body.bf-page-profile .profile-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.bf-page-cuenta .cuenta-logout-form {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

body.bf-page-cuenta .cuenta-logout-button {
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(201, 0, 62, 0.24) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #c9003e !important;
  box-shadow: none !important;
  font-size: 0.8rem !important;
  font-weight: 750 !important;
}

body.bf-page-cuenta .profile-tabs-wrapper,
body.bf-page-profile .profile-tabs-wrapper {
  top: 76px !important;
  padding: 12px 0 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}

body.bf-page-cuenta .profile-tabs-modern,
body.bf-page-profile .profile-tabs-modern {
  border: 1px solid var(--bf-line) !important;
  border-radius: 16px !important;
  background: #f1f1f3 !important;
  box-shadow: none !important;
}

body.bf-page-cuenta .tab-indicator,
body.bf-page-profile .tab-indicator {
  background: var(--bf-ink) !important;
  box-shadow: none !important;
}

body.bf-page-cuenta .tab-modern.active,
body.bf-page-profile .tab-modern.active {
  color: #fff !important;
}

body.bf-page-cuenta :is(.event-card-pro, .friend-card, .profile-empty),
body.bf-page-profile
  :is(.event-card-pro, .friend-card, .group-card, .profile-empty) {
  border: 1px solid var(--bf-line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-profile {
  overflow-y: auto !important;
}

body.bf-page-profile .profile-page-shell {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 28px !important;
  margin-bottom: 72px !important;
  overflow: visible !important;
  background: transparent !important;
}

body.bf-page-profile .perfil-topbar {
  position: relative !important;
  top: auto !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-profile .profile-page-content {
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
}

body.bf-page-profile .profile {
  padding: 24px !important;
}

body.bf-page-settings .settings-page-heading,
body.bf-page-settings .settings {
  width: min(calc(100% - 48px), 980px) !important;
  max-width: 980px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

body.bf-page-settings .settings-page-heading {
  position: relative !important;
  top: auto !important;
  margin-top: 28px !important;
  margin-bottom: 18px !important;
  padding: 23px 25px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 23px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-settings .settings {
  margin-top: 0 !important;
  margin-bottom: 72px !important;
}

body.bf-page-settings :is(.settings-profile, .settings-banners) {
  border: 1px solid var(--bf-line) !important;
  border-radius: 23px !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-settings .settings-banner {
  min-height: 58px !important;
  border-color: var(--bf-line) !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
}

body.bf-page-settings .settings-banner:hover {
  background: #f7f7f9 !important;
}

body.bf-page-settings .settings-banner.danger {
  color: #c9003e !important;
}

/* Iconos formales para sonido en las publicaciones de Cuenta. */
body.bf-page-cuenta #posts .sound-icon::before {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161617' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5Z'/%3E%3Cpath d='m22 9-6 6M16 9l6 6'/%3E%3C/svg%3E") !important;
  content: "" !important;
}

body.bf-page-cuenta #posts .sound-icon--on::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161617' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5Z'/%3E%3Cpath d='M15 9.5a4 4 0 0 1 0 5M18 7a7 7 0 0 1 0 10'/%3E%3C/svg%3E") !important;
}

/* --------------------------------------------------------------------------
   Búsqueda, detalle de plan y modales de acceso compartidos
   -------------------------------------------------------------------------- */

body.bf-page-search .bf-search-result,
body.bf-page-plan-detail :is(.pd-hero-card, .pd-card) {
  border-color: var(--bf-line) !important;
  border-radius: 22px !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-web-page .bf-auth-gate-card {
  width: min(calc(100vw - 56px), 1040px) !important;
  height: min(760px, calc(100dvh - 56px)) !important;
  max-width: 1040px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 40px 120px rgba(14, 14, 16, 0.28) !important;
  backdrop-filter: blur(34px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(180%) !important;
}

body.bf-web-page .bf-auth-gate-header {
  border-bottom-color: var(--bf-line) !important;
  background: #fff !important;
}

body.bf-web-page .bf-auth-gate-switch {
  border: 1px solid var(--bf-line) !important;
  background: #f1f1f3 !important;
}

body.bf-web-page .bf-auth-gate-switch button.is-active {
  background: var(--bf-ink) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Responsive · se conserva la jerarquía, no se encoge una app de escritorio
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  body.bf-web-page .bf-web-header-inner {
    gap: 13px !important;
  }

  body.bf-web-page .bf-web-search {
    min-width: 220px !important;
  }

  body.bf-web-page .bf-web-search-place {
    display: none !important;
  }

  body.bf-page-home .bf-community-hero {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.9fr) !important;
  }

  body.bf-page-planes .pg-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 940px) {
  body.bf-web-page .bf-web-header-inner {
    width: calc(100% - (var(--bf-space-page) * 2)) !important;
    height: 70px !important;
  }

  body.bf-page-home .bf-community-hero {
    grid-template-columns: 1fr !important;
  }

  body.bf-page-home .bf-community-cover {
    min-height: 390px !important;
  }

  body.bf-page-home .bf-community-summary {
    padding: 42px !important;
  }

  body.bf-page-home .bf-community-tabs {
    top: 70px !important;
  }

  body.bf-page-home .bf-community-grid {
    grid-template-columns: 1fr !important;
  }

  body.bf-page-home .bf-community-aside {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.bf-page-planes .filters {
    top: 82px !important;
  }

  body.bf-page-planes .card-image {
    grid-template-columns: minmax(280px, 36%) minmax(0, 1fr) !important;
  }
}

@media (max-width: 680px) {
  body.bf-web-page .bf-web-header-inner {
    width: calc(100% - 20px) !important;
    height: 66px !important;
    gap: 8px !important;
  }

  body.bf-web-page .bf-web-brand-mark {
    width: 39px !important;
    height: 39px !important;
  }

  body.bf-web-page .bf-web-communication {
    width: 86px !important;
    height: 44px !important;
  }

  body.bf-web-page .bf-web-icon-link {
    width: 39px !important;
    height: 36px !important;
    flex-basis: 39px !important;
  }

  body.bf-web-page .bf-web-communication::after {
    width: 39px !important;
    height: 36px !important;
  }

  body.bf-web-page
    .bf-web-communication[data-bf-comm-target="notifications"]::after {
    transform: translate3d(39px, 0, 0) scale(1) !important;
  }

  body.bf-page-home .bf-community-home,
  body.bf-page-feeds > .feed,
  body.bf-page-planes > .app,
  body.bf-page-chats > .feed,
  body.bf-page-notifications .notifications-view,
  body.bf-page-cuenta .cuenta-page-heading,
  body.bf-page-cuenta > .profile,
  body.bf-page-profile .profile-page-shell,
  body.bf-page-settings .settings-page-heading,
  body.bf-page-settings .settings {
    width: calc(100% - 16px) !important;
    max-width: none !important;
  }

  body.bf-page-home .bf-community-home {
    padding-top: 12px !important;
  }

  body.bf-page-home .bf-community-hero {
    border-radius: 25px !important;
  }

  body.bf-page-home .bf-community-cover {
    min-height: 245px !important;
  }

  body.bf-page-home .bf-community-summary {
    padding: 27px 21px 24px !important;
  }

  body.bf-page-home .bf-community-summary h1 {
    font-size: clamp(2.15rem, 10vw, 3rem) !important;
  }

  body.bf-page-home .bf-community-hero-footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body.bf-page-home .bf-community-buttons {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  body.bf-page-home .bf-community-tabs {
    top: 66px !important;
    min-height: 62px !important;
    margin-top: 10px !important;
    padding-inline: 14px !important;
    overflow: hidden !important;
    border-radius: 19px !important;
  }

  body.bf-page-home .bf-community-tabs nav {
    height: 60px !important;
    gap: 22px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  body.bf-page-home .bf-community-grid {
    gap: 34px !important;
    padding-top: 34px !important;
  }

  body.bf-page-home .bf-plan-card {
    grid-template-columns: 1fr !important;
  }

  body.bf-page-home .bf-plan-image {
    min-height: 220px !important;
  }

  body.bf-page-home .bf-plan-actions {
    align-items: center !important;
    flex-direction: row !important;
    padding: 0 18px 18px !important;
  }

  body.bf-page-home .bf-community-aside {
    display: flex !important;
  }

  body.bf-page-home .bf-community-cta {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 32px 25px !important;
  }

  body.bf-page-feeds > .feed,
  body.bf-page-planes > .app,
  body.bf-page-chats > .feed,
  body.bf-page-notifications .notifications-view,
  body.bf-page-profile .profile-page-shell {
    margin-top: 12px !important;
  }

  body.bf-page-feeds .feed-list-heading,
  body.bf-page-planes .plans-list-heading,
  body.bf-page-planes .pg-head,
  body.bf-page-notifications .notifications-header,
  body.bf-page-cuenta .cuenta-page-heading,
  body.bf-page-settings .settings-page-heading {
    padding: 19px !important;
    border-radius: 20px !important;
  }

  body.bf-page-feeds .feed-stories {
    padding-inline: 13px !important;
    border-radius: 21px !important;
  }

  body.bf-page-feeds .feed-posts,
  body.bf-page-feeds main.feed-posts {
    gap: 15px !important;
  }

  body.bf-page-feeds .feed-posts > article.post {
    max-width: none !important;
    border-radius: 23px !important;
  }

  body.bf-page-feeds .feed-posts > article.post .post-media {
    border-radius: 22px 22px 0 0 !important;
  }

  body.bf-page-feeds .feed-posts > article.post .post-actions {
    border-radius: 0 0 22px 22px !important;
  }

  body.bf-page-feeds .create-sheet,
  body.bf-page-feeds .comments-sheet,
  body.bf-page-planes .create-sheet,
  body.bf-page-planes .pg-sheet,
  body.bf-page-chat-conversation .attach-sheet,
  body.bf-page-group-chat .attach-sheet {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 28px 28px 0 0 !important;
  }

  body.bf-page-planes .filters {
    top: 76px !important;
    width: 100% !important;
    overflow-x: auto !important;
  }

  body.bf-page-planes .card {
    min-height: 0 !important;
    border-radius: 21px !important;
  }

  body.bf-page-planes .card-image {
    display: block !important;
    min-height: 0 !important;
  }

  body.bf-page-planes .card-image > img {
    height: 235px !important;
    min-height: 235px !important;
  }

  body.bf-page-planes .card-overlay {
    min-height: 0 !important;
    padding: 19px 17px 17px !important;
  }

  body.bf-page-planes .pg-list {
    grid-template-columns: 1fr !important;
  }

  body.bf-page-cuenta .cuenta-page-heading {
    display: grid !important;
    align-items: start !important;
    gap: 15px !important;
    margin-top: 12px !important;
  }

  body.bf-page-cuenta .cuenta-page-shortcuts {
    width: 100% !important;
  }

  body.bf-page-cuenta .cuenta-page-shortcuts a {
    flex: 1 !important;
    justify-content: center !important;
  }

  body.bf-page-cuenta > .profile,
  body.bf-page-profile .profile {
    padding: 15px !important;
    border-radius: 22px !important;
  }

  body.bf-page-cuenta > .profile::before,
  body.bf-page-profile .profile::before {
    margin: -15px -15px 0 !important;
  }

  body.bf-page-cuenta .profile-actions,
  body.bf-page-profile .profile-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body.bf-page-cuenta .cuenta-logout-form,
  body.bf-page-cuenta .cuenta-logout-button {
    width: 100% !important;
  }

  body.bf-page-chat-conversation .chat-view,
  body.bf-page-group-chat .chat-view {
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - 66px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body.bf-web-page .bf-auth-gate-card {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
}

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

  body.bf-web-page *,
  body.bf-web-page *::before,
  body.bf-web-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Vibes / Flips · lienzo vertical de creadores
   -------------------------------------------------------------------------- */

body.bf-page-vibes {
  height: 100dvh !important;
  overflow: hidden !important;
  background: #fff !important;
}

body.bf-page-vibes > .bf-web-header {
  display: none !important;
}

body.bf-page-vibes .creator-header.header {
  border-bottom: 1px solid var(--bf-line) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 8px 28px rgba(21, 21, 23, 0.045) !important;
  backdrop-filter: blur(28px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(175%) !important;
}

body.bf-page-vibes .creator-header .planes-logo-mark {
  border: 1px solid var(--bf-line) !important;
  background: #fff !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-vibes .creator-mode-switch {
  border: 1px solid var(--bf-line) !important;
  background: #f1f1f3 !important;
}

body.bf-page-vibes .creator-mode-switch a.active {
  background: var(--bf-ink) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(21, 21, 23, 0.14) !important;
}

body.bf-page-vibes :is(.creator-top-create, .action-btn.notify) {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--bf-ink) !important;
  box-shadow: var(--bf-shadow-small) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

body.bf-page-vibes :is(.creator-top-create, .action-btn.notify):hover {
  border-color: rgba(255, 0, 79, 0.2) !important;
  background: var(--bf-red-soft) !important;
  color: var(--bf-red-dark) !important;
  transform: translateY(-2px) !important;
}

body.bf-page-vibes .creator-search {
  border: 1px solid var(--bf-line) !important;
  border-radius: 17px !important;
  background: #f6f6f8 !important;
  box-shadow: none !important;
}

body.bf-page-vibes .creator-search:focus-within {
  border-color: rgba(255, 0, 79, 0.3) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255, 0, 79, 0.07) !important;
}

body.bf-page-vibes .creator-search-submit {
  border-radius: 13px !important;
  background: var(--bf-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.bf-page-vibes .creator-action {
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
}

/* --------------------------------------------------------------------------
   Conocer · ruta preparada para su lanzamiento futuro
   -------------------------------------------------------------------------- */

body.bf-page-conocer {
  --discover-accent: var(--bf-red) !important;
  background: var(--bf-bg) !important;
}

body.bf-page-conocer .discover-native-toolbar {
  width: min(calc(100% - 40px), 1080px) !important;
  margin: 28px auto 18px !important;
  padding: 22px 24px !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: var(--bf-radius-lg) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: var(--bf-shadow-small) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}

body.bf-page-conocer .discover-native-toolbar h1 {
  font-size: clamp(1.85rem, 4vw, 2.6rem) !important;
  font-weight: 850 !important;
  letter-spacing: -0.055em !important;
}

body.bf-page-conocer #openDiscoverFilters {
  border: 1px solid var(--bf-line) !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: var(--bf-ink) !important;
  box-shadow: var(--bf-shadow-small) !important;
}

body.bf-page-conocer .discover-card {
  border: 1px solid var(--bf-line) !important;
  border-radius: 30px !important;
  background-color: #e9e9ec !important;
  box-shadow: var(--bf-shadow-float) !important;
}

body.bf-page-conocer
  .discover-actions
  :is(.btn-discard, .btn-like-friend, .btn-like-match) {
  border: 1px solid var(--bf-line) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 34px rgba(21, 21, 23, 0.14) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
}

body.bf-page-conocer .discover-actions .btn-like-match {
  background: var(--bf-red) !important;
  color: #fff !important;
}

body.bf-page-conocer
  :is(.discover-preferences-save, .match-actions .btn-primary) {
  border-radius: 16px !important;
  background: var(--bf-red) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(255, 0, 79, 0.18) !important;
}

@media (max-width: 680px) {
  body.bf-page-conocer .discover-native-toolbar {
    width: calc(100% - 24px) !important;
    margin: 14px auto 10px !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }
}

/* --------------------------------------------------------------------------
   Acentos tipográficos · naranja Banana radiante
   No altera fondos, botones, bordes, iconos ni el degradado de la marca.
   -------------------------------------------------------------------------- */
body.bf-web-page .bf-community-eyebrow,
body.bf-web-page .bf-community-heading > a,
body.bf-web-page .bf-plan-date small,
body.bf-web-page .bf-plan-time,
body.bf-page-feeds .feed-eyebrow,
body.bf-page-feeds .story-bubble.is-unseen .story-name,
body.bf-page-planes .plans-eyebrow,
body.bf-page-planes .pg-sheet-kicker,
body.bf-page-planes .create-kicker,
body.bf-page-chats .chat-native-title > span,
body.bf-page-chats .rel-mini-btn.match,
body.bf-page-conocer .discover-native-toolbar > div > span,
body.bf-page-conocer .discover-preferences-head span,
body.bf-page-cuenta .cuenta-page-eyebrow,
body.bf-page-settings .settings-page-eyebrow,
body.bf-web-page .bf-auth-gate-switch button.is-active,
body.bf-web-page .bf-web-footer nav a:hover,
body.bf-page-vibes :is(.creator-top-create, .action-btn.notify):hover,
body.bf-creator-page :is(.creator-top-create, .action-btn.notify):hover,
.bf-liquid-enabled
  [data-bf-liquid][data-bf-variant="subtle"]:is(
    .is-active,
    .active,
    [aria-selected="true"],
    [aria-pressed="true"]
  ) {
  color: var(--bf-text-orange) !important;
}


/* --------------------------------------------------------------------------
   Acceso superadmin · entre notificaciones y cuenta
   -------------------------------------------------------------------------- */
body.bf-web-page .bf-web-admin-link {
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  place-items: center !important;
  border: 1px solid rgba(15, 15, 18, 0.9) !important;
  border-radius: 15px !important;
  background: #18181b !important;
  color: #fff !important;
  box-shadow:
    0 9px 22px rgba(15, 15, 18, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

body.bf-web-page .bf-web-admin-link:hover {
  background: #050506 !important;
  color: #fff !important;
  box-shadow:
    0 13px 29px rgba(15, 15, 18, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

body.bf-web-page .bf-web-admin-link svg {
  width: 21px !important;
  height: 21px !important;
}

@media (max-width: 680px) {
  body.bf-web-page .bf-web-admin-link {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }
}

@media (max-width: 420px) {
  body.bf-web-page .bf-web-admin-link {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  body.bf-web-page .bf-web-admin-link svg {
    width: 19px !important;
    height: 19px !important;
  }
}