/* ============================================================
   STYLE.CSS — Folha de Estilos Principal
   Site institucional SPA para loja de tecnologia de bairro.
   
   SUMÁRIO:
   1. Variáveis CSS (Custom Properties)
   2. Reset e Estilos Base
   3. Canvas de Partículas
   4. Scroll Snap e Layout Principal
   5. Header / Barra de Navegação
   6. Botão Hambúrguer (Mobile)
   7. Links de Navegação
   8. Seção 1 — Apresentação
   9. Card Glassmorphism
   10. Título Principal (H1) — Efeito Interativo
   11. Indicador de Scroll
   12. Seção 2 — Contato e Mapa
   13. Grid de Cards de Contato
   14. Container do Mapa
   15. Footer / Rodapé
   16. Animações (Keyframes)
   17. Media Queries — Responsividade
============================================================ */


/* ============================================================
   1. VARIÁVEIS CSS (Custom Properties)
   Centraliza cores, dimensões e valores reutilizáveis
   para fácil manutenção e consistência visual.
============================================================ */
:root {
    /* ---- Cores do Degradê do Header ---- */
    --cor-gradiente-inicio: #4FC3F7;   /* Azul claro */
    --cor-gradiente-fim: #00BFA5;      /* Verde ciano */

    /* ---- Cores Principais ---- */
    --cor-fundo: #f0f0f0;              /* Fundo geral do body — cinza claro */
    --cor-texto: #000000;             /* Texto principal */
    --cor-texto-secundario: #555555;  /* Texto secundário/descritivo */

    /* ---- Cores do Footer ---- */
    --cor-footer-bg: #000000;         /* Fundo do rodapé */
    --cor-footer-texto: #ffffff;      /* Texto do rodapé */

    /* ---- Glassmorphism ---- */
    --glass-bg: rgba(255, 255, 255, 0.72);          /* Fundo semi-transparente */
    --glass-border: rgba(255, 255, 255, 0.45);       /* Borda do card */
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); /* Sombra suave */

    /* ---- Tipografia ---- */
    --fonte-principal: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---- Dimensões ---- */
    --header-height: 70px;            /* Altura fixa do header */

    /* ---- Transições ---- */
    --transition-speed: 0.35s;        /* Velocidade padrão das transições */
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Curva suave (Material Design) */
}


/* ============================================================
   2. RESET E ESTILOS BASE
   Remove margens e paddings padrão do navegador.
   Define box-sizing border-box globalmente e
   configura o body com a fonte e cores base.
============================================================ */

/* Reset universal — garante consistência entre navegadores */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Configuração do html e body para rolagem natural suave */
html {
    height: 100%;
    scroll-behavior: smooth;     /* Transição suave ao navegar por âncoras */
}

body {
    font-family: var(--fonte-principal);
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
    min-height: 100%;
    overflow-x: hidden;          /* Evita scroll horizontal */
    -webkit-font-smoothing: antialiased;  /* Suaviza renderização de fontes (WebKit) */
    -moz-osx-font-smoothing: grayscale;   /* Suaviza renderização de fontes (Firefox/macOS) */
}


/* ============================================================
   3. CANVAS DE PARTÍCULAS
   Posicionado fixo cobrindo toda a viewport.
   Fica atrás do conteúdo (z-index: 0) e não
   interfere com interações (pointer-events: none).
============================================================ */
#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;              /* Camada mais ao fundo */
    pointer-events: none;     /* Não captura eventos de mouse */
}


/* ============================================================
   4. LAYOUT PRINCIPAL
   O <main> contém todas as seções com rolagem natural.
   Cada <section> filha tem min-height: 100vh.
============================================================ */
#main-content {
    position: relative;
    z-index: 1;                         /* Acima do canvas de partículas */
}

/* Cada seção ocupa no mínimo a altura da viewport */
.snap-section {
    min-height: 100vh;                  /* Ocupa pelo menos a altura da viewport */
    position: relative;
}


