/**
 * Liga Riopardense de Futsal - Estilos do topo
 * Header responsivo para PC, tablet e celular
 */

:root {
    --cor-branco: #ffffff;
    --cor-azul: #013473;
    --cor-amarelo: #FFCC00;
    --fonte: 'Lato', sans-serif;
    --max-width: 1200px;
    --max-width2: 1150px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fonte);
    color: var(--cor-branco);
    background-color: var(--cor-branco);
}


.animar {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.animar.ativo {
    opacity: 1;
    transform: translateY(0);
}



/* Header */
.topo-header {
    position: relative;
}


.topo-fundo {
    position: relative;
    width: 100%;
    min-height: 880px;
    overflow: hidden;
}

.bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 0;
}

/* ativo */
.bg-slide.active {
    opacity: 1;
    z-index: 1;
}



.topo-hero-conteudo {
    position: relative;
    z-index: 2;
}

/* Barra sobre o background */
.topo-fundo .topo-barra-info {
    position: relative;
    z-index: 20000000;
    padding: 1.5rem 0;
}

.topo-barra-info .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between; /* separa logo e info */
    align-items: center;
}

.topo-barra-info .topo-info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.875rem;
}


.topo-barra-info {
    position: relative;
    z-index: 20000000;
}

/* Logo na barra: visível só no celular (no lugar dos links) */
.topo-logo-barra {
    display: none;
}

.topo-logo-barra img.logo {
    height: 2.25rem;
    width: auto;
    object-fit: contain;
}

/* Botão hambúrguer na barra: visível só no mobile */
.menu-toggle-barra {
    display: none;
}

.topo-info a {
    color: var(--cor-branco);
    text-decoration: none;
    transition: color 0.2s;
}

.topo-info a:hover {
    color: var(--cor-amarelo);
}


.topo-links2 a {
    color: #013473;
    text-decoration: none;
    transition: color 0.2s;
}

.topo-links2 a:hover {
    color: var(--cor-amarelo);
}



.topo-contato {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


.topo-contato::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}

.topo-links {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}


/* Hero: logo e anúncios sobre o background */
.topo-fundo .topo-hero {
    position: relative;
    z-index: 1;
    min-height: 260px;
}

.topo-hero-conteudo {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    margin-top: -30px !important;
    padding: 0rem 1rem 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/* Logo: canto superior esquerdo do hero */
.topo-logo-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.topo-logo-area img.logo {
    height: 4rem;
    width: auto;
    object-fit: contain;
}


/* Logo: canto superior esquerdo do hero */
.topo-logo-area2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-top: 0x;
}

.topo-logo-area2 img.logo {
    height: 2.5rem;
    width: auto;
    object-fit: contain;
}


.topo-anuncios {
    bottom: 0;
    width: 100%;
    padding: 20px 30px;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scroll 15s linear infinite;
}

.carousel-track a img {
    height: 60px; /* ajusta */
}

.topo-anuncios:hover .carousel-track {
    animation-play-state: paused;
}


/* animação contínua */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}


.topo-anuncio {
    width: 280px;
    min-height: 80px;
    max-height: 80px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    overflow: hidden;
    padding: 0.35rem;
}

.topo-anuncio img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}



.topo-anuncio2 {
    width: 280px;
    min-height: 80px;
    max-height: 80px;
    background-color: #FE5900;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    overflow: hidden;
    padding: 0.35rem;
}

.topo-anuncio2 img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}



/* Topo-conteudo: posicionado abaixo do topo-fundo */
.topo-conteudo {
    position: relative;
}


/* Navegação principal */

.menu-topo-logo {
    display: none;
}

.topo-nav {
    background: #013473;
    position: sticky;
    top: 0;
    z-index: 100;
}

.topo-nav2 {
    background: #F1F5F9;
    position: sticky;
    top: 0;
    z-index: 100;
}

.topo-nav .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem;
}

.topo-nav2 .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem;
}

.topo-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
}

.topo-nav2 ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
}

.topo-nav a {
    display: block;
    padding: 0.875rem 0.75rem;
    color: var(--cor-branco);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
     position: relative;  
    transition: background-color 0.2s, color 0.2s;
}


.topo-nav2 a {
    display: block;
    padding: 0.875rem 0.75rem;
    color: #013473;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
     position: relative;  
    transition: background-color 0.2s, color 0.2s;
}

/* cria a linha inferior invisível inicialmente */
.topo-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;                 /* espessura da linha */
    background-color: var(--cor-amarelo);
    transition: width 0.3s;
}

.topo-nav2 a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;                 /* espessura da linha */
    background-color: var(--cor-amarelo);
    transition: width 0.3s;
}

/* ao passar o mouse, a linha cresce e o texto muda de cor */
.topo-nav a:hover::after,
.topo-nav a:focus::after {
    width: 100%;
}

.topo-nav2 a:hover::after,
.topo-nav2 a:focus::after {
    width: 100%;
}

.topo-nav a:hover,
.topo-nav a:focus {
    color: var(--cor-amarelo);      /* cor do texto no hover */
    background-color: transparent; /* remove o fundo amarelo */
}

.topo-nav2 a:hover,
.topo-nav2 a:focus {
    color: var(--cor-amarelo);      /* cor do texto no hover */
    background-color: transparent; /* remove o fundo amarelo */
}


/* Botão menu mobile (ícone hambúrguer) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--cor-branco);
    cursor: pointer;
    padding: 0.75rem 1rem;
    align-items: center;
    justify-content: center;
}

.menu-toggle .icon-close {
    display: none;
}

.menu-toggle .icon-hamburger {
    display: inline-flex;
}

.menu-toggle.aberto .icon-hamburger {
    display: none;
}

.menu-toggle.aberto .icon-close {
    display: inline-flex;
}

.menu-toggle:hover {
    color: var(--cor-amarelo);
}

.menu-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
}



/* ################################ */
/*  INJOGOS PC */
/* ################################ */

.in-jogos {
    padding: 30px 0;
}

.in-jogos-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* CARD */
.jogo-card {
    text-align: center;
    position: relative;
  padding:30px 10px 10px 10px;
  border: 1px solid #e5e5e5 !important;
  background-color: #fff;
  margin-top: -110px;
  margin-bottom: 110px !important;
 }

 .jogo-card2 {
    text-align: center;
    position: relative;
  padding:30px 10px 10px 10px;
  border: 1px solid #e5e5e5 !important;
  background-color: #fff;
  margin-bottom: 110px !important;
 }


  .jogo-card-icone{
  position:absolute;
  top: 0px;
  right:0px;
  width:26px;
  height:26px;
  border-radius:0 0 0 50%;
  background:#013473;
  color:#fff;
  font-size:20px;
  font-weight:700;
  line-height:26px;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  }

  .jogo-card-icone:hover{ 
     background:#FFCC00;
  }


  .jogo-card .jogo-aovivo-injogos{
    position:absolute;
  display:inline-block;
  background:#FF2D2D;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:4px;
  text-transform:uppercase;
  top: 20px !important;
    left:50%;
  transform:translateX(-50%);
  z-index: 99;
}

.jogo-card .jogo-aovivo-injogos::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  background:#FFF;
  border-radius:50%;
  margin-right:6px;
  animation:live 1s infinite;
}


  .jogo-card2 .jogo-aovivo-injogos{
    position:absolute;
  display:inline-block;
  background:#FF2D2D;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:4px;
  text-transform:uppercase;
  top: 20px !important;
    left:50%;
  transform:translateX(-50%);
  z-index: 99;
}

.jogo-card2 .jogo-aovivo-injogos::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  background:#FFF;
  border-radius:50%;
  margin-right:6px;
  animation:live 1s infinite;
}

@keyframes live{
  0%{opacity:1;}
  50%{opacity:0.3;}
  100%{opacity:1;}
}




 .jogo-link-card{
  display:block;
  text-decoration:none;
  color:inherit;
}

.jogo-link-card:active .jogo-card{
  transform: scale(.97);
}






.jogo-container {
    display: flex;
    justify-content: center;
    padding: 0px;
    gap: 10px;
}

.coluna-time {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Alinhamentos Horizontais */
.time-1 { align-items: flex-end; text-align: right; }
.time-2 { align-items: flex-start; text-align: left; }

/* Bloco que contém apenas a imagem */
.bloco-brasao {
    height: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}


.bloco-brasao img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

/* Centralização do X apenas com o brasão */
.centro-versus {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.espacador-brasao {
    height: 50px; /* Mesma altura do bloco-brasao */
    display: flex;
    align-items: center; /* Centraliza o X verticalmente apenas no eixo da imagem */
    font-size: 14px;
    font-weight: 500;
    color: #999;
}

.placar-final{
  font-size:22px;
  font-weight:700;
  color:#FFCC00;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top: 10px;
}


.placar-final.ao-vivo{
  color:#666;
}

.placar-x{
  font-size: 14px;
  font-weight:400;
  color:#666;
}


.nome-equipe {
    font-size: 16px;
    color: #013473;
    font-weight: 600;
}



/* CATEGORIA */
.jogo-categoria {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #FFCC00;
    position: relative;
}

.jogo-categoria span {
    display: block;
    width: 120px;
    height: 2px;
    background: #FFCC00;
    margin: 5px auto 0;
}


.jogo-info {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 400;
}





/* ################################ */
/*  DADOS PC */
/* ################################ */


.dados {
    width: 100%;
    background-color: #F1F5F9;
    padding: 80px 0;
    margin-top: 40px;
    margin-bottom: 80px;
   }


.container-h2-dados {
    max-width: 1100px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.container-h2-dados h2 {
    max-width: 1100px;
    color: #013473;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 0 20px;
}



.dados-container {
    max-width: 1100px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px;
    text-align: center;
}

.dado-item img {
    height: 50px;
    margin-bottom: 20px;
}

.dado-item h3 {
    font-size: 35px;
    color: #FFCC00;
    font-weight: 700;
    text-shadow: 1px 0 0 #FFCC00;
}

.dado-item p {
    font-size: 14px;
    color: #013473;
    line-height: 22px;
}

.camp-time-nome-short{ display:none; }

@media (max-width:768px){

     .camp-time-nome-full{ display:none; }
  .camp-time-nome-short{ display:inline; }

  /* container com 20px nas laterais */
  #camp-detalhe .camp-container{
    padding:0 20px !important;
  }

  /* empilha as colunas */
  .camp-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  /* segurança se seu grid estiver inline em algum wrapper */
  #camp-detalhe [style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }
}





/* ################################ */
/* RODAPE PC */
/* ################################ */

.rodape {
       background: linear-gradient(
    to bottom,
    #161131 0%,
    #013473 100%
);
    overflow: hidden;
    color: #fff;
    padding: 0px 20px 30px;
    font-family: 'Lato', sans-serif;
}

.rodape-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

.rodape-logos {
    display: flex;
    align-items: center;
    gap: 40px;
    flex: 2;
}

/* Caixa branca */
.logo-box {
    background: #ffffff;
    padding: 70px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-box img {
    max-width: 150px;
    height: auto;
}

/* Logo 45 anos */
.logo-45 img {
    max-width: 80px;
    height: auto;
}

.rodape-links {
    display: flex;
    flex-wrap: wrap; /* permite quebrar linha */
    gap: 80px;
    flex: 3;
    margin-top: 80px;
}

.rodape-links .coluna {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rodape-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: 0.2s;
}

.rodape-links a:hover {
    opacity: 0.7;
}


.rodape-links a::before {
    content: "›";
    margin-right: 8px;
    opacity: 0.6;
}

.rodape-links h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
color: #FFCC00;
}

.rodape-links .coluna {
    padding-right: 40px;
    border-right: 1px solid rgba(255,255,255,0.15);
}

.rodape-links .coluna:last-child {
    border-right: none;
}


.rodape-extra {
    width: 100%;
    color: #7a95b6;
    padding: 0px;
    margin-top: -40px;
    display: block;
}

.rodape-copy {
    text-align: center;
    margin-top: 50px;
    font-size: 15px;
    opacity: 0.9;
    display: none;
}


.topo-logo-mobile {
    display: none;
}

.topo-logo-mobile2 {
    display: none;
}




/* ################################## */
/* CONTATO PC  */
/* ################################## */


.contato {
    padding: 80px 0;
    width: 100%;
    background-color: #F1F5F9;
    margin-top: 0px;
    margin-bottom: 0px;
}

.contato-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* respiro lateral */
}


.contato-container h2 {
    color: #013473;
    margin-bottom: 40px;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 2px;
}


.titulo-contato {
    display: block;
    width: 100%;
    margin: 30px 0 22px;
    font-size: 17px;
    font-weight: 700;
    color: #013473;
    text-align: left;
    position: relative;
    padding-bottom: 8px;
}

.titulo-contato::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #FFCC00;
    border-radius: 2px;
}



.contato-info {
    display: flex;
    gap: 30px;
    margin-bottom: 10px;
}


.info-box {
    flex: 1;
    background: #fff;
    box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
    padding: 20px 10px;

}

/* Header com ícone e título na mesma linha */
.info-header {
    display: flex;
    align-items: center; /* centraliza verticalmente */
    gap: 10px; /* espaçamento entre ícone e título */
    margin-bottom: 15px;
}

.info-icon {
    font-size: 28px;
    color: #013473;
    border: 1px solid #013473; /* linha fina do mesmo tom do ícone */
    border-radius: 50%; /* transforma em círculo */
    width: 45px;  /* largura do círculo */
    height: 45px; /* altura do círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
}

.info-box h3 {
    color: #013473;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.info-box p {
    color: #666;
    padding: 0;
  line-height: 24px;
  font-size: 16px;
  margin: -10px 0 0 57px;
}

.info-box p .fonecontato {
      color: #666;
    padding: 0;
  line-height: 24px;
  font-size: 16px;
  margin: -10px 0 0 57px;
}



.contato-form input,
.contato-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
}

.linha-3 {
    display: flex;
    gap: 20px;
}

.linha-3 input {
    flex: 1;
}

.btn-area {
    text-align: left;
    margin-top: 0px;
}

.btn-enviar {
    background: #FBC707;
    color: #fff;
    padding: 15px 40px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-enviar:hover {
    background: #e0b006;
}



/* ################################## */
/* NOTICIAS PC  */
/* ################################## */

/* faixa amarela */
.noticias-topo {
    background: #FFCC00;
    padding: 80px 0 130px 0;
}


.container-h2 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-h2 h2 {
    max-width: 1200px;
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 0 20px;
}

/* container padrão 1200 */
.noticias-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* grid */
.noticias-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: -90px;
}

/* card */
.noticia-card {
    display: flex;
    background: #fff;
    border: 1px solid #e5e5e5;
      text-decoration:none;
}

/* imagem background */
.noticia-img {
    width: 45%;
    min-height: 240px;
    background-size: cover;
    background-position: center;
}

/* conteúdo */
.noticia-conteudo {
    width: 55%;
    padding: 30px;
    text-decoration: none;
}

.noticia-conteudo h3 {
    color: #FFCC00;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 500;
    text-decoration: none;
}

.noticia-data {
       display: flex;
    align-items: center;
    gap: 5px; /* espaço entre ícone e texto */
    font-size: 13px;
    color: #999;
    margin-bottom: 15px;
}

.iconhora {
    color: #999;
    font-size: 16px;
    transform: translateY(1px);
}


.noticia-conteudo p {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
    line-height: 22px;
}

.noticia-link {
    font-size: 14px;
    text-decoration: none;
    color: #666;
    font-weight: 500;
    transition: 0.3s;
    text-decoration: none;
}

.noticia-link:hover {
    color: #000;
}

.noticias-mobile {
    display: none;
}





/* ################################## */
/* ARTILHEIROS PC */
/* ################################## */

.artilheiros {
    padding: 40px 20px 100px 20px;
}

.artilheiros-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    margin-top: -60px !important;
}

/* TITULO */
.artilheiros h2 {
    color: #013473;
    margin-bottom: 20px;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 2px;
}

.subtitulo {
    font-size: 18px;
    color: #777;
    margin-bottom: 40px;
}

/* TABELA */
.tabela-artilheiros {
    width: 100%;
    border-collapse: collapse;
}

.tabela-artilheiros thead {
    background: #F2F4FA;
}

.tabela-artilheiros th {
    text-align: left;
    padding: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #666;
}

.tabela-artilheiros td {
    padding: 15px 10px 15px 15px;
    border-top: 1px solid #e5e5e5;
    color: #666;
    text-transform: uppercase;
}

.artilheiros-observacao{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:12px;
  font-size:12px;
  color:#666;
  line-height:1.5;
}

.artilheiros-observacao i{
  font-size:16px;
  color:#666;
  flex-shrink:0;
  margin-top:1px;
}

/* atleta */
.col-atleta {
    display: flex;
    align-items: center;
    gap: 15px;
}

.foto-atleta {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
     border: 2px solid #FFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.col-atleta strong {
    display: block;
    color: #013473;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
}

.col-atleta span {
    font-size: 13px;
    color: #FFCC00;
    text-transform: none;
}

