/* ==========================================================================
   BAH!STREAM — o visual das telas do membro
   --------------------------------------------------------------------------
   Carregado depois do pages.css, no header.php. Toda classe daqui tem prefixo
   proprio por tela (pl, lj, bn, nv, cv, ms, pf, st, sf, ag, lx), entao este
   arquivo soma ao que ja existia em vez de brigar com ele.

   As correcoes do fim do arquivo valem para o site inteiro: contraste do cinza
   de rotulo, anel de foco no teclado, barra de rolagem escura, cor do texto
   selecionado e menos movimento para quem pede.

   Conteudo:   1) Agenda   2) Leilao   3) Telas gerais e a prancha
   ========================================================================== */

/* ==========================================================================
   ENCAIXE NO PAINEL DO MEMBRO

   As telas deste arquivo foram desenhadas como pagina inteira, com margem e
   largura propria. Aqui elas vivem dentro do painel, que ja centraliza e ja
   afasta das bordas. Sem isto o afastamento entraria duas vezes.
   ========================================================================== */

.dashboard-layout .content .v2,
.dashboard-layout .content .ag-wrap,
.dashboard-layout .content .lx-wrap {
    max-width: none;
    padding: 0;
}

/* ==========================================================================
   AGENDA v2 — grade da semana com mapa de calor
   ========================================================================== */

.ag-wrap{max-width:1240px;margin:0 auto;padding:26px 24px 70px}

/* ---- cabecalho ---- */
.ag-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:20px}
.ag-eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--color-soft);margin-bottom:8px}
.ag-eyebrow :is(.material-symbols-outlined,.icon){font-size:15px;color:var(--color-primary)}
.ag-head h1{font-size:26px;font-weight:800;letter-spacing:-.035em;margin:0}
.ag-head p{color:var(--color-muted);font-size:14px;margin:6px 0 0}
.ag-nav{display:flex;gap:8px;flex-wrap:wrap}

/* ---- meus horarios ---- */
.ag-mine{border:1px solid rgba(var(--brand-rgb),.28);background:rgba(var(--brand-rgb),.07);
  border-radius:var(--radius-xl);padding:16px 18px;margin-bottom:18px}
.ag-mine h2{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--color-primary-soft);margin:0 0 12px;display:flex;align-items:center;gap:7px}
.ag-mine h2 :is(.material-symbols-outlined,.icon){font-size:16px}
.ag-mine-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ag-mine-item{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:11px 13px;display:flex;align-items:center;gap:11px}
.ag-mine-item time{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--color-text);flex:none}
.ag-mine-item span{font-size:11.5px;color:var(--color-muted);line-height:1.35}
.ag-mine-item b{display:block;color:var(--color-text);font-size:12.5px;font-weight:600}

/* ---- legenda ---- */
.ag-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  padding:12px 0 16px;font-size:11.5px;color:var(--color-muted)}
.ag-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;
  margin-right:6px;vertical-align:middle}
.lg-livre{background:var(--color-surface-3)}
.lg-quente{background:rgba(var(--brand-rgb),.55)}
.lg-ocupado{background:var(--color-surface-3);box-shadow:inset 0 0 0 1px var(--color-muted)}
.lg-meu{background:var(--color-primary)}
.lg-vivo{background:var(--color-danger)}
.lg-passado{background:var(--color-surface-2)}

/* ---- grade da semana ---- */
.ag-grid-scroll{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);overflow:hidden}
.ag-grid{display:grid;grid-template-columns:64px repeat(7,minmax(0,1fr));width:100%}

.ag-cap{padding:11px 8px;text-align:center;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);
  background:var(--color-surface-2);border-bottom:1px solid var(--color-border)}
.ag-cap small{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  font-weight:500;letter-spacing:0;color:var(--color-soft);margin-top:2px}
.ag-cap.today{color:var(--color-primary-soft)}
.ag-cap.today small{color:var(--color-primary)}
.ag-cap.corner{background:var(--color-surface-2)}

.ag-hour{display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-variant-numeric:tabular-nums;
  color:var(--color-soft);background:var(--color-surface-2);
  border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}

/* celula */
.ag-cell{position:relative;min-height:54px;padding:6px 7px;
  border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);
  background:transparent;color:inherit;text-align:left;display:flex;flex-direction:column;
  justify-content:center;gap:3px;cursor:pointer;overflow:hidden;
  transition:background .12s,box-shadow .12s}
.ag-cell:last-child{border-right:0}
.ag-cell:hover{background:var(--color-surface-2)}
.ag-cell:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}

/* LIVRE — o calor mostra a procura. E o diferencial do Bah!Stream. */
.ag-cell.livre .ag-price{font-family:'IBM Plex Mono',monospace;font-size:12px;
  font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-muted)}
.ag-cell.livre .ag-unit{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--color-soft)}
.ag-cell.h1{background:rgba(var(--brand-rgb),.05)}
.ag-cell.h2{background:rgba(var(--brand-rgb),.10)}
.ag-cell.h3{background:rgba(var(--brand-rgb),.17)}
.ag-cell.h3 .ag-price{color:var(--color-text)}
.ag-surge{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;
  color:var(--color-warning)}

/* OCUPADO */
.ag-cell.ocupado{background:var(--color-surface-2)}
.ag-who{display:flex;align-items:center;gap:6px;min-width:0}
.ag-av{width:20px;height:20px;border-radius:6px;flex:none;display:grid;place-items:center;
  font-size:10px;font-weight:700;background:var(--color-surface-3);color:var(--color-muted)}
.ag-who b{font-size:11.5px;font-weight:600;color:var(--color-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-cell.ocupado .ag-state{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-soft)}

/* MEU */
.ag-cell.meu{background:rgba(var(--brand-rgb),.15);
  box-shadow:inset 0 0 0 1px rgba(var(--brand-rgb),.45)}
.ag-cell.meu .ag-av{background:var(--color-primary);color:#fff}
.ag-cell.meu .ag-state{color:var(--color-primary-soft)}

/* AO VIVO */
.ag-cell.vivo{background:rgba(239,91,82,.12);
  box-shadow:inset 0 0 0 1px rgba(239,91,82,.4)}
.ag-cell.vivo .ag-av{background:rgba(239,91,82,.2);color:var(--color-danger)}
.ag-cell.vivo .ag-state{color:var(--color-danger);display:flex;align-items:center;gap:4px}
.ag-dot{width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:agpulse 2.2s ease-in-out infinite}
@keyframes agpulse{0%,100%{opacity:1}50%{opacity:.3}}

/* PASSADO */
.ag-cell.passado{background:var(--color-bg-strong);cursor:default;opacity:.45}
.ag-cell.passado:hover{background:var(--color-bg-strong)}

.ag-foot{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;
  align-items:center;margin-top:14px;font-size:12.5px;color:var(--color-muted)}
.ag-foot b{color:var(--color-text);font-weight:600}

/* ---- mobile: vira lista do dia ---- */
@media (max-width:900px){
  .ag-grid-scroll{overflow-x:auto}
  .ag-grid{min-width:760px}
}

/* ==========================================================================
   LEILAO v2 — lista compacta + o que fecha primeiro em destaque
   Cole no fim do pages.css
   ========================================================================== */

.lx-wrap{max-width:1240px;margin:0 auto;padding:26px 24px 70px}
.lx-cols{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}

.lx-eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--color-soft);margin-bottom:8px}
.lx-eyebrow :is(.material-symbols-outlined,.icon){font-size:15px;color:var(--color-primary)}
.lx-head h1{font-size:26px;font-weight:800;letter-spacing:-.035em;margin:0}
.lx-head p{color:var(--color-muted);font-size:14px;margin:6px 0 20px;max-width:620px}

.lx-tabs{display:flex;gap:6px;border-bottom:1px solid var(--color-border);margin-bottom:18px}
.lx-tab{padding:10px 15px;font-size:13.5px;font-weight:600;color:var(--color-muted);
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  display:flex;align-items:center;gap:7px}
.lx-tab.on{color:var(--color-text);border-bottom-color:var(--color-primary)}
.lx-tab .lx-n{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  padding:1px 6px;border-radius:20px;background:var(--color-surface-3);color:var(--color-muted)}
.lx-tab.on .lx-n{background:rgba(var(--brand-rgb),.18);color:var(--color-primary-soft)}

/* ---- card principal: o que fecha primeiro ---- */
.lx-next{border:1px solid rgba(var(--brand-rgb),.32);border-radius:var(--radius-xl);
  background:linear-gradient(160deg,rgba(var(--brand-rgb),.09),var(--color-surface) 55%);
  padding:20px 22px;margin-bottom:16px}
.lx-flag{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:4px 9px;border-radius:6px;
  background:rgba(var(--brand-rgb),.18);color:var(--color-primary-soft);margin-bottom:14px}
.lx-flag :is(.material-symbols-outlined,.icon){font-size:13px}
.lx-next-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.lx-time{font-family:'IBM Plex Mono',monospace;font-size:40px;font-weight:600;
  letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.lx-range{font-size:12.5px;color:var(--color-muted);margin-top:6px}
.lx-clock{text-align:right}
.lx-clock small{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--color-soft);margin-bottom:4px}
.lx-clock b{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:600;
  color:var(--color-warning);font-variant-numeric:tabular-nums;letter-spacing:-.03em}

.lx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  padding:18px 0;margin:16px 0 0;border-top:1px solid var(--color-border)}
.lx-stat small{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--color-soft);margin-bottom:5px}
.lx-stat b{font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:600;
  font-variant-numeric:tabular-nums}
.lx-stat span{font-size:13.5px;color:var(--color-muted)}
.lx-lead{display:flex;align-items:center;gap:8px}
.lx-av{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none;
  font-size:11px;font-weight:700;background:var(--color-surface-3);color:var(--color-muted)}

/* barra de disputa */
.lx-heat{height:4px;border-radius:4px;background:var(--color-surface-3);
  overflow:hidden;margin-top:8px}
.lx-heat i{display:block;height:100%;border-radius:4px;background:var(--color-primary)}

/* ---- linhas compactas ---- */
.lx-list{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);overflow:hidden}
.lx-row{display:grid;grid-template-columns:78px 1fr auto auto;gap:16px;align-items:center;
  padding:13px 18px;border-top:1px solid var(--color-border);transition:background .13s}
.lx-row:first-child{border-top:0}
.lx-row:hover{background:var(--color-surface-2)}
.lx-row-time{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.lx-row-time small{display:block;font-size:10.5px;font-weight:400;color:var(--color-soft);
  letter-spacing:0;margin-top:2px}
.lx-row-mid{min-width:0}
.lx-row-mid .lx-lead{margin-bottom:5px}
.lx-row-mid .lx-lead b{font-size:13px;font-weight:600}
.lx-free{font-size:12.5px;color:var(--color-primary-soft);font-weight:600}
.lx-row-meta{font-size:11.5px;color:var(--color-soft)}
.lx-row-clock{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;
  color:var(--color-warning);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.lx-row.mine{background:rgba(var(--brand-rgb),.08)}
.lx-row.mine .lx-av{background:var(--color-primary);color:#fff}

/* ---- lateral ---- */
.lx-side{display:flex;flex-direction:column;gap:16px}
.lx-bal{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);padding:18px}
.lx-bal small{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--color-soft);margin-bottom:7px}
.lx-bal b{font-family:'IBM Plex Mono',monospace;font-size:32px;font-weight:600;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;display:block}
.lx-bal span{font-size:12px;color:var(--color-muted)}

.lx-acc{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);overflow:hidden}
.lx-acc summary{padding:14px 18px;font-size:13.5px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:9px;list-style:none}
.lx-acc summary::-webkit-details-marker{display:none}
.lx-acc summary :is(.material-symbols-outlined,.icon){font-size:18px;color:var(--color-primary);
  margin-left:auto;transition:transform .18s}
