/* ==========================================================================
   JJ Brindes — BASE
   Fontes, elementos globais e utilidades que o Bootstrap não tem.
   Cores sempre via tokens do tema.css.
   ========================================================================== */

@font-face { font-family: 'Poppins'; font-weight: 300; font-display: swap; src: url("../font/Poppins-Light.ttf") format("truetype"); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url("../font/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url("../font/Poppins-Medium.otf") format("opentype"); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url("../font/Poppins-SemiBold.otf") format("opentype"); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url("../font/Poppins-Bold.otf") format("opentype"); }

html { scroll-behavior: smooth; }
/* Coluna com no mínimo a altura da tela: o rodapé (margin-top: auto) fica sempre no fim,
   mesmo em páginas com pouco conteúdo */
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; }
body > * { min-width: 0; } /* conteúdo largo (ex.: carrossel) não estica a página */
a { text-decoration: none; }
img { max-width: 100%; }
/* Evita estouro de grid/flex com textos longos */
.min-w-0 { min-width: 0; }

/* ---------- Linha arco-íris (topo e rodapé) ---------- */
.linha-arcoiris { height: 4px; background: var(--jj-rainbow); }

/* ---------- Títulos de seção ---------- */
.eyebrow {
    font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--jj-destaque); margin-bottom: .4rem;
}
.eyebrow::before {
    content: ''; display: inline-block; width: 22px; height: 2px; margin-right: 8px;
    background: var(--jj-destaque); vertical-align: middle;
}
.titulo-secao { font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.titulo-pagina { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; margin: 0; }
.link-mais { font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; transition: gap .15s; }
.link-mais:hover { gap: .65rem; }

/* ---------- Ícone de categoria (PNG escuro deixado claro) ---------- */
.cat-ico {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: var(--jj-icon-bg); display: inline-flex; align-items: center; justify-content: center;
}
.cat-ico img { width: 22px; height: 22px; object-fit: contain; filter: var(--jj-icon-filter); }

/* ---------- Caixa de destaque (texto na cor de acento do tema) ---------- */
.destaque {
    display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; line-height: 1.45;
    color: var(--jj-destaque); background: color-mix(in srgb, var(--jj-destaque) 10%, transparent);
    border-left: 3px solid var(--jj-destaque); border-radius: 8px; padding: 10px 12px;
}
.destaque .fa-solid { margin-top: 3px; }
.destaque strong { font-weight: 700; }

/* ---------- Aviso (verde) ---------- */
.aviso {
    display: flex; gap: .75rem; align-items: flex-start; font-size: .84rem;
    padding: 12px 14px; border-radius: 12px; background: var(--jj-notice-bg); color: var(--jj-notice-text);
}
.aviso .fa-solid { margin-top: 3px; }

/* ---------- Estado vazio ---------- */
.estado-vazio { text-align: center; padding: 60px 20px; border: 1px dashed var(--jj-border-strong); border-radius: var(--jj-radius-lg); background: var(--jj-surface); }
.icone-redondo {
    width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 18px; font-size: 2rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--jj-primary-soft); color: var(--jj-primary-text);
}

/* ---------- Superfície com textura (hero e rodapé) ---------- */
.textura {
    background: var(--jj-textura);
    background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px;
    background-position: 0 0, 0 0, 5px 5px, 0 0;
}

/* Rolagem horizontal/vertical sem barra visível */
.sem-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.sem-scrollbar::-webkit-scrollbar { display: none; }