.clube-info {
    display: flex;
    align-items: center;   /* centraliza verticalmente */
    gap: 8px;
    font-size: 13px;
}

.logo-clube {
    width: 25px;
    height: 25px;
    object-fit: contain;
    flex-shrink: 0; /* impede a imagem de encolher */
}

/* números */
.col-gols {
    font-size: 18px;
    font-weight: 600;
    color: #FFCC00 !important;
}

.col-gols .posic {
    margin-top: 1rem;
}

/* TOP LIGA */
.artilheiros-top {
    text-align: center;
    text-transform: uppercase;
}

.artilheiros-top h3 {
    font-size: 22px;
    color: #013473;
    margin-bottom: 25px;
    margin-top: 50px;
}


/* GRID 2 COLUNAS */
.top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    text-align: center;
}

.top-card {
    text-align: center;
}

/* FOTO REDUZIDA */
.top-foto {
    position: relative;
    display: inline-block;
}

.top-foto img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #FFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}


.badge-quadrado {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #FFCC00;
    bottom: 0;
    right: 0;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;

    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

.iconbola {
    vertical-align: -0.05rem;
}

/* INFO */
.top-info {
    margin-top: 18px;
}

.categoria {
    display: block;
    color: #FFCC00;
    font-size: 14px;
    margin-bottom: 8px;
}

.top-info h4 {
    font-size: 16px;
    font-weight: 600;
    color: #013473;
    margin-bottom: 6px;
}

.time {
    font-size: 13px;
    font-weight: 500;
    color: #777;
    margin-bottom: 6px;
    text-align: center !;

}



.logoclubetop {
    width: 25px;
    height: 25px;
    object-fit: contain;
    flex-shrink: 0; /* impede a imagem de encolher */
    margin-top: 10px;
}



.estatisticas {
    font-size: 16px;
    font-weight: 600;
    color: #FFCC00;
}


.artilheiros-mobile {
    display: none;
}



/* ################################## */
/* ===== EMPRESAS PC ===== */
/* ################################## */

.empresas {
    padding: 0px 0px 90px 0px;
 }

.empresas-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px;
    row-gap: 10px;
}


.empresa-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

  .empresa-item img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }




/* ################################## */
/* ===== CLUBES ===== */

.container-clube {
    max-width:1200px;
    margin:0 auto;
    padding:0 0 100px 0px;
}

.container-clube h2 {
    color: #013473;
    margin-bottom: 20px;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 2px;
    position: relative;
    padding-bottom: 10px;
    margin-top: 30px;
}

.container-clube h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: #FFCC00;
    border-radius: 2px;
    margin-top: 10px;
}



.cards-clube {
    display: flex;
    gap: 30px;
    padding: 50px 0;
}

.card-clube {
    flex: 1;
    background: #fff;
}

.card-clube-contato p {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
   
}


.card-clube-contato .espaco {
    margin-left: 15px;
   
}


.card-principal{
    display:flex;
    flex-direction:column;   /* empilha */
    align-items:flex-start;
    text-align: left !important;
}


.info-clube{
    text-align:left;   /* força esquerda */
    width:100%;
}


.info-clube .tituloclube {
    font-size: 17px;
    color: #013473;
    font-weight: 700;
    text-transform: uppercase;
    text-align: left;
}

.info-clube p {
    font-size: 13px;
    color: #666;
    font-weight: 400;
    margin-top: 5px;
}

.card-clube .logodoclube {
    width: auto !important; 
    height: 60px;
    align-self: flex-start; 
}

.card-principal {
    display: flex;
    align-items: center;
    gap: 20px;
}

.linha-clube {
    border-bottom: 1px solid #ccc;
}


.box-tecnico {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.info-tecnico p {
    font-size: 13px;
    color: #666;
    font-weight: 400;
    margin-top: -10px;
    text-transform: uppercase;
}

.foto-tecnico {
    width: 40px;
    height: 40px;
     border-radius: 50%;
    object-fit: cover;
     border: 2px solid #FFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}



.container-clube h2 {
    display: block;
    width: 100%;
    margin: 0px 0 12px;
    font-size: 40px;
    font-weight: 500;
    color: #013473;
    text-align: left;
    position: relative;
    padding-bottom: 8px;
    margin-top: 30px;
}

/* Linha decorativa */
.container-clube h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #FFCC00;
    border-radius: 2px;
}


.label-mini {
    font-size: 11px;
    text-transform: none;
}

.uniformes-box{
    display:flex;
    gap:8px;
    justify-content:flex-start;   /* bloco vai pro left */
    width:100%;
}

.uniforme-item{
    flex:0 0 auto;                /* não estica */
    padding:15px;
    text-align:center;            /* mantém as peças centralizadas */
}

.uniforme-stack{
    display:flex;
    flex-direction:column;
    align-items:center !important;           /* centraliza camisa/calcao/meia entre si */
}

.uniforme-stack-2{
    display:flex;
    flex-direction:column;
    align-items:center !important;
    text-align:center !important;
    width:100%;
}

.peca-uniforme {
    width: 80px;      /* ajuste como quiser */
    height: auto;
    display: block;
}

.camisa-wrapper{
    position:relative;
    display:inline-block;
}

.numero-uniforme{
    position:absolute;
    top:-12px;
    left:-10px;              /* ajusta se quiser mais sobreposto */
    width:25px;
    height:25px;
    background:var(--cor-amarelo);
    color:#fff;
    border-radius:50%;
    font-size:14px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

@media (max-width: 768px) {


.container-clube h2 {
font-size: 23px;
margin-bottom: -30px;
background-color: #F1F5F9;
padding: 15px 20px 20px 20px;
top: -30px !important;
margin-left: -20px;
}


.container-clube h2::after {
margin-left: 20px !important;
margin-bottom: 10px !important;
}





    .container-clube .titulo {
    font-size: 34px;
    padding: 0 20px;
}

        .card-principal{
        flex-direction:row;   /* volta lado a lado */
        align-items:center;
        gap:20px;
    }


    .cards-clube {
        flex-direction: column;
        gap: 20px;
        padding: 40px 0;
    }

.card-clube .logodoclube {
width: 70px !important;

}

}



/* ################################## */
/* ===== CAMPEONATO TOPO ===== */

.bloco-campeonatopc {
    width: 100%;
    background-color: #F1F5F9;
    padding: 80px 0 150px 0;
}


.container-campeonatopc {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.coluna {
    color: #ffffff;
}


.titulo-categoria-pc {
    font-size: 20px;
    color: #013473;
    margin-bottom: 25px;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}

.titulo-categoria-pc::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #FFCC00;
    border-radius: 2px;
}


.coluna-esquerda {
    text-align: right;
}

/* Faz os botões começarem da direita */
.coluna-esquerda .menu-campeonatos-pc {
    justify-content: flex-end;
}

/* Move a linha amarela para a direita */
.coluna-esquerda .titulo-categoria-pc::after {
    left: auto;
    right: 0;
}

.menu-campeonatos-pc {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-campeonato-pc {
    background: #ffffff;
    color: #013473;
    text-decoration: none;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    transition: 0.2s ease;
    border: 1px solid #e2e2e2;
}

.btn-campeonato-pc:hover {
    background: #FFCC00;
    color: #ffffff;
    border: 1px solid #FFCC00;
}

.bloco-campeonatos {
    display: none;
}



@media (max-width: 768px) {


.bloco-campeonatos {
    display: block;
    position: relative;
    width: 100%;
    padding: 0 0 60px 0;
   background: linear-gradient(
    to bottom,
    #161131 0%,
    #013473 100%
    
);
    overflow: hidden;
}

/* Container */
.container-campeonatos {
    padding: 0 1rem;
}


/* Conteúdo acima da imagem */
.bloco-campeonatos > * {
    position: relative;
    z-index: 1;
}

/* Menu campeonatos */
.menu-campeonatos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 20px;
    justify-content: flex-start;
  
}

/* Botões */
.btn-campeonato {
    background: none;
    border: none;
    padding: 0;

    font-size: 15px;
    font-weight: normal;
    color: #ffffff;
    text-decoration: none;

    margin-right: 10px;
    transition: 0.2s ease;
}

.btn-campeonato:hover {
    color: #FFCC00;
}

/* Título da categoria */
.titulo-categoria-campeonatos {
    display: block;
    width: 100%;
    margin: 30px 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-align: left;
    position: relative;
    padding-bottom: 8px;
}

/* Linha decorativa */
.titulo-categoria-campeonatos::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #FFCC00;
    border-radius: 2px;
}

.bloco-campeonatopc {
    display: none;
}


}


/* ################################## */



/* ################################## */
/* ################################## */
/* ################################## */
/* ################################## */
/* ################################## */
/* ===== RESPONSIVO - TABLET ===== */
@media (max-width: 992px) {
    .topo-fundo {
        min-height: 480px;
    }

    .topo-hero {
        min-height: 240px;
    }

    .topo-logo-area img.logo {
        height: 3.25rem;
    }

    .topo-anuncio {
        width: 140px;
        min-height: 40px;
        max-height: 40px;
        font-size: 0.8125rem;
    }

        .topo-anuncio2 {
        width: 140px;
        min-height: 40px;
        max-height: 40px;
        font-size: 0.8125rem;
    }

    .topo-nav a {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }

        .topo-nav2 a {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }

    .titulo-categoria {
    display: none;
}




}



/* ################################## */
/* ################################## */
/* ################################## */
/* ################################## */
/* ################################## */
/* ===== RESPONSIVO - CELULAR ===== */
@media (max-width: 768px) {

/* ============================= */
/*    TOPO CELULAR == */
.mobile-icone{
display:inline-block;
font-size:22px;
color:#013473;
margin-right: -15px;
vertical-align:middle;
text-decoration:none;
margin-top: 4px;
}


.menu-toggle{
vertical-align:middle;
}


.topo-fundo {
    height: 500px;

}

.topo-hero {
    height: 100px;
}

.topo-hero-conteudo {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    gap: 1rem;
}

/* Remove logo duplicada do hero */
.topo-fundo .topo-hero .topo-logo-area {
    display: none !important;
}

/* =============================
   BARRA SUPERIOR
============================= */

.topo-logo-barra {
    display: flex;
    align-items: center;
}

.topo-barra-info .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topo-barra-info .topo-contato,
.topo-barra-info .topo-links {
    display: none !important;
}

.topo-barra-info .topo-info {
    flex: 0 0 auto;
    justify-content: flex-end;
    font-size: 0.8125rem;
}

.topo-barra-info .topo-info2 {
    flex: 0 0 auto;
    justify-content: flex-end;
    font-size: 0.8125rem;
   
}

.menu-toggle-barra {
    display: flex;
    margin: 0;
    padding: 0.5rem 0.75rem;
}


/* =============================
   MENU LATERAL MOBILE
============================= */

.topo-nav .menu-toggle {
    display: none !important;
}

.topo-nav2 .menu-toggle {
    display: none !important;
}



.topo-nav .container {
    position: relative;
    padding: 0;
    min-height: 0;
}




.topo-nav2 .container {
    position: relative;
    padding: 0;
    min-height: 0;
}


.topo-nav ul {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    background: #ffffff;
    z-index: 999;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    padding: 20px 0;
    margin: 0;
    list-style: none;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    transition: left 0.3s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
}

.topo-nav2 ul {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    background: #ffffff;
    z-index: 999;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    padding: 20px 0;
    margin: 0;
    list-style: none;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    transition: left 0.3s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
}



.topo-nav ul.ativo {
    left: 0;
}

.topo-nav2 ul.ativo {
    left: 0;
}

.topo-nav ul li {
    width: 100%;
}

.topo-nav2 ul li {
    width: 100%;
}



.topo-nav a {
    padding: 0.75rem 1rem;
    color: #013473;
    border-bottom: 1px solid rgba(1, 52, 115, 0.12);
}

.topo-nav2 a {
    padding: 0.75rem 1rem;
    color: #013473;
    border-bottom: 1px solid rgba(1, 52, 115, 0.12);
}



.topo-nav a:hover,
.topo-nav a:focus {
    background-color: rgba(1, 52, 115, 0.06);
    color: #013473;
}

.topo-nav2 a:hover,
.topo-nav2 a:focus {
    background-color: rgba(1, 52, 115, 0.06);
    color: #013473;
}


body.menu-aberto {
    overflow: hidden;
}

/* Logo dentro do menu */
.menu-topo-logo {
    display: flex;
    justify-content: left;
    align-items: left;
    padding: 0 1rem 1rem;
    border-bottom: 1px solid rgba(1, 52, 115, 0.15);
    margin-bottom: 0.5rem;
}

.menu-topo-logo img {
    max-width: 160px;
    height: auto;
    object-fit: contain;
}

/* =============================
   HERO (LOGO + ANÚNCIOS) CELULAR
============================= */

.topo-logo-area {
    justify-content: center;
    flex-wrap: wrap;
}

.topo-logo-area img.logo {
    height: 2.75rem;
}

.topo-anuncios {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;

}

.topo-anuncio {
    flex: 1;
    min-width: 120px;
    min-height: 40px;
    max-height: 40px;
    font-size: 0.75rem;
}

.topo-anuncio2 {
    flex: 1;
    min-width: 120px;
    min-height: 40px;
    max-height: 40px;
    font-size: 0.75rem;
}

.topo-logo-mobile {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    margin-top: -20px;
}

.topo-logo-mobile img {
    max-width: 120px;
    height: auto;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}


/* =============================
   BLOCO CAMPEONATOS CEL
============================= */





/* ################################ */
/* ################################ */
/* JOGOS CELULAR */
/* ################################ */
/* ################################ */

   .in-jogos-container {
        grid-template-columns: 1fr;
        padding: -20px 20px !important;
    }

    .jogo-card {
        padding: 0px 20px;
        position: relative;        
    }

    
    .jogo-card2 {
        padding: 0px 20px;
        position: relative;        
    }


    .nome-equipe {
    font-size: 14px;
    color: #013473;
    font-weight: 600;
}


    .jogo-categoria {
        font-size: 14px;
        margin-top: 10px;
    }

    .jogo-info {
        font-size: 14px;
        margin-bottom: 20px;
    }



/* ################################ */
/*  DADOS CELULAR */
/* ################################ */

.dados {
    margin-top: 20px;
    margin-bottom: 80px;
   }


.dados-container {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
padding: 0 20px;
padding: 0 20px;
gap: 40px 20px;
justify-items: center !important;   /* centraliza todos os cards */

}

.container-h2-dados h2 {
    max-width: 1100px;
    color: #013473;
    font-size: 34px;
    font-weight: 300;
    letter-spacing: 2px;
    padding: 0 30px;
}


   .dado-item {
        width: calc(33.333% - 14px);
    }

        .calendario { order: 1; }
        .trofeu     { order: 2; }
        .mapa       { order: 3; }
        .camisa     { order: 4; }
        .axb       { order: 5; }
        .bola       { order: 6; }



    .dado-item img {
    height: 40px;
    margin-bottom: 20px;
}

.dado-item h3 {
    font-size: 25px;
    color: #FFCC00;
    font-weight: 700;
    margin-top: -15px;
    text-shadow: none;
}

.dado-item p {
    font-size: 12px;
    color: #013473;
    line-height: 15px;
}


/* =============================
   RODAPÉ CELULAR
============================= */

.rodape-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
}

.rodape-logos {
    align-items: center;
}

.logo-box {
    background: #ffffff;
    padding: 40px 30px;
    display: flex;
    align-items: left;
    justify-content: left;
    margin-left: -45px;
}

.logo-box img {
    max-width: 80px;
}

.logo-45 img {
    max-width: 40px;
}

.rodape-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    width: 100%;
    margin-top: 0;
}

.rodape-links .coluna {
    align-items: flex-start;
}

.rodape-links a {
    text-align: left;
    font-size: 14px;
}

.rodape-links a::before {
    content: "›";
    margin-right: 8px;
    opacity: 0.6;
}

.rodape-extra {
    display: none;
}

.rodape-copy {
    display: block;
    font-size: 13px;
    padding: 0 10px;
    line-height: 24px;
    color: #7a95b6;
}


/* =============================
   CONTATO  CELULAR
============================= */
.contato {
padding: 60px 20px;
margin-top: 0px;
}

.contato-container h2 {
   font-size: 34px;

}

.contato-info {
    gap: 15px !important;
}


.info-box {
    flex: 1;
    background: none;
    box-shadow: none;
    padding: 0px;
    gap: -40px !important;
   
}


