/* ==========================================================================
   Tela de Início (lote C da frente crm-menu): imagens clicáveis no alto da Início, card da Comunidade, capa do VIP
   e a aba "Tela de Início" do admin. Só var(--de-*): nenhum hex, nenhuma regra forçada, nada na raiz do documento.
   O movimento (brilho e leve subida ao passar o mouse) fica dentro de .de-v2-banner e respeita prefers-reduced-motion.
   ========================================================================== */

/* == IMAGENS CLICÁVEIS DA INÍCIO (um embaixo do outro, largura toda) == */
.de-v2-banners{display:grid;gap:16px;margin-bottom:16px;flex:none;justify-items:center}
/* A arte inteira, sem corte, mas sem tomar a tela: no computador a imagem fica com no máximo 420px de altura (uma
   arte 3:2 fica com uns 630px de largura, centrada); no celular ocupa a largura toda. Medido na prova do lote C:
   em largura total uma arte 3:2 tinha 917px de altura em 1440 e empurrava o ranking para 2400px do topo. */
.de-v2-banner{position:relative;display:inline-block;max-width:100%;border-radius:18px;overflow:hidden;--de-v2-banner-dur:900ms;transition:transform .25s,box-shadow .25s}
.de-v2-banner img{display:block;max-width:100%;height:auto;max-height:420px;width:auto}
@media (max-width:767px){.de-v2-banner{display:block;width:100%}.de-v2-banner img{width:100%;max-height:none}}
.de-v2-banner:hover,.de-v2-banner:focus-visible{transform:translateY(-2px) scale(1.01);box-shadow:var(--de-sombra-botao)}
.de-v2-banner:focus-visible{outline:2px solid var(--de-laranja-principal);outline-offset:2px}
.de-v2-banner-brilho{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,color-mix(in srgb, var(--de-branco) 35%, transparent) 50%,transparent 60%);transform:translateX(-120%);pointer-events:none}
.de-v2-banner:hover .de-v2-banner-brilho{transition:transform var(--de-v2-banner-dur) cubic-bezier(.16,1,.3,1);transform:translateX(120%)}
@media (prefers-reduced-motion: reduce){.de-v2-banner:hover,.de-v2-banner:focus-visible{transform:none}.de-v2-banner-brilho{display:none}}

/* == CARD DA COMUNIDADE (coluna da direita, acima do ranking) == */
.de-v2-comunidade{gap:8px}
.de-v2-comunidade-titulo{font-family:var(--de-fonte-titulo);font-weight:800;font-size:18px;line-height:1.25;color:var(--de-grafite)}
.de-v2-comunidade-texto{margin:0;font-size:13px;line-height:1.5;color:var(--de-texto-secundario)}
.de-v2-comunidade-botao{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:40px;padding:0 18px;border-radius:var(--de-raio-controle);background:var(--de-laranja-principal);color:var(--de-branco);font-weight:700;font-size:14px;text-decoration:none;transition:background .2s}
.de-v2-comunidade-botao:hover,.de-v2-comunidade-botao:focus-visible{background:var(--de-laranja-hover)}

/* == CAPA DO VIP (quem não é VIP): fixa por cima dos cartões borrados == */
.vip-capa{position:sticky;top:84px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:12px;box-sizing:border-box;padding:20px 24px;background:var(--de-branco);border:1px solid var(--de-laranja-claro3);border-radius:var(--de-raio-card);box-shadow:var(--de-sombra-menu)}
.vip-capa-imagem{display:block;width:100%;max-height:180px;object-fit:cover;border-radius:var(--de-raio-controle)}
.vip-capa-titulo{margin:0;font-family:var(--de-fonte-titulo);font-weight:800;font-size:22px;line-height:1.2;color:var(--de-grafite)}
.vip-capa-texto{margin:0;font-size:15px;line-height:1.5;color:var(--de-texto-secundario)}
.vip-capa-cards{display:flex;flex-wrap:wrap;gap:12px}
.vip-capa-card{display:inline-flex;align-items:center;padding:10px 16px;border-radius:var(--de-raio-pilula);background:var(--de-laranja-claro);border:1px solid var(--de-laranja-claro3);font-weight:700;font-size:13px;color:var(--de-laranja-escuro)}
.vip-capa-botao{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:var(--de-raio-controle);background:var(--de-laranja-principal);color:var(--de-branco);font-weight:700;font-size:15px;text-decoration:none;transition:background .2s}
.vip-capa-botao:hover,.vip-capa-botao:focus-visible{background:var(--de-laranja-hover)}
/* Janela baixa: a capa não pode cobrir a lista toda, então deixa de ficar fixa. */
@media (max-height: 700px){.vip-capa{position:static}}

/* == ABA "TELA DE INÍCIO" DO ADMIN == */
.ti-form{display:grid;gap:24px;max-width:880px}
.ti-secao{display:grid;gap:12px;margin:0;padding:16px 18px;border:1px solid var(--de-borda);border-radius:var(--de-raio-card);background:var(--de-branco)}
.ti-secao>h3{margin:0;font-size:16px}
.ti-banner{display:grid;gap:12px;margin:0;padding:14px 16px;border:1px solid var(--de-borda-interna);border-radius:var(--de-raio-card);background:var(--de-marfim-apoio)}
.ti-banner>legend{padding:0 6px;font-weight:700;color:var(--de-texto-secundario)}
.ti-miniatura{display:block;max-width:240px;max-height:120px;border-radius:var(--de-raio-controle);border:1px solid var(--de-borda)}
.ti-acoes{display:flex;flex-wrap:wrap;gap:8px}
.ti-dica{margin:0;font-size:13px;color:var(--de-texto-secundario)}

/* F2 (04/10): banner + Meta do mês lado a lado no Início. A letra do card ao lado do banner vem de inicio.css
   (na mesma regra da coluna da direita; este arquivo não usa regra forçada). */
.de-v2-topo{display:grid;grid-template-columns:minmax(0,auto) minmax(280px,360px);justify-content:start;gap:16px;align-items:start;margin-bottom:16px}
.de-v2-topo>.de-v2-banners{margin-bottom:0;justify-items:start}
@media (max-width:1099px){.de-v2-topo{grid-template-columns:1fr}}