/* ==========================================================================
   TEMA — variáveis de cor e tipografia (Yoo Digital)
   Único lugar onde a paleta/tipografia devem estar escritas fisicamente.
   ========================================================================== */

:root {
    /* Paleta — extraída do site atual da Yoo Digital */
    --cor-fundo: #15001e;
    --cor-fundo-secao-alt: #1b0a28;
    --cor-fundo-secao-alt2: #230f34;
    --cor-card: #241335;
    --cor-card-hover: #2e1a44;
    --cor-borda: rgba(255, 255, 255, 0.08);

    --cor-primaria: #eb680b;
    --cor-primaria-escura: #942c04;
    --cor-secundaria: #2a5cac;

    --cor-texto: #ffffff;
    --cor-texto-suave: rgba(255, 255, 255, 0.7);
    --cor-texto-fraco: rgba(255, 255, 255, 0.5);

    --gradiente-destaque: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
    --gradiente-secundario: linear-gradient(135deg, var(--cor-secundaria) 0%, #1b3d75 100%);

    /* Tipografia */
    --fonte-titulo: 'Bricolage Grotesque', sans-serif;
    --fonte-corpo: 'Poppins', sans-serif;

    --peso-titulo: 800;

    /* Overrides do Bootstrap */
    --bs-body-bg: var(--cor-fundo);
    --bs-body-color: var(--cor-texto);
    --bs-body-font-family: var(--fonte-corpo);
    --bs-primary: var(--cor-primaria);
    --bs-primary-rgb: 235, 104, 11;
    --bs-secondary: var(--cor-secundaria);
    --bs-link-color: var(--cor-primaria);
    --bs-link-hover-color: var(--cor-secundaria);
    --bs-border-color: var(--cor-borda);
}

/* overflow-x precisa estar tanto em html quanto em body: elementos
   position:fixed (ex: o selo do reCAPTCHA, injetado pelo Google fora do
   fluxo normal) sao posicionados relativos ao viewport/html, entao
   "overflow-x: hidden" só em body não os contém -- sobra da parte "escondida"
   do selo (ele fica parcialmente fora da tela por padrão) empurra a página
   inteira e gera a barra de rolagem horizontal no mobile. */
html {
    overflow-x: hidden;
}

body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte-corpo);
    font-weight: 400;
    overflow-x: hidden;
}

body.sem-rolagem {
    overflow-y: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-titulo);
    color: var(--cor-texto);
    letter-spacing: -0.02em;
}

a {
    color: var(--cor-primaria);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--cor-secundaria);
}

::selection {
    background: var(--cor-primaria);
    color: var(--cor-texto);
}

/* barra de rolagem customizada — transparente, fina, com seta discreta no topo */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

::-webkit-scrollbar {
    width: 2px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

::-webkit-scrollbar-button:vertical:start:decrement {
    display: block;
    height: 10px;
    width: 2px;
    background-color: transparent;
    border-style: solid;
    border-width: 0 2px 4px 2px;
    border-color: transparent transparent #ffffff transparent;
}

::-webkit-scrollbar-button:vertical:end:increment {
    display: none;
}