/* Importação de fonte do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* --- Reset Básico e Estilos Globais --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333; /* Cor de texto padrão */
    
    /* Fundo principal do corpo da página: Imagem e Fallback */
    background-image: url('images/back.jpg'); /* Verifique se 'back.jpg' está na sua pasta 'images' */
    background-size: cover; /* Cobre todo o fundo */
    background-position: center center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Não repete a imagem */
    background-attachment: fixed; /* Imagem fixa ao rolar */
    background-color: #f0f2f5; /* Cor de fallback caso a imagem não carregue ou para espaços vazios */

    /* Centraliza o card na tela */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ocupa a altura total da viewport */
    margin: 0;
    padding: 0;
    overflow-y: auto; /* Permite scroll vertical se o conteúdo for muito grande */
    overflow-x: hidden; /* Evita scroll horizontal indesejado */
}

/* --- Container Principal do Card (Wrapper) --- */
.coming-soon-wrapper {
    /* Este elemento agora serve mais como um espaçador/camada */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Garante que o wrapper ocupe a altura total para centralizar o card */
    width: 100%;
    padding: 20px; /* Espaçamento das bordas da tela para o card */
    /* Removi background-color: #efedeb; daqui para a imagem do body dominar */
}

/* --- O Card Central de Informações --- */
.info-card {
    /* CORRIGIDO: Sintaxe correta para rgba com o valor do #efedeb (239, 237, 235) */
    background-color: #efedeb ; /* Fundo claro semi-transparente, com mais opacidade */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); /* Sombra mais suave e espalhada */
    text-align: center; /* Alinhamento central padrão para o card */
    max-width: 700px;
    width: 100%;
    /* Removi transform: translateY(0); pois não é necessário */
}

/* --- Logo e Título "São Miguel" --- */
.logo-container {
    display: flex;
    align-items: center; /* Alinha verticalmente os itens ao centro */
    justify-content: center; /* Centraliza horizontalmente o grupo logo+texto */
    margin-bottom: 30px; /* Espaço abaixo do bloco do logo */
    flex-wrap: wrap; /* Permite quebrar linha em telas pequenas */
}

.logo-container img {
    max-width: 400px; /* Tamanho da imagem do logo */
    height: auto;
    display: block;
    margin-right: 15px; /* Espaço entre o logo e o texto */
    flex-shrink: 0; /* Impede que o logo encolha em telas apertadas */
}

.logo-text {
    text-align: left; /* Garante que o texto São Miguel e a tagline fiquem à esquerda */
    line-height: 1.2;
}

.logo-text h2 {
    margin: 0;
    font-size: 2.5em; /* Tamanho do "São Miguel" */
    color: #2e8b57; /* Verde do logo */
    line-height: 1; /* Remove espaço extra acima/abaixo do h2 */
    font-weight: 700; /* Garante que o nome seja forte */
}

.logo-text p {
    margin: 0;
    font-size: 0.9em; /* Tamanho do "Medicina e Segurança do Trabalho" */
    color: #555; /* Cor do texto da tagline */
    font-weight: bold;
    text-transform: uppercase; /* Deixa em maiúsculas, como no logo */
    letter-spacing: 0.5px; /* Espaçamento sutil entre as letras */
}

/* --- Título Principal Abaixo do Logo --- */
.main-headline {
    color: #2e8b57; /* Verde para o título de destaque */
    font-size: 2.2em; /* Tamanho do "Uma Nova Conquista..." */
    margin-bottom: 30px; /* Espaço abaixo do título */
    font-weight: 700;
    text-align: center;
}

/* --- Texto Principal do Conteúdo --- */
.content-text p {
    margin-bottom: 15px;
    font-size: 1.1em;
    line-height: 1.7;
    color: #555;
    text-align: left; /* Conteúdo alinhado à esquerda por padrão */
}

.content-text p:last-of-type {
    margin-bottom: 30px; /* Mais espaço após o último parágrafo de conteúdo */
}

/* --- Assinatura --- */
.signature {
    text-align: right; /* Assinatura alinhada à direita por padrão */
    font-style: italic;
    font-size: 1.1em;
    margin-top: 25px; /* Espaço acima da assinatura */
    margin-bottom: 35px; /* Espaço abaixo da assinatura */
    color: #333;
}

/* --- Informações de Contato --- */
.contact-info {
    border-top: 1px solid #eee; /* Linha divisória sutil */
    padding-top: 25px; /* Espaço após a linha divisória */
    margin-top: 25px; /* Espaço antes da linha divisória */
    text-align: left; /* Alinhamento à esquerda por padrão */
}

.contact-info h3 {
    color: #2e8b57; /* Verde para o título de contato */
    font-size: 1.4em;
    margin-bottom: 18px; /* Espaço abaixo do título de contato */
}

/* Estilos para parágrafos dentro de contact-info (para alinhar ícones e texto) */
.contact-info p {
    display: flex; /* Habilita flexbox para alinhar itens na linha */
    align-items: center; /* Alinha verticalmente */
    margin-bottom: 12px; /* Espaçamento entre as linhas de contato */
}

/* Estilos para links de telefone em geral na seção de contato */
.contact-info .contact-phone-link {
    color: #333; /* Cor do texto padrão para o telefone fixo */
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-flex; /* Para o link em si se comportar como flex para ícone+texto */
    align-items: center;
    padding: 5px 0;
}