/* ============================================================
   5. HEADER / BARRA DE NAVEGAÇÃO
   Fixa no topo (position: fixed) com fundo em degradê
   linear de azul claro para verde ciano.
   z-index alto para ficar acima de todo o conteúdo.
============================================================ */
#header-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    /* Degradê linear diagonal — azul claro → verde ciano */
    background: linear-gradient(135deg, var(--cor-gradiente-inicio), var(--cor-gradiente-fim));
    z-index: 100;                       /* Acima de todo o conteúdo */
    /* Sombra sutil para destacar o header do conteúdo */
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
    /* Transição suave para possíveis mudanças visuais */
    transition: box-shadow var(--transition-speed) var(--transition-ease);
}

/* Container interno do navbar — distribuição horizontal */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1200px;                  /* Largura máxima para telas grandes */
    margin: 0 auto;                     /* Centraliza horizontalmente */
    padding: 0 40px;                    /* Espaçamento lateral */
}


/* ============================================================
   5.1 LOGOTIPO DA NAVBAR
   Nome da loja no canto esquerdo.
============================================================ */
.nav-logo a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    /* Efeito de brilho sutil no hover */
    transition: text-shadow var(--transition-speed) var(--transition-ease);
}

.nav-logo a:hover {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}


/* ============================================================
   6. BOTÃO HAMBÚRGUER (MOBILE)
   Visível apenas em telas ≤ 768px.
   Três linhas horizontais que se transformam em "X"
   quando o menu está ativo.
============================================================ */
.hamburger {
    display: none;                      /* Oculto por padrão (desktop) */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 110;                       /* Acima do menu mobile */
}

/* Cada linha do ícone hambúrguer */
.hamburger-line {
    display: block;
    width: 26px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
    margin: 3px 0;
    /* Transição para animação de transformação em "X" */
    transition: all var(--transition-speed) var(--transition-ease);
    transform-origin: center;
}

/* ---- Estado Ativo (X) ---- */
/* Primeira linha: rotaciona 45° para baixo-direita */
.hamburger.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

/* Segunda linha (meio): desaparece */
.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

/* Terceira linha: rotaciona -45° para cima-direita */
.hamburger.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}


/* ============================================================
   7. LINKS DE NAVEGAÇÃO
   Menu horizontal no desktop.
   No mobile (≤ 768px), transforma-se em painel
   lateral que desliza da direita.
============================================================ */
.nav-links {
    display: flex;
    list-style: none;
    gap: 35px;
    align-items: center;
}

/* Cada link do menu */
.nav-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    position: relative;
    padding: 6px 0;
    /* Transição suave para efeitos de hover */
    transition: color var(--transition-speed) var(--transition-ease);
}

/*
   Pseudo-elemento ::after — Linha animada de underline
   Fica abaixo do link e expande de 0% a 100% no hover.
   Cria um efeito de "sublinhado crescente" elegante.
*/
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;                          /* Começa do centro */
    width: 0;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
    transition: width var(--transition-speed) var(--transition-ease),
                left var(--transition-speed) var(--transition-ease);
}

/* No hover, a linha expande do centro para as bordas */
.nav-link:hover::after {
    width: 100%;
    left: 0;
}

/* Link ativo (seção atualmente visível) */
.nav-link.active::after {
    width: 100%;
    left: 0;
}


/* ============================================================
   8. SEÇÃO 1 — APRESENTAÇÃO
   Seção hero de 100vh com card Glassmorphism centralizado.
   O padding-top compensa a altura do header fixo.
============================================================ */
.section-apresentacao {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--header-height) 40px 40px;
    /* Fundo transparente para as partículas do canvas serem visíveis */
    background: transparent;
}


/* ============================================================
   9. CARD GLASSMORPHISM
   Container estilizado com efeito de vidro fosco:
   - Fundo semi-transparente (rgba branco)
   - backdrop-filter: blur para desfoque do fundo
   - Cantos arredondados e borda fina translúcida
   - Sombra suave para profundidade
   Garante 100% de legibilidade sobre o fundo animado.
============================================================ */
.glass-card {
    background: var(--glass-bg);
    /* Desfoque do fundo — cria o efeito de vidro fosco */
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 24px;
    /* Borda fina translúcida para definir as bordas do card */
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    padding: 60px 50px;
    max-width: 780px;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Animação de entrada: surge de baixo com fade-in */
    animation: fadeInUp 1s var(--transition-ease) both;
}

