/* Sistema de design premium — Home + Loja. Ficheiro aditivo: usa os tokens de cor já
   consolidados em variables.css (agora verde/azul-marinho/dourado do escudo do clube),
   não redefine nada do CSS já existente. */

/* ---------- Animações ---------- */
@keyframes mascote-bounce {
    0%, 100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-14px) rotate(2deg);
    }
}

@keyframes cta-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.55);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(var(--color-primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0);
    }
}

@keyframes cart-bounce {
    0%, 100% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.35) rotate(-8deg);
    }

    60% {
        transform: scale(1.1) rotate(6deg);
    }
}

.cart-bounce {
    animation: cart-bounce 0.6s ease;
}

/* ---------- Mascote flutuante (escudo do clube reaproveitado) ---------- */
.mascote-flutuante {
    animation: mascote-bounce 3.2s ease-in-out infinite;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

/* ---------- Botão CTA premium ---------- */
.btn-premium {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 34px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: none;
    text-decoration: none;
    transition: transform 0.2s ease;
}

    .btn-premium:hover {
        transform: translateY(-3px) scale(1.03);
        color: #fff;
    }

/* Reservado para o(s) CTA principal(is) de cada página — não aplicar a botões repetidos
   em grelha (cartões de produto), para não sobrecarregar a experiência. */
.btn-premium-pulse {
    animation: cta-pulse 2.4s ease-in-out infinite;
}

    .btn-premium-pulse:hover {
        animation: none;
    }

.btn-premium-gold {
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: var(--color-secondary-dark);
}

/* ---------- Breadcrumbs (cabeçalho das páginas internas: Notícias, Social, etc.) ----------
   Era uma barra plana azul-clara sem nada de "premium" — passa a usar o mesmo fundo
   escuro com brilho verde já estabelecido no resto do site. Textura de favo de mel
   (2026-09-09, identidade Azul Puro/Verde Floresta/Amarelo Mel/Branco) acrescentada
   como camada de topo — ver .about-img-fallback para a nota completa sobre a ordem
   das camadas ter de vir primeiro. Aparece em todas as páginas internas, por isso é
   o ponto mais visível desta identidade nova, ao lado do hero da home. */
.breadcrumbs {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='103.92' height='180' viewBox='0 0 103.92 180'%3E%3Cpolygon points='51.96,30 0,60 -51.96,30 -51.96,-30 0,-60 51.96,-30' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3Cpolygon points='103.92,120 51.96,150 0,120 0,60 51.96,30 103.92,60' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3C/svg%3E") 0 0/103.92px 180px repeat,
        radial-gradient(circle at 80% 15%, rgba(var(--color-blue-pure-rgb), 0.2), transparent 45%),
        radial-gradient(circle at 15% 20%, rgba(var(--color-primary-rgb), 0.3), transparent 50%),
        linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    padding: 34px 0;
}

    .breadcrumbs h2 {
        color: #fff;
        font-weight: 700;
    }

    .breadcrumbs ol li a {
        color: rgba(255, 255, 255, 0.7);
    }

        .breadcrumbs ol li a:hover {
            color: var(--color-gold);
        }

    .breadcrumbs ol li:last-child {
        color: var(--color-gold-light);
        font-weight: 600;
    }

        .breadcrumbs ol li + li::before {
            color: rgba(255, 255, 255, 0.4);
        }

/* ---------- Cartões de membros (Direcção/Jogadores/Equipa Técnica) ---------- */
.team .member,
.team .team-member {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .team .member:hover,
    .team .team-member:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px -14px rgba(6, 18, 48, 0.35);
    }

/* Movido de Views/Clube/Jogadores.cshtml.css (2026-09-16) — passou a ser reutilizado
   também em Views/Jogo/Convocados.cshtml, e CSS isolation do Razor só aplica um
   .cshtml.css à própria view que o declara; precisava de ficar global para as duas
   partilharem o mesmo cartão de jogador. */
.team .team-member .member-img {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

    .team .team-member .member-img img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        object-position: top center;
        display: block;
        background: linear-gradient(160deg, var(--color-secondary), var(--color-secondary-dark));
    }

/* Número da camisola — selo grande sobre o canto da foto */
.jogador-numero {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: var(--color-secondary-dark);
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(6, 18, 48, 0.35);
}

.jogador-posicao {
    display: inline-block;
    margin: 6px 0 8px;
    padding: 4px 14px;
    border-radius: 20px;
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary-dark);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.jogador-idade {
    color: var(--color-gray);
    font-size: 14px;
    margin: 0;
}

/* ---------- Cartão de jogador como link para o perfil (2026-09-18) — o cartão inteiro
   passou de <div> a <a>, por isso precisa de anular o sublinhado/cor de link por
   omissão do browser antes das regras .team-member acima se aplicarem normalmente. ---------- */
.jogador-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.jogador-card-perfil-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 14px;
    border-radius: 20px;
    background: var(--color-secondary);
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700;
    transition: background-color .2s ease;
}

.jogador-card-link:hover .jogador-card-perfil-link {
    background: var(--color-primary);
}

.team .team-member .social {
    position: absolute;
    left: 0;
    top: -18px;
    right: 0;
    opacity: 0;
    transition: ease-in-out 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .team .team-member .social a {
        transition: color 0.3s;
        color: var(--color-white);
        background: var(--color-primary);
        margin: 0 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        transition: 0.3s;
    }

        .team .team-member .social a i {
            line-height: 0;
            font-size: 16px;
        }

        .team .team-member .social a:hover {
            background: var(--color-primary-light);
        }

    .team .team-member .social i {
        font-size: 18px;
        margin: 0 2px;
    }

.team .team-member .member-info {
    padding: 30px 15px;
    text-align: center;
    box-shadow: 0px 2px 15px rgba(var(--color-black-rgb), 0.1);
    background: var(--color-white);
    margin: -50px 20px 0 20px;
    position: relative;
    border-radius: 8px;
}

    .team .team-member .member-info h4 {
        font-weight: 400;
        margin-bottom: 5px;
        font-size: 24px;
        color: var(--color-secondary);
    }

    .team .team-member .member-info span {
        display: block;
        font-size: 16px;
        font-weight: 400;
        color: var(--color-gray);
    }

    .team .team-member .member-info p {
        font-style: italic;
        font-size: 14px;
        line-height: 26px;
        color: var(--color-gray);
    }

.team .team-member:hover .social {
    opacity: 1;
}

/* ---------- Header/menu — acento premium ----------
   Os 3-4 pills sólidos verdes (Pontuação/Carrinho/Conta) ao lado uns dos
   outros ficavam pesados e repetitivos, e o nome do sócio (sem white-space:
   nowrap nem limite) partia-se em 3 linhas espremidas dentro do pill. */
.btn-book-a-table {
    white-space: nowrap;
}

.btn-book-a-table-ghost {
    background: transparent;
    color: var(--color-secondary);
    border: 1.5px solid #dfe4ec;
    box-shadow: none;
}

    .btn-book-a-table-ghost:hover {
        background: rgba(var(--color-primary-rgb), 0.08);
        color: var(--color-primary-dark);
        box-shadow: none;
    }

.btn-book-a-table-icon {
    padding: 8px 14px;
}

#btn-activar-notificacoes.notificacoes-activas {
    background: rgba(var(--color-gold-rgb), 0.14);
    border-color: var(--color-gold);
    color: var(--color-gold-dark, var(--color-secondary));
}


#header {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--color-primary), var(--color-gold), var(--color-secondary)) 1;
}

#topbar {
    background: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-dark)) !important;
}

    #topbar .contact-info i a,
    #topbar .contact-info i span {
        color: rgba(255, 255, 255, 0.85);
    }

.navbar > ul > li > a:before {
    background-color: var(--color-gold) !important;
}

/* ---------- .btn-primary do Bootstrap ----------
   O bootstrap.min.css desta versão tem as cores do .btn-primary escritas em hex fixo
   (#0d6efd) em vez de var(--bs-primary) — por isso trocar os tokens de cor não lhe
   tocava, e ficava sempre azul Bootstrap em vez do verde do clube. */
.btn-primary {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--color-primary-dark) !important;
        border-color: var(--color-primary-dark) !important;
        color: #fff;
    }

/* Mesmo problema nas variantes "outline" — usadas em Calendário, Pontuação,
   Contacto, Bilheteria, Notícias/Details, formulário de sócio, etc. */
.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #fff !important;
    }

.btn-outline-secondary {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-secondary) !important;
        color: #fff !important;
    }

/* ---------- Hero premium (secção escura de impacto) ---------- */
.hero-premium {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='103.92' height='180' viewBox='0 0 103.92 180'%3E%3Cpolygon points='51.96,30 0,60 -51.96,30 -51.96,-30 0,-60 51.96,-30' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3Cpolygon points='103.92,120 51.96,150 0,120 0,60 51.96,30 103.92,60' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E") 0 0/103.92px 180px repeat,
        radial-gradient(circle at 85% 12%, rgba(var(--color-blue-pure-rgb), 0.22), transparent 45%),
        radial-gradient(circle at 20% 20%, rgba(var(--color-primary-rgb), 0.25), transparent 45%),
        linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-dark) 60%, #000 130%);
    position: relative;
    overflow: hidden;
}

    /* Textura de grelha de pontos, muito subtil — é isto que separa um fundo
       liso "template" de um fundo com profundidade e acabamento premium. */
    .hero-premium::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.5px, transparent 1.5px);
        background-size: 26px 26px;
        opacity: 0.5;
        pointer-events: none;
    }

    .hero-premium::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent 40%);
        pointer-events: none;
    }

.hero-premium-badge {
    display: inline-block;
    background: rgba(var(--color-gold-rgb), 0.15);
    border: 1px solid var(--color-gold);
    color: var(--color-gold-light);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 16px;
    border-radius: 30px;
}

.hero-premium-title {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.55);
}

.hero-premium-subtitle {
    color: rgba(255, 255, 255, 0.75);
}

/* ---------- Carrossel de banners da Home (#hero .mySwiper) —
   nenhum CSS do site alguma vez estilizou isto (a folha de estilos que definia
   #hero/.parallax-bg/.title/.subtitle nunca chegou a ser referenciada em _Layout.cshtml),
   por isso as slides colapsavam sem imagem de fundo visível nem altura própria. ---------- */
#hero.mySwiper {
    margin-top: 20px;
    border-radius: 16px;
    overflow: hidden;
}

#hero .swiper-slide {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 16px;
}

    #hero .swiper-slide::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, rgba(6, 18, 48, 0.92) 0%, rgba(6, 18, 48, 0.55) 55%, rgba(6, 18, 48, 0.25) 100%);
        z-index: 1;
    }

#hero .swiper-slide > .row {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
}

#hero .parallax-bg,
#hero .parallax-only {
    position: absolute;
    inset: 0;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat;
    z-index: 0;
}

#hero .title {
    color: #fff;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

#hero .subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 17px;
}

#hero .swiper-button-next,
#hero .swiper-button-prev {
    color: var(--color-gold);
}

#hero .swiper-pagination-progressbar {
    background: rgba(255, 255, 255, 0.25);
}

    #hero .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
        background: var(--color-gold);
    }

/* Indicador decorativo sem JS a controlá-lo nem CSS próprio — ficaria como um
   círculo sem estilo a flutuar sobre o hero, por isso fica escondido. */
#hero .autoplay-progress {
    display: none;
}

@media (max-width: 768px) {
    #hero .swiper-slide {
        min-height: 320px;
    }

    #hero .title {
        font-size: 28px;
    }
}

/* ---------- Contador regressivo premium ---------- */
.contagem-premium {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(6, 18, 48, 0.35);
}

    .contagem-premium .count-box {
        text-align: center;
    }

        .contagem-premium .count-box i {
            color: var(--color-gold);
            font-size: 28px;
        }

        .contagem-premium .count-box span {
            display: block;
            font-size: 42px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .contagem-premium .count-box p {
            color: var(--color-secondary);
            margin: 4px 0 0;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
        }

/* ---------- Tabela de classificação premium ---------- */
.classificacao-premium thead {
    background: linear-gradient(90deg, var(--color-primary-dark), var(--color-secondary));
    color: #fff;
}

.tabela-premium thead {
    background: linear-gradient(90deg, var(--color-primary-dark), var(--color-secondary));
    color: #fff;
}

.classificacao-premium tbody tr:first-child {
    background: rgba(var(--color-gold-rgb), 0.12);
    font-weight: 700;
}

    .classificacao-premium tbody tr:first-child td:first-child {
        box-shadow: inset 4px 0 0 var(--color-gold);
    }

/* ---------- Tabela de classificação — cartões empilhados no mobile ----------
   Scroll horizontal (.table-responsive) obrigava a arrastar para ler a
   tabela inteira; abaixo de 767px cada linha vira um cartão próprio, com o
   clube como "título" (destacado, sempre no topo — via order, sem mexer na
   ordem real das colunas do desktop) e o resto como pares rótulo/valor. */
@media (max-width: 767px) {
    .classificacao-premium thead {
        display: none;
    }

    .classificacao-premium,
    .classificacao-premium tbody {
        display: block;
        width: 100%;
    }

    .classificacao-premium tr {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 14px;
        padding: 4px 16px 10px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 8px 20px -12px rgba(6, 18, 48, 0.25);
    }

        .classificacao-premium tbody tr:first-child {
            box-shadow: 0 8px 20px -12px rgba(6, 18, 48, 0.25), inset 0 0 0 2px var(--color-gold);
        }

            .classificacao-premium tbody tr:first-child td:first-child {
                box-shadow: none;
            }

    .classificacao-premium td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
        border: none !important;
        text-align: right;
    }

        .classificacao-premium td:not(:last-child) {
            border-bottom: 1px dashed rgba(11, 31, 75, 0.1) !important;
        }

        .classificacao-premium td::before {
            content: attr(data-label);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: rgba(11, 31, 75, 0.5);
            text-align: left;
        }

    /* O clube é o cartão-título: primeiro visualmente (order, sem tocar no
       DOM/thead), maior, sem rótulo (a foto+nome já identifica sozinho) e com
       uma barra inferior a separá-lo do resto dos dados. */
    .classificacao-premium td.classificacao-clube {
        order: -1;
        justify-content: flex-start;
        padding: 12px 0;
        margin-bottom: 4px;
        border-bottom: 2px solid rgba(11, 31, 75, 0.08) !important;
        font-weight: 700;
        font-size: 15px;
    }

        .classificacao-premium td.classificacao-clube::before {
            content: none;
        }

        /* Tamanho do emblema definido pelo próprio <ClubeBadge TamanhoPx="..." /> — não
           overridar aqui (o wrapper .clube-badge já vem com width/height inline fixos). */
}

