/* Tema CER Viamão — verde e dourado elegante */
:root {
  --primary: #0f5132;
  --primary-600: #0b3e26;
  --accent: #c8a951; /* dourado */
  --accent-600: #b3923f;
  --dark: #0b0e12;
  --light: #f8f9fa;
  /* Tema minimalista */
  --bg: #0b0e12; /* fundo principal uniforme */
  --surface: #121614; /* superfícies (cards/navbar) */
  --surface-2: #161b18; /* hover de superfícies */
  --text: #f8f9fa; /* texto principal */
  --muted: #dfe5e0; /* texto secundário */
  --border: rgba(248, 249, 250, 0.12); /* bordas sutis */
  --shadow-0: 0 6px 20px rgba(0,0,0,.22);
  --shadow-1: 0 12px 32px rgba(0,0,0,.35);
}

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--primary); /* fundo verde sólido */
  color: var(--text);
  min-height: 100vh; /* garante altura mínima da viewport */
  display: flex; /* layout coluna para sticky footer */
  flex-direction: column;
}
html, body { height: 100%; }
main { flex: 1 0 auto; }
/* Imagens sempre responsivas */
img { max-width: 100%; height: auto; }

.navbar-glass {
  background: var(--primary); /* sem gradiente no cabeçalho */
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
  box-shadow: none;
}
.navbar .nav-link { color: rgba(233, 236, 239, 0.85); }
.navbar .nav-link:hover { color: var(--accent); }
.brand-logo { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.brand-title { font-weight: 700; letter-spacing: .5px; font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.1rem); }
/* Tipografia moderna */
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; color: var(--light); }
/* Cabeçalhos em cards com fundo claro (Home, destaques) */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { color: #212529; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2rem); }
h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem); }
.brand-title { font-weight: 700; letter-spacing: -0.01em; }

.btn-accent {
  background: var(--accent);
  border-color: var(--accent-600);
  color: #1f1f1f;
}
.btn-accent:hover { background: var(--accent-600); border-color: var(--accent-600); color: #111; }

/* Botão primário: verde da marca com texto branco */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary-600);
  color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #ffffff;
}

