/* Software And Gamers — foro oscuro gaming */
:root {
  --f-bg: #07090d;
  --f-bg2: #0c1118;
  --f-card: #121821;
  --f-card2: #0c1118;
  --f-border: rgba(94, 234, 138, 0.14);
  --f-border2: rgba(240, 138, 36, 0.18);
  --f-text: #eef1f5;
  --f-muted: #8b95a7;
  --f-green: #5eea8a;
  --f-green2: #2ecc71;
  --f-blue: #f08a24;
  --f-blue2: #ffb347;
  --f-gold: #ffd56a;
  --f-danger: #ff6b7a;
  --f-radius: 16px;
  --f-max: 1100px;
  --f-font: "Outfit", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--f-bg); color-scheme: dark; scroll-behavior: smooth; }
body.f-body {
  margin: 0;
  font-family: var(--f-font);
  color: var(--f-text);
  background: transparent;
  min-height: 100vh;
  line-height: 1.55;
  position: relative;
}
.f-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 100% -10%, rgba(240, 138, 36, 0.16), transparent 50%),
    radial-gradient(ellipse 60% 40% at -10% 90%, rgba(94, 234, 138, 0.12), transparent 52%),
    linear-gradient(180deg, #0a0e14 0%, #07090d 40%, #05070a 100%);
}
.f-bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 75%);
}
.f-header, .f-search-bar, .f-main, .f-footer { position: relative; z-index: 1; }
.f-wrap { width: min(100% - 1.5rem, var(--f-max)); margin-inline: auto; }

/* Header */
.f-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7, 9, 13, 0.86);
  border-bottom: 1px solid var(--f-border);
  backdrop-filter: blur(16px);
}
.f-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.75rem 0; flex-wrap: wrap;
}
.f-logo {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: inherit;
}
.f-logo img { display: block; border-radius: 12px; }
.f-logo-mark {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.2rem; color: #04140c;
  background: linear-gradient(135deg, var(--f-green), #3ddc7a);
  box-shadow: 0 0 24px rgba(46, 204, 113, 0.22);
}
.f-logo strong { display: block; font-size: 1.05rem; letter-spacing: -0.02em; }
.f-logo small { display: block; color: var(--f-muted); font-size: 0.72rem; font-weight: 500; }
.f-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 0.55rem; align-items: center; }
.f-nav a {
  color: var(--f-muted); text-decoration: none; font-size: 0.88rem; font-weight: 600;
  padding: 0.35rem 0.55rem; border-radius: 8px;
}
.f-nav a:hover, .f-nav a.on { color: var(--f-text); background: rgba(255,255,255,0.05); }
.f-nav a.f-lang { font-size: 0.75rem; letter-spacing: 0.04em; font-weight: 800; }
.ns-langs { position: relative; display: inline-block; }
.ns-langs summary {
  list-style: none; cursor: pointer; color: var(--f-muted); font-size: 0.86rem; font-weight: 700;
  padding: 0.38rem 0.65rem; border-radius: 8px; border: 1px solid var(--f-border);
}
.ns-langs summary::-webkit-details-marker { display: none; }
.ns-langs summary span {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.72rem; margin-left: 0.25rem; color: var(--f-green);
}
.ns-langs-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 140px;
  background: #10151e; border: 1px solid var(--f-border); border-radius: 12px; padding: 0.35rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.ns-langs-list a,
