/* ==============================================
   1. IMPORTAÇÃO DAS FONTES (ARABOTO)
   ============================================== */

@font-face {
    font-family: 'Araboto';
    src: url('../fonts/Araboto-Thin.woff2') format('woff2');
    font-weight: 100; /* Peso "Thin" */
    font-style: normal;
}

@font-face {
    font-family: 'Araboto';
    src: url('../fonts/Araboto-Light.woff2') format('woff2');
    font-weight: 300; /* Peso "Light" */
    font-style: normal;
}

@font-face {
    font-family: 'Araboto';
    src: url('../fonts/Araboto-Normal.woff2') format('woff2');
    font-weight: 400; /* Peso "Normal" (Regular) */
    font-style: normal;
}

@font-face {
    font-family: 'Araboto';
    src: url('../fonts/Araboto-Medium.woff2') format('woff2');
    font-weight: 500; /* Peso "Medium" */
    font-style: normal;
}

@font-face {
    font-family: 'Araboto';
    src: url('../fonts/Araboto-Bold.woff2') format('woff2');
    font-weight: 700; /* Peso "Bold" */
    font-style: normal;
}

@font-face {
    font-family: 'Araboto';
    src: url('../fonts/Araboto-Black.woff2') format('woff2');
    font-weight: 900; /* Peso "Black" */
    font-style: normal;
}


/* ==============================================
   2. ESTILOS GERAIS (RESET E BODY)
   ============================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* *** APLICAÇÃO DA FONTE *** */
    font-family: Araboto, arial, sans-serif; /* "Araboto" é a fonte principal agora */
    font-weight: 400; /* Define "Normal" como o peso padrão */

    line-height: 1.6;
    background-color: #f4f4f4;
    color: #FEAC39;
    padding: 20px;
    text-align: center;
}

/* ==============================================
   3. ESTILO DO CABEÇALHO (HEADER)
   ============================================== */
header {
    background-color: #FEAC39; /* MUDADO PARA A COR DO LOGO */
    color: #ffffff; /* Branco sobre o dourado/laranja fica bom */
    padding: 40px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
}

header h1 {
    font-size: 3em; /* Tamanho maior */
    margin-bottom: 5px;
    font-weight: 900; /* Usando "Araboto Black" */
}

header p {
    font-size: 1.2em;
    font-style: italic;
    font-weight: 300; /* Usando "Araboto Light" */
}

/* ==============================================
   4. CONTEÚDO PRINCIPAL (MAIN)
   ============================================== */
main {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h2 {
    color: #FEAC39; /* MUDADO PARA A COR DO LOGO */
    margin-bottom: 20px;
    font-weight: 700; /* Usando "Araboto Bold" */
}

h3 {
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 2px solid #ccc;
    display: inline-block;
    padding-bottom: 5px;
    color: #333;
    font-weight: 500; /* Usando "Araboto Medium" */
}

/* ==============================================
   5. ESTILO DOS LINKS (CONTATO)
   ============================================== */
ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

li {
    margin: 10px 0;
}

a {
    color: #FEAC39; /* MUDADO PARA A COR DO LOGO */
    text-decoration: none;
    font-weight: 700; /* Usando "Araboto Bold" */
    padding: 10px 15px;
    display: block;
    border: 1px solid #FEAC39; /* MUDADO PARA A COR DO LOGO */
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

a:hover {
    background-color: #FEAC39; /* MUDADO PARA A COR DO LOGO */
    color: #ffffff;
}

/* 6. Estilo específico do WhatsApp */
.whatsapp-link {
    background-color: #25d366;
    color: #ffffff;
    border-color: #25d366;
}

.whatsapp-link:hover {
    background-color: #128c7e;
}