.hero-swiper { border-radius: 16px; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
/* Largura total do container e altura proporcional */
.hero-swiper { width: 100%; height: auto; aspect-ratio: 21 / 9; }
.hero-slide { position: relative; height: 100%; min-height: 280px; background-size: cover; background-position: center center; }
.hero-slide::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
.hero-slide::after { pointer-events: none; }
.hero-content { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; z-index:2; }
.hero-content .card { background: rgba(15,81,50,.85); border: 1px solid rgba(200,169,81,.35); }

/* ===== Mobile: hero mais compacto (título + link) ===== */
@media (max-width: 576px) {
  .hero-slide { min-height: 220px; }
  .hero-content .card { padding: .5rem !important; border-radius: 10px; transform: translateY(-10px); }
  .hero-content .card h2 { font-size: clamp(1rem, 3.5vw, 1.125rem); margin-bottom: .5rem; }
  .hero-content .card p { display: none !important; }
  .hero-content .btn { font-size: .875rem; padding: .375rem .6rem; }
}

/* ===== Mobile: setas do carrossel menores ===== */
@media (max-width: 576px) {
  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next { width: 28px; height: 28px; }
  .hero-swiper .swiper-button-prev::after,
  .hero-swiper .swiper-button-next::after { font-size: 16px; }
  .hero-swiper .swiper-button-prev { left: 8px; }
  .hero-swiper .swiper-button-next { right: 8px; }
}

/* ===== Mobile: centralizar conteúdo dos cards de ingressos ===== */
@media (max-width: 576px) {
  .tickets-insight .card-body { text-align: center; }
  .tickets-insight .card-body .d-flex.gap-2 { justify-content: center; }
  .tickets-insight .card-body .d-flex.gap-2 .btn { flex: 0 0 auto; }
}

.feature-card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-0); border-radius: 14px; padding: 18px; height: 100%; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: rgba(248,249,250,.2); }
.feature-card h3 { color: #fff; }
.feature-card p { color: var(--muted); }

.footer-contrast { background-color: rgba(var(--bs-dark-rgb), 1); border-top: 1px solid rgba(255,255,255,.15); }
.footer-heading { color: var(--light); font-weight: 700; letter-spacing: -0.01em; }
.footer-sub { color: rgba(248,249,250,.8); }
/* Mobile: centralizar título e subtítulo do rodapé */
@media (max-width: 576px) {
  .footer-heading,
  .footer-sub {
    text-align: center;
  }
}
/* Mobile: centralizar texto de contato e copyright no rodapé */
@media (max-width: 576px) {
  .footer-contrast address,
  .footer-contrast p {
    text-align: center;
  }
}
.social-icons { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.social-icons .social-link { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.06); color: #dcdcdc; transition: background .18s ease, transform .18s ease, border-color .18s ease, color .18s ease; }
.social-icons .social-link:hover { background: var(--accent); border-color: var(--accent); color: #1f1f1f; transform: translateY(-2px); }
/* Estilos do formulário de newsletter no rodapé escuro */
.footer-contrast .newsletter .form-control { background-color: rgba(255,255,255,.08); color: var(--light); border-color: var(--border); }
.footer-contrast .newsletter .form-control::placeholder { color: rgba(248,249,250,.65); }
.footer-contrast .newsletter .form-control:focus { background-color: rgba(255,255,255,.12); color: var(--light); border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(200,169,81,.25); }
.footer-contrast .newsletter .btn-outline-light { border-color: var(--border); color: var(--light); }
.footer-contrast .newsletter .btn-outline-light:hover { background-color: var(--accent); border-color: var(--accent); color: #1f1f1f; }
.sponsor-title { text-transform: uppercase; color: #e74c3c; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-align: center; }
.sponsors-block { text-align: center; }
.sponsors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 110px)); gap: 12px; align-items: center; justify-items: center; justify-content: center; }
.sponsors-grid img { width: auto; height: 34px; object-fit: contain; padding: 0; background: transparent; border: 0; border-radius: 0; filter: brightness(0) invert(1) grayscale(100%) contrast(115%); transition: transform .2s ease, filter .2s ease; }
.sponsors-grid img:hover { transform: translateY(-1px); filter: brightness(0.95) invert(1) grayscale(100%) contrast(120%); }
.sponsors-grid--partners img { height: 28px; }
.sponsors-grid--support img { height: 24px; }
.dev-mention { color: rgba(248,249,250,.75); font-weight: 600; letter-spacing: .02em; }

.card, .table { color: #111; }
.table { background: #fff; }

/* Newsletter */
.newsletter input { max-width: 360px; }

/* Utilitário para imagens preencherem cartões */
.object-cover { object-fit: cover; }

/* Miniaturas de produto com proporção uniforme */
.product-thumb { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; }

/* Imagens clicáveis com indicação de zoom */
a.glightbox img { cursor: zoom-in; }

/* Acessibilidade: estilos de links com alto contraste e foco visível */
main a:not(.btn):not(.nav-link):not(.navbar-brand):not(.glightbox) {
  color: #c8a951; /* fallback */
  color: var(--accent);
  text-decoration-color: rgba(200,169,81,.65);
}
main a:not(.btn):not(.nav-link):not(.navbar-brand):not(.glightbox):hover {
  color: #e1c46c;
  text-decoration-color: rgba(200,169,81,.95);
}
/* Foco visível para navegação por teclado */
a:focus-visible, .btn:focus-visible {
  outline: 2px solid #c8a951; /* fallback */
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Ajuste de contraste para botões outline em fundo escuro */
.btn-outline-light {
  color: #ffffff;
  border-color: rgba(255,255,255,.85);
}

/* Contraste de links e texto em fundo escuro (rodapé) */
.footer-contrast a:not(.btn):not(.social-link) {
  color: #ffffff;
  text-decoration-color: rgba(255,255,255,.65);
}
.footer-contrast a:not(.btn):not(.social-link):hover {
  color: #ffffff;
  text-decoration-color: rgba(255,255,255,.9);
}
.footer-contrast .text-muted {
  color: rgba(248,249,250,.80) !important; /* melhora legibilidade em fundo escuro */
}
.footer-contrast .social-icons .social-link {
  color: #f8f9fa; /* ícones com branco para melhor contraste */
}
.footer-contrast .social-icons .social-link:hover {
  color: #1f1f1f; /* mantém contraste quando fundo muda no hover */
}
.btn-outline-light:hover, .btn-outline-light:focus {
  color: #0b0e12;
  background-color: #f8f9fa; /* melhora legibilidade ao hover/focus */
}

/* Modernização global de componentes */
.card { border-radius: 14px; box-shadow: var(--shadow-0); transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.card .card-img-top { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.btn, .form-control, .form-select { border-radius: 10px; }
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(200,169,81,.25);
}

/* Em cards (fundo claro), garantir legibilidade de .btn-outline-light */
.card .btn-outline-light {
  color: var(--accent);
  border-color: var(--accent);
}
.card .btn-outline-light:hover, .card .btn-outline-light:focus {
  background-color: var(--accent);
  color: #1f1f1f; /* texto escuro sobre dourado */
}

/* Responsividade: ajustes de proporção do carrossel e tamanho do logotipo */
@media (min-width: 768px) {
  .hero-swiper { aspect-ratio: 16 / 9; }
}
@media (max-width: 576px) {
  .brand-logo { width: 36px; height: 36px; }
}

/* Ajustes complementares específicos para mobile */
@media (max-width: 576px) {
  /* Compactar espaçamentos do conteúdo principal em telas pequenas */
  main.container.my-4 { margin-top: .75rem; margin-bottom: .75rem; }
  /* Reduzir tamanho dos escudos e pontuação no scoreboard para caber melhor */
  .scoreboard .crest { width: 44px; height: 44px; }
  .scoreboard .score { font-size: 1.2rem; }
}

/* Limitar resumo a 3 linhas com reticências (suporte amplo em navegadores) */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Área de Notícias (Blog) ===== */
/* Card moderno com cantos arredondados, sombra suave e transições acessíveis */
.news-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-0);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.news-card:hover, .news-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
  background: var(--surface-2);
  border-color: rgba(248,249,250,.2);
}
.news-card .card-body { color: var(--text); }
.news-card .card-text { color: rgba(248, 249, 250, 0.85); font-size: 0.96rem; line-height: 1.5; }
.news-card .card-title { color: #ffffff; font-weight: 400; font-size: 1rem; }
/* Texto secundário (datas, etc.) mais legível em fundo escuro */
.news-card .text-muted { color: rgba(248, 249, 250, 0.75) !important; }

/* Imagem 16:9 com cobertura e contraste preservado */
.news-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(105%);
  transition: transform .2s ease, filter .2s ease;
}
.news-card:hover .news-image { transform: scale(1.02); filter: saturate(115%); }

/* Badge de destaque (ribbon) no topo */
.featured .featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .8rem;
  color: #1f1f1f;
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 0 8px 8px 0;
  position: absolute;
  top: 10px;
  left: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}

/* Chips de filtro com estado ativo mais legível em fundo escuro */
.btn-outline-light.active, .btn-outline-light[aria-pressed="true"] {
  color: #1f1f1f;
  background-color: var(--accent);
  border-color: var(--accent);
}
.btn-outline-light.active:hover { background-color: var(--accent-600); border-color: var(--accent-600); }
.section-divider { border-top: 1px solid var(--border); }

/* ===== Área de Ingressos ===== */
.tickets-insight .card-header {
  background-color: #fff;
  border-bottom: 2px solid var(--accent);
}
.tickets-insight .card { height: 100%; }
.tickets-insight .card-title { font-weight: 800; letter-spacing: .02em; text-align: center; }
.tickets-insight .card-header strong { letter-spacing: .03em; }
.scoreboard-time {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
}
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: .75rem; margin-bottom: .75rem; }
.scoreboard .crest { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--border); background: #fff; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.scoreboard .crest-code { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; color: #212529; text-transform: uppercase; }
.scoreboard .score { font-size: 1.35rem; font-weight: 800; color: #212529; }
.lineup-list { list-style: none; padding-left: 0; margin: 0; }
.lineup-list li { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0; border-bottom: 1px dashed rgba(0,0,0,.08); }
.lineup-list li:last-child { border-bottom: 0; }
.lineup-list .lineup-icon { width: 18px; height: 18px; margin-right: .5rem; fill: var(--accent); flex-shrink: 0; }
.lineup-list .label { font-weight: 600; color: #495057; }
.lineup-list .value { color: #212529; }
.fixtures-list .list-group-item { border-radius: 10px; margin-bottom: .35rem; }
.fixtures-list .list-group-item:hover { border-color: var(--accent); }
.fixtures-crest { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-right: .5rem; border: 1px solid var(--border); }
.fixtures-crest-code { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .75rem; color: #212529; }

/* ===== Página Sobre ===== */
/* Tipografia ampliada e responsiva para parágrafos da página Sobre */
.page-about p {
  font-size: 1.125rem; /* ~18px: quebra mais linhas e melhora a leitura */
  line-height: 1.85;   /* espaçamento confortável entre linhas */
  margin-bottom: 1rem;
  color: #000000;
}
@media (max-width: 576px) {
  .page-about p {
    font-size: 1.0625rem; /* ~17px no mobile para manter equilíbrio */
    line-height: 1.75;
  }
}

/* ===== Área de Sócios (Planos e Cadastro) ===== */
.membership-grid { align-items: stretch; }
.membership-card { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.membership-card .card-body { color: var(--text); }
.membership-hero { position: relative; padding: 18px; border-top-left-radius: 14px; border-top-right-radius: 14px; min-height: 92px; display: flex; align-items: center; justify-content: center; gap: .75rem; text-align: center; }
.membership-hero .hero-crest { width: 50px; height: 50px; border-radius: 12px; background: #fff; border: 1px solid var(--border); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.membership-hero .hero-title { font-weight: 800; letter-spacing: .02em; margin-top: 8px; }
.hero-fundador { background: var(--accent); color: #1f1f1f; }
.hero-torcedor { background: var(--primary); color: #ffffff; }
.price-tag { display: flex; align-items: baseline; gap: 8px; margin: .5rem 0 1rem; }
.price-tag .price { font-size: 1.4rem; font-weight: 800; color: #fff; }
.price-tag .period { color: rgba(248, 249, 250, 0.85); }
.benefits { list-style: none; padding-left: 0; margin: 0 0 1rem; }
.benefits li { display: flex; align-items: center; gap: 6px; margin-bottom: .35rem; color: rgba(248, 249, 250, 0.9); }
.benefits li::before { content: "\2713"; color: var(--accent); font-weight: 700; }

.register-hero { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.register-hero .card-body { color: #ffffff; }
.register-hero h1 { color: #ffffff !important; }
.register-hero .text-muted { color: #ffffff !important; }
.plan-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.plan-fundador { background: var(--accent-600); color: #ffffff; }
.plan-torcedor { background: var(--primary); color: #ffffff; }
.register-form .card { border: 1px solid var(--border); background: #fff; border-radius: 12px; overflow: hidden; }
.register-form .card-body { background: transparent; }
.register-form .card-footer { border-top: 1px solid var(--border); }
.register-form .form-control { background: #fff; }

/* Variante sem fundo/borda para páginas informativas (ex.: Sobre) */
.register-form--plain .card { border: 0; background: transparent; box-shadow: none; }
.register-form--plain .card-body { background: transparent; }

@media (max-width: 576px) {
  .price-tag .price { font-size: 1.2rem; }
  .membership-hero { padding: 14px; }
}