.f-nav .ns-langs-list a {
  display: block; padding: 0.45rem 0.7rem; border-radius: 8px;
  color: var(--f-muted); text-decoration: none; font-weight: 650;
}
.ns-langs-list a:hover, .ns-langs-list a.on,
.f-nav .ns-langs-list a:hover, .f-nav .ns-langs-list a.on {
  color: var(--f-text); background: rgba(94,234,138,0.1);
}
.f-nav a.f-nav-apk {
  color: #ff6b9d !important;
  font-weight: 800;
  background: rgba(255, 107, 157, 0.12);
  border: 1px solid rgba(255, 107, 157, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.75rem !important;
}
.f-nav a.f-nav-apk:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #ff4d8d, #ff8fb8);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(255, 77, 141, 0.35);
}
.f-btn-nav.f-btn-primary {
  background: linear-gradient(135deg, var(--f-green), #3ddc7a) !important;
  color: #fff !important; padding: 0.4rem 0.85rem !important;
}
.f-nav-toggle {
  display: none; background: rgba(255,255,255,0.06); border: 1px solid var(--f-border2);
  color: var(--f-text); border-radius: 8px; padding: 0.4rem 0.7rem; font-size: 1.1rem; cursor: pointer;
}

/* Search bar */
.f-search-bar {
  background: linear-gradient(180deg, rgba(18, 24, 33, 0.92), rgba(12, 17, 24, 0.55));
  border-bottom: 1px solid var(--f-border2);
  padding: 0.85rem 0;
}
.f-search-form {
  display: flex; gap: 0.5rem; max-width: 720px; margin: 0 auto;
}
.f-search-form input {
  flex: 1; border: 1px solid rgba(94, 234, 138, 0.2);
  background: #0a0e18; color: var(--f-text);
  border-radius: 12px; padding: 0.8rem 1rem; font: inherit; font-size: 1rem;
  outline: none;
}
.f-search-form input:focus {
  border-color: rgba(125, 255, 179, 0.5);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.12);
}
.f-search-form button {
  border: none; border-radius: 12px; padding: 0.8rem 1.25rem;
  font: inherit; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--f-green), #3ddc7a);
}

.f-main { padding: 1.25rem 0 3rem; min-height: 55vh; }

/* Cards / tables */
.f-card {
  background: linear-gradient(160deg, rgba(18, 26, 38, 0.95), rgba(10, 14, 22, 0.98));
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  overflow: hidden;
  margin-bottom: 1.15rem;
}
.f-card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid var(--f-border2);
}
.f-card-head h1, .f-card-head h2 {
  margin: 0; font-size: 1.05rem; font-weight: 800;
}
.f-card-body { padding: 1rem 1.1rem; }

.f-cat-title {
  margin: 1.5rem 0 0.55rem;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--f-blue);
}
.f-cat-title:first-child { margin-top: 0.25rem; }

.f-forum-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px minmax(140px, 200px);
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--f-border2);
  align-items: center;
}
.f-forum-row:last-child { border-bottom: none; }
.f-forum-row:hover { background: rgba(125, 255, 179, 0.03); }
.f-forum-name { font-weight: 700; color: var(--f-green); text-decoration: none; font-size: 1rem; }
.f-forum-name:hover { text-decoration: underline; }
.f-forum-desc { margin: 0.2rem 0 0; color: var(--f-muted); font-size: 0.85rem; }
.f-stat { text-align: center; font-size: 0.85rem; color: var(--f-muted); }
.f-stat strong { display: block; color: var(--f-text); font-size: 1.05rem; }
.f-last { font-size: 0.8rem; color: var(--f-muted); line-height: 1.35; }
.f-last a { color: var(--f-blue); text-decoration: none; font-weight: 600; }
.f-last a:hover { text-decoration: underline; }

.f-thread-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px minmax(130px, 180px);
  gap: 0.6rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--f-border2);
  align-items: center;
}
.f-thread-row:hover { background: rgba(255,255,255,0.02); }
.f-thread-title { font-weight: 700; color: var(--f-text); text-decoration: none; }
.f-thread-title:hover { color: var(--f-green); }
.f-thread-meta { font-size: 0.78rem; color: var(--f-muted); margin-top: 0.15rem; }
.f-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 800;
  padding: 0.12rem 0.45rem; border-radius: 6px; margin-right: 0.3rem;
  vertical-align: middle;
}
.f-badge-sticky { background: rgba(255, 213, 106, 0.15); color: var(--f-gold); }
.f-badge-locked { background: rgba(255, 107, 138, 0.15); color: var(--f-danger); }

