/* =========================================================



   FutAnalytics — CSS organizado/refatorado (v2)



   ========================================================= */







/* =======================



   1) Tokens / Base



   ======================= */



:root{



  /*

   * FutAnalytics Copa — mantém a identidade escura original da FutAnalytics

   * e aplica a paleta da Copa nos destaques.

   */

  --fa-bg: #0b1020;



  --fa-card: #151a30;



  --fa-border: #252b48;



  --fa-nav-a: #12142b;



  --fa-nav-b: #2A398D;







  /* Paleta Copa 2026 */

  --fa-copa-green: #3CAC3B;



  --fa-copa-blue: #2A398D;



  --fa-copa-red: #E61D25;



  --fa-copa-light: #D1D4D1;



  --fa-copa-dark: #474A4A;







  --fa-white: #f8f9fa;



  --fa-muted: rgba(255,255,255,.75);







  --fa-green: var(--fa-copa-green);



  --fa-red:   var(--fa-copa-red);



  --fa-yellow:var(--fa-copa-light);



  --fa-cyan:  var(--fa-copa-blue);







  --fa-shadow-lg: 0 .55rem 1.4rem rgba(0,0,0,.28);



  --fa-shadow-md: 0 .35rem .9rem rgba(0,0,0,.25);







  /* Tipografia padrão (desktop) */



  --fa-font-body: 0.9rem;



  --fa-font-heading: 0.9rem;



  --fa-font-btn: .8rem;



  --fa-font-legend: .8rem;



  --fa-font-badge: .8rem;



  --fa-btn-pad-y: .60rem;



  --fa-btn-pad-x: .60rem;







  /* MOBILE (<=1080px) */



  --fa-font-body-m: .70rem;



  --fa-font-heading-m: .70rem;



  --fa-font-btn-m: .70rem;



  --fa-font-legend-m: .70rem;



  --fa-font-badge-m: .70rem;



  --fa-btn-pad-y-m: .45rem;



  --fa-btn-pad-x-m: .55rem;



}







.badge {



    --bs-badge-padding-x: 0.55rem !important;



    --bs-badge-padding-y: 0.20rem !important;



    --bs-badge-font-size: 0.70rem !important;



}







/* =======================



   2) Base/Globais



   ======================= */



body{



  background: var(--fa-bg);



  color: var(--fa-white);



  font-size: var(--fa-font-body);



}







h5, h6, .navbar-brand{



  font-size: var(--fa-font-heading);



}







.dataTables_filter label,



.dataTables_length label{



  color: #fff !important;



}







/* =======================



   3) Layout (Navbar/Card/Table)



   ======================= */



.navbar{



  padding-bottom: 15px;



  background: linear-gradient(90deg, var(--fa-nav-a), var(--fa-nav-b));



}







.card{



  background: var(--fa-card);



  border-radius: 16px;



  border: 1px solid var(--fa-border);



}







.card-header{



  flex-flow: row wrap;



  border-bottom: 1px solid var(--fa-border);



  background: transparent;



}







.table thead th{



  border-color: var(--fa-border);



  color: #adb5bd;



}







.table tbody td{



  border-color: var(--fa-border);



  vertical-align: middle;



}







.club-logo{



  width: 24px;



  height: 24px;



  object-fit: contain;



  margin-right: 6px;



}







/* =======================



   4) Tipografia consistente para BOTÕES



   ======================= */



.btn{



  font-size: var(--fa-font-btn);



  padding: var(--fa-btn-pad-y) var(--fa-btn-pad-x);



  line-height: 1.12;



  font-weight: 700;



}







.navbar .btn{



  font-size: var(--fa-font-btn);



  padding: var(--fa-btn-pad-y) var(--fa-btn-pad-x);



}







/* Instagram custom */



.btn-instagram{



  color:#fff !important;



  border:0;



  background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);



  box-shadow: var(--fa-shadow-md);



}



.btn-instagram:hover{



  filter: brightness(1.08);



  transform: translateY(-1px);



}







/* =======================



   5) Badges / Heat



   ======================= */



.badge-metric{



  font-size: var(--fa-font-badge);



  padding: 0.35rem 0.55rem;



  border-radius: 999px;



}







.text-green{ color: var(--fa-green); }