.info-icon {
    font-size: 20px;
    color: #013473;
    border: 1px solid #013473; /* linha fina do mesmo tom do ícone */
    border-radius: 50%; /* transforma em círculo */
    width: 35px;  /* largura do círculo */
    height: 35px; /* altura do círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
}

.info-box h3 {
    color: #013473;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.info-box p {
    color: #666;
    padding: 0;
  line-height: 20px;
  font-size: 14px;
  margin: -15px 0 0 47px;
}

.contato-info {
flex-direction: column;
}

  .linha-3 {
        flex-direction: column;
        gap: 0px; 
    }


.btn-enviar {
    background: #FBC707;
    color: #fff;
    padding: 12px 30px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
}


/* =============================
   NOTICIAS CELULAR
============================= */

  .noticias-container {
        display: none !important;
    }


.container-h2 h2 {
    font-size: 34px;
}


.noticias-mobile{
    display:block;
    position:relative;
    margin-top:-110px;
}

.noticias-viewport{
    width:100vw;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
}

.noticias-carousel{
    display:flex;
    transition:transform 0.7s cubic-bezier(.77,0,.18,1);
}

/* ESTE é o item do carrossel */
.noticia-card{
    flex:0 0 100vw;
    max-width:100vw;
    display:block;
    text-decoration:none;
    color:inherit;
    box-sizing:border-box;
}

.noticia-mobile-card{
    width:100%;
    box-sizing:border-box;
}

.noticia-mobile-img{
    width:100%;
    height:220px;
    background-size:cover;
    background-position:center;
}

.noticia-mobile-conteudo{
    padding:0 20px 20px 20px;
}

.noticia-mobile-conteudo h3{
    color:#FFCC00;
    font-size:22px;
    margin:0;
    font-weight:600;
    padding:20px 0 10px 0;
}

.noticia-mobile-conteudo p{
    font-size:15px;
    color:#666;
    line-height:22px;
    margin:0;
    padding:0 0 20px 0;
}

.noticia-link{
    display:inline-block;
    color:#666;
    font-weight:500;
}

.noticia-link:hover {
    color: #000;
}



/* =============================
  ARTILHEIROS CELULAR
============================= */

.artilheiros-container {
  margin-top: -30px !important;
}

.artilheiros-top {
margin-top: -40px;
}




.artilheiros-top h3 {
    font-size: 17px;
    color: #013473;
    margin-bottom: 25px;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
    text-align: left;
     text-transform: none;
 }


.artilheiros-top h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #FFCC00;
    border-radius: 2px;
}

    .artilheiros-tabela {
        display: none;
    }

    .artilheiros-mobile {
        display: block;
        margin-top: 0px;
    }

    .tabela-artilheiros-mobile {
        width: 100%;
        border-collapse: collapse;
    }

    .tabela-artilheiros-mobile tr {
        border-bottom: 1px solid #e2e2e2;
    }

    .col-atleta-mobile {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 15px 0;
    }

    .foto-atleta-mobile {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #FFF;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        margin-top: -20px;
    }

    .info-atleta-mobile strong {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #013473;
        text-transform: uppercase;
    }

    .info-atleta-mobile span {
        font-size: 13px;
        color: #FFCC00;
        margin-top: 5px;
    }


.info-atleta-mobile {
    display: flex;
    flex-direction: column;
}



.clube-info {
    display: flex;
    align-items: center;   /* centraliza verticalmente */
    gap: 4px;
    font-size: 13px;
    color: #777 !important;
    margin-top: 5px;
}

.clube-info span {
    color: #777 !important;
    text-transform: uppercase;
}

.logo-clube {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0; /* impede a imagem de encolher */
}



.stats-mobile {
    font-size: 16px;
    font-weight: 600;
    color: #013473;
    margin-top: 6px;
}


.iconbola {
    vertical-align: -0.05rem;
}





  .artilheiros-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .artilheiros-mobile h2 {
        font-size: 34px;
    }



        .top-grid {
        display: flex;
        justify-content: center;   /* centraliza o conjunto */
        gap: 15px;
    }

        .top-card {
       width: 48%;                /* limita largura */
        display: flex;
        flex-direction: column;
        align-items: center;
     
         }

   .top-info h4 {
    font-size: 15px;
    font-weight: 600;
    
}


    .top-foto img {
        width: 90px;
        height: 90px;
    }


    .time {
    font-size: 13px;

}

.estatisticas {
    font-size: 13px;

}



    .empresas-container {
        grid-template-columns: repeat(3, 1fr);
        padding: 0 20px;
        gap: 10px;
        row-gap: 0px;
    }

    .empresa-item {
        width: 100%;
        height: 70px; /* altura reduzida para caber bem */
    }

    .empresa-item img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }




}



/* ################################## */
/* ################################## */
/* ################################## */
/* ################################## */
/* ################################## */
/* ===== RESPONSIVO - CELULAR PEQUENO ===== */
@media (max-width: 480px) {
    .topo-fundo {
    min-height: unset;
}


    .topo-barra-info .topo-info {
        font-size: 0.75rem;
    }

    .topo-hero {
        height: 200px;
    }

    .topo-logo-area {
        flex-direction: column;
    }

    .topo-logo-area img.logo {
        height: 2rem;
    }

    .topo-anuncio {
        min-height: 40px;
        max-height: 40px;
        font-size: 0.6875rem;
    }

        .topo-anuncio2 {
        min-height: 40px;
        max-height: 40px;
        font-size: 0.6875rem;
    }

.btn-campeonato {
    background: none;
    border: none;
    padding: 0;

    font-size: 15px;
    font-weight: normal;
    color: #ffffff;
    text-decoration: none;

    margin-right: 10px;
    transition: 0.2s ease;
}

.btn-campeonato:hover {
    color: #FFCC00;
}




.titulo-contato {
    display: block;
    width: 100%;
    margin: 30px 0 22px;
    font-size: 17px;
    font-weight: 700;
    color: #013473;
    text-align: left;
    position: relative;
    padding-bottom: 8px;
}

.titulo-contato::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #FFCC00;
    border-radius: 2px;
}


}



/* =============================
  ARBITROS
============================= */
/* Container geral */
.arbitros-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0; /* no PC sem margem lateral extra */
  margin-bottom: 100px;
}


.arbitros-container h2 {
    color: #013473;
    margin-bottom: 20px;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 2px;
    position: relative;
    padding-bottom: 10px;
    margin-top: 30px;
}

.arbitros-container h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: #FFCC00;
    border-radius: 2px;
    margin-top: 10px;
}


/* Grid de cards */
.arbitros-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

/* Card "invisível" (sem borda/fundo), só alinhamento */
.arbitro-card{
  text-align: center;
  padding: 8px 6px;
}

/* Foto */
.arbitro-foto{
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto 8px auto;
  border: 3px solid #FFF;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Textos */
.arbitro-nome{
  font-size: 14px;
  font-weight: 600;
  color: #013473;
  line-height: 1.2;
  text-transform: uppercase;
}

.arbitro-estado{
  font-size: 12px;
  color: #666;
  margin-top: 2px;
  text-transform: uppercase;
}

/* Celular: 2 por linha + margem 20px */
@media (max-width: 768px){
  .arbitros-container{
    padding: 0 20px;
  }

.arbitros-container h2 {
font-size: 23px;
margin-bottom: 0px;
background-color: #F1F5F9;
padding: 15px 20px 20px 20px;
top: -30px !important;
margin-left: -20px;
}


.arbitros-container h2::after {
margin-left: 20px !important;
margin-bottom: 10px !important;
}


  .arbitros-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }


  /* Textos */
.arbitro-nome{
  font-size: 13px;
}


  .arbitro-foto{
    width: 60px;
    height: 60px;
  }
}





/* =============================
  TOPO
============================= */
.topo2-barra {
    background: #013473;
    width: 100%;
    border: 1px solid #ccc;
}

.topo2-barra-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px; /* mesma margem lateral do topo.php */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topo2-logo img {
    height: 40px;
    width: auto;
    display: block;
}

.topo2-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.topo2-links a,
.topo2-contato a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    margin-right: 15px;
}

.topo2-links a:hover {
    opacity: 0.8;
}

.topo2-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* NAV */

.topo2-nav-wrapper {
    width: 100%;
    background: #013473;
}

.topo2-nav {
    max-width: 1200px;
    margin: 0 auto;
}

.topo2-nav ul {
    display: flex;
    justify-content: center; /* centraliza os links */
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.topo2-nav a {
    color: #FFF;
    text-decoration: none;
    font-weight: 600;
    display: block;
    padding: 12px 0;
}

.topo2-nav a:hover {
    opacity: 0.8;
}

body.menu-aberto {
    overflow: hidden;
}

/* RESPONSIVO */
@media (max-width: 768px) {

    .topo2-barra-container {
     padding: 10px 20px 10px 20px; /* mesma margem lateral do topo.php */
    }

    .topo2-links,
    .topo2-contato {
        display: none;
    }

    

    .topo2-nav ul {
        flex-direction: column;
        gap: 10px;
    }

    .topo2-logo img {
    height: 35px;
    width: auto;
    display: block;
}


.mobile-icone2 {
display:inline-block;
font-size:22px;
color:#fff !important;
margin-right: -15px;
vertical-align:middle;
text-decoration:none;
margin-top: 4px;
}

.menu-toggle{
vertical-align:middle;
}






}






/* =============================
  GINÁSIOS
============================= */

/* Container padrão */
.container-pagina {
  max-width:1200px;
  margin:0 auto;
  padding:0 0;
}

.container-pagina h2 {
  color:#013473;
  margin-bottom:20px;
  font-size:40px;
  font-weight:500;
  letter-spacing:2px;
  position:relative;
  padding-bottom:10px;
  margin-top:30px;
}

.container-pagina h2::after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
  margin-top:10px;
}

/* Controle PC / Mobile */
.ginasios-pc{
  display:block;
}

.ginasios-mobile{
  display:none;
}

/* Grid de cards */
.ginasios-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

/* Card */
.ginasio-card{
  border:1px solid #e6e6e6;
  background:#fff;
  padding:18px;
  padding-top:50px;
  box-shadow:0 4px 14px rgba(0,0,0,0.05);
  position:relative;
  overflow:hidden;
}

/* Badge Cidade/UF */
.g-badge{
  position:absolute;
  top:0;
  left:0;
  background:#013473;
  color:#fff;
  padding:9px 12px 9px 20px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
}

.ginasio-nome{
  margin:0 0 8px 0;
  font-size:15px;
  font-weight:600;
  color:#013473;
  border-left: 5px solid #FFCC00;
  padding-left: 10px;
  text-transform: uppercase;
  line-height: 20px;
}

/* Endereço com 2 linhas */
.g-endereco{
  font-size:14px;
  color:#444;
  margin-bottom:12px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  padding: 10px 0 0 10px;
}

/* Linhas de informação */
.g-info{
  display:flex;
  gap:10px;
  margin:8px 0;
  font-size:14px;
  color:#666;
  padding-left: 10px;
}

.g-label{
  min-width:92px;
  font-weight:700;
  color:#666;
}

.g-valor{
  flex:1;
  word-break:break-word;
}

/* Botões de ação */
.g-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.g-btn{
  display:inline-block;
  padding:8px 12px;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  border:1px solid #e2e2e2;
  color:#013473;
  background:#fff;
  transition:0.2s ease;
}

.g-btn:hover{
  background:#FFCC00;
  border-color:#FFCC00;
  color:#013473;
}

/* Barra alfabética */
.filtro-letras{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:25px;
  margin-top:30px;
}

.letra{
  padding:6px 10px !important;
  border:1px solid #bfc7d1;
  font-size:12px;
  font-weight:500;
  color:#013473;
  text-decoration:none;
  min-width:auto;
  text-align:center;
}

.letra:hover{
  background:#013473;
  color:#fff;
}

.letra.ativa{
  background:#013473;
  color:#fff;
}

.letra.limpar{
  border-color:#013473;
  color:#666;
  padding:10px;
}

.letra.limpar:hover{
  background:#013473;
  color:#fff;
}

/* Título da cidade no mobile */
.g-cidade-titulo{
  display:none;
}

@media (max-width: 768px) {

  .container-pagina {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
  }

  .container-pagina h2 {
    font-size:23px;
    margin-bottom:-30px;
    background-color:#F1F5F9;
    padding:15px 20px 20px 20px;
    margin-left: -20px;
    top:-30px !important;
    width:95%;
  }

  .container-pagina h2::after {
    margin-left:20px !important;
    margin-bottom:10px !important;
  }

  /* Mostra versão mobile e oculta PC */
  .ginasios-pc{
    display:none;
  }

  .ginasios-mobile{
    display:block;
  }

  .ginasios-grid {
    grid-template-columns:repeat(1, 1fr);
    padding:0 20px;
  }

  .ginasio-card {
    padding: 15px 0 30px 0;
    border:none;
    background-color:transparent;
    box-shadow:none;
   
  }

/* Título agrupado por cidade */
.g-cidade-titulo{
display:block;
margin:25px 0 0 0;
background:#013473;
color:#fff;
padding:9px 12px 9px 20px;
font-size:12px;
font-weight:700;
border-bottom:1px solid #D8E2EE;
padding-bottom:8px;
text-transform:uppercase;
}

.ginasio-nome {
  border-left: 5px solid #FFCC00;
  padding-left: 10px;
  text-transform: uppercase;
}


  /* ===== BARRA ALFABÉTICA MOBILE ===== */
  .filtro-letras{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start;
    padding:0 20px;
    gap:6px;
    margin-left: -20px;
    margin-top: 10px;
  }

  .filtro-letras::-webkit-scrollbar{
    display:none;
  }

  .letra{
    flex:0 0 auto;
    padding:10px;
    font-size:12px;
    min-width:34px;
  }

  .letra.limpar{
    padding:5px 0px !important;
    max-width:30px !important;
  }
}

@media (max-width: 480px) {
  .letra{
    padding:5px 0px !important;
  }
}



/* ################################## */
/* CAMP camp.php */
/* ################################## */
.bloco-camp {
    width: 100%;
    background-color: #fff;
    padding: 30px 0 30px 0;
    
}

.coluna-esquerdacamp {
    text-align: right;
}

/* Faz os botões começarem da direita */
.coluna-esquerdacamp .menu-camp {
    justify-content: flex-end;
}

/* Move a linha amarela para a direita */
.coluna-esquerdacamp .titulo-categoriacamp::after {
    left: auto;
    right: 0;
}

.container-camp {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 30px 20px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    border-bottom: 1px solid #e5e5e5;
}

.colunacamp {
    color: #013473;
}

.titulo-categoriacamp {
    font-size: 20px;
    margin-bottom: 25px;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}

.titulo-categoriacamp::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #FFCC00;
    border-radius: 2px;
}




.menu-camp {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-camp {
    background: #ffffff;
    color: #013473;
    text-decoration: none;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    transition: 0.2s ease;
    border: 1px solid #e2e2e2;
}

.btn-camp:hover {
    background: #FFCC00;
    color: #ffffff;
    border: 1px solid #FFCC00;
}

.bloco-campcel {
    display: none;
}



/* bloco detalhes */
#camp-detalhe{
  width:100%;
  margin-top:40px;
}

#camp-detalhe .camp-container{
  max-width:1200px;
  margin:0 auto;
  padding:0;
}

/* Nome completo do campeonato */
#camp-nome-completo{
  font-weight:700;
  font-size:20px;
  color:#fff;
  margin-bottom:20px;
  position: relative;
  padding-bottom: 10px;
}


#camp-nome-completo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: #FFCC00;
    border-radius: 2px;
    margin-top: 10px;
}


/* GRID DAS 2 COLUNAS */
.camp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}



.col-esq,
.col-dir {
    border: none;
    padding: 0 !important;
  background:#fff;
}

#col-esq,
#col-dir {
  background:#fff;
}


/* TÍTULO CLASSIFICAÇÃO */
#nome-fase{
  margin-bottom:8px;
    border-left: 3px solid #FFCC00;
  padding-left: 8px;
  margin-top: 20px;
}

.classif-titulo{
  font-weight:700;
  color:#013473;
  font-size:16px;
}

.classif-fase{
  font-weight:500;
  color:#666;
  font-size:13px;
}


#titulo-jogos{
  margin-top: 15px;
  margin-bottom:15px;
  border-left: 2px solid #FFCC00;
  padding-left: 8px;
}

#titulo-jogos .jogos-titulo{
  font-weight:700;
  color:#013473;
  font-size:16px;
  line-height:1.2;
}

#titulo-jogos .jogos-fase{
  font-weight:500;
  color:#666;
  font-size:13px;
  line-height:1.2;
  margin-top:4px;
}


.camp-linha-atualizacao td{
  text-align:left !important;
  text-align: start !important;
  font-size:11px;
  color:#666;
  background:#fff;
  padding:10px 8px;
}


/* TABELA CLASSIFICAÇÃO */
.camp-classif{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}



.camp-classif thead th{
  background:#f3f3f3;
  color:#013473;
  font-weight:600;
  padding:8px 6px;
  text-align:center;
  border:1px solid #e2e2e2;
}

.camp-classif td{
  border:1px solid #e2e2e2;
  padding:6px 6px;
  text-align:center;
  color:#013473;
  text-transform: uppercase;
}

.camp-classif .camp-td-pos {
  font-weight: 600 !important;
}

.camp-classif .camp-td-tp {
  font-weight: 600 !important;
}

.camp-classif tbody tr:nth-child(even){
  background:#fafafa;
}