/*
   Pseudo-elemento ::before — Brilho sutil de borda
   Gradiente que aparece ao redor do card no hover,
   criando um efeito de "glow" nas bordas.
*/
.glass-card::before {
    content: '';
    position: absolute;
    inset: -2px;                        /* Expande 2px além das bordas */
    border-radius: 26px;               /* Ligeiramente maior que o card */
    background: linear-gradient(
        135deg,
        rgba(79, 195, 247, 0.35),      /* Azul claro translúcido */
        rgba(0, 191, 165, 0.35)        /* Verde ciano translúcido */
    );
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s var(--transition-ease);
}

/* Glow aparece suavemente ao passar o mouse sobre o card */
.glass-card:hover::before {
    opacity: 1;
}


/* ============================================================
   10. TÍTULO PRINCIPAL (H1) — EFEITO INTERATIVO
   O título reage ao hover com transição suave de cor
   (preto → verde ciano) e leve efeito de escala/brilho.
============================================================ */
.titulo-principal {
    font-size: clamp(1.6rem, 4vw, 2.8rem); /* Tamanho fluido responsivo */
    font-weight: 700;
    color: var(--cor-texto);
    line-height: 1.25;
    margin-bottom: 24px;
    cursor: default;
    /* Transição suave para cor, escala e brilho */
    transition: color 0.45s var(--transition-ease),
                transform 0.45s var(--transition-ease),
                text-shadow 0.45s var(--transition-ease);
}

/*
   Hover no H1:
   - Muda a cor para verde ciano (cor-gradiente-fim)
   - Aplica leve escala (1.03x) para efeito de "zoom sutil"
   - Adiciona text-shadow com glow ciano para efeito de brilho
*/
.titulo-principal:hover {
    color: var(--cor-gradiente-fim);
    transform: scale(1.03);
    text-shadow:
        0 0 30px rgba(0, 191, 165, 0.30),
        0 0 60px rgba(0, 191, 165, 0.15);
}

/* Parágrafo descritivo abaixo do título */
.descricao-principal {
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    font-weight: 400;
    color: var(--cor-texto-secundario);
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
}


/* ============================================================
   11. INDICADOR DE SCROLL
   Seta animada que convida o usuário a rolar para
   a próxima seção. Animação de bounce contínua.
============================================================ */
.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    /* Animação de bounce (sobe e desce) */
    animation: bounce 2s ease-in-out infinite;
}

.scroll-arrow-container {
    width: 36px;
    height: 36px;
    color: var(--cor-gradiente-fim);
    opacity: 0.7;
}

.scroll-arrow-svg {
    width: 100%;
    height: 100%;
}

.scroll-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cor-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.6;
}


/* ============================================================
   12. SEÇÃO 2 — SERVIÇOS
   Seção intermediária que apresenta os três pilares
   de atuação da loja em cards verticais com ícone,
   título, descrição e lista de itens.
============================================================ */
.section-servicos {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--header-height) 40px 40px;
    background: transparent;
}

/* Wrapper com largura máxima para o conteúdo de serviços */
.servicos-wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* Grid responsivo dos cards de serviço — 3 colunas no desktop */
.servicos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 10px;
}

/* Cada card de serviço */
.servico-card {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 32px 28px 28px;
    position: relative;
    overflow: hidden;
    /* Animação de entrada via IntersectionObserver */
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s var(--transition-ease),
                transform 0.6s var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease);
}

/* Estado visível (classe adicionada via JS) */
.servico-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Barra gradiente decorativa no topo do card */
.servico-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--cor-gradiente-inicio), var(--cor-gradiente-fim));
}

/* Hover: elevação e sombra */
.servico-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.10);
}

.servico-card.visible:hover {
    transform: translateY(-6px);
}

/* Container do ícone do serviço */
.servico-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--cor-gradiente-inicio), var(--cor-gradiente-fim));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform var(--transition-speed) var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease);
}

.servico-icon svg {
    width: 30px;
    height: 30px;
}

/* Hover: ícone ganha escala e glow */
.servico-card:hover .servico-icon {
    transform: scale(1.08) rotate(4deg);
    box-shadow: 0 6px 20px rgba(0, 191, 165, 0.3);
}

/* Título do serviço */
.servico-titulo {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cor-texto);
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Descrição do serviço */
.servico-descricao {
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--cor-texto-secundario);
    line-height: 1.7;
    margin-bottom: 16px;
}

/* Lista de itens do serviço */
.servico-lista {
    list-style: none;
    padding: 0;
}