/* ---------- Upgrade premium dos cartões já existentes na Loja
   (Bilheteria/Carrinho/Checkout/MinhasEncomendas/ProdutoDetalhe usam .pricing-item) ---------- */
.pricing .pricing-item {
    box-shadow: 0 10px 30px -8px rgba(6, 18, 48, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .pricing .pricing-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 22px 45px -10px rgba(6, 18, 48, 0.35);
    }

.pricing .pricing-header {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='103.92' height='180' viewBox='0 0 103.92 180'%3E%3Cpolygon points='51.96,30 0,60 -51.96,30 -51.96,-30 0,-60 51.96,-30' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3Cpolygon points='103.92,120 51.96,150 0,120 0,60 51.96,30 103.92,60' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") 0 0/103.92px 180px repeat,
        linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
}

    /* <p>/<strong> soltos no cabeçalho (Quantidade/Subtotal no Carrinho/Checkout) herdavam a
       cor de texto cinza-escura do body — quase invisíveis sobre este fundo escuro. */
    .pricing .pricing-header p,
    .pricing .pricing-header strong {
        color: rgba(255, 255, 255, 0.9);
    }

.pricing .featured {
    border-color: var(--color-gold);
}

    .pricing .featured .pricing-header {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='103.92' height='180' viewBox='0 0 103.92 180'%3E%3Cpolygon points='51.96,30 0,60 -51.96,30 -51.96,-30 0,-60 51.96,-30' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3Cpolygon points='103.92,120 51.96,150 0,120 0,60 51.96,30 103.92,60' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") 0 0/103.92px 180px repeat,
            linear-gradient(135deg, var(--color-gold), var(--color-primary-dark)) !important;
    }

.pricing .buy-btn {
    border-radius: 50px;
    font-weight: 700;
}

/* ---------- Carrinho ---------- */
.pricing .carrinho-item {
    padding-bottom: 22px;
}

.carrinho-item-detalhe {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 16px 4px;
    border-bottom: 1px solid #eef1f6;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--color-gray);
}

    .carrinho-item-detalhe strong {
        color: var(--color-secondary);
    }

.carrinho-remover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--color-gray);
    font-weight: 600;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 20px;
    transition: 0.2s;
}

    .carrinho-remover:hover {
        color: #dc3545;
        background: rgba(220, 53, 69, 0.08);
    }

.carrinho-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    background: linear-gradient(120deg, var(--color-secondary), var(--color-secondary-dark));
    border-radius: 16px;
    padding: 26px 34px;
    box-shadow: 0 20px 40px -16px rgba(6, 18, 48, 0.4);
}

.carrinho-resumo-label {
    display: block;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.carrinho-resumo-valor {
    display: block;
    color: #fff;
    font-size: 32px;
    font-weight: 800;
}

.carrinho-resumo-nota {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    margin-top: 6px;
    max-width: 360px;
}

/* ---------- Minhas Encomendas ----------
   A referência (ex.: ENC-202608-4732BCF6) herdava o font-size:36px do
   .pricing h3 (pensado para nomes de produto curtos) e partia a meio da
   palavra; o estado vinha directo do enum em PascalCase sem espaço
   ("PendentePagamento"). */
.encomenda-referencia {
    font-size: 19px !important;
    letter-spacing: 0.02em;
    word-break: break-word;
}

.encomenda-status {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.encomenda-status-pendente {
    background: rgba(var(--color-gold-rgb), 0.22);
    color: var(--color-gold-light);
}

.encomenda-status-ok {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.encomenda-status-cancelada {
    background: rgba(220, 53, 69, 0.25);
    color: #ffb3bb;
}

/* ---------- Cartão de produto premium (Marketplace/ProdutoDetalhe) ---------- */
.produto-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 26px -10px rgba(6, 18, 48, 0.25);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .produto-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 26px 50px -12px rgba(6, 18, 48, 0.35);
    }

.produto-card-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--color-branco-azul);
}

    .produto-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

.produto-card:hover .produto-card-img img {
    transform: scale(1.08);
}

.produto-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.produto-card-badge-desconto {
    background: var(--color-gold);
    color: var(--color-secondary-dark);
}

.produto-card-badge-esgotado {
    background: var(--color-secondary);
    color: #fff;
}

/* ---------- Carrossel "Novidades na Loja" (Home/Index.cshtml) ----------
   .produto-card normalmente vive dentro de uma coluna Bootstrap (Marketplace.cshtml),
   que lhe dá a largura; aqui vive num swiper-slide (slidesPerView:'auto'), que
   precisa de uma largura explícita no próprio slide. */
.produto-home-slide {
    width: 260px;
}

@media (max-width: 575px) {
    .produto-home-slide {
        width: 220px;
    }
}

/* A secção em si nunca tinha padding/fundo próprios — ficava espremida
   contra as secções vizinhas, com o botão "Ver loja completa" a sobrar
   sozinho num espaço em branco desproporcional por baixo do carrossel. */
.produtos-home-section {
    padding: 60px 0 70px;
}

/* ---------- Botão "ver mais" — usado nos CTAs de fecho de secção da Home
   (Ver todas as notícias / Ver loja completa). Standalone em vez de reaproveitar
   .btn-outline-primary (usado em várias páginas para contextos diferentes,
   como Calendário/Contacto) para poder ter o seu próprio visual, pensado para
   fechar uma secção com impacto: pill grande, hover a preencher com gradiente
   e a deslizar a seta, consistente com .btn-premium mas em versão "outline". */
.btn-ver-mais {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 32px;
    border-radius: 50px;
    border: 2px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

    .btn-ver-mais i {
        transition: transform 0.25s ease;
    }

    .btn-ver-mais:hover {
        background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
        border-color: transparent;
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 14px 30px -10px rgba(var(--color-primary-rgb), 0.55);
    }

        .btn-ver-mais:hover i {
            transform: translateX(5px);
        }

.produto-card-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
}

    .produto-card-body .produto-categoria {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-primary-dark);
        font-weight: 700;
    }

    .produto-card-body h3 {
        font-size: 18px;
        margin: 0;
    }

        .produto-card-body h3 a {
            color: var(--color-default);
        }

    .produto-card-body .produto-preco {
        font-size: 24px;
        font-weight: 800;
        color: var(--color-secondary);
        margin-top: auto;
    }

        .produto-card-body .produto-preco span {
            font-size: 14px;
            font-weight: 400;
            color: var(--color-gray);
        }

/* ---------- Notícias: "Ler Mais" — deixa de ser um botão sólido genérico e
   passa a um link editorial com sublinhado a crescer e seta a deslizar. ---------- */
.blog .posts-list .read-more a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    padding: 0;
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .blog .posts-list .read-more a span {
        position: relative;
    }

        .blog .posts-list .read-more a span::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 100%;
            height: 2px;
            background: var(--color-primary);
            transform: scaleX(0.3);
            transform-origin: left;
            transition: transform 0.3s ease;
        }

    .blog .posts-list .read-more a i {
        transition: transform 0.3s ease;
    }

    .blog .posts-list .read-more a:hover span::after {
        transform: scaleX(1);
    }

    .blog .posts-list .read-more a:hover i {
        transform: translateX(5px);
    }

/* ---------- Notícias: Tags da sidebar — eram rectângulos com contorno
   plano; passam a "nuvem de tags" com pastilhas e prefixo #. ---------- */
.blog .sidebar .tags ul a {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: none;
    border-radius: 20px;
    background: rgba(var(--color-primary-rgb), 0.09);
    color: var(--color-primary-dark);
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

    .blog .sidebar .tags ul a::before {
        content: "#";
        opacity: 0.55;
        font-weight: 700;
    }

    .blog .sidebar .tags ul a:hover {
        background: var(--color-primary);
        color: #fff;
        border: none;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px -6px rgba(var(--color-primary-rgb), 0.55);
    }

        .blog .sidebar .tags ul a:hover span {
            color: rgba(255, 255, 255, 0.85);
        }

/* ---------- Loja: barra de pesquisa/filtro/ordenação ---------- */
.loja-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 26px;
}

.loja-filtros-pesquisa {
    position: relative;
    flex: 1 1 240px;
}

    .loja-filtros-pesquisa i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-secondary-light, #8f9fae);
    }

    .loja-filtros-pesquisa input {
        width: 100%;
        padding: 10px 14px 10px 38px;
        border-radius: 10px;
        border: 1px solid #dfe4ec;
        font-size: 14px;
    }

        .loja-filtros-pesquisa input:focus {
            outline: none;
            border-color: var(--color-primary);
        }

.loja-filtros select {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #dfe4ec;
    font-size: 14px;
    background: #fff;
    min-width: 180px;
}

    .loja-filtros select:focus {
        outline: none;
        border-color: var(--color-primary);
    }

#loja-sem-resultados {
    padding: 30px 0;
    color: var(--color-secondary-light, #8f9fae);
    font-weight: 600;
}

/* ---------- Hero estático simples (Parceiros, Modalidades — sem swiper) ---------- */
.hero-premium-static {
    /* Dot-grid trocado pelo padrão de favo de mel (2026-09-09) para unificar a
       textura em todo o site — era o único sítio, ao lado de .app-download-hero,
       ainda a usar pontos em vez de hexágonos. */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='103.92' height='180' viewBox='0 0 103.92 180'%3E%3Cpolygon points='51.96,30 0,60 -51.96,30 -51.96,-30 0,-60 51.96,-30' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3Cpolygon points='103.92,120 51.96,150 0,120 0,60 51.96,30 103.92,60' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3C/svg%3E") 0 0/103.92px 180px repeat,
        radial-gradient(circle at 15% 20%, rgba(var(--color-primary-rgb), 0.3), transparent 50%),
        linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}

    .hero-premium-static h1,
    .hero-premium-static h2 {
        color: #fff;
    }

    .hero-premium-static p,
    .hero-premium-static h2:not(:first-child) {
        color: rgba(255, 255, 255, 0.8);
    }

    .hero-premium-static .btn-book-a-table {
        margin-left: 0;
        margin-right: 16px;
    }

    /* O botão par (Candidatar-se/Consultar) vivia num .d-flex sem
       flex-wrap — em ecrãs estreitos os dois lado a lado ultrapassavam a
       largura do ecrã e saíam pela borda. Em telemóvel empilham/quebram
       normalmente, com gap a substituir a margem fixa entre eles. */
    @media (max-width: 576px) {
        .hero-premium-static .d-flex {
            flex-wrap: wrap;
            gap: 12px;
            width: 100%;
        }

        .hero-premium-static .btn-book-a-table {
            margin: 0;
            flex: 1 1 auto;
            text-align: center;
            justify-content: center;
        }
    }

/* ---------- Separadores (nav-tabs) — Calendário/Pontuação/História ---------- */
.nav-tabs {
    border-bottom: 2px solid #e5e9f0;
}

    .nav-tabs .nav-link {
        border: none;
        color: var(--color-secondary);
        font-weight: 600;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        transition: 0.2s;
    }

        .nav-tabs .nav-link:hover {
            border-color: rgba(var(--color-primary-rgb), 0.4);
            color: var(--color-primary);
        }

        .nav-tabs .nav-link.active {
            color: var(--color-primary);
            border-color: var(--color-primary);
            background: transparent;
        }

/* ---------- Botões de submissão sem classe própria (Login, Consultar) ---------- */
.php-email-form button[type="submit"]:not(.btn-premium):not(.btn-primary) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 34px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border: none;
    transition: transform 0.2s ease;
}

    .php-email-form button[type="submit"]:not(.btn-premium):not(.btn-primary):hover {
        transform: translateY(-2px);
        color: #fff;
    }

/* O antigo #FormCandidatura fieldset/legend (cartão cinza-claro + legenda em
   "pill") saiu daqui — Socio.cshtml (a única página com id="FormCandidatura")
   ganhou identidade própria em .socio-form-seccao (ver bloco mais abaixo,
   "Formulário de candidatura a sócio"). Mantê-lo aqui só criava um conflito de
   especificidade invisível: um selector com #id bate sempre uma classe, por
   mais "certa" que a classe estivesse — foi assim que a legenda continuava a
   sair em pill verde e os campos a perder o padding-left reservado ao ícone,
   mesmo com as regras novas aparentemente correctas. */

/* ---------- Página de autenticação (Login/OTP) — antes era uma página quase
   em branco com um cartão pequeno a flutuar sozinho no meio; agora tem um
   fundo com textura suave e a mascote como âncora visual. ---------- */
.auth-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 85% 10%, rgba(var(--color-gold-rgb), 0.12), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(var(--color-primary-rgb), 0.1), transparent 40%),
        var(--color-branco-azul);
}

.auth-page-mascote {
    display: block;
    width: 72px;
    margin: 0 auto 6px;
}

/* ---------- Campos de formulário — nunca tinham sido estilizados em lado
   nenhum do site (só o Bootstrap "de fábrica": borda cinza fina, cantos
   quase rectos, sem sombra) — usados em Login/OTP/Contacto/Sócio/Consultar. */
.form-control,
.form-select,
.php-email-form input:not([type="hidden"]):not([type="submit"]),
.php-email-form textarea {
    border: 1.5px solid #e2e7f0;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: #fbfcfe;
}

.form-control:focus,
.form-select:focus,
.php-email-form input:not([type="hidden"]):not([type="submit"]):focus,
.php-email-form textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.12);
    background-color: #fff;
    outline: none;
}

.input-group-text {
    border: 1.5px solid #e2e7f0;
    border-right: none;
    border-radius: 10px 0 0 10px;
    background: #f3f6fb;
    color: var(--color-primary-dark);
}