/* Posts */
.f-post {
  display: grid;
  grid-template-columns: 160px 1fr;
  border-bottom: 1px solid var(--f-border2);
}
.f-post-author {
  padding: 1rem;
  background: rgba(0,0,0,0.22);
  border-right: 1px solid var(--f-border2);
  text-align: center;
}
.f-post-author img {
  width: 72px; height: 72px; border-radius: 14px; object-fit: cover;
  border: 1px solid var(--f-border); margin: 0 auto 0.5rem; display: block;
}
.f-post-author .name {
  font-weight: 800; color: var(--f-green); text-decoration: none; display: block;
}
.f-post-author .posts { font-size: 0.75rem; color: var(--f-muted); margin-top: 0.25rem; }
.role-user, .role-mod, .role-admin {
  display: inline-block; margin-top: 0.35rem;
  font-size: 0.7rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 999px;
}
.role-user { background: rgba(255,255,255,0.06); color: var(--f-muted); }
.role-mod { background: rgba(94, 203, 255, 0.15); color: var(--f-blue); }
.role-admin { background: rgba(255, 213, 106, 0.15); color: var(--f-gold); }
.f-post-body { padding: 1rem 1.15rem; min-width: 0; }
.f-post-top {
  display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--f-muted); margin-bottom: 0.75rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--f-border2);
}
.f-post-content { font-size: 0.95rem; line-height: 1.65; word-wrap: break-word; }
.f-post-content img.bb-img { max-width: 100%; border-radius: 8px; margin: 0.5rem 0; }
.f-post-content .bb-yt {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin: 0.75rem 0;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--f-border2);
}
.f-post-content .bb-yt iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.f-file-kicker {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--f-blue);
  margin: 0.75rem 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.f-form label.f-file-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 0.25rem;
  padding: 0.55rem 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--f-text);
  border: 1px solid rgba(94, 234, 138, 0.18);
  background: #0a0e18;
  border-radius: 12px;
  cursor: pointer;
}
.f-form label.f-file-box:focus-within {
  border-color: rgba(125, 255, 179, 0.5);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.12);
}
.f-file-btn {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 999px;
  padding: 0.48rem 1rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #04140c;
  background: linear-gradient(135deg, #5eea8a, #b6f5c8 45%, #3ddc7a);
  box-shadow: 0 0 0 1px rgba(94, 234, 138, 0.55), 0 0 16px rgba(94, 234, 138, 0.45);
  animation: f-file-glow 2.4s ease-in-out infinite;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.f-file-box:hover .f-file-btn {
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(255, 213, 106, 0.7), 0 0 26px rgba(94, 234, 138, 0.85);
}
.f-file-status {
  color: var(--f-text);
  font-size: 0.86rem;
  font-weight: 700;
}
@keyframes f-file-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(94, 234, 138, 0.4), 0 0 12px rgba(94, 234, 138, 0.35); }
  50% { box-shadow: 0 0 0 1px rgba(255, 213, 106, 0.55), 0 0 22px rgba(94, 234, 138, 0.75); }
}
.f-media-hint { margin: 0 0 0.4rem; color: var(--f-muted); font-size: 0.8rem; }
.f-tr-note {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  margin: 0.7rem 0 0; padding-top: 0.55rem;
  border-top: 1px dashed var(--f-border);
  color: var(--f-muted); font-size: 0.75rem; font-weight: 600;
}
.f-tr-tog {
  background: rgba(94,234,138,0.08); border: 1px solid var(--f-border);
  color: var(--f-green); border-radius: 999px; padding: 0.15rem 0.6rem;
  font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer;
}
.f-tr-tog:hover { border-color: var(--f-green); }
.f-post-content pre.bb-code {
  background: #0a0e18; border: 1px solid var(--f-border2); border-radius: 10px;
  padding: 0.75rem; overflow-x: auto; font-size: 0.85rem;
}
.f-post-content blockquote.bb-quote {
  margin: 0.6rem 0; padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--f-green2);
  background: rgba(46, 204, 113, 0.06); border-radius: 0 10px 10px 0;
  color: #c5cde0;
}
.f-post-content blockquote cite { display: block; font-size: 0.8rem; color: var(--f-green); margin-bottom: 0.35rem; font-style: normal; font-weight: 700; }
.f-post-actions {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem;
  padding-top: 0.65rem; border-top: 1px solid var(--f-border2);
}
.f-post-actions a, .f-post-actions button {
  font-size: 0.78rem; font-weight: 700; font-family: inherit;
  background: rgba(255,255,255,0.04); border: 1px solid var(--f-border2);
  color: var(--f-muted); border-radius: 8px; padding: 0.3rem 0.65rem;
  cursor: pointer; text-decoration: none;
}
.f-post-actions a:hover, .f-post-actions button:hover { color: var(--f-text); border-color: var(--f-green); }