.servico-lista li {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--cor-texto-secundario);
    padding: 5px 0 5px 22px;
    position: relative;
    line-height: 1.5;
}

/* Bullet point personalizado — bolinha gradiente */
.servico-lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cor-gradiente-inicio), var(--cor-gradiente-fim));
}


/* ============================================================
   13. SEÇÃO 3 — CONTATO E MAPA
   Layout em Flexbox coluna para distribuir:
   - Conteúdo de contato (flex: 1, ocupa espaço restante)
   - Footer (flex-shrink: 0, altura fixa no fundo)
============================================================ */
.section-contato {
    display: flex;
    flex-direction: column;
    padding-top: var(--header-height);
    background: transparent;
}

/* Wrapper do conteúdo — ocupa todo espaço disponível */
.contato-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 25px 40px 15px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;                   /* Evita overflow de conteúdo */
}

/* Título da seção de contato */
.section-title {
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--cor-texto);
    text-align: center;
    margin-bottom: 20px;
    /* Animação de entrada (disparada via JS IntersectionObserver) */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--transition-ease),
                transform 0.6s var(--transition-ease);
}

/* Estado visível do título (classe adicionada via JS) */
.section-title.visible {
    opacity: 1;
    transform: translateY(0);
}

/*
   Pseudo-elemento ::after — Linha decorativa gradiente
   Barra horizontal colorida abaixo do título da seção.
*/
.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, var(--cor-gradiente-inicio), var(--cor-gradiente-fim));
    margin: 12px auto 0;
    border-radius: 2px;
}


/* ============================================================
   13. GRID DE CARDS DE CONTATO
   Layout em CSS Grid responsivo com auto-fit.
   Cada card tem efeito de hover (elevação + sombra)
   e barra gradiente no topo.
============================================================ */
.contato-grid {
    display: grid;
    /* Grid responsivo: colunas se adaptam automaticamente.
       Mín. 170px por card, máx. 1fr (igual) */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

/* Cada card de contato */
.contato-card {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 22px 16px 18px;
    text-align: center;
    text-decoration: none;
    color: var(--cor-texto);
    border: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* Transição para efeito de hover (elevação + sombra) */
    transition: transform var(--transition-speed) var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease);
    /* Animação de entrada escalonada (stagger) via JS */
    opacity: 0;
    transform: translateY(20px);
}

/* Estado visível do card (classe adicionada via JS) */
.contato-card.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s var(--transition-ease),
                transform 0.5s var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease);
}

/*
   Pseudo-elemento ::before — Barra gradiente no topo
   Linha colorida fina no topo de cada card.
*/
.contato-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, var(--cor-gradiente-inicio), var(--cor-gradiente-fim));
    /* Cresce do centro no hover */
    transform: scaleX(0);
    transition: transform var(--transition-speed) var(--transition-ease);
}

/* Barra aparece no hover */
.contato-card:hover::before,
.contato-card.visible:hover::before {
    transform: scaleX(1);
}

/*
   Hover no card:
   - translateY(-6px): eleva o card para cima
   - Sombra mais pronunciada para profundidade
*/
.contato-card:hover,
.contato-card.visible:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.10);
}

/* Container circular do ícone SVG */
.contato-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    /* Fundo gradiente circular */
    background: linear-gradient(135deg, var(--cor-gradiente-inicio), var(--cor-gradiente-fim));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    /* Transição para efeito de rotação no hover */
    transition: transform var(--transition-speed) var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease);
}

/* Ícone SVG dentro do container circular */
.contato-icon svg {
    width: 22px;
    height: 22px;
}

/* Hover no card → ícone gira e ganha glow */
.contato-card:hover .contato-icon {
    transform: scale(1.1) rotate(8deg);
    box-shadow: 0 4px 15px rgba(0, 191, 165, 0.3);
}

/* Título do card (ex: "E-mail", "WhatsApp") */
.contato-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--cor-texto);
}

/* Informação do card (ex: e-mail, telefone) */
.contato-card p {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--cor-texto-secundario);
    word-break: break-all;              /* Quebra textos longos como e-mails */
}


/* ============================================================
   14.1 CORES DAS MARCAS NOS CARDS DE CONTATO
   Cada card usa a cor oficial da respectiva marca/serviço
   no ícone circular e na barra decorativa do topo.
============================================================ */