.input-group .form-control {
    border-radius: 0 10px 10px 0;
}

/* ---------- Cartão de autenticação (Login/OTP) ---------- */
#contact .php-email-form {
    background: #fff;
    padding: 34px;
    border-radius: 16px;
    box-shadow: 0 16px 40px -14px rgba(6, 18, 48, 0.25);
    border-top: 4px solid var(--color-primary);
}

/* ---------- Cartões de parceiros (Parceiros/Index) ----------
   Sem altura/rácio fixos na imagem, um logótipo alto ou largo enviado por um
   parceiro (ex.: um brasão quadrado) esticava o cartão inteiro e desalinhava
   a fila toda — daí o aspect-ratio + object-fit:cover abaixo, tal como já
   se fazia em .produto-card-img. */
.chef-member {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 10px 26px -12px rgba(6, 18, 48, 0.18);
}

    .chef-member:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px -14px rgba(6, 18, 48, 0.3);
    }

    .chef-member .member-img {
        position: relative;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--color-branco-azul);
    }

        .chef-member .member-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    /* Modificador só para logótipos (Parceiros/Index — .chef-member também é
       reutilizado em Clube/Direccao com fotografias de pessoas, onde "cover" a
       preencher a moldura continua a ser o correcto). Branco fixo (não a
       variável de tema) porque logótipos costumam ter texto/traços pensados
       para assentar sobre fundo branco liso, em qualquer tema do site; e
       "contain" + padding em vez de "cover" garante que aparecem sempre
       inteiros, nunca cortados. */
    .chef-member .member-img.member-img-logo {
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

        .chef-member .member-img.member-img-logo img {
            object-fit: contain;
        }

    /* Redes sociais — deixaram de ser uma sobreposição sobre a imagem (só visível
       ao passar o rato, e ilegível sobre um fundo agora branco): passam a ser uma
       fila própria, sempre visível, com bom contraste em qualquer tema. */
    .chef-member-social {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px 0;
    }

        .chef-member-social a {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(var(--color-primary-rgb), 0.09);
            color: var(--color-primary-dark);
            font-size: 14px;
            transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
        }

            .chef-member-social a:hover {
                background: var(--color-primary);
                color: #fff;
                transform: translateY(-2px);
            }

    /* Fundo fixo da identidade do site (não extraído do logótipo — ver histórico:
       exigia crossorigin="anonymous" + canvas, o que dependia de CORS/cache da API
       e, para alguns parceiros, chegava a impedir o próprio logótipo de aparecer).
       Só o .member-img (acima) fica branco fixo — é onde o logótipo precisa de
       fundo neutro para se ler bem; o resto do cartão usa o mesmo navy da
       identidade "fundos de destaque" já usada no resto do site. */
    .chef-member .member-info {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        padding: 18px 20px 22px;
        background: linear-gradient(150deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    }

        .chef-member .member-info h4 {
            font-size: 17px;
            margin: 0 0 2px;
            color: #fff;
        }

        .chef-member .member-info span {
            color: rgba(255, 255, 255, 0.75);
        }

        .chef-member .member-info p {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-top: 8px;
            color: rgba(255, 255, 255, 0.85);
        }

/* ---------- Organigrama de parceiros (Parceiros/Index) ----------
   Patrocinador Oficial sempre no nível de topo, maior e com selo dourado;
   Colaboradores num nível mais compacto por baixo, ligados por um "tronco"
   vertical — a leitura de "quem pesa mais" fica imediata, sem precisar de
   texto a explicar a hierarquia. */
.organigrama-nivel-base {
    margin-top: 6px;
}

.organigrama-ligacao {
    width: 2px;
    height: 40px;
    margin: 0 auto;
    background: linear-gradient(180deg, var(--color-gold), rgba(var(--color-primary-rgb), 0.4));
    position: relative;
}

    .organigrama-ligacao::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -1px;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid rgba(var(--color-primary-rgb), 0.6);
    }

.chef-member-oficial {
    position: relative;
    border: 2px solid var(--color-gold);
    box-shadow: 0 16px 36px -14px rgba(var(--color-gold-rgb), 0.5);
}

    .chef-member-oficial:hover {
        box-shadow: 0 24px 46px -14px rgba(var(--color-gold-rgb), 0.6);
    }

    .chef-member-oficial .member-img {
        aspect-ratio: 16 / 10;
    }

    .chef-member-oficial .member-info h4 {
        font-size: 19px;
    }

.chef-member-selo {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: var(--color-secondary-dark);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.4);
}

.chef-member-colaborador {
    box-shadow: 0 8px 20px -12px rgba(6, 18, 48, 0.2);
}

    .chef-member-colaborador .member-img {
        aspect-ratio: 1 / 1;
    }

    .chef-member-colaborador .member-info {
        padding: 14px 16px 18px;
    }

        .chef-member-colaborador .member-info h4 {
            font-size: 14px;
        }

        .chef-member-colaborador .member-info span {
            font-size: 11px;
        }

        .chef-member-colaborador .member-info p {
            font-size: 12.5px;
            -webkit-line-clamp: 2;
        }

/* ---------- Cartões de modalidade (Modalidades/Index) ---------- */
.icon-box {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .icon-box:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px -14px rgba(6, 18, 48, 0.25);
    }

/* ---------- Estado da candidatura (Parceiros/Consultar) ---------- */
.estadoCandidatura {
    display: inline-block;
    padding: 8px 22px;
    border-radius: 30px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.04em;
}

    .estadoCandidatura.Aprovado {
        background: rgba(var(--color-primary-rgb), 0.12);
        color: var(--color-primary-dark);
    }

    .estadoCandidatura.Reprovado {
        background: rgba(220, 53, 69, 0.12);
        color: #dc3545;
    }

    .estadoCandidatura.Pendente {
        background: rgba(var(--color-gold-rgb), 0.18);
        color: #8a6100;
    }

/* ---------- Ficha de produto premium ---------- */
.produto-detalhe-caixa {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 40px -12px rgba(6, 18, 48, 0.25);
    padding: 30px;
    border-top: 4px solid var(--color-primary);
}

.produto-detalhe-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-primary-dark);
    font-weight: 600;
}

@media (max-width: 768px) {
    .hero-premium-title {
        font-size: 30px;
    }

    .contagem-premium .count-box span {
        font-size: 30px;
    }
}

/* ---------- Reserva de bilhete premium (ReservarBilhete/Index.cshtml) ---------- */
/* Ticket-stub — um único elemento faz o papel de "hero" e de resumo (evita
   repetir nome do bilhete/jogo/data/preço numa segunda caixa por baixo). */
.reserva-premium-banda {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='103.92' height='180' viewBox='0 0 103.92 180'%3E%3Cpolygon points='51.96,30 0,60 -51.96,30 -51.96,-30 0,-60 51.96,-30' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3Cpolygon points='103.92,120 51.96,150 0,120 0,60 51.96,30 103.92,60' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3C/svg%3E") 0 0/103.92px 180px repeat,
        radial-gradient(circle at 20% 20%, rgba(var(--color-primary-rgb), 0.2), transparent 45%),
        linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    padding: 60px 0;
}

.reserva-ticket {
    max-width: 640px;
    margin: 0 auto;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(240, 180, 41, 0.3);
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(6, 18, 48, 0.5);
    overflow: hidden;
}

.reserva-ticket-vip {
    border-color: var(--color-gold);
}

.reserva-ticket-corpo {
    padding: 34px 34px 26px;
    text-align: center;
}

.reserva-ticket-titulo {
    color: #fff;
    font-weight: 800;
    margin: 18px 0 6px;
}

.reserva-ticket-confronto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 24px 0 18px;
}

.reserva-ticket-equipa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 120px;
}

    .reserva-ticket-equipa img {
        width: 56px;
        height: 56px;
        object-fit: contain;
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
    }

    .reserva-ticket-equipa span {
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        line-height: 1.2;
    }

.reserva-ticket-vs {
    color: var(--color-gold);
    font-weight: 800;
    font-size: 18px;
    opacity: 0.85;
}

.reserva-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
}

    .reserva-ticket-meta i {
        color: var(--color-gold);
        margin-right: 4px;
    }

/* Linha de "destacar" ao estilo bilhete físico — os círculos usam a cor mais
   escura do gradiente da secção para simular o recorte a vazar para trás. */
.reserva-ticket-corte {
    position: relative;
    height: 0;
    border-top: 2px dashed rgba(255, 255, 255, 0.25);
}

    .reserva-ticket-corte::before,
    .reserva-ticket-corte::after {
        content: "";
        position: absolute;
        top: -14px;
        width: 28px;
        height: 28px;
        background: var(--color-secondary-dark);
        border-radius: 50%;
    }

    .reserva-ticket-corte::before {
        left: -14px;
    }

    .reserva-ticket-corte::after {
        right: -14px;
    }

.reserva-ticket-preco {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 34px;
    background: rgba(0, 0, 0, 0.2);
}

    .reserva-ticket-preco span {
        display: block;
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .reserva-ticket-preco strong {
        color: var(--color-gold);
        font-size: 26px;
        font-weight: 800;
    }

        .reserva-ticket-preco strong small {
            color: rgba(255, 255, 255, 0.6);
            font-size: 12px;
            font-weight: 600;
        }

.reserva-ticket-selo {
    width: 46px;
    opacity: 0.9;
}

/* ---------- Comprovante de reserva (ReservarBilhete/Confirmacao.cshtml) — mesmo
   ticket-stub do formulário de reserva acima, com um talão extra (QR + resumo) depois
   do corte. ---------- */
.reserva-ticket-numero {
    margin: 22px 0 4px;
}

    .reserva-ticket-numero span {
        display: block;
        color: rgba(255, 255, 255, 0.55);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 4px;
    }

    .reserva-ticket-numero strong {
        color: #fff;
        font-size: 18px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.04em;
    }

.reserva-ticket-lugares {
    margin-top: 14px;
    color: var(--color-gold);
    font-size: 13px;
    font-weight: 600;
}

    .reserva-ticket-lugares i {
        margin-right: 4px;
    }

.reserva-ticket-stub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 34px;
    background: rgba(0, 0, 0, 0.2);
}

.reserva-ticket-stub-pendente {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

.reserva-ticket-stub-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}

    .reserva-ticket-stub-info span {
        display: block;
        color: rgba(255, 255, 255, 0.55);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 2px;
    }

    .reserva-ticket-stub-info strong {
        color: #fff;
        font-size: 14px;
        font-weight: 700;
    }

/* Contagem decrescente do hold de 15min dos lugares (ReservarAsync grava ReservadoAte —
   ver LugarJogoRepository na API). Fica normal/verde-claro até faltarem 2min, depois muda
   para "urgente" (vermelho); ao chegar a zero passa a "expirado" e troca o texto para
   avisar que os lugares já podem ter sido libertados. Só aparece quando a reserva teve
   mapa de lugares — reserva só por quantidade nunca cria hold. */
.reserva-hold-timer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.5;
}

    .reserva-hold-timer i {
        flex-shrink: 0;
        font-size: 18px;
        color: var(--color-gold);
    }

    .reserva-hold-timer strong {
        font-variant-numeric: tabular-nums;
        color: #fff;
    }

.reserva-hold-timer-urgente {
    background: rgba(223, 21, 4, 0.12);
    border-color: rgba(223, 21, 4, 0.35);
    color: #ffb3ab;
}

    .reserva-hold-timer-urgente i {
        color: var(--color-red);
    }

    .reserva-hold-timer-urgente strong {
        color: #fff;
    }

.reserva-hold-timer-expirado {
    background: rgba(223, 21, 4, 0.16);
    border-color: rgba(223, 21, 4, 0.4);
    color: #ffcfc9;
}

    .reserva-hold-timer-expirado i {
        color: var(--color-red);
    }

/* Aviso "o bilhete chega por email" — pendente de aprovação, não é o bilhete final
   (ver Confirmacao.cshtml). Tom âmbar/dourado de propósito: não é erro, é um estado de
   espera normal do fluxo. */
.reserva-ticket-pendente-aviso {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(240, 180, 41, 0.12);
    border: 1px solid rgba(240, 180, 41, 0.3);
    border-radius: 8px;
    color: var(--color-gold);
    font-size: 13px;
    line-height: 1.5;
}

    .reserva-ticket-pendente-aviso i {
        flex-shrink: 0;
        font-size: 18px;
    }

@media (max-width: 575px) {
    .reserva-ticket-stub-info {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
}

/* ---------- Formulário de reserva ---------- */
.reserva-form {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 16px 45px -12px rgba(6, 18, 48, 0.25);
    padding: 36px;
    margin-top: -40px;
    position: relative;
    z-index: 2;
}

.reserva-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 768px) {
    .reserva-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .reserva-form-campo-full {
        grid-column: 1 / -1;
    }
}

.reserva-form-campo label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
    color: var(--color-secondary);
    margin-bottom: 6px;
}

    .reserva-form-campo label i {
        color: var(--color-primary);
    }

.reserva-quantidade {
    margin-top: 24px;
}

    .reserva-quantidade label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        font-size: 13px;
        color: var(--color-secondary);
        margin-bottom: 8px;
    }

        .reserva-quantidade label i {
            color: var(--color-primary);
        }

.reserva-quantidade-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    overflow: hidden;
}

    .reserva-quantidade-stepper button {
        width: 44px;
        height: 44px;
        border: none;
        background: #f4f6fa;
        color: var(--color-primary);
        font-size: 20px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s ease;
    }

        .reserva-quantidade-stepper button:hover {
            background: var(--color-primary);
            color: #fff;
        }

    .reserva-quantidade-stepper input {
        width: 60px;
        height: 44px;
        border: none;
        text-align: center;
        font-weight: 700;
        font-size: 16px;
        color: var(--color-secondary);
        -moz-appearance: textfield;
    }

        .reserva-quantidade-stepper input::-webkit-outer-spin-button,
        .reserva-quantidade-stepper input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

.reserva-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px dashed #e0e0e0;
}

    .reserva-total span {
        color: var(--color-secondary);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 0.04em;
    }

    .reserva-total strong {
        color: var(--color-primary-dark);
        font-size: 24px;
        font-weight: 800;
    }