/* Forms */
.f-form label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--f-blue); margin: 0.75rem 0 0.35rem; text-transform: uppercase; letter-spacing: 0.03em; }
.f-form input[type=text],
.f-form input[type=email],
.f-form input[type=password],
.f-form input[type=search],
.f-form textarea,
.f-form select {
  width: 100%; border: 1px solid rgba(94, 234, 138, 0.18);
  background: #0a0e18 !important; color: var(--f-text) !important;
  border-radius: 12px; padding: 0.75rem 0.9rem; font: inherit; outline: none;
}
.f-form input:focus, .f-form textarea:focus { border-color: rgba(125,255,179,0.5); box-shadow: 0 0 0 3px rgba(46,204,113,0.12); }
.f-form input.f-file-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}
.f-check { display: flex; align-items: center; gap: 0.5rem; margin: 0.85rem 0 0.4rem; font-size: 0.92rem; font-weight: 650; text-transform: none; letter-spacing: 0; cursor: pointer; color: var(--f-text, #e8eef5); }
.f-check input { width: 1.05rem; height: 1.05rem; accent-color: #2ecc71; }
.f-form textarea { min-height: 180px; resize: vertical; }
.f-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 12px; padding: 0.75rem 1.2rem;
  font: inherit; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--f-green), #3ddc7a);
  text-decoration: none; box-shadow: 0 10px 24px rgba(46, 204, 113, 0.2);
}
.f-btn:hover { filter: brightness(1.06); }
.f-btn-ghost {
  background: rgba(255,255,255,0.04); border: 1px solid var(--f-border2);
  color: var(--f-text); box-shadow: none;
}
.f-btn-danger { background: linear-gradient(135deg, #e74c3c, #c0392b); box-shadow: none; }
.f-bb-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.45rem;
}
.f-bb-toolbar button {
  background: rgba(255,255,255,0.05); border: 1px solid var(--f-border2);
  color: var(--f-muted); border-radius: 6px; padding: 0.25rem 0.5rem;
  font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.f-bb-toolbar button:hover { color: var(--f-text); border-color: var(--f-green); }

.f-breadcrumbs {
  font-size: 0.85rem; color: var(--f-muted); margin-bottom: 1rem;
}
.f-breadcrumbs a { color: var(--f-blue); text-decoration: none; font-weight: 600; }
.f-breadcrumbs .sep { opacity: 0.5; margin: 0 0.2rem; }

.f-flash {
  padding: 0.75rem 1rem; border-radius: 12px; margin-bottom: 1rem; font-weight: 600; font-size: 0.92rem;
}
.f-flash-ok { background: rgba(46,204,113,0.12); border: 1px solid rgba(46,204,113,0.35); color: var(--f-green); }
.f-flash-error { background: rgba(255,107,138,0.12); border: 1px solid rgba(255,107,138,0.35); color: var(--f-danger); }

.f-pagination {
  display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center;
  margin: 1.25rem 0 0.5rem;
}
.f-pagination a, .f-pagination span {
  min-width: 36px; text-align: center; padding: 0.4rem 0.65rem;
  border-radius: 8px; font-size: 0.85rem; font-weight: 700;
  border: 1px solid var(--f-border2); color: var(--f-muted); text-decoration: none;
}
.f-pagination a:hover { color: var(--f-text); border-color: var(--f-green); }
.f-pagination .on { background: rgba(46,204,113,0.15); color: var(--f-green); border-color: rgba(46,204,113,0.35); }

.f-hero {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-bottom: 1.25rem;
}
.f-hero-card {
  background: linear-gradient(145deg, rgba(20, 32, 48, 0.95), rgba(10, 16, 26, 0.98));
  border: 1px solid var(--f-border); border-radius: 18px; padding: 1.35rem 1.4rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.f-hero-card h1 { margin: 0 0 0.4rem; font-size: 1.55rem; letter-spacing: -0.02em; }
.f-hero-card p { margin: 0; color: var(--f-muted); }
.f-hero-kicker {
  margin: 0 0 0.45rem !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--f-green) !important;
}
.f-hero-lead {
  margin: 0 0 0.75rem !important;
  font-size: 1.02rem !important;
  line-height: 1.55 !important;
  color: #b8c0d4 !important;
}
.f-hero-lead strong { color: var(--f-text); }
.f-hero-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}
.f-hero-bullets li {
  font-size: 0.9rem;
  font-weight: 600;
  color: #c5cde0;
}
.f-hero-side-note {
  margin: 0.85rem 0 0 !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  color: var(--f-muted) !important;
}
.f-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem;
}
.f-stat-box {
  background: rgba(0,0,0,0.28); border: 1px solid var(--f-border2);
  border-radius: 12px; padding: 0.75rem; text-align: center;
}
.f-stat-box strong { display: block; font-size: 1.25rem; color: var(--f-green); }
.f-stat-box span { font-size: 0.75rem; color: var(--f-muted); font-weight: 600; }

/* Promo home: atraer miembros */
.f-promo-section {
  margin: 0 0 1.35rem;
}
.f-section-head {
  margin: 0 0 0.9rem;
}
.f-section-head h2 {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.f-section-head p {
  margin: 0;
  color: var(--f-muted);
  font-size: 0.92rem;
  max-width: 640px;
  line-height: 1.5;
}
.f-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.f-feature {
  background: linear-gradient(160deg, rgba(18, 26, 38, 0.95), rgba(10, 14, 22, 0.98));
  border: 1px solid var(--f-border);
  border-radius: 16px;
  padding: 1.05rem 1.1rem 1.15rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  transition: border-color 0.15s, transform 0.15s;
}
.f-feature:hover {
  border-color: rgba(125, 255, 179, 0.28);
  transform: translateY(-2px);
}
.f-feature-icon {
  font-size: 1.55rem;
  margin-bottom: 0.45rem;
  line-height: 1;
}
.f-feature h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--f-green);
}
.f-feature p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--f-muted);
  line-height: 1.5;
}
.f-feature a {
  color: var(--f-blue);
  font-weight: 700;
  text-decoration: none;
}
.f-feature a:hover { text-decoration: underline; }

