/* Reset básico para remover margens e paddings padrão do navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilo base do corpo da página */
body {
    font-family: 'Poppins', sans-serif; /* Fonte moderna e clean */
    line-height: 1.6; /* Espaçamento entre linhas para melhor leitura */
    color: #333; /* Cor do texto principal */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Gradiente de fundo */
    min-height: 100vh; /* Altura mínima da tela toda */
}

/* Container principal que centraliza todo o conteúdo */
.container {
    max-width: 1200px; /* Largura máxima para não ficar muito largo em telas grandes */
    margin: 0 auto; /* Centraliza horizontalmente */
    background: rgba(255, 255, 255, 0.95); /* Fundo branco com transparência */
    min-height: 100vh; /* Altura mínima da tela toda */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); /* Sombra suave ao redor */
}

/* Estilização do cabeçalho */
.header {
    background: #fff; /* Fundo branco */
    padding: 20px 30px; /* Espaçamento interno */
    border-bottom: 3px solid #667eea; /* Linha colorida embaixo */
    display: flex; /* Layout flexível */
    justify-content: space-between; /* Espaça logo e navegação */
    align-items: center; /* Alinha verticalmente no centro */
    flex-wrap: wrap; /* Permite quebra em telas pequenas */
}

/* Estilo do logo/nome da corretora */
.logo {
    font-size: 24px; /* Tamanho da fonte */
    font-weight: 700; /* Peso da fonte (negrito) */
    color: #667eea; /* Cor azul do tema */
    margin: 0; /* Remove margem padrão */
}

/* Container da navegação */
.nav {
    display: flex; /* Layout em linha */
    gap: 10px; /* Espaço entre os botões */
}

/* Estilo dos botões de navegação */
.nav-btn {
    background: transparent; /* Fundo transparente */
    border: 2px solid #667eea; /* Borda colorida */
    color: #667eea; /* Cor do texto */
    padding: 10px 20px; /* Espaçamento interno */
    border-radius: 25px; /* Bordas arredondadas */
    cursor: pointer; /* Cursor de mão ao passar por cima */
    font-weight: 500; /* Peso da fonte */
    transition: all 0.3s ease; /* Transição suave para hover */
    font-family: inherit; /* Herda a fonte do body */
}

/* Efeito hover nos botões de navegação */
.nav-btn:hover {
    background: #667eea; /* Fundo colorido */
    color: white; /* Texto branco */
    transform: translateY(-2px); /* Move ligeiramente para cima */
}

/* Estilo do botão ativo */
.nav-btn.active {
    background: #667eea; /* Fundo colorido */
    color: white; /* Texto branco */
}

/* Área principal do conteúdo */
.main-content {
    padding: 40px 30px; /* Espaçamento interno */
    min-height: calc(100vh - 100px); /* Altura mínima menos o header */
}

/* Estilo base das seções */
.section {
    display: none; /* Esconde todas as seções por padrão */
    animation: fadeIn 0.5s ease-in; /* Animação de entrada */
}

/* Mostra apenas a seção ativa */
.section.active {
    display: block; /* Mostra a seção */
}

/* Animação de fade in */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Layout da seção início */
.inicio-content {
    display: flex; /* Layout flexível */
    align-items: center; /* Alinha no centro vertical */
    gap: 40px; /* Espaço entre foto e texto */
    flex-wrap: wrap; /* Permite quebra em telas pequenas */
}
.photo-container img {
    width:100%;
    height:auto;
    border-radius:50%;
    transition:transform 0.3s ease;
}
.photo-container img:hover {
    transform:scale(1.05);
}
/* Container da foto */
.photo-container {
    flex: 0 0 300px; 
    text-align: center; 
    overflow:hidden;
}

/* Estilo da foto da corretora */
.corretora-photo {
    width: 250px; /* Largura da foto */
    height: 250px; /* Altura da foto (quadrada) */
    border-radius: 50%; /* Torna a foto circular */
    object-fit: contain;
    border: 5px solid #667eea; /* Borda colorida */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Sombra */
}

/* Área do texto de introdução */
.intro-text {
    flex: 1; /* Ocupa o resto do espaço disponível */
    min-width: 300px; /* Largura mínima */
}

/* Títulos das seções */
.intro-text h2,
.section h2 {
    font-size: 32px; /* Tamanho da fonte */
    color: #333; /* Cor do texto */
    margin-bottom: 20px; /* Espaço embaixo */
    font-weight: 600; /* Peso da fonte */
}

/* Parágrafos de texto */
.intro-text p,
.section p {
    font-size: 16px; /* Tamanho da fonte */
    margin-bottom: 15px; /* Espaço embaixo */
    color: #666; /* Cor cinza do texto */
}

