.preset-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.preset-item {
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
  cursor: pointer;
}

.preset-item:hover {
  background: linear-gradient(90deg, rgba(255,96,0,0.15), rgba(255,255,255,0.1));
  border-color: rgba(255,96,0,0.3);
  transform: scale(1.02);
}

.preset-name {
  color: #ff6000;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.preset-desc {
  color: #d1d1d1;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 4px;
  opacity: 0.9;
}


:root {
  --accent: #ff6000;
  --text-light: #fff;
  --text-muted: #bbb;
  --bg-card: rgba(255,255,255,0.05);
  --border-soft: rgba(255,255,255,0.08);
  --shadow-accent: 0 0 15px rgba(255,96,0,0.25);
}

.partners-section {
  text-align: center;
  color: var(--text-light);
  padding: 30px 20px;
  background: radial-gradient(circle at top, rgba(255,96,0,0.08), transparent 70%);
}

.partners-title {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.6px;
  background: linear-gradient(90deg, var(--accent), #ffa366);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.partners-subtitle {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 45px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.partner-card {
  width: 190px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 25px 10px 22px;
  text-align: center;
  text-decoration: none;
  color: var(--text-light);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(6px);
}

.partner-card:hover {
  transform: scale(1.06);
  border-color: rgba(255,96,0,0.5);
  box-shadow: var(--shadow-accent);
}

.partner-avatar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.partner-avatar {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  border: 2px solid rgba(255,96,0,0.3);
  object-fit: cover;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.partner-card:hover .partner-avatar {
  border-color: var(--accent);
  transform: scale(1.05);
}

.partner-name {
  font-size: 16px;
  font-weight: 600;
  margin-top: 12px;
}

.partner-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ff6000;
  font-size: 13px;
  margin-top: 6px;
}

.partner-tag i {
  font-size: 14px;
}

#cbx-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  background: #13161f;
  border: 1px solid #2a2e37;
  border-left: 4px solid #ff6000;
  border-radius: 10px;
  padding: 14px 16px;
  max-width: 360px;
  color: #dfe5ef;
  font-family: 'Inter', sans-serif;
  animation: toastIn 0.3s ease, toastOut 0.3s ease 4s forwards;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.toast strong {
  color: #fff;
  display: block;
  margin-bottom: 4px;
}

.toast a {
  color: #ff6000;
  font-weight: bold;
  text-decoration: none;
}

.toast a:hover {
  text-decoration: underline;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
  to   { opacity: 0; transform: translateY(10px); }
}
  .cbx-wrap{background:#0e0e0e;color:#fff;padding:72px 24px;position:relative;isolation:isolate}
  .cbx-container{max-width:1200px;margin:0 auto;font-family:Inter, Bahnschrift, system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
  .cbx-head{margin-bottom:28px;text-align:center}
  .cbx-kicker{display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:#ff6000;padding:6px 10px;border-radius:999px;opacity:.95}
  .cbx-head h2{font-size:36px;line-height:1.15;margin:14px 0 8px}
  .cbx-head h2 span{color:#ff6000}
  .cbx-sub{color:#aeb4bf;max-width:820px;margin:0 auto}

  /* Tabs */
  .cbx-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:28px auto 24px}
  .cbx-tab{background:#15181d;border:1px solid #23262c;color:#dfe5ef;padding:10px 16px;border-radius:12px;cursor:pointer;transition:.25s;font-weight:600}
  .cbx-tab:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.35)}
  .cbx-tab.is-active{background:#ff6000;color:#0e0e0e;border-color:#ff6000}

  /* Panels */
  .cbx-panel{display:none}
  .cbx-panel.is-active{display:block}

  /* Layouts */
  .cbx-grid{display:grid;grid-template-columns:1.3fr 1.3fr .8fr;gap:22px}
  .cbx-card{background:#13161f;border:1px solid #22262e;border-radius:16px;padding:22px}
  .cbx-card h3{margin:0 0 6px}
  .cbx-bullets{margin:12px 0 0;padding-left:18px;color:#cbd2dd}
  .cbx-bullets li{margin:6px 0}

  /* ===== Gauges (iguais ao app) ===== */
  .cbx-gauges{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:14px}
  .cbx-gauge{background:#11151f;border:1px solid #11151f;border-radius:12px;padding:12px 10px;text-align:center}
  .cbx-gauge svg{width:84px;height:84px;display:block;margin:6px auto 6px}
  .cbx-gauge .track{stroke:#2a2e36;opacity:.7}
  .cbx-gauge .value{stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,255,255,.08))}
  .cbx-gauge .pct{font-weight:800;font-size:14px;fill:#fff}
  .cbx-gauge .lbl{display:block;color:#aeb4bf;font-size:12px;margin-top:6px}
  /* Temas de cor (mantém paleta geral, apenas acento) */
  .cbx-gauge.g-blue  .value{stroke:#8ac6ff}
  .cbx-gauge.g-purple.value,.cbx-gauge.g-purple .value{stroke:#c99cff}
  .cbx-gauge.g-purple .value{ stroke:#c99cff }
  .cbx-gauge.g-green .value{stroke:#7de3a5}
  .cbx-gauge.g-teal  .value{stroke:#73e5d6}
  .cbx-gauge.g-gray  .value{stroke:#9aa3af}

  .cbx-side{display:flex}
  .cbx-cta{background:linear-gradient(180deg,#1b1f25, #13161f);border:1px solid #272b33;border-radius:16px;padding:22px;align-self:stretch}
  .cbx-btn{display:inline-block;background:#ff6000;color:#0e0e0e;padding:12px 18px;border-radius:12px;font-weight:800;text-decoration:none;border:1px solid #ff6000}
  .cbx-btn:hover{filter:brightness(1.05)}
  .cbx-btn.ghost{background:transparent;color:#ff6000;border:1px solid #383e49}
  .cbx-note{display:block;margin-top:10px;color:#9aa3af}

  /* Table */
  .cbx-table-wrap{overflow:auto;border-radius:14px;border:1px solid #22262e}
  .cbx-table{width:100%;border-collapse:separate;border-spacing:0;background:#13161f}
  .cbx-table th,.cbx-table td{padding:14px 16px;border-bottom:1px solid #1f232b;vertical-align:top}
  .cbx-table thead th{position:sticky;top:0;background:#15181d;color:#dfe5ef;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
  .cbx-badge{padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid #2a2e37}
  .cbx-badge.ok{background:#132a18;color:#8de08f;border-color:#1f4b2a}
  .cbx-badge.soft{background:#13161d;color:#dfe5ef}
  .cbx-badge.warn{background:#2d1608;color:#ffb27a;border-color:#3a1f0e}

  .cbx-inline-cta{display:flex;gap:16px;align-items:center;justify-content:center;margin:18px 0}
  .cbx-micro{color:#9aa3af}

  /* Presets */
  .cbx-cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:14px}
  .cbx-preset{background:#13161f;border:1px solid #22262e;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
  .cbx-preset header{position:relative}
  .cbx-preset img{width:100%;height:160px;object-fit:cover;display:block}
  .cbx-preset h4{position:absolute;left:12px;bottom:10px;margin:0;background:rgba(14,14,14,.75);padding:6px 10px;border-radius:10px;border:1px solid #2a2e37}
  .cbx-preset-list{padding:14px 16px;flex:1;color:#cbd2dd}
  /* Apenas a lista melhorada (chips) */
  .cbx-preset-list.chips li{display:flex;align-items:center;gap:10px;margin:10px 0}
  .cbx-preset-list .chip{display:inline-block;padding:6px 10px;border:1px solid #2a2e37;border-radius:999px;background:#15181d;font-weight:700}
  .cbx-preset-list small{opacity:.85}
  .cbx-preset .cbx-btn{margin:0 16px 16px}

  /* Accordions - melhorias pedidas */
  .cbx-accordions{margin-top:12px;display:grid;gap:10px}
  .cbx-acc{background:#13161f;border:1px solid #22262e;border-radius:12px;overflow:hidden;transition:border-color .25s, box-shadow .25s}
  .cbx-acc:hover{border-color:#2e343e;box-shadow:0 0 0 1px rgba(236,111,0,.25),0 8px 22px rgba(0,0,0,.25)}
  .cbx-acc:hover summary::after{opacity:1;transform:translateY(-50%) scale(1)}
  .cbx-acc summary{cursor:pointer;list-style:none;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;position:relative}
  .cbx-acc summary::-webkit-details-marker{display:none}
  /* Chevron + pulso ao hover */
  .cbx-acc summary span:first-child{position:relative;padding-left:22px}
  .cbx-acc summary span:first-child::before{
    content:"";position:absolute;left:0;top:50%;width:10px;height:10px;transform:translateY(-50%) rotate(0deg);
    border-right:2px solid #ff6000;border-bottom:2px solid #ff6000;opacity:.9;transition:transform .25s ease
  }
  .cbx-acc[open] summary span:first-child::before{transform:translateY(-50%) rotate(45deg)}
  /* Hint “Clique para ver detalhes” */
  .cbx-acc summary::after{
    content:"Clique para ver detalhes";
    position:absolute;right:60%;top:50%;transform:translateY(-50%) scale(.98);
    font-size:12px;font-weight:800;letter-spacing:.02em;padding:6px 10px;border-radius:999px;
    color:#ffe2c7;background:linear-gradient(180deg,rgba(236,111,0,.16),rgba(236,111,0,.08));
    border:1px solid rgba(236,111,0,.45);box-shadow:inset 0 0 0 1px rgba(255,153,64,.2),0 6px 12px rgba(0,0,0,.25);
    opacity:.0;transition:all .25s ease;pointer-events:none
  }
  .cbx-acc:hover{animation:cbxPulse 1.2s ease-in-out infinite}
  @keyframes cbxPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(236,111,0,.0)}
    50%{box-shadow:0 0 0 2px rgba(236,111,0,.15)}
  }
  /* Tag laranja premium */
  .cbx-acc .cbx-tag{
    font-size:12px;color:#ff6000;background:linear-gradient(180deg,rgba(255, 96, 0,.16),rgba(255, 96, 0,.08)), radial-gradient(120% 120% at 30% 10%, rgba(255, 96, 0,.25), rgba(255, 96, 0,0) 60%);
    border:1px solid rgba(255, 96, 0,.55);border-radius:999px;padding:6px 10px;
    box-shadow:inset 0 0 0 1px rgba(255, 96, 0,.25), 0 6px 20px rgba(236,111,0,.12);font-weight:800
  }
  .cbx-acc-body{padding:12px 16px;color:#cbd2dd;border-top:1px solid #1f232b}
  .cbx-acc summary:focus-visible{outline:2px solid #ff6000;outline-offset:4px;border-radius:10px}

  /* Botão especial “Aplicar e Reiniciar” */
  .cbx-btn-reboot{position:relative;overflow:hidden;padding-right:44px}
  .cbx-btn-reboot .ico{margin-right:8px}
  .cbx-btn-reboot .shine{position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);transform:translateX(-120%);pointer-events:none}
  .cbx-btn-reboot:hover .shine{animation:shine 1s ease}
  @keyframes shine{to{transform:translateX(120%)}}
  .cbx-btn-reboot:active{transform:translateY(1px)}
  .cbx-btn-reboot::after{
    content:"";position:absolute;inset:0;border-radius:12px;box-shadow:0 0 0 0 rgba(236,111,0,.35);opacity:0;transition:.25s
  }
  .cbx-btn-reboot:focus-visible::after{box-shadow:0 0 0 4px rgba(236,111,0,.35);opacity:1}

  /* Toast */
  #cbx-toast{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:10px}
  .toast{
    background:#13161f;border:1px solid #2a2e37;border-radius:14px;padding:12px 14px;min-width:280px;max-width:360px;color:#dfe5ef;
    box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 1px rgba(236,111,0,.12);display:flex;gap:12px;align-items:flex-start;animation:toastIn .22s ease-out
  }
  .toast .dot{width:10px;height:10px;border-radius:999px;background:#ff6000;box-shadow:0 0 12px rgba(236,111,0,.65);margin-top:6px}
  .toast strong{color:#fff}
  .toast a{color:#ff6000;font-weight:800;text-decoration:none}
  .toast a:hover{text-decoration:underline}
  @keyframes toastIn{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
  @keyframes toastOut{to{transform:translateY(10px);opacity:0}}

  /* Responsive */
  @media (max-width:1024px){.cbx-grid{grid-template-columns:1fr}.cbx-cards-4{grid-template-columns:1fr 1fr}}
  @media (max-width:640px){.cbx-cards-4{grid-template-columns:1fr}.cbx-head h2{font-size:28px}}
  
  /* ===== Tipografia fluida ===== */
.cbx-head h2 { font-size: clamp(24px, 4vw, 36px); }
.cbx-sub     { font-size: clamp(14px, 1.8vw, 16px); }
.cbx-tab     { font-size: clamp(12px, 1.8vw, 14px); }
.cbx-card h3 { font-size: clamp(16px, 2.4vw, 20px); }

/* ===== Tabs: rolável no mobile + snap ===== */
.cbx-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}
.cbx-tab { scroll-snap-align: start; white-space: nowrap; }

/* ===== Grids responsivos ===== */
.cbx-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr .8fr;
  gap: 22px;
}
@media (max-width: 1200px) {
  .cbx-grid { grid-template-columns: 1fr 1fr; }
  .cbx-side { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .cbx-grid { grid-template-columns: 1fr; }
}

/* Presets (cards): 4→3→2→1 colunas */
.cbx-cards-4 { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
@media (max-width: 1200px){ .cbx-cards-4{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 900px) { .cbx-cards-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px) { .cbx-cards-4{ grid-template-columns: 1fr; } }

/* Gauges: quebram de 5→4→3→2→1 colunas */
.cbx-gauges { display:grid; grid-template-columns: repeat(5,1fr); gap:14px; }
@media (max-width: 1200px){ .cbx-gauges{ grid-template-columns: repeat(4,1fr);} }
@media (max-width: 950px) { .cbx-gauges{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 720px) { .cbx-gauges{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 420px) { .cbx-gauges{ grid-template-columns: 1fr; } }

/* Acordeão: toque confortável + centralização */
.cbx-acc summary { padding: 16px; min-height: 48px; }
.cbx-acc summary::after { margin-top: 6px; }
.cbx-acc summary span:first-child { padding-left: 22px; } /* mantém seu chevron */
@media (max-width: 560px){
  .cbx-acc summary { padding: 14px 12px; }
}

/* Botões: área de toque e quebras */
.cbx-btn { min-height: 44px; line-height: 1.1; }
.cbx-btn.ghost { white-space: nowrap; }

/* Tabela: scroll suave em telas estreitas */
.cbx-table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }

/* Toast: centralizado em telas muito pequenas */
@media (max-width: 420px){
  #cbx-toast { right: 12px; left: 12px; bottom: 12px; }
  #cbx-toast .toast { max-width: none; }
}

/* Reduz animações para usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce){
  .cbx-tab:hover, .cbx-btn-reboot:hover .shine,
  .cbx-acc:hover, .toast { animation: none !important; transition: none !important; }
}

/* === MOBILE / TOUCH: remover hint e ajustar layout do summary === */
@media (max-width: 640px), (pointer: coarse) {
  /* some o pill/hint no mobile */
  .cbx-acc summary::after { 
    display: none !important; 
  }
  
  /* volta o summary para linha, sem centralização no mobile */
  .cbx-acc summary{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: 0;
    padding: 14px 12px; /* toque confortável */
  }

  /* mantém o chevron e o espaçamento do título */
  .cbx-acc summary span:first-child { 
    padding-left: 22px; 
  }

  /* reduzir pulse em touch para evitar “tremida” */
  .cbx-acc:hover { 
    animation: none; 
  }
}

/* Botão especial sempre em linha e sem quebra de palavra */
.cbx-btn-reboot{
  display:inline-flex;           /* força layout horizontal */
  align-items:center;
  justify-content:center;
  gap:.6rem;
  white-space:nowrap;            /* não quebra em palavras */
  word-break:normal !important;  /* se houver regra global de break-all, sobrescreve */
  overflow-wrap:normal;
  font-size:clamp(12px, 2.2vw, 14px);
  padding:12px 18px;
  min-height:44px;
}

/* Ícone proporcional */
.cbx-btn-reboot .ico{ font-size:1rem; line-height:1; }

/* O container aceita quebra e centraliza em telas estreitas */
.cbx-inline-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* Mobile: ocupa a largura toda e centraliza o texto */
@media (max-width: 560px){
  .cbx-btn-reboot{
    width:100%;
    padding:12px 14px;
    justify-content:center;
  }
}

/* Muito estreito: compacta um pouquinho */
@media (max-width: 360px){
  .cbx-btn-reboot{ font-size:12px; padding:11px 12px; border-radius:10px; }
  .cbx-inline-cta{ gap:10px; }
}


/* Não deixa o texto do badge quebrar + centraliza na coluna "Visual" */
.cbx-badge{
  display:inline-flex;           /* mantém em linha */
  align-items:center;
  justify-content:center;
  white-space:nowrap;            /* sem quebra */
  word-break:keep-all !important;
  overflow-wrap:normal;
  line-height:1;                 /* altura justa */
  padding:6px 10px;              /* já tem na sua base, repetido para garantir */
}

/* Centraliza e dá largura mínima à coluna Visual (5ª coluna) */
.cbx-table th:nth-child(5),
.cbx-table td:nth-child(5){
  text-align:center;
  min-width:104px;               /* evita amassar e forçar quebra */
}

/* Mobile: reduz levemente a badge, mas continua 1 linha */
@media (max-width:560px){
  .cbx-badge{ font-size:11px; padding:5px 8px; }
  .cbx-table td:nth-child(5){ min-width:92px; }
}

/* garante o corte do badge ao entrar negativo */
.cbx-preset header{ position:relative; overflow:hidden; }

/* Badge base */
.cbx-flag{
  position:absolute;
  top:10px;
  left:-14px;                 /* entra negativo -> "cortado" na esquerda */
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:8px 14px 8px 26px;  /* mais espaço do lado esquerdo, já que entra negativo */
  border-radius:14px;         /* pílula */
  background:#ff6000;
  color:#fff;
  font-weight:900;
  letter-spacing:.02em;
  border:1px solid rgba(236,111,0,.55);
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,153,64,.25);
  text-transform:uppercase;
  font-size:13px;
  line-height:1;
}

/* Sutil “shine” */
.cbx-flag::after{
  content:"";
  position:absolute; inset:0;
  border-radius:14px;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 40%, transparent 60%);
  mix-blend-mode:soft-light;
  opacity:.35;
  pointer-events:none;
}

/* Variações opcionais */
.cbx-flag.is-exclusive{ /* igual base, mas com leve pulso */
  animation:flagPulse 2.4s ease-in-out infinite;
  
  
}
.cbx-flag.is-soon{ /* mantém o mesmo laranja; só para semântica */
  opacity:.98;
  background: #f5792c;
}
@keyframes flagPulse{
  0%,100%{ box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,153,64,.25); }
  50%    { box-shadow:0 10px 32px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,153,64,.35); }
}

/* Responsivo: ajusta posição/tamanho em telas menores */
@media (max-width: 900px){
  .cbx-flag{ top:8px; left:-10px; font-size:12px; padding:7px 12px 7px 22px; }
}
@media (max-width: 560px){
  .cbx-flag{ top:8px; left:-8px; font-size:12px; padding:7px 12px 7px 20px; }
}

                       :root { --codbuff-orange:#FF6000; }
                        .teaser-hero{
                        position:relative; width:700px; height:400px; margin:32px auto;
                        overflow:hidden; background:#000; box-shadow:0 18px 48px rgba(0,0,0,.45); cursor:pointer;
                        }
                        .badge-top{
                        position:absolute; top:10px; left:12px; padding:6px 10px;
                        background:var(--codbuff-orange); color:#fff; font:600 12px/1 Inter,system-ui,Arial;
                        box-shadow:0 6px 18px rgba(255,96,0,.35); z-index:2;
                        }
                        .teaser-overlay{
                        position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
                        gap:14px; padding:20px; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); pointer-events:none;
                        }
                        .chip{
                        pointer-events:auto; display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border:0; cursor:pointer;
                        font:700 14px/1 Inter,system-ui,Arial; background:var(--codbuff-orange); color:#fff;
                        box-shadow:0 10px 28px rgba(255,96,0,.35); transition:transform .12s ease, filter .12s ease;
                        }
                        .chip:hover{ color:#000; transform:translateY(-1px); filter:brightness(1.03); }
                        .chip--ghost{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 10px 28px rgba(0,0,0,.35); }
                        .modal{
                        position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
                        display:none; place-items:center;
                        }
                        .modal[aria-hidden="false"]{ display:grid; }
                        .modal__dialog{
                        width:min(92vw, calc(92vh * 16 / 9), 1120px); aspect-ratio:16/9;
                        background:#000; overflow:hidden; position:relative; opacity:0; transition:opacity .18s ease;
                        }
                        .modal__dialog.ready{ opacity:1; }
                        .modal__close{
                        position:absolute; right:12px; top:12px; z-index:3; cursor:pointer;
                        background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.22); padding:8px 10px;
                        }
                        .player-skeleton{
                        position:absolute; inset:0; display:grid; place-items:center; color:#aaa; font:600 14px/1 Inter,system-ui,Arial;
                        background:
                        linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.65)),
                        url('assets/img/app/teaser.gif') center/cover no-repeat;
                        z-index:2;
                        }
                        .minipip{
                        position:fixed; right:18px; bottom:18px; z-index:70; width:460px; height:302px;
                        background:#000; box-shadow:0 12px 36px rgba(0,0,0,.55); display:none;
                        }
                        .minipip.show{ display:block; }
                        .minipip__bar{
                        position:absolute; inset:auto 0 0 0; height:36px; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
                        display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:6px 8px; z-index:2;
                        }
                        .btn{
                        background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.22); padding:6px 10px; cursor:pointer; font:600 12px Inter,system-ui,Arial;
                        }
                        .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
                        @media (max-width: 768px){
                        .teaser-hero{ width:calc(100% - 24px); height:auto; aspect-ratio:16/9; margin:16px auto; }
                        .minipip{ display:none !important; }
                        }
                        .media-wrapper img {
                        width: 100%;
                        height: auto;
                        max-width: 550px;
                        display: block;
                        margin: 0 auto;
                        }
                        @media (min-width: 992px) {
                        .media-wrapper img {
                        max-width: 100%;
                        height: auto;
                        }
                        }
                        .toast-codbuff {
                        border-left: 6px solid #ff6000 !important;
                        backdrop-filter: blur(6px);
                        box-shadow: 0 14px 40px rgba(0,0,0,.45);
                        }
                        .toast-codbuff .iziToast-title { 
                        font-weight: 800; letter-spacing: .2px;
                        }
                        .toast-codbuff .iziToast-message {
                        opacity: .95; line-height: 1.35;
                        }
                        .toast-codbuff .iziToast-progressbar > div { background: #ff6000 !important; }
                        /* headline + micro elementos */
                        .cb-headline {
                        display:flex; align-items:center; gap:10px; margin-bottom:6px;
                        }
                        .cb-headline .cb-badge {
                        font-size:11px; font-weight:700; padding:2px 8px;
                        border:1px solid rgba(255,255,255,.1); border-radius:999px;
                        background: rgba(255,255,255,.03);
                        }
                        .cb-icon {
                        width:18px; height:18px; color:#ff6000; flex:0 0 auto;
                        }
                        .cb-feature {
                        display:flex; align-items:flex-start; gap:8px; margin-top:6px;
                        font-size: 13px;
                        }
                        .cb-ctaPrimary, .cb-ctaSecondary{
                        all:unset; cursor:pointer; padding:7px 12px; border-radius:10px; font-weight:700;
                        }
                        .cb-ctaPrimary { background:#ff6000; color:#111; }
                        .cb-ctaPrimary:focus{ outline:2px solid rgba(255,96,0,.35); outline-offset:2px; }
                        .cb-ctaSecondary { border:1px solid rgba(255,255,255,.12); color:#fff; }
                        .cb-ctaRow { display:flex; gap:8px; margin-top:10px; }
                        .cb-ctaPrimary, .cb-ctaSecondary {
                        all: unset;
                        cursor: pointer;
                        font-weight: 400;
                        font-size: 16px;
                        padding: 12px 22px;
                        border-radius: 6px;
                        text-align: center;
                        transition: 0.3s;
                        }
                        .cb-ctaPrimary {
                        background: #ff6000;
                        color: #fff;
                        border: none;
                        }
                        .cb-ctaPrimary:hover {
                        background: #e15500;
                        }
                        .cb-ctaSecondary {
                        border: 1px solid rgba(255,255,255,.12);
                        color: #fff;
                        }
                        .cb-ctaSecondary:hover {
                        background: rgba(255,255,255,.08);
                        }