.f-member-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.f-benefit {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  background: rgba(12, 18, 28, 0.9);
  border: 1px solid var(--f-border2);
}
.f-benefit > span {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #04140c;
  background: linear-gradient(135deg, var(--f-green), var(--f-blue2));
}
.f-benefit strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.2rem;
}
.f-benefit p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--f-muted);
  line-height: 1.45;
}
.f-benefit a { color: var(--f-blue); font-weight: 700; text-decoration: none; }

.f-cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(46, 204, 113, 0.14), rgba(61, 139, 253, 0.16));
  border: 1px solid rgba(125, 255, 179, 0.28);
}
.f-cta-banner strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}
.f-cta-banner p {
  margin: 0;
  color: var(--f-muted);
  font-size: 0.9rem;
}
.f-cta-banner-in {
  background: linear-gradient(120deg, rgba(61, 139, 253, 0.12), rgba(46, 204, 113, 0.1));
}

.f-rules-strip {
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  background: rgba(10, 14, 22, 0.85);
  border: 1px solid var(--f-border2);
}
.f-tips {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--f-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.f-tips li { margin-bottom: 0.4rem; }
.f-tips strong { color: var(--f-text); }

.f-reg-benefits {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}
.f-reg-benefits li {
  font-size: 0.86rem;
  color: #c5cde0;
  font-weight: 600;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  background: rgba(46, 204, 113, 0.06);
  border: 1px solid rgba(125, 255, 179, 0.12);
}

@media (max-width: 900px) {
  .f-feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .f-feature-grid { grid-template-columns: 1fr; }
  .f-member-benefits { grid-template-columns: 1fr; }
  .f-cta-banner { flex-direction: column; align-items: stretch; text-align: center; }
}

.f-latest li { list-style: none; padding: 0.55rem 0; border-bottom: 1px solid var(--f-border2); }
.f-latest ul { margin: 0; padding: 0; }
.f-latest a { color: var(--f-text); text-decoration: none; font-weight: 700; }
.f-latest a:hover { color: var(--f-green); }
.f-latest small { display: block; color: var(--f-muted); font-size: 0.78rem; margin-top: 0.15rem; }
.f-latest-pane { display: flex; flex-direction: column; }
.f-latest-body {
  max-height: 13.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  scrollbar-width: thin;
  scrollbar-color: var(--f-green) rgba(255,255,255,0.06);
}
.f-latest-body::-webkit-scrollbar { width: 8px; }
.f-latest-body::-webkit-scrollbar-thumb {
  background: var(--f-green);
  border-radius: 99px;
}
.f-latest-body::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.f-latest-slider {
  padding: 0.4rem 1.1rem;
  background: rgba(0,0,0,0.18);
}
.f-latest-slider:first-child { border-bottom: 1px solid var(--f-border2); }
.f-latest-slider:last-child { border-top: 1px solid var(--f-border2); }
.f-latest-slider input[type="range"] {
  display: block;
  width: 100%;
  margin: 0;
  height: 14px;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.f-latest-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,0.1);
}
.f-latest-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--f-green);
  border: 2px solid #04140c;
  box-shadow: 0 0 0 1px rgba(94, 234, 138, 0.35);
}
.f-latest-slider input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,0.1);
}
.f-latest-slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--f-green);
  border: 2px solid #04140c;
}