.reserva-btn-submeter {
    display: block;
    width: 100%;
    margin-top: 22px;
    text-align: center;
    font-size: 16px;
    padding: 16px;
}

    .reserva-btn-submeter:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }

.reserva-quantidade-nota {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: rgba(11, 31, 75, 0.5);
}

/* ---------- Mapa de lugares (ReservarBilhete/Index.cshtml) — escolher o lugar
   concreto na reserva, não só a quantidade. Só aparece quando a Bilheteria já gerou o
   mapa para o jogo (JogosController.GerarMapaLugares); caso contrário a reserva
   continua só por quantidade, como sempre funcionou. ---------- */
.mapa-lugares {
    background: #f7f9fc;
    border: 1px solid #e0e6f0;
    border-radius: 16px;
    padding: 20px;
    margin-top: 24px;
}

.mapa-lugares-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

    .mapa-lugares-cabecalho label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        font-size: 13px;
        color: var(--color-secondary);
    }

        .mapa-lugares-cabecalho label i {
            color: var(--color-primary);
        }

    .mapa-lugares-cabecalho span {
        font-size: 13px;
        font-weight: 700;
        color: var(--color-primary-dark);
        background: #fff;
        border-radius: 50px;
        padding: 4px 12px;
    }

.mapa-lugares-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #e0e6f0;
}

.mapa-lugares-legenda-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(11, 31, 75, 0.6);
}

.mapa-lugar-amostra {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

    .mapa-lugar-amostra.disponivel {
        background: #fff;
        border: 1.5px solid var(--color-primary);
    }

    .mapa-lugar-amostra.seleccionado {
        background: var(--color-primary);
    }

    .mapa-lugar-amostra.indisponivel {
        background: #d8dee8;
    }

.mapa-lugares-bancada {
    margin-bottom: 18px;
}

    .mapa-lugares-bancada:last-child {
        margin-bottom: 0;
    }

    .mapa-lugares-bancada h4 {
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-secondary);
        margin: 0 0 10px;
    }

.mapa-lugares-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.mapa-lugares-fila-label {
    flex-shrink: 0;
    width: 64px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(11, 31, 75, 0.55);
}

.mapa-lugares-assentos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mapa-lugar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

    .mapa-lugar.disponivel {
        background: #fff;
        border: 1.5px solid var(--color-primary);
        color: var(--color-primary-dark);
        cursor: pointer;
    }

        .mapa-lugar.disponivel:hover {
            transform: translateY(-2px);
            background: rgba(var(--color-primary-rgb), 0.08);
        }

    .mapa-lugar.seleccionado {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
    }

    .mapa-lugar.indisponivel {
        background: #eef1f6;
        border: 1.5px solid #d8dee8;
        color: #b0b8c8;
        cursor: not-allowed;
    }

[data-theme="escuro"] .mapa-lugares {
    background: #0b1530;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="escuro"] .mapa-lugares-cabecalho span {
    background: #101a33;
}

[data-theme="escuro"] .mapa-lugar.disponivel {
    background: #101a33;
    color: #e4e9f5;
}

[data-theme="escuro"] .mapa-lugar.indisponivel {
    background: #0b1530;
    border-color: rgba(255, 255, 255, 0.08);
    color: #4a5468;
}

@media (max-width: 767px) {
    .reserva-ticket-corpo {
        padding: 28px 20px 20px;
    }

    .reserva-ticket-preco {
        padding: 18px 20px;
    }

    .reserva-form {
        padding: 24px;
        margin-top: -24px;
    }
}

.reserva-sem-jogo {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 16px 45px -12px rgba(6, 18, 48, 0.25);
    padding: 40px 32px;
}

    .reserva-sem-jogo i {
        font-size: 40px;
        color: var(--color-gold);
    }

    .reserva-sem-jogo p {
        color: var(--color-secondary);
        margin: 16px 0 22px;
    }

/* ---------- Cartões de evento da Bilheteria (Loja/Bilheteria.cshtml) ----------
   Antes: um .pricing-item genérico (o mesmo usado no Carrinho/Marketplace) por CADA par
   jogo×categoria — com 2 categorias no mesmo jogo, o confronto/data repetia-se em dois
   cartões lado a lado. Agora: um cartão por jogo (mesmo motivo visual do "bilhete" físico
   de .reserva-ticket, para o utilizador reconhecer a mesma linguagem entre "escolher jogo"
   e "reservar"), com as categorias desse jogo listadas por baixo do corte — o padrão
   "escolhe o evento → escolhe o tipo de bilhete" das grandes bilheteiras online. */
.bilheteria-jogos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 32px;
    align-items: start;
}

.bilheteria-jogo-card.reserva-ticket {
    max-width: none;
    margin: 0;
    /* .reserva-ticket normal é quase-transparente de propósito — só fica bem escuro
       porque a Confirmacao/Index o colocam sobre .reserva-premium-banda (secção escura).
       Aqui o cartão vive na secção clara #pricing da Bilheteria, por isso precisa do seu
       próprio fundo escuro opaco em vez de herdar o da secção. */
    background: linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
}

.bilheteria-categorias {
    background: #fff;
    padding: 6px 30px 24px;
}

.bilheteria-categoria-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px dashed #e5e9f0;
}

    .bilheteria-categoria-item:last-child {
        border-bottom: none;
    }

.bilheteria-categoria-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.bilheteria-categoria-nome {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--color-secondary);
}

.bilheteria-categoria-preco {
    color: var(--color-primary-dark);
    font-size: 19px;
    font-weight: 800;
}

    .bilheteria-categoria-preco small {
        font-size: 11px;
        font-weight: 600;
        color: var(--color-gray);
    }

.bilheteria-vip-badge {
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: var(--color-secondary-dark);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bilheteria-categoria-item .btn-premium {
    padding: 10px 22px;
    font-size: 12.5px;
    flex-shrink: 0;
}

@media (max-width: 420px) {
    .bilheteria-categoria-item {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .bilheteria-categoria-item .btn-premium {
        justify-content: center;
    }
}

/* ---------- Páginas de erro (404/500/503) — Views/Shared/_ErroPremium.cshtml ---------- */
.erro-premium-banda {
    min-height: calc(100vh - 400px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='103.92' height='180' viewBox='0 0 103.92 180'%3E%3Cpolygon points='51.96,30 0,60 -51.96,30 -51.96,-30 0,-60 51.96,-30' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3Cpolygon points='103.92,120 51.96,150 0,120 0,60 51.96,30 103.92,60' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3C/svg%3E") 0 0/103.92px 180px repeat,
        radial-gradient(circle at 50% 0%, rgba(var(--color-primary-rgb), 0.18), transparent 55%),
        linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    padding: 80px 20px;
}

.erro-premium-mascote {
    width: 110px;
    margin: 0 auto 18px;
}

.erro-premium-codigo {
    font-size: 96px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 40px rgba(var(--color-gold-rgb), 0.35);
}

.erro-premium-titulo {
    color: #fff;
    font-weight: 800;
    margin: 8px 0 14px;
}

.erro-premium-mensagem {
    color: rgba(255, 255, 255, 0.75);
    max-width: 480px;
    margin: 0 auto;
    font-size: 16px;
}

.erro-premium-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
}

.erro-premium-id {
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

    .erro-premium-id code {
        color: rgba(255, 255, 255, 0.6);
    }

@media (max-width: 767px) {
    .erro-premium-codigo {
        font-size: 64px;
    }
}

/* ---------- Transição de página + barra de progresso premium ----------
   Site multi-página tradicional (não SPA) — "transição" aqui significa: a página
   nova entra com um fade suave em vez de aparecer de repente, e uma barra fina no
   topo dá feedback imediato ao clicar num link interno, antes do browser trocar de
   página. Puro CSS na entrada (animation-fill-mode: forwards garante que o conteúdo
   fica visível mesmo que o JS falhe/demore) — sem risco de "flash de conteúdo
   invisível". Ver premium-ux.js.
   Sem transform aqui de propósito: como a animação usa "forwards" no <body>, um
   transform (mesmo só translateY(0) no estado final) fica permanentemente aplicado
   e transforma o <body> no containing block de TODOS os descendentes
   position:fixed do site inteiro (menu mobile, botões flutuantes, etc.) — deixavam
   de se posicionar relativamente à janela, e ficavam colapsados/invisíveis. */
@keyframes pagina-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body {
    animation: pagina-fade-in 0.35s ease-out forwards;
}

#page-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
    z-index: 99999;
    opacity: 0;
    transition: width 0.5s ease, opacity 0.2s ease;
}

    #page-progress-bar.a-carregar {
        opacity: 1;
        width: 70%;
    }

/* ---------- Placeholder "sem conteúdo" reutilizável (notícias, etc.) ---------- */
.vazio-premium {
    text-align: center;
    background: #f4f6fa;
    border: 1px dashed rgba(var(--color-secondary-rgb), 0.2);
    border-radius: 16px;
    padding: 50px 24px;
    margin: 20px 0;
}

    .vazio-premium i {
        font-size: 36px;
        color: var(--color-primary);
        opacity: 0.7;
    }

    .vazio-premium h3 {
        color: var(--color-secondary);
        font-weight: 700;
        margin: 14px 0 6px;
        font-size: 20px;
    }

    .vazio-premium p {
        color: #6c757d;
        margin: 0;
    }

.vazio-premium-inline {
    padding: 30px 20px;
    margin: 10px 0;
}

    .vazio-premium-inline i {
        font-size: 26px;
    }

    .vazio-premium-inline p {
        margin-top: 8px;
    }

/* ---------- Visão, Missão e Valores (Clube/Historia.cshtml, tab-5) ----------
   O estilo do próprio .vmv-card (navy + favo de mel) está mais abaixo, junto
   do resto do redesign da página História — aqui fica só o espaçamento da
   grelha, que não muda entre versões. */
.vmv-cards {
    margin-top: 6px;
}

/* ---------- Mensagem do Presidente (Clube/Historia.cshtml) ---------- */
.presidente-mensagem .presidente-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 16px 40px -14px rgba(6, 18, 48, 0.25);
    padding: 40px;
}

.presidente-foto {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 12px 28px -10px rgba(6, 18, 48, 0.35);
    border: 4px solid var(--color-gold);
    margin: 0 auto;
}

.presidente-texto {
    flex: 1 1 320px;
    position: relative;
}

.presidente-quote-icon {
    font-size: 34px;
    color: rgba(var(--color-primary-rgb), 0.25);
    display: block;
    margin-bottom: 6px;
}

.presidente-mensagem-texto {
    font-size: 17px;
    line-height: 1.8;
    color: var(--color-secondary);
    font-style: italic;
}

.presidente-assinatura {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed #dfe4ec;
}

    .presidente-assinatura strong {
        display: block;
        color: var(--color-primary-dark);
        font-size: 16px;
    }

    .presidente-assinatura span {
        color: var(--color-gray);
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

@media (max-width: 767px) {
    .presidente-mensagem .presidente-card {
        text-align: center;
        padding: 30px 24px;
    }
}

/*--------------------------------------------------------------
# Scoreboard — resultado final / jogo a decorrer (Home/Index.cshtml E
# Views/Jogo/AoVivo.cshtml, que reutiliza a mesma marcação — por isso vive aqui e não
# num .cshtml.css isolado a uma das duas views, ver nota em Index.cshtml.css)
--------------------------------------------------------------*/
.scoreboard-premium-section {
    padding: 30px 0 10px;
}

.scoreboard-premium {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 16px 40px -14px rgba(6, 18, 48, 0.25);
    padding: 26px clamp(18px, 5vw, 48px);
    border: 1px solid rgba(var(--color-gold-rgb), 0.35);
}

.scoreboard-premium-live {
    border-color: rgba(220, 53, 69, 0.4);
}

/* Linha de estado: etiqueta ("AO VIVO"/"INTERVALO" + parte) à esquerda, o relógio em
   destaque (chip) à direita — antes o minuto vinha escondido a meio de um texto corrido
   ("AO VIVO · 1ª Parte · 23'"), do mesmo tamanho/peso que o resto, o que o fazia passar
   despercebido em vez de se ler como um relógio ao vivo. */
.scoreboard-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.scoreboard-tag {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-secondary);
}

    .scoreboard-tag i {
        color: var(--color-gold);
        margin-right: 6px;
    }

.scoreboard-parte {
    color: var(--color-secondary);
    opacity: 0.55;
    font-weight: 600;
}

.scoreboard-tag-live {
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 8px;
}

.scoreboard-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #dc3545;
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.6);
    animation: scoreboard-live-pulse 1.4s ease-out infinite;
}

@keyframes scoreboard-live-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Intervalo — mesma estrutura do "AO VIVO" (.scoreboard-tag-live), mas em âmbar e sem
   pulsar: o jogo continua em destaque no ecrã (ver HomeController/Index.cshtml, que agora
   tratam Intervalo como "ao vivo agora" tal como Decorrendo), só que visivelmente parado,
   não a decorrer neste preciso instante. */
.scoreboard-tag-intervalo {
    color: #b8860b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.scoreboard-live-dot-pausado {
    background: #d4a017;
    box-shadow: none;
    animation: none;
}

/* O relógio em si — chip arredondado, número grande a monospace (nunca "salta" de
   largura entre 9' e 45' porque tabular-nums fixa a largura de cada dígito), cor a
   condizer com o estado (vermelho ao vivo, âmbar ao intervalo). */
.scoreboard-clock {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: 7px 16px;
    border-radius: 999px;
}

.scoreboard-clock-live {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

.scoreboard-clock-intervalo {
    color: #b8860b;
    background: rgba(184, 134, 11, 0.12);
}

@media (max-width: 480px) {
    .scoreboard-clock {
        font-size: 18px;
        padding: 6px 14px;
    }
}

/* Grid de 3 colunas em vez de flex-wrap — com flex-wrap, em ecrãs estreitos os
   três blocos (equipa/placar/equipa) reflowiam por ordem imprevisível consoante
   a largura sobrante de cada linha (às vezes 2+1, às vezes 1+2, nunca a mesma
   ordem lógica). Grid garante sempre equipa-casa | placar | equipa-fora numa
   única linha, cada coluna só encolhe — nunca troca de posição nem empilha. */
.scoreboard-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(8px, 4vw, 60px);
}