.lx-acc[open] summary :is(.material-symbols-outlined,.icon){transform:rotate(180deg)}
.lx-acc ul{margin:0;padding:0 18px 16px 34px;display:grid;gap:9px;
  font-size:12.5px;color:var(--color-muted);line-height:1.5}
.lx-acc li::marker{color:var(--color-primary)}
.lx-acc b{color:var(--color-text);font-weight:600}

@media (max-width:960px){
  .lx-cols{grid-template-columns:1fr}
  .lx-row{grid-template-columns:70px 1fr;row-gap:8px}
  .lx-row-clock{grid-column:1/-1;text-align:left}
}

/* ==========================================================================
   BAH!STREAM — VISUAL v2
   Cole tudo isto no FIM do seu pages.css
   Nada aqui muda comportamento. Só aparência.
   ========================================================================== */

/* =============================== 0. BASE COMPARTILHADA =================== */
.v2{max-width:1240px;margin:0 auto;padding:26px 24px 70px}
.v2-eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--color-soft);margin-bottom:8px}
.v2-eyebrow :is(.material-symbols-outlined,.icon){font-size:15px;color:var(--color-primary)}
.v2-h1{font-size:26px;font-weight:800;letter-spacing:-.035em;margin:0}
.v2-sub{color:var(--color-muted);font-size:14px;margin:7px 0 24px;max-width:640px}
.v2-num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.v2-cols{display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start}
.v2-card{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);padding:20px 22px}
.v2-flat{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);overflow:hidden}
.v2-row{display:flex;align-items:center;gap:14px;padding:14px 18px;
  border-top:1px solid var(--color-border);transition:background .13s}
.v2-row:first-child{border-top:0}
.v2-row:hover{background:var(--color-surface-2)}
.v2-tag{display:inline-flex;align-items:center;gap:5px;padding:3.5px 9px;border-radius:6px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;background:var(--color-surface-2);color:var(--color-soft);
  border:1px solid var(--color-border);white-space:nowrap}
.v2-tag.on{background:rgba(var(--brand-rgb),.14);color:var(--color-primary-soft);
  border-color:rgba(var(--brand-rgb),.32)}
.v2-tag.warn{background:rgba(224,168,69,.10);color:var(--color-warning);
  border-color:rgba(224,168,69,.28)}
.v2-tag.off{opacity:.55}

/* =============================== 1. A PRANCHA ============================ */
/* O elemento de marca. Usado em Planos, Niveis, Bonus, Convide e Modo Surf. */
.pb{height:200px;overflow:visible;transform-origin:50% 60%;
  animation:pb-float 5s ease-in-out infinite}
@keyframes pb-float{
  0%,100%{transform:translateY(0) rotate(-7deg)}
  50%    {transform:translateY(-9px) rotate(-4deg)}
}
.pb-stage{display:grid;place-items:center;position:relative}
.pb-stage::after{content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:104px;height:14px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(9px)}
.pb-shine{transform:translateX(0)}
.pb-host:hover .pb{animation-play-state:paused}
.pb-host:hover .pb-shine{animation:pb-shine 1.1s ease-out}
@keyframes pb-shine{from{transform:translateX(0)}to{transform:translateX(280px)}}

/* acabamentos — cada plano/nivel tem o seu */
.fin-lite    {--pb-a:#3a4149;--pb-b:#20262c;--pb-edge:#6b7480;--pb-fin:#39424b}
.fin-pro     {--pb-a:#4aa6ef;--pb-b:#1c6fb5;--pb-edge:#9ed2fb;--pb-fin:#2e90e0}
.fin-ultra   {--pb-a:#eaf3fb;--pb-b:#8fb6d4;--pb-edge:#ffffff;--pb-fin:#c3d8e9}
.fin-ferro   {--pb-a:#6a7078;--pb-b:#3a3f45;--pb-edge:#a4aeba;--pb-fin:#565c63}
.fin-bronze  {--pb-a:#c8813f;--pb-b:#7c4a1d;--pb-edge:#dd893f;--pb-fin:#9a5f28}
.fin-prata   {--pb-a:#dcf1ff;--pb-b:#8ebbda;--pb-edge:#eef8ff;--pb-fin:#a9c6da}
.fin-ouro    {--pb-a:#ffd33d;--pb-b:#b98a12;--pb-edge:#ffe27a;--pb-fin:#d3a319}
.fin-platina {--pb-a:#cff6ff;--pb-b:#83dced;--pb-edge:#e6fbff;--pb-fin:#9fd9e6}
.fin-diamante{--pb-a:#57dfff;--pb-b:#00b9ff;--pb-edge:#b6f0ff;--pb-fin:#3ec8ee}

/* =============================== 2. PLANOS =============================== */
.pl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pl{position:relative;border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);padding:26px 22px 24px;text-align:center;
  transition:border-color .2s,transform .2s}
.pl:hover{border-color:rgba(var(--brand-rgb),.4);transform:translateY(-3px)}
.pl.reco{border-color:rgba(var(--brand-rgb),.42);
  background:linear-gradient(170deg,rgba(var(--brand-rgb),.09),var(--color-surface) 52%)}
.pl-flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:10px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:4px 12px;
  border-radius:20px;background:var(--color-primary);color:#fff;white-space:nowrap}
.pl .pb-stage{height:206px;margin-bottom:4px}
.pl h2{font-size:20px;font-weight:800;letter-spacing:-.03em;margin:0}
.pl-board{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--color-soft);margin:6px 0 14px}
.pl-price{font-size:30px;font-weight:800;letter-spacing:-.04em;margin:0}
.pl-price small{font-size:13px;font-weight:500;color:var(--color-muted);letter-spacing:0}
.pl-desc{font-size:12.5px;color:var(--color-muted);line-height:1.5;margin:12px 0 18px;
  min-height:52px}
.pl-feats{list-style:none;margin:0 0 20px;padding:18px 0 0;display:grid;gap:9px;
  text-align:left;border-top:1px solid var(--color-border)}
.pl-feats li{display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:start;
  font-size:12.5px;color:var(--color-text)}
.pl-feats :is(.material-symbols-outlined,.icon){font-size:17px;color:var(--color-primary)}
.pl-feats li.no{color:var(--color-soft)}
.pl-feats li.no :is(.material-symbols-outlined,.icon){color:var(--color-soft);opacity:.6}
.pl .button{width:100%}

/* =============================== 3. LOJA ================================= */
.lj-bal{display:flex;align-items:center;gap:16px;padding:16px 20px;margin-bottom:18px;
  border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface)}
.lj-bal-i{width:42px;height:42px;border-radius:var(--radius-lg);display:grid;place-items:center;
  flex:none;background:rgba(224,168,69,.10);color:var(--color-warning);
  border:1px solid rgba(224,168,69,.24)}
.lj-bal b{display:block;font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:600;
  line-height:1.1;font-variant-numeric:tabular-nums}
.lj-bal small{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--color-soft)}
.lj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.lj-item{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);padding:18px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .18s,transform .18s}
.lj-item:hover{border-color:rgba(var(--brand-rgb),.36);transform:translateY(-2px)}
.lj-art{height:96px;border-radius:var(--radius-lg);display:grid;place-items:center;
  background:linear-gradient(160deg,var(--color-surface-2),var(--color-surface-3));
  border:1px solid var(--color-border)}
.lj-art svg{width:52px;height:52px;stroke:var(--color-primary);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.lj-item h3{font-size:15px;font-weight:700;letter-spacing:-.02em;margin:0}
.lj-item p{font-size:12.5px;color:var(--color-muted);margin:5px 0 0;line-height:1.45;flex:1}
.lj-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:12px;border-top:1px solid var(--color-border)}
.lj-cost{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:600;
  font-variant-numeric:tabular-nums}
.lj-cost small{display:block;font-size:10.5px;font-weight:500;letter-spacing:.05em;
  font-family:Inter,sans-serif}
.lj-cost.ok small{color:var(--color-primary-soft)}
.lj-cost.no{color:var(--color-soft)}
.lj-cost.no small{color:var(--color-warning)}

/* =============================== 4. BONUS DIARIO ========================= */
.bn-main{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center;
  border:1px solid rgba(var(--brand-rgb),.28);border-radius:var(--radius-xl);
  background:linear-gradient(150deg,rgba(var(--brand-rgb),.10),var(--color-surface) 58%);
  padding:24px;margin-bottom:18px}
.bn-main .pb-stage{height:190px}
.bn-main .pb{height:180px}
.bn-val{font-family:'IBM Plex Mono',monospace;font-size:52px;font-weight:600;
  letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.bn-val span{font-size:17px;color:var(--color-muted);letter-spacing:0;margin-left:8px}
.bn-when{font-size:13px;color:var(--color-muted);margin:10px 0 18px}
.bn-bar{height:8px;border-radius:8px;background:var(--color-surface-3);overflow:hidden;
  margin-bottom:8px}
.bn-bar i{display:block;height:100%;border-radius:8px;
  background:linear-gradient(90deg,rgba(var(--brand-rgb),.5),var(--color-primary))}
.bn-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--color-soft);
  font-family:'IBM Plex Mono',monospace;margin-bottom:18px}
.bn-more{display:grid;grid-template-columns:repeat(3,1fr);gap:0;overflow:hidden}
.bn-more div{padding:14px 16px;border-left:1px solid var(--color-border);text-align:center}
.bn-more div:first-child{border-left:0}
.bn-more b{display:block;font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:600}
.bn-more small{font-size:11px;color:var(--color-soft)}
.bn-more .cur b{color:var(--color-primary-soft)}

/* =============================== 5. NIVEIS =============================== */
.nv-now{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;
  border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);padding:22px;margin-bottom:20px}
.nv-now .pb-stage{height:150px}
.nv-now .pb{height:140px}
.nv-now h2{font-size:21px;font-weight:800;letter-spacing:-.03em;margin:0 0 5px}
.nv-now p{font-size:13px;color:var(--color-muted);margin:0 0 14px}
.nv-track{display:flex;align-items:center;gap:0;margin-bottom:10px}
.nv-step{flex:1;height:5px;background:var(--color-surface-3);position:relative}
.nv-step:first-child{border-radius:5px 0 0 5px}
.nv-step:last-child{border-radius:0 5px 5px 0}
.nv-step.done{background:var(--color-primary)}
.nv-step.now{background:linear-gradient(90deg,var(--color-primary) 40%,var(--color-surface-3) 40%)}
.nv-track-lbl{display:flex;justify-content:space-between;font-size:10.5px;
  font-family:'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-soft)}
.nv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.nv-item{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);padding:16px;text-align:center;
  transition:border-color .18s,transform .18s}
.nv-item:hover{border-color:rgba(var(--brand-rgb),.34);transform:translateY(-2px)}
.nv-item .pb-stage{height:140px;margin-bottom:8px}
.nv-item .pb{height:130px}
.nv-item h3{font-size:15px;font-weight:700;letter-spacing:-.02em;margin:8px 0 4px}
.nv-item small{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  color:var(--color-soft);margin-bottom:10px}
.nv-item.locked{opacity:.52}
.nv-item.active{border-color:rgba(var(--brand-rgb),.45);
  background:linear-gradient(170deg,rgba(var(--brand-rgb),.09),var(--color-surface) 55%)}

/* =============================== 6. CONVIDE ============================== */
.cv-goal{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);padding:20px 22px}
.cv-slots{display:flex;gap:10px;margin:16px 0 14px}
.cv-slot{flex:1;aspect-ratio:1/1.5;border-radius:var(--radius-lg);display:grid;place-items:center;
  border:1px dashed var(--color-border);background:var(--color-surface-2)}
.cv-slot svg{width:26px;height:60px;opacity:.35}
.cv-slot.on{border-style:solid;border-color:rgba(var(--brand-rgb),.45);
  background:rgba(var(--brand-rgb),.10)}
.cv-slot.on svg{opacity:1}
.cv-goal-n{font-family:'IBM Plex Mono',monospace;font-size:34px;font-weight:600;
  letter-spacing:-.04em;line-height:1}
.cv-goal-n span{font-size:15px;color:var(--color-muted);letter-spacing:0;margin-left:6px}
.cv-prize{list-style:none;margin:16px 0 0;padding:16px 0 0;display:grid;gap:9px;
  border-top:1px solid var(--color-border);font-size:13px}
.cv-prize li{display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:center}
.cv-prize :is(.material-symbols-outlined,.icon){font-size:17px;color:var(--color-primary)}
.cv-prize b{font-weight:600}
.cv-link{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.cv-link input{flex:1;min-width:230px;padding:11px 14px;border-radius:var(--radius-md);
  background:var(--color-bg-strong);border:1px solid var(--color-border);
  color:var(--color-text);font-family:'IBM Plex Mono',monospace;font-size:12.5px}
.cv-steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cv-steps li{counter-increment:s;display:grid;grid-template-columns:26px 1fr;gap:13px;
  align-items:start;padding:13px 0;border-top:1px solid var(--color-border);font-size:13px;
  color:var(--color-muted);line-height:1.5}
.cv-steps li:first-child{border-top:0}
.cv-steps li::before{content:counter(s);width:26px;height:26px;border-radius:9px;
  display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:12px;
  font-weight:600;background:var(--color-surface-3);color:var(--color-primary-soft)}
.cv-steps b{color:var(--color-text);font-weight:600}
.cv-msg{background:var(--color-bg-strong);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:16px 18px;font-size:13px;color:var(--color-muted);
  line-height:1.65;white-space:pre-line;margin-top:12px}

/* =============================== 7. MODO SURF (sidebar) ================== */
.ms{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);padding:14px;position:relative;overflow:hidden}
.ms.on{border-color:rgba(var(--brand-rgb),.38);
  background:linear-gradient(160deg,rgba(var(--brand-rgb),.12),var(--color-surface) 60%)}
.ms-top{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.ms-board{width:26px;height:52px;flex:none}
.ms.on .ms-board{animation:pb-float 4s ease-in-out infinite}
.ms-top b{font-size:13.5px;font-weight:700;letter-spacing:-.02em}
.ms-top small{display:block;font-size:11px;color:var(--color-soft);
  font-family:'IBM Plex Mono',monospace}
.ms.on .ms-top small{color:var(--color-primary-soft)}
.ms p{font-size:11.5px;color:var(--color-muted);line-height:1.45;margin:0 0 11px}
.ms-bar{height:4px;border-radius:4px;background:var(--color-surface-3);overflow:hidden;
  margin-bottom:11px}
.ms-bar i{display:block;height:100%;border-radius:4px;background:var(--color-primary)}
.ms .button{width:100%}

/* =============================== 8. PERFIL =============================== */
.pf-head{display:flex;align-items:center;gap:20px;padding:22px;flex-wrap:wrap;
  border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:linear-gradient(150deg,rgba(var(--brand-rgb),.08),var(--color-surface) 55%);
  margin-bottom:18px}
.pf-av{width:76px;height:76px;border-radius:22px;flex:none;display:grid;place-items:center;
  font-size:28px;font-weight:800;background:var(--color-surface-3);color:var(--color-primary-soft);
  border:1px solid var(--color-border)}
.pf-head h1{font-size:23px;font-weight:800;letter-spacing:-.035em;margin:0}
.pf-head p{font-size:13px;color:var(--color-muted);margin:4px 0 10px}
.pf-tags{display:flex;gap:8px;flex-wrap:wrap}
.pf-stats{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap}
.pf-stat small{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--color-soft);margin-bottom:4px}
.pf-stat b{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:600;
  font-variant-numeric:tabular-nums}
.pf-dl{margin:0;padding:0}
.pf-dl div{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-top:1px solid var(--color-border)}
.pf-dl div:first-child{border-top:0}
.pf-dl dt{font-size:13px;color:var(--color-muted);margin:0}
.pf-dl dd{margin:0;font-size:13.5px;font-weight:500;text-align:right;word-break:break-all}
.pf-field{margin-top:18px}
.pf-field label{display:block;font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--color-soft);margin-bottom:8px}
.pf-field input{width:100%;padding:11px 14px;border-radius:var(--radius-md);
  background:var(--color-bg-strong);border:1px solid var(--color-border);
  color:var(--color-text);font-size:13.5px}