.f-auth-card { max-width: 440px; margin: 0.5rem auto 2rem; }
.f-auth-card .f-btn { width: 100%; margin-top: 1rem; }
.f-auth-links { text-align: center; margin-top: 1rem; font-size: 0.88rem; color: var(--f-muted); }
.f-auth-links a { color: var(--f-blue); font-weight: 700; text-decoration: none; }
.f-auth-card .ns-auth-or {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.1rem 0 0.85rem; color: var(--f-muted); font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.f-auth-card .ns-auth-or::before, .f-auth-card .ns-auth-or::after {
  content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.1);
}
.f-auth-card .ns-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  width: 100%; box-sizing: border-box; padding: 0.72rem 1rem; border-radius: 12px;
  background: #ffffff; color: #111111; -webkit-text-fill-color: #111111;
  border: 1px solid #dadce0; text-decoration: none; font-weight: 700;
}
.f-auth-card .ns-google-btn span { color: #111111; -webkit-text-fill-color: #111111; }
.f-auth-card .ns-google-btn:hover { background: #f8f9fa; }
.f-auth-card .ns-google-btn.is-off { opacity: 0.45; pointer-events: none; cursor: not-allowed; }

.f-members-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem;
}
.f-member {
  display: flex; gap: 0.7rem; align-items: center;
  padding: 0.75rem; border-radius: 12px;
  background: rgba(0,0,0,0.2); border: 1px solid var(--f-border2);
  text-decoration: none; color: inherit;
}
.f-member img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.f-member strong { display: block; color: var(--f-green); }
.f-member span { font-size: 0.78rem; color: var(--f-muted); }

.f-profile-head {
  display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap;
}
.f-profile-head img {
  width: 96px; height: 96px; border-radius: 18px; object-fit: cover;
  border: 2px solid var(--f-border);
}
.f-actions-bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1rem;
}