/* Container dos botões de call-to-action */
.cta-buttons {
    margin-top: 30px; /* Espaço em cima */
    display: flex; /* Layout em linha */
    gap: 15px; /* Espaço entre botões */
    flex-wrap: wrap; /* Permite quebra em telas pequenas */
}

/* Botão primário */
.btn-primary {
    background: #667eea; /* Fundo azul */
    color: white; /* Texto branco */
    border: none; /* Sem borda */
    padding: 12px 30px; /* Espaçamento interno */
    border-radius: 25px; /* Bordas arredondadas */
    cursor: pointer; /* Cursor de mão */
    font-weight: 600; /* Peso da fonte */
    font-size: 16px; /* Tamanho da fonte */
    transition: all 0.3s ease; /* Transição suave */
    font-family: inherit; /* Herda fonte do body */
}

/* Efeito hover do botão primário */
.btn-primary:hover {
    background: #5a67d8; /* Cor mais escura */
    transform: translateY(-2px); /* Move para cima */
    box-shadow: 0 5px 15px rgba(90, 103, 216, 0.4); /* Sombra */
}

/* Botão secundário */
.btn-secondary {
    background: transparent; /* Fundo transparente */
    color: #667eea; /* Cor do texto */
    border: 2px solid #667eea; /* Borda colorida */
    padding: 10px 28px; /* Espaçamento interno (menor que primário) */
    border-radius: 25px; /* Bordas arredondadas */
    cursor: pointer; /* Cursor de mão */
    font-weight: 600; /* Peso da fonte */
    font-size: 16px; /* Tamanho da fonte */
    transition: all 0.3s ease; /* Transição suave */
    font-family: inherit; /* Herda fonte do body */
}

/* Efeito hover do botão secundário */
.btn-secondary:hover {
    background: #667eea; /* Fundo colorido */
    color: white; /* Texto branco */
    transform: translateY(-2px); /* Move para cima */
}

/* Seção sobre mim */
.sobre-content {
    max-width: 800px; /* Largura máxima para melhor leitura */
    margin: 0 auto; /* Centraliza */
}

/* Área de especialidades */
.especialidades {
    background: #f8f9ff; /* Fundo levemente azulado */
    padding: 25px; /* Espaçamento interno */
    border-radius: 10px; /* Bordas arredondadas */
    margin: 25px 0; /* Margem vertical */
    border-left: 4px solid #667eea; /* Linha colorida à esquerda */
}

/* Título das especialidades */
.especialidades h3 {
    color: #667eea; /* Cor azul */
    margin-bottom: 15px; /* Espaço embaixo */
    font-size: 20px; /* Tamanho da fonte */
}

/* Lista de especialidades */
.especialidades ul {
    list-style: none; /* Remove bullets padrão */
    padding-left: 0; /* Remove indentação */
}

/* Itens da lista */
.especialidades li {
    padding: 8px 0; /* Espaçamento vertical */
    color: #666; /* Cor do texto */
    position: relative; /* Para posicionar o ícone */
    padding-left: 25px; /* Espaço para o ícone */
}

/* Ícone customizado para lista */
.especialidades li::before {
    content: "✓"; /* Ícone de check */
    color: #667eea; /* Cor azul */
    font-weight: bold; /* Negrito */
    position: absolute; /* Posição absoluta */
    left: 0; /* Alinha à esquerda */
}

/* Seção de contato */
.contato-content {
    max-width: 800px; /* Largura máxima */
    margin: 0 auto; /* Centraliza */
}

/* Informações de contato */
.contact-info {
    display: grid; /* Layout em grid */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Colunas responsivas */
    gap: 25px; /* Espaço entre itens */
    margin-bottom: 40px; /* Espaço embaixo */
}

/* Item individual de informação */
.info-item {
    background: #f8f9ff; /* Fundo claro */
    padding: 20px; /* Espaçamento interno */
    border-radius: 10px; /* Bordas arredondadas */
    text-align: center; /* Centraliza texto */
    border-top: 3px solid #667eea; /* Linha colorida em cima */
}

/* Título dos itens de informação */
.info-item h3 {
    color: #667eea; /* Cor azul */
    margin-bottom: 10px; /* Espaço embaixo */
    font-size: 18px; /* Tamanho da fonte */
}

/* Área de contato rápido */
.quick-contact {
    background: #fff; /* Fundo branco */
    padding: 30px; /* Espaçamento interno */
    border-radius: 15px; /* Bordas arredondadas */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border: 1px solid #e2e8f0; /* Borda sutil */
}