/* ---- E-mail: Azul Gmail (#4285F4) ---- */
.card-email .contato-icon {
    background: linear-gradient(135deg, #4285F4, #5B9BF8);
}
.card-email::before {
    background: linear-gradient(135deg, #4285F4, #5B9BF8);
}
.card-email:hover .contato-icon {
    box-shadow: 0 4px 18px rgba(66, 133, 244, 0.4);
}

/* ---- WhatsApp: Verde (#25D366) ---- */
.card-whatsapp .contato-icon {
    background: linear-gradient(135deg, #25D366, #128C7E);
}
.card-whatsapp::before {
    background: linear-gradient(135deg, #25D366, #128C7E);
}
.card-whatsapp:hover .contato-icon {
    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4);
}

/* ---- Google Meu Negócio: Azul Google (#4285F4) → Verde (#34A853) ---- */
.card-google-business .contato-icon {
    background: linear-gradient(135deg, #4285F4, #34A853);
}
.card-google-business::before {
    background: linear-gradient(135deg, #4285F4, #34A853);
}
.card-google-business:hover .contato-icon {
    box-shadow: 0 4px 18px rgba(66, 133, 244, 0.4);
}

/* ---- Google Maps: Vermelho Google (#EA4335) ---- */
.card-maps .contato-icon {
    background: linear-gradient(135deg, #EA4335, #FBBC04);
}
.card-maps::before {
    background: linear-gradient(135deg, #EA4335, #FBBC04);
}
.card-maps:hover .contato-icon {
    box-shadow: 0 4px 18px rgba(234, 67, 53, 0.4);
}

/* ---- Endereço: Azul Escuro Neutro (#37474F) ---- */
.card-endereco .contato-icon {
    background: linear-gradient(135deg, #37474F, #546E7A);
}
.card-endereco::before {
    background: linear-gradient(135deg, #37474F, #546E7A);
}
.card-endereco:hover .contato-icon {
    box-shadow: 0 4px 18px rgba(55, 71, 79, 0.4);
}


/* ============================================================
   15. CONTAINER DO MAPA
   Iframe do Google Maps estilizado com cantos
   arredondados e sombra. Ocupa o espaço restante
   do flex (flex: 1) dentro da section-contato.
============================================================ */
.mapa-container {
    flex: 1;
    min-height: 250px;                  /* Garante uma altura mínima razoável */
    position: relative;                 /* Necessário para o iframe absoluto funcionar */
    border-radius: 14px;
    overflow: hidden;                   /* Esconde cantos do iframe */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    /* Animação de entrada via IntersectionObserver */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--transition-ease),
                transform 0.7s var(--transition-ease);
}

/* Estado visível do mapa */
.mapa-container.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Iframe dentro do container do mapa */
.mapa-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}


/* ============================================================
   15. FOOTER / RODAPÉ
   Fundo totalmente preto (#000) com texto branco (#fff).
   Formato profissional com copyright, CNPJ e endereço.
============================================================ */
#footer-principal {
    flex-shrink: 0;                     /* Não encolhe dentro do flex */
    background-color: var(--cor-footer-bg);
    color: var(--cor-footer-texto);
    padding: 18px 40px;
    text-align: center;
}

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

/* Copyright */
.footer-copyright {
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

/* Container dos dados fiscais (CNPJ e endereço) */
.footer-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 300;
    opacity: 0.8;
}

/* Divisor visual "|" entre CNPJ e endereço */
.footer-divider {
    opacity: 0.4;
}


/* ============================================================
   16. ANIMAÇÕES (KEYFRAMES)
   Definição de todas as animações CSS utilizadas.
============================================================ */

/* 
   fadeInUp — Animação de entrada do glass card
   O elemento surge de baixo (30px) com fade-in.
*/
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
   bounce — Animação contínua do indicador de scroll
   Move o elemento para cima e para baixo suavemente.
*/
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/*
   fadeInCard — Animação de entrada dos cards de contato
   Usado no JS com IntersectionObserver para efeito escalonado.
*/
@keyframes fadeInCard {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   17. MEDIA QUERIES — RESPONSIVIDADE
   Adaptações para tablets (≤ 768px) e smartphones.
============================================================ */

/* ---- Breakpoint Tablet: 768px ---- */
@media (max-width: 768px) {

    /* Exibe o botão hambúrguer no mobile */
    .hamburger {
        display: flex;
    }

    /*
       Menu mobile — Painel lateral que desliza da direita.
       Ocupaação total da tela abaixo do header.
       Fundo com o mesmo degradê do header.
    */
    .nav-links {
        position: fixed;
        top: var(--header-height);
        right: -100%;                   /* Começa escondido fora da tela à direita */
        width: 75%;
        max-width: 320px;
        height: calc(100vh - var(--header-height));
        /* Mesmo degradê do header para coesão visual */
        background: linear-gradient(180deg, var(--cor-gradiente-inicio), var(--cor-gradiente-fim));
        flex-direction: column;
        padding: 40px 30px;
        gap: 0;
        /* Sombra à esquerda do painel */
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
        /* Transição suave de deslizamento */
        transition: right var(--transition-speed) var(--transition-ease);
        z-index: 99;
    }

    /* Estado ativo — menu visível (classe adicionada via JS) */
    .nav-links.active {
        right: 0;
    }

    /* Links do menu mobile — Maiores e com mais espaçamento */
    .nav-links .nav-link {
        font-size: 1.15rem;
        padding: 15px 0;
        display: block;
        /* Borda inferior sutil entre os itens */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Remove borda do último item */
    .nav-links li:last-child .nav-link {
        border-bottom: none;
    }

    /* Scroll e seções já são naturais — sem ajuste necessário */

    /* Padding reduzido no mobile */
    .navbar {
        padding: 0 20px;
    }

    /* Glass card adaptado para telas menores */
    .glass-card {
        padding: 40px 25px;
        border-radius: 18px;
    }

    .section-apresentacao {
        padding: var(--header-height) 20px 30px;
    }

    /* Serviços: layout adaptado para mobile */
    .section-servicos {
        padding: var(--header-height) 20px 30px;
    }

    .servicos-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .servico-card {
        padding: 24px 20px 20px;
    }

    .servico-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .servico-icon svg {
        width: 24px;
        height: 24px;
    }

    /* Contato: padding reduzido */
    .contato-wrapper {
        padding: 20px 20px 10px;
    }

    /* Grid de contato: colunas menores no mobile */
    .contato-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
        margin-bottom: 15px;
    }

    /* Cards menores no mobile */
    .contato-card {
        padding: 16px 12px 14px;
    }

    .contato-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
    }

    .contato-icon svg {
        width: 18px;
        height: 18px;
    }

    .contato-card h3 {
        font-size: 0.82rem;
    }

    .contato-card p {
        font-size: 0.7rem;
    }

    /* Mapa com altura mínima reduzida */
    .mapa-container {
        min-height: 120px;
    }

    /* Footer compacto */
    #footer-principal {
        padding: 14px 20px;
    }

    .footer-info {
        flex-direction: column;
        gap: 3px;
    }

    .footer-divider {
        display: none;                  /* Oculta divisor no mobile */
    }
}

/* ---- Breakpoint Smartphone Pequeno: 480px ---- */
@media (max-width: 480px) {

    /* Header menor */
    :root {
        --header-height: 60px;
    }

    /* Título ainda menor em smartphones */
    .titulo-principal {
        font-size: clamp(1.3rem, 5vw, 1.8rem);
    }

    .descricao-principal {
        font-size: 0.85rem;
    }

    .glass-card {
        padding: 30px 20px;
    }

    /* Grid em coluna única em telas muito pequenas */
    .contato-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .section-title {
        font-size: 1.2rem;
        margin-bottom: 14px;
    }
}

/* ============================================================
   OVERLAY DO MENU MOBILE
   Fundo escuro semi-transparente que cobre o conteúdo
   quando o menu mobile está aberto. Fecha o menu ao
   ser clicado (comportamento implementado no JS).
============================================================ */
.menu-overlay {
    position: fixed;
    inset: 0;                           /* Cobre toda a tela */
    background: rgba(0, 0, 0, 0.45);
    z-index: 98;                        /* Abaixo do menu, acima do conteúdo */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed) var(--transition-ease),
                visibility var(--transition-speed) var(--transition-ease);
}

/* Overlay visível quando o menu está ativo */
.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}