.pf-field input:focus{outline:none;border-color:rgba(var(--brand-rgb),.5)}
.pf-hint{font-size:11.5px;color:var(--color-soft);margin:8px 0 0;line-height:1.45}

/* =============================== 9. SORTEIO ============================== */
.st-main{display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:center;
  border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);padding:22px;margin-bottom:18px}
.st-main .pb-stage{height:180px}
.st-main .pb{height:170px}
.st-empty{text-align:center}
.st-empty b{display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--color-soft);margin-bottom:6px}
.st-empty strong{font-size:19px;font-weight:800;letter-spacing:-.03em;display:block}
.st-empty small{font-size:12px;color:var(--color-muted)}
.st-bar{height:8px;border-radius:8px;background:var(--color-surface-3);overflow:hidden;
  margin:12px 0 8px}
.st-bar i{display:block;height:100%;border-radius:8px;background:var(--color-primary)}
.st-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:18px;
  border-top:1px solid var(--color-border);padding-top:18px}
.st-3 div{text-align:center;border-left:1px solid var(--color-border)}
.st-3 div:first-child{border-left:0}
.st-3 b{display:block;font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:600}
.st-3 small{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--color-soft)}

/* =============================== 10. SURFAR ============================== */
.sf-hero{position:relative;border:1px solid var(--color-border);border-radius:var(--radius-xl);
  overflow:hidden;padding:38px 34px;margin-bottom:20px;
  background:
    radial-gradient(700px 300px at 88% 20%, rgba(var(--brand-rgb),.16), transparent 62%),
    linear-gradient(150deg,var(--color-surface),var(--color-bg-strong))}
.sf-hero h1{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1.1;
  margin:14px 0 0;max-width:14ch}
.sf-hero p{font-size:14px;color:var(--color-muted);margin:14px 0 22px;max-width:52ch;
  line-height:1.6}
.sf-hero-board{position:absolute;right:52px;top:50%;transform:translateY(-50%);
  height:250px;opacity:.9;pointer-events:none}
.sf-note{display:flex;gap:10px;align-items:center;margin-top:20px;padding-left:14px;
  border-left:2px solid rgba(var(--brand-rgb),.45);font-size:12.5px;color:var(--color-muted)}
.sf-screens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sf-scr{border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-surface);padding:15px}
.sf-scr.free{border-style:dashed}
.sf-scr-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:12px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--color-soft)}
.sf-scr-n{font-family:'IBM Plex Mono',monospace;font-size:10.5px;padding:1px 6px;
  border-radius:5px;background:var(--color-surface-3)}
.sf-scr-who{display:flex;align-items:center;gap:10px}
.sf-scr-av{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700;background:var(--color-surface-3);color:var(--color-muted)}
.sf-scr-who b{display:block;font-size:13px;font-weight:600}
.sf-scr-who small{font-size:11px;color:var(--color-soft)}

/* =============================== RESPONSIVO ============================== */
@media (max-width:1000px){
  .v2-cols{grid-template-columns:1fr}
  .pl-grid{grid-template-columns:1fr}
  .sf-screens{grid-template-columns:repeat(2,1fr)}
  .sf-hero-board{display:none}
}
@media (max-width:720px){
  .bn-main,.nv-now,.st-main{grid-template-columns:1fr}
  .pf-stats{margin-left:0;width:100%}
  .sf-hero h1{font-size:26px}
  .v2{padding:20px 16px 60px}
}
@media (prefers-reduced-motion:reduce){
  .pb,.ms-board{animation:none !important}
  .pb-host:hover .pb-shine{animation:none}
}

/* ==========================================================================
   CORRECOES — achadas na revisao do codigo
   Cole isto DEPOIS de tudo. Sao 6 defeitos reais, nao gosto pessoal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTRASTE DO CINZA DE ROTULO
   --color-soft era #5c646e. Medido: 2,73 sobre card elevado.
   O minimo legivel e 4,5. Ou seja: rotulos, dicas e unidades estavam
   ilegiveis pra muita gente. Novo valor mede 4,79 a 5,77.
   -------------------------------------------------------------------------- */
:root, html[data-theme="dark"]{
    --color-soft: #828c98;
}

/* --------------------------------------------------------------------------
   2. TEXTO BRANCO NO BOTAO AZUL
   Branco sobre #2e90e0 mede 3,40. Reprova.
   Solucao: o azul do PREENCHIMENTO fica um tom mais fundo (4,67),
   e o azul claro continua para texto, icone e borda (onde ja passava).
   -------------------------------------------------------------------------- */
:root{
    --color-primary-fill: #1f77c4;
    --color-primary-fill-hover: #1a6cb4;
}
.button-primary,
.button-boost{
    background: var(--color-primary-fill);
    color: #fff;
    border-color: transparent;
}
.button-primary:hover,
.button-boost:hover{
    background: var(--color-primary-fill-hover);
}

/* --------------------------------------------------------------------------
   3. FOCO INVISIVEL NO TECLADO
   base.css e pages.css nao tinham nenhuma regra de foco. Quem navega por
   Tab nao enxergava onde estava. Agora todo controle mostra um anel.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
    outline: 2px solid var(--color-primary-soft);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* o mouse nao desenha anel — so o teclado */
:focus:not(:focus-visible){ outline: none; }

/* --------------------------------------------------------------------------
   4. BARRA DE ROLAGEM CLARA NUM SITE ESCURO
   Nao havia estilo nenhum. No Windows aparecia a barra branca padrao,
   que corta o visual escuro.
   -------------------------------------------------------------------------- */
html{ scrollbar-color: var(--color-surface-3) var(--color-bg); scrollbar-width: thin; }
::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: var(--color-bg); }
::-webkit-scrollbar-thumb{
    background: var(--color-surface-3);
    border: 3px solid var(--color-bg);
    border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover{ background: #2b323a; }

/* --------------------------------------------------------------------------
   5. TEXTO SELECIONADO
   O azul padrao do navegador brigava com a paleta.
   -------------------------------------------------------------------------- */
::selection{ background: rgba(var(--brand-rgb), .32); color: var(--color-text); }

/* --------------------------------------------------------------------------
   6. ANIMACAO PARA QUEM PEDE MENOS MOVIMENTO
   Existia so no pages.css. Agora vale pro site todo.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   BONUS — tipografia coerente
   O site inteiro usa Sora nos titulos. As telas novas estavam em Inter.
   Agora seguem o mesmo padrao.
   -------------------------------------------------------------------------- */
.v2-h1, .pl h2, .nv-now h2, .pf-head h1, .sf-hero h1,
.lj-item h3, .nv-item h3, .bn-body h3{
    font-family: Sora, Inter, system-ui, sans-serif;
}

/* toque confortavel no celular: nenhum alvo abaixo de 40px */
@media (max-width: 720px){
    .button, .btn, .lx-tab, .ag-cell{ min-height: 40px; }
}

/* --------------------------------------------------------------------------
   Encaixe da arte da Loja

   Alguns itens tem desenho proprio em imagem, outros usam o icone do site. A
   caixa da arte segura os dois no mesmo tamanho.
   -------------------------------------------------------------------------- */
.lj-art img {
    max-height: 72px;
    width: auto;
}

.lj-art .icon {
    font-size: 52px;
    color: var(--color-primary);
}

/* ==========================================================================
   INICIO — a primeira tela do membro
   ========================================================================== */

.in-secao { margin: 30px 0 12px; }

.in-frentes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.in-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.in-vaga {
    margin: 14px 0 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-muted);
}

/* A linha do rodape do cartao: o rotulo de um lado, o numero do outro. */
.in-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    font-size: 12.5px;
    color: var(--color-muted);
}