.contact-info .contact-phone-link:hover {
    color: #2e8b57; /* Verde do logo no hover */
}

.contact-info .contact-phone-link i {
    font-size: 1.2em;
    margin-right: 8px;
    color: #2e8b57; /* Verde do logo para o ícone */
}

/* Estilo para o link do WhatsApp na seção de contato */
.contact-info .whatsapp-link {
    display: inline-flex;
    align-items: center;
    color: #25D366; /* Verde oficial do WhatsApp */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
    padding: 5px;
    border-radius: 50%; /* Opcional: faz o background do link ser circular se tiver um */
}

.contact-info .whatsapp-link:hover {
    color: #1DA751; /* Tom mais escuro no hover */
    background-color: rgba(37, 211, 102, 0.1); /* Um fundo sutil no hover */
}

.contact-info .whatsapp-link i {
    font-size: 1.8em; /* Ícone um pouco maior para ser visível sozinho */
    margin-right: 0; /* Sem margem à direita, pois não há texto "WhatsApp" */
    color: inherit; /* Garante que a cor do ícone seja a do pai (.whatsapp-link) */
}

/* Garante que o span dos números de celular tenha espaçamento correto */
.contact-info p span {
    margin-left: 10px; /* Espaço entre o link do WhatsApp (ícone) e os números */
    color: #666;
}

/* Estilo para o link de localização */
.contact-info .location-link {
    color: #333; /* Cor do texto padrão */
    text-decoration: none; /* Remove sublinhado */
    transition: color 0.3s ease;
    display: inline-flex; /* Para alinhar o ícone e o texto */
    align-items: center;
    padding: 5px 0;
}

.contact-info .location-link:hover {
    color: #2e8b57; /* Verde do logo no hover */
}

.contact-info .location-link i {
    font-size: 1.2em; /* Tamanho do ícone de mapa */
    margin-right: 8px; /* Espaço entre ícone e texto */
    color: #2e8b57; /* Verde do logo para o ícone */
}

/* --- Direitos Autorais (Copyright) --- */
.copyright {
    margin-top: 35px;
    font-size: 0.85em;
    color: #888;
    border-top: 1px solid #eee; /* Linha divisória superior */
    padding-top: 20px;
}

/* --- Responsividade --- */

/* Telas Médias (Tablets) */
@media (max-width: 768px) {
    .info-card {
        padding: 30px 20px;
    }

    /* Logo e Texto do Logo: Centralizados */
    .logo-container {
        flex-direction: column; /* Empilha logo e texto em telas menores */
        margin-bottom: 15px;
        text-align: center;
    }
    .logo-container img {
        margin-right: 0; /* Remove margem lateral */
        margin-bottom: 10px; /* Adiciona margem inferior */
        max-width: 80px; /* Logo menor */
    }
    .logo-text {
        text-align: center; /* Centraliza o texto quando empilhado */
    }
    .logo-text h2 {
        font-size: 2em; /* Ajusta tamanho do "São Miguel" */
    }
    .logo-text p {
        font-size: 0.9em; /* Ajusta tamanho da tagline */
    }

    /* Título Principal Abaixo do Logo: Centralizado */
    .main-headline {
        font-size: 1.8em; /* Ajusta tamanho do título "Uma Nova Conquista..." */
        margin-bottom: 20px;
        text-align: center;
    }

    /* CONTEÚDO DO TEXTO: ALINHAR À ESQUERDA (OU SEU PADRÃO) */
    .content-text p {
        font-size: 1em; /* Ajusta tamanho do texto do conteúdo */
        text-align: left; /* Mantido alinhado à esquerda */
    }
    .signature {
        font-size: 1em; /* Ajusta tamanho da assinatura */
        text-align: right; /* Mantido alinhado à direita */
    }

    /* INFORMAÇÕES DE CONTATO: CENTRALIZAR */
    .contact-info {
        text-align: center; /* CENTRALIZA TODO O CONTEÚDO DE CONTATO */
        padding-top: 15px;
        margin-top: 15px;
    }
    .contact-info h3 {
        font-size: 1.2em;
        margin-bottom: 15px;
        /* text-align: center; já herdado de .contact-info */
    }
    .contact-info p {
        font-size: 1em;
        justify-content: center; /* CENTRALIZA o conteúdo (ícone + texto) do parágrafo flex */
        /* text-align: center; já herdado de .contact-info */
    }
    .contact-info .contact-phone-link,
    .contact-info .whatsapp-link {
        padding: 5px;
    }
}

/* Telas Pequenas (Celulares) */
@media (max-width: 480px) {
    .info-card {
        padding: 20px 15px;
        border-radius: 8px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); /* Sombra um pouco menos intensa */
    }
    /* Logo e texto do logo */
    .logo-container img {
        max-width: 100px; /* Logo ainda menor */
    }
    .logo-text h2 {
        font-size: 1.8em;
    }
    .logo-text p {
        font-size: 0.75em;
    }
    /* Título principal */
    .main-headline {
        font-size: 1.4em;
        margin-bottom: 15px;
    }
    /* Conteúdo do texto */
    .content-text p {
        font-size: 0.9em;
        /* text-align: left; já herdado de 768px */
    }
    .signature {
        font-size: 0.9em;
        /* text-align: right; ou left, dependendo do que você quer */
    }
    /* Informações de Contato */
    .contact-info {
        padding