/* Título do contato rápido */
.quick-contact h3 {
    color: #333; /* Cor escura */
    margin-bottom: 25px; /* Espaço embaixo */
    text-align: center; /* Centraliza */
    font-size: 22px; /* Tamanho da fonte */
}

/* Grupo de formulário */
.form-group {
    margin-bottom: 20px; /* Espaço embaixo */
}

/* Campos do formulário */
.form-input,
.form-textarea {
    width: 100%; /* Largura total */
    padding: 12px 15px; /* Espaçamento interno */
    border: 2px solid #e2e8f0; /* Borda cinza */
    border-radius: 8px; /* Bordas arredondadas */
    font-size: 16px; /* Tamanho da fonte */
    font-family: inherit; /* Herda fonte do body */
    transition: border-color 0.3s ease; /* Transição da borda */
}

/* Efeito focus nos campos */
.form-input:focus,
.form-textarea:focus {
    outline: none; /* Remove outline padrão */
    border-color: #667eea; /* Borda azul */
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); /* Sombra azul suave */
}

/* Textarea específico */
.form-textarea {
    height: 100px; /* Altura fixa */
    resize: vertical; /* Permite redimensionar apenas verticalmente */
}

/* Botão do WhatsApp */
.whatsapp-btn {
    background: #25d366; /* Verde do WhatsApp */
    color: white; /* Texto branco */
    border: none; /* Sem borda */
    padding: 15px 30px; /* Espaçamento interno generoso */
    border-radius: 50px; /* Bordas bem arredondadas */
    cursor: pointer; /* Cursor de mão */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: 600; /* Peso da fonte */
    display: flex; /* Layout flexível */
    align-items: center; /* Alinha verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    gap: 10px; /* Espaço entre ícone e texto */
    width: 100%; /* Largura total */
    transition: all 0.3s ease; /* Transição suave */
    font-family: inherit; /* Herda fonte do body */
    margin-top: 10px; /* Espaço em cima */
}

/* Efeito hover do botão WhatsApp */
.whatsapp-btn:hover {
    background: #22c55e; /* Verde mais escuro */
    transform: translateY(-2px); /* Move para cima */
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3); /* Sombra verde */
}

/* Ícone do WhatsApp */
.whatsapp-btn svg {
    width: 24px; /* Largura do ícone */
    height: 24px; /* Altura do ícone */
}

/* RESPONSIVIDADE - Design responsivo para diferentes tamanhos de tela */

/* Tablets e telas médias */
@media (max-width: 768px) {
    .container {
        margin: 0; /* Remove margem em telas pequenas */
    }
    
    .header {
        flex-direction: column; /* Empilha logo e navegação */
        gap: 20px; /* Espaço entre eles */
        text-align: center; /* Centraliza tudo */
    }
    
    .nav {
        flex-wrap: wrap; /* Permite quebra dos botões */
        justify-content: center; /* Centraliza botões */
    }
    
    .main-content {
        padding: 30px 20px; /* Reduz padding lateral */
    }
    
    .inicio-content {
        flex-direction: column; /* Empilha foto e texto */
        text-align: center; /* Centraliza tudo */
    }
    
    .photo-container {
        flex: none; /* Remove flex basis */
    }
    
    .corretora-photo {
        width: 200px; /* Reduz tamanho da foto */
        height: 200px;
    }
    
    .intro-text h2,
    .section h2 {
        font-size: 28px; /* Reduz tamanho do título */
    }
    
    .contact-info {
        grid-template-columns: 1fr; /* Uma coluna apenas */
    }
}

/* Smartphones */
@media (max-width: 480px) {
    .main-content {
        padding: 20px 15px; /* Reduz ainda mais o padding */
    }
    
    .logo {
        font-size: 20px; /* Reduz tamanho do logo */
    }
    
    .nav-btn {
        padding: 8px 16px; /* Reduz padding dos botões */
        font-size: 14px; /* Reduz fonte */
    }
    
    .intro-text h2,
    .section h2 {
        font-size: 24px; /* Reduz mais o título */
    }
    
    .corretora-photo {
        width: 180px; /* Reduz ainda mais a foto */
        height: 180px;
    }
    
    .cta-buttons {
        flex-direction: column; /* Empilha botões */
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%; /* Botões ocupam largura total */
        text-align: center; /* Centraliza texto */
    }
    
    .quick-contact {
        padding: 20px; /* Reduz padding */
    }
    
    .form-input,
    .form-textarea {
        font-size: 16px; /* Mantém tamanho para evitar zoom no iOS */
    }
}