/* === Tema Dark/Neon – overrides seguros (não quebra o back) === */
:root {
    --bg: #0c1107;
    --surface: #10170b;
    --card: #ffffff;
    /* cartões claros p/ leitura */
    --ink: #0d120a;
    /* texto em cartões claros */
    --text: #eef6ed;
    --muted: #c7d2c5;
    --title: #ffffff;
    --accent: #34e011;
    /* verde neon */
    --accent-ink: #0c1107;
    --elev: 0 6px 26px rgba(0, 0, 0, .18);
    --shadow: 0 12px 28px rgba(0, 0, 0, .4);
}

/* base */
html,
body {
    background: var(--bg);
    color: var(--text);
}

body {
    font-size: 16px;
    line-height: 1.55;
}

h1,
h2,
h3 {
    color: var(--title);
}

a {
    color: var(--accent);
}

/* cabeçalho/containers sem barras azuis */
.container-home,
.container-mania,
.container-header,
.home-header {
    background: transparent !important;
    box-shadow: none !important;
}

/* header central + logo maior */
.home-header.home-header--center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 18px 12px;
}

.content-logo-home img {
    height: 96px;
    max-height: 12vh;
}

/* ===== HERO (primeira dobra) ===== */
.hero {
    max-width: 1080px;
    margin: 0 auto;
    padding: 96px 24px 64px;
    text-align: center;
}

.hero__logo {
    width: 220px;
    height: auto;
    display: block;
    margin: 0 auto 24px;
}

.hero__title {
    font-weight: 800;
    font-size: clamp(28px, 4vw, 44px);
    margin: 0 0 8px;
}

.hero__subtitle {
    color: var(--text);
    opacity: .95;
    font-weight: 700;
    font-size: clamp(18px, 2.5vw, 28px);
    margin: 4px 0 12px;
}

.hero__kicker {
    color: var(--muted);
    font-size: clamp(14px, 1.6vw, 16px);
    display: inline-block;
    padding-bottom: 12px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(52, 224, 17, .25);
}

.accent {
    color: var(--accent);
}

/* CTA – “QUERO APOSTAR” (neon pulsante) */
.btn-neon,
.btn-want-bet {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    border: 0;
    border-radius: 12px;
    padding: 14px 28px;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: 0 0 0 0 rgba(52, 224, 17, .6), var(--shadow);
    transition: transform .15s ease;
    animation: pulse 1.8s ease-in-out infinite;
    align-items: center;
}

.btn-neon:hover,
.btn-want-bet:hover {
    transform: translateY(-1px);
}

.btn-neon:active,
.btn-want-bet:active {
    transform: translateY(0);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 224, 17, .45), var(--shadow);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(52, 224, 17, 0), var(--shadow);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(52, 224, 17, 0), var(--shadow);
    }
}

/* ===== RESULTADOS ===== */
.container-results {
    background: transparent;
    padding-top: 16px;
}

.container-results .content-results h1 {
    color: black;
}
.container-results .content-results ._resultado {
    color: var(--title);
}

/* navegação lateral das loterias */
.nav-results-desktop,
.header-mobile-results .nav-results-mobile {
    color: var(--text);
}

.nav-results-desktop .active,
.header-mobile-results .active {
    color: var(--accent);
}

/* cartão da tabela (claro p/ contraste) */
.results-desktop .area-results .table-results {
    background: var(--card);
    color: var(--ink);
    border-radius: 14px;
    box-shadow: var(--elev);
}

.table-results .table-head-results,
.table-results .table-body-results {
    color: var(--ink);
}

.table-results .row-table-results span,
.table-results .row-table-results h1 {
    color: var(--ink) !important;
    opacity: 1 !important;
}

.table-results .item-table-results:first-child {
    color: #3b3f38;
    font-weight: 700;
}

