/* ============================================================
   HUB · Estudo cientifico de virais no Instagram
   Sidebar + brand header reutilizavel em todas as paginas
   ============================================================ */

/* Paleta oficial Instagram (background black mantido) */
:root {
  --ig-purple: #833AB4;
  --ig-magenta: #C13584;
  --ig-pink: #E1306C;
  --ig-orange: #F77737;
  --ig-yellow: #FCAF45;
  --ig-yellow-light: #FFDC80;
  --ig-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --ig-gradient-soft: linear-gradient(135deg, rgba(131,58,180,.18) 0%, rgba(225,48,108,.18) 50%, rgba(252,175,69,.18) 100%);
  --ig-accent: var(--ig-pink);
  --ig-accent-soft: rgba(225,48,108,.10);
  --ig-accent-border: rgba(225,48,108,.30);
}

/* Sidebar fixa */
.hub-sidebar {
  position:fixed;
  top:0; left:0; bottom:0;
  width:280px;
  background:#06060d;
  border-right:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column;
  padding:32px 22px 22px;
  z-index:50;
  overflow-y:auto;
}
.hub-sidebar::-webkit-scrollbar { width:6px; }
.hub-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.05); border-radius:3px; }

.hub-brand {
  display:flex; flex-direction:column;
  gap:6px;
  padding-bottom:24px;
  margin-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-decoration:none;
}
.hub-brand-mark {
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--ig-pink); font-weight:600;
}
.hub-brand-title {
  font-family:'Playfair Display',Georgia,serif;
  font-size:18px; font-weight:700; color:#f1f5f9;
  line-height:1.2;
}
.hub-brand-sub {
  font-size:12px; color:#64748b;
  font-family:'JetBrains Mono','SF Mono',monospace;
}

.hub-side-label {
  font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
  color:#64748b; font-weight:600;
  margin-bottom:14px;
}

/* ============================================================
   CATEGORIAS COLAPSAVEIS
   ============================================================ */
.hub-categories {
  list-style:none; padding:0; margin:0 0 auto 0;
  display:flex; flex-direction:column;
  gap:6px;
}
.hub-category {
  display:flex; flex-direction:column;
  border-radius:10px;
  overflow:hidden;
  border:1px solid transparent;
  transition:border-color .18s;
}
.hub-category.is-open {
  border-color:rgba(225,48,108,.10);
  background:rgba(225,48,108,.025);
}
.hub-category-head {
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding:10px 12px;
  background:transparent;
  border:none;
  cursor:pointer;
  color:#cbd5e1;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  text-align:left;
  transition:color .18s, background .18s;
  border-radius:10px;
}
.hub-category-head:hover {
  color:#f1f5f9;
  background:rgba(225,48,108,.05);
}
.hub-category.is-open .hub-category-head {
  color:#f1f5f9;
}
.hub-category-icon {
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  border-radius:6px;
  background:rgba(225,48,108,.12);
  color:var(--ig-pink);
}
.hub-category-icon svg { width:14px; height:14px; }
.hub-category-icon[data-icon="youtube"] {
  background:rgba(255,0,0,.10);
  color:#ff3b3b;
}
.hub-category-label {
  flex:1; min-width:0;
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:1.4px;
  white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.hub-category-count {
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:18px;
  padding:0 6px;
  border-radius:9px;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:10px; font-weight:600;
  color:#94a3b8;
  background:rgba(255,255,255,.06);
  letter-spacing:0;
}
.hub-category.is-open .hub-category-count {
  color:#f1f5f9;
  background:rgba(225,48,108,.18);
}
.hub-category-chevron {
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px;
  color:#64748b;
  transition:transform .22s ease, color .18s;
}
.hub-chevron-icon { width:12px; height:12px; }
.hub-category.is-open .hub-category-chevron {
  transform:rotate(90deg);
  color:var(--ig-pink);
}
.hub-category-body {
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-4px);
  transition:max-height .35s ease, opacity .25s ease, transform .25s ease;
  padding:0 6px;
}
.hub-category.is-open .hub-category-body {
  max-height:2400px;
  opacity:1;
  transform:none;
  padding:4px 6px 8px;
}
.hub-category-empty {
  list-style:none;
  padding:10px 12px;
  margin:2px 0 0;
  display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  color:#475569;
  border-radius:8px;
  background:rgba(255,255,255,.015);
}
.hub-category-empty-dot {
  display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:#475569;
  opacity:.6;
}