.scoreboard-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 140px;
    min-width: 0;
    margin: 0 auto;
}

    .scoreboard-team img {
        width: 76px;
        height: 76px;
        object-fit: contain;
        border-radius: 50%;
        background: var(--color-branco-azul);
        padding: 8px;
        margin-bottom: 8px;
        flex-shrink: 0;
    }

    .scoreboard-team span {
        font-weight: 700;
        font-size: 14px;
        color: var(--color-secondary);
        text-align: center;
    }

@media (max-width: 480px) {
    .scoreboard-team img {
        width: 52px;
        height: 52px;
        margin-bottom: 6px;
    }

    .scoreboard-team span {
        font-size: 12px;
    }

    .scoreboard-score {
        font-size: 28px !important;
    }
}

    .scoreboard-team small {
        margin-top: 4px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-gold);
        font-weight: 700;
    }

.scoreboard-team-winner img {
    box-shadow: 0 0 0 3px var(--color-gold);
}

.scoreboard-score {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 46px;
    font-weight: 800;
    color: var(--color-secondary);
}

    .scoreboard-score em {
        font-style: normal;
        color: rgba(11, 31, 75, 0.3);
    }

/* Selo "Empate" — só aparece quando TipoResultado == Empate (ver Home/Index.cshtml), em vez
   do troféu "Venceu" que antes aparecia sempre, mesmo em resultados como 0-0. */
.scoreboard-empate-tag {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-secondary);
    background: rgba(11, 31, 75, 0.08);
    border-radius: 20px;
    padding: 4px 12px;
    margin-left: 4px;
}

/* ---------- Cronologia de eventos (Home/Index.cshtml, scoreboard-premium — cartão de
   fundo claro tanto em "AO VIVO" como em "Resultado Final", ver .scoreboard-premium
   acima em Index.cshtml.css). Duas colunas — casa à esquerda, fora à direita — para não
   misturar os eventos das duas equipas num único bloco ambíguo. ---------- */
.eventos-cronologia {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.12);
}

.eventos-cronologia-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
}

.eventos-ao-vivo-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.evento-ao-vivo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    color: var(--color-gray);
    font-size: 14px;
    border-bottom: 1px dashed rgba(var(--color-primary-rgb), 0.1);
}

    .evento-ao-vivo-item:last-child {
        border-bottom: none;
    }

    .evento-ao-vivo-item i {
        color: var(--color-gold);
        flex-shrink: 0;
    }

    .evento-ao-vivo-item strong {
        color: var(--color-secondary);
    }

.eventos-lado-fora .evento-ao-vivo-item {
    flex-direction: row-reverse;
    text-align: right;
}

@media (max-width: 575px) {
    .eventos-cronologia-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .eventos-lado-fora .evento-ao-vivo-item {
        flex-direction: row;
        text-align: left;
    }

    .eventos-lado-fora {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed rgba(var(--color-primary-rgb), 0.1);
    }
}

/* ---------- Botão "Ver estatísticas em tempo real" no cartão AO VIVO da Home — leva à
   página dedicada Jogo/AoVivo (cronologia + estatísticas + escalação). Vive aqui, não em
   Index.cshtml.css, pelo mesmo motivo de .matchday-convocados-link acima: AnchorTagHelper
   não preserva o atributo de scoping do CSS isolado. ---------- */
.scoreboard-ao-vivo-cta {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.12);
    text-align: center;
    /* Passou a caber dois botões lado a lado (2026-09-17: "Ver convocados" juntou-se ao
       CTA de estatísticas, em vez de só existir no cartão do próximo jogo) — antes só
       precisava de centrar um único link. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.scoreboard-ao-vivo-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 30px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background .25s ease, transform .25s ease;
}

    .scoreboard-ao-vivo-link:hover {
        background: var(--color-secondary);
        transform: translateY(-2px);
        color: #fff;
    }

/* ---------- Estatísticas ao vivo (posse/remates/cantos/faltas) — usadas tanto no cartão
   do scoreboard como na página dedicada Jogo/AoVivo. Barra "cabo-de-guerra": os dois
   lados (casa/fora) somam sempre 100% de largura da mesma barra, nunca duas barras
   independentes lado a lado — isso deixaria óbvio de imediato quem domina cada
   estatística. ---------- */
.estatisticas-ao-vivo {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.12);
}

.estatisticas-ao-vivo-titulo {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-secondary);
    text-align: center;
    margin-bottom: 16px;
}

.estatistica-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

    .estatistica-linha:last-child {
        margin-bottom: 0;
    }

.estatistica-valor {
    min-width: 32px;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-secondary);
}

.estatistica-valor-casa {
    text-align: right;
}

.estatistica-valor-fora {
    text-align: left;
}

.estatistica-corpo {
    flex: 1;
}

.estatistica-rotulo {
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--color-gray);
    margin-bottom: 5px;
}

.estatistica-barra {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(var(--color-primary-rgb), 0.08);
}

.estatistica-barra-casa {
    height: 100%;
    background: var(--color-gold);
    transition: width .4s ease;
}

.estatistica-barra-fora {
    height: 100%;
    background: rgba(var(--color-primary-rgb), 0.35);
    transition: width .4s ease;
}

/* ---------- Jogadores no campo simulado (Views/Jogo/AoVivo.cshtml) — produzidos via
   @Html.Raw() em RenderEquipaCampo/PitchDot, por isso vivem aqui e não em
   AoVivo.cshtml.css (ver nota lá). O "jitter" (--dx/--dy/animation-delay/duration, um
   valor diferente por jogador, semeado pelo Id) é puramente cosmético — dá sensação de
   campo vivo sem fingir ser posicionamento GPS real. ---------- */
.campo-jogador {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    animation-name: campo-jitter;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    cursor: default;
    z-index: 2;
}

.campo-jogador-casa {
    background: var(--color-primary);
    border: 2px solid #fff;
}

.campo-jogador-fora {
    background: var(--color-gold);
    border: 2px solid #fff;
    color: #2b2b2b;
}

@keyframes campo-jitter {
    from {
        margin-left: 0;
        margin-top: 0;
    }

    to {
        margin-left: var(--dx, 4px);
        margin-top: var(--dy, 3px);
    }
}

/* ---------- Balão de comentário do chat ao vivo (Views/Jogo/AoVivo.cshtml) — produzida
   via @Html.Raw() em ChatBolha (e replicada em JS em adicionarBolhaChat, para mensagens
   que chegam ao vivo), por isso vive aqui e não em AoVivo.cshtml.css (mesmo motivo de
   .campo-jogador acima). O resto do chat (moldura, lista, formulário) está no .cshtml.css
   isolado, porque é marcação literal da view, não gerada em C#/JS.
   Redesenhado 2026-09-17 (pedido do utilizador: "o design do chat não é premium") — avatar
   de iniciais + balão com "rabinho" a apontar para o avatar + lado distinto consoante seja
   a própria pessoa (direita, dourado) ou outra (esquerda, branco/contorno), como qualquer
   chat premium (iMessage/WhatsApp), em vez de uma pilha de caixas cinzentas iguais. ---------- */
.chat-linha {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 78%;
    animation: chat-pop .25s ease;
}

.chat-linha-propria {
    flex-direction: row-reverse;
    margin-left: auto;
}

@keyframes chat-pop {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.chat-linha-propria .chat-avatar {
    background: var(--color-gold);
    color: var(--color-secondary);
}

.chat-mensagem {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid rgba(var(--color-primary-rgb), 0.1);
    border-radius: 16px 16px 16px 4px;
    box-shadow: 0 3px 12px rgba(6, 18, 48, 0.07);
    font-size: 14px;
    min-width: 0;
}

.chat-linha-propria .chat-mensagem {
    background: rgba(var(--color-gold-rgb), 0.14);
    border-color: rgba(var(--color-gold-rgb), 0.35);
    border-radius: 16px 16px 4px 16px;
}

.chat-mensagem-nome {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--color-primary);
}

.chat-mensagem-texto {
    color: #333;
    word-break: break-word;
    line-height: 1.45;
}

.chat-mensagem-hora {
    align-self: flex-end;
    font-size: 10.5px;
    color: rgba(11, 31, 75, 0.4);
}

/* ---------- Cápsula do formulário de comentar (Views/Jogo/AoVivo.cshtml) — vive aqui e
   não em AoVivo.cshtml.css: o FormTagHelper embutido do ASP.NET Core intercepta todo
   <form>, mesmo sem nenhum atributo asp-*, e isso impede o atributo de scoping do CSS
   isolado de ser aplicado a ele (mesmo bug documentado para AnchorTagHelper acima em
   .scoreboard-ao-vivo-link). Os filhos (.chat-input/.chat-enviar) não têm este problema e
   continuam no .cshtml.css isolado. Mesmo tom #fbfcfe/#e2e7f0 já usado em .form-control
   no resto do site (ver acima, secção "Campos de formulário"), para a cápsula do chat não
   destoar do resto do site. ---------- */
.chat-form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 6px 20px;
    background: #fbfcfe;
    border: 1.5px solid #e2e7f0;
    border-radius: 999px;
    box-shadow: 0 6px 18px -10px rgba(6, 18, 48, 0.25);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.chat-form:focus-within {
    border-color: var(--color-gold);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--color-gold-rgb), 0.18), 0 6px 18px -10px rgba(6, 18, 48, 0.25);
}

/* ---------- Linha de jogo dentro de um cartão de jornada (Views/Calendario/Index.cshtml)
   — produzida via @Html.Raw() em JogoLinhaHtml, por isso vive aqui e não em
   Calendario/Index.cshtml.css (mesmo motivo de .campo-jogador/.chat-mensagem acima). ---------- */
.jornada-jogo-linha {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.08);
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease;
}

a.jornada-jogo-linha:hover {
    background: var(--color-branco-azul);
}

div.jornada-jogo-linha {
    cursor: default;
}

.jornada-jogo-equipa {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.jornada-jogo-equipa-fora {
    flex-direction: row-reverse;
    text-align: right;
}

.jornada-jogo-equipa-nome {
    font-weight: 600;
    font-size: 11.5px;
    color: var(--color-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jornada-jogo-placar {
    font-weight: 800;
    font-size: 13.5px;
    color: var(--color-secondary);
    text-align: center;
    min-width: 44px;
}

.jornada-jogo-placar-ao-vivo {
    color: #dc3545;
    font-size: 9.5px;
    letter-spacing: .03em;
}

.jornada-jogo-hora {
    font-size: 10.5px;
    color: var(--color-gray);
    text-align: center;
    min-width: 56px;
    white-space: nowrap;
}

.jornada-jogo-anulado {
    color: #dc3545;
    font-weight: 700;
}

@media (max-width: 575px) {
    .jornada-jogo-linha {
        padding: 8px 12px;
        gap: 5px;
    }

    .jornada-jogo-equipa-nome {
        font-size: 11px;
    }
}

.evento-cartao-amarelo {
    color: #f0b429 !important;
}

.evento-cartao-vermelho {
    color: #dc3545 !important;
}

/* ---------- Reacções a notícias (Noticias/Details.cshtml) ----------
   Versão "alto impacto": emoji grande que salta ao passar o rato/tocar, um
   anel a expandir-se e desvanecer a cada clique (ver .reacao-btn::after e a
   classe .reacao-a-rebentar, activada por JS), contador com um "pop" na
   troca de valor, e o botão activo com gradiente + brilho em vez de um tom
   plano — mais expressivo do que o "like" único do Instagram/Facebook, já
   que mostra logo as 4 reacções sem precisar de long-press/hover para revelar. */
.reacoes-noticia {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    background: var(--color-branco-azul);
    border-radius: 16px;
    padding: 20px 24px;
    margin: 30px 0;
    border: 1px solid rgba(var(--color-primary-rgb), 0.12);
}

.reacoes-noticia-label {
    font-weight: 700;
    color: var(--color-secondary);
    font-size: 14px;
}

.reacoes-noticia-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.reacao-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 30px;
    border: 1.5px solid #dfe4ec;
    background: #fff;
    color: var(--color-secondary);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    overflow: visible;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

    .reacao-btn:hover {
        transform: translateY(-3px);
        border-color: var(--color-primary);
        box-shadow: 0 10px 20px -10px rgba(6, 18, 48, 0.25);
    }

        .reacao-btn:hover .reacao-emoji {
            transform: scale(1.3) rotate(-8deg);
        }

    .reacao-btn:active {
        transform: scale(0.94);
    }

    .reacao-btn .reacao-emoji {
        display: inline-block;
        font-size: 20px;
        line-height: 1;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .reacao-btn .reacao-contagem {
        color: var(--color-gray);
        font-weight: 700;
        display: inline-block;
    }

    .reacao-btn.activo {
        background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.16), rgba(var(--color-gold-rgb), 0.14));
        border-color: var(--color-primary);
        color: var(--color-primary-dark);
        box-shadow: 0 6px 16px -8px rgba(var(--color-primary-rgb), 0.5);
    }

        .reacao-btn.activo .reacao-contagem {
            color: var(--color-primary-dark);
        }

        .reacao-btn.activo .reacao-emoji {
            transform: scale(1.15);
        }

    /* Anel que expande e desvanece a partir do centro do botão a cada clique
       — o "impacto" visual do gesto, disparado só um instante via JS
       (classe .reacao-a-rebentar, removida no fim da animação). */
    .reacao-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 30px;
        border: 2px solid var(--color-primary);
        opacity: 0;
        pointer-events: none;
    }

    .reacao-btn.reacao-a-rebentar::after {
        animation: reacao-anel-expandir 0.5s ease-out;
    }

    .reacao-btn.reacao-a-rebentar .reacao-emoji {
        animation: reacao-emoji-saltar 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .reacao-btn .reacao-contagem.reacao-contagem-pop {
        animation: reacao-contagem-pop 0.3s ease-out;
    }

@keyframes reacao-anel-expandir {
    from {
        opacity: 0.6;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.35);
    }
}

@keyframes reacao-emoji-saltar {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.6) rotate(-12deg);
    }

    65% {
        transform: scale(0.9) rotate(6deg);
    }

    100% {
        transform: scale(1.15);
    }
}