/* bolinhas 1º–7º */
.table-head-results .item-table-results h1 {
    background: #1a1130;
    color: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* linhas da tabela */
.table-results .table-body-results .row-table-results {
    border-bottom: 1px solid #ecf0ea;
}

.table-results .table-body-results .row-table-results:hover {
    background: #f7faf5;
}

/* nav vertical clara */
.nav-results-desktop {
    background: #f5f7f5;
    color: var(--ink);
}

.nav-results-desktop .item-nav-results {
    color: var(--ink);
}

.nav-results-desktop .item-nav-results.active {
    color: var(--ink);
    font-weight: 700;
}

/* ===== COTAÇÃO ===== */
.container-quotation {
    background: transparent;
}

.content-quotation .header-quotation h1 {
    color: var(--title);
}

.content-quotation .header-quotation hr {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

/* tabela de cotação (clara) */
.table-quotation table {
    width: 100%;
    background: var(--card);
    color: var(--ink);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
}

.table-quotation thead th {
    background: #f4f7f2;
    color: #14200f;
    font-weight: 800;
    padding: 16px;
    border-bottom: 2px solid #e8eee6;
}

.table-quotation thead th:nth-child(n+2) {
    color: #0b1c05;
}

.table-quotation thead th:nth-child(n+2)::after {
    content: '';
    display: block;
    height: 3px;
    margin-top: 8px;
    background: var(--accent);
    opacity: .85;
    border-radius: 2px;
}

.table-quotation tbody td {
    color: var(--ink);
    padding: 14px 16px;
    border-bottom: 1px solid #edf2ec;
}

.table-quotation tbody tr:nth-child(odd) {
    background: #fafcf8;
}

/* ===== MODAL LOGIN ===== */
.modal-login .modal-content {
    background: #141824;
    border: 1px solid rgba(52, 224, 17, .15);
}

.modal-login .title-modal-login {
    color: #fff;
}

.modal-login .input-group input {
    background: #1d2230;
    color: #e9f7e9;
    border-color: #2a3142;
}

.modal-login .input-group .label-text {
    color: #a8b0a8;
}

.modal-login .link-recovery {
    color: #a7b6a7;
    float: right;
    margin-top: 8px;
}

.modal-login .link-register {
    display: block;
    margin-top: 10px;
    color: var(--accent);
    font-weight: 700;
}

/* ===== RODAPÉ ===== */
.container-footer {
    background: var(--surface) !important;
    color: white;
}

#footerIndex .content-footer--legal {
    display: none !important;
}

/* oculta texto jurídico extenso */
.site-footer .grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: start;
}

.site-footer h4 {
    color: var(--title);
    margin-bottom: 12px;
}

.footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-store {
    background: #0e1430;
    color: #fff;
    border-radius: 999px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, .08);
}

.btn-store i {
    margin-right: 10px;
    font-size: 18px;
}

/* destacar chamada de cadastro dentro do modal */
.modal-login .link-recovery {
    color: #a7b6a7;
    float: right;
    margin-top: 8px;
}

.modal-login .link-register {
    display: block;
    margin-top: 12px;
    color: #9ffe00;
    font-weight: 700;
}

.modal-login .link-register:hover {
    text-decoration: underline;
}

/* ======= THEME OVERRIDES (neon/dark) ======= */
:root {
    --bg: #0c1107;
    --surface: #0c1107;
    --card: #ffffff;
    --ink: #0c1107;
    --text: #eef6ed;
    --muted: #c7d2c5;
    --accent: #34E011;
    --accent-ink: #0c1107;
}

html,
body {
    background: var(--bg);
    color: var(--text);
}

/* header + logo grande que reduz no scroll */
.home-header {
    background: transparent !important;
}

.content-logo-home img {
    height: 400px;
    max-height: 40vh;
    transition: height .25s ease, transform .25s ease;
    display: block;
    margin-inline: auto;
}

body.is-scrolled .content-logo-home img {
    height: 72px;
}

/* hero CENTRALIZADO + CTA GIGANTE */
.content-home {
    padding: 36px 0 8px;
}

.home-presentation {
    text-align: center;
    max-width: 1120px;
    margin: 0 auto;
}

.home-presentation .text-presentation h1 {
    margin-top: 15% !important;
    color: #fff;
    font-weight: 900;
    font-size: clamp(28px, 5vw, 56px);
    line-height: 1.12;
    letter-spacing: .2px;
}

.home-presentation .text-presentation h1 strong {
    color: var(--accent);
}

.home-presentation .text-presentation h2 {
    color: var(--muted);
    margin-top: 8px;
}

.separator-presentation {
    width: 100%;
    max-width: 860px;
    margin-left: 6% !important;
    border: 0;
    border-bottom: 1px solid rgb(161, 254, 0);
}