.hub-creators { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
.hub-creator {
  display:block;
  padding:11px 12px;
  border-radius:8px;
  text-decoration:none;
  color:#94a3b8;
  font-size:13.5px;
  line-height:1.35;
  transition:.18s;
  border:1px solid transparent;
}
.hub-creator:hover {
  background:rgba(225,48,108,.05);
  border-color:rgba(225,48,108,.18);
  color:#f1f5f9;
}
.hub-creator.is-active {
  background:rgba(225,48,108,.14);
  border-color:rgba(225,48,108,.40);
  color:#f1f5f9;
  font-weight:600;
}
.hub-creator.is-pending {
  cursor:default;
  color:#475569;
}
.hub-creator.is-pending:hover {
  background:transparent;
  border-color:transparent;
  color:#475569;
}
.hub-creator-name { display:block; }
.hub-creator-meta {
  display:block;
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color:#64748b;
  margin-top:3px;
  font-family:'JetBrains Mono','SF Mono',monospace;
}
.hub-creator.is-active .hub-creator-meta { color:var(--ig-pink); }
.hub-creator.is-pending .hub-creator-meta { color:#334155; }

.hub-side-footer {
  margin-top:24px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:11px; color:#64748b;
  font-family:'JetBrains Mono','SF Mono',monospace;
  letter-spacing:1px;
  text-align:center;
}
.hub-side-footer strong { color:var(--ig-pink); }

/* Layout: empurra main content pra direita do sidebar */
.hub-shell { margin-left:280px; }

/* Brand header no topo da pagina (acima do hero do estudo) */
.hub-brandbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(7,7,16,.65);
  backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:30;
}
.hub-brandbar-left {
  display:flex; flex-direction:column; gap:2px;
}
.hub-brandbar-title {
  font-family:'Playfair Display',Georgia,serif;
  font-size:16px; font-weight:600; color:#f1f5f9;
}
.hub-brandbar-sub {
  font-size:11px; color:#64748b;
  font-family:'JetBrains Mono','SF Mono',monospace;
  letter-spacing:1px;
}
.hub-brandbar-right {
  font-size:11px; color:#64748b;
  letter-spacing:2px; text-transform:uppercase;
}
.hub-brandbar-right .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#34d399; margin-right:6px; vertical-align:middle; }

/* mobile */
@media (max-width:880px) {
  .hub-sidebar {
    position:relative;
    width:100%;
    height:auto;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.06);
    padding:18px 18px;
  }
  .hub-shell { margin-left:0; }
  .hub-creators { max-height:none; }
  .hub-brand { padding-bottom:14px; margin-bottom:14px; }
  .hub-categories { gap:4px; }
  .hub-category-head { padding:11px 12px; }
  .hub-category.is-open .hub-category-body { max-height:none; }
}

/* ============================================================
   SIDEBAR · mini avatar ao lado do nome (vibe Instagram)
   ============================================================ */
.hub-creator { display:flex; align-items:center; gap:10px; }
.hub-creator-avatar {
  flex-shrink:0;
  width:28px; height:28px;
  border-radius:50%;
  object-fit:cover;
  background:#15151f;
  position:relative;
  padding:1.5px;
  background-image: var(--ig-gradient);
  background-clip: border-box;
}
.hub-creator-avatar img {
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  background:#0d0d18;
}
.hub-creator-avatar.is-placeholder {
  background:rgba(255,255,255,.06);
  background-image:none;
  border:1px dashed rgba(255,255,255,.10);
}
.hub-creator-text { display:flex; flex-direction:column; min-width:0; flex:1; }
.hub-creator.is-pending .hub-creator-avatar { background-image:none; background:rgba(255,255,255,.04); }

/* ============================================================
   BIO CARD · estilo Instagram (full + mini)
   ============================================================ */
