/* Estilo geral */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background: #fdfcfc;
  color: #333;
  line-height: 1.6;
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* --- CABEÇALHO E NAVEGAÇÃO --- */

header {
  background: #290101; /* Bordô escuro */
  color: #fff;
  text-align: center;
  padding: 5px 550px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  display: flex; 
  align-items: center; /* Alinha verticalmente */
  gap: 0px; /* Espaço entre a logo e o menu */
}

/* Faz o nav ocupar todo o espaço restante para permitir o centralizamento */
nav {
    flex-grow: 1; 
}

.logo {
  width: 200px; 
  height: 200px; 
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ffd700; 
}

nav ul {
  list-style: none;
  margin: 0; 
  padding: 0; 
  display: flex;
  justify-content: center; /* Centraliza os links dentro do nav */
  gap: 30px;
  flex-direction: row; 
  align-items: center;
}

nav a {
  color: #ffd700; /* Dourado */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
  padding: 10px 0; 
}

nav a:hover {
  color: #fff;
}

/* Estilos do Menu Hamburguer (Padrão: oculto no desktop) */
.menu-toggle {
    display: none; 
}

.hamburger-icon {
    display: none; 
    cursor: pointer;
    padding: 10px;
    z-index: 101; 
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

/* --- SEÇÕES E CONTEÚDO PRINCIPAL --- */

main {
  padding: 15px 20px;
  max-width: 1000px;
  margin: auto;
}

section {
  margin-bottom: 50px;
}

h2 {
  color: #5c0a0a;
  padding-left: 10px;
  margin-bottom: 15px;
  text-align: center;
  text-decoration: underline;
}

/* --- GALERIA E CARDS --- */

.galeria {
    display: flex;
    flex-wrap: wrap; /* Faz as fotos irem para a linha de baixo */
    gap: 10px;
    justify-content: left;
}

.card img {
    width: 150px; /* Tamanho da miniatura */
    height: 150px;
    object-fit: cover; /* Corta a imagem para preencher o quadrado sem esticar */
    border-radius: 8px;
    cursor: pointer;
}


.card:hover {
  transform: scale(1.05);
  border-color: #5c0a0a;
  color: #5c0a0a;
}

/* Container da equipe */
/* Container que segura todos os cards */
.galeria_dr {
    display: flex;       /* Ativa o alinhamento em linha */
    flex-wrap: wrap;    /* Permite quebrar linha se for necessário */
    justify-content: center; /* Centraliza os cards na tela */
    gap: 20px;          /* Espaço entre um card e outro */
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Estilo individual de cada card */
.galeria_dr .card {
    background: #fff;
    width: 250px;       /* Largura fixa para manter o padrão */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
    border: 1px solid #eee;
}

.galeria_dr .card img {
    width: 100%;
    height: 300px;      /* Altura fixa para todas as fotos ficarem iguais */
    object-fit: cover;  /* Corta a foto sem distorcer */
}

.galeria_dr .info {
    padding: 15px;
}

.galeria_dr .info h3 {
    color: #5c0a0a;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.galeria_dr .info span {
    color: #777;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.galeria_dr .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* A Foto */
.galeria_dr .card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

/* Área do Texto */
.galeria_dr .info {
    padding: 15px;
    background: #fff;
}

.galeria_dr .info h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #5c0a0a; /* O bordô da sua marca */
    font-weight: 600;
}

.galeria_dr .info span {
    display: block;
    font-size: 0.65rem;
    color: #888;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- REDES SOCIAIS --- */

/* Grid das redes */
.social-grid {
    display: flex;             /* Usa Flexbox para alinhamento dinâmico */
    flex-wrap: wrap;           /* ESSENCIAL: Permite que os ícones quebrem linha no celular */
    justify-content: center;   /* Centraliza os ícones horizontalmente */
    gap: 15px;                 /* Espaço igual entre todos os cards */
    padding: 20px 5%;          /* Margem interna para não encostar nas bordas */
    max-width: 100%;           /* Garante que não ultrapasse a largura da tela */
}

/* Cartões de rede social */
.social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90px;               /* Largura fixa para manter o padrão */
    height: 90px;              /* Altura fixa para manter o padrão */
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 15px;
    transition: transform 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    /* REMOVIDO: margens fixas de 550px que causavam a sobreposição */
    margin: 0 !important;      
}

/* Ícones dentro do card */
.social-card .icon {
    font-size: 1.5rem;
    margin-bottom: 0px;
}

/* Cores específicas (Limpas e sem margens) */
.instagram { background: #E1306C; }
.facebook  { background: #1877F2; }
.tiktok    { background: #000000; }

/* Efeito hover */
.social-card:hover {
    transform: translateY(-5px);
}

/* Ajuste para telas muito pequenas (Smartphones estreitos) */
@media (max-width: 400px) {
    .social-card {
        width: 80px;
        height: 80px;
        font-size: 0.8rem;
    }
}

/* --- CONTATO E WHATSAPP/MAPA --- */

/* Container Flexbox para alinhar Telefone e WhatsApp lado a lado */
.contato-telefone {
    display: flex;
    align-items: center; /* Alinha o texto e o botão verticalmente */
    gap: 15px;
    margin-bottom: 15px;
}

.contato-telefone p {
    margin: 0;
    padding: 0;
    line-height: normal;
    white-space: nowrap; /* Impede a quebra de linha do número em telas menores */
}

/* Estilo do botão WhatsApp */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    background-color: #5c0a0a;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.whatsapp-btn:hover {
    background-color: #128C7E;
}

/* Estilo do ícone/texto */
.whatsapp-icon {
    font-size: 0.9rem;
}

/* Container que força o lado a lado */
.localizacao-bloco {
    display: flex;
    flex-direction: row;      /* Força ficar em linha */
    flex-wrap: nowrap;        /* Impede de quebrar linha no computador */
    justify-content: center;  /* Centraliza o par na tela */
    gap: 20px;
    margin-top: 30px;
}

/* Fachada com tamanho fixo */
.fachada-comercio {
    width: 480px; 
    height: 540px;
    border: 2px solid #5c0a0a;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;           /* Garante que não diminua no PC */
}

.fachada-comercio img {
    width: 100%;
    height: 100%;
    
}

/* Mapa com o mesmo tamanho da fachada */
.mapa-container {
    width: 480px; 
    height: 540px;
    border: 2px solid #5c0a0a;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;           /* Garante que não diminua no PC */
}

.mapa-container iframe {
    width: 100%; 
    height: 100%; 
}

/* --- REGRAS PARA CELULAR (AQUI SIM PODE FICAR UM EM CIMA DO OUTRO) --- */
@media (max-width: 1000px) {
    .localizacao-bloco {
        flex-wrap: wrap;      /* Permite empilhar apenas em telas pequenas */
    }
    
    .fachada-comercio, .mapa-container {
        width: 100%;          /* Ocupa a largura total do celular */
        max-width: 480px;     /* Mas não cresce além do original */
        height: auto;
        aspect-ratio: 480 / 540; /* Mantém a proporção vertical solicitada */
    }
}

/* --- RODAPÉ --- */

footer {
  text-align: center;
  padding: 20px;
  background: #290101;
  color: #fff;
  font-size: 0.9rem;
  margin-top: 30px;
}

/* --- RESPONSIVIDADE (MOBILE) --- */

@media (max-width: 768px) {
    /* Menu Hamburguer */
    nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 140px; 
        left: 0;
        background: #5c0a0a;
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        z-index: 100;
        padding-bottom: 10px;
    }
    
    nav {
        flex-grow: 0; /* Desabilita o crescimento do nav no mobile */
    }

    nav ul li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    nav a {
        display: block;
        padding: 15px 20px;
        color: #ffd700;
    }

    /* Exibe o ícone do hambúrguer */
    .hamburger-icon {
        display: block;
    }

    /* Efeito de abertura/fechamento do menu */
    .menu-toggle:checked ~ nav ul {
        display: flex;
    }

    /* Animação do ícone para 'X' */
    .menu-toggle:checked ~ .hamburger-icon .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle:checked ~ .hamburger-icon .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle:checked ~ .hamburger-icon .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    
    header {
        /* No mobile, voltamos a justificar para separar logo e ícone nas bordas */
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 10px 20px;
    }

    .logo {
        width: 100px;
        height: 100px;
    }
    
    .social-card {
        width: 100%;
        height: 120px;
        font-size: 1rem;
    }
}

@media (max-width: 500px) {
    .social-card {
        width: 120px;
        height: 120px;
        font-size: 1rem;
    }

    .social-card .icon {
        font-size: 2rem;
    }
}

.content-container {
    display: flex; /* Alinha os itens lado a lado */
    align-items: flex-start; /* Alinha pelo topo */
    gap: 40px; /* Espaço entre a foto e o texto */
    margin-top: 20px;
}

/* Estilização da Imagem */
.Fernanda {
    flex-shrink: 0; /* Impede que a imagem seja espremida */
}

.Fernanda img {
    width: 240px;
    height: 320px;
    object-fit: cover;
    background-color: transparent;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Efeito de destaque */
}

/* Carrossel fotos */
.carousel-container {
    width: 100%;           /* Ocupa toda a largura disponível */
    max-width: 540px;      /* Mas não passa do tamanho original no PC */
    height: auto;          /* Altura flexível */
    aspect-ratio: 480 / 540; /* Mantém a proporção que você definiu */
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.carousel-slide {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide img {
    width: 100%;           /* Imagem sempre da largura do container */
    height: 100%;          /* Imagem sempre da altura do container */
    flex-shrink: 0;
    object-fit: cover;     /* Garante que a foto preencha o espaço sem sobras */
}

/* Botões de navegação ajustados para o polegar no mobile */
button#prevBtn, button#nextBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(92, 10, 10, 0.7); /* Bordô com transparência */
    color: white;
    border: none;
    padding: 12px 8px;
    cursor: pointer;
    z-index: 10;
    border-radius: 0 5px 5px 0;
    font-size: 18px;
}

#nextBtn {
    right: 0;
    border-radius: 5px 0 0 5px;
}

/* AJUSTE ESPECÍFICO PARA SMARTPHONES */
@media (max-width: 768px) {
    .carousel-container {
        width: 95%;        /* Deixa uma pequena margem nas laterais no celular */
        aspect-ratio: 1 / 1; /* No celular, fotos quadradas costumam ficar melhores */
    }
    
    button#prevBtn, button#nextBtn {
        padding: 10px 5px;
        font-size: 14px;   /* Botões um pouco menores para não cobrir a foto */
    }
}

/* Estilo dos botões */
button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 8px;
  cursor: pointer;
}

#prevBtn { left: 10px; }
#nextBtn { right: 10px; }

/* --- ESTILO DO ZOOM (LIGHTBOX) --- */

/* Fundo escuro que cobre a tela toda */
.lightbox {
    display: none; /* Escondido por padrão, o JS mudará para 'flex' */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Fundo bem escuro */
    z-index: 99999; /* Valor altíssimo para cobrir header e menu */
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* A imagem ampliada no centro */
.lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border: 4px solid white;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    animation: zoomAnim 0.3s ease-out; /* Animação de abertura */
}

/* Animação para a foto abrir crescendo */
@keyframes zoomAnim {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Container principal */
.perfil-container {
    max-width: 800px;
    line-height: 1.8;
}

/* Biografia com texto justificado e limpo */
.bio-texto {
    font-size: 1.1rem;
    color: #444;
    text-align: justify;
    margin-bottom: 25px;
}

/* Estilização da frase de efeito (Missão) */
.frase-destaque {
    border-left: 4px solid #ffd700; /* Detalhe em Dourado */
    padding-left: 20px;
    margin: 30px 0;
    font-style: italic;
    color: #5c0a0a; /* Seu Bordô */
    font-weight: 500;
    font-size: 1.05rem;
}

/* Botão Estilo Premium */
.btn-pdf {
    display: inline-flex;
    align-items: center;
    background-color: #5c0a0a;
    color: #ffd700 !important; /* Dourado no texto */
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 1px solid #ffd700;
}

.btn-pdf:hover {
    background-color: #ffd700;
    color: #5c0a0a !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

.btn-pdf .icon {
    margin-right: 12px;
    font-size: 1.2rem;
}

/* Estilos para a página Sobre */
.sobre-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.intro-sobre {
    font-size: 1.2rem;
    color: #444;
    margin-bottom: 40px;
    line-height: 1.8;
}

.sobre-detalhes {
    display: flex;
    gap: 30px;
    text-align: left;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.sobre-detalhes .coluna {
    flex: 1;
    min-width: 300px;
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-top: 3px solid #ffd700;
}

.sobre-detalhes h3 {
    color: #5c0a0a;
    margin-bottom: 15px;
}

.missao-sobre {
    font-size: 1.3rem;
    font-style: italic;
    color: #5c0a0a;
    border-top: 1px solid #eee;
    padding-top: 30px;
    font-weight: 500;
}

/* Layout Base (Computador) */
.content-container {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 20px 0;
}

.Fernanda {
    flex: 0 0 350px; /* Largura da foto no PC */
}

.Fernanda img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.perfil-container {
    flex: 1;
}

/* REGRAS ESPECÍFICAS PARA CELULAR */
@media (max-width: 768px) {
    .content-container {
        flex-direction: column; /* Empilha: Foto em cima, Texto embaixo */
        align-items: center;    /* Centraliza os itens */
        gap: 20px;
    }

    .Fernanda {
        flex: 0 0 auto;
        width: 100%;           /* Foto ocupa a largura disponível */
        max-width: 300px;      /* Mas não fica gigante */
    }

    .perfil-container {
        text-align: center;    /* Texto centralizado no mobile fica mais elegante */
    }

    .bio-texto {
        text-align: center;    /* Facilita a leitura no celular */
        font-size: 1rem;
    }

    .frase-destaque {
        border-left: none;
        border-top: 3px solid #ffd700; /* Linha dourada em cima no mobile */
        padding: 20px 10px;
        margin: 20px 0;
    }

    .btn-pdf {
        width: 100%;           /* Botão largo no mobile para facilitar o toque */
        justify-content: center;
    }
    
    /* --- AJUSTES NA PÁGINA CONTATO --- */

/* Faz os telefones e botões de WhatsApp empilharem no mobile */
@media (max-width: 768px) {
    .contato-telefone {
        flex-direction: column; /* Empilha telefone e botão */
        align-items: flex-start; /* Alinha à esquerda */
        gap: 10px;
        margin-bottom: 20px;
    }

    .contato-telefone p {
        font-size: 1.1rem;
        font-weight: bold;
    }

    .whatsapp-btn {
        width: 100%; /* Botão largo para facilitar o toque no celular */
        justify-content: center;
        padding: 12px;
        margin-bottom: 15px; /* Espaço antes do próximo número */
    }
    
    .endereco {
        text-align: left;
        font-size: 1rem;
        line-height: 1.4;
    }
}