/* CTA principal – QUERO APOSTAR */
.btn-want-bet {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    border: none;
    font-weight: 900;
    letter-spacing: .4px;
    font-size: clamp(16px, 2.6vw, 22px);
    padding: 18px 36px;
    border-radius: 14px;
    box-shadow: 0 0 0 0 rgba(52, 224, 17, .65), 0 12px 28px rgba(0, 0, 0, .35);
    animation: pulseShadow 1.8s ease-in-out infinite;
}

@keyframes pulseShadow {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 224, 17, .65), 0 12px 28px rgba(0, 0, 0, .35)
    }

    70% {
        box-shadow: 0 0 0 18px rgba(52, 224, 17, 0), 0 12px 28px rgba(0, 0, 0, .35)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(52, 224, 17, 0), 0 12px 28px rgba(0, 0, 0, .35)
    }
}

/* ===== RESULTADOS ===== */
.container-results {
    background: transparent !important;
    padding-top: 10px;
}

.content-results h1 {
    color: #fff;
}

/* navegação lateral (loterias) */
.nav-results-desktop {
    background: #f4f7f2;
}

.nav-results-desktop .item-nav-results {
    color: var(--ink) !important;
    font-weight: 700;
}

.nav-results-desktop .item-nav-results.active {
    color: black !important;
    text-decoration: underline;
}

.nav-results-desktop .active,
.header-mobile-results .active {
    color: black !important;
}

/* tabela clara para contraste */
.results-desktop .area-results .table-results {
    background: var(--card);
    color: var(--ink);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}

.table-results .table-head-results,
.table-results .table-body-results {
    color: var(--ink);
}

/* “HORÁRIO” em pílula neon */
.table-head-results .row-table-results .item-table-results:first-child {
    background: var(--accent);
    color: var(--accent-ink) !important;
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 900;
    display: inline-block;
}