@keyframes reacao-contagem-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
        color: var(--color-gold);
    }

    100% {
        transform: scale(1);
    }
}

/* ---------- Lista de partilha (Noticias/Details.cshtml, meta-bottom) ---------- */
.partilha-lista .copiar-link {
    cursor: pointer;
}

/* ---------- Perfil do sócio (Conta/Perfil.cshtml) ---------- */
.perfil-socio-caixa {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 40px -12px rgba(6, 18, 48, 0.25);
    padding: 30px;
    border-top: 4px solid var(--color-primary);
}

.perfil-socio-cabecalho {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px dashed rgba(11, 31, 75, 0.15);
}

    .perfil-socio-cabecalho h3 {
        margin: 0 0 6px;
        font-size: 22px;
        color: var(--color-secondary);
    }

.perfil-socio-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-branco-azul);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--color-gold);
}

.perfil-socio-grelha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px 24px;
}

.perfil-socio-campo span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(11, 31, 75, 0.5);
    margin-bottom: 4px;
}

.perfil-socio-campo strong {
    font-size: 15px;
    color: var(--color-secondary);
    font-weight: 600;
}

.perfil-socio-acoes {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px dashed rgba(11, 31, 75, 0.15);
    text-align: center;
}

/* ---------- Dados da conta (Conta/Perfil.cshtml) — sempre visível, mesmo para
   contas sem sócio associado; antes desta página não existir, essas contas eram
   mandadas de volta para a Home ao clicar em "Perfil". ---------- */
.perfil-conta-caixa {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 40px -12px rgba(6, 18, 48, 0.25);
    padding: 30px;
    border-top: 4px solid var(--color-gold);
}

.perfil-conta-cabecalho h3 {
    margin: 0 0 4px;
    font-size: 22px;
    color: var(--color-secondary);
}

.perfil-conta-email {
    color: rgba(11, 31, 75, 0.55);
    font-size: 14px;
}

.perfil-conta-editar-gatilho {
    background: none;
    border: none;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 14px;
    padding: 0;
    margin-top: 18px;
    cursor: pointer;
}

.perfil-conta-editar-painel {
    display: none;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed rgba(11, 31, 75, 0.15);
}

.perfil-conta-editar-painel.aberto {
    display: block;
}

.perfil-conta-editar-painel label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 4px;
    display: block;
}

/* ---------- CTA "ainda não és sócio" (Conta/Perfil.cshtml) — substitui o redirect
   silencioso para a Home que existia antes para contas sem sócio associado. ---------- */
.perfil-sem-socio-caixa {
    max-width: 760px;
    margin: 0 auto;
    background: var(--color-branco-azul);
    border: 2px dashed rgba(11, 31, 75, 0.15);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
}

.perfil-sem-socio-caixa i {
    font-size: 42px;
    color: var(--color-gold);
    margin-bottom: 14px;
    display: block;
}

.perfil-sem-socio-caixa h3 {
    color: var(--color-secondary);
    margin-bottom: 10px;
}

.perfil-sem-socio-caixa p {
    color: rgba(11, 31, 75, 0.6);
    max-width: 480px;
    margin: 0 auto 22px;
}

/* ---------- Botão "Descarregar App" da hero de Parceiros (sócio aprovado) ----------
   Único CTA da secção (já não compete com "A minha conta") — por isso ganha
   um tratamento maior e mais vistoso do que um .btn-book-a-table normal:
   gradiente animado, glow pulsante e o ícone a "saltar" no hover. */
.btn-app-hero {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark) 45%, var(--color-gold) 130%);
    background-size: 200% 200%;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.02em;
    box-shadow: 0 16px 36px -10px rgba(var(--color-primary-rgb), 0.6);
    animation: btn-app-hero-gradiente 4s ease infinite;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

    .btn-app-hero i {
        font-size: 20px;
        transition: transform 0.3s ease;
    }

    .btn-app-hero:hover {
        color: #fff;
        transform: translateY(-4px) scale(1.03);
        box-shadow: 0 22px 44px -10px rgba(var(--color-primary-rgb), 0.7);
    }

        .btn-app-hero:hover i {
            transform: translateY(-3px);
        }

@keyframes btn-app-hero-gradiente {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* ---------- Ecrã de download da App (Conta/DescarregarApp.cshtml) ---------- */
.app-download-hero {
    position: relative;
    overflow: hidden;
    padding: 90px 0 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='103.92' height='180' viewBox='0 0 103.92 180'%3E%3Cpolygon points='51.96,30 0,60 -51.96,30 -51.96,-30 0,-60 51.96,-30' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3Cpolygon points='103.92,120 51.96,150 0,120 0,60 51.96,30 103.92,60' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3C/svg%3E") 0 0/103.92px 180px repeat,
        radial-gradient(circle at 20% 15%, rgba(var(--color-primary-rgb), 0.35), transparent 50%),
        radial-gradient(circle at 85% 85%, rgba(var(--color-gold-rgb), 0.18), transparent 45%),
        linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
}

.app-download-icone {
    width: 110px;
    height: 110px;
    margin: 0 auto 22px;
    padding: 18px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 45px -14px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(var(--color-primary-rgb), 0.55);
    animation: app-icone-pulsar 2.6s ease-in-out infinite;
}

    .app-download-icone img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

@keyframes app-icone-pulsar {
    0%, 100% {
        box-shadow: 0 20px 45px -14px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(var(--color-primary-rgb), 0.4);
    }

    50% {
        box-shadow: 0 20px 45px -14px rgba(0, 0, 0, 0.55), 0 0 0 16px rgba(var(--color-primary-rgb), 0);
    }
}

.app-download-titulo {
    color: #fff;
    font-weight: 800;
    font-size: clamp(28px, 4.5vw, 46px);
    max-width: 720px;
    margin: 0 auto 16px;
    text-shadow: 0 6px 26px rgba(0, 0, 0, 0.4);
}

.app-download-subtitulo {
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    max-width: 560px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.app-download-botoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.app-download-deteccao {
    margin: 18px 0 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.app-download-brevemente {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 14px 26px;
    border-radius: 50px;
    background: rgba(var(--color-gold-rgb), 0.15);
    border: 1px solid var(--color-gold);
    color: var(--color-gold-light);
    font-weight: 600;
}

    .app-download-brevemente i {
        font-size: 20px;
    }

/* Emblema estilo "loja oficial" — ícone + duas linhas de texto, tal como os
   selos reais da Google Play/App Store, com brilho a crescer no hover em vez
   de um botão genérico. */
.app-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 26px 12px 20px;
    border-radius: 14px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

    .app-store-badge i {
        font-size: 30px;
        flex-shrink: 0;
    }

    .app-store-badge span {
        display: flex;
        flex-direction: column;
        text-align: left;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.15;
    }

        .app-store-badge span small {
            font-size: 11px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.7);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

    .app-store-badge:hover {
        color: #fff;
        transform: translateY(-4px) scale(1.03);
    }

.app-store-badge-android:hover {
    border-color: #3ddc84;
    box-shadow: 0 16px 32px -10px rgba(61, 220, 132, 0.5);
}

.app-store-badge-android i {
    color: #3ddc84;
}

.app-store-badge-ios:hover {
    border-color: #fff;
    box-shadow: 0 16px 32px -10px rgba(255, 255, 255, 0.35);
}

/* ---------- Funcionalidades da app ---------- */
.app-download-features {
    padding: 70px 0;
    background: var(--color-branco-azul);
}

.app-download-feature {
    height: 100%;
    padding: 30px 20px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 26px -14px rgba(6, 18, 48, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .app-download-feature:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px -16px rgba(6, 18, 48, 0.3);
    }

    .app-download-feature i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.15), rgba(var(--color-gold-rgb), 0.15));
        color: var(--color-primary-dark);
        font-size: 26px;
        margin-bottom: 16px;
    }

    .app-download-feature h4 {
        font-size: 16px;
        color: var(--color-secondary);
        margin-bottom: 8px;
    }

    .app-download-feature p {
        font-size: 13.5px;
        color: var(--color-text-body);
        margin: 0;
    }

/* ---------- Notificações & diálogos (SweetAlert2 skinado — ver premium-notify.js) ----------
   Antes: SweetAlert2 com o tema roxo/génerico "de fábrica" da livraria, mais toasts nativos
   do Bootstrap (.toast, cabeçalho azul-claro) e .alert em pontos diferentes do site para o
   mesmo tipo de aviso — cada um com um estilo próprio, nenhum "premium". Passa a ser um único
   motor (SweetAlert2) com a identidade visual do resto do site. */
.swal2-backdrop-show {
    background: radial-gradient(circle at 50% 20%, rgba(var(--color-secondary-rgb), 0.55), rgba(6, 12, 26, 0.72)) !important;
}

.premium-popup {
    width: auto;
    max-width: 460px;
    padding: 0 0 30px;
    border-radius: 22px !important;
    box-shadow: 0 24px 60px rgba(var(--color-secondary-rgb), 0.28), 0 4px 14px rgba(0, 0, 0, 0.08);
    font-family: var(--font-default);
    overflow: hidden;
}

    .premium-popup::before {
        content: "";
        display: block;
        height: 6px;
        width: 100%;
        background: linear-gradient(90deg, var(--color-primary), var(--color-gold) 55%, var(--color-primary-light));
        margin-bottom: 6px;
    }

    .premium-popup .swal2-icon {
        margin-top: 14px;
        margin-bottom: 4px;
        transform: scale(0.92);
    }

.premium-popup-titulo {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 22px;
    color: var(--color-secondary);
    padding: 4px 26px 0;
}

.premium-popup-texto {
    font-family: var(--font-default);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-body);
    padding: 4px 26px 0;
}

.premium-popup-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    border-radius: 50px;
    border: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin: 4px 6px 0;
}

    .premium-popup-btn:hover {
        transform: translateY(-2px);
    }

.premium-popup-btn-confirmar {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: #fff;
    box-shadow: 0 10px 22px rgba(var(--color-primary-rgb), 0.35);
}

.premium-popup-btn-cancelar {
    background: transparent;
    color: var(--color-secondary);
    border: 1.5px solid rgba(var(--color-secondary-rgb), 0.25) !important;
}

    .premium-popup-btn-cancelar:hover {
        border-color: var(--color-secondary) !important;
    }

.premium-popup-progresso {
    background: linear-gradient(90deg, var(--color-gold), var(--color-primary)) !important;
}