.camp-classif tbody tr:hover {
background-color: #fbfdff !important;
}


.camp-th-time{
  text-align:left !important;
}


/* COLUNA TIME (COM BRASÃO) */
.camp-td-time{
  text-align:left !important;
  display:flex;
  align-items:center;
  gap:8px;
}

.camp-brasao{
  width:18px;
  height:18px;
  object-fit:contain;
}

.camp-time-nome{
  white-space:nowrap;
}



/* ============================= */
/* FIX CONFRONTO (NOME + BRASÃO) */
/* ============================= */

.jogo-aovivo{
  display:inline-block;
  background:#FFCC00;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:4px 8px;
  border-radius:4px;
  margin-bottom:8px;
}

.jogo-aovivo::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  background:#013473;
  border-radius:50%;
  margin-right:6px;
  animation:live 1s infinite;
}

@keyframes live{
  0%{opacity:1;}
  50%{opacity:0.3;}
  100%{opacity:1;}
}


.camp-jogos .jogo-times{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  column-gap:14px;
  margin-top: 10px;
}

/* força os 2 elementos na mesma linha */
.camp-jogos .jogo-time{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  min-width:0 !important;
  max-width:100%;
}

/* time A alinhado à direita */
.camp-jogos .jogo-time-a{
  justify-self:end;
  justify-content:flex-end !important;
  text-align:right;
}

/* time B alinhado à esquerda */
.camp-jogos .jogo-time-b{
  justify-self:start;
  justify-content:flex-start !important;
  text-align:left;
}

.camp-jogos .jogo-meio{
  justify-self:center;
  text-align:center;
  min-width:70px;
}

/* impede o nome de quebrar/cair */
.camp-jogos .jogo-time-nome{
  line-height:1.1;
  white-space:normal !important;   /* permite quebrar */
  word-break:break-word; 
}

/* impede o IMG de virar bloco e cair */
.camp-jogos img.jogo-brasao{
  display:inline-block !important;
  vertical-align:middle !important;
  height:25px !important;
  width:auto !important;
  object-fit:contain;
}



/* ============================= */
/* JOGOS CAMP.PHP (COLUNA 2) */
/* ============================= */

/* cada jogo vira um card em 1 célula */
.jogo-card{
  padding:30px 10px 10px 10px;
  border: 1px solid #f5f5f5;

}

/* linha 2 (data/hora) */
.jogo-linha2{
  margin-top:15px;
  display:flex;
  align-items:center;
  justify-content:center; /* centraliza */
  text-align:center;
  width:100%;
   position:relative;
  padding-bottom:5px; /* espaço para a linha */
  margin-bottom: 15px;
}

.jogo-linha2::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:150px;
  height:2px;
  background:#FFCC00;
}



/* linha 3 (local) */
.jogo-linha3{
  margin-top:8px;
}


.camp-jogos{
  width:100%;
  font-size:13px;
  border-collapse:separate;
  border-spacing:0 12px;
}


.camp-jogos thead{ display:none; }


.camp-jogos td{
  border:1px solid #e2e2e2;
  padding: 20px 10px;
  vertical-align:middle;
}


.jogo-data-dia{
    font-size:13px;
  font-weight:700;
  color:#666;
}

.jogo-data-diasemana{
  padding-left: 3px;
    font-size:13px;
  font-weight:400;
  color:#666;
}

.jogo-data-hora{
    padding-left: 3px;
  font-size:13px;
  font-weight:700;
  color:#666;
}

.jogo-times{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* time A (esquerda visual do placar, mas alinhado à direita) */
.jogo-time:first-child{
  display:flex;
  flex-direction:column;
  align-items:flex-end;      /* alinhado à direita */
  text-align:right;
  flex:1;
}

/* time B (direita visual do placar, alinhado à esquerda) */
.jogo-time:last-child{
  display:flex;
  flex-direction:column;
  align-items:flex-start;    /* alinhado à esquerda */
  text-align:left;
  flex:1;
}


.jogo-time {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:500;
  color:#2d2a86;
  flex:1;
  justify-content:space-between;
  flex-wrap:nowrap;   /* IMPORTANTE */
}

/* TIME A alinhado à direita */
.jogo-time-a{
  justify-content:flex-end;
  text-align:right;
}

/* TIME B alinhado à esquerda */
.jogo-time-b{
  justify-content:flex-start;
  text-align:left;
}


.jogo-brasao{
      height:25px;
  width:auto;
  object-fit:contain;
}

.jogo-time-nome{
    font-size: 13px;
  font-weight:700;
  color:#2d2a86;
  line-height:1.1;
  text-transform: uppercase;
}

.jogo-x{
  font-size:13px;
  font-weight:600;
  color:#2d2a86;
}

.jogo-local-nome{
  font-weight:500;
  color:#666;
  margin-bottom:6px;
  font-size: 11px;
  line-height: 15px;
  text-transform: uppercase;
}

.jogo-local-cidade{
  color:#777;
  font-weight:500;
   font-size: 11px;
   text-transform: uppercase;
}

.jogo-meio{
  min-width:60px;
  text-align:center;
}

.jogo-placar{
  font-size:20px;
  font-weight:700;
  color:#FFCC00;
}

.jogo-meio .jogo-x{
  font-size:13px;
  font-weight:700;
  color:#777;
  margin:0 5px;
}


.jogo-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

.jogo-link:hover{
  background:#fafafa;
}

.campcel-topo-mobile{
  display:none;
}

.camp-prefixo{
  display:inline;
}

.titulo-campmb{
  display:none;
}


@media (max-width: 768px) {

  .in-jogos-container {
    padding:  0 20px !important;
  }


  .jogo-card-icone{
  top: 0px;
  right: 0px;
  right:20px;
  width:22px;
  height:22px;

  }


  .jogo-card .jogo-aovivo-injogos{
  top: 35px !important;
}


.in-jogos-container .jogo-card {
padding: 0px !important;
border: 1px solid transparent !important;
border-radius: 0px !important;
margin-top: 0px;
box-shadow: none !important;
border-bottom: 1px solid #D8E2EE !important;
margin-bottom: 0 !important;
 }



.camp-prefixo{
display:none;
}


  .campcel-topo-mobile {
    display:block;
    width:100%;
    padding:10px 16px 0;
    background:#fff;
  }



   .titulo-campmb{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:#F1F5F9;
    padding:15px 20px 10px 20px;
    width:95%;
    box-sizing:border-box;
  }

  .titulo-campmb h2{
    margin:0;
    margin-bottom: -17px;
    font-size:15px;
    color:#013473;
    font-weight:600;
    letter-spacing:2px;
    position:relative;
     background:none;
    width:auto;
    flex:1;
  }

  .btn-abrir-campdrawer{
    display:flex;
    align-items:center;
    gap:8px;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    flex-shrink:0;
  }

  .btn-abrir-campdrawer-icone{
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    background:#FFCC00;
    color:#fff;
    font-size:20px;
    font-weight:700;
    line-height:1;
    border-radius:4px;
  }

  .btn-abrir-campdrawer-texto{
    display:block;
    font-size:10px;
    font-weight: 500;
    line-height:1.1;
    color:#013473;
    text-align:left;

  }

  .campcel-topo-mobile{
    display:none !important;
  }

  .campdrawer-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    opacity:0;
    visibility:hidden;
    transition:0.3s ease;
    z-index:9998;
  }

  .campdrawer-overlay.ativo{
    opacity:1;
    visibility:visible;
  }

.bloco-campcel{
  display:block;
  position:fixed;
  top:0;
  right:0;              /* antes era left */
  width:85%;
  max-width:340px;
  height:100vh;
  padding:0 0 30px 0;
  background:#fff;
  overflow-y:auto;

  transform:translateX(100%);  /* começa escondido à direita */
  transition:0.3s ease;

  z-index:9999;
  margin-top:0;
  box-shadow:-4px 0 18px rgba(0,0,0,0.18); /* sombra invertida */
}

.bloco-campcel.ativo{
  transform:translateX(0);
}




  .container-campcel{
    padding:0 1rem 2rem;
  }

  .campdrawer-topo{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 16px 12px;
    background:#fff;
    border-bottom:1px solid #E5E5E5;
  }

  .campdrawer-topo h2{
    margin:0;
    font-size:20px;
    color:#013473;
    font-weight:700;
  }

  .btn-fechar-campdrawer{
    background:none;
    border:none;
    font-size:32px;
    line-height:1;
    color:#013473;
    cursor:pointer;
    padding:0;
  }

  .menu-campcel{
    display:flex;
    flex-direction:column;
    gap:0;
    justify-content:flex-start;
    padding-top:10px;
  }

  .btn-camp{
    display:block;
    width:100%;
    background:none;
    border:none !important;
    padding:12px 0;
    font-size:15px;
    font-weight:normal;
    color:#013473;
    text-decoration:none;
    margin-right:0;
    border-bottom:1px solid #F0F0F0 !important;
    transition:0.2s ease;
  }

  .btn-camp:hover{
    color:#FFCC00;
  }

  .titulo-categoriacampcel{
    display:block;
    width:100%;
    margin:24px 0 10px;
    font-size:17px;
    font-weight:700;
    color:#013473;
    text-align:left;
    position:relative;
    padding-bottom:8px;
  }

  .titulo-categoriacampcel::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:40px;
    height:3px;
    background-color:#FFCC00;
    border-radius:2px;
  }

  .bloco-camp{
    display:none;
  }

  .camp-classif{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
  }

  .camp-classif thead th{
    background:#f3f3f3;
    color:#013473;
    font-weight:600;
    padding:6px 4px;
    text-align:center;
    border:1px solid #e2e2e2;
  }

  .camp-jogos .jogo-meio{
    justify-self:center;
    text-align:center;
    min-width:0 !important;
    max-width:50px !important;
  }

  .jogo-time-nome{
    font-size:12px;
    font-weight:600;
    color:#2d2a86;
    line-height:1.1;
    text-transform:uppercase;
  }

  .camp-jogos .jogo-time-nome{
    display:block !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    line-height:1.2 !important;
    max-height:2.4em !important;
    word-break:break-word !important;
  }

  .jogo-time jogo-time-a{
    padding:0 !important;
  }
}




/* ################################## */
/* ATLETAS  */
/* ################################## */
.container-atletas {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}


.topo-atletas{
    align-items:flex-start;
    gap:40px;
    margin-top:30px;
    border-bottom:1px solid #e5e5e5;
    padding-bottom:20px;
    overflow: visible; 
}


 .topo-atletas{
    display:grid;
    grid-template-columns: 250px 1fr;
    column-gap: 40px;
    align-items:start;
  }

  .titulo-atletas{
    min-width: 0;   /* não “força” mais */
    width: 250px;
  }

  .lista-atletasclube{
    min-width: 0;
  }






.titulo-atletas{
    min-width:20px;
}


.titulo-atletas h2 {
    color: #013473;
    margin-bottom: 20px;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 2px;
    position: relative;
    padding-bottom: 10px;
    margin-top: 10px;
}

.titulo-atletas h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: #FFCC00;
    border-radius: 2px;
    margin-top: 10px;
}

.lista-atletasclube{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    white-space: normal; 
    text-align: end;
}


.brasaoclubes{
    cursor:pointer;
    text-align:center;
    width:100px;
}

.brasaoclubes img{
    width:100%;
    max-height:40px;
    object-fit:contain;
}

.nomeclube{
    font-size:11px;
    color:#013473;
    text-transform: uppercase;
    padding-bottom: 0px;
}


.topo-clube{
  display:flex;
  align-items:center;
  gap:14px;
  margin:30px 0 25px;
}

.topo-clube img {
  width:50px;
  height:50px;
  object-fit:contain;
}

.topo-clube h2{
  margin:0;
  color:#013473;
  font-size:17px;
  font-weight:700;
}


.mensagem-atletas{
  margin:25px 0;
  padding:18px;
  text-align:center;
  background:#f9f9f9;
  border:1px solid #e5e5e5;
  border-radius:8px;
  color:#525252;
  font-size:14px;
  margin-bottom: 100px;
}



.atletas-detalhe {
    display:none;
    margin-bottom:40px;
}


.atletas-detalhe.ativo {
    display:block;
}

.bloco-categoria {
    margin:30px 0 30px;
    border-bottom:  1px solid #e5e5e5;
    
}

.bloco-categoria .titulo-categoria {
    font-size:18px;
    font-weight:700;
    color:#013473;
    margin:0 0 12px;
    position: relative;
    letter-spacing: 2px;
    padding-bottom: 10px;
}

.bloco-categoria .titulo-categoria::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: #FFCC00;
    border-radius: 2px;
    margin-top: 10px;
}

.grid-atletas{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:12px;
  row-gap: 15px;
  margin-bottom: 30px;
}

.card-atleta{
  padding:10px;
  text-align:center !important;
  background:#fff;
  
}

.card-atleta img {
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #FFF;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


.card-atleta .apelido {
    font-weight:700;
    font-size:14px;
    color:#013473;
    text-transform: uppercase;
    margin-top: 10px;
}

.card-atleta .nome {
    font-size:12px;
    color:#444;
    margin-top:4px;
    text-transform: uppercase;
}

.card-atleta .referencia {
    font-size:10px;
    color:#888;
    margin-top:4px;
}

.stats-atleta{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top:10px;
    border-top:1px solid #eee;
    padding-top:8px;
  
}



.mini-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0px;
  margin-top:10px;
  margin:10px auto 0 auto;
  max-width: 100px;

}

.mini {
     border-bottom:1px solid #e7e7e7; 
      padding:6px 4px; 
      text-align:center; 
      line-height:1.1; 
    } 


.mini i{ color:#013473 !important; }

/* estado zero */
.mini.zero i,
.mini.zero b{ color:#cacaca !important; }

.mini.zero .cartao{ opacity:0.3; }
.mini.zero b{ color:#cacaca !important; }


    .mini .cartao {
    display:block;
    margin:0 auto 4px auto; /* centraliza horizontalmente */
}

.mini span { 
    display:block; 
    font-size:10px;
     color:#666; 
    } 

.mini b { 
    font-size:13px; 
    color:#013473; 
} 

.mini i { 
    display:block; 
    font-size:14px;
     margin-bottom:2px;
     } 

.cartao {
     width:10px; 
     height:14px; 
     display:inline-block;
      border-radius:2px;

     } 

.amarelo {
     background:#f4c200;
     } 

.vermelho { 
    background:#d40000;
 }

 .container-atletas .titulo-atletasmb h2 {
display: none;
 }


 .atletas-carrossel-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  flex:1;
  min-width:0;
}

.lista-atletasclube{
  display:flex;
  flex-wrap:nowrap;
  gap:20px;
  overflow-x:auto;
  scroll-behavior:smooth;
  min-width:0;
  flex:1;
  scrollbar-width:none;
}

.lista-atletasclube::-webkit-scrollbar{
  display:none;
}

.brasaoclubes{
  flex:0 0 auto;
}

.seta-clubes{
  width:40px;
  height:40px;
  border:none;
  background:transparent;
  color:#013473;
  font-size:34px;
  cursor:pointer;
}



@media (max-width: 768px) {

     .container-atletas .titulo-atletasmb h2 {
display: block;
 }


  .topo-atletas{
    display:flex;
    align-items:flex-start;
    gap:10px;
  }

  .atletas-carrossel-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
  }

  .topo-atletas > .lista-atletasclube{
    display:none;
  }

  .atletas-carrossel-wrap .lista-atletasclube{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    overflow-x:auto;
    scroll-behavior:smooth;
    min-width:0;
    flex:1;
    scrollbar-width:none;
    -ms-overflow-style:none;
    white-space:normal;
    
  }

  .atletas-carrossel-wrap .lista-atletasclube::-webkit-scrollbar{
    display:none;
  }

  .atletas-carrossel-wrap .brasaoclubes{
    flex:0 0 auto;
    width:100px;
  }

  .seta-clubes{
    flex:0 0 auto;
    width:42px;
    height:42px;
    border:none;
    background:transparent;
    color:#013473;
    font-size:44px;
    line-height:1;
    cursor:pointer;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity .2s ease;
  }

  .seta-clubes:hover{
    opacity:.7;
  }

  .seta-clubes.oculta{
    opacity:.25;
  }









.container-atletas .titulo-atletasmb h2 {
font-size: 23px;
color: #013473;
font-weight: 500;
letter-spacing: 2px;
position: relative;
padding-bottom: 10px;
margin-bottom: -30px;
background-color: #F1F5F9;
padding: 15px 20px 20px 20px;
top: 0px !important;
margin-left: -20px;
width: 95%;
}


.container-atletas .titulo-atletasmb h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: #FFCC00;
    border-radius: 2px;
    margin-top: 10px;
margin-left: 20px !important;
margin-bottom: 10px !important;
}


    

  .grid-atletas {
    grid-template-columns:repeat(2, 1fr);
}

.titulo-atletas{
    min-width: 150px;
}

    .titulo-atletas h2 {
    font-size: 30px;
}

.titulo-categoria{
    display:block;
}



.card-atleta img {
width: 90px;
height: 90px;
}


 .topo-atletas{
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 20px;
    padding-bottom: 14px;
  }

  /* deixa o scroll suave e sem quebrar */
  .topo-atletas > *{
    flex: 0 0 auto;
  }

  /* título não estoura */
  .titulo-atletas{
    min-width: auto;
    white-space: nowrap;
  }

  .titulo-atletas h2{
    font-size: 28px;
    margin-bottom: 0;
  }

  /* logos numa linha só, rolando */
  .lista-atletasclube{
    display:flex;
    flex-wrap: nowrap;
    gap: 14px;
    margin-top: 20px;
  }

  .brasaoclubes{
    width: 80px !important;
    flex:0 0 auto;
  }


    .nomeclube{
    font-size: 10px;
    white-space:normal;      /* permite quebrar linha */
    word-break:break-word;   /* quebra palavras grandes */
    line-height:1.1;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  }



   .topo-atletas::before,
  .topo-atletas::after{
    content:"";
    position:absolute;
    top:0;
    width:26px;
    height:100%;
    pointer-events:none;
    z-index:5;
  }

  .titulo-atletas {
    display: none !important;
  }

   .topo-atletas{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;

    /* Firefox */
    scrollbar-width: none;

    /* IE / Edge antigo */
    -ms-overflow-style: none;
  }

  /* Chrome / Safari */
  .topo-atletas::-webkit-scrollbar{
    display:none;
  }


}




