/* Topo do site da lotérica (includes/topo_site.php): o mesmo no site e na vitrine com o
   site ligado. Prefixo st-, isolado do estilo.css do app. As cores ficam no .st-cab (que
   não gera caixa, display: contents) para não vazar para o resto da página. */
.st-cab { display: contents;
          --stt-tinta: #14213d; --stt-suave: #5b6474; --stt-borda: #e3e8f0; --stt-azul: #0b4f9c;
          --stt-trevo: #1a8f4a; --stt-ouro: #f5b301; --stt-faixa: #14213d; }

.st-faixa { background: var(--stt-faixa); color: #c8d0de; font: 13px/1.4 Inter, system-ui, sans-serif; }
.st-faixa-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; min-height: 36px; }
.st-faixa-login { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--stt-ouro);
                  font: 600 13px Inter, system-ui, sans-serif; cursor: pointer; padding: 6px 0; min-height: 32px; }
.st-faixa-login:hover { color: #ffd65a; }

.st-topo { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
           border-bottom: 1px solid var(--stt-borda); font-family: Inter, system-ui, sans-serif; }
.st-topo-bar { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.st-cab .st-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--stt-tinta); margin-right: auto; min-width: 0; }
.st-marca-img { height: 48px; width: auto; max-width: 240px; object-fit: contain; display: block; }
.st-marca-ico { height: 44px; width: auto; max-width: 120px; object-fit: contain; display: block; }
.st-marca-trevo { width: 34px; height: 34px; color: var(--stt-trevo); flex: none; }
.st-marca-trevo svg { width: 100%; height: 100%; display: block; }
.st-marca-nome { font: 900 21px/1.1 Archivo, Inter, sans-serif; text-transform: uppercase; letter-spacing: -.01em;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-marca-nome b { color: var(--stt-azul); font-weight: 900; }
.st-nav { display: flex; align-items: center; gap: 24px; }
.st-cab .st-nav a { color: var(--stt-tinta); text-decoration: none; font-weight: 500; font-size: 15px; }
.st-cab .st-nav a:hover, .st-cab .st-nav a[aria-current] { color: var(--stt-azul); }
.st-cab .st-nav a[aria-current] { font-weight: 700; }
.st-menu-btn { display: none; font-size: 26px; cursor: pointer; padding: 4px 8px; color: var(--stt-tinta); }

/* Modal do lotérico */
.st-login { border: 0; padding: 0; border-radius: 22px; width: min(440px, calc(100% - 32px)); color: var(--stt-tinta);
            box-shadow: 0 30px 80px rgba(0,0,0,.35); font-family: Inter, system-ui, sans-serif; }
.st-login::backdrop { background: rgba(10,16,36,.6); }
.st-login-form { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; margin: 0; }
.st-login-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.st-login-cab h2 { margin: 0; font: 700 20px Archivo, Inter, sans-serif; color: var(--stt-tinta); }
.st-login-cab small { color: var(--stt-suave); }
.st-login-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--stt-faixa); color: var(--stt-ouro); display: grid; place-items: center; flex: none; }
.st-login-x { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #f1f4f9; color: var(--stt-suave); font-size: 16px; cursor: pointer; }
.st-login label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; margin: 0; }
.st-login input { min-height: 48px; padding: 0 14px; border: 1px solid #c9d3e3; border-radius: 12px; font: 400 16px Inter, sans-serif; color: var(--stt-tinta); width: 100%; margin: 0; }
.st-login-senha { display: flex; gap: 8px; }
.st-login-senha input { flex: 1; min-width: 0; }
.st-login-senha button { min-width: 84px; min-height: 48px; border-radius: 12px; border: 1px solid #c9d3e3; background: #fff; color: var(--stt-tinta);
                         font: 600 14px Inter, sans-serif; cursor: pointer; }
.st-login-ok { min-height: 52px; margin-top: 4px; border: 0; border-radius: 14px; background: var(--stt-ouro); color: #2b1d00;
               font: 800 16px Archivo, Inter, sans-serif; letter-spacing: .02em; cursor: pointer; }
.st-login-rod { margin: 0; padding-top: 12px; border-top: 1px solid var(--stt-borda); font-size: 13px; color: var(--stt-suave); text-align: center; }

@media (max-width: 860px) {
    .st-menu-btn { display: block; }
    .st-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; flex-direction: column; align-items: stretch;
              gap: 0; border-bottom: 1px solid var(--stt-borda); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
    .st-cab .st-nav a { padding: 14px 16px; border-top: 1px solid var(--stt-borda); }
    .st-menu-cb:checked ~ .st-nav { display: flex; }
    .st-marca-nome { font-size: 18px; }
}