/* Estilo para o logo dentro do header */
header img {
    /* Define um tamanho base para telas grandes (desktops) */
    height: auto; 
    width: auto; /* Mantém a proporção da imagem */
    transition: height 0.3s ease; /* Efeito suave ao redimensionar */
}

/* Para telas médias (tablets) */
@media screen and (max-width: 768px) {
    header img {
        height: 55px; /* Diminui a altura do logo */
    }
}

/* Para telas pequenas (smartphones) */
@media screen and (max-width: 480px) {
    header img {
        height: 40px; /* Diminui ainda mais */
    }
}

@font-face {
    font-family: 'Causten';
    src: url('/assets/fonts/Causten-Round/Causten-Black.otf') format('opentype'); /* O ../ volta uma pasta para achar o assets/fonts */
    font-weight: 400;
    font-style: normal;
}

/* Variação Black (Bold) */
@font-face {
    font-family: 'Causten';
    src: url('/assets/fonts/Causten-Round/Causten-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}



.logo-fade-responsiva {
    /* 1. Máscara de Degradê (Esfumaça as bordas) */
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);

    width: 100%;
    max-width: 400px; 
    height: auto;
    object-fit: contain;
    
    padding: 5%;
    border-radius: 20%;
    transition: all 0.5s ease;
}

@media (max-width: 1024px) {
    .logo-fade-responsiva {
        max-width: 250px; 
    }
}

@media (max-width: 640px) {
    .logo-fade-responsiva {
        max-width: 180px; /* Fica pequena o suficiente para o header mobile */
        padding: 2%;     /* Menos padding em telas pequenas */
    }
}