.in-linha b { font-size: 15px; color: var(--color-text); }

.in-frentes .button { width: 100%; margin-top: 14px; }

.in-modo-txt { flex: 1; min-width: 0; }
.in-modo-txt b { font-size: 13.5px; }
.in-modo-txt small {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-muted);
}

.in-ver-planos { margin-top: 16px; }

@media (max-width: 900px) {
    .in-frentes { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Duvidas frequentes: uma pergunta por vez, aberta com um clique
   -------------------------------------------------------------------------- */

.faq-lista {
    display: grid;
    gap: 12px;
}

.faq-lista summary {
    justify-content: space-between;
}

.faq-resposta {
    margin: 0;
    padding: 0 18px 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Lista e caixa de texto no mesmo padrao do campo simples

   O desenho original so previa campo de uma linha. O Suporte tem lista de
   categoria e caixa de mensagem, e sem isto os dois apareciam com a cara
   cinza padrao do Windows no meio do site escuro.
   -------------------------------------------------------------------------- */

.pf-field select,
.pf-field textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    background: var(--color-bg-strong);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.5;
}

.pf-field textarea {
    min-height: 120px;
    resize: vertical;
}

.pf-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.45) 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.45) 50%, transparent 50%);
    background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.pf-field select:focus,
.pf-field textarea:focus {
    outline: none;
    border-color: rgba(var(--brand-rgb), 0.5);
}

/* ==========================================================================
   ==========================================================================
   DESENHO v8

   O que vem abaixo veio do pacote de desenho novo e entra depois de tudo, de
   proposito: onde ele repete uma regra de cima, a dele vale. As telas que o
   pacote nao redesenhou seguem com o que ja estava.
   ==========================================================================
   ========================================================================== */
/* ==========================================================================
   ==========================================================================
   BAH!STREAM — VISUAL v3
   Correcoes em cima do v2: Agenda, pranchas, menu, Inicio, Surfar e Leilao.
   ==========================================================================
   ========================================================================== */

/* ================================ BASE ================================== */
.v2{max-width:1240px;margin:0 auto}
.v2-eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--color-soft);margin-bottom:8px}
.v2-eyebrow :is(.material-symbols-outlined,.icon){font-size:15px;color:var(--color-primary)}
.v2-h1{font-family:Sora,Inter,sans-serif;font-size:26px;font-weight:800;
  letter-spacing:-.035em;margin:0}
.v2-sub{color:var(--color-muted);font-size:14px;margin:7px 0 22px;max-width:640px}
.v2-num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.v2-card{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);padding:20px 22px}
.v2-tag{display:inline-flex;align-items:center;gap:5px;padding:3.5px 9px;border-radius:6px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;background:var(--color-surface-2);color:var(--color-soft);
  border:1px solid var(--color-border);white-space:nowrap}
.v2-tag.on{background:rgba(var(--brand-rgb),.14);color:var(--color-primary-soft);
  border-color:rgba(var(--brand-rgb),.32)}
.v2-tag.warn{background:rgba(224,168,69,.10);color:var(--color-warning);
  border-color:rgba(224,168,69,.28)}

/* ============================ CORRECOES GERAIS ========================== */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--color-primary-soft);outline-offset:2px;border-radius:var(--radius-sm)}
:focus:not(:focus-visible){outline:none}
html{scrollbar-color:var(--color-surface-3) var(--color-bg);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--color-bg)}
::-webkit-scrollbar-thumb{background:var(--color-surface-3);border:3px solid var(--color-bg);
  border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:#2b323a}
::selection{background:rgba(var(--brand-rgb),.32);color:var(--color-text)}
.button-primary,.button-boost{background:var(--color-primary-fill);color:#fff;
  border-color:transparent}
.button-primary:hover,.button-boost:hover{background:var(--color-primary-fill-hover)}

/* ============================== 1. A PRANCHA ============================
   CORRIGIDO: a Gun era metade da largura da Longboard e parecia um palito.
   Agora as tres tem massa parecida. O que muda e o contorno, nao o tamanho. */
.pb{height:200px;overflow:visible;transform-origin:50% 60%;
  animation:pb-float 5s ease-in-out infinite}
@keyframes pb-float{
  0%,100%{transform:translateY(0) rotate(-7deg)}
  50%{transform:translateY(-9px) rotate(-4deg)}}
.pb-stage{display:grid;place-items:center;position:relative}
.pb-stage::after{content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:104px;height:14px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(9px)}
.pb-shine{transform:translateX(0)}
.pb-host:hover .pb{animation-play-state:paused}
.pb-host:hover .pb-shine{animation:pb-shine 1.1s ease-out}
@keyframes pb-shine{from{transform:translateX(0)}to{transform:translateX(300px)}}

.fin-lite    {--pb-a:#454d56;--pb-b:#23292f;--pb-edge:#7d8794;--pb-fin:#3d464f}
.fin-pro     {--pb-a:#4aa6ef;--pb-b:#1c6fb5;--pb-edge:#9ed2fb;--pb-fin:#2e90e0}
.fin-ultra   {--pb-a:#f2f8fd;--pb-b:#7fb0d6;--pb-edge:#ffffff;--pb-fin:#b3d0e5}
.fin-ferro   {--pb-a:#6a7078;--pb-b:#3a3f45;--pb-edge:#a4aeba;--pb-fin:#565c63}
.fin-bronze  {--pb-a:#c8813f;--pb-b:#7c4a1d;--pb-edge:#dd893f;--pb-fin:#9a5f28}
.fin-prata   {--pb-a:#dcf1ff;--pb-b:#8ebbda;--pb-edge:#eef8ff;--pb-fin:#a9c6da}
.fin-ouro    {--pb-a:#ffd33d;--pb-b:#b98a12;--pb-edge:#ffe27a;--pb-fin:#d3a319}
.fin-platina {--pb-a:#cff6ff;--pb-b:#83dced;--pb-edge:#e6fbff;--pb-fin:#9fd9e6}
.fin-diamante{--pb-a:#57dfff;--pb-b:#00b9ff;--pb-edge:#b6f0ff;--pb-fin:#3ec8ee}

/* ============================== 3. MENU LATERAL =========================
   Estava cru: itens soltos, sem respiro, estado ativo fraco. */
.sidebar{background:rgba(10,11,13,.94);border-right:1px solid var(--color-border)}
.sidebar-nav{padding:14px 10px}
.nav-section{font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--color-soft);padding:0 10px;margin:18px 0 7px}
.nav-section:first-child{margin-top:0}
.nav-link{display:flex;align-items:center;gap:11px;padding:9px 11px;margin-bottom:2px;
  border-radius:var(--radius-md);border-left:0 !important;color:var(--color-muted);
  font-size:13.5px;font-weight:500;letter-spacing:-.01em;position:relative;
  transition:background .14s,color .14s}
.nav-link:hover{background:var(--color-surface-2);color:var(--color-text)}
.sidebar-nav .nav-link.is-active,.nav-link.is-active{
  background:var(--color-surface-2);color:var(--color-text);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--color-border)}
.sidebar-nav .nav-link.is-active::before{content:'';position:absolute;left:-10px;top:50%;
  transform:translateY(-50%);width:3px;height:18px;border-radius:0 3px 3px 0;
  background:var(--color-primary)}
.nav-link :is(.material-symbols-outlined,.icon){font-size:20px;color:inherit;opacity:.85}
.nav-link.is-active :is(.material-symbols-outlined,.icon){color:var(--color-primary);opacity:1}
.sidebar-cta{padding:12px;border-top:1px solid var(--color-border)}

/* card Modo Surf */
.ms{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);padding:14px}
.ms.on{border-color:rgba(var(--brand-rgb),.38);
  background:linear-gradient(160deg,rgba(var(--brand-rgb),.12),var(--color-surface) 60%)}
.ms-top{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.ms-board{width:24px;height:48px;flex:none}
.ms.on .ms-board{animation:pb-float 4s ease-in-out infinite}
.ms-top b{font-size:13.5px;font-weight:700;letter-spacing:-.02em}
.ms-top small{display:block;font-size:11px;color:var(--color-soft);
  font-family:'IBM Plex Mono',monospace}
.ms.on .ms-top small{color:var(--color-primary-soft)}
.ms p{font-size:11.5px;color:var(--color-muted);line-height:1.45;margin:0 0 11px}
.ms-bar{height:4px;border-radius:4px;background:var(--color-surface-3);overflow:hidden;
  margin-bottom:11px}
.ms-bar i{display:block;height:100%;border-radius:4px;background:var(--color-primary)}
.ms .button{width:100%}

/* ============================== 4. INICIO ==============================
   Adaptado do estilo que voce aprovou, com a faixa de planos e prancha. */
/* faixa de planos na home — com prancha e animacao */
.hm-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
.hm-plan{display:flex;align-items:center;gap:14px;padding:14px 16px;
  border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);transition:border-color .18s,transform .18s}
.hm-plan:hover{border-color:rgba(var(--brand-rgb),.4);transform:translateY(-2px)}
.hm-plan.cur{border-color:rgba(var(--brand-rgb),.42);
  background:linear-gradient(150deg,rgba(var(--brand-rgb),.10),var(--color-surface) 58%)}
.hm-plan .pb-stage{width:52px;flex:none}
.hm-plan .pb-stage::after{width:40px;height:8px;bottom:2px}
.hm-plan .pb{height:74px}
.hm-plan-i{flex:1;min-width:0}
.hm-plan-i b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em}
.hm-plan-i small{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--color-soft);margin:2px 0 5px}
.hm-plan-i span{font-size:12px;color:var(--color-muted)}
.hm-plan-p{text-align:right;flex:none}
.hm-plan-p b{display:block;font-family:'IBM Plex Mono',monospace;font-size:15px;
  font-weight:600;font-variant-numeric:tabular-nums}
.hm-plan-p small{font-size:10.5px;color:var(--color-soft)}

/* ============================== 5. PLANOS =============================== */
.pl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pl{position:relative;border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);padding:26px 22px 24px;text-align:center;
  transition:border-color .2s,transform .2s}
.pl:hover{border-color:rgba(var(--brand-rgb),.4);transform:translateY(-3px)}
.pl.reco{border-color:rgba(var(--brand-rgb),.42);
  background:linear-gradient(170deg,rgba(var(--brand-rgb),.09),var(--color-surface) 52%)}
.pl-flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:10px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:4px 12px;
  border-radius:20px;background:var(--color-primary-fill);color:#fff;white-space:nowrap}
.pl .pb-stage{height:212px;margin-bottom:4px}
.pl .pb{height:196px}
.pl h2{font-family:Sora,Inter,sans-serif;font-size:20px;font-weight:800;
  letter-spacing:-.03em;margin:0}
.pl-board{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--color-soft);margin:6px 0 14px}
.pl-price{font-family:Sora,Inter,sans-serif;font-size:30px;font-weight:800;
  letter-spacing:-.04em;margin:0}
.pl-price small{font-size:13px;font-weight:500;color:var(--color-muted);letter-spacing:0}
.pl-desc{font-size:12.5px;color:var(--color-muted);line-height:1.5;margin:12px 0 18px;
  min-height:52px}
.pl-feats{list-style:none;margin:0 0 20px;padding:18px 0 0;display:grid;gap:9px;
  text-align:left;border-top:1px solid var(--color-border)}
.pl-feats li{display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:start;
  font-size:12.5px;color:var(--color-text)}
.pl-feats :is(.material-symbols-outlined,.icon){font-size:17px;color:var(--color-primary)}
.pl-feats li.no{color:var(--color-soft)}
.pl-feats li.no :is(.material-symbols-outlined,.icon){opacity:.6;color:var(--color-soft)}
.pl .button{width:100%}

/* ============================== 6. SURFAR ==============================
   A prancha estava sozinha no canto. Agora tem agua e escala. */
.sf-hero{position:relative;border:1px solid var(--color-border);border-radius:var(--radius-xl);
  overflow:hidden;padding:40px 36px;margin-bottom:22px;
  background:
    radial-gradient(760px 340px at 82% 30%, rgba(var(--brand-rgb),.20), transparent 64%),
    linear-gradient(150deg,var(--color-surface),var(--color-bg-strong))}
/* linhas de agua atras da prancha */
.sf-hero::before{content:'';position:absolute;inset:auto 0 0 0;height:56%;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(var(--brand-rgb),.055) 0 1px, transparent 1px 26px);
  mask-image:linear-gradient(180deg,transparent,#000 55%,transparent)}
.sf-hero h1{font-family:Sora,Inter,sans-serif;font-size:34px;font-weight:800;
  letter-spacing:-.04em;line-height:1.1;margin:14px 0 0;max-width:14ch;position:relative}
.sf-hero p{font-size:14px;color:var(--color-muted);margin:14px 0 22px;max-width:52ch;
  line-height:1.6;position:relative}
.sf-hero > *{position:relative}
.sf-hero-board{position:absolute;right:8%;top:50%;transform:translateY(-50%);
  height:330px;pointer-events:none;z-index:0}
.sf-hero-board .pb{height:320px;animation-duration:6s}
.sf-hero-board .pb-stage::after{width:150px;height:20px;filter:blur(14px)}
.sf-note{display:flex;gap:10px;align-items:center;margin-top:20px;padding-left:14px;
  border-left:2px solid rgba(var(--brand-rgb),.45);font-size:12.5px;color:var(--color-muted)}
.sf-screens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sf-scr{border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-surface);padding:15px;transition:border-color .18s}
.sf-scr:hover{border-color:rgba(var(--brand-rgb),.34)}
.sf-scr.free{border-style:dashed}
.sf-scr-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:12px;font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--color-soft)}
.sf-scr-n{font-family:'IBM Plex Mono',monospace;font-size:10.5px;padding:1px 6px;
  border-radius:5px;background:var(--color-surface-3)}
.sf-scr-who{display:flex;align-items:center;gap:10px}
.sf-scr-av{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700;background:var(--color-surface-3);color:var(--color-muted)}
.sf-scr-who b{display:block;font-size:13px;font-weight:600}
.sf-scr-who small{font-size:11px;color:var(--color-soft)}

/* ============================== 7. LEILAO ============================== */
.lx-cols{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.lx-tabs{display:flex;gap:6px;border-bottom:1px solid var(--color-border);margin-bottom:18px}
.lx-tab{padding:10px 15px;font-size:13.5px;font-weight:600;color:var(--color-muted);
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  display:flex;align-items:center;gap:7px}
.lx-tab.on{color:var(--color-text);border-bottom-color:var(--color-primary)}
.lx-n{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;padding:1px 6px;
  border-radius:20px;background:var(--color-surface-3);color:var(--color-muted)}
.lx-tab.on .lx-n{background:rgba(var(--brand-rgb),.18);color:var(--color-primary-soft)}
.lx-next{position:relative;overflow:hidden;border:1px solid rgba(var(--brand-rgb),.32);
  border-radius:var(--radius-xl);padding:22px;margin-bottom:16px;
  background:linear-gradient(160deg,rgba(var(--brand-rgb),.10),var(--color-surface) 55%)}
/* barra de tempo escorrendo no topo do card */
.lx-next::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--color-warning),rgba(var(--brand-rgb),.4))}
.lx-flag{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:4px 9px;border-radius:6px;
  background:rgba(var(--brand-rgb),.18);color:var(--color-primary-soft);margin-bottom:14px}
