@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* 1. Reset básico: Remove as margens padrão do navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ajuste na seção principal */
.header-tela-cheia {
    width: 100%;
    min-height: 100vh;
    background-color: #f0f7ff;
    background-image: url('image/fundo-telemedicina.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Mudamos para coluna para que a top-bar fique em cima e o container embaixo */
    display: flex;
    flex-direction: column; 
    align-items: center;
}

/* 2. NOVO: Estilo da Barra da Logo */
.top-bar {
    width: 100%;
    background-color: #eeeeee;
    max-width: 100%;
    margin: 0 auto; /* Alinha a barra com o resto do conteúdo */
    padding: 15px 5%; /* Ajuste no padding */
    display: flex;
    justify-content: space-between; /* Espalha a logo e os botões */
    align-items: center;
    position: fixed; /* Deixa o elemento fixo na tela */
    top: 0;
    left: 0;
    z-index: 1000; /* Assegura que fique por cima de tudo */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Espaço extra na seção inteira para compensar a barra fixa */
.header-tela-cheia {
    width: 100%;
    min-height: 100vh;
    padding-top: 100px; /* Compensação pela top-bar fixa */
    background-color: #f0f7ff;
    background-image: url('image/fundo-telemedicina.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column; 
    align-items: center;
}

/* Tamanho da Logo */
.logo-empresa {
    height: 70px;
    width: auto;
}

/* Estilos dos Botões Sociais da Top Bar */
.social-buttons {
    display: flex;
    gap: 15px;
}

.btn-social {
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: white;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.btn-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.btn-whatsapp {
    background-color: #25D366;
}

.btn-social:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Container interno para limitar a largura máxima */
.header-container {
    flex: 1; /* A MÁGICA: Faz esse container ocupar todo o espaço que sobrou da tela, empurrando o conteúdo para o meio verticalmente */
    display: flex;
    align-items: center; /* Centraliza verticalmente texto e imagem */
    justify-content: space-between;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 5%;
    gap: 40px;
}

/* Lado do Texto */
.header-text-content {
    flex: 1;
}

.header-text-content h1 {
    font-family: 'Oswald';
    font-size: 4rem; /* Título bem grande e impactante */
    color: #004676;
    line-height: 1.1;
    margin-bottom: 20px;
}

.header-text-content p {
    font-family: 'Oswald';
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 30px;
    max-width: 500px;
}

/* Estilo do Botão Chamada de Ação (CTA) */
.btn-cta {
    display: inline-block;
    padding: 16px 32px;
    background-color: #006545; /* Cor de destaque (Vermelho/Laranja) */
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    border-radius: 50px; /* Botão arredondado */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(19, 118, 85, 0.3);
}

.btn-cta:hover {
    background-color: #00c284;
    transform: scale(1.05); /* Leve aumento ao passar o mouse */
}

/* Lado da Imagem */
.header-image-content {
    flex: 2;
    display: flex;
    justify-content: flex-end;
}

/* Substitua o bloco .header-image-content img anterior por este: */
.header-image-content img {
    width: 100%;
    max-width: 900px;
    height: auto;
    object-fit: contain;

    /* --- NOVOS ESTILOS --- */
    border-radius: 20px; /* Cantos bem arredondados e suaves */
    box-shadow: 0 15px 35px rgba(44, 62, 80, 0.15); /* Sombra suave e elegante (usando a cor do título) */
    
    /* Adiciona uma borda branca fina para dar um acabamento premium */
    border: 4px solid #ffffff; 
    
    /* Prepara para uma animação suave ao passar o mouse */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito Interativo ao passar o mouse (Hover) */
.header-image-content img:hover {
    transform: translateY(-10px) scale(1.02); /* Levanta levemente e dá um zoom bem sutil */
    box-shadow: 0 25px 50px rgba(44, 62, 80, 0.2); /* Aumenta a sombra para intensificar o efeito de elevação */
}

/* --- Responsividade para Mobile --- */
@media (max-width: 900px) {
    .top-bar {
        flex-direction: column; /* Coloca os itens em coluna */
        gap: 15px; /* Espaço entre a logo e os botões */
        padding: 15px 5%;
    }

    .logo-empresa {
        height: 50px; /* Reduz um pouco o tamanho da logo no mobile */
    }

    .header-tela-cheia {
        height: auto; /* No mobile, deixa o conteúdo fluir */
        padding-top: 140px; /* Mais espaço pra compensar a barra que ficou mais alta agora */
        padding-bottom: 50px;
    }

    .header-container {
        flex-direction: column; /* Empilha o texto em cima da imagem */
        text-align: center;
    }

    .header-text-content h1 {
        font-size: 2.5rem;
    }

    .header-text-content p {
        margin: 0 auto 30px;
    }

    .header-image-content {
        justify-content: center;
        order: 2; /* Garante que a imagem fique abaixo do texto no mobile */
    }
}

/* --- Seção Principal --- */
.nossos-diferenciais {
    padding: 80px 20px;
    background-color: #f4f4f9; /* Fundo cinza claro para destacar os cards brancos */
    text-align: center; /* Centraliza o título principal */
}

.nossos-diferenciais h2 {
    font-family: 'Oswald';
    font-size: 3rem;
    color: #004676;
}

.nossos-diferenciais h3 {
    font-family: 'Oswald';
    font-weight: 400;
    margin-top: -10px;
    margin-bottom: 50px;
    font-size: 2rem;
    color: #007ED4;
}

/* --- O Container dos Cards (A Mágica do Grid) --- */
.cards-container {
    display: grid;
    /* Cria 3 colunas iguais. O navegador calcula o tamanho automaticamente */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Cria um espaço de 30px entre as linhas e colunas */
    max-width: 1200px; /* Limita a largura para não esticar muito em telas grandes */
    margin: 0 auto; /* Centraliza o container na tela */
}

/* --- Estilo Individual de cada Card --- */
.card {
    background-color: #ffffff;
    border-radius: 12px; /* Deixa as pontas arredondadas */
    border: solid 1px #0074e7;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Cria uma sombra suave */
    overflow: hidden; /* Impede que a imagem "vaze" pelas pontas arredondadas */
    transition: transform 0.3s ease; /* Prepara o card para uma animação suave */
    padding-top: 20px;
}

/* Efeito ao passar o mouse por cima do card */
.card:hover {
    transform: translateY(-8px); /* Levanta o card levemente */
}

/* --- Imagem do Card --- */
.card img {
    width: 50%;
    height: 90px; /* Altura fixa para todos os cards ficarem do mesmo tamanho */
    object-fit: cover; /* Faz a imagem preencher o espaço sem distorcer (achatar) */
}

/* --- Textos do Card --- */
.card h3 {
    font-family: 'Oswald';
    font-weight: 600;
    margin: 10px 20px 10px;
    color: #004080;
    font-size: 1.3rem;
}

.card p {
    font-family: 'Oswald';
    font-size: 20px;
    font-weight: 400;
    margin: 0 20px 25px;
    color: #004080;
    line-height: 1.6; /* Aumenta o espaço entre as linhas do subtítulo para facilitar a leitura */
}

/* --- Responsividade (Para Celulares e Tablets) --- */

/* Quando a tela for menor que 900px (Tablets) */
@media (max-width: 900px) {
    .cards-container {
        grid-template-columns: repeat(2, 1fr); /* Muda para 2 colunas */
    }
}

/* Quando a tela for menor que 600px (Celulares) */
@media (max-width: 600px) {
    .top-bar {
        flex-direction: column; /* Coloca os itens em coluna */
        gap: 10px; /* Reduz espaço */
        padding: 10px 5%;
    }

    .social-buttons {
        gap: 10px;
    }

    .btn-social {
        font-size: 0.8rem; /* Botões um pouco menores */
        padding: 6px 12px;
    }

    .header-tela-cheia {
        padding-top: 130px; /* Ajuste final mobile */
    }

    .cards-container {
        grid-template-columns: 1fr; /* Muda para 1 coluna (um card embaixo do outro) */
    }
}

/* --- Seção Sobre Telemedicina --- */
.sobre-telemedicina {
    padding: 80px 20px;
    background-color: #ffffff; /* Fundo branco para contrastar com o cinza da seção anterior */
}

/* O Container Flexbox */
.container-sobre {
    display: flex;
    align-items: center; /* Centraliza a imagem e o texto verticalmente */
    gap: 50px; /* Cria um espaço de 50px entre a imagem e o texto */
    max-width: 1200px; /* Mantém o padrão de largura do site */
    margin: 0 auto; /* Centraliza o container na tela */
}

/* --- Lado da Imagem --- */
.imagem-sobre {
    flex: 1; /* Faz a imagem ocupar 50% do espaço disponível */
}

.imagem-sobre img {
    width: 100%;
    border-radius: 12px; /* Deixa os cantos da imagem arredondados */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Sombra elegante para destacar a foto */
    object-fit: cover;
}

/* --- Lado do Texto --- */
.texto-sobre {
    flex: 1; /* Faz o texto ocupar os outros 50% do espaço */
}

.texto-sobre h2 {
    font-family: 'Oswald';
    font-size: 3rem;
    color: #004676;
    margin-bottom: 20px;
}

.texto-sobre p {
    font-family: 'Oswald';
    font-size: 1.1rem;
    color: #007ED4;
    line-height: 1.7; /* Espaço confortável entre as linhas */
    margin-bottom: 15px;
}

/* --- Estilo do Botão (Opcional) --- */
.btn-agendar {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 28px;
    background-color: #3498db; /* Azul médico padrão */
    color: white;
    text-decoration: none; /* Remove o sublinhado do link */
    border-radius: 8px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-agendar:hover {
    background-color: #2980b9; /* Escurece o botão ao passar o mouse */
}

/* --- Responsividade (Para Celulares e Tablets) --- */
@media (max-width: 900px) {
    .container-sobre {
        flex-direction: column; /* Empilha a imagem em cima e o texto embaixo */
        text-align: center; /* Centraliza o texto para leitura no celular */
        gap: 30px;
    }
}

/* Estilo Geral da Seção */
.especialidades {
    padding: 80px 5%;
    max-width: 100%;
    margin: 0 auto;
}

.especialidades-color {
    background-color: #0890ff; /* Fundo cinza claro para destacar a seção */;
}

.especialidades-header {
    text-align: center;
    margin-bottom: 50px;
}

.especialidades-header h2 {
    font-family: 'Oswald';
    font-size: 3rem;
    color: #004676;
    margin-bottom: 10px;
}

.especialidades-header p {
     font-family: 'Oswald';
    color: #0890ff;
    font-size: 1.1rem;
}

/* Container Flex para dividir Esquerda/Direita */
.especialidades-container {
    display: flex;
    gap: 40px; /* Reduzi um pouco o gap para sobrar mais espaço para os elementos */
    align-items: center; /* Centraliza verticalmente a grid com a imagem */
    max-width: 1300px; /* Aumentamos um pouco a largura máxima da seção */
    margin: 0 auto;
}

/* 2. Ajuste o lado esquerdo (Grid) */
.grid-especialidades {
    flex: 1; /* Diminuímos o peso de 1.5 para 1 */
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 ícones por linha */
    gap: 25px;
}

.item-especialidade {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* 3. Ajuste o lado direito (Imagem) */
.imagem-destaque-especialidades {
    flex: 1.2; /* Aumentamos o peso da imagem para ela ser o elemento dominante */
    display: flex;
    justify-content: flex-end;
}

.imagem-destaque-especialidades img {
    width: 100%;
    max-width: 650px; /* Aumentamos o limite de largura da imagem */
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    object-fit: cover; /* Garante que ela preencha bem o espaço */
}

.icon-box {
    width: 80px;
    height: 80px;
    background: #ffffff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.icon-box img {
    width: 75px; /* Tamanho do ícone/imagem dentro do quadrado */
    height: auto;
}

.item-especialidade span {
    font-family: 'Oswald';
    font-weight: 600;
    color: #004676;
    font-size: 0.95rem;
}


/* --- Responsividade --- */
@media (max-width: 1024px) {
    .grid-especialidades {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }
}

@media (max-width: 768px) {
    .especialidades-container {
        flex-direction: column; /* Empilha no celular */
    }
    
    .grid-especialidades {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas no celular */
        order: 2;
    }

    .imagem-destaque-especialidades {
        order: 1;
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .grid-especialidades {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas em telas pequenas */
    }
}

/* --- Clube de Desconto (Letreiro) --- */
.clube-desconto {
    padding: 60px 5%;
    background-color: #f0f7ff;
    text-align: center;
    overflow: hidden;
}

.clube-header h2 {
    font-family: 'Oswald';
    color: #004676;
    font-size: 3rem;
    margin-bottom: 10px;
}

.clube-header p {
    font-family: 'Oswald';
    color: #555;
    font-size: 1.1rem;
    margin-bottom: 40px;
}

.letreiro-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.letreiro-track {
    display: flex;
    align-items: center;
    gap: 50px;
    width: max-content;
    animation: letreiro-scroll 15s linear infinite;
}

.letreiro-track img {
    height: 80px;
    width: auto;
    object-fit: contain;
}

/* Animação do letreiro infinito */
@keyframes letreiro-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 25px)); 
    }
}

/* --- Como Contratar Seu Plano --- */
.como-contratar {
    padding: 80px 5%;
    background-color: #ffffff;
    text-align: center;
}

/* --- Botão Contratar Agora --- */
.btn-contratar {
    display: inline-block;
    padding: 15px 40px;
    background-color: #28a745; 
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    border-radius: 25px; /* Bordas mais arredondadas */
    transition: all 0.3s ease; /* Transição suave para o hover */
}

.btn-contratar:hover {
    background-color: #218838; /* Fica num verde um pouco mais escuro */
    transform: scale(1.05); /* Cresce ligeiramente ao passar o mouse */
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4); /* Adiciona um sombreamento */
}

/* --- Seção Planos --- */
.planos {
    padding: 80px 5%;
    background-color: #f9f9f9;
    text-align: center;
}

.planos-header {
    margin-bottom: 50px;
}

.planos-header h2 {
    font-family: 'Oswald', sans-serif;
    color: #004676;
    font-size: 3rem;
    margin-bottom: 10px;
}

.planos-header p {
    font-family: 'Poppins', sans-serif;
    color: #3498db;
    font-size: 1.2rem;
}

.planos-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.plano-card {
    background-color: #ffffff;
    border-radius: 20px;
    width: 350px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.plano-titulo {
    background-color: #4db6ac; /* Cor verde água do cabeçalho do card */
    color: white;
    padding: 30px 20px;
}

.plano-titulo h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
}

.plano-preco {
    padding: 40px 20px 20px;
    color: #555;
    font-family: 'Poppins', sans-serif;
}

.plano-preco .moeda {
    font-size: 1.2rem;
    font-weight: 600;
    vertical-align: top;
    position: relative;
    top: 10px;
}

.plano-preco .valor {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    color: #555;
}

.plano-preco .centavos {
    font-size: 1.5rem;
    font-weight: 600;
    vertical-align: top;
    position: relative;
    top: 10px;
}

.plano-preco .periodo {
    font-size: 0.9rem;
    color: #888;
    margin-top: 5px;
}

.plano-beneficios {
    list-style: none;
    padding: 0 30px;
    flex-grow: 1;
    text-align: left;
}

.plano-beneficios li {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #666;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
}

.plano-beneficios li:last-child {
    border-bottom: none;
}

.plano-beneficios li svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.plano-footer {
    padding: 30px 20px;
    background-color: #ffffff;
}

.btn-plano {
    display: inline-block;
    padding: 12px 30px;
    background-color: #007953; /* Verde escuro do botão */
    color: white;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border-radius: 25px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.btn-plano:hover {
    background-color: #00966b;
    transform: scale(1.05);
}

.plano-footer p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: #888;
}

/* Responsividade Planos */
@media (max-width: 1024px) {
    .planos-container {
        gap: 20px;
    }
    .plano-card {
        width: calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .plano-card {
        width: 100%;
        max-width: 400px;
    }
}

/* --- FAQ --- */
.faq {
    padding: 80px 5%;
    background-color: #ffffff;
    text-align: center;
}

.faq-header {
    margin-bottom: 50px;
}

.faq-header h2 {
    font-family: 'Oswald', sans-serif;
    color: #004676;
    font-size: 3rem;
    margin-bottom: 10px;
}

.faq-header p {
    font-family: 'Poppins', sans-serif;
    color: #3498db;
    font-size: 1.2rem;
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.faq-item {
    background-color: #f9f9f9;
    border-radius: 10px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    overflow: hidden;
}

.faq-item summary {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #004676;
    padding: 20px 25px;
    cursor: pointer;
    list-style: none; /* Remove seta padrão */
    position: relative;
}

/* Criar um sinal de (+) e (-) customizado */
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: #004676;
    font-weight: 300;
}

.faq-item[open] summary::after {
    content: '-';
}

.faq-item summary:focus {
    outline: none;
}

/* Remove a setinha default em browsers baseados no WebKit e Firefox */
.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-resposta {
    padding: 0 25px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

.faq-resposta p {
    margin-bottom: 10px;
}

/* --- Footer --- */
.site-footer {
    background-color: #004676; /* Cor azul escuro usada na marca */
    color: #ffffff;
    padding: 30px 5%;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-container p {
    opacity: 0.8; /* Dá uma leve transparência para o texto não ficar tão forte */
}

.social-buttons-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.faq-resposta ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 10px;
}

.faq-resposta ul li {
    margin-bottom: 5px;
}



.como-contratar h2 {
    font-family: 'Oswald', sans-serif;
    color: #004676; /* Azul Escuro */
    font-size: 2.8rem;
    margin-bottom: 60px;
    text-transform: uppercase;
}

.passos-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.passo-card {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    border: 2px solid #5ab9c1; /* Borda Ciano */
    border-radius: 15px;
    padding: 40px 30px 30px;
    position: relative;
    background-color: #fff;
    margin-top: 35px; /* Abre espaço em cima para a bolinha não cortar */
}

/* O ícone redondo sobreposto nas bordas superiores */
.passo-icon {
    position: absolute;
    top: -35px; 
    left: 30px; 
    width: 70px;
    height: 70px;
    background-color: #0a8e99; /* Ciano Escuro */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(10, 142, 153, 0.3);
}

.passo-icon svg {
    width: 35px;
    height: 35px;
}

.passo-card h3 {
    font-family: 'Oswald', sans-serif;
    color: #0a8e99;
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-align: left;
}

.passo-card p {
    font-family: 'Poppins', sans-serif;
    color: #3b8b9c; 
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
}

/* Responsividade da Seção "Como Contratar" */
@media (max-width: 768px) {
    .passos-container {
        flex-direction: column;
        align-items: center;
    }
    .como-contratar h2 {
        font-size: 2.2rem;
    }
}