@keyframes premium-swal-entrar-anim {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.premium-swal-entrar {
    animation: premium-swal-entrar-anim 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-swal-sair {
    animation: premium-swal-entrar-anim 0.2s ease reverse;
}

/* Toast (canto superior direito) — substitui .toast do Bootstrap usado antes na newsletter
   e nos comentários de notícias. */
.premium-toast {
    border-radius: 14px !important;
    box-shadow: 0 14px 34px rgba(var(--color-secondary-rgb), 0.22);
    border-left: 4px solid var(--color-primary);
    padding: 4px 8px !important;
}

    .premium-toast .swal2-title {
        font-family: var(--font-primary);
        font-weight: 700;
        font-size: 14.5px;
        color: var(--color-secondary);
    }

    .premium-toast.swal2-icon-error {
        border-left-color: var(--color-red);
    }

    .premium-toast.swal2-icon-warning {
        border-left-color: var(--color-gold);
    }

[data-theme="escuro"] .premium-popup {
    background: var(--color-secondary-dark, #050f26);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

    [data-theme="escuro"] .premium-popup-titulo {
        color: #f4f6fb;
    }

    [data-theme="escuro"] .premium-popup-texto {
        color: #c7cfe6;
    }

    [data-theme="escuro"] .premium-popup-btn-cancelar {
        color: #f4f6fb;
        border-color: rgba(255, 255, 255, 0.25) !important;
    }

[data-theme="escuro"] .premium-toast {
    background: var(--color-secondary-dark, #050f26);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

    [data-theme="escuro"] .premium-toast .swal2-title {
        color: #f4f6fb;
    }

/* ---------- Emblema + nome de clube (ver ClubeBadgeTagHelper.cs) ----------
   Antes: <img onerror="this.src='.../avatar.png'"> repetido à mão em ~14 sítios, sempre com
   o nome completo do clube ao lado — quebrava em ecrãs estreitos e em tabelas com muitas
   colunas (classificação), e um clube sem emblema caía sempre no mesmo avatar genérico, sem
   nenhuma identidade. Agora: <ClubeBadge> mostra a Sigla em vez do nome completo nesses dois
   casos, e gera um círculo com a inicial do clube quando a imagem falha. */
.clube-badge-grupo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* permite que .clube-nome-completo faça ellipsis dentro de flex/grid/células */
}

.clube-badge {
    position: relative;
    display: inline-block;
    /* Era um círculo com overflow:hidden — cortava qualquer emblema que não fosse
       redondo (o nosso próprio, triangular, incluído: ver LogoMaquis.png). Um
       quadrado suavizado com fundo branco fixo mostra sempre o emblema inteiro,
       seja qual for a forma, e continua legível sobre qualquer fundo do site. */
    border-radius: 22%;
    flex: none;
    background: #fff;
    box-sizing: border-box;
    /* Sem padding aqui de propósito — percentagem resolveria contra a largura do
       .clube-badge-grupo (flex), não contra este emblema, e nalgumas células
       estreitas (ex.: tabela de pontuação) consumia a caixa inteira, deixando o
       <img> com 0px de espaço. O padding real vem inline (ClubeBadgeTagHelper.cs),
       sempre calculado a partir do TamanhoPx pedido, nunca do contentor. */
}

.clube-badge-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.clube-badge-inicial {
    position: absolute;
    inset: 0;
    border-radius: 22%;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    /* display:none por omissão — o próprio onerror do <img> (inline, ver TagHelper) troca
       para display:flex só quando o emblema real falha a carregar. */
}

.clube-badge-cor-0 { background: linear-gradient(135deg, var(--color-secondary-light), var(--color-secondary)); }
.clube-badge-cor-1 { background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark)); }
.clube-badge-cor-2 { background: linear-gradient(135deg, var(--color-gold), #8a5b06); }
.clube-badge-cor-3 { background: linear-gradient(135deg, #3b4f8a, var(--color-secondary-dark)); }
.clube-badge-cor-4 { background: linear-gradient(135deg, #0f9d7c, var(--color-primary-dark)); }
.clube-badge-cor-5 { background: linear-gradient(135deg, #b3532e, #7a2f16); }

.clube-nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clube-nome-sigla {
    display: none;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Antes havia aqui duas regras fixas — sigla sempre abaixo de 640px, sigla sempre nas
   tabelas de classificação, independentemente do nome caber ou não. Substituídas por
   clube-nome-ajuste.js (carregado em _Layout.cshtml): mede o espaço real disponível e só
   troca para sigla quando o nome completo genuinamente não cabe, em qualquer contexto. Sem
   JavaScript, .clube-nome (acima) já trunca com "…" via text-overflow — nunca parte o
   layout, só fica um pouco menos bonito que a sigla. */

/* Excepção pedida explicitamente para os dois contextos de pontuação (resumo na Home e
   tabela completa em Calendario/Pontuacao): nome completo sempre visível, sigla só em
   mobile — sem depender de caber ou não (clube-nome-ajuste.js ignora estes contextos de
   propósito, ver esse ficheiro). Sem o JS a correr aqui, sobrava o "overflow:hidden +
   text-overflow:ellipsis" de .clube-nome (pensado para os sítios onde a sigla é que
   decide) — cortava sempre em "…" mesmo havendo espaço de sobra. Desligado só nestes
   dois contextos; se algum dia não couber mesmo, quebra para 2 linhas em vez de cortar. */
.pontuacao-destaque .clube-nome,
.classificacao-premium .clube-nome {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

@media (max-width: 640px) {
    .pontuacao-destaque .clube-nome-completo,
    .classificacao-premium .clube-nome-completo {
        display: none;
    }

    .pontuacao-destaque .clube-nome-sigla,
    .classificacao-premium .clube-nome-sigla {
        display: inline;
    }
}

/* ---------- Fundos com textura de favo de mel ----------
   Primeira aplicação da identidade "cera de abelha" (Azul Puro / Verde
   Floresta / Amarelo Mel / Branco): usada onde uma imagem opcional pode não
   existir (ex.: capa institucional do clube, nunca obrigatória na API) e o
   fundo ficava em branco em vez de mostrar algo premium. Padrão de
   hexágonos verificado visualmente (screenshot local) antes de aplicar —
   a ordem das camadas importa: o SVG do favo tem de vir primeiro (mais "em
   cima"), senão o gradiente de base, que é opaco, tapa-o por completo. */
.about-img-fallback {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='103.92' height='180' viewBox='0 0 103.92 180'%3E%3Cpolygon points='51.96,30 0,60 -51.96,30 -51.96,-30 0,-60 51.96,-30' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3Cpolygon points='103.92,120 51.96,150 0,120 0,60 51.96,30 103.92,60' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E"),
        radial-gradient(circle at 18% 22%, rgba(var(--color-primary-dark-rgb), 0.55), transparent 55%),
        radial-gradient(circle at 88% 78%, rgba(var(--color-gold-rgb), 0.35), transparent 50%),
        linear-gradient(160deg, var(--color-blue-pure) 0%, var(--color-blue-pure-dark) 55%, var(--color-primary-dark) 100%);
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
    background-size: 51.96px 90px, cover, cover, cover;
}

/* =====================================================================
   Página "A Nossa História" (Clube/Historia.cshtml) — redesign 2026-09-09.
   Classes exclusivas desta página (confirmado por grep antes de escrever
   isto), por isso nada aqui tem impacto no resto do site. Vocabulário:
   mesma paleta e o mesmo favo de mel já estabelecidos, aplicados como uma
   ficha institucional/editorial em vez do grid de botões + <ul> genérico
   que estava lá antes.
   ===================================================================== */

/* ---------- Hero institucional (imagem de capa + emblema + nome do clube) ----------
   Antes o emblema aparecia como uma bolacha pequena presa ao canto superior
   esquerdo, como um cartão de visita — não como a apresentação do clube.
   Este cartão é a primeira coisa que se vê na página, por isso funciona como
   uma mini "landing": emblema em destaque com halo, nome do clube e o selo
   de fundação, tudo centrado vertical e horizontalmente. Um véu escuro
   uniforme (.about-img::after) garante contraste tanto sobre o gradiente de
   reserva (sem foto de capa) como sobre uma foto real, qualquer que seja o
   seu brilho. */
.about-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 48px 24px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 50px -16px rgba(6, 18, 48, 0.35);
}

    .about-img::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(165deg, rgba(6, 18, 48, 0.35), rgba(6, 18, 48, 0.65));
        pointer-events: none;
    }

    .about-img-fallback::after {
        background: linear-gradient(165deg, rgba(6, 18, 48, 0.12), rgba(6, 18, 48, 0.3));
    }

.about-img-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    max-width: 100%;
}

/* Sem moldura de círculo (nem triângulo) à volta do emblema — com um PNG
   transparente já triangular, qualquer moldura geométrica ou compete com a
   forma do logo (triângulo dentro de moldura triangular raramente alinha
   bem, sobretudo na ponta de cima) ou fica com espaço vazio estranho nos
   cantos (círculo). O halo continua a dar destaque/profundidade — é só um
   brilho radial difuso, sem contorno rígido — e o logo "flutua" directamente
   sobre o degradê, com sombra a acompanhar o próprio contorno (drop-shadow,
   não box-shadow, que seria sempre rectangular). */
/* Anel circular transparente à volta do emblema (sem preencher) — dá o
   toque "futurista" pedido sem voltar a competir com a forma triangular do
   logo: é só um contorno fino + halo, o triângulo continua a "flutuar"
   dentro dele, não encaixado a preencher um círculo sólido. */
.about-logo-halo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: clamp(120px, 20vw, 172px);
    height: clamp(120px, 20vw, 172px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 55%, transparent 72%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.4),
        0 0 0 8px rgba(255, 255, 255, 0.07),
        0 0 26px rgba(255, 255, 255, 0.16);
}

.about-logo-badge {
    width: clamp(96px, 15vw, 136px);
    height: clamp(96px, 15vw, 136px);
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(6, 18, 48, 0.55));
}

.about-clube-nome {
    margin: 0;
    font-size: clamp(22px, 3.4vw, 32px);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Selo "fundado em" — mesmo vocabulário do selo circular usado no menu
   mobile/links da navbar (círculo translúcido + número em destaque). */
.call-us {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(6, 18, 48, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 12px 28px;
    color: #fff;
}

    .call-us h4 {
        margin: 0 0 2px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-gold-light);
    }

    .call-us p {
        margin: 0;
        font-size: 26px;
        font-weight: 800;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

/* ---------- Ficha do clube (substitui a <ul> simples) ---------- */
.historia-ficha {
    display: grid;
    gap: 4px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.historia-ficha-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(11, 31, 75, 0.08);
}

    .historia-ficha-item:last-child {
        border-bottom: none;
    }

    .historia-ficha-item i {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(var(--color-primary-rgb), 0.08);
        color: var(--color-primary-dark);
        font-size: 16px;
    }

.historia-ficha-texto {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.historia-ficha-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-body);
    opacity: 0.7;
}

.historia-ficha-valor {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--color-secondary);
}

/* ---------- Barra de separadores (substitui o grid de botões grandes) ---------- */
.historia-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    gap: 10px;
    padding: 4px 4px 14px;
    margin: 0 0 8px;
    list-style: none;
    border-bottom: 1px solid rgba(11, 31, 75, 0.1);
    box-sizing: border-box;
    /* Rede de segurança: em larguras intermédias, cinco pastilhas (uma com
       rótulo comprido, "Visão, Missão e Valores") podem, por arredondamento
       do motor de layout, deixar uma pastilha meio cortada em vez de
       transitar de linha. Com scroll horizontal disponível nunca fica
       inacessível, mesmo nesse caso raro. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

    .historia-tabs::-webkit-scrollbar {
        height: 5px;
    }

    .historia-tabs::-webkit-scrollbar-thumb {
        background: rgba(11, 31, 75, 0.15);
        border-radius: 10px;
    }

/* Coluna de leitura centrada — usada no painel "História" e na descrição
   do estádio, para o texto não ficar esticado de ponta a ponta do
   container num ecrã grande. */
.historia-coluna-central {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

.historia-tab-link {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-text-body);
    background: rgba(11, 31, 75, 0.05);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

    .historia-tab-link i {
        font-size: 15px;
    }

    .historia-tab-link:hover {
        background: rgba(var(--color-primary-rgb), 0.1);
        color: var(--color-primary-dark);
    }

    .historia-tab-link.active {
        color: #fff;
        background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
        box-shadow: 0 10px 22px -8px rgba(var(--color-primary-rgb), 0.55);
    }

/* Cinco separadores com rótulos compridos ("Visão, Missão e Valores") não
   cabem numa só linha em ecrãs muito estreitos — reduzir para dar folga
   e evitar que a última pastilha de cada linha fique cortada na margem. */
@media (max-width: 480px) {
    .historia-tabs {
        gap: 8px;
    }

    .historia-tab-link {
        padding: 8px 13px;
        font-size: 12.5px;
        gap: 6px;
    }

        .historia-tab-link i {
            font-size: 13px;
        }
}

/* ---------- Cabeçalho de cada painel ---------- */
.historia-painel-titulo {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 22px;
}

    .historia-painel-titulo h3 {
        margin: 0;
        font-size: 26px;
        font-weight: 800;
        color: var(--color-secondary);
    }

    .historia-painel-titulo::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.35), transparent);
    }

/* Título "Descrição do Clube"/"Descrição do Estádio" — ficaram sem estilo
   próprio depois de limpar o CSS isolado antigo (Historia.cshtml.css), que
   tinha regras a colidir com o resto deste redesign (ver esse ficheiro). */
.portfolio-info h3,
.estadio-ficha h3 {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 800;
    color: var(--color-secondary);
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(11, 31, 75, 0.08);
}

/* ---------- Coluna de leitura para texto longo (história, estádio) ---------- */
.historia-texto {
    max-width: 72ch;
    font-size: 16px;
    line-height: 1.85;
    color: var(--color-text-body);
}

    .historia-texto::first-letter {
        float: left;
        font-family: var(--font-secondary);
        font-size: 58px;
        font-weight: 800;
        line-height: 0.8;
        padding: 6px 8px 0 0;
        color: var(--color-primary-dark);
    }

/* ---------- Painel do Estádio: imagem única a preencher a coluna ----------
   Antes usava um swiper com uma única slide a 75% de largura — com só uma
   imagem, isso deixava margens vazias e assimétricas dos dois lados. Uma
   imagem simples com object-fit:cover preenche sempre a coluna toda e
   acompanha a altura da ficha ao lado (height:100% + row com gy-4). */
.estadio-capa {
    position: relative;
    height: 100%;
    min-height: 320px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 44px -16px rgba(6, 18, 48, 0.3);
    background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark, #061230));
}

    .estadio-capa img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 320px;
        object-fit: cover;
    }

.estadio-capa-legenda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 20px;
    background: linear-gradient(180deg, transparent, rgba(6, 18, 48, 0.85));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

.estadio-ficha {
    height: 100%;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 26px -12px rgba(6, 18, 48, 0.18);
    padding: 26px 24px;
}

    .estadio-ficha h3 {
        margin: 0 0 16px;
        font-size: 18px;
        font-weight: 800;
        color: var(--color-secondary);
    }

/* Botão "Voltar à Home" da página de detalhe do estádio (Views/Estadio/Detalhes.cshtml)
   — gerado por asp-action, por isso fica aqui e não no .cshtml.css da própria página
   (AnchorTagHelper não preserva o atributo de scoping, ver explicação mais acima
   sobre o carrossel de patrocinadores). */
.estadio-detalhe-voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
}

/* Gatilho do estádio na Home (cartões "Próximo Jogo" e "Próximos Jogos") — ligação
   normal para Estadio/Detalhes (ver EstadioController), não botão de modal. Herda a
   cor/fonte do contexto onde está (claro na secção "Próximos Jogos", escuro no
   "Próximo Jogo") em vez de estilo fixo, com sublinhado + leve realce a indicar que é
   clicável. Fica em premium.css (não em Home/Index.cshtml.css) porque é gerado por
   asp-controller/asp-action — o AnchorTagHelper não preserva o atributo de scoping
   (mesmo motivo do carrossel de patrocinadores, ver mais acima). */
.estadio-detalhe-gatilho {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 6px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .estadio-detalhe-gatilho:hover,
    .estadio-detalhe-gatilho:focus-visible {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

.matchday-meta .estadio-detalhe-gatilho:hover,
.matchday-meta .estadio-detalhe-gatilho:focus-visible {
    color: var(--color-gold);
    background: rgba(255, 255, 255, 0.08);
}

/* Ligação "Ver convocados" no cartão do próximo jogo (Home/Index.cshtml) — mesma razão
   das regras acima para viver aqui e não no CSS isolado do Index: é um <a asp-controller=
   .../asp-action=...>. */
.matchday-convocados {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 18px;
}

.matchday-convocados-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 1.5px solid rgba(var(--color-gold-rgb), 0.5);
    border-radius: 30px;
    color: var(--color-gold-light);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .matchday-convocados-link:hover,
    .matchday-convocados-link:focus-visible {
        background: rgba(var(--color-gold-rgb), 0.12);
        border-color: var(--color-gold);
        color: #fff;
    }

.calendario-jogo-info .estadio-detalhe-gatilho:hover,
.calendario-jogo-info .estadio-detalhe-gatilho:focus-visible {
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.08);
}

/* ---------- Conquistas (substitui a <ul class="victory-list"> plana) ---------- */
.conquista-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.conquista-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: 0 10px 26px -12px rgba(6, 18, 48, 0.18);
    border-left: 4px solid var(--color-gold);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .conquista-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 36px -14px rgba(6, 18, 48, 0.28);
    }

    .conquista-card-icone {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-image: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
        color: var(--color-secondary-dark);
        font-size: 19px;
        margin-bottom: 14px;
    }

    .conquista-card h4 {
        margin: 0 0 8px;
        font-size: 17px;
        font-weight: 800;
        color: var(--color-secondary);
        line-height: 1.35;
    }

    .conquista-card-modalidade {
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-primary-dark);
        background: rgba(var(--color-primary-rgb), 0.09);
        padding: 4px 11px;
        border-radius: 50px;
        margin-bottom: 10px;
    }

    .conquista-card-data {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--color-text-body);
        opacity: 0.85;
    }

/* ---------- In Memorian ---------- */
.memoria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 22px;
}

.memoria-card {
    text-align: center;
    padding: 26px 18px 22px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 26px -12px rgba(6, 18, 48, 0.16);
}

.memoria-foto-link {
    display: inline-block;
    margin-bottom: 16px;
}

.memoria-foto {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-gold);
    box-shadow: 0 10px 22px -8px rgba(6, 18, 48, 0.3);
}