.heat-low  { color:#ffffff !important; background: var(--fa-red) !important; }



.heat-mid  { color:#000000 !important; background: var(--fa-yellow) !important; }



.heat-high { color:#000000 !important; background: var(--fa-green) !important; }







.btn-danger  { color:#ffffff; background: var(--fa-red); }



.btn-warning { color:#000000; background: var(--fa-yellow); }



.btn-success { color:#000000; background: var(--fa-green); }







.badge.bg-danger  { color:#ffffff !important; background: var(--fa-red) !important; }



.badge.bg-success { color:#000000 !important; background: var(--fa-green) !important; }



.badge.bg-info    { color:#ffffff !important; background: var(--fa-cyan) !important; }



.bg-warning       { background-color: var(--fa-copa-light) !important; color:#000000 !important; }







/* =======================



   6) Legenda (heat)



   ======================= */



.legend-heat{



  width: 100%;



  color: #fff;



  display:flex;



  gap:5px;



  justify-content:flex-start;



  flex-wrap:wrap;



  margin:.35rem 0 .75rem;



  font-size: var(--fa-font-legend);



}



.legend-heat .item{



  display:inline-flex;



  align-items:center;



  gap:8px;



  padding:6px 10px;



  border-radius:999px;



  border:1px solid rgba(255,255,255,.15);



  background: rgba(0,0,0,.15);



}



.legend-heat .dot{



  width:12px;



  height:12px;



  border-radius:4px;



  box-shadow: 0 0 10px rgba(255,255,255,.2);



}



.legend-heat .dot.low  { background: var(--fa-red); }



.legend-heat .dot.mid  { background: var(--fa-yellow); }



.legend-heat .dot.high { background: var(--fa-green); }







/* =======================



   7) CTA Análise da Rodada



   ======================= */



.fa-cta-analise{



  display:flex;



  align-items:center;



  justify-content:space-between;



  gap:12px;



  padding:14px 16px;



  border-radius:14px;



  border:1px solid rgba(60,172,59,.25);



  background: linear-gradient(90deg, rgba(60,172,59,.18), rgba(42,57,141,.12));



  box-shadow: var(--fa-shadow-lg);



}







.fa-cta-analise .fa-cta-title{



  font-weight:800;



  letter-spacing:.2px;



  margin:0;



}







.fa-cta-analise .fa-cta-sub{



  margin:2px 0 0 0;



  color: var(--fa-muted);



  font-size:.92rem;



}







.fa-cta-analise .btn{



  white-space:nowrap;



  border-radius:999px;



  padding:.60rem 1.00rem;



  font-weight:800;



  box-shadow: var(--fa-shadow-md);



}



.fa-cta-analise .btn:hover{



  filter:brightness(1.06);



  transform: translateY(-1px);



}







@media (max-width: 576px){



  .fa-cta-analise{



    flex-direction:column;



    align-items:flex-start;



  }



  .fa-cta-analise .btn{ width:100%; }



}







/* =======================



   8) IA Cards



   ======================= */



.ia-card{



  background: #0f1430;



  border: 1px solid var(--fa-border);



  border-radius: 14px;



  padding: 12px;



  height: 100%;



}



.ia-photo{



  width: 72px;



  height: 72px;



  border-radius: 50%;



  object-fit: cover;



  border: 2px solid #2a2f4a;



}



.badge-soft{



  background: rgba(255,255,255,0.08);



  border: 1px solid #2a2f4a;



}







/* =======================



   9) Inputs / Selects (brancos)



   ======================= */



.form-control,



.form-select{



  background-color:#ffffff;



  border:1px solid #ced4da;



  color:#212529;



}



.form-control:focus,



.form-select:focus{



  color:#212529;



  background-color:#ffffff;



  border-color:var(--fa-copa-blue);



  box-shadow: 0 0 0 0.25rem rgba(42,57,141,.25);



  outline: 0;



}







/* Select2 */



.select2-container{ z-index: 100 !important; }



.select2-container--bootstrap4 .select2-results__option{ color:#000; }



.select2-container .select2-selection--single .select2-selection__clear{ color:#212529 !important; }







.select2-container--bootstrap4 .select2-selection--single{



  background-color:#ffffff;



  border:1px solid #ced4da;



  border-radius:0.375rem;



  height: calc(2.25rem + 2px);



  display:flex;



  align-items:center;



  padding: 0.375rem 0.75rem;



}



.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{



  color:#212529;



  padding-left:0;



}



.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{ color:#6c757d; }



.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{ height:100%; right:10px; }







.select2-container--bootstrap4 .select2-selection--multiple{



  background-color:#ffffff;



  border:1px solid #ced4da;



  border-radius:0.375rem;



  min-height: calc(2.25rem + 2px);



  padding: 0.25rem 0.2rem;



}



.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{



  background-color:#e9ecef;



  border:1px solid #ced4da;



  color:#212529;



}







.select2-container--bootstrap4.select2-container--focus .select2-selection--single,



.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple{



  border-color:var(--fa-copa-blue);



  box-shadow: 0 0 0 0.25rem rgba(42,57,141,.25);



  outline:0;



}







.select2-container--bootstrap4 .select2-dropdown{



  background-color:#ffffff;



  border:1px solid #ced4da;



}



.select2-container--bootstrap4 .select2-results__option{ color:#212529; }



.select2-container--bootstrap4 .select2-results__option--highlighted{



  background-color:var(--fa-copa-blue);



  color:#ffffff;



}







/* =======================



   10) Footer



   ======================= */



.fa-footer{



  border-top: 1px solid var(--fa-border);



  background: linear-gradient(90deg, var(--fa-nav-a), var(--fa-nav-b));



}



.fa-footer-logo{



  width: 190px;



  max-width: 70vw;



  height: auto;



  opacity: .98;



}



.fa-footer-contact{ font-size: .95rem; }



.fa-footer-link{



  color:var(--fa-copa-green);



  text-decoration:none;



  font-weight:600;



}



.fa-footer-link:hover{



  text-decoration: underline;



  filter: brightness(1.05);



}



.fa-footer-bottom{



  border-top: 1px dashed rgba(255,255,255,0.12);



}







/* =======================



   11) DataTables Responsive “+”



   ======================= */



table.dataTable.dtr-column > tbody > tr > td.control,



table.dataTable.dtr-column > tbody > tr > th.control{



  position: relative;



  cursor: pointer;



}







table.dataTable.dtr-column > tbody > tr > td.control:before,



table.dataTable.dtr-column > tbody > tr > th.control:before{



  content:"+";



  display:inline-flex;



  align-items:center;



  justify-content:center;



  width:18px;



  height:18px;



  border-radius:999px;



  background:var(--fa-copa-green);



  border:var(--fa-copa-green);



  color:#fff;



  font-weight:700;



  line-height:1;



}







table.dataTable.dtr-column > tbody > tr.parent > td.control:before,



table.dataTable.dtr-column > tbody > tr.parent > th.control:before{



  content:"–";



}







.dtr-details{ width:100%; }







/* =======================



   12) Responsivo (<=1080px)



   ✅ Botões + fonte maiores



   ✅ Legendas e badges maiores



   ======================= */



@media (max-width: 1080px){



  .card-body.table-responsive{ padding: 0 !important; }



  .card-body.table-responsive #tbl_clubes_wrapper{ padding: 0 !important; }







  body{ font-size: var(--fa-font-body-m); }



  h5, h6, .navbar-brand{ font-size: var(--fa-font-heading-m); }







  /* ✅ Bootstrap buttons */



  .btn{



    font-size: var(--fa-font-btn-m);



    padding: var(--fa-btn-pad-y-m) var(--fa-btn-pad-x-m);



  }



  .navbar .btn{



    font-size: var(--fa-font-btn-m);



    padding: var(--fa-btn-pad-y-m) var(--fa-btn-pad-x-m);



  }







  /* ✅ Legendas */



  .legend-heat{



    font-size: var(--fa-font-legend-m);



  }



  .legend-heat .item{



    padding: 7px 11px; /* um tiquinho maior */



  }







  /* ✅ Badges */



  .badge-metric{



    font-size: var(--fa-font-badge-m);



    padding: 0.26rem 0.46rem;



  }







  /* tabelas */



  .table{ font-size: .72rem; }







  /* Modal IA */



  #modalIA .modal-dialog{ margin: 0.5rem; }



  #modalIA .modal-header{



    flex-direction: column;



    align-items: flex-start;



    gap: 0.5rem;



  }



  #modalIA .modal-header > div:last-child{



    width: 100%;



    justify-content: flex-start !important;



    flex-wrap: wrap;



    row-gap: 0.3rem;



  }



  #modalIA #ia_total_score,



  #modalIA #ia_total_preco{



    font-size: .75rem; /* era .65 */



  }



  #modalIA #btnRecalcularIA{



    font-size: .75rem;



    padding: 0.2rem 0.6rem;



  }







  .logo{ width: 190px; margin-bottom: 10px; }



  #modalIA .btn-close{ margin-left: auto; }







  .dataTables_wrapper .dataTables_paginate,



  .dataTables_wrapper .dataTables_info,



  .dataTables_wrapper .dataTables_length label,



  .dataTables_wrapper .dataTables_filter label{



    font-size: .75rem;



  }







  .dataTables_wrapper .dataTables_paginate .paginate_button{ font-size: 0.25rem; }



  .page-link{ font-size: 10px !important; }







  .navbar-nav.ms-auto{ margin-left: 0 !important; }



  .navbar-nav.ms-auto li button{ margin: 0 10px 0 0; }



  .dataTables_length{ margin-bottom: 10px; }



  .dataTables_filter{ margin-bottom: 10px; }



}



/* =========================



   DataTables Buttons (Dark)



   ========================= */







/* container */



.dt-buttons{



  display:flex;



  flex-wrap:wrap;



  gap:.5rem;



  margin-bottom:.75rem;



}







/* botão base */



.dt-buttons .dt-button{



  background: transparent !important;



  border: 1px solid #2a2f4a !important;



  color: rgba(255,255,255,.92) !important;







  padding: .42rem .65rem !important;



  border-radius: .6rem !important;



  font-weight: 700 !important;



  font-size: .92rem !important;







  line-height: 1.2 !important;



  box-shadow: 0 .35rem 1rem rgba(0,0,0,.25) !important;



  transition: transform .08s ease, filter .15s ease, background .15s ease, border-color .15s ease;



}







/* hover */



.dt-buttons .dt-button:hover{



  filter: brightness(1.08) !important;



  background: rgba(60,172,59,.12) !important;



  border-color: rgba(60,172,59,.45) !important;



}







/* focus/active */



.dt-buttons .dt-button:focus,



.dt-buttons .dt-button:active{



  outline: none !important;



  box-shadow: 0 0 0 .18rem rgba(60,172,59,.25) !important;



  transform: translateY(-1px);



}







/* disabled */



.dt-buttons .dt-button.disabled,



.dt-buttons .dt-button:disabled{



  opacity:.55 !important;



  cursor:not-allowed !important;



  transform:none !important;



}







/* deixa o texto alinhado */



.dt-buttons .dt-button > span{



  display:inline-flex;



  align-items:center;



  gap:.35rem;



}







/* opcional: ícones rápidos via emoji */



.dt-buttons .buttons-copy > span::before{ content:"📋"; }



.dt-buttons .buttons-csv  > span::before{ content:"🧾"; }



.dt-buttons .buttons-excel > span::before{ content:"📊"; }



.dt-buttons .buttons-pdf > span::before{ content:"🧷"; }



.dt-buttons .buttons-print > span::before{ content:"🖨️"; }







/* Ajuste no modo mobile */



@media (max-width:576px){



  .dt-buttons .dt-button{



    font-size: 1rem !important;



    padding: .5rem .75rem !important;



    border-radius: .75rem !important;



  }



}







/* Logo desktop */



.logo{ width: 220px; }



#datatables_buttons_info * {



    color: #000 !important;



}







.whats {



    width: 60px;



    position: fixed;



    z-index: 10000;



    right: 15px;



    bottom: 15px;



}







/* =======================



   13) Banner de venda / Oferta de planos



   ======================= */



.fa-offer-hero{



  margin-top: 18px;



  background:



    radial-gradient(circle at top right, rgba(60,172,59,.18), transparent 34%),



    linear-gradient(135deg, #11182f 0%, #182347 58%, var(--fa-copa-blue) 100%);



  border: 1px solid rgba(60,172,59,.22);



  border-radius: 22px;



  padding: 24px;



  box-shadow: 0 14px 40px rgba(0,0,0,.22);



}







.fa-offer-badge{



  display: inline-flex;



  align-items: center;



  gap: 8px;



  background: rgba(60,172,59,.14);



  border: 1px solid rgba(60,172,59,.30);



  color: var(--fa-copa-green);



  font-size: 12px;



  font-weight: 800;



  letter-spacing: .04em;



  text-transform: uppercase;



  border-radius: 999px;



  padding: 8px 14px;



  margin-bottom: 16px;



}







.fa-offer-title{



  color: #fff;



  font-size: 2rem;



  line-height: 1.15;



  font-weight: 900;



  margin-bottom: 12px;



}







.fa-offer-subtitle{



  color: rgba(255,255,255,.78);



  font-size: 1rem;



  line-height: 1.75;



  margin-bottom: 0;



}







.fa-offer-list{



  list-style: none;



  padding: 0;



  margin: 22px 0 0;



}







.fa-offer-list li{



  position: relative;



  padding-left: 30px;



  margin-bottom: 12px;



  color: #ffffff;



  line-height: 1.6;



}







.fa-offer-list li:before{



  content: '✔';



  position: absolute;



  left: 0;



  top: 2px;



  width: 20px;



  height: 20px;



  border-radius: 50%;



  background: #ffffff;



  color: #11182f;



  font-size: 12px;



  font-weight: 900;



  display: flex;



  align-items: center;



  justify-content: center;



}







.fa-pain-points{



  color: var(--fa-copa-green);



  font-weight: 900;



  font-size: 1.2rem;



  line-height: 1.35;



  margin-top: 18px;



}







.fa-pain-points div + div{ margin-top: 4px; }







.fa-offer-pricing{



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 18px;



  margin-top: 24px;



}







.fa-price-card-link{



  display: block;



  text-decoration: none;



  color: inherit;



  height: 100%;



}







.fa-price-card-link:hover,



.fa-price-card-link:focus,



.fa-price-card-link:active{



  text-decoration: none;



  color: inherit;



}







.fa-price-card{



  position: relative;



  overflow: hidden;



  background: linear-gradient(135deg, rgba(10,15,33,.80) 0%, rgba(12,24,68,.92) 100%);



  border: 1px solid rgba(255,255,255,.08);



  border-radius: 22px;



  padding: 24px;



  height: 100%;



  transition: transform .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease;



  box-shadow: 0 10px 28px rgba(0,0,0,.18);



  cursor: pointer;



}







.fa-price-card::before{



  content: "";



  position: absolute;



  inset: 0;



  background: radial-gradient(circle at top right, rgba(60,172,59,.16), transparent 45%);



  opacity: 1;



  transition: opacity .28s ease;



}







.fa-price-card > *{



  position: relative;



  z-index: 2;



}







.fa-price-card.highlight{



  border-color: rgba(60,172,59,.42);



  box-shadow: 0 12px 30px rgba(60,172,59,.08);



}







.fa-price-card.promo{



  border-color: rgba(60,172,59,.52);



  background:



    radial-gradient(circle at top right, rgba(60,172,59,.18), transparent 42%),



    linear-gradient(135deg, rgba(10,15,33,.92) 0%, rgba(14,42,44,.94) 100%);



  box-shadow: 0 16px 38px rgba(60,172,59,.12), 0 10px 28px rgba(0,0,0,.22);



}







.fa-price-card.promo::after{



  content: "";



  position: absolute;



  inset: -2px;



  border-radius: 24px;



  border: 1px solid rgba(60,172,59,.20);



  pointer-events: none;



}







.fa-price-ribbon{



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 6px;



  width: fit-content;



  max-width: 100%;



  background: linear-gradient(135deg, var(--fa-copa-green) 0%, var(--fa-copa-light) 100%);



  color: #071021;



  font-size: .75rem;



  font-weight: 950;



  letter-spacing: .05em;



  text-transform: uppercase;



  border-radius: 999px;



  padding: .42rem .70rem;



  margin-bottom: 12px;



  box-shadow: 0 10px 22px rgba(60,172,59,.18);



}







.fa-price-label{



  color: var(--fa-copa-green);



  font-size: 12px;



  font-weight: 900;



  letter-spacing: .08em;



  text-transform: uppercase;



  margin-bottom: 10px;



  transition: color .28s ease;



}







.fa-price-row{



  display: flex;



  flex-wrap: wrap;



  align-items: flex-end;



  gap: 8px 12px;



  margin-bottom: 4px;



}







.fa-price-old{



  color: rgba(255,255,255,.60);



  font-size: 1.06rem;



  font-weight: 800;



  text-decoration: line-through;



  text-decoration-color: var(--fa-copa-red);



  text-decoration-thickness: 3px;



  white-space: nowrap;



  transform: translateY(-5px);



  transition: color .28s ease;



}







.fa-price-value{



  color: #fff;



  font-size: 3rem;



  font-weight: 950;



  line-height: 1.05;



  margin-bottom: 4px;



  transition: color .28s ease;



}







.fa-price-value.promo{



  color: var(--fa-copa-green);



  text-shadow: 0 0 22px rgba(60,172,59,.22);



}







.fa-price-period{



  color: rgba(255,255,255,.78);



  font-size: 1rem;



  font-weight: 700;



  transition: color .28s ease;



}







.fa-price-saving{



  display: inline-flex;



  align-items: center;



  width: fit-content;



  margin-top: 12px;



  background: rgba(60,172,59,.12);



  border: 1px solid rgba(60,172,59,.28);



  color: var(--fa-copa-green);



  border-radius: 999px;



  padding: .38rem .62rem;



  font-size: .82rem;



  font-weight: 900;



  line-height: 1.1;



}







.fa-price-desc{



  color: rgba(255,255,255,.74);



  font-size: .98rem;



  line-height: 1.7;



  margin: 18px 0 0;



  transition: color .28s ease;



}







.fa-price-urgency{



  margin-top: 12px;



  color: var(--fa-copa-green);



  font-size: .88rem;



  font-weight: 900;



  line-height: 1.35;



  transition: color .28s ease;



}







.fa-price-cta{



  display: inline-flex;



  align-items: center;



  margin-top: 18px;



  font-size: .92rem;



  font-weight: 900;



  color: #ffffff;



  opacity: .94;



  transition: color .28s ease, opacity .28s ease;



}







.fa-price-card-link:hover .fa-price-card,



.fa-price-card-link:focus .fa-price-card{



  transform: translateY(-8px);



  background: linear-gradient(135deg, var(--fa-copa-green) 0%, var(--fa-copa-light) 100%);



  border-color: var(--fa-copa-green);



  box-shadow: 0 18px 40px rgba(60,172,59,.28);



}







.fa-price-card-link:hover .fa-price-card.promo,



.fa-price-card-link:focus .fa-price-card.promo{



  background: linear-gradient(135deg, var(--fa-copa-green) 0%, var(--fa-copa-light) 100%);



  border-color: var(--fa-copa-green);



  box-shadow: 0 18px 42px rgba(60,172,59,.26);



}







.fa-price-card-link:hover .fa-price-card::before,



.fa-price-card-link:focus .fa-price-card::before{



  opacity: 0;



}







.fa-price-card-link:hover .fa-price-label,



.fa-price-card-link:hover .fa-price-value,



.fa-price-card-link:hover .fa-price-value.promo,



.fa-price-card-link:hover .fa-price-old,



.fa-price-card-link:hover .fa-price-period,



.fa-price-card-link:hover .fa-price-desc,



.fa-price-card-link:hover .fa-price-saving,



.fa-price-card-link:hover .fa-price-urgency,



.fa-price-card-link:hover .fa-price-cta,



.fa-price-card-link:focus .fa-price-label,



.fa-price-card-link:focus .fa-price-value,



.fa-price-card-link:focus .fa-price-value.promo,



.fa-price-card-link:focus .fa-price-old,



.fa-price-card-link:focus .fa-price-period,



.fa-price-card-link:focus .fa-price-desc,



.fa-price-card-link:focus .fa-price-saving,



.fa-price-card-link:focus .fa-price-urgency,



.fa-price-card-link:focus .fa-price-cta{



  color: #11182f;



}







.fa-price-card-link:hover .fa-price-saving,



.fa-price-card-link:focus .fa-price-saving{



  background: rgba(17,24,47,.10);



  border-color: rgba(17,24,47,.25);



}







.fa-price-card-link:hover .fa-price-cta,



.fa-price-card-link:focus .fa-price-cta{



  opacity: 1;



}







.fa-offer-actions{



  display: flex;



  flex-wrap: wrap;



  gap: 12px;



  margin-top: 24px;



}







.fa-offer-note{



  margin-top: 14px;



  color: rgba(255,255,255,.64);



  font-size: .92rem;



  line-height: 1.6;



}







/* =======================



   14) Seções comerciais complementares



   ======================= */



.fa-sales-section .card-body{ padding: 28px; }







.fa-sales-kicker{



  color: var(--fa-copa-green);



  font-size: 12px;



  font-weight: 800;



  letter-spacing: .05em;



  text-transform: uppercase;



  margin-bottom: 8px;



}







.fa-sales-title{



  color: #fff;



  font-size: 1.65rem;



  line-height: 1.2;



  font-weight: 900;



  margin-bottom: 10px;



}







.fa-sales-subtitle{



  color: rgba(255,255,255,.72);



  font-size: 1rem;



  line-height: 1.7;



  margin-bottom: 0;



}







.fa-delivery-grid{



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 16px;



  margin-top: 22px;



}







.fa-delivery-card{



  background: #11182f;



  border: 1px solid rgba(255,255,255,.07);



  border-radius: 18px;



  padding: 18px;



  height: 100%;



}







.fa-delivery-icon{



  width: 46px;



  height: 46px;



  border-radius: 14px;



  background: rgba(60,172,59,.12);



  color: var(--fa-copa-green);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 22px;



  margin-bottom: 14px;



}







.fa-delivery-title{



  color: #fff;



  font-size: 1.05rem;



  font-weight: 800;



  margin-bottom: 8px;



}







.fa-delivery-text{



  color: rgba(255,255,255,.72);



  font-size: .95rem;



  line-height: 1.7;



  margin: 0;



}







.fa-sales-cta{



  margin-top: 24px;



  background: linear-gradient(135deg, rgba(60,172,59,.12), rgba(60,172,59,.04));



  border: 1px solid rgba(60,172,59,.22);



  border-radius: 18px;



  padding: 20px;



}







.fa-sales-cta strong{ color: #fff; }







.fa-sales-cta p{



  color: rgba(255,255,255,.75);



  margin: 8px 0 0;



  line-height: 1.7;



}







.fa-sales-cta .btn{ margin-top: 16px; }







/* =======================



   15) YouTube button



   ======================= */



.btn-youtube{



  color: #fff !important;



  background: linear-gradient(135deg, #ff0033 0%, #cc0000 100%);



  border: 1px solid rgba(255,255,255,.08);



  transition: all .25s ease;



  box-shadow: 0 8px 20px rgba(255,0,51,.25);



}







.btn-youtube:hover,



.btn-youtube:focus{



  color: #fff !important;



  background: linear-gradient(135deg, #ff1f4d 0%, #e00000 100%);



  transform: translateY(-1px);



  box-shadow: 0 12px 26px rgba(255,0,51,.35);



}







.btn-youtube svg{ flex-shrink: 0; }







/* =======================



   16) Responsivo comercial



   ======================= */



@media (max-width: 991.98px){



  .fa-offer-pricing,



  .fa-delivery-grid{



    grid-template-columns: 1fr;



  }







  .fa-offer-title{ font-size: 1.65rem; }



  .fa-sales-title{ font-size: 1.4rem; }



  .fa-price-value{ font-size: 2.4rem; }



  .fa-price-old{ font-size: 1rem; }



}







@media (max-width: 768px){



  .fa-offer-hero{ padding: 18px; }



  .fa-pain-points{ font-size: 1.05rem; }



  .fa-price-card{ padding: 20px; }



  .fa-price-ribbon{ font-size: .68rem; }



}







@media (max-width: 420px){



  .fa-price-row{



    align-items: flex-start;



    flex-direction: column;



    gap: 2px;



  }







  .fa-price-old{



    transform: none;



  }



}







/* =======================



   Área exclusiva assinantes



   ======================= */



.fa-locked-area{



  position: relative;



  overflow: hidden;



  min-height: 760px; /* aumente para 460px ou 500px se quiser ainda mais alta */



  border: 1px solid var(--fa-copa-blue);



  border-radius: 18px;



  background:



    linear-gradient(rgba(5, 10, 20, 0.70), rgba(5, 10, 20, 0.70)),



    url('../images/bg-area-exclusiva.png') center center / cover no-repeat;



  display: flex;



  align-items: center;



  justify-content: center;



  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.28);



}







.fa-locked-area__content{



  position: relative;



  z-index: 2;



  width: 100%;



  max-width: 760px;



  padding: 36px 24px;



}







.fa-locked-area__badge{



  display: inline-flex;



  align-items: center;



  gap: 8px;



  background: rgba(60,172,59, 0.16);



  border: 1px solid rgba(60,172,59, 0.32);



  color: var(--fa-copa-green);



  font-size: 12px;



  font-weight: 800;



  letter-spacing: .06em;



  text-transform: uppercase;



  border-radius: 999px;



  padding: 8px 14px;



  margin-bottom: 16px;



}







.fa-locked-area__title{



  color: #ffffff;



  font-size: 2rem;



  line-height: 1.15;



  font-weight: 800;



  margin-bottom: 14px;



  text-shadow: 0 4px 18px rgba(0,0,0,.35);



}







.fa-locked-area__text{



  color: rgba(255,255,255,.88);



  font-size: 1rem;



  line-height: 1.75;



  margin: 0 auto 24px;



  max-width: 640px;



  text-shadow: 0 2px 10px rgba(0,0,0,.28);



}







.fa-locked-area .btn{



  min-width: 180px;



  box-shadow: 0 10px 24px rgba(0,0,0,.20);



}







/* Responsivo */



@media (max-width: 991.98px){



  .fa-locked-area{



    min-height: 480px;



    background-position: center center;



  }







  .fa-locked-area__title{



    font-size: 1.6rem;



  }







  .fa-locked-area__text{



    font-size: .95rem;



    line-height: 1.65;



  }



}







@media (max-width: 576px){



  .fa-locked-area{



    min-height: 420px;



  }







  .fa-locked-area__content{



    padding: 28px 18px;



  }







  .fa-locked-area__title{



    font-size: 1.35rem;



  }







  .fa-locked-area__text{



    font-size: .90rem;



  }







  .fa-locked-area .btn{



    width: 100%;



  }



}



/* Modal/tabela de árbitros mais compacta */



#tbl_arbitros,



#tbl_arbitros th,



#tbl_arbitros td {



    font-size: 0.82rem;



}







#tbl_arbitros thead th {



    font-size: 0.78rem;



    padding: 0.45rem 0.35rem;



}







#tbl_arbitros tbody td {



    padding: 0.38rem 0.35rem;



}







#tbl_arbitros tbody td strong,



#tbl_arbitros tbody td:first-child {



    font-size: 0.83rem;



}







#tbl_arbitros .badge,



#tbl_arbitros .fa-pill,



#tbl_arbitros .score-pill {



    font-size: 0.73rem;



    padding: 0.28rem 0.55rem;



}



.fa-player-cell{display:flex;align-items:center;gap:.55rem;min-width:170px;}



.fa-player-avatar-sm{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid rgba(60,172,59,.55);background:#11182f;box-shadow:0 0 0 2px rgba(255,255,255,.06);}



.fa-player-cell-info{display:flex;flex-direction:column;line-height:1.05;}



.fa-player-cell-info strong{font-size:.9rem;color:#fff;}



.fa-player-cell-info small{font-size:.72rem;color:rgba(255,255,255,.55);margin-top:.15rem;}



.fa-card-badges{display:inline-flex;gap:.25rem;white-space:nowrap;}



.fa-player-details{background:linear-gradient(135deg, rgba(17,24,47,.98), rgba(6,10,24,.98));border:1px solid rgba(60,172,59,.18);border-radius:18px;}



.fa-player-profile-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1rem;text-align:center;}



.fa-player-avatar-lg{width:132px;height:132px;border-radius:50%;object-fit:cover;border:3px solid rgba(60,172,59,.75);background:#11182f;box-shadow:0 12px 30px rgba(0,0,0,.35);margin-bottom:.75rem;}



.fa-player-metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;}



.fa-metric-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:.75rem;min-height:86px;}



.fa-metric-card small{display:block;color:rgba(255,255,255,.58);font-size:.72rem;margin-bottom:.25rem;}



.fa-metric-card strong{display:block;color:#fff;font-size:1.05rem;line-height:1.15;}



.fa-metric-card span{display:block;color:rgba(255,255,255,.55);font-size:.72rem;margin-top:.2rem;text-transform:capitalize;}



.fa-evolution-chart-wrap{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1rem;overflow:hidden;}



.fa-evolution-chart-title{color:#fff;font-weight:700;margin-bottom:.5rem;}



.fa-evolution-chart{width:100%;height:240px;display:block;}



.fa-chart-grid{stroke:rgba(255,255,255,.12);stroke-width:1;}



.fa-chart-grid.zero{stroke:rgba(60,172,59,.35);stroke-dasharray:4 4;}



.fa-chart-label{fill:rgba(255,255,255,.45);font-size:11px;}



.fa-chart-line{stroke:var(--fa-copa-green);stroke-width:3;filter:drop-shadow(0 0 6px rgba(60,172,59,.35));}



.fa-chart-dot{stroke:#11182f;stroke-width:2;}



.fa-chart-dot.good{fill:var(--fa-copa-green);}.fa-chart-dot.mid{fill:var(--fa-copa-green);}.fa-chart-dot.bad{fill:var(--fa-copa-red);}



.fa-chart-axis-help{font-size:.72rem;color:rgba(255,255,255,.48);margin-top:.35rem;}



.fa-arbitro-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:.85rem;}



.fa-rigor-baixo{background:var(--fa-copa-green)!important;color:#fff!important;}.fa-rigor-medio{background:var(--fa-copa-green)!important;color:#11182f!important;}.fa-rigor-alto{background:var(--fa-copa-red)!important;color:#fff!important;}







#tbl_jogadores thead th[data-bs-toggle="tooltip"],



#tbl_clubes thead th[data-bs-toggle="tooltip"],



#tbl_arbitros thead th[data-bs-toggle="tooltip"]{



  cursor: help;



  text-decoration: underline dotted rgba(255,255,255,.35);



  text-underline-offset: 3px;



}



.fa-help-note{font-size:.76rem;color:rgba(255,255,255,.55);}



@media (max-width:991px){.fa-player-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.fa-player-avatar-lg{width:104px;height:104px;}}



@media (max-width:575px){.fa-player-metrics-grid{grid-template-columns:1fr;}.fa-player-cell{min-width:150px;}}







/* =======================



   13.1) Vídeo comercial pós-banner



   ======================= */



.fa-video-sales .card{



  overflow: hidden;



  background:



    radial-gradient(circle at 18% 12%, rgba(60,172,59,.10), transparent 34%),



    radial-gradient(circle at 88% 20%, rgba(60,172,59,.16), transparent 30%),



    linear-gradient(135deg, #10172d 0%, var(--fa-copa-blue) 55%, #11182f 100%);



  border: 1px solid rgba(60,172,59,.18);



  box-shadow: 0 16px 42px rgba(0,0,0,.24);



}







.fa-video-sales .card-body{



  padding: 28px;



}







.fa-video-badge{



  display: inline-flex;



  align-items: center;



  gap: 8px;



  width: fit-content;



  max-width: 100%;



  margin-bottom: 16px;



  padding: 8px 14px;



  border-radius: 999px;



  border: 1px solid rgba(60,172,59,.28);



  background: rgba(60,172,59,.10);



  color: var(--fa-copa-green);



  font-size: 12px;



  font-weight: 900;



  letter-spacing: .05em;



  text-transform: uppercase;



}







.fa-video-title{



  color: #ffffff;



  font-size: 1.95rem;



  line-height: 1.18;



  font-weight: 950;



  margin-bottom: 14px;



}







.fa-video-text{



  color: rgba(255,255,255,.78);



  font-size: 1rem;



  line-height: 1.75;



  margin-bottom: 0;



}







.fa-video-highlights{



  display: flex;



  flex-wrap: wrap;



  gap: 10px;



  margin-top: 20px;



}







.fa-video-highlights span{



  display: inline-flex;



  align-items: center;



  min-height: 38px;



  padding: 9px 12px;



  color: #ffffff;



  font-size: .92rem;



  font-weight: 800;



  border-radius: 999px;



  background: rgba(255,255,255,.07);



  border: 1px solid rgba(255,255,255,.10);



}







.fa-video-actions{



  display: flex;



  flex-wrap: wrap;



  gap: 12px;



  margin-top: 24px;



}







.fa-video-actions .btn{



  box-shadow: 0 12px 28px rgba(0,0,0,.22);



}







.fa-video-note{



  margin-top: 14px;



  color: rgba(255,255,255,.68);



  font-size: .92rem;



  line-height: 1.6;



}







.fa-video-shell{



  position: relative;



  border-radius: 26px;



  padding: 12px;



  border: 1px solid rgba(255,255,255,.12);



  background:



    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));



  box-shadow: 0 18px 44px rgba(0,0,0,.30);



}







.fa-video-shell::before{



  content: "";



  position: absolute;



  inset: -1px;



  border-radius: 27px;



  pointer-events: none;



  border: 1px solid rgba(60,172,59,.18);



}







.fa-video-frame{



  position: relative;



  width: 100%;



  padding-top: 56.25%;



  overflow: hidden;



  border-radius: 18px;



  background: #000;



}







.fa-video-frame iframe{



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  border: 0;



}







@media (max-width: 991.98px){



  .fa-video-sales .card-body{ padding: 22px; }



  .fa-video-title{ font-size: 1.55rem; }



  .fa-video-shell{ margin-top: 4px; }



}







@media (max-width: 768px){



  .fa-video-sales .card-body{ padding: 18px; }



  .fa-video-title{ font-size: 1.35rem; }



  .fa-video-text{ font-size: .95rem; line-height: 1.65; }



  .fa-video-highlights span{ font-size: .86rem; }



  .fa-video-shell{ padding: 9px; border-radius: 20px; }



  .fa-video-frame{ border-radius: 14px; }



}







@media (max-width: 576px){



  .fa-video-actions{



    flex-direction: column;



  }







  .fa-video-actions .btn{



    width: 100%;



  }







  .fa-video-highlights{



    gap: 8px;



  }







  .fa-video-highlights span{



    width: 100%;



    justify-content: center;



  }



}



.fa-blog-premium-cta {



  margin-top: 2.5rem;



  padding: 2rem;



  border-radius: 22px;



  background:



    radial-gradient(circle at top right, rgba(60,172,59, 0.18), transparent 34%),



    linear-gradient(135deg, #0f1730 0%, var(--fa-copa-blue) 100%);



  border: 1px solid rgba(60,172,59, 0.28);



  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);



  color: #fff;



}







.fa-blog-premium-badge {



  display: inline-flex;



  align-items: center;



  padding: 0.45rem 0.85rem;



  border-radius: 999px;



  background: rgba(60,172,59, 0.14);



  border: 1px solid rgba(60,172,59, 0.4);



  color: var(--fa-copa-green);



  font-weight: 700;



  margin-bottom: 1rem;



}







.fa-blog-premium-cta h2 {



  color: #fff !important;



  font-size: clamp(1.65rem, 2.2vw, 2.35rem);



  line-height: 1.18;



  margin-bottom: 1rem;



}







.fa-blog-premium-cta p {



  color: rgba(255,255,255,0.88);



  font-size: 1.08rem;



  margin-bottom: 1.25rem;



}







.fa-blog-premium-points {



  display: flex;



  flex-wrap: wrap;



  gap: 0.65rem;



}







.fa-blog-premium-points span {



  display: inline-flex;



  align-items: center;



  padding: 0.55rem 0.8rem;



  border-radius: 999px;



  background: rgba(255,255,255,0.08);



  border: 1px solid rgba(255,255,255,0.12);



  font-weight: 600;



  font-size: 0.92rem;



}







.fa-blog-premium-box {



  padding: 1.4rem;



  border-radius: 18px;



  background: rgba(8, 13, 29, 0.82);



  border: 1px solid rgba(255,255,255,0.12);



}







.fa-blog-premium-price {



  display: flex;



  align-items: baseline;



  gap: 0.35rem;



  color: #fff;



  margin-bottom: 0.35rem;



}







.fa-blog-premium-price strong {



  font-size: 2.25rem;



  line-height: 1;



  color: var(--fa-copa-green);



}







.fa-blog-premium-price span {



  font-size: 1rem;



  color: rgba(255,255,255,0.78);



}







.fa-blog-premium-annual {



  color: rgba(255,255,255,0.88);



  font-size: 0.96rem;



}