/* Variáveis de Cor da Falk Capital (Ajuste se necessário) */
:root {
    --falk-primary: #003366;        /* Azul Marinho (Principal para botões/destaques) */
    --falk-secondary: #00A3A3;      /* Ciano/Verde Aqua (Secundário) */
    --falk-background: #F9F9F9;     /* Fundo Limpo */
    --falk-text-dark: #333333;      /* Texto Principal */
    --falk-coffee-brown: #6F4E37;   /* Marrom do Ícone/Borda (Mantido da imagem) */
    --falk-grey-light: #888888;     /* Cinza Sutil para Tagline de Informação */
}

/* ---------------------------------------------------- */
/* SEÇÃO PRINCIPAL */
/* ---------------------------------------------------- */

#morning-call-section {
    background-color: var(--falk-background);
    padding: 60px 0;
}

.morning-call-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Borda lateral mantida em marrom, conforme sua imagem */
    border-left: 5px solid var(--falk-coffee-brown); 
}

/* ---------------------------------------------------- */
/* CONTEÚDO (TEXTO PRINCIPAL) */
/* ---------------------------------------------------- */

.content {
    flex-grow: 1;
    /* Reduzido para dar mais espaço ao action-area, mas flexível */
    max-width: 65%; 
}

/* ALINHAMENTO DO SVG DENTRO DO H2 */
.content h2 {
    display: flex;
    align-items: end; /* ALINHA O SVG E O TEXTO VERTICALMENTE */
    gap: 10px;           /* ESPAÇO ENTRE O ÍCONE E O TEXTO */
    font-size: 1.5em; /* 24px */
    text-transform: uppercase;
    font-weight: 700;
    color: var(--falk-coffee-brown); /* Cor do título (mantido o marrom da imagem) */
    margin-bottom: 1em;
}

/* Estilo do SVG dentro do H2 */
.content h2 svg {
    /* Garante que o SVG use os atributos de width/height definidos no HTML (ex: 30px) */
    flex-shrink: 0;
    /* Remove qualquer margin/padding padrão que possa interferir no alinhamento */
    margin-top: -3px; 
}

.content p {
    font-size: 1em;
    line-height: 1.5em;
    /* Removido text-align: justify para um visual mais clean, mas pode ser reativado */
    color: var(--falk-text-dark);
}

.content .tagline-info {
    font-style: italic;
    font-size: 14px;
    color: var(--falk-grey-light);
    margin-top: 15px; /* Ajuste sutil */
}

/* ---------------------------------------------------- */
/* ÁREA DE AÇÃO (TAGLINE E BOTÃO) */
/* ---------------------------------------------------- */

.action-area {
    display: flex;
    flex-direction: column;
    /* Alinha texto e botão à direita, como na imagem */
    align-items: center; 
    flex-shrink: 0;
    text-align: right;
}

.action-area .tagline {
    font-size: 0.875em; /* 14px */
    text-transform: uppercase;
    font-weight: 500;
    color: var(--falk-text-dark);
    margin-bottom: 0.5em;
}

.btn-morningcall {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 20px;
    text-decoration: none;
    
    /* Cores do Botão */
    border: 1px solid var(--color-primary);
    color: var(--color-primary); /* Texto na cor principal */
    background-color: #FFFFFF;
    border-radius: 8px;
    
    transition: all 0.2s ease-in-out;
}

.btn-morningcall:hover {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

/* ---------------------------------------------------- */
/* MEDIA QUERY (MOBILE) */
/* ---------------------------------------------------- */

@media (max-width: 768px) {
    #morning-call-section {
        padding: 40px 0;
    }

    .morning-call-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px;
        gap: 20px;
    }

    .content {
        max-width: 100%;
        text-align: left;
    }

    .content h2 {
        /* Centraliza o título com o ícone no mobile */
        justify-content: end; 
        color: var(--falk-coffee-brown);
        width: 100%;
    }
    
    .content .tagline-info {
        /* Alinha a tagline de informação à esquerda no mobile */
        text-align: left;
    }

    .action-area {
        align-items: center; /* Centraliza o botão e o tagline */
        text-align: center;
        width: 100%;
    }

    .action-area .tagline {
        margin-bottom: 10px;
    }

    .btn-morningcall {
        width: 100%; /* Botão em bloco */
        padding: 15px 20px;
    }
}