@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');

/* RESET BÁSICO */
* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden; /* Evita rolagem horizontal indesejada */
}

/* =======================================================
   CONTAINER PRINCIPAL
======================================================== */
.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* Configuração de altura e alinhamento */
    min-height: 100vh;
    padding: 40px 8%; 
    max-width: 1400px;
    margin: 0 auto; /* Centraliza em monitores muito grandes */
}

/* =======================================================
   TIPOGRAFIA
======================================================== */
.PortalNoticias {
    font-family: 'Montserrat', sans-serif;
    /* Tamanho mínimo 14px, preferencial 1.5vw, máximo 18px */
    font-size: clamp(14px, 1.5vw, 18px); 
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.titulo-destaque {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    margin-bottom: 30px;
}

.ANOTICIA, .NOMOMENTO, .EXATO {
    font-family: 'Clash Display', sans-serif;
    /* Fonte se adapta do celular (40px) ao monitor (90px) */
    font-size: clamp(40px, 6vw, 90px); 
    font-weight: 800;
    letter-spacing: 1px;
}

.ANOTICIA, .NOMOMENTO {
    color: #FF8D1B;
}

.EXATO {
    -webkit-text-stroke: 2px #FF8D1B; 
    color: transparent;
}

.text1 {
    font-family: 'Montserrat', sans-serif;
    /* Tamanho mínimo 16px, máximo 20px */
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 400;
    color: #656565;
    max-width: 683px;
    line-height: 1.5;
    margin-bottom: 40px;
}

/* =======================================================
   BOTÕES DE AÇÃO
======================================================== */
.botoes-acao {
    display: flex;
    flex-wrap: wrap; /* Faz os botões quebrarem de linha no celular */
    gap: 20px;
    margin-bottom: 60px; /* Espaço pro footer/onda SVG */
}

.LerNoticias, .VerParceiros {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 209px;
    height: 54px;
    background-color: transparent;
    color: #000;
    border: 2px solid #000;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.LerNoticias:hover,
.LerNoticias:hover *,
.VerParceiros:hover,
.VerParceiros:hover * {
    background-color: #000;
    color: #fff !important;
}

/* =======================================================
   BACKGROUNDS / SVG (Mantém fixos)
======================================================== */
.rtt {
    position: absolute; /* ou fixed, se preferir que ele grude na tela */
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    pointer-events: none;
}

.rtt svg {
    width: 100%;
    height: auto;
    display: block;
}

.custom-positioned-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 400px;
    height: 400px; 
    pointer-events: none;
    z-index: -2;
}

/* =======================================================
   MEDIA QUERIES (Ajustes finos para celulares)
======================================================== */
@media (max-width: 576px) {
    .botoes-acao {
        flex-direction: column;
    }
    
    .LerNoticias, .VerParceiros {
        width: 100%; /* Botões preenchem a largura toda no celular */
        max-width: none;
    }
    
    .custom-positioned-section {
        max-width: 250px; /* Reduz tamanho do padrão circular em telas menores */
    }
}