.memoria-card h4 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 800;
    color: var(--color-secondary);
}

.memoria-funcao {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary-dark);
    margin-bottom: 10px;
}

.memoria-datas {
    font-size: 13px;
    color: var(--color-text-body);
    opacity: 0.85;
}

/* ---------- Visão, Missão e Valores — cartão navy + favo de mel, mesma
   identidade dos fundos de destaque já estabelecidos no resto do site. ---------- */
.vmv-card {
    height: 100%;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='103.92' height='180' viewBox='0 0 103.92 180'%3E%3Cpolygon points='51.96,30 0,60 -51.96,30 -51.96,-30 0,-60 51.96,-30' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3Cpolygon points='103.92,120 51.96,150 0,120 0,60 51.96,30 103.92,60' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3C/svg%3E"),
        radial-gradient(circle at 20% 15%, rgba(var(--color-primary-rgb), 0.28), transparent 50%),
        linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 103.92px 180px, cover, cover;
    border-radius: 18px;
    box-shadow: 0 16px 36px -14px rgba(6, 18, 48, 0.4);
    padding: 32px 26px;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .vmv-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 46px -16px rgba(6, 18, 48, 0.5);
    }

    .vmv-card i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background-image: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
        color: var(--color-secondary-dark);
        font-size: 24px;
    }

    .vmv-card h4 {
        color: #fff;
        font-weight: 800;
        margin: 18px 0 10px;
    }

    .vmv-card p {
        color: rgba(255, 255, 255, 0.75);
        margin: 0;
        font-size: 14.5px;
        line-height: 1.75;
    }

/* Valores vem da API como uma lista de "Termo — descrição" (uma por linha),
   não uma frase corrida como Visão/Missão — por isso lê-se melhor como lista
   alinhada à esquerda do que como parágrafo centrado. */
.valores-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

    .valores-lista li {
        position: relative;
        padding-left: 18px;
        color: rgba(255, 255, 255, 0.75);
        font-size: 14px;
        line-height: 1.6;
    }

        .valores-lista li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 7px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--color-gold);
        }

        .valores-lista li strong {
            color: #fff;
            font-weight: 700;
        }

@media (max-width: 991px) {
    .about-img {
        min-height: 320px;
        padding: 36px 20px;
    }

    .about-img-hero-content {
        gap: 14px;
    }
}

/* =====================================================================
   Patrocinadores — carrossel infinito (Home/Index) — carrossel em CSS
   puro, sem depender do Swiper: duplica-se a fila de logótipos e anima-se
   um translateX(0 → -50%) em loop — ao completar, a segunda metade
   (idêntica à primeira) já está exactamente onde a primeira começou, por
   isso o reinício do ciclo é impossível de notar.
   Fica em premium.css (não no CSS isolado de Home/Index) de propósito: os
   links são gerados por asp-controller/asp-action (AnchorTagHelper), que
   não preserva o atributo de scoping (b-xxxx) no próprio <a> — só nos
   filhos — por isso uma regra scoped nunca bate certo com o elemento real.
   ===================================================================== */
.patrocinadores-marquee-section {
    padding: 60px 0;
}

/* Patrocinador Oficial em destaque próprio, fora da fita — deixou de ser só mais um
   logótipo a desfilar com os colaboradores, fica sempre parado e maior, com selo
   dourado (mesmo vocabulário do cartão em Parceiros/Index). */
.patrocinador-oficial-destaque {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 320px;
    margin: 0 auto 48px;
    padding: 30px 28px 24px;
    background: #fff;
    border: 2px solid var(--color-gold);
    border-radius: 18px;
    box-shadow: 0 20px 44px -16px rgba(var(--color-gold-rgb), 0.45);
    text-align: center;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .patrocinador-oficial-destaque:hover {
        transform: translateY(-4px);
        box-shadow: 0 26px 52px -16px rgba(var(--color-gold-rgb), 0.6);
    }

.patrocinador-oficial-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: var(--color-secondary-dark);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 6px 14px;
    border-radius: 20px;
}

.patrocinador-oficial-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 84px;
}

    .patrocinador-oficial-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.patrocinador-oficial-nome {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-secondary);
}

.patrocinadores-marquee {
    overflow: hidden;
    /* Esbate os logótipos nas pontas em vez de os cortar a direito —
       disfarça a borda do contentor, reforça a sensação de "fita infinita". */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.patrocinadores-marquee-trilho {
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    animation: patrocinadores-scroll 30s linear infinite;
}

.patrocinadores-marquee:hover .patrocinadores-marquee-trilho {
    animation-play-state: paused;
}

.patrocinadores-marquee-logo {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 84px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px -10px rgba(6, 18, 48, 0.2);
    padding: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .patrocinadores-marquee-logo:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 28px -10px rgba(6, 18, 48, 0.3);
    }

    .patrocinadores-marquee-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

@keyframes patrocinadores-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .patrocinadores-marquee-trilho {
        animation: none;
    }
}

@media (max-width: 576px) {
    .patrocinadores-marquee-logo {
        width: 104px;
        height: 68px;
        padding: 10px;
    }
}

/* =====================================================================
   Formulário de candidatura a sócio (Parceiros/Socio.cshtml) — identidade
   própria (2026-09-11), movido para aqui de Socio.cshtml.css pelo mesmo
   motivo do carrossel de patrocinadores mais acima: <input asp-for="...">
   é gerado pelo InputTagHelper, que não preserva o atributo de scoping
   (b-xxxx) no elemento — qualquer regra CSS isolada que tivesse esses
   inputs como alvo nunca batia certo com o HTML real (confirmado ao vivo:
   rádios de "Classe de Sócio" enormes, com aparência nativa do browser, e
   ícones dos campos de texto por cima do próprio texto).
   ===================================================================== */

.socio-form-seccao {
    background: #fff;
    border: none;
    border-radius: 18px;
    padding: 28px 26px 24px;
    margin-bottom: 22px;
    box-shadow: 0 14px 36px -20px rgba(var(--color-secondary-rgb), 0.35);
}

.socio-form-seccao legend {
    float: none;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 0 0 12px;
    margin-bottom: 14px;
    border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.15);
    font-family: var(--font-secondary);
    font-size: 17px;
    font-weight: 800;
    color: var(--color-secondary);
}

    .socio-form-seccao legend i {
        color: var(--color-gold);
        font-size: 19px;
    }

/* ---------- Campos de texto/data/email/tel — ícone embutido, sem o
   bloco cinzento separado do .input-group de fábrica ---------- */
.socio-campo .form-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.socio-campo-caixa {
    position: relative;
}

    .socio-campo-caixa i {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: var(--color-primary);
        font-size: 16px;
        pointer-events: none;
        transition: color 0.2s ease;
    }

    .socio-campo-caixa .form-control {
        padding: 12px 16px 12px 44px;
        border: 1.5px solid #e2e7f0;
        border-radius: 12px;
        background: #f8faff;
        font-size: 14.5px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

        .socio-campo-caixa .form-control:focus {
            border-color: var(--color-primary);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.13), 0 0 0 1px var(--color-primary) inset;
            outline: none;
        }

        .socio-campo-caixa:focus-within i {
            color: var(--color-gold);
        }

/* ---------- Classe de Sócio — cartões seleccionáveis em vez de <select> ----------
   Cada rádio nativo fica escondido (não display:none, para continuar focável por
   teclado/leitor de ecrã) logo antes da sua <label>; toda a aparência de
   seleccionado/hover/foco é feita via CSS puro com o combinador de irmão
   adjacente (input:checked + label), sem depender de nenhum JS. */
.classe-socio-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.classe-socio-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.classe-socio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 16px;
    border: 2px solid #e2e7f0;
    border-radius: 16px;
    background: #f8faff;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

    .classe-socio-card:hover {
        border-color: rgba(var(--color-primary-rgb), 0.45);
        transform: translateY(-2px);
        box-shadow: 0 10px 24px -14px rgba(var(--color-secondary-rgb), 0.4);
    }

.classe-socio-radio:focus-visible + .classe-socio-card {
    outline: 3px solid rgba(var(--color-primary-rgb), 0.35);
    outline-offset: 2px;
}

.classe-socio-radio:checked + .classe-socio-card {
    border-color: var(--color-primary);
    background: linear-gradient(160deg, rgba(var(--color-primary-rgb), 0.08) 0%, #fff 65%);
    box-shadow: 0 14px 30px -16px rgba(var(--color-primary-rgb), 0.55);
}

    .classe-socio-radio:checked + .classe-socio-card .classe-socio-card-selo {
        opacity: 1;
        transform: scale(1);
    }

.classe-socio-card-selo {
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--color-primary);
    font-size: 19px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.classe-socio-card-nome {
    font-weight: 800;
    font-size: 15px;
    color: var(--color-secondary);
    padding-right: 22px;
}

.classe-socio-card-preco {
    font-family: var(--font-secondary);
    font-weight: 800;
    font-size: 19px;
    color: var(--color-primary-dark);
}

    .classe-socio-card-preco small {
        font-family: var(--font-primary);
        font-size: 11px;
        font-weight: 600;
        color: var(--color-text-body);
        opacity: 0.7;
        margin-left: 2px;
    }

.classe-socio-card-preco-mensal {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-text-body);
    opacity: 0.65;
}

.classe-socio-card-beneficios {
    list-style: none;
    margin: 4px 0 0;
    padding: 8px 0 0;
    border-top: 1px dashed rgba(11, 31, 75, 0.12);
    font-size: 11.5px;
    color: var(--color-text-body);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .classe-socio-card-beneficios li::before {
        content: "\2713";
        color: var(--color-primary);
        font-weight: 800;
        margin-right: 6px;
    }

/* ---------- Grupo "Sócio Efectivo" — os 7 escalões (A–G) juntos, à parte
   das classes avulsas (ex.: "Ouro"), num sub-grelha mais compacta ---------- */
.classe-socio-efectivo-grupo {
    grid-column: 1 / -1;
    border-top: 1px dashed rgba(11, 31, 75, 0.15);
    padding-top: 16px;
    margin-top: 4px;
}

.classe-socio-efectivo-titulo {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
    opacity: 0.75;
    margin-bottom: 12px;
}

    .classe-socio-efectivo-titulo i {
        color: var(--color-gold);
    }

.classe-socio-efectivo-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

.classe-socio-card-escalao {
    align-items: center;
    text-align: center;
    padding: 16px 10px 14px;
    gap: 4px;
}

.classe-socio-card-escalao-letra {
    font-family: var(--font-secondary);
    font-weight: 800;
    font-size: 24px;
    color: var(--color-secondary);
    line-height: 1;
}

.classe-socio-card-escalao .classe-socio-card-preco {
    font-size: 13px;
}

.classe-socio-erro {
    grid-column: 1 / -1;
    display: none;
    margin-top: -4px;
}

.was-validated .classe-socio-radio:invalid ~ .classe-socio-erro {
    display: block;
}

/* ---------- Anexos — cartão "dropzone" em vez do <input type="file"> de fábrica ---------- */
.socio-ficheiro-campo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 2px dashed #cdd6e6;
    border-radius: 14px;
    background: #f8faff;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

    .socio-ficheiro-campo:hover {
        border-color: rgba(var(--color-primary-rgb), 0.5);
    }

    .socio-ficheiro-campo i {
        font-size: 22px;
        color: var(--color-primary);
        flex: none;
    }

.socio-ficheiro-texto {
    font-size: 13.5px;
    color: var(--color-text-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.socio-ficheiro-campo-preenchido {
    border-style: solid;
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.05);
}

    .socio-ficheiro-campo-preenchido .socio-ficheiro-texto {
        color: var(--color-secondary);
        font-weight: 700;
    }

.socio-ficheiro-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.socio-ficheiro-erro {
    color: #d9534f;
    font-size: 12.5px;
    margin-top: 6px;
}

/* ---------- Barras de resultado da enquete ao vivo (Views/Jogo/AoVivo.cshtml) — vivem
   aqui e não em AoVivo.cshtml.css: depois de um voto, JS substitui os botões por estas
   barras via innerHTML/createElement (ver atualizarResultadoEnquete no script da view), e
   HTML inserido assim nunca recebe o atributo de scoping do CSS isolado (mesmo motivo de
   .chat-mensagem/.campo-jogador acima). A moldura do cartão e os botões (nunca recriados
   por JS, só desactivados) ficam normalmente em AoVivo.cshtml.css. ---------- */
.enquete-opcao-resultado {
    padding: 10px 0;
}

.enquete-opcao-minha .enquete-opcao-resultado-topo span:first-child {
    color: var(--color-primary);
    font-weight: 700;
}

.enquete-opcao-resultado-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--color-secondary);
}

    .enquete-opcao-resultado-topo i {
        color: var(--color-primary);
        margin-left: 4px;
    }

.enquete-opcao-barra {
    height: 8px;
    border-radius: 4px;
    background: rgba(var(--color-primary-rgb), 0.08);
    overflow: hidden;
}

.enquete-opcao-barra-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold), var(--color-primary));
    border-radius: 4px;
    transition: width .5s ease;
}