/* ################################## */
/* LIGA */
/* ################################## */

.container-liga{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

.topo-liga{
  display:grid;
  grid-template-columns: 250px 1fr;
  column-gap: 40px;
  align-items:start;

  align-items:flex-start;
  gap:40px;
  margin-top:30px;
  overflow: visible;
}

.titulo-liga{
  min-width: 0;
  width: 250px;
}

.titulo-liga h2{
  color:#013473;
  margin-bottom:20px;
  font-size:40px;
  font-weight:500;
  letter-spacing:2px;
  position:relative;
  padding-bottom:10px;
  margin-top:10px;
}

.titulo-liga h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
  margin-top:10px;
}

.topo-fundador{
  display:flex;
  align-items:center;
  gap:30px;
  margin:40px 0;
}

.topo-fundador img{
width: 100px;
height: 100px;
border-radius: 50%;
 aspect-ratio:1/1;
object-fit: cover;
border: 2px solid #FFF;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}



.info-fundador h3{
  color:#013473;
  font-size:20px;
  font-weight:700;
  margin:0 0 8px;
  letter-spacing:1px;
}

.info-fundador p{
  font-size:14px;
  color:#666;
  margin:0;
  letter-spacing:1px;
}


.conteudo-liga{
  display:flex;
  gap:40px;
  align-items:flex-start;
  margin:40px 0 80px;
}

/* CARD TEXTO */
.texto-liga{
  flex:0 0 800px;
}

.texto-liga p{
  font-size:15px;
  line-height:1.7;
  color:#444;
  margin-bottom:18px;
  text-align:justify;
}

.texto-liga strong{
  color:#013473;
}

/* CARD DIRETORIA */
.diretoria-liga{
  flex:0 0 400px;
}

.diretoria-liga h3{
  color:#013473;
  font-size:20px;
  font-weight:700;
    position: relative;
    letter-spacing: 2px;
    padding-bottom: 10px;
}




.diretoria-liga h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 60px;
height: 3px;
background-color: #FFCC00;
border-radius: 2px;
margin-top: 10px;
}



.diretoria-liga .subtitulo{
  font-size:13px;
  color:#666;
  margin-top: 15px;
  margin-bottom:20px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.lista-diretoria{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.item-diretoria{
  font-size:14px;
  color:#444;
}

.item-diretoria strong{
  display:block;
  color:#013473;
  font-weight:600;
  margin-top:2px;
}

@media (max-width:768px){

  .container-liga .titulo-ligamb h2{
    display:block;
    font-size:23px;
    color:#013473;
    font-weight:500;
    letter-spacing:2px;
    position:relative;
    padding-bottom:10px;
    margin-bottom:-30px;
    background-color:#F1F5F9;
    padding:15px 20px 20px 20px;
    top:0px !important;
    margin-left:-20px;
    width:95%;
  }

  .container-liga .titulo-ligamb h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:60px;
    height:3px;
    background-color:#FFCC00;
    border-radius:2px;
    margin-top:10px;
    margin-left:20px !important;
    margin-bottom:10px !important;
  }


    .topo-fundador{
    text-align:left !important;
  }

  .topo-fundador img{
    width: 100px !important;
    height: 100px !important;
    aspect-ratio:1/1;

  }

  .info-fundador h3{
    font-size:20px;
  }

  .info-fundador p{
    font-size:13px;
  }

  .titulo-liga{
    display:none !important;
  }

  .conteudo-liga{
    flex-direction:column;
  }

  .texto-liga,
  .diretoria-liga{
    flex:1 1 auto;
    width:100%;
  }

}


/* ################################## */
/* CATIDADE */
/* ################################## */

.container-catidade{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

.topo-catidade{
  display:grid;
  grid-template-columns: 550px 1fr;
  column-gap: 40px;
  align-items:flex-start;
  gap:40px;
  overflow: visible;
}

.titulo-catidade{
  min-width: 0;
  width: 550px;
}

.titulo-catidade h2{
  color:#013473;
  margin-bottom:20px;
  font-size:40px;
  font-weight:500;
  letter-spacing:2px;
  position:relative;
  padding-bottom:10px;
  margin-top:10px;
}

.titulo-catidade h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
  margin-top:10px;
}

/* Cards */
.catidade-card{
  margin:0px !important;
}

.catidade-card-titulo{
  color:#013473;
  font-size:16px;
  font-weight:700;
  letter-spacing:1px;
  margin:4px 0 12px;
  text-transform:uppercase;
}

/* Tabela (geral) */
.catidade-tabela-scroll{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.catidade-tabela{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px; /* força scroll no mobile */
}

.catidade-tabela thead th{
  text-align:left;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#013473;
  background:#F1F5F9;
  padding:14px 12px;
  border-bottom:1px solid #e8edf3;
  position:sticky;
  top:0;
  z-index:2;
}

.catidade-tabela tbody td{
  font-size:14px;
  color:#444;
  padding:12px;
  border-bottom:1px solid #eef2f6;
  vertical-align:middle;
}

.catidade-tabela tbody tr:hover td{
  background:#fbfdff;
}

.catidade-tabela thead th:first-child{ border-top-left-radius:10px; }
.catidade-tabela thead th:last-child{ border-top-right-radius:10px; }
.catidade-tabela tbody tr:last-child td:first-child{ border-bottom-left-radius:10px; }
.catidade-tabela tbody tr:last-child td:last-child{ border-bottom-right-radius:10px; }

/* Tabela Taxas (um pouco menor) */
.catidade-tabela-taxas{
  min-width:620px;
}

.catidade-secao td{
  color:#013473;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:12px;
  padding:10px 12px;
  border: none !important;
 
}


@media (max-width:768px){

  .container-catidade .titulo-catidamb h2{
    display:block;
    font-size:23px;
    color:#013473;
    font-weight:500;
    letter-spacing:2px;
    position:relative;
    padding-bottom:10px;
    margin-bottom:-30px;
    background-color:#F1F5F9;
    padding:15px 20px 20px 20px;
    top:0px !important;
    margin-left:-20px;
    width:95%;
  }

  .container-catidade .titulo-catidamb h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:60px;
    height:3px;
    background-color:#FFCC00;
    border-radius:2px;
    margin-top:10px;
    margin-left:20px !important;
    margin-bottom:10px !important;
  }

  .titulo-catidade{
    display:none !important;
  }

  .catidade-card{
    padding:10px 0px;
    border-radius:12px;
    width: 100% !important;
  }



  /* TAXAS - mobile 1 coluna */
.catidade-tabela-taxas{
  min-width:100%;
}

.catidade-tabela-taxas thead{
  display:none;
}

.catidade-tabela-taxas tr{
  display:block;
  margin-bottom:12px;
  overflow:hidden;
}

.catidade-tabela-taxas td{
  display:block;
  width:100%;
  border:none;
  padding:12px;
}

/* Junta os dois tds em um só visualmente */
.catidade-tabela-taxas td:first-child{
  font-weight:600;
  color:#013473;
  padding-bottom:4px;
}

.catidade-tabela-taxas td:last-child{
  padding-top:0;
}

/* Faz parecer uma única célula */
.catidade-tabela-taxas tr td:last-child::before{
  content:"";
  display:block;
}

}



/* ################################## */
/* ARTILHARIA */
/* ################################## */

.container-artilha{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* ===== TÍTULO DESKTOP ===== */
.topo-artilha{
  display:grid;
  grid-template-columns:250px 1fr;
  column-gap:40px;
  margin-top:30px;
  margin-bottom:-30px;
}

.titulo-artilha h2{
  color:#013473;
  font-size:40px;
  font-weight:500;
  letter-spacing:2px;
  position:relative;
  padding-bottom:10px;
  margin:0;
}

.titulo-artilha h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background:#FFCC00;
  border-radius:2px;
}

/* ===== POR CAMPEONATO: 3 / 1 ===== */
.artilha-row{
  display:grid;
  grid-template-columns:3fr 1fr;
  gap:40px;
  align-items:flex-start;
}

/* ===== LISTA (COLUNA MAIOR) ===== */
.artilha-campeonato{
  background:#fff;
  padding:60px 0 0 0;
  border-bottom:1px solid #e5e5e5;
}

.artilha-acc-btn{
  display:block;
  width:100%;
  background:transparent;
  border:none;
  padding:0;
  text-align:left;
  cursor:default;
}

.artilha-acc-icone{
  display:none;
}

.artilha-acc-conteudo{
  display:block;
}

.artilha-titulo-campeonato{
  display:block;
  font-size:18px;
  color:#013473;
  margin-bottom:12px;
  font-weight:700;
  position:relative;
  padding-bottom:10px;
}

.artilha-titulo-campeonato::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
  margin-top:10px;
}

.artilha-item{
  display:grid;
  grid-template-columns:1fr 1fr 120px;
  gap:14px;
  align-items:center;
  padding:10px 0;
  border-top:1px solid #e5e5e5;
}

.artilha-item:first-of-type{
  border-top:none;
}

.artilha-atleta,
.artilha-clube{
  display:flex;
  align-items:center;
  gap:10px;
}

.artilha-foto-atleta{
  width:50px;
  height:50px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #FFF;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.artilha-foto-clube{
  width:44px;
  height:44px;
  border-radius:10px;
  object-fit:cover;
  background:#f3f6fb;
}

.artilha-atleta .artilha-apelido{
  color:#013473;
  font-size:15px;
  font-weight:500;
  text-transform:uppercase;
  line-height:1.8;
}

.artilha-atleta .artilha-nome-atleta{
  color:#FFCC00;
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
}

.artilha-nome-clube{
  font-size:15px;
  font-weight:500;
  color:#013473;
  text-transform:uppercase;
  line-height:1.8;
}

.artilha-clube-local{
  font-size:12px;
  color:#ccc;
  font-weight:500;
  text-transform:uppercase;
}

.artilha-gols{
  font-size:20px;
  text-align:right;
  font-weight:600;
  color:#FFCC00;
}

.artilha-vazio{
  color:#64748b;
  font-size:14px;
  padding:10px 0;
}

/* ===== PC/MOBILE VISIBILIDADE ===== */
.artilha-pc{ display:grid; }
.artilha-mob{ display:none; }

/* ===== COLUNA MENOR: PRÓXIMOS JOGOS ===== */
.artilha-col-menor{
  width:100%;
  min-width:0;
  margin-top:50px;
}

/* SLIDER: TRAVA LARGURA NO CONTAINER */
.artilha-prox-bloco,
.artilha-prox-slider{
  width:100%;
  max-width:100%;
}

.artilha-prox-slider{
  overflow:hidden;
}

.artilha-prox-track{
  display:flex;
  flex-wrap:nowrap;
  width:100%;
  max-width:100%;
  transform:translateX(0);
}

.artilha-prox-slide{
  flex:0 0 100%;
  width:100%;
  max-width:100%;
}

.artilha-prox-card{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.artilha-prox-bloco{
  background:#fff;
  padding:12px;
  margin:60px 0 0 0;
  border:1px solid #e5e5e5;
}

.artilha-prox-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  gap:10px;
}

.artilha-prox-titulo{
  text-align:center;
  flex:1;
  min-width:0;
  border-bottom:1px solid #e5e5e5;
  padding:10px 0;
}

.artilha-prox-titulo1{
  font-size:12px;
  font-weight:500;
  color:#013473;
  letter-spacing:.5px;
}

.artilha-prox-titulo2{
  font-size:11px;
  font-weight:600;
  color:#FFCC00;
  margin-top:2px;
}

.artilha-prox-btn{
  width:32px;
  height:32px;
  border:1px solid #e9eef5;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  font-size:18px;
}

.artilha-prox-vazio{
  color:#64748b;
  font-size:13px;
  padding:8px 2px;
}

.artilha-prox-slider{
  position:relative;
  overflow:hidden;
  width:100%;
}

.artilha-prox-track{
  display:flex;
  width:100%;
  transition:transform .3s ease;
}

.artilha-prox-slide{
  flex:0 0 100%;
  max-width:100%;
}

.artilha-prox-card{
  width:100%;
  box-sizing:border-box;
}

.artilha-prox-times{
  display:grid;
  grid-template-columns:1fr 110px 1fr;
  align-items:center;
  gap:2px;
  padding:0 !important;
  margin-top:0;
}

.artilha-prox-time{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  text-align:center;
}

.artilha-prox-escudo{
  width:auto;
  height:35px;
  object-fit:cover;
  background:#f3f6fb;
  padding:0 !important;
}

.artilha-prox-nome{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  max-width:100px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.artilha-prox-x{
  text-align:center;
  font-weight:500;
  color:#64748b;
  font-size:12px;
  line-height:18px;
  padding:0 !important;
}

.artilha-prox-info1{
  margin-top:10px;
  font-size:12px;
  font-weight:700;
  color:#111827;
  text-align:center;
}

.artilha-prox-info2{
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  color:#111827;
  text-align:center;
}

.artilha-prox-info3{
  margin-top:2px;
  font-size:12px;
  font-weight:600;
  color:#64748b;
  text-align:center;
}



.artilha-pc{ display:grid; }
.artilha-mob{ display:none; }

/* ===== MOBILE ===== */
@media (max-width:768px){

  .artilha-row{
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  /* some coluna menor no mobile */
  .artilha-col-menor{
    display:none !important;
  }

  .artilha-mob{
    display:flex !important;
  }

  /* título desktop some */
  .titulo-artilha{
    display:none !important;
  }

  .artilha-campeonato{
    width:100% !important;
    box-sizing:border-box;
    padding:20px 0 0 0;
  }

  .artilha-col-maior{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0;
  }

  /* título mobile */
  .container-artilha .titulo-artilhamb h2{
    font-size:23px;
    color:#013473;
    font-weight:500;
    letter-spacing:2px;
    background:#F1F5F9;
    padding:15px 20px 20px;
    margin-left:-20px;
    width:95%;
    position:relative;
    margin-bottom: 30px;
  }

  .container-artilha .titulo-artilhamb h2::after{
    content:"";
    position:absolute;
    left:20px;
    bottom:10px;
    width:60px;
    height:3px;
    background:#FFCC00;
  }

  /* troca PC por Mobile */
  .artilha-pc{
    display:none !important;
  }

  .artilha-mob{
    display:flex !important;
  }

  /* acordeom mobile */
  .artilha-acc-btn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    background:transparent;
    border:none;
    padding:0 0 14px 0;
    text-align:left;
    cursor:pointer;
  }

  .artilha-acc-btn .artilha-titulo-campeonato{
    margin:0;
    padding-bottom:0;
  }

  .artilha-acc-btn .artilha-titulo-campeonato::after{
    display:none;
  }

  .artilha-acc-icone{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#F1F5F9;
    color:#013473;
    font-size:22px;
    font-weight:700;
    flex-shrink:0;
  }

  .artilha-acc-icone::before{
    content:"+";
  }

  .artilha-acc-conteudo{
    display:none;
  }

  .artilha-campeonato.aberto .artilha-acc-conteudo{
    display:block;
  }

  .artilha-campeonato.aberto .artilha-acc-icone::before{
    content:"−";
  }

  /* layout mobile novo */
  .artilha-item-mobile{
    align-items:flex-start;
    gap:12px;
    padding:14px 0;
    border-top:1px solid #e9eef5;
  }

  .artilha-item-mobile:first-of-type{
    border-top:none;
  }

  .artilha-mob-dados{
    display:flex;
    flex-direction:column;
    gap:4px;
    flex:1;
    min-width:0;
  }

  .artilha-mob .artilha-foto-atleta{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #FFF;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
  }

  .artilha-apelido{
    display:block;
    font-size:14px;
    font-weight:600;
    color:#013473;
    text-transform:uppercase;
  }

  .artilha-nome-atleta{
    font-size:13px;
    font-weight:600;
    color:#FFCC00;
    line-height:1.2;
    text-transform:uppercase;
  }

  .artilha-mob-clube{
    display:flex;
    align-items:center;
    gap:4px;
  }

  .artilha-mob-clube .artilha-nome-clube{
    color:#777;
    font-size:12px;
  }

  .artilha-mob-clube .artilha-foto-clube{
    width:18px;
    height:18px;
    border-radius:6px;
    object-fit:cover;
  }

  .artilha-mob-gols{
    display:flex;
    align-items:center;
    gap:3px;
    font-size:16px;
    font-weight:600;
    color:#013473;
  }
}



/* =====++++++++++++++++++++++++++===== */
/* ===== JOGO AO VIVO ===== */
/* =====++++++++++++++++++++++++++===== */
.container-jogovivo{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* topo do título (PC) */
.topo-jogovivo{
  display:grid;
  grid-template-columns: 250px 1fr;
  column-gap:40px;
  align-items:flex-start;
  gap:40px;
  margin-top:30px;
  overflow:visible;
  border-bottom: 1px solid #D8E2EE;
  margin-bottom: 30px;
}

.titulo-jogovivo{
  min-width:0;
  width:250px;
}

.titulo-jogovivo h2{
  color:#013473;
  margin-bottom:20px;
  font-size:40px;
  font-weight:500;
  letter-spacing:2px;
  position:relative;
  padding-bottom:10px;
  margin-top:10px;
}

.titulo-jogovivo h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
}

/* ===================== PC (2 COLUNAS) ===================== */
.jogovivo-conteudo{
  display:grid;
  grid-template-columns: 1fr 1fr; /* 2 colunas iguais */
  gap:40px;
  margin-top:30px;
}

.jogovivo-coluna{
  background:#ffffff;
  border-radius:12px;
}

.jogovivo-coluna .jogovivo-jogo {
  padding:0px !important;
}




/* no PC não tem abas */
.jogovivo-abas-mobile{
  display:none;
}

/* no PC: escalação escondida */
.jogovivo-escalacao{
  display:none;
}

/* ===================== COLUNA 2 (MINUTO A MINUTO) ===================== */
.jogovivo-aovivo {
  padding:40px 50px 0 40px !important;
  background-color: #F1F5F9;
  border-radius: 0px;
}

.jogovivo-aovivo-topo {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  position: relative;
  padding-bottom: 10px;
}

.jogovivo-aovivo-topo::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
  margin-top:10px;
}