.bio-card {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:28px;
  align-items:flex-start;
  padding:32px;
  border-radius:18px;
  border:1px solid rgba(225,48,108,.18);
  background:
    var(--ig-gradient-soft),
    linear-gradient(180deg, rgba(13,13,24,.85), rgba(7,7,16,.85));
  background-blend-mode:overlay, normal;
  position:relative;
  overflow:hidden;
}
.bio-card::before {
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(600px 300px at 0% 0%, rgba(225,48,108,.10), transparent 60%);
  pointer-events:none;
}
.bio-card-avatar {
  position:relative;
  width:128px; height:128px;
  flex-shrink:0;
  padding:3px;
  border-radius:50%;
  background-image: var(--ig-gradient);
  background-clip: border-box;
}
.bio-card-avatar img {
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:3px solid #0d0d18;
  background:#0d0d18;
}
.bio-card-body {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  gap:10px;
  min-width:0;
}
.bio-card-header {
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
}
.bio-card-username {
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:16px;
  font-weight:600;
  color:#f1f5f9;
  letter-spacing:.5px;
}
.bio-card-username::before {
  content:"@";
  color:#E1306C;
  margin-right:1px;
}
.bio-card-verified {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px;
  border-radius:50%;
  background:#0095F6;
  color:white;
  font-size:11px;
  font-weight:700;
  line-height:1;
  flex-shrink:0;
}
.bio-card-verified::after { content:"✓"; }
.bio-card-fullname {
  font-family:'Playfair Display',Georgia,serif;
  font-size:22px;
  font-weight:700;
  color:#f1f5f9;
  line-height:1.2;
}
.bio-card-divider {
  height:1px;
  background:rgba(225,48,108,.18);
  margin:4px 0;
}
.bio-card-bio {
  font-family:'Inter',sans-serif;
  font-size:14px;
  color:#cbd5e1;
  line-height:1.55;
  white-space:pre-line;
  word-wrap:break-word;
}
.bio-card-bio a,
.bio-card-bio .mention {
  color:#E1306C;
  text-decoration:none;
  font-weight:600;
}
.bio-card-bio a:hover,
.bio-card-bio .mention:hover {
  background:linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.bio-card-links {
  display:flex; flex-direction:column; gap:6px;
  margin-top:4px;
}
.bio-card-link {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:12px;
  color:#E1306C;
  text-decoration:none;
  word-break:break-all;
}
.bio-card-link:hover { text-decoration:underline; }
.bio-card-stats {
  display:flex; gap:24px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:6px;
  padding-top:14px;
  border-top:1px solid rgba(225,48,108,.18);
}
.bio-card-stat {
  display:flex; flex-direction:column; gap:2px;
}
.bio-card-stat-n {
  font-family:'Playfair Display',Georgia,serif;
  font-size:24px;
  font-weight:700;
  background:var(--ig-gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
}
.bio-card-stat-l {
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#64748b;
}
.bio-card-ig-link {
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px;
  border-radius:8px;
  background:var(--ig-gradient);
  color:white !important;
  text-decoration:none;
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
  transition:.18s;
}
.bio-card-ig-link:hover { transform:translateY(-1px); filter:brightness(1.1); }

/* ============================================================
   BIO CARD MINI · grid de criadores na home
   ============================================================ */
.bio-mini-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:18px;
}
.bio-mini {
  display:flex; align-items:flex-start; gap:14px;
  padding:18px;
  border-radius:14px;
  border:1px solid rgba(225,48,108,.18);
  background:
    var(--ig-gradient-soft),
    linear-gradient(180deg, rgba(13,13,24,.85), rgba(7,7,16,.85));
  background-blend-mode:overlay, normal;
  text-decoration:none;
  color:#f1f5f9;
  transition:.18s;
  min-height:140px;
}
.bio-mini:hover {
  border-color:rgba(225,48,108,.45);
  transform:translateY(-2px);
}
.bio-mini.is-pending {
  background:rgba(255,255,255,.015);
  border-color:rgba(255,255,255,.06);
  cursor:default;
}
.bio-mini.is-pending:hover {
  border-color:rgba(255,255,255,.06);
  transform:none;
}
.bio-mini-avatar {
  position:relative;
  width:64px; height:64px;
  flex-shrink:0;
  padding:2px;
  border-radius:50%;
  background-image: var(--ig-gradient);
  background-clip: border-box;
}
.bio-mini-avatar img {
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:2px solid #0d0d18;
  background:#0d0d18;
}
.bio-mini.is-pending .bio-mini-avatar {
  background-image:none;
  background:rgba(255,255,255,.05);
  border:1px dashed rgba(255,255,255,.10);
}
.bio-mini-avatar.is-placeholder { background-image:none; background:rgba(255,255,255,.05); }
.bio-mini-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.bio-mini-header { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.bio-mini-username {
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:12px;
  font-weight:600;
  color:#E1306C;
}
.bio-mini-username::before { content:"@"; opacity:.6; }
.bio-mini-verified {
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px;
  border-radius:50%;
  background:#0095F6;
  color:white; font-size:9px; font-weight:700; line-height:1;
  flex-shrink:0;
}
.bio-mini-verified::after { content:"✓"; }
.bio-mini-name {
  font-family:'Playfair Display',Georgia,serif;
  font-size:17px;
  font-weight:700;
  color:#f1f5f9;
  line-height:1.2;
}
.bio-mini-bio {
  font-size:12.5px;
  color:#94a3b8;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:2px;
}
.bio-mini-stats {
  display:flex; gap:14px;
  margin-top:auto;
  padding-top:10px;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#64748b;
  border-top:1px solid rgba(225,48,108,.10);
  flex-wrap:wrap;
}
.bio-mini-stats b {
  color:#f1f5f9;
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;
  font-size:13px;
  background:var(--ig-gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:0;
}
.bio-mini.is-pending .bio-mini-username,
.bio-mini.is-pending .bio-mini-name { color:#64748b; }
.bio-mini.is-pending .bio-mini-bio { color:#475569; }
.bio-mini.is-pending .bio-mini-stats b { background:none; -webkit-text-fill-color:#64748b; color:#64748b; }

@media (max-width:680px) {
  .bio-card {
    grid-template-columns:1fr;
    text-align:center;
    padding:24px 20px;
  }
  .bio-card-avatar { margin:0 auto; width:108px; height:108px; }
  .bio-card-header { justify-content:center; }
  .bio-card-stats { justify-content:center; }
  .bio-card-ig-link { margin-left:0; }
}

/* ============================================================
   MOBILE GLOBAL FIX (2026-05-28) — corrige "danca" no celular
   Aplica em TODAS as paginas de creators que importam hub.css
   ============================================================ */

/* safety net: nada pode causar scroll horizontal no body */
html, body { max-width:100%; overflow-x:hidden; }
body { -webkit-text-size-adjust:100%; }

/* breakpoint principal de tablet/phone — ate 768px */
@media (max-width:768px) {
  /* container principal: padding lateral menor */
  .wrap { padding:0 18px !important; }
  .hero-in { padding:0 18px !important; }

  /* HERO: 4 colunas -> 2 colunas em todos os creators */
  .hero-grid { grid-template-columns:repeat(2,1fr) !important; }
  .hero { padding:80px 0 56px !important; }
  .hero h1 { font-size:clamp(34px,8vw,52px) !important; line-height:1.08 !important; }
  .hero-sub { font-size:15.5px !important; padding:0 4px !important; }

  /* section default padding mais enxuto */
  section.s { padding:60px 0 !important; }
  .sec-head { margin-bottom:36px !important; }
  .sec-title { font-size:clamp(26px,7vw,36px) !important; }
  .sec-desc { font-size:15px !important; }

  /* MODEL TOGGLE: tirar min-width fixo */
  .model-toggle-wrap { padding:0 18px !important; }
  .model-toggle {
    min-width:0 !important;
    width:100%;
    flex-wrap:wrap;
  }
  .model-toggle button {
    flex:1 1 auto;
    font-size:11.5px !important;
    padding:9px 10px !important;
    white-space:normal;
  }
  /* slider esconde porque flex-wrap quebra o calculo */
  .model-toggle-slider { display:none !important; }
  .model-toggle button.is-active {
    background:linear-gradient(135deg, #E1306C, #F77737);
    color:#fff !important;
    box-shadow:0 4px 16px rgba(225,48,108,.4);
  }

  /* TABELAS: wrapper com scroll horizontal */
  .cmt-table-wrap,
  .opus-tabela-scroll,
  .opus-tabela-wrap {
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .cmt-table,
  .gemini-tabela,
  .opus-tabela {
    min-width:600px !important;
    font-size:12px !important;
  }
  .cmt-table thead th,
  .gemini-tabela thead th,
  .opus-tabela thead th { padding:10px 8px !important; font-size:10px !important; }
  .cmt-table tbody td,
  .gemini-tabela tbody td,
  .opus-tabela tbody td { padding:10px 8px !important; font-size:12px !important; }

  /* REEL row: stacking dos labels/values (Marco/Lucas/etc) */
  .reel-row { flex-direction:column !important; gap:4px !important; }
  .reel-label { min-width:0 !important; padding-top:0 !important; font-size:9.5px !important; }
  .reel-val { min-width:0 !important; font-size:13px !important; }
  .reel-val.highlight { font-size:14px !important; }
  .reel { padding:20px !important; }

  /* OPUS individual reels */
  .opus-individual { padding:20px !important; }
  .opus-individual-embed { min-height:auto !important; max-width:100% !important; }
  .opus-ato { padding:22px !important; }
  .opus-template { padding:22px !important; }

  /* COMMENT TOTAIS (3 colunas) -> 1 coluna em phone pequeno */
  .comment-totais { grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:8px !important; }
  .comment-tot-cell { padding:12px 8px !important; }
  .comment-tot-v { font-size:18px !important; }
  .comment-tot-l { font-size:9px !important; }
  .comment-hero { padding:22px !important; }

  /* BIO MINI grid: aceita coluna unica */
  .bio-mini-grid { grid-template-columns:1fr !important; gap:14px !important; }
  .bio-mini { padding:14px !important; min-height:auto !important; }

  /* BIO CARD reforco */
  .bio-card { padding:24px 18px !important; gap:18px !important; }
  .bio-card-fullname { font-size:18px !important; }
  .bio-card-stats { gap:14px !important; padding-top:12px !important; }
  .bio-card-stat-n { font-size:20px !important; }

  /* BRANDBAR */
  .hub-brandbar { padding:14px 18px !important; flex-wrap:wrap; gap:8px; }
  .hub-brandbar-title { font-size:13.5px !important; }
  .hub-brandbar-sub { font-size:10.5px !important; }
  .hub-brandbar-right { font-size:10px !important; }

  /* FW CARD: padding menor */
  .fw-card { padding:24px 18px !important; }
  .rec-card { padding:24px 18px !important; }

  /* GRIDS que escapam viraram 1 coluna */
  .pat-grid,
  .anti-grid,
  .tpl-grid,
  .freq-grid,
  .micro-grid,
  .hooks-grid,
  .combos-grid,
  .opus-padroes-grid,
  .opus-comparacao-grid,
  .opus-compare-grid,
  .opus-difs,
  .method-grid,
  .creators-grid { grid-template-columns:1fr !important; }

  .combo-card { grid-template-columns:1fr !important; }
  .opus-ato-body { grid-template-columns:1fr !important; }
  .reel { grid-template-columns:1fr !important; }
  .opus-individual { grid-template-columns:1fr !important; }

  /* embeds Instagram dentro da pagina: respeitar viewport */
  blockquote.instagram-media,
  iframe.instagram-media {
    max-width:100% !important;
    min-width:0 !important;
    width:100% !important;
  }
  .reel-embed,
  .opus-individual-embed { max-width:100% !important; }

  /* footer */
  footer { padding:32px 18px !important; }
}

/* breakpoint mais agressivo: phones <= 420px */
@media (max-width:420px) {
  .wrap { padding:0 14px !important; }
  .hero-in { padding:0 14px !important; }
  .hero { padding:64px 0 44px !important; }
  .hero-grid { grid-template-columns:repeat(2,1fr) !important; }
  .hero-stat { padding:16px 8px !important; }
  .hero-stat .v { font-size:24px !important; }
  .hero-stat .l { font-size:9.5px !important; }
  .hero-meta { font-size:10.5px !important; gap:14px !important; }
  section.s { padding:48px 0 !important; }

  /* sidebar mobile (hub-sidebar relativo): compactar */
  .hub-sidebar { padding:14px 14px !important; }
  .hub-brand-title { font-size:15px !important; }

  /* model-toggle hint menor */
  .model-toggle-hint { font-size:11px !important; line-height:1.45 !important; }
  .model-toggle-prefix { font-size:10px !important; letter-spacing:1.5px !important; }
  .model-toggle button { font-size:10.5px !important; padding:8px 6px !important; }
  .gemini-badge, .opus-badge { font-size:9.5px !important; padding:3px 8px !important; }

  /* CTA card extra-padding-cut */
  .pat-card, .anti, .freq-card, .tpl-card,
  .opus-ato, .opus-template, .opus-dif,
  .opus-padroes-card, .opus-comp-card,
  .opus-individual, .opus-combo,
  .crd, .method-step, .pat-card { padding:18px !important; }

  .comment-hero { padding:18px 16px !important; }
  .bio-card { padding:20px 14px !important; }
  .bio-card-avatar { width:88px !important; height:88px !important; }
  .bio-card-fullname { font-size:16px !important; }
  .bio-card-username { font-size:14px !important; }
  .bio-card-bio { font-size:13px !important; }
  .bio-card-stat-n { font-size:18px !important; }

  /* hook-card thumbnail: maximizar largura */
  .hook-card-thumb { aspect-ratio:9/16 !important; }
  .hook-card-body { padding:18px !important; }

  /* numero gigante de step/ato/pat fica menor */
  .step-num, .opus-ato-num, .pat-rank, .method-step-num,
  .tpl-num, .fw-title, .opus-template-titulo {
    font-size:32px !important; min-width:0 !important;
  }
  .step { padding:18px 0 !important; gap:14px !important; }
}

/* breakpoint micro: <=360px (Galaxy Fold etc) */
@media (max-width:360px) {
  .wrap { padding:0 12px !important; }
  .hero-in { padding:0 12px !important; }
  .hero h1 { font-size:30px !important; }
  .sec-title { font-size:24px !important; }
  .hub-brandbar-title { font-size:12px !important; }
  .hub-brandbar-sub { font-size:9.5px !important; }
}