/* Estilos adicionais mínimos para garantir renderização perfeita */
body {
    background-color: #000000;
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
}

/* Overlay de gradiente escuro sobre a imagem de fundo do conteúdo principal.
   Cria o efeito de vinheta que escurece a área dos textos
   sem usar box-shadow, mantendo a transição suave para a imagem do chinelo. */

#conteudo-principal::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Mobile: gradiente do topo escuro para a base transparente,
   deixando o chinelo visível na parte inferior */
#conteudo-principal::before {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.85) 25%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.25) 70%,
        rgba(0, 0, 0, 0.05) 85%,
        transparent 100%
    );
}

/* Desktop (>=768px): gradiente da esquerda escura para a direita transparente,
   deixando o chinelo visível na lateral direita */
@media (min-width: 768px) {
    #conteudo-principal::before {
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.88) 25%,
            rgba(0, 0, 0, 0.65) 45%,
            rgba(0, 0, 0, 0.3) 65%,
            rgba(0, 0, 0, 0.05) 85%,
            transparent 100%
        );
    }
}