.jogovivo-aovivo-topo h3{
  margin:0;
  font-size:18px;
  font-weight:6800;
  color:#013473;
}

.jogovivo-status{
  font-size:12px;
  font-weight:600;
  color:#013473;
  background:#E2E8F0;
  padding:6px 10px;
  border-radius:999px;
}

/* timeline */
.jogovivo-timeline{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* evento */
.jogovivo-evento{
  position:relative;
  display:grid;
  grid-template-columns: 60px 1fr; /* esquerda (tempo ou ícone) | direita (bolha) */
  gap:12px;
  align-items:start;
}

.jogovivo-linha{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
}



/* linha vertical */
.jogovivo-evento::before{
  content:"";
  position:absolute;
  left:30px;
  top:-14px;
  bottom:-14px;
  width:1px;
  background:#D8E2EE;
  border-radius:2px;
}

.jogovivo-evento:first-child::before{ top:18px; }
.jogovivo-evento:last-child::before{ bottom:18px; }

/* minuto */
.jogovivo-minuto{
  font-size:14px;
  font-weight:800;
  color:#013473;
    z-index: 10;
  border: 5px solid #fff;
}

/* ícone vertical */
.jogovivo-icone-vertical{
  width:30px;
  height:30px;
  object-fit:contain;
  z-index: 10;
}

/* ícone */
.jogovivo-icone{
  width:34px;
  height:34px;
  border-radius:50%;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  box-shadow:0 1px 0 rgba(15,23,42,.06);
}

.jogovivo-icone img{
  width:18px;
  height:18px;
  object-fit:contain;
}

/* bolha */
.jogovivo-bolha{
  background:#fff;
  border: 1px solid #e8ecf0;
  border-radius:14px;
  padding:12px 14px;
}

.jogovivo-titulo{
  font-size:14px;
  font-weight:900;
  letter-spacing:.6px;
  color:#013473;
  margin-bottom:6px;
}

.jogovivo-texto{
  font-size:14px;
  font-weight:400;
  color:#777;
  line-height:1.35;
  margin-top: 5px;
}

/* cores por tipo (bem próximas do asp) */
.jogovivo-tipo-gol .jogovivo-bolha{ background:#DDE7FF; }
.jogovivo-tipo-amarelo .jogovivo-bolha{ background:#FFFFE1; }
.jogovivo-tipo-vermelho .jogovivo-bolha{ background:#FFF0F0; }
.jogovivo-tipo-sub .jogovivo-bolha{ background:#F1F5F9; }

/* vazio */
.jogovivo-sem-evento{
  background:#F1F5F9;
  border-radius:14px;
  padding:16px;
  font-size:14px;
  font-weight:600;
  color:#013473;
  text-align:center;
}


.jogovivo-linha-clube{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.jogovivo-brasao{
  width:36px;
  height:36px;
  object-fit:contain;
  flex:0 0 36px;
  margin-top:2px;
}

.jogovivo-tempo-bolha{
  font-size:14px;
  color:#666;
  margin-bottom:6px;
}

/* GOL - destaque visual */
.jogovivo-gol .jogovivo-bolha{
  background-color: #fff;
  border-left:4px solid #013473;
}

.jogovivo-icone-vertical{
  width:30px;
  height:30px;
}

/* animação suave */
.jogovivo-gol{
  animation: golFade 0.6s ease-out;
}

.jogovivo-atleta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.jogovivo-foto-atleta{
  width:26px;
  height:26px;
  border-radius:50%;
  object-fit:cover;
     border: 2px solid #FFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.jogovivo-nome-atleta{
  font-weight:400;
  color: #666;
}

.jogovivo-resto{
  font-size:14px;
}

@keyframes golFade{
  0%{
    transform:scale(0.98);
    opacity:0.5;
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}


.jogovivo-refresh-wrapper{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
  margin-bottom: 10px;
}

.jogovivo-refresh-bar{
  position:relative;
  width:100%;
  height:4px;
  background:#fff;
  overflow:hidden;
  margin-top:6px;
  border-radius:2px;
}

.jogovivo-refresh-progress{
  position:absolute;
  right:0;     /* <-- ancora no RIGHT (inverte o sentido visual) */
  left:auto;
  top:0;
  bottom:0;
  width:100%;
  background:#e9e9e9;
  transition:width linear;
}
.jogovivo-refresh-text{
  font-size:12px;
  color:#666;
  white-space:nowrap;
}

/* Diferenciar 1º e 2º tempo */
.jogovivo-inicio-tempo .jogovivo-bolha{
  background-color:#fff;
  border-left:4px solid #d0d3d6;
}


.jogovivo-confronto-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 !important;
  width: 100%;
}

.jogovivo-confronto-time{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
}

.jogovivo-confronto-time-a{
  justify-content:flex-end;
  text-align:right;
  padding-right: 0 !important;
}

.jogovivo-confronto-time-b{
  justify-content:flex-start;
  text-align:left;
  padding-left: 0 !important;
}

.jogovivo-confronto-nome{
  font-size:16px;
  font-weight:700;
  color:#013473;
  line-height:1.2;
  text-transform: uppercase;
  white-space:normal;        /* permite quebrar */
  word-break:break-word;     /* quebra palavras longas */
}

.jogovivo-confronto-brasao{
  width:auto;
  height:58px;
  object-fit:contain;
}

.jogovivo-confronto-placar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:26px;
  font-weight:700;
  color:#FFCC00;
  min-width:70px;
}

.jogovivo-confronto-x{
  font-size: 15px;
color: #666;
font-weight: 400;
 align-self:center;

}


.jogovivo-coluna .jogovivo-confronto-fase {
font-size: 13px;
color: #013473;
text-align: center !important;
padding: 20px 0 10px 0;
}


.jogovivo-coluna .jogovivo-confronto-ginasio {
font-size: 13px;
color: #666;
text-align: center !important;
margin: 0 auto;
line-height: 23px;
}



.jogovivo-prob {
   margin: auto;
  margin-top:30px;
  padding: 20px 0 0 0;
  border-top: 1px solid #D8E2EE;
}

.jogovivo-prob-topo{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:12px;
}

.jogovivo-ganhar-titulo {
  font-size: 18px;
  color: #013473;
  margin-bottom: 20px;
  font-weight: 600;
    position:relative;
  padding-bottom:10px;
}


.jogovivo-ganhar-titulo::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
  margin-top:10px;
}


.jogovivo-prob-item{
  text-align:left;
}

.jogovivo-prob-centro{
  text-align:center !important;
  margin: 0 auto;
}

.jogovivo-prob-direita{
  text-align:right;
}

.jogovivo-prob-nome{
  color:#666;
  font-size:10px;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 5px;
}

.jogovivo-prob-num{
  color:#4b4b9a;
  font-size:20px;
  font-weight:700;
  line-height:1;
}

.jogovivo-prob-barra{
  display:flex;
  height:10px;
  border-radius:3px;
  overflow:hidden;
  background:#eee;
}





.jogovivo-diretos2 {
   margin-top:60px; 
  }

.jogovivo-diretos2-titulo {
  font-size: 18px;
  color: #013473;
  margin-bottom: 10px;
  font-weight: 600;
    position:relative;
  padding-bottom:10px;
}


.jogovivo-diretos2-titulo::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
  margin-top:10px;
}



.jogovivo-diretos2-tabela{
  overflow:hidden;
  font-size: 12px !important;
}

.jogovivo-diretos2-head,
.jogovivo-diretos2-row{
  display:grid;
  grid-template-columns: 90px 1fr;
}

.jogovivo-diretos2-row:hover {
background-color: #F1F5F9;
}

.jogovivo-diretos2-head{
  background:#fff;
  border-bottom:1px solid #D8E2EE;
}

.jogovivo-diretos2-row{
  border-bottom:1px solid #D8E2EE;

  
}


.jogovivo-diretos2-row:last-child{ border-bottom:none; }

.jogovivo-diretos2-data{
  padding: 14px;
  font-size:12px;
  color: #013473;
  font-weight:500;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}

.jogovivo-diretos2-conf{
  padding: 10px 0 0 0;
}

.jogovivo-diretos2-linha1{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}

.jogovivo-diretos2-time{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:45%;
}
.jogovivo-diretos2-time-a { 
  font-size:12 !important;
  justify-content:flex-end;
   text-align:right; 
  }

.jogovivo-diretos2-time-b { 
  font-size:12 !important;
  justify-content:flex-start;
   text-align:left;
   }

.jogovivo-diretos2-nome{
  color:#666;
  font-weight:700;
  font-size:12 !important;
  line-height:1.1;
  word-break:break-word;
  text-transform: uppercase;
}

.jogovivo-diretos2-brasao{
  width:auto;
  height:22px;
  object-fit:contain;
}

.jogovivo-diretos2-placar{
  display:flex;
  align-items:center;
  gap:3px;
  font-size:30px;
  font-weight:500;
}
.jogovivo-diretos2-gol { 
  color:#f0b400; 
  font-size: 16px !important;
}

.jogovivo-diretos2-x { 
  font-size: 13px !important;
  color:#777; 
  font-weight:500; 
}

.jogovivo-diretos2-camp{
  margin-top:10px;
  font-size:14px;
  font-weight:900;
  text-align:center;
  letter-spacing:0.8px;
  color:#111;
}

.jogovivo-diretos2-vazio{
  padding:10px 0px;
  color:#999;
  font-size:13px;
}




.jogovivo-ultimos { 
  margin-top:0px; 
  padding: 60px 0 0 0;
  border-top: 1px solid #D8E2EE;
}

.jogovivo-ultimos-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
}

.jogovivo-ultimos-titulo-a {
  font-size: 18px;
  color: #013473;
  margin-bottom: 10px;
  font-weight: 600;
    position:relative;
  padding-bottom:10px;
}


.jogovivo-ultimos-titulo-a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
  margin-top:10px;
}


.jogovivo-ultimos-titulo-b {
  font-size: 18px;
  color: #013473;
  margin-bottom: 10px;
  font-weight: 600;
    position:relative;
  padding-bottom:10px;
}


.jogovivo-ultimos-titulo-b::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
  margin-top:10px;
}



.jogovivo-ultimos-titulo-equipe {
  font-size: 11px;
  color: #666 !important;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 15px;
}


.jogovivo-ultimos-titulo-equipe .brasaoa {
height: 18px;
width: auto;
object-fit: contain;
vertical-align: -3px;
margin-left: 7px;
}

.jogovivo-ultimos-titulo-equipe .brasaob {
height: 18px;
width: auto;
object-fit: contain;
vertical-align: -3px;
margin-right: 7px;
}




.jogovivo-ultimos-table{
  width:100%;
  border-collapse:collapse;
}

.ult-sem-jogo{
  text-align:left;
  padding: 0 0 10px 0 !important;
  margin-left: -10px;
  font-size:13px;
  color:#999;
}


.jogovivo-ultimos-table-hover:hover {
  background-color: #F1F5F9;
}

.jogovivo-ultimos-table td{
border-bottom:1px solid #D8E2EE;
  padding:5px 10px;
  vertical-align:middle;
}

.ult-data{
  width:50px;
  text-align:center;
  font-size:11px !important;
  font-weight:500;
  color: #013473;
}

.ult-badge{
  width:20px !important;
  text-align:center;
}