.f-footer {
  border-top: 1px solid var(--f-border2);
  background: rgba(6, 10, 16, 0.9);
  padding: 1.25rem 0 1.5rem;
}
.f-footer-inner { text-align: center; }
.f-footer-stats {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; justify-content: center;
  font-size: 0.85rem; color: var(--f-muted); margin-bottom: 0.65rem;
}
.f-footer-stats strong { color: var(--f-green); }
.f-footer-copy { margin: 0; font-size: 0.8rem; color: var(--f-muted); }
.f-footer-copy a { color: var(--f-blue); text-decoration: none; }

.f-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.f-table th, .f-table td { padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--f-border2); text-align: left; }
.f-table th { color: var(--f-muted); font-size: 0.78rem; text-transform: uppercase; }

@media (max-width: 800px) {
  .f-hero { grid-template-columns: 1fr; }
  .f-forum-row, .f-thread-row {
    grid-template-columns: 1fr 1fr;
  }
  .f-forum-row .f-last, .f-thread-row .f-last { grid-column: 1 / -1; }
  .f-post { grid-template-columns: 1fr; }
  .f-post-author {
    display: flex; gap: 0.75rem; align-items: center; text-align: left;
    border-right: none; border-bottom: 1px solid var(--f-border2);
  }
  .f-post-author img { width: 48px; height: 48px; margin: 0; }
  .f-nav-toggle { display: block; margin-left: auto; }
  .f-nav {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
  }
  .f-nav.open { display: flex; }
  .f-header-inner { flex-wrap: wrap; }
}