/* círculos 1º..7º NEON (números pretos) */
.table-head-results .row-table-results .item-table-results:not(:first-child) h1 {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    border-radius: 999px;
    padding: 8px 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* linhas da tabela */
.table-results .table-body-results .row-table-results {
    border-bottom: 1px solid #e7eee2;
}

.table-results .table-body-results .row-table-results:hover {
    background: #f7faf5;
}

/* ===== COTAÇÃO ===== */
.container-quotation {
    background: transparent !important;
}

.header-quotation h1 {
    color: #fff;
}

.header-quotation hr {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

/* tabela da cotação – clara */
.table-quotation table {
    background: #fff;
    color: var(--ink);
    border-radius: 14px;
}

.table-quotation thead th {
    color: #14200f;
    font-weight: 900;
}

.table-quotation tbody td {
    color: #0f170b;
}

/* ===== MODAL LOGIN ===== */
.modal-login .modal-content {
    background: #131828;
    border: 1px solid rgba(52, 224, 17, .2);
    border-radius: 14px;
}

.modal-login .modal-title {
    justify-content: center;
}

.modal-login .modal-title img {
    height: 84px;
}

.modal-login .title-modal-login {
    color: #fff;
}

.modal-login .input-group input {
    background: #1b2236;
    color: #e9f7e9;
    border: 1px solid #2a3142;
}

.modal-login .input-group .label-text {
    color: #aab6a8;
}

.modal-login .link-recovery {
    color: #b7c3b7;
    float: right;
    margin-top: 8px;
}

.modal-login .link-register {
    display: block;
    margin: 10px 0 0;
    color: var(--accent);
    font-weight: 800;
    text-align: center;
}

.btn-modal-login {
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    font-weight: 900;
    border-radius: 12px;
    padding: 14px 22px;
    box-shadow: 0 0 0 0 rgba(52, 224, 17, .55);
    animation: pulseShadow 1.8s ease-in-out infinite;
}

/* ===== FOOTER ===== */
.container-footer {
    background: var(--surface) !important;
    color: #fff;
}

.container-footer h1,
.container-footer h2,
.container-footer p,
.container-footer a,
.footer-nav-title,
.footer-nav-link {
    color: #fff !important;
}

#footerIndex .content-footer--legal {
    display: none !important;
}

/* botões de instalar (neon) */
.btn.btn-app {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    border: none;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

.btn.btn-app .btn-app-span h1,
.btn.btn-app .btn-app-span small {
    color: var(--accent-ink) !important;
}

.btn.btn-app i {
    filter: none;
}

/* ícones já são brancos */

/* ajuste geral de contraste */
h1,
h2,
h3,
p,
span,
small,
li,
label {
    color: #e9f7e9;
}

a {
    color: var(--accent);
}

/* === CTA centralizado e maior === */
.home-presentation .content-presentation{
  display:flex;
  flex-direction:column;          /* empilha */
  align-items:center;             /* centraliza horizontal */
  justify-content:center;         /* centraliza vertical quando possível */
  gap:18px;
}

/* some o bloco com o escudo nessa dobra (se ainda existir no markup) */
.home-presentation .content-presentation .shield-presentation{
  display:none !important;
}

/* botão gigante e centrado */
.btn-want-bet{
  font-size: clamp(22px, 4.6vw, 36px);   /* maior */
  padding: 22px 56px;                    /* mais “corpo” */
  border-radius: 16px;
  margin: 12px auto 0;                   /* centraliza no container */
  display:inline-flex; align-items:center; justify-content:center;
}

/* ocupa visualmente a dobra quando a tela é mais alta */
@media (min-height: 700px){
  .home-presentation{
    min-height: calc(100vh - 180px);     /* hero quase tela inteira */
    display:flex; flex-direction:column; justify-content:center;
  }
}

/* garante que <font> antigo não force cor errada (se ainda estiver no HTML) */
.btn-want-bet font{ color: inherit !important; }


/* responsivo */
@media (max-width:920px) {
    .hero {
        padding-top: 72px;
    }

    .hero__logo {
        width: 180px;
    }

    .site-footer .grid {
        grid-template-columns: 1fr;
    }
}


.footer .content-footer{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap:32px;
  align-items:start;
}

/* linha com logo + botões na mesma fileira */
.item-footer.brand .brand-row{
  display:grid;
  grid-template-columns:auto 1fr; /* logo | botões */
  align-items:center;
  gap:100px;                       /* “afastado o suficiente” da logo */
  max-width:720px;                /* limita para centralizar visualmente */
  margin:0 auto;                  /* centraliza o conjunto dentro da coluna */
}

/* tamanho da logo no footer */
.footer-brand img{
  height:150px; width:auto; display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
}

/* botões de loja lado a lado e mais centralizados */
.item-footer.brand .store-buttons{
  display:flex; justify-content:center; gap:22px;
}

/* responsivo: em telas menores, empilha logo acima dos botões */
@media (max-width: 992px){
  .footer .content-footer{ grid-template-columns:1fr; }
  .item-footer.brand .brand-row{
    grid-template-columns:1fr;
    justify-items:center;
    gap:16px;
  }
  .footer-brand img{ height:64px; }
}

.btn btn-modal-login{
    background-color: var(--accent) !important;
}

/* === Rails laterais fixos (160x600) === */
#home-landing { position: relative; z-index: 1; }

:root{
  --rail-w: 160px;     /* largura fixa do banner */
  --rail-h: 600px;     /* altura fixa do banner */
  --rail-gap: 32px;    /* respiro do conteúdo central */
  --rail-top: 96px;    /* distância do topo (abaixo do header) */
}

#home-landing::before,
#home-landing::after{
  content:"";
  position: fixed;
  top: var(--rail-top);
  left:auto; right:auto;
  width: var(--rail-w);
  height: var(--rail-h);          /* altura fixa p/ não cortar */
  pointer-events: none;
  z-index: 50;
  opacity: 1;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;       /* << evita corte (sem crop) */
  display: none;                  /* liga só no media query */
}

/* arquivos (160x600) */
#home-landing::before{ left: 12px;  background-image:url("/images/esquerda.png"); }
#home-landing::after { right: 12px; background-image:url("/images/direita.png"); }

/* Exibir somente em landscape e ≥ 1024px */
@media (min-width:1024px) and (orientation:landscape){
  #home-landing::before,
  #home-landing::after{ display:block; }

  /* dá respiro lateral p/ o conteúdo não “entrar” no banner */
  .container-header,
  .container-home,
  .container-results,
  .container-quotation,
  .container-footer{
    padding-left:  calc(var(--rail-w) + var(--rail-gap));
    padding-right: calc(var(--rail-w) + var(--rail-gap));
  }
}