.ult-pill{
  display:inline-flex;
  align-items:center;
  justify-content:right;
  width:65px;
  height:16px;
  font-size:12px;
  font-weight:500;
  border-radius:2px;
  margin-top: 5px;
  padding: 13px 5px 10px 0;
}
.ult-pill.vitoria {border-right: 4px solid #18b24a; background:transparent; color: #999999; text-align: end; font-size: 11px;}  /* vitória */
.ult-pill.empate {border-right: 4px solid #bdbdbd; background:transparent; color: #999999; text-align: end; font-size: 11px}  /* empate */
.ult-pill.derrota {border-right: 4px solid #e02b2b; background:transparent; color: #999999; text-align: end; font-size: 11px}  /* derrota */

.ult-conf{ padding:0px 5px; }

.ult-linha{
  display:flex;
  align-items:center;      /* alinha vertical */
  justify-content:flex-start; /* força à esquerda */
  gap:8px;
  margin:4px 0;
}

.ult-gol{
  font-size:14px;
  font-weight:500;
  color:#f0b400;
  width:17px;
  text-align:left !important;
}

.ult-esc{
  width:auto;
  height:18px;
  object-fit:contain;
}

.ult-nome{
  color:#666;
  font-weight:700;
  font-size:11px;
  line-height:1.1;
  text-transform: uppercase;
  padding-right: 0 !important;

    max-width:120px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}




.jogovivo-estat2{
  margin-top:36px;
  background:#fff;
  border-radius:12px;
  padding:18px 0px;
}


.jogovivo-estat2-titulo {
  font-size: 18px;
  color: #013473;
  margin-bottom: 10px;
  font-weight: 600;
  position:relative;
  padding-bottom:10px;

}


.jogovivo-estat2-titulo::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
  margin-top:10px;
}

.jogovivo-estat2-times{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:12px 0;
  border-top:1px solid #d9d9d9;
  border-bottom:1px solid #d9d9d9;
}

.estat2-time{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.estat2-time-a{ justify-content:flex-start; }
.estat2-time-b{ justify-content:flex-end; }

.estat2-nome{
  font-size:11px;
  font-weight:700;
  color:#666;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:240px;
  text-transform: uppercase;
}

.estat2-esc{
  height:18px;
  width:auto;
  object-fit:contain;
}

.jogovivo-estat2-linhas{ margin-top:10px; }

.estat2-linha{
  display:grid;
  grid-template-columns: 1fr 2.1fr 1fr;
  align-items:center;
  padding:7px 0;
  border-bottom:1px solid #d9d9d9;
}

.estat2-linha:hover { 
background-color: #F1F5F9;
}

.estat2-linha:last-child { 
  border-bottom:none; 
}



.estat2-val-a{
  font-size:14px;
  font-weight:600;
  color:#013473;
  text-align:right;
}

.estat2-val-b{
  font-size:14px;
  font-weight:600;
  color:#013473;
  text-align:left;
}

.estat2-label{
  font-size:13px;
  font-weight:400;
  color:#666;
  text-align:center;
  letter-spacing:0.5px;
}


.seq {
  display:flex;
  gap:6px;
}

.estat2-val-a .seq {
  display:flex;
  gap:6px;
  justify-content:end;
}

.seq-box{
  width:18px;
  height:18px;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:500;
  font-size:10px;
  padding: 4px;
  color:#fff;
}

.seq-box.v{ background:#1fb34a; } /* verde */
.seq-box.e{ background:#9a9a9a; } /* cinza */
.seq-box.d{ background:#e03a3a; } /* vermelho */



.jogovivo-confronto-topo-mb{ 
  display: none;
}

.jogovivo-confronto-fase-mb{ 
  display: none;
}

.jogovivo-confronto-data-mb { 
  display: none;
}

.jogovivo-confronto-ginasio-mb { 
  display: none;
}




/* ===================== MOBILE (ABAS) ===================== */
@media (max-width:768px){

   /* =========================
     TÍTULO MOBILE
  ========================= */
.jogovivo-confronto-topo {
  display: none !important;
}


.topo-jogovivo{
  border-bottom: none;
  margin-bottom: 0px;
}

.jogovivo-bolha{
  background:#F1F5F9;
  color: #666;
}





.jogovivo-confronto-fase-mb{ 
  display: block;
  margin-bottom: 15px !important;
}

.jogovivo-confronto-data-mb { 
  display: block;
}

.jogovivo-confronto-ginasio-mb { 
  display: block;
}


.jogovivo-coluna .jogovivo-confronto-fase {
    display: none !important;
}

.jogovivo-coluna .jogovivo-confronto-ginasio {
      display: none !important;
}


.container-jogovivo .titulo-jogovivo{
display:none !important;
}



  .jogovivo-topo-fixo-mb{
    position:sticky;
    top: 0px;
    z-index:20;
    background:#fff;
  transition: box-shadow .2s ease;
}

.jogovivo-topo-fixo-mb.ativo-scroll{
   box-shadow: 0 6px 6px -6px rgba(0,0,0,0.25);
}

.jogovivo-confronto-topo-mb{
  display:flex;
   align-items:flex-start;
  justify-content:space-between;
  gap:5px;
  padding:0 !important;
  width: 100%;
}

.jogovivo-confronto-time-mb{
  display:flex;
  flex-direction:column;   /* empilha brasão e nome */
  align-items:center;
  gap:6px;
  flex:1;
  min-width:0;
}

.jogovivo-confronto-time-a-mb{
  justify-content:center;
  align-items:flex-end;
  text-align:right;
}

.jogovivo-confronto-time-b-mb{
  justify-content:center;
  align-items:flex-start;
  text-align:left;
}

.jogovivo-confronto-nome-mb{
  font-size:13px;
  font-weight:600;
  color:#013473;
  line-height:1.2;
  text-transform: uppercase;
  white-space:normal;        /* permite quebrar */
  word-break:break-word;     /* quebra palavras longas */
}

.jogovivo-confronto-brasao-mb{
  width:auto;
  height:42px;
  object-fit:contain;
}

.jogovivo-confronto-placar-mb{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:24px;
  font-weight:600;
  color:#FFCC00;
  min-width:50px;
  margin-top: 5px;
}

.jogovivo-confronto-x-mb{
  font-size: 15px;
color: #666;
font-weight: 400;

}


.jogovivo-confronto-fase-mb {
font-size: 12px;
color: #666;
text-align: center !important;
margin-top: 15px;
line-height: 18px;
}

.jogovivo-confronto-data-mb {
font-size: 13px;
color: #666;
text-align: left !important;
line-height: 23px;
}

.jogovivo-confronto-ginasio-mb {
  font-size: 13px;
color: #666;
text-align: left !important;
line-height: 21px;
margin-top: 10px;
}

.jogovivo-confronto-data-mb .icone {
font-size: 18px !important;
color: #013473;
vertical-align: -2px;
}

.jogovivo-confronto-ginasio-mb .icone {
font-size: 18px !important;
color: #013473;
vertical-align: -2px;
}




  /* =========================
     ABAS (somente dentro do jogo)
  ========================= */
  .container-jogovivo .jogovivo-abas-mobile{
    display:flex;
    justify-content:space-between;
    gap:5px;
    background-color: #fff;
    padding-bottom: 10px !important;
  }

  .container-jogovivo .aba-btn{
    flex:1;
    background: none;
    border: 1px solid #ccc !important;
    border:none;
    padding:8px 5px;
    font-weight:500;
    color:#777;
    cursor:pointer;
    border-radius:5px;
  }

  .container-jogovivo .aba-btn.ativo{
    border: 1px solid #FFCC00 !important;
    background:#FFCC00;
    color:#fff;
    padding:5px;
    font-weight:600;
  }

    .container-jogovivo .aba-btn.mais{
    border: 1px solid #ccc;
    background:none;
    color:#FFCC00;
    padding:5px;
    font-weight:600;
  }


  /* =========================
     CONTEÚDO: no mobile é 1 aba por vez
     (mantém margem lateral do container: 20px)
  ========================= */
  .container-jogovivo .jogovivo-conteudo{
    display:block;
    margin-top:15px;
  }


  





  .container-jogovivo .jogovivo-coluna{
    display:none;
    background:#ffffff;
    padding:15px;          /* aqui é o “card” */
    border-radius:12px;
    box-sizing:border-box;
    width:100%;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .container-jogovivo .jogovivo-coluna.ativo{
    display:block;
  }

  /* escalação participa das abas */
  .container-jogovivo .jogovivo-escalacao{
    display:none;
  }
  .container-jogovivo .jogovivo-escalacao.ativo{
    display:block;
  }

  /* =========================
     JOGO AO VIVO: garantir largura total do card
  ========================= */
  .container-jogovivo #aba-aovivo{
    width:100%;
  }

  .container-jogovivo .jogovivo-timeline,
  .container-jogovivo .jogovivo-evento{
    width:100%;
  }


  .jogovivo-prob-nome{
  font-size:8px;
}

.jogovivo-prob-num { 
  font-size:16px; 
}



.jogovivo-diretos2 {
   margin-top:40px !important; 
  }


  .jogovivo-diretos2-row{
    display:block;
    padding:10px 0;
  }

  .jogovivo-diretos2-conf{
    width:100%;
  }


  .jogovivo-diretos2-linha1{
       display:grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;   /* não quebra */
    gap:6px;
  }

    .jogovivo-diretos2-time-a{
    justify-content:flex-end;
    text-align:right;
    min-width:0;
  }

  .jogovivo-diretos2-time-b{
    justify-content:flex-start;
    text-align:left;
    min-width:0;
  }

   .jogovivo-diretos2-placar{
    justify-self:center;
    white-space:nowrap;
  }


  .jogovivo-diretos2-data{
    text-align:center;
    font-size:11px;
    color:#999;
    margin-bottom: -18px;
  }

  .jogovivo-diretos2-time{
    min-width:0;
    display:flex;
    align-items:center;
    gap:4px;
  }

    .jogovivo-diretos2-nome{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
     max-width:110px;
    font-size:11px;
  }


  .jogovivo-diretos2-brasao{
    height:18px;
    width:auto;
    flex:0 0 auto;
  }


.jogovivo-ultimos{
    padding:40px 0 0 0;
  }

  .jogovivo-ultimos-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .jogovivo-ultimos-col{
    width:100%;
  }

  .jogovivo-ultimos-titulo-a,
  .jogovivo-ultimos-titulo-b,
  .jogovivo-ultimos-titulo-equipe{
    text-align:left !important;
  }

  .jogovivo-ultimos-titulo-b::after{
    right:auto;
    left:0;
  }


    .ult-nome{
    max-width:none;
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
  }

}


/* ===== CLUBES ===== */
.container-clube{
  max-width:1200px;
  margin:0 auto;
  padding:0;
}

/* A-Z */
.clubes-az{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 25px 0px 30px 0px;
}

.clubes-az button{
  border:1px solid #bfc7d1;
  background:#fff;
  color:#013473;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}

.clubes-az button.ativo{
  border-color: var(--cor-azul);
  background: var(--cor-azul);
  color:#fff;
}

.titulo-sessao-clubes{
  margin: 10px 0 20px;
  font-size: 16px !important;
  color: #013473;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 10px;
}


.titulo-sessao-clubes::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:50px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
  margin-top:10px;
}


.clube-item{
  border:1px solid #e3e3e3;
  background:#fff;
  padding:10px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}



.clube-item{
  border:1px solid #e3e3e3;
  background:#fff;
  padding:10px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition: all .2s ease;

}

  .clube-item-icone{
  position:absolute;
  top: 0px;
  right:0px;
  width:20px;
  height:20px;
  border-radius:0 0 0 50%;
  background:#013473;
  color:#fff;
  font-size:16px;
  font-weight:500;
  line-height:20px;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  }

  .clube-item-icone:hover{ 
     background:#FFCC00;
  }






/* Grid */
.clubes-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:10px;
  padding-bottom: 40px;
  margin-top: 20px;
}

.mostrar-mais-box{
  text-align:center;
  margin-top:20px;
}

#btnMostrarMais{
  border: 1px solid #ccc;
  background:#fff;
  color:#013473;
  padding:10px 20px;
  cursor:pointer;
  font-size:13px;
}

#btnMostrarMais:hover{
  background:#0b4c9a;
  color:#fff;
}



@media (max-width: 1000px){
  .clubes-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
}
@media (max-width: 768px){
  .container-clube{ padding:0 20px; }
  .clubes-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }

   .clubes-az{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 8px;
  }

  .clubes-az::-webkit-scrollbar{
    height: 6px;
  }

  .clubes-az button{
    flex: 0 0 auto; /* não quebrar */
    white-space: nowrap;
  }
}
@media (max-width: 480px){
  .clubes-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.clube-item{
  border:1px solid #e3e3e3;
  background:#fff;
  padding:10px;
  cursor:pointer;
}
.clube-item:hover{
  border-color:#cfd8e3;
}
.clube-item .clube-logo{
  height:30px;
  width:auto;
  display:block;
}

.clube-item .clube-nome{
  margin-top:8px;
  font-size:13px;
  color:#013473;
  line-height:1.2;
font-weight: 600;
  text-transform: uppercase;
}

.clube-item .clube-referencia{
  margin-top:5px;
  font-size:11px;
  color:#666;
}



@media (min-width:769px){

  .clube-item{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    padding: 18px 10px;
  }

  .clube-item .clube-logo{
    height:45px;
    width:auto;
    flex:0 0 auto;
  }

  .clube-item .clube-nome{
    flex:1 1 calc(100% - 60px);
    margin-top:0;
    font-size:13px;
    color:#013473;
    line-height:1.2;
    font-weight:700;
    text-transform:uppercase;
  }

  .clube-item .clube-referencia{
    flex:1 1 calc(100% - 60px);
    font-size:11px;
    color:#666;
    font-weight: 400;
    text-transform: none;
  }

}



/* Drawer */
.drawer-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.35);
  display:none;
  z-index:9998;
}
.drawer{
  position:fixed;
  top:0;
  right:-320px;
  width:300px;
  height:100%;
  background:#fff;
  z-index:9999;
  transition:right .25s ease;
  box-shadow: -8px 0 20px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
}
.drawer.aberto{ right:0; }
.drawer-overlay.aberto{ display:block; }

.drawer-topo{
  padding:14px 14px 10px;
  border-bottom:1px solid #eee;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.drawer-topo img{
  height:72px;
  width:auto;
}
.drawer-titulo{
  flex:1;
}
.drawer-titulo h3{
  margin-top: 12px;
  font-size:18px;
  font-weight: 600;
  color:#013473;
  line-height:1.2;
  text-transform: uppercase;
}
.drawer-fechar{
  border:0;
  background:transparent;
  font-size:42px;
  line-height:1;
  cursor:pointer;
  color:#013473;
  padding-right: 10px;
}

.drawer-corpo{
  padding:14px;
  overflow:auto;
}
.drawer-bloco{
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid #f0f0f0;
}
.drawer-bloco:last-child{
  border-bottom:0;
  padding-bottom:0;
}


.drawer-label{
  font-size:13px;
  color:#013473;
  margin-bottom:10px;
  position:relative;
  padding-bottom:5px;
  font-weight: 600;
}

 
.drawer-label::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:25px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
  margin-top:10px;
}



.drawer-texto{
  font-size:13px;
  color:#013473;
  line-height:1.35;
  text-transform: uppercase;
}

.drawer-texto .drawer-label-fundacao{
  font-size:12px;
  color:#013473;
  margin-bottom:10px;


}

/* Técnico */
.box-tecnico{
  display:flex;
  gap:10px;
  align-items:center;
}

.foto-tecnico{
     width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
     border: 2px solid #FFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Uniformes (você já definiu na memória; só mantendo aqui se quiser) */
.uniformes-box {
  display: flex;
  gap: 15px;
}
.uniforme-item {
  flex: 1;
  padding: 15px;
  text-align: center;
}
.uniforme-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.camisa-wrapper{
  position:relative;
  display:flex;
  justify-content:center;
}
.numero-uniforme{
  position:absolute;
  top:-8px;
  left:-8px;
  width:25px;
  height:25px;
  background:var(--cor-azul);
  color:#fff;
  border-radius:50%;
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
}




/* ===== NOTICIAS ===== */
.container-noti{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

.topo-noti{
  display:grid;
  grid-template-columns:250px 1fr;
  column-gap:40px;
  align-items:flex-start;
  gap:40px;
  margin-top:30px;
}

.titulo-noti{
  width:250px;
}

.titulo-noti h2{
  color:#013473;
  margin-bottom:20px;
  font-size:40px;
  font-weight:500;
  letter-spacing:2px;
  position:relative;
  padding-bottom:10px;
  margin-top:10px;
}

.titulo-noti h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background:#FFCC00;
}

/* GRID */

.noti-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:40px;
  margin-top:20px;
  margin-bottom: 50px;
}

/* DESTAQUE */

.noti-titulo{
  font-size:26px;
  font-weight:600;
  color:#FFCC00;
  margin-bottom:15px;
}

.noti-imgbox {
  width: 100%;
  max-width: 100%; /* Garante que o box não passe da tela */
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 15px; /* Espaçamento opcional para o texto não colar */
}

.noti-img {
  max-width: 100%; /* A imagem nunca será maior que o container */
  width: 100%;     /* Ela tenta ocupar tudo, mas o max-width a segura */
  height: auto !important;
  display: block;
  object-fit: contain; /* Garante que a imagem se ajuste sem distorcer */
}


.noti-texto{
  margin-top:15px;
  font-size:15px;
  line-height:1.6;
  color: #666;
}

/* LATERAL */

.noti-lateral-titulo{
  font-weight:700;
  margin-bottom:10px;
  color:#013473;
  position: relative;
  padding-bottom:10px;

}

.noti-lateral-titulo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: #FFCC00;
 
}

.noti-lista{
  display:flex;
  flex-direction:column;
  gap:10px;
  
}

.noti-item{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:10px;
  padding:8px;
  text-decoration:none;
  background:#fff;
  border-bottom: 1px solid #D8E2EE;
}

.noti-thumb{
  width:70px;
  height:50px;
  object-fit:cover;
}

.noti-item-txt{
  font-size:13px;
  color:#666;
  font-weight:600;
}



/* MOBILE */

@media (max-width:768px){

  .container-noti .titulo-notimb h2{
    display:block;
    font-size:23px;
    color:#013473;
    font-weight:500;
    letter-spacing:2px;
    position:relative;
    padding-bottom:10px;
    margin-bottom:-30px;
    background:#F1F5F9;
    padding:15px 20px 20px 20px;
    margin-left:-20px;
    width:95%;
  }

  .container-noti .titulo-notimb h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:60px;
    height:3px;
    background:#FFCC00;
    margin-left:20px;
  }

  .titulo-noti{
    display:none !important;
  }

  .noti-grid{
    grid-template-columns:1fr;
    gap:20px;
    margin-top:40px;
  }


  .noti-imgbox {
  width: 100%;
  max-width: 100%; /* Garante que o box não passe da tela */
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 15px; /* Espaçamento opcional para o texto não colar */
}


.noti-img {
  max-width: 100%; /* A imagem nunca será maior que o container */
  width: 100%;     /* Ela tenta ocupar tudo, mas o max-width a segura */
  height: auto !important;
  display: block;
  object-fit: contain; /* Garante que a imagem se ajuste sem distorcer */
}


}




/* =========================
   ESCALAÇÃO
========================= */
.jogovivo-escalacao-bloco-pc{
  margin-top:10px;
  padding-top:50px;
  border-top:1px solid #D8E2EE;
}

.jogovivo-escalacao-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.jogovivo-escalacao-col{
  background:#fff;
}

.jogovivo-escalacao-topo{
  margin-bottom:15px;
}

.jogovivo-escalacao-titulo-a {
  font-size:18px;
  color:#013473;
  margin-bottom:10px;
  font-weight:600;
  position:relative;
  padding-bottom:10px;
}

.jogovivo-escalacao-titulo-a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
}


.jogovivo-escalacao-titulo-b {
  font-size:18px;
  color:#013473;
  margin-bottom:10px;
  font-weight:600;
  position:relative;
  padding-bottom:10px;
  text-align: right;
}