/* Avatares en video (foto de perfil web .mp4/.webm) */
.f-post-author video {
  width: 72px; height: 72px; border-radius: 14px; object-fit: cover;
  border: 1px solid var(--f-border); margin: 0 auto 0.5rem; display: block; background: #1a2332;
}
.f-member video { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: #1a2332; }
.f-profile-head video {
  width: 96px; height: 96px; border-radius: 18px; object-fit: cover;
  border: 2px solid var(--f-border); background: #1a2332;
}
@media (max-width: 800px) {
  .f-post-author video { width: 48px; height: 48px; margin: 0; }
}

/* Botón dorado 'Ver la Tienda' (mismo estilo que .ns-upd-forum-btn del sitio, copiado de assets/css/nexstudio.css) */
.f-shop-cta { display: flex; justify-content: center; margin: .4rem 0 1.6rem; }
a.ns-upd-forum-btn {
  --ns-forum-gold-a: #fff1c4;
  --ns-forum-gold-b: #ffd36a;
  --ns-forum-gold-c: #f08a24;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  max-width: 100%;
  padding: .72rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 214, 120, .55);
  background: linear-gradient(180deg, var(--ns-forum-gold-a) 0%, var(--ns-forum-gold-b) 42%, var(--ns-forum-gold-c) 100%);
  color: #1a1406 !important;
  font: 700 .92rem/1.2 Outfit, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .01em;
  text-decoration: none !important;
  box-shadow:
    0 0 0 1px rgba(255, 210, 120, .18),
    0 0 22px rgba(240, 138, 36, .45),
    0 8px 22px rgba(0, 0, 0, .35);
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}
a.ns-upd-forum-btn:hover,
a.ns-upd-forum-btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(255, 220, 140, .35),
    0 0 34px rgba(240, 138, 36, .7),
    0 12px 28px rgba(0, 0, 0, .4);
  outline: none;
}
a.ns-upd-forum-btn:active {
  transform: translateY(0);
  filter: brightness(.98);
}
.ns-upd-forum-btn__ico {
  flex: 0 0 auto;
  font-size: 1.05rem;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
}
.ns-upd-forum-btn__txt {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ns-upd-forum-btn__shine {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,.12) 38%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.12) 62%,
    transparent 100%
  );
  transform: translateX(-120%);
  animation: ns-upd-forum-shine 3.8s ease-in-out infinite;
}
@keyframes ns-upd-forum-shine {
  0%, 55% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(120%); }
}
@media (max-width: 520px) {
  a.ns-upd-forum-btn {
    width: 100%;
    justify-content: center;
    padding: .78rem 1rem;
    font-size: .88rem;
    box-sizing: border-box;
  }
  .ns-upd-forum-btn__txt { white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-upd-forum-btn__shine { animation: none; opacity: .2; transform: none; }
  a.ns-upd-forum-btn,
  a.ns-upd-forum-btn:hover,
  a.ns-upd-forum-btn:focus-visible {
    transition: none;
    transform: none;
  }
}

/* Promocion de la Tienda: banner (portada / foro Boss CSO) y recuadro en temas */
.f-shop-promo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin: .6rem 0 1.2rem; padding: 1rem 1.2rem; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 211, 106, .14), rgba(62, 230, 140, .10) 60%, rgba(10, 14, 22, .6));
  border: 1px solid rgba(255, 214, 120, .38);
  box-shadow: 0 0 0 1px rgba(62, 230, 140, .08), 0 0 26px rgba(240, 138, 36, .18), 0 10px 26px rgba(0, 0, 0, .3);
}
.f-shop-promo__txt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.f-shop-promo__txt strong { font-size: 1.08rem; color: #ffe39a; }
.f-shop-promo__txt span { font-size: .86rem; color: var(--f-muted); }
.f-shop-box {
  display: flex; align-items: center; gap: .7rem; margin: .2rem 1rem 1rem; padding: .85rem 1.05rem;
  border-radius: 14px; text-decoration: none !important; color: #eafff2 !important;
  background: linear-gradient(135deg, rgba(62, 230, 140, .16), rgba(255, 211, 106, .12));
  border: 1px solid rgba(62, 230, 140, .45);
  box-shadow: 0 0 22px rgba(62, 230, 140, .18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.f-shop-box:hover, .f-shop-box:focus-visible { transform: translateY(-2px); box-shadow: 0 0 30px rgba(62, 230, 140, .32); filter: brightness(1.06); outline: none; }
.f-shop-box__ico { font-size: 1.25rem; flex: 0 0 auto; }
.f-shop-box__txt { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.f-shop-box__txt strong { color: #7dffb8; }
.f-shop-box__arrow { color: #ffd36a; font-weight: 800; }
.f-shop-box__act { color: #ffe39a; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.f-shop-box__chip {
  flex: 0 0 auto; padding: .28rem .65rem; border-radius: 999px; font-weight: 800; font-size: .85rem;
  color: #1a1406; background: linear-gradient(180deg, #fff1c4, #ffd36a 45%, #f08a24);
}
.f-shop-box--muted { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); box-shadow: none; color: var(--f-muted) !important; }
.f-shop-box--muted .f-shop-box__txt strong { color: #cfd8e3; }
.f-shop-box__chip--muted { color: #cfd8e3; background: rgba(255, 255, 255, .1); }
@media (max-width: 640px) {
  .f-shop-promo { flex-direction: column; align-items: stretch; text-align: center; }
  .f-shop-box { margin: .2rem .6rem .9rem; flex-wrap: wrap; }
  .f-shop-box__txt { flex: 1 1 calc(100% - 2.6rem); }
  .f-shop-box__chip { margin-left: 2rem; }
}