.lx-next-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap}
.lx-time{font-family:'IBM Plex Mono',monospace;font-size:40px;font-weight:600;
  letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.lx-range{font-size:12.5px;color:var(--color-muted);margin-top:6px}
.lx-clock{text-align:right}
.lx-clock small{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--color-soft);margin-bottom:4px}
.lx-clock b{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:600;
  color:var(--color-warning);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.lx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  padding:18px 0 0;margin-top:16px;border-top:1px solid var(--color-border)}
.lx-stat small{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--color-soft);margin-bottom:5px}
.lx-stat b{font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:600;
  font-variant-numeric:tabular-nums}
.lx-lead{display:flex;align-items:center;gap:8px}
.lx-av{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none;
  font-size:11px;font-weight:700;background:var(--color-surface-3);color:var(--color-muted)}
.lx-heat{height:4px;border-radius:4px;background:var(--color-surface-3);overflow:hidden;
  margin-top:8px}
.lx-heat i{display:block;height:100%;border-radius:4px;background:var(--color-primary)}
.lx-list{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);overflow:hidden}
.lx-row{display:grid;grid-template-columns:76px 1fr auto auto;gap:16px;align-items:center;
  padding:13px 18px;border-top:1px solid var(--color-border);transition:background .13s}
.lx-row:first-child{border-top:0}
.lx-row:hover{background:var(--color-surface-2)}
.lx-row-time{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.lx-row-time small{display:block;font-size:10.5px;font-weight:400;color:var(--color-soft);
  letter-spacing:0;margin-top:2px}
.lx-row-mid{min-width:0}
.lx-free{font-size:12.5px;color:var(--color-primary-soft);font-weight:600}
.lx-row-meta{font-size:11.5px;color:var(--color-soft)}
.lx-row-clock{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--color-warning);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.lx-row.mine{background:rgba(var(--brand-rgb),.08)}
.lx-row.mine .lx-av{background:var(--color-primary);color:#fff}
.lx-acc{border:1px solid var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);overflow:hidden}
.lx-acc summary{padding:14px 18px;font-size:13.5px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:9px;list-style:none}
.lx-acc summary::-webkit-details-marker{display:none}
.lx-acc summary :is(.material-symbols-outlined,.icon){font-size:18px;color:var(--color-primary);
  margin-left:auto;transition:transform .18s}
.lx-acc[open] summary :is(.material-symbols-outlined,.icon){transform:rotate(180deg)}
.lx-acc ul{margin:0;padding:0 18px 16px 34px;display:grid;gap:9px;font-size:12.5px;
  color:var(--color-muted);line-height:1.5}
.lx-acc b{color:var(--color-text);font-weight:600}

/* ============================== RESPONSIVO ============================== */
@media (max-width:1000px){
  .lx-cols{grid-template-columns:1fr}
  .pl-grid,.hm-plans{grid-template-columns:1fr}
  .sf-screens{grid-template-columns:repeat(2,1fr)}
  .sf-hero-board{display:none}
  .hm-kpi{margin-left:0;width:100%}
}
@media (max-width:900px){ .ag-grid-scroll{overflow-x:auto} .ag-grid{min-width:720px} }
@media (max-width:720px){
  .button,.lx-tab{min-height:40px}
  .sf-hero h1{font-size:26px}
  .lx-row{grid-template-columns:70px 1fr;row-gap:8px}
  .lx-row-clock{grid-column:1/-1;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ============================== 8. DUVIDAS FREQUENTES ==================
   Problemas: 6 barras soltas de 1.600px de largura para respostas de uma
   linha, e um vazio enorme embaixo.
   Linha longa demais cansa a leitura. O olho perde onde estava.
   Solucao: largura de leitura confortavel, lista unica e estado aberto claro.
   Nao precisa mexer no faq.js — a estrutura atual ja serve. */
.accordion{
    max-width:820px;                 /* ~72 caracteres por linha */
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    background:var(--color-surface);
    overflow:hidden;
}
/* os 6 cards viram uma lista unica, com divisoria entre eles */
.accordion .card{
    border:0;
    border-top:1px solid var(--color-border);
    border-radius:0;
    background:transparent;
    padding:0;
    box-shadow:none;
    position:relative;
}
.accordion .card:first-child{ border-top:0; }

.accordion .card > button[data-accordion]{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 20px;
    background:none;
    border:0;
    cursor:pointer;
    text-align:left;
    color:var(--color-muted);
    transition:background .14s,color .14s;
}
.accordion .card > button[data-accordion]:hover{
    background:var(--color-surface-2);
    color:var(--color-text);
}
.accordion .card > button[data-accordion] strong{
    flex:1;
    font-size:14.5px;
    font-weight:600;
    letter-spacing:-.02em;
    color:inherit;
}
.accordion .card > button[data-accordion] :is(.material-symbols-outlined,.icon){
    font-size:20px;
    color:var(--color-soft);
    transition:transform .2s,color .2s;
}

/* numero da pergunta — ajuda a nao se perder na lista */
.accordion{ counter-reset:faq; }
.accordion .card{ counter-increment:faq; }
.accordion .card > button[data-accordion]::before{
    content:counter(faq,decimal-leading-zero);
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:11px;
    font-weight:600;
    color:var(--color-soft);
    flex:none;
    width:20px;
}

.accordion-panel{
    padding:0 20px 18px 54px;
    font-size:13.5px;
    line-height:1.65;
    color:var(--color-muted);
    max-width:64ch;
}

/* ESTADO ABERTO — detectado sem tocar no JS.
   O faq.js so adiciona ou remove a classe .hidden no painel. */
.accordion .card:has(.accordion-panel:not(.hidden)){
    background:rgba(var(--brand-rgb),.055);
}
.accordion .card:has(.accordion-panel:not(.hidden))::before{
    content:'';
    position:absolute;
    left:0; top:0; bottom:0;
    width:3px;
    background:var(--color-primary);
}
.accordion .card:has(.accordion-panel:not(.hidden)) > button[data-accordion]{
    color:var(--color-text);
}
.accordion .card:has(.accordion-panel:not(.hidden)) > button[data-accordion] strong{
    font-weight:700;
}
.accordion .card:has(.accordion-panel:not(.hidden)) > button[data-accordion] :is(.material-symbols-outlined,.icon){
    transform:rotate(180deg);
    color:var(--color-primary);
}
.accordion .card:has(.accordion-panel:not(.hidden)) > button[data-accordion]::before{
    color:var(--color-primary-soft);
}

/* navegador antigo sem :has() — pelo menos o painel fica legivel */
@supports not selector(:has(*)){
    .accordion-panel:not(.hidden){
        border-left:3px solid var(--color-primary);
        margin-left:-3px;
    }
}

@media (max-width:720px){
    .accordion .card > button[data-accordion]{ padding:14px 16px; gap:10px; }
    .accordion-panel{ padding:0 16px 16px 46px; }
}


/* ==========================================================================
   v4 — HERO COM ONDA  +  AGENDA DO DIA COM 2 VAGAS
   Substitui o hero e a grade da v3.
   ========================================================================== */

/* ============================ HERO COM ONDA ============================
   O hero era uma caixa lisa. Agora tem arte de surf desenhada em SVG,
   embutida no proprio CSS — nenhuma imagem para baixar. */
.hm-hero h1{
    font-family:Sora,Inter,sans-serif;
    font-size:30px;font-weight:800;letter-spacing:-.04em;
    margin:12px 0 0;line-height:1.1;
}
.hm-hero p{font-size:13.5px;color:var(--color-muted);margin:7px 0 0;max-width:40ch}

/* chip do usuario, no estilo que voce viu na concorrencia */
.hm-user{
    display:inline-flex;align-items:center;gap:11px;margin-top:16px;
    padding:8px 14px 8px 8px;border-radius:var(--radius-lg);
    background:rgba(10,11,13,.62);border:1px solid var(--color-border);
    backdrop-filter:blur(6px);
}
.hm-user img,.hm-user .hm-user-av{
    width:36px;height:36px;border-radius:11px;flex:none;object-fit:cover;
    display:grid;place-items:center;font-weight:700;font-size:14px;
    background:var(--color-surface-3);color:var(--color-primary-soft);
}
.hm-user b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.02em}
.hm-user small{font-size:11.5px;color:var(--color-soft);font-family:'IBM Plex Mono',monospace}

/* os 4 cartoes de numero, flutuando sobre a onda */
.hm-stats{
    margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;
}
.hm-stat{
    min-width:118px;padding:12px 15px;border-radius:var(--radius-lg);
    background:rgba(10,11,13,.66);border:1px solid var(--color-border);
    backdrop-filter:blur(8px);
}
.hm-stat small{
    display:flex;align-items:center;gap:5px;
    font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--color-soft);margin-bottom:7px;
}
.hm-stat small :is(.material-symbols-outlined,.icon){font-size:13px;color:var(--color-primary)}
.hm-stat b{
    display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:22px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;
    letter-spacing:-.03em;
}
.hm-stat span{display:block;font-size:10.5px;color:var(--color-soft);margin-top:5px}
.hm-stat.hot b{color:var(--color-warning)}

@media (max-width:1000px){
    .hm-stats{margin-left:0;width:100%}
    .hm-stat{flex:1;min-width:120px}
    .hm-hero h1{font-size:24px}
}

/* ========================= AGENDA — DIA COM 2 VAGAS ====================
   O QUE ESTAVA ERRADO NA VERSAO ANTERIOR:
   1. Eu montei a semana inteira. O backend so gera os slots de HOJE.
   2. Celula de 90px nao cabe rosto nem nome — virou planilha.
   3. Linhas de grade em tudo = cara de Excel.

   AGORA: um dia por vez, e cada horario mostra as SUAS 2 VAGAS
   (Tela 3 e Tela 4 do Surfar) lado a lado, com espaco para avatar e nome.
   Sem linha de grade: cartoes separados por respiro.
   ====================================================================== */

.agd{max-width:980px}

/* ---- navegacao do dia ---- */
.agd-days{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.agd-day{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:9px 16px;border-radius:var(--radius-lg);
    border:1px solid var(--color-border);background:var(--color-surface);
    color:var(--color-muted);cursor:pointer;transition:.15s;
}
.agd-day:hover{background:var(--color-surface-2);color:var(--color-text)}
.agd-day b{font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.agd-day small{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--color-soft)}
.agd-day.on{
    background:rgba(var(--brand-rgb),.13);border-color:rgba(var(--brand-rgb),.4);
    color:var(--color-text);
}
.agd-day.on small{color:var(--color-primary-soft)}

/* ---- faixa de contexto ---- */
.agd-info{
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    padding:13px 18px;margin-bottom:18px;border-radius:var(--radius-xl);
    border:1px solid rgba(var(--brand-rgb),.24);background:rgba(var(--brand-rgb),.07);
}
.agd-info :is(.material-symbols-outlined,.icon){font-size:19px;color:var(--color-primary)}
.agd-info b{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;
    font-variant-numeric:tabular-nums}
.agd-info span{font-size:13px;color:var(--color-muted)}
.agd-info .sep{width:1px;height:20px;background:var(--color-border)}

/* ---- a lista do dia. SEM grade. ---- */
.agd-list{display:flex;flex-direction:column;gap:8px}

.agd-hour{
    display:grid;
    grid-template-columns:74px 1fr 1fr;   /* horario + Tela 3 + Tela 4 */
    gap:8px;align-items:stretch;
}
.agd-hour.now .agd-time{color:var(--color-primary-soft)}
.agd-hour.now .agd-time::before{
    content:'';width:5px;height:5px;border-radius:50%;
    background:var(--color-danger);box-shadow:0 0 0 3px rgba(239,91,82,.2);
    animation:agpulse 2.2s ease-in-out infinite;
}
.agd-hour.past{opacity:.38}

.agd-time{
    display:flex;align-items:center;justify-content:flex-end;gap:7px;
    padding-right:12px;
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
    color:var(--color-soft);
}

/* ---- a vaga ---- */
.agd-slot{
    display:flex;align-items:center;gap:12px;
    min-height:62px;padding:11px 14px;
    border-radius:var(--radius-lg);
    border:1px solid var(--color-border);
    background:var(--color-surface);
    text-align:left;cursor:pointer;width:100%;
    transition:border-color .15s,background .15s,transform .15s;
}
.agd-slot:hover{background:var(--color-surface-2);transform:translateY(-1px)}
.agd-slot:disabled{cursor:default;transform:none}

.agd-av{
    width:36px;height:36px;border-radius:11px;flex:none;object-fit:cover;
    display:grid;place-items:center;font-size:14px;font-weight:700;
    background:var(--color-surface-3);color:var(--color-muted);
    border:1px solid var(--color-border);
}
.agd-who{flex:1;min-width:0}
.agd-who b{
    display:block;font-size:13.5px;font-weight:600;letter-spacing:-.015em;
    color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.agd-who small{
    display:block;font-size:11px;color:var(--color-soft);margin-top:2px;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.03em;
}
.agd-tela{
    font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;
    letter-spacing:.11em;text-transform:uppercase;color:var(--color-soft);
    padding:2px 7px;border-radius:5px;background:var(--color-surface-2);flex:none;
}

/* LIVRE — cartao tracejado e convidativo */
.agd-slot.livre{
    border-style:dashed;
    border-color:rgba(var(--brand-rgb),.30);
    background:rgba(var(--brand-rgb),.045);
}
.agd-slot.livre:hover{
    border-color:rgba(var(--brand-rgb),.55);
    background:rgba(var(--brand-rgb),.10);
}
.agd-slot.livre .agd-av{
    background:rgba(var(--brand-rgb),.12);
    border-color:rgba(var(--brand-rgb),.28);
    color:var(--color-primary-soft);
}
.agd-slot.livre .agd-who b{color:var(--color-primary-soft)}
.agd-price{
    font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:600;
    font-variant-numeric:tabular-nums;color:var(--color-text);flex:none;text-align:right;
}
.agd-price small{display:block;font-size:9.5px;color:var(--color-soft);font-weight:500}
.agd-price.surge{color:var(--color-warning)}

/* AO VIVO */
.agd-slot.vivo{
    border-color:rgba(239,91,82,.42);
    background:linear-gradient(120deg,rgba(239,91,82,.11),var(--color-surface) 62%);
}
.agd-slot.vivo .agd-av{border-color:rgba(239,91,82,.45)}
.agd-slot.vivo .agd-who small{color:var(--color-danger);display:flex;align-items:center;gap:5px}
.agd-live-dot{
    width:5px;height:5px;border-radius:50%;background:var(--color-danger);
    animation:agpulse 2.2s ease-in-out infinite;
}

/* SEU HORARIO */
.agd-slot.meu{
    border-color:rgba(var(--brand-rgb),.5);
    background:linear-gradient(120deg,rgba(var(--brand-rgb),.14),var(--color-surface) 62%);
}
.agd-slot.meu .agd-av{background:var(--color-primary-fill);color:#fff;border-color:transparent}
.agd-slot.meu .agd-who small{color:var(--color-primary-soft)}

/* PASSOU */
.agd-slot.passou{background:var(--color-bg-strong);border-style:solid}
.agd-slot.passou:hover{transform:none;background:var(--color-bg-strong)}

/* horas antigas recolhidas */
.agd-past-toggle{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:10px;margin-bottom:8px;
    border-radius:var(--radius-lg);border:1px dashed var(--color-border);
    background:transparent;color:var(--color-soft);font-size:12.5px;cursor:pointer;
}
.agd-past-toggle:hover{background:var(--color-surface-2);color:var(--color-text)}

.agd-foot{
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
    margin-top:16px;font-size:12.5px;color:var(--color-muted);
}
.agd-foot b{color:var(--color-text)}

@media (max-width:760px){
    .agd-hour{grid-template-columns:58px 1fr;}
    .agd-time{grid-row:span 2;padding-right:8px;font-size:12.5px}
    .agd-slot{min-height:56px}
}




/* ==========================================================================
   v6 — OCEANO ANIMADO (corrigido)
   O bug da v5: as cores #rrggbb ficavam sem escape dentro do url() e o
   navegador cortava o SVG na primeira cor. Agora vao como %23.
   ========================================================================== */

.hm-hero{
    position:relative;overflow:hidden;
    display:flex;align-items:center;gap:24px;flex-wrap:wrap;
    min-height:224px;padding:28px 30px;margin-bottom:20px;
    border:1px solid var(--color-border);border-radius:var(--radius-xl);
    background:
        radial-gradient(640px 280px at 76% 6%, rgba(46,144,224,.22), transparent 68%),
        linear-gradient(168deg,#0e1c27 0%,#0a0b0d 66%);
}

/* o mar: 3 ondas em ritmos diferentes + a prancha */
.hm-hero::before{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22170%22%20height=%22190%22%20viewBox=%220%200%20170%20190%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22p%22%20x1=%220%22%20y1=%220%22%20x2=%221%22%20y2=%221%22%3E%3Cstop%20offset=%220%25%22%20stop-color=%22%238ccdf9%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%231d6ba8%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20transform=%22translate(84%20100)%20rotate(-32)%22%3E%3Cpath%20d=%22M0%20-58%20C10%20-34%2013%206%2011%2038%20C10%2053%205%2064%200%2066%20C-5%2064%20-10%2053%20-11%2038%20C-13%206%20-10%20-34%200%20-58%20Z%22%20fill=%22url(%23p)%22%20stroke=%22%23d3ecff%22%20stroke-width=%221.8%22/%3E%3Cline%20x1=%220%22%20y1=%22-51%22%20x2=%220%22%20y2=%2259%22%20stroke=%22%23d3ecff%22%20stroke-width=%221.1%22%20opacity=%22.55%22/%3E%3Cpath%20d=%22M0%2038%20L0%2060%20L8%2052%20Z%22%20fill=%22%232e90e0%22/%3E%3C/g%3E%3Cg%20fill=%22%23eaf6ff%22%20opacity=%22.6%22%3E%3Ccircle%20cx=%22116%22%20cy=%2294%22%20r=%222.6%22/%3E%3Ccircle%20cx=%22129%22%20cy=%2280%22%20r=%221.7%22/%3E%3Ccircle%20cx=%22107%22%20cy=%2272%22%20r=%221.5%22/%3E%3Ccircle%20cx=%22138%22%20cy=%2298%22%20r=%222%22/%3E%3Ccircle%20cx=%2298%22%20cy=%2260%22%20r=%221.3%22/%3E%3Ccircle%20cx=%22146%22%20cy=%2284%22%20r=%221.4%22/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22500%22%20height=%22190%22%20viewBox=%220%200%20500%20190%22%3E%3Cpath%20d=%22M0%20128.2%20L6%20126.0%20L12%20124.0%20L18%20122.3%20L24%20120.7%20L30%20119.5%20L36%20118.4%20L42%20117.6%20L48%20117.0%20L54%20116.6%20L60%20116.5%20L66%20116.5%20L72%20116.7%20L78%20117.0%20L84%20117.5%20L90%20118.0%20L96%20118.6%20L102%20119.3%20L108%20120.0%20L114%20120.7%20L120%20121.3%20L126%20121.9%20L132%20122.5%20L138%20123.0%20L144%20123.4%20L150%20123.8%20L156%20124.0%20L162%20124.2%20L168%20124.3%20L174%20124.4%20L180%20124.4%20L186%20124.4%20L192%20124.4%20L198%20124.4%20L204%20124.5%20L210%20124.6%20L216%20124.7%20L222%20125.0%20L228%20125.4%20L234%20126.0%20L240%20126.6%20L246%20127.5%20L252%20128.5%20L258%20129.7%20L264%20131.1%20L270%20132.7%20L276%20134.4%20L282%20136.3%20L288%20138.3%20L294%20140.5%20L300%20142.7%20L306%20145.0%20L312%20147.4%20L318%20149.7%20L324%20152.0%20L330%20154.3%20L336%20156.5%20L342%20158.5%20L348%20160.3%20L354%20162.0%20L360%20163.4%20L366%20164.6%20L372%20165.5%20L378%20166.1%20L384%20166.4%20L390%20166.4%20L396%20166.0%20L402%20165.4%20L408%20164.4%20L414%20163.1%20L420%20161.5%20L426%20159.7%20L432%20157.6%20L438%20155.4%20L444%20152.9%20L450%20150.3%20L456%20147.6%20L462%20144.8%20L468%20142.0%20L474%20139.3%20L480%20136.5%20L486%20133.9%20L492%20131.3%20L498%20128.9%20L500%20190%20L0%20190%20Z%22%20fill=%22%232478b6%22/%3E%3Cpath%20d=%22M0%20128.2%20L6%20126.0%20L12%20124.0%20L18%20122.3%20L24%20120.7%20L30%20119.5%20L36%20118.4%20L42%20117.6%20L48%20117.0%20L54%20116.6%20L60%20116.5%20L66%20116.5%20L72%20116.7%20L78%20117.0%20L84%20117.5%20L90%20118.0%20L96%20118.6%20L102%20119.3%20L108%20120.0%20L114%20120.7%20L120%20121.3%20L126%20121.9%20L132%20122.5%20L138%20123.0%20L144%20123.4%20L150%20123.8%20L156%20124.0%20L162%20124.2%20L168%20124.3%20L174%20124.4%20L180%20124.4%20L186%20124.4%20L192%20124.4%20L198%20124.4%20L204%20124.5%20L210%20124.6%20L216%20124.7%20L222%20125.0%20L228%20125.4%20L234%20126.0%20L240%20126.6%20L246%20127.5%20L252%20128.5%20L258%20129.7%20L264%20131.1%20L270%20132.7%20L276%20134.4%20L282%20136.3%20L288%20138.3%20L294%20140.5%20L300%20142.7%20L306%20145.0%20L312%20147.4%20L318%20149.7%20L324%20152.0%20L330%20154.3%20L336%20156.5%20L342%20158.5%20L348%20160.3%20L354%20162.0%20L360%20163.4%20L366%20164.6%20L372%20165.5%20L378%20166.1%20L384%20166.4%20L390%20166.4%20L396%20166.0%20L402%20165.4%20L408%20164.4%20L414%20163.1%20L420%20161.5%20L426%20159.7%20L432%20157.6%20L438%20155.4%20L444%20152.9%20L450%20150.3%20L456%20147.6%20L462%20144.8%20L468%20142.0%20L474%20139.3%20L480%20136.5%20L486%20133.9%20L492%20131.3%20L498%20128.9%22%20fill=%22none%22%20stroke=%22%239ad5ff%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20opacity=%22.6%22/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22580%22%20height=%22190%22%20viewBox=%220%200%20580%20190%22%3E%3Cpath%20d=%22M0%2099.9%20L6%2098.5%20L12%2097.1%20L18%2095.9%20L24%2094.8%20L30%2093.9%20L36%2093.1%20L42%2092.4%20L48%2091.8%20L54%2091.4%20L60%2091.1%20L66%2091.0%20L72%2090.9%20L78%2090.9%20L84%2091.1%20L90%2091.3%20L96%2091.6%20L102%2092.0%20L108%2092.3%20L114%2092.8%20L120%2093.2%20L126%2093.7%20L132%2094.1%20L138%2094.6%20L144%2095.0%20L150%2095.4%20L156%2095.7%20L162%2096.1%20L168%2096.3%20L174%2096.5%20L180%2096.7%20L186%2096.9%20L192%2097.0%20L198%2097.0%20L204%2097.1%20L210%2097.1%20L216%2097.1%20L222%2097.1%20L228%2097.1%20L234%2097.1%20L240%2097.1%20L246%2097.2%20L252%2097.3%20L258%2097.5%20L264%2097.8%20L270%2098.1%20L276%2098.6%20L282%2099.1%20L288%2099.7%20L294%20100.4%20L300%20101.3%20L306%20102.2%20L312%20103.2%20L318%20104.3%20L324%20105.6%20L330%20106.9%20L336%20108.2%20L342%20109.7%20L348%20111.2%20L354%20112.7%20L360%20114.3%20L366%20115.9%20L372%20117.4%20L378%20118.9%20L384%20120.4%20L390%20121.9%20L396%20123.2%20L402%20124.5%20L408%20125.6%20L414%20126.7%20L420%20127.5%20L426%20128.3%20L432%20128.8%20L438%20129.2%20L444%20129.5%20L450%20129.5%20L456%20129.4%20L462%20129.0%20L468%20128.5%20L474%20127.8%20L480%20127.0%20L486%20125.9%20L492%20124.8%20L498%20123.5%20L504%20122.0%20L510%20120.4%20L516%20118.8%20L522%20117.1%20L528%20115.3%20L534%20113.4%20L540%20111.6%20L546%20109.7%20L552%20107.9%20L558%20106.0%20L564%20104.3%20L570%20102.6%20L576%20101.0%20L580%20190%20L0%20190%20Z%22%20fill=%22%23164b71%22/%3E%3Cpath%20d=%22M0%2099.9%20L6%2098.5%20L12%2097.1%20L18%2095.9%20L24%2094.8%20L30%2093.9%20L36%2093.1%20L42%2092.4%20L48%2091.8%20L54%2091.4%20L60%2091.1%20L66%2091.0%20L72%2090.9%20L78%2090.9%20L84%2091.1%20L90%2091.3%20L96%2091.6%20L102%2092.0%20L108%2092.3%20L114%2092.8%20L120%2093.2%20L126%2093.7%20L132%2094.1%20L138%2094.6%20L144%2095.0%20L150%2095.4%20L156%2095.7%20L162%2096.1%20L168%2096.3%20L174%2096.5%20L180%2096.7%20L186%2096.9%20L192%2097.0%20L198%2097.0%20L204%2097.1%20L210%2097.1%20L216%2097.1%20L222%2097.1%20L228%2097.1%20L234%2097.1%20L240%2097.1%20L246%2097.2%20L252%2097.3%20L258%2097.5%20L264%2097.8%20L270%2098.1%20L276%2098.6%20L282%2099.1%20L288%2099.7%20L294%20100.4%20L300%20101.3%20L306%20102.2%20L312%20103.2%20L318%20104.3%20L324%20105.6%20L330%20106.9%20L336%20108.2%20L342%20109.7%20L348%20111.2%20L354%20112.7%20L360%20114.3%20L366%20115.9%20L372%20117.4%20L378%20118.9%20L384%20120.4%20L390%20121.9%20L396%20123.2%20L402%20124.5%20L408%20125.6%20L414%20126.7%20L420%20127.5%20L426%20128.3%20L432%20128.8%20L438%20129.2%20L444%20129.5%20L450%20129.5%20L456%20129.4%20L462%20129.0%20L468%20128.5%20L474%20127.8%20L480%20127.0%20L486%20125.9%20L492%20124.8%20L498%20123.5%20L504%20122.0%20L510%20120.4%20L516%20118.8%20L522%20117.1%20L528%20115.3%20L534%20113.4%20L540%20111.6%20L546%20109.7%20L552%20107.9%20L558%20106.0%20L564%20104.3%20L570%20102.6%20L576%20101.0%22%20fill=%22none%22%20stroke=%22%233f97d6%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20opacity=%22.6%22/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22660%22%20height=%22190%22%20viewBox=%220%200%20660%20190%22%3E%3Cpath%20d=%22M0%2073.7%20L6%2072.8%20L12%2072.0%20L18%2071.2%20L24%2070.5%20L30%2069.8%20L36%2069.3%20L42%2068.8%20L48%2068.4%20L54%2068.0%20L60%2067.8%20L66%2067.6%20L72%2067.4%20L78%2067.4%20L84%2067.3%20L90%2067.4%20L96%2067.5%20L102%2067.6%20L108%2067.8%20L114%2068.0%20L120%2068.2%20L126%2068.5%20L132%2068.8%20L138%2069.0%20L144%2069.3%20L150%2069.6%20L156%2069.9%20L162%2070.2%20L168%2070.4%20L174%2070.6%20L180%2070.8%20L186%2071.0%20L192%2071.2%20L198%2071.3%20L204%2071.4%20L210%2071.5%20L216%2071.6%20L222%2071.6%20L228%2071.7%20L234%2071.7%20L240%2071.7%20L246%2071.7%20L252%2071.7%20L258%2071.7%20L264%2071.7%20L270%2071.7%20L276%2071.8%20L282%2071.8%20L288%2071.9%20L294%2072.0%20L300%2072.2%20L306%2072.4%20L312%2072.7%20L318%2073.0%20L324%2073.3%20L330%2073.7%20L336%2074.2%20L342%2074.7%20L348%2075.3%20L354%2075.9%20L360%2076.6%20L366%2077.3%20L372%2078.1%20L378%2079.0%20L384%2079.8%20L390%2080.7%20L396%2081.7%20L402%2082.6%20L408%2083.6%20L414%2084.6%20L420%2085.5%20L426%2086.5%20L432%2087.4%20L438%2088.3%20L444%2089.2%20L450%2090.1%20L456%2090.9%20L462%2091.6%20L468%2092.3%20L474%2092.9%20L480%2093.4%20L486%2093.8%20L492%2094.1%20L498%2094.4%20L504%2094.5%20L510%2094.6%20L516%2094.5%20L522%2094.4%20L528%2094.2%20L534%2093.8%20L540%2093.4%20L546%2092.8%20L552%2092.2%20L558%2091.5%20L564%2090.7%20L570%2089.8%20L576%2088.9%20L582%2087.9%20L588%2086.9%20L594%2085.8%20L600%2084.7%20L606%2083.6%20L612%2082.4%20L618%2081.3%20L624%2080.1%20L630%2079.0%20L636%2077.8%20L642%2076.7%20L648%2075.7%20L654%2074.7%20L660%2073.7%20L660%20190%20L0%20190%20Z%22%20fill=%22%230e2d45%22/%3E%3C/svg%3E");
    background-repeat:no-repeat,repeat-x,repeat-x,repeat-x;
    background-size:196px 218px,500px 190px,580px 190px,660px 190px;
    background-position:64% 132%,0 100%,0 100%,0 100%;
    animation:bah-mare 24s linear infinite;
}
/* a prancha cruza o mar da direita para a esquerda enquanto sobe e desce
   nas cristas. Cada 25% ela esta numa altura diferente da onda. */
@keyframes bah-mare{
    0%  {background-position: 96% 128%,      0 100%,      0 100%,      0 100%}
    25% {background-position: 74% 118%,  -125px 100%,  -145px 100%,  -165px 100%}
    50% {background-position: 52% 130%,  -250px 100%,  -290px 100%,  -330px 100%}
    75% {background-position: 30% 119%,  -375px 100%,  -435px 100%,  -495px 100%}
    100%{background-position:  8% 128%,  -500px 100%,  -580px 100%,  -660px 100%}
}

/* legibilidade do texto + brilho do sol na agua */
.hm-hero::after{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
    background:
        radial-gradient(320px 130px at 72% 62%, rgba(154,213,255,.15), transparent 72%),
        linear-gradient(100deg,#0a0b0d 1%,rgba(10,11,13,.90) 24%,
            rgba(10,11,13,.34) 50%,rgba(10,11,13,0) 82%);
    animation:bah-sol 9s ease-in-out infinite;
}
@keyframes bah-sol{0%,100%{opacity:1}50%{opacity:.88}}

.hm-hero > *{position:relative;z-index:2}

@media (prefers-reduced-motion:reduce){
    .hm-hero::before,.hm-hero::after{animation:none}
}
@media (max-width:1000px){
    .hm-hero{min-height:auto;padding:22px}
    .hm-hero::before{opacity:.45;background-position:118% 38%,0 100%,0 100%,0 100%}
}

/* ---- a etiqueta vira DADO, nao slogan ----
   "Comunidade ativa" era frase da concorrencia. Numero real nao se copia. */
.hm-hero-tag{
    display:inline-flex;align-items:center;gap:9px;
    padding:6px 13px;border-radius:20px;
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:11px;font-weight:600;letter-spacing:.09em;
    background:rgba(10,11,13,.55);border:1px solid rgba(var(--brand-rgb),.34);
    color:var(--color-primary-soft);backdrop-filter:blur(6px);
}
.hm-hero-tag b{color:var(--color-text);font-weight:700}
.hm-hero-tag .vivo{color:var(--color-danger)}
.hm-hero-tag i{
    width:6px;height:6px;border-radius:50%;background:var(--color-primary);
    display:inline-block;
}
.hm-hero-tag i.r{background:var(--color-danger);animation:agpulse 2.2s ease-in-out infinite}


/* ==========================================================================
   v7 — cabecalho das vagas + destaque do AO VIVO
   ========================================================================== */

/* ---- titulo das duas colunas ---- */
.agd-head{
    display:grid;
    grid-template-columns:74px 1fr 1fr;
    gap:8px;
    margin-bottom:8px;
    padding:0 0 2px;
}
.agd-head span{
    display:flex;align-items:center;gap:8px;
    padding:0 14px;
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
    color:var(--color-soft);
}
.agd-head span::after{
    content:'';flex:1;height:1px;background:var(--color-border);
}
.agd-head span i{
    width:6px;height:6px;border-radius:2px;flex:none;
    background:rgba(var(--brand-rgb),.5);
}

/* a etiqueta T3/T4 dentro do cartao virou repeticao — o titulo da coluna
   ja diz de qual slot se trata. */
.agd-slot .agd-tela{display:none}

/* ---- AO VIVO pulsando em vermelho, igual ao Inicio ---- */
.agd-slot.vivo .agd-av{
    border-color:rgba(239,91,82,.6);
    color:var(--color-danger);
    background:rgba(239,91,82,.14);
}
.agd-slot.vivo .agd-who b{color:var(--color-text)}
.agd-slot.vivo .agd-who small{
    color:var(--color-danger);display:flex;align-items:center;gap:5px;font-weight:600;
}
/* selo AO VIVO na ponta do cartao */
.agd-slot.vivo::after{
    content:'AO VIVO';
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:9px;font-weight:700;letter-spacing:.12em;
    padding:3px 8px;border-radius:5px;flex:none;
    background:rgba(239,91,82,.16);color:var(--color-danger);
}
.agd-live-dot{
    width:6px;height:6px;border-radius:50%;background:var(--color-danger);
    box-shadow:0 0 0 0 rgba(239,91,82,.5);
    animation:agd-dot 2.4s ease-in-out infinite;
}
@keyframes agd-dot{
    0%,100%{box-shadow:0 0 0 0 rgba(239,91,82,.55)}
    50%    {box-shadow:0 0 0 4px rgba(239,91,82,0)}
}

/* seu horario tambem ganha selo, sem piscar */
.agd-slot.meu::after{
    content:'SEU';
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:9px;font-weight:700;letter-spacing:.12em;
    padding:3px 8px;border-radius:5px;flex:none;
    background:rgba(var(--brand-rgb),.18);color:var(--color-primary-soft);
}

@media (prefers-reduced-motion:reduce){
    .agd-slot.vivo,.agd-live-dot{animation:none}
}
@media (max-width:760px){
    .agd-head{grid-template-columns:58px 1fr;}
    .agd-head span:last-child{display:none}
}


/* ==========================================================================
   v8 — MAR VERMELHO NO CARTAO AO VIVO
   Mesma tecnica do hero, em escala de cartao. Duas ondas em ritmos
   diferentes, na cor de "ao vivo". Amarra a linguagem visual do site.
   ========================================================================== */

.agd-slot.vivo{
    position:relative;
    overflow:hidden;
    border-color:rgba(239,91,82,.55);
    background:linear-gradient(120deg,rgba(239,91,82,.13),var(--color-surface) 62%);
    animation:agd-vivo 2.4s ease-in-out infinite;
}

/* o mar, no rodape do cartao */
.agd-slot.vivo::before{
    content:'';
    position:absolute;
    left:0;right:0;bottom:0;
    height:30px;
    pointer-events:none;
    z-index:0;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22170%22%20height=%2260%22%20viewBox=%220%200%20170%2060%22%3E%3Cpath%20d=%22M0%2041.0%20L5%2039.2%20L10%2037.9%20L15%2037.1%20L20%2036.8%20L25%2037.0%20L30%2037.4%20L35%2038.0%20L40%2038.7%20L45%2039.3%20L50%2039.7%20L55%2039.9%20L60%2039.9%20L65%2039.9%20L70%2039.8%20L75%2039.9%20L80%2040.3%20L85%2041.0%20L90%2042.1%20L95%2043.7%20L100%2045.5%20L105%2047.6%20L110%2049.7%20L115%2051.7%20L120%2053.4%20L125%2054.6%20L130%2055.2%20L135%2055.0%20L140%2054.2%20L145%2052.7%20L150%2050.6%20L155%2048.2%20L160%2045.7%20L165%2043.2%20L170%2041.0%20L170%2060%20L0%2060%20Z%22%20fill=%22%238a2620%22/%3E%3Cpath%20d=%22M0%2041.0%20L5%2039.2%20L10%2037.9%20L15%2037.1%20L20%2036.8%20L25%2037.0%20L30%2037.4%20L35%2038.0%20L40%2038.7%20L45%2039.3%20L50%2039.7%20L55%2039.9%20L60%2039.9%20L65%2039.9%20L70%2039.8%20L75%2039.9%20L80%2040.3%20L85%2041.0%20L90%2042.1%20L95%2043.7%20L100%2045.5%20L105%2047.6%20L110%2049.7%20L115%2051.7%20L120%2053.4%20L125%2054.6%20L130%2055.2%20L135%2055.0%20L140%2054.2%20L145%2052.7%20L150%2050.6%20L155%2048.2%20L160%2045.7%20L165%2043.2%20L170%2041.0%22%20fill=%22none%22%20stroke=%22%23ef5b52%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20opacity=%22.75%22/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22220%22%20height=%2260%22%20viewBox=%220%200%20220%2060%22%3E%3Cpath%20d=%22M0%2031.8%20L5%2030.7%20L10%2029.8%20L15%2029.2%20L20%2028.8%20L25%2028.6%20L30%2028.7%20L35%2028.8%20L40%2029.1%20L45%2029.5%20L50%2029.9%20L55%2030.2%20L60%2030.5%20L65%2030.8%20L70%2030.9%20L75%2030.9%20L80%2030.9%20L85%2030.9%20L90%2030.9%20L95%2030.9%20L100%2031.0%20L105%2031.3%20L110%2031.8%20L115%2032.4%20L120%2033.2%20L125%2034.2%20L130%2035.3%20L135%2036.5%20L140%2037.7%20L145%2038.9%20L150%2040.1%20L155%2041.0%20L160%2041.8%20L165%2042.2%20L170%2042.4%20L175%2042.3%20L180%2041.8%20L185%2041.0%20L190%2040.0%20L195%2038.7%20L200%2037.4%20L205%2035.9%20L210%2034.4%20L215%2033.0%20L220%2031.8%20L220%2060%20L0%2060%20Z%22%20fill=%22%235c1b18%22/%3E%3Cpath%20d=%22M0%2031.8%20L5%2030.7%20L10%2029.8%20L15%2029.2%20L20%2028.8%20L25%2028.6%20L30%2028.7%20L35%2028.8%20L40%2029.1%20L45%2029.5%20L50%2029.9%20L55%2030.2%20L60%2030.5%20L65%2030.8%20L70%2030.9%20L75%2030.9%20L80%2030.9%20L85%2030.9%20L90%2030.9%20L95%2030.9%20L100%2031.0%20L105%2031.3%20L110%2031.8%20L115%2032.4%20L120%2033.2%20L125%2034.2%20L130%2035.3%20L135%2036.5%20L140%2037.7%20L145%2038.9%20L150%2040.1%20L155%2041.0%20L160%2041.8%20L165%2042.2%20L170%2042.4%20L175%2042.3%20L180%2041.8%20L185%2041.0%20L190%2040.0%20L195%2038.7%20L200%2037.4%20L205%2035.9%20L210%2034.4%20L215%2033.0%20L220%2031.8%22%20fill=%22none%22%20stroke=%22%23a8332c%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20opacity=%22.75%22/%3E%3C/svg%3E");
    background-repeat:repeat-x,repeat-x;
    background-size:170px 60px,220px 60px;
    background-position:0 100%,0 100%;
    animation:agd-mar 9s linear infinite;
    opacity:.62;
    mask-image:linear-gradient(180deg,transparent,#000 62%);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 62%);
}
@keyframes agd-mar{
    from{background-position:      0 100%,      0 100%}
    to  {background-position:-170px 100%,-220px 100%}
}

/* o conteudo fica acima do mar */
.agd-slot.vivo > *{position:relative;z-index:1}
.agd-slot.vivo::after{z-index:1}

/* halo pulsando na borda */
@keyframes agd-vivo{
    0%,100%{box-shadow:0 0 0 0 rgba(239,91,82,.32);border-color:rgba(239,91,82,.55)}
    50%    {box-shadow:0 0 0 5px rgba(239,91,82,0);border-color:rgba(239,91,82,.95)}
}

@media (prefers-reduced-motion:reduce){
    .agd-slot.vivo,.agd-slot.vivo::before{animation:none}
}