.jogovivo-escalacao-titulo-b::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
}



.jogovivo-escalacao-equipe-a{
  display:flex;
  align-items:center;
  font-size:11px;
  color:#666;
  text-transform:uppercase;
}


.jogovivo-escalacao-equipe-b{
  display:flex;
  justify-content: flex-end;
  align-items:center;
  font-size:11px;
  color:#666;
  text-transform:uppercase;
}



.brasaoa {
    height: 18px;
    width: auto;
    object-fit: contain;
    vertical-align: -3px;
    margin-left: 7px;
}

.brasaob {
    height: 18px;
    width: auto;
    object-fit: contain;
    vertical-align: -3px;
    margin-right: 7px;
}



/* cabeçalho */
.jogovivo-escalacao-cabecalho{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 25px 25px;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-top:1px solid #D8E2EE;
  border-bottom:1px solid #D8E2EE;
  font-size:12px;
  font-weight:700;
  color:#666;
  text-transform:uppercase;
}

.jogovivo-escalacao-cabecalho .jogovivo-escalacao-col2,
.jogovivo-escalacao-cabecalho .jogovivo-escalacao-col3{
  text-align:center;
}

.jogovivo-escalacao-lista{
  border-top:0;
}

/* linha da lista */
.jogovivo-escalacao-item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 25px 25px;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid #D8E2EE;
}

.jogovivo-escalacao-item:hover {
background-color: #F1F5F9;
}

.jogovivo-escalacao-col1{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.jogovivo-escalacao-col2,
.jogovivo-escalacao-col3{
  display:flex;
  align-items:center;
  justify-content:center;
}

.jogovivo-escalacao-foto img{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:2px solid #FFF;
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
}

.jogovivo-escalacao-dados{
  flex:1;
  min-width:0;
}

.jogovivo-escalacao-apelido{
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  color:#013473;
}

.jogovivo-escalacao-nome{
  font-size:10px;
  font-weight:500;
  color:#666;
  text-transform:uppercase;
  line-height:1.2;
  margin-top:3px;
}

.jogovivo-escalacao-camisa{
  min-width:28px;
  text-align:center;
  font-size:13px;
  font-weight:600;
  color:#013473;
}

.jogovivo-escalacao-status{
  text-align:center;
}

.jogovivo-escalacao-status img{
  width:auto;
  height:auto;
  display:block;
  margin:0 auto;
}

.jogovivo-escalacao-tecnico{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top: 15px;
}

.jogovivo-escalacao-tecnico img{
  width:auto;
  height:26px;
}

.jogovivo-tecnico-texto{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}

.jogovivo-tecnico-label{
  font-size:11px;
  color:#666;
}

.jogovivo-tecnico-nome{
  font-size:12px;
  color:#013473;
  font-weight:600;
}

.jogovivo-escalacao-vazio{
  padding:20px 10px;
  text-align:center;
  font-size:13px;
  color:#999;
}

/* mobile */
@media (max-width:768px){

  .jogovivo-escalacao-bloco-pc{
    display:none;
  }


 .jogovivo-escalacao-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .jogovivo-escalacao-cabecalho{
    grid-template-columns:minmax(0, 1fr) 25px 25px;
    gap:8px;
    padding:8px 10px;
    font-size:10px;
  }


.jogovivo-escalacao-titulo-b {
 text-align: left;
}

.jogovivo-escalacao-titulo-b::after{
  left:0;
}

.jogovivo-escalacao-equipe-b{
  justify-content: start;
}


  .jogovivo-escalacao-item{
    grid-template-columns:minmax(0, 1fr) 25px 25px;
    gap:8px;
    padding:8px 10px;
  }

  .jogovivo-escalacao-col1{
    gap:8px;
  }

  .jogovivo-escalacao-foto img{
    width:46px;
    height:46px;
  }

  .jogovivo-escalacao-apelido{
    font-size:13px;
  }

  .jogovivo-escalacao-nome{
    font-size:9px;
  }

  .jogovivo-escalacao-camisa{
    font-size:12px;
  }

  .jogovivo-escalacao-status img{
    width:18px;
    height:18px;
  }

  .jogovivo-escalacao-tecnico{
    font-size:11px;
  }
}




/* =========================
   ARBITRAGEM
========================= */

.jogovivo-arbitragem-bloco-pc{
  margin-top:30px;
  padding-top:40px;
  border-top:1px solid #D8E2EE;
}

.jogovivo-arbitragem-topo{
  margin-bottom:15px;
}

.jogovivo-arbitragem-titulo{
  font-size:18px;
  color:#013473;
  margin-bottom:10px;
  font-weight:600;
  position:relative;
  padding-bottom:10px;
}

.jogovivo-arbitragem-titulo::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
}

.jogovivo-arbitragem-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.jogovivo-arbitragem-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 0px;
  background:#fff;
}

.jogovivo-arbitragem-foto{
  width:46px;
  height:46px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  background:#F3F6FA;
    border:2px solid #FFF;
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
}

.jogovivo-arbitragem-foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.jogovivo-arbitragem-dados{
  min-width:0;
}

.jogovivo-arbitragem-cargo{
  font-size:11px;
  color: #666;
  text-transform:uppercase;
  margin-bottom:4px;
  letter-spacing:.5px;
}

.jogovivo-arbitragem-nome{
  font-size:13px;
  color: #013473;
  font-weight:600;
  line-height:1.3;
  text-transform: uppercase;
}

@media (max-width: 768px){

.arbitropc {
  display: none;
}

.jogovivo-arbitragem-bloco-pc{
  margin-top: -40px;
  margin-bottom: 40px;
  border-top: none;
  padding-bottom: 20px;
  border-bottom:  1px solid #d0d3d6;
}


  .jogovivo-arbitragem-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .jogovivo-arbitragem-item {
  gap: none !important;
  padding: 0px;
  }

  .jogovivo-arbitragem-vazio {
  background:#F1F5F9;
  border-radius:14px;
  padding:16px;
  font-size:14px;
  font-weight:600;
  color:#013473;
  text-align:center;
}

}





/* NÃO MOSTRA NO PC */
.jogovivo-maisjogos-bloco{
  display:none;
}

@media (max-width:768px){

  .jogovivo-maisjogos-bloco{
    display:flex;
    flex-direction:column;
   
  }

  .jogovivo-maisjogos-card{
     position:relative;
    display:block;
    text-decoration:none;
    color:inherit;
    text-align:center;
    padding:  30px 0 20px 0 !important;
    background:transparent;
    border-bottom: 1px solid #D8E2EE;
  }

  .jogovivo-maisjogos-times{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    grid-template-areas:
      "brasao1 x brasao2"
      "nome1   vazio nome2";
    column-gap:12px;
    row-gap:10px;
    align-items:center;
    width:100%;
    max-width:340px;
    margin:0 auto 18px;
  }

  .jogovivo-maisjogos-brasao-a{
    display:flex;
    justify-content:right;
    align-items:right;
  }

    .jogovivo-maisjogos-brasao-b{
    display:flex;
    justify-content:left;
    align-items:left;
  }

  .jogovivo-maisjogos-brasao:nth-child(1){
    grid-area:brasao1;
  }

  .jogovivo-maisjogos-x{
    grid-area:x;
    font-size:15px;
    line-height:1;
    font-weight:400;
    color:#666;
    text-transform:lowercase;
  }

  .jogovivo-maisjogos-brasao:nth-child(3){
    grid-area:brasao2;
  }

  .jogovivo-maisjogos-brasao-a img{
    width:42px;
    height:42px;
    object-fit:contain;
    display:block;
  }

    .jogovivo-maisjogos-brasao-b img{
    width:42px;
    height:42px;
    object-fit:contain;
    display:block;
  }


  .jogovivo-maisjogos-nome-a{
    grid-area:nome1;
  }

  .jogovivo-maisjogos-vazio-centro{
    grid-area:vazio;
  }

  .jogovivo-maisjogos-nome-b{
    grid-area:nome2;
  }

  .jogovivo-maisjogos-nome-a{
    font-size:13px;
    font-weight:600;
    color:#013473;
    text-align:right;
    word-break:break-word;
    text-transform: uppercase;
  }


    .jogovivo-maisjogos-nome-b{
    font-size:13px;
    font-weight:600;
    color:#013473;
    text-align:left;
    word-break:break-word;
    text-transform: uppercase;
  }



  .jogovivo-maisjogos-campfase{
    font-size:14px;
    font-weight:500;
    color:#FFCC00;
    text-transform:uppercase;
    text-align:center;
    margin-bottom:15px;
    margin-top: -10px;
  }

  .jogovivo-maisjogos-campfase span {
    display: block;
    width: 120px;
    height: 2px;
    background: #FFCC00;
    margin: 5px auto 0;
}

  .jogovivo-maisjogos-datahora{
    font-size:14px;
    font-weight:400;
    color:#666;
    text-align:center;
    margin-bottom:8px;
  }

  .jogovivo-maisjogos-local{
    font-size:14px;
    line-height:1.6;
    color:#666;
    text-align:center;
  }

  .jogovivo-maisjogos-vazio{
    text-align:center;
    font-size:16px;
    color:#666;
    padding:20px 10px;
  }


  .jogovivo-maisjogos-icone{
  position:absolute;
  top: 0px;
  right:0px;
  width:26px;
  height:26px;
  border-radius: 0 0 0 50%;
  background: #013473;
  color:#fff;
  font-size:20px;
  font-weight:700;
  line-height:26px;
  text-align:center;
  }

}




/* =========================
   ADMIN SÚMULA
========================= */
.admsumula-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

.admsumula-topo{
  margin-top:30px;
  border-bottom:1px solid #e5e5e5;
  padding-bottom:20px;
  overflow:visible;
}


.admsumula-titulo h2{
  color:#013473;
  margin-bottom:20px;
  font-size:40px;
  font-weight:500;
  letter-spacing:2px;
  position:relative;
  padding-bottom:10px;
  margin-top:10px;
}

.admsumula-titulo h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
}

.admsumula-container .admsumula-titulo-mobile h2{
  display:none;
}

.admsumula-area{
  max-width:460px;
  margin:0px auto 80px;
}

.admsumula-card{
  background:#fff;
  padding:30px 28px;

}

.admsumula-card h3{
  margin:0 0 8px;
  font-size:26px;
  color:#013473;
  font-weight:600;
}

.admsumula-card p{
  margin:0 0 25px;
  color:#64748B;
  font-size:15px;
  line-height:1.5;
}

.admsumula-erro{
  background:#FFF1F2;
  border:1px solid #FECDD3;
  color:#BE123C;
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  margin-bottom:18px;
}

.admsumula-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.admsumula-campo label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:600;
  color:#334155;
}

.admsumula-campo input{
  width:100%;
  height:48px;
  border:1px solid #CBD5E1;
  border-radius:12px;
  padding:0 14px;
  font-size:15px;
  color:#0F172A;
  background:#fff;
  box-sizing:border-box;
  outline:none;
  transition:all .2s ease;
}

.admsumula-campo input:focus{
  border-color:#013473;
  box-shadow:0 0 0 3px rgba(1,52,115,0.10);
}

.admsumula-acoes{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:5px;
  flex-wrap:wrap;
}

.admsumula-btn{
  border:0;
  background:#013473;
  color:#fff;
  height:48px;
  padding:0 26px;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
}

.admsumula-btn:hover{
  transform:translateY(-1px);
}

.admsumula-link{
  color:#013473;
  text-decoration:none;
  font-size:14px;
  font-weight:500;
}

.admsumula-link:hover{
  text-decoration:underline;
}

@media (max-width:768px){

  .admsumula-container .admsumula-titulo-mobile h2{
    display:block;
    font-size:19px;
    color:#013473;
    font-weight:500;
    letter-spacing:2px;
    position:relative;
    padding-bottom:10px;
    margin-bottom:-30px;
    background-color:#F1F5F9;
    padding:15px 20px 20px 20px;
    top:0 !important;
    margin-left:-20px;
    width:95%;
  }

  .admsumula-container .admsumula-titulo-mobile h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:60px;
    height:3px;
    background-color:#FFCC00;
    border-radius:2px;
    margin-left:20px !important;
    margin-bottom:10px !important;
  }

  .admsumula-titulo{
    display:none !important;
  }

  .admsumula-topo{
    grid-template-columns:1fr;
    gap:20px;
    border-bottom: none;
  }

  .admsumula-area{
    margin:0px auto 60px;
  }

  .admsumula-card{
    padding:22px 18px;
    border-radius:16px;
  }

  .admsumula-card h3{
    font-size:22px;
  }

  .admsumula-acoes{
    flex-direction:column;
    align-items:stretch;
  }

  .admsumula-btn{
    width:100%;
  }

  .admsumula-link{
    text-align:center;
    display:block;
    width:100%;
  }

  }



  /* =========================
   ADMIN CLUBES
========================= */
.admclubes-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

.admclubes-topo{
  margin-top:30px;
  border-bottom:1px solid #e5e5e5;
  padding-bottom:20px;
  overflow:visible;
}

.admclubes-titulo h2{
  color:#013473;
  margin-bottom:20px;
  font-size:40px;
  font-weight:500;
  letter-spacing:2px;
  position:relative;
  padding-bottom:10px;
  margin-top:10px;
}

.admclubes-titulo h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  background-color:#FFCC00;
  border-radius:2px;
}

.admclubes-container .admclubes-titulo-mobile h2{
  display:none;
}

.admclubes-area{
  max-width:460px;
  margin:0px auto 80px;
}

.admclubes-card{
  background:#fff;
  padding:30px 28px;
}

.admclubes-card h3{
  margin:0 0 8px;
  font-size:26px;
  color:#013473;
  font-weight:600;
}

.admclubes-card p{
  margin:0 0 25px;
  color:#64748B;
  font-size:15px;
  line-height:1.5;
}

.admclubes-erro{
  background:#FFF1F2;
  border:1px solid #FECDD3;
  color:#BE123C;
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  margin-bottom:18px;
}

.admclubes-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.admclubes-campo label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:600;
  color:#334155;
}

.admclubes-campo input,
.admclubes-campo select{
  width:100%;
  height:48px;
  border:1px solid #CBD5E1;
  border-radius:12px;
  padding:0 14px;
  font-size:15px;
  color:#0F172A;
  background:#fff;
  box-sizing:border-box;
  outline:none;
  transition:all .2s ease;
}

.admclubes-campo select{ 
  text-transform: uppercase;
}


.admclubes-campo input:focus,
.admclubes-campo select:focus{
  border-color:#013473;
  box-shadow:0 0 0 3px rgba(1,52,115,0.10);
}

.admclubes-acoes{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:5px;
  flex-wrap:wrap;
}

.admclubes-btn{
  border:0;
  background:#013473;
  color:#fff;
  height:48px;
  padding:0 26px;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
}

.admclubes-btn:hover{
  transform:translateY(-1px);
}

.admclubes-link{
  color:#013473;
  text-decoration:none;
  font-size:14px;
  font-weight:500;
}

.admclubes-link:hover{
  text-decoration:underline;
}

@media (max-width:768px){

  .admclubes-container .admclubes-titulo-mobile h2{
    display:block;
    font-size:19px;
    color:#013473;
    font-weight:500;
    letter-spacing:2px;
    position:relative;
    padding-bottom:10px;
    margin-bottom:-30px;
    background-color:#F1F5F9;
    padding:15px 20px 20px 20px;
    top:0 !important;
    margin-left:-20px;
    width:95%;
  }

  .admclubes-container .admclubes-titulo-mobile h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:60px;
    height:3px;
    background-color:#FFCC00;
    border-radius:2px;
    margin-left:20px !important;
    margin-bottom:10px !important;
  }

  .admclubes-titulo{
    display:none !important;
  }

  .admclubes-topo{
    grid-template-columns:1fr;
    gap:20px;
    border-bottom:none;
  }

  .admclubes-area{
    margin:0px auto 60px;
  }

  .admclubes-card{
    padding:22px 18px;
    border-radius:16px;
  }

  .admclubes-card h3{
    font-size:22px;
  }

  .admclubes-acoes{
    flex-direction:column;
    align-items:stretch;
  }

  .admclubes-btn{
    width:100%;
  }

  .admclubes-link{
    text-align:center;
    display:block;
    width:100%;
  }
}



.noti-compartilhar {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Alinha todo o conteúdo à DIREITA */
    flex-wrap: wrap; 
    gap: 10px;
    margin: 20px 0;
    padding: 10px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    width: 100%;
}

.grupo-icones {
    display: flex;
    gap: 10px;
    align-items: center;
}


.noti-compartilhar a {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    color: white !important;
}




.noti-compartilhar span {
    color: #666;
    font-size: 13px;
}

.noti-botoes-redes {
    display: flex;
    gap: 10px;
}

.btn-share {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.btn-share:hover {
    transform: scale(1.1);
    opacity: 0.9;
    color: #fff;
}

.whatsapp { background-color: #25D366; }
.facebook { background-color: #1877F2; }
.x-twitter { background-color: #000000; }