/* assets/css/style.css */

/* Definição de variáveis CSS para cores e espaçamentos */
:root {
    /* Cores da marca SymConnect */
    --color-primary-dark-blue: #1e3a8a; /* Azul escuro principal */
    --color-secondary-dark-blue: #1e40af; /* Azul escuro secundário para gradiente */
    --color-tertiary-blue: #3b82f6; /* Azul para detalhes e ícones */
    --color-white: #ffffff; /* Branco puro */
    --color-off-white: #f9fafb; /* Off-white para fundos e hover de botões */
    --color-light-blue: #bfdbfe; /* Azul muito claro para texto e links */
    --color-text-dark: #1f2937; /* Cor de texto escuro para títulos */
    --color-text-medium: #4b5563; /* Cor de texto médio para descrições */
    --color-text-light: #6b7280; /* Cor de texto claro para parágrafos */
    --color-gray-background: #f8f8f8; /* Fundo cinza claro para seções */
    --color-whatsapp-start: #25D366;
    --color-whatsapp-end: #128C7E;
    --color-footer-background: #000000; /* Fundo preto para o rodapé */

    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-blue-md: 0 8px 16px -4px rgba(30, 64, 175, 0.3);
    --shadow-blue-lg: 0 15px 30px -10px rgba(30, 64, 175, 0.2);
    --shadow-whatsapp: 0 4px 10px rgba(37, 211, 102, 0.3);
    --shadow-whatsapp-hover: 0 6px 15px rgba(37, 211, 102, 0.4);
    --shadow-email: 0 4px 10px rgba(59, 130, 246, 0.3);
    --shadow-email-hover: 0 6px 15px rgba(59, 130, 246, 0.4);
}

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

body {
    font-family: 'Montserrat', sans-serif; /* Fonte principal do site */
    line-height: 1.6;
    color: var(--color-text-dark); /* Cor de texto padrão */
    background-color: var(--color-gray-background); /* Fundo geral do corpo */
    scroll-behavior: smooth; /* Rolagem suave para âncoras */
}

/* Estilos de links e listas */
a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Estilos do Header (Cabeçalho de Navegação) */
.header {
    /* Gradiente de tons azuis para o cabeçalho */
    background: linear-gradient(90deg, #1e3a8a, #1e40af, #3b82f6);
    box-shadow: var(--shadow-md);
    position: fixed;
    width: 100%;
    z-index: 50;
    transition: all 0.3s ease; /* Transição para suavizar o encolhimento */
    top: 0;
    left: 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem; /* Reduzido o padding vertical para 16px */
    max-width: 1280px;
    margin: 0 auto;
    transition: padding 0.3s ease; /* Transição para o padding */
}

/* Ajustes para a logo e texto no Header */
.logo-container {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-icon {
    width: 4.5rem; /* Tamanho inicial da logo (72px) */
    height: 4.5rem; /* Tamanho inicial da logo (72px) */
    background-color: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem; /* 12px */
    overflow: hidden; /* Garante que a imagem se ajuste */
    transition: width 0.3s ease, height 0.3s ease; /* Transição para o tamanho da logo */
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ajusta a imagem dentro do contêiner */
}

.logo-text {
    color: var(--color-white);
    font-size: 1.8rem; /* Tamanho inicial do texto (28.8px) */
    font-weight: 700;
    line-height: 1; /* Adicionado para centralizar verticalmente melhor */
    white-space: nowrap;
    transition: font-size 0.3s ease; /* Transição para o tamanho da fonte */
}

/* Estilos do Header quando rolado (scrolled) */
.header.scrolled .header-container {
    padding: 0.5rem 1.5rem; /* Padding menor quando rolado (8px) */
}

.header.scrolled .logo-icon {
    width: 3rem; /* Logo menor quando rolado (48px) */
    height: 3rem; /* Logo menor quando rolado (48px) */
}

.header.scrolled .logo-text {
    font-size: 1.2rem; /* Texto menor quando rolado (19.2px) */
}

/* Navegação Desktop */
.desktop-nav {
    display: none; /* Oculta por padrão em telas pequenas */
}

@media (min-width: 768px) { /* md breakpoint */
    .desktop-nav {
        display: block; /* Exibe a navegação desktop */
    }
    .nav-links {
        display: flex; /* Garante que os links fiquem na horizontal */
        gap: 2.5rem; /* Espaçamento entre os links */
    }
    .nav-link {
        white-space: nowrap; /* Garante que o texto do link não quebre a linha */
        color: var(--color-white); /* Garante que a cor do link seja branca */
        position: relative; /* Necessário para o pseudo-elemento ::after */
        padding-bottom: 0.25rem; /* Espaço para a barrinha */
        transition: color 0.3s ease; /* Transição para a cor do texto */
    }

    /* Efeito de barrinha branca ao passar o mouse */
    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0; /* Começa com largura zero */
        height: 2px; /* Altura da barrinha */
        background-color: var(--color-white);
        transition: width 0.3s ease-out; /* Transição para a largura */
    }

    .nav-link:hover {
        color: var(--color-light-blue); /* Cor azul clarinho ao passar o mouse */
    }

    .nav-link:hover::after {
        width: 100%; /* A barrinha preenche 100% ao passar o mouse */
    }

    .mobile-menu-button {
        display: none; /* Oculta o botão do menu mobile em desktop */
    }
}

/* Botão do Menu Mobile (Hambúrguer) */
.mobile-menu-button {
    color: var(--color-off-white); /* Alterado para off-white */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem; /* 8px */
    /* Garante que o botão seja sempre visível em dispositivos móveis por padrão */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Oculta o botão do menu mobile em telas maiores que 768px */
@media (min-width: 768px) {
    .mobile-menu-button {
        display: none;
    }
}

/* Estilos para o SVG do botão do menu hambúrguer */
.mobile-menu-button svg {
    width: 2rem; /* 32px - Tamanho explícito para o SVG */
    height: 2rem; /* 32px - Tamanho explícito para o SVG */
    stroke: currentColor; /* Garante que a cor seja herdada do pai */
    stroke-width: 2.5; /* Aumenta a espessura do traço para maior visibilidade */
}

/* Menu Mobile (inicialmente oculto) */
.mobile-menu {
    display: none;
    width: 100%;
    padding-bottom: 1rem; /* 16px */
    background: linear-gradient(to right, var(--color-primary-dark-blue), var(--color-secondary-dark-blue));
    position: absolute;
    left: 0;
    top: 100%;
    box-shadow: var(--shadow-md);
}

.mobile-menu.active {
    display: block;
}

.mobile-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-link {
    color: var(--color-white);
    display: block;
    padding: 1.25rem; /* 20px */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.mobile-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Espaçador do Header */
.header-spacer {
    height: 5.5rem; /* Ajusta para a altura inicial do header (aprox. 88px) */
    transition: height 0.3s ease; /* Transição para o espaçador */
}

.header.scrolled + .header-spacer {
    height: 4rem; /* Altura menor para o espaçador quando o header encolhe */
}

/* Estilos da Hero Section (Banner Principal) */
.hero-section {
    position: relative;
    min-height: 45vh; /* Mantido em 45vh */
    background: linear-gradient(135deg, #0f2b5b, var(--color-secondary-dark-blue), var(--color-primary-dark-blue));
    overflow: hidden; /* Adicionado de volta para conter o fundo quadriculado */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem; /* 64px 24px */
    padding-top: 8rem; /* Ajusta padding para o header fixo */
    padding-bottom: 4rem; /* Ajustado para um valor padrão sem a curva */
}

.network-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Revertido para 100% */
    height: 100%; /* Revertido para 100% */
    background-image:
        linear-gradient(rgba(60, 120, 255, 0.2) 3px, transparent 3px), /* Tom de azul, opacidade e espessura ajustados */
        linear-gradient(90deg, rgba(60, 120, 255, 0.2) 3px, transparent 3px); /* Tom de azul, opacidade e espessura ajustados */
    background-size: 80px 80px; /* Aumentado para 80px para quadrados maiores */
    opacity: 0.7;
    z-index: 1; /* Fica abaixo do conteúdo */
    /* Animação para o efeito de cascata/movimento suave do fundo quadriculado */
    animation: moveGrid 20s linear infinite;
}

@keyframes moveGrid {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100px 100px; /* Movimento diagonal: 100px para a direita e 100px para baixo */
    }
}

.network-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Revertido para 100% */
    height: 100%; /* Revertido para 100% */
    overflow: hidden; /* Adicionado de volta */
    z-index: 2; /* Fica abaixo do conteúdo principal, mas acima do fundo quadriculado */
}

.line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: moveLine 8s linear infinite;
    opacity: 0;
}

@keyframes moveLine {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.hero-container {
    max-width: 1280px;
    margin: 0 auto;
    /* Ajustando o padding para garantir espaço nas bordas em todos os tamanhos */
    padding: 0 3rem; /* Mantido em 3rem para mais espaço nas bordas */
    display: flex;
    flex-direction: column;
    align-items: center; /* Alinhamento padrão para mobile (centralizado) */
    text-align: center;
    position: relative;
    z-index: 10; /* Garante que o conteúdo esteja acima dos fundos animados */
    justify-content: center; /* Centraliza verticalmente o conteúdo */
}

@media (min-width: 768px) { /* md breakpoint */
    .hero-container {
        flex-direction: row;
        text-align: left;
        padding: 0 4rem; /* Mantido em 4rem para desktop para mais espaçamento */
        align-items: center; /* Voltar a alinhar ao centro para depois ajustar com margens */
    }
}

.hero-text-column {
    width: 100%;
    margin-bottom: 3rem; /* 48px */
}

@media (min-width: 768px) { /* md breakpoint */
    .hero-text-column {
        width: 55%; /* Mantido para dar mais espaço ao texto */
        margin-bottom: 0;
        padding-right: 2rem; /* Mantido um padding para separar o texto do diagrama */
        margin-top: -4.375rem; /* Ajuste para mover o texto para cima em 70px (90px - 20px) */
    }
}

.hero-title {
    /* Diminuindo o tamanho da fonte em 5% */
    font-size: 2.736rem; /* 2.88rem * 0.95 = 2.736rem */
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 1.539rem; /* 1.62rem * 0.95 = 1.539rem */
    line-height: 1.2;
}

@media (min-width: 768px) { /* md breakpoint */
    .hero-title {
        /* Diminuindo o tamanho da fonte em 5% para desktop */
        font-size: 3.8475rem; /* 4.05rem * 0.95 = 3.8475rem */
    }
}

.text-blue-200-custom { /* Cor para o span "Conectividade, Segurança e Desempenho" */
    color: #bfdbfe;
}

.hero-subtitle {
    /* Diminuindo o tamanho da fonte em 5% */
    font-size: 1.2825rem; /* 1.35rem * 0.95 = 1.2825rem */
    color: var(--color-light-blue);
    margin-bottom: 2.052rem; /* 2.16rem * 0.95 = 2.052rem */
}

@media (min-width: 768px) { /* md breakpoint */
    .hero-subtitle {
        /* Diminuindo o tamanho da fonte em 5% para desktop */
        font-size: 1.4535rem; /* 1.53rem * 0.95 = 1.4535rem */
    }
}

.cta-button {
    /* Aumentando o padding horizontal em 5% para o botão ficar maior e caber o texto em uma linha */
    padding: 1.26rem 3.675rem; /* 1.2rem * 1.05 = 1.26rem; 3.5rem * 1.05 = 3.675rem */
    border-radius: 9999px; /* Full rounded */
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
    background-color: var(--color-white);
    color: var(--color-secondary-dark-blue);
    white-space: nowrap; /* Impede a quebra de linha no botão */
    display: inline-flex; /* Garante que os itens internos fiquem em linha */
    align-items: center; /* Alinha verticalmente os itens internos */
    justify-content: center; /* Centraliza horizontalmente os itens internos */
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background-color: var(--color-off-white);
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.cta-icon {
    /* Aumentando o tamanho do ícone em 5% */
    height: 1.575rem; /* 1.5rem * 1.05 = 1.575rem */
    width: 1.575rem; /* 1.5rem * 1.05 = 1.575rem */
    margin-left: 0.63rem; /* 0.6rem * 1.05 = 0.63rem */
}

.hero-illustration-column {
    width: 100%;
    position: relative;
    /* Aumentando a altura mínima em 5% */
    min-height: 441px; /* 420px * 1.05 = 441px */
    /* Ajustes para preencher melhor o espaço e centralizar */
    display: flex;
    flex-direction: column; /* Para empilhar o SVG e o botão verticalmente */
    align-items: center; /* Centraliza horizontalmente o conteúdo */
    justify-content: center; /* Centraliza verticalmente o conteúdo */
}

@media (min-width: 768px) { /* md breakpoint */
    .hero-illustration-column {
        width: 45%; /* Mantido para dar mais espaço ao texto */
        /* Aumentando a altura em 5% para desktop */
        min-height: 567px; /* 540px * 1.05 = 567px */
        margin-top: -5.625rem; /* Mantido para que a ilustração continue subindo junto com o texto */
    }
}

.network-node {
    position: absolute;
    /* Aumentando o tamanho em 5% */
    width: 10.08px; /* 9.6px * 1.05 = 10.08px */
    height: 10.08px; /* 9.6px * 1.05 = 10.08px */
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    /* Estado inicial para opacidade */
    opacity: 0; /* Começa invisível */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    animation: nodeFadeAndGlow 4s infinite alternate; /* Nova animação para fade e brilho */
}

@keyframes nodeFadeAndGlow {
    0% {
        opacity: 0;
        box-shadow: 0 0 6.3px rgba(255, 255, 255, 0.3); /* 6px * 1.05 = 6.3px */
    }
    50% {
        opacity: 1; /* Totalmente visível no pico do brilho */
        box-shadow: 0 0 18.9px rgba(255, 255, 255, 0.9); /* 18px * 1.05 = 18.9px */
    }
    100% {
        opacity: 0;
        box-shadow: 0 0 6.3px rgba(255, 255, 255, 0.3); /* 6px * 1.05 = 6.3px */
    }
}

.network-diagram-svg {
    width: 100%;
    height: auto;
    /* Aumentando o tamanho máximo do SVG em 5% */
    max-width: 756px; /* 720px * 1.05 = 756px */
    display: block;
    margin: 0 auto; /* Centraliza o SVG */
    position: relative;
    z-index: 5; /* Garante que o SVG esteja acima das linhas de fundo */
}

/* Novo estilo para a sombra de transição */
.section-break-shadow {
    width: 100%;
    height: 1rem; /* Altura da sombra */
    background: transparent;
    box-shadow: inset 0 8px 10px -6px rgba(0, 0, 0, 0.2); /* Sombra interna para cima */
    position: relative; /* Para que a sombra se posicione corretamente */
    z-index: 10; /* Garante que a sombra esteja acima de outros elementos de fundo */
    margin-top: -1rem; /* Para que a sombra se sobreponha um pouco na seção anterior */
}


/* Estilos para a Seção Nossas Soluções Estratégicas */
.servicos-section-custom {
    background-color: var(--color-gray-background);
    padding: 5rem 1.5rem; /* 80px 24px */
}

.container-custom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem; /* 0 24px */
}

.section-title-wrapper {
    text-align: center;
    margin-bottom: 4rem; /* 64px */
}

.section-title-custom {
    font-size: 2.5rem; /* 40px */
    font-weight: 700;
    color: var(--color-primary-dark-blue);
    margin-bottom: 1rem; /* 16px */
}

@media (min-width: 768px) { /* md breakpoint */
    .section-title-custom {
        font-size: 3rem; /* 48px */
    }
}

.section-divider-custom {
    width: 6rem; /* 96px */
    height: 0.25rem; /* 4px */
    background-color: var(--color-tertiary-blue);
    margin: 0 auto;
}

.servicos-cards-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* 1 coluna em mobile */
    gap: 2rem; /* 32px */
}

@media (min-width: 768px) { /* md breakpoint */
    .servicos-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colunas em tablet */
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    .servicos-cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 colunas em desktop */
    }
}

.servico-card {
    background-color: var(--color-white); /* Corrigido para usar a variável CSS */
    border-radius: 0.75rem; /* 12px */
    box-shadow: var(--shadow-md);
    padding: 2rem; /* 32px */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.servico-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-blue-lg);
}

.icon-circle {
    width: 5rem; /* 80px */
    height: 5rem; /* 80px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem; /* 24px */
    background: linear-gradient(135deg, var(--color-secondary-dark-blue), var(--color-tertiary-blue));
    box-shadow: var(--shadow-blue-md);
}

.servico-icon {
    height: 2.5rem; /* 40px */
    width: 2.5rem; /* 40px */
    /* Aplica o filtro para transformar a cor do SVG de preto para off-white luminoso */
    filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%);
    transition: filter 0.3s ease; /* Adiciona transição para o hover */
}

/* Animações para os ícones dos cards de serviço */

/* Animação para o Card 1: Pulso de Brilho (mais intensa) */
.servico-card:nth-child(1) .servico-icon {
    animation: glowPulseIntense 2s infinite alternate;
}

@keyframes glowPulseIntense {
    0% {
        filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%) drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
    }
    50% {
        filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%) drop-shadow(0 0 15px rgba(255, 255, 255, 1));
    }
    100% {
        filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%) drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
    }
}


/* Animação para o Card 2: Escala com Brilho */
.servico-card:nth-child(2) .servico-icon {
    animation: scaleAndGlow 2s infinite alternate;
}

@keyframes scaleAndGlow {
    0% {
        transform: scale(1);
        filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%) drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
    }
    50% {
        transform: scale(1.1); /* Aumenta um pouco o tamanho */
        filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%) drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
    }
    100% {
        transform: scale(1);
        filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%) drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
    }
}

/* Animação para o Card 3: Ondas Conectadas (simulada com pulso de opacidade e sombra) */
.servico-card:nth-child(3) .servico-icon {
    animation: pulseOpacityAndShadow 2.5s infinite ease-in-out;
}

@keyframes pulseOpacityAndShadow {
    0% {
        opacity: 0.7;
        filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%) drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }
    50% {
        opacity: 1;
        filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%) drop-shadow(0 0 12px rgba(255, 255, 255, 1));
    }
    100% {
        opacity: 0.7;
        filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%) drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }
}

/* Animação para o Card 4: Animação de "Ideia" (Burst) */
.servico-card:nth-child(4) .servico-icon {
    animation: ideaBurst 1.5s infinite;
}

@keyframes ideaBurst {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%) drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
    }
    25% {
        transform: scale(1.2);
        opacity: 0.8;
        filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%) drop-shadow(0 0 15px rgba(255, 255, 255, 1));
    }
    50% {
        transform: scale(1);
        opacity: 1;
        filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%) drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
    }
    100% {
        transform: scale(1);
        opacity: 1;
        filter: invert(1) grayscale(1) brightness(2) sepia(1) hue-rotate(200deg) saturate(1000%) drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
    }
}


.servico-title-custom {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    color: var(--color-primary-dark-blue);
    margin-bottom: 0.75rem; /* 12px */
}

.servico-description-custom {
    font-size: 0.95rem; /* 15px */
    color: var(--color-text-light);
    line-height: 1.6;
}


/* Estilos para a Seção Conheça o Especialista (Quem Somos) */
.quem-somos-section-custom {
    background-color: var(--color-white);
    padding: 5rem 1.5rem; /* 80px 24px */
}

/* Garante que o título principal e o divider fiquem centralizados */
.quem-somos-section-custom .section-title-wrapper {
    margin-bottom: 4rem; /* Espaçamento abaixo do título principal */
    text-align: center; /* Garante que o título e o divisor estejam centralizados */
}

.specialist-content-wrapper {
    display: flex;
    flex-direction: column; /* Padrão para mobile */
    align-items: center; /* Centraliza itens em mobile */
    gap: 3rem; /* 48px */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .specialist-content-wrapper {
        flex-direction: row; /* Coluna da imagem à esquerda, texto à direita */
        gap: 3rem; /* Mantém o espaçamento entre as colunas */
        align-items: flex-start; /* Alinha ao topo para o layout de colunas */
    }
}

.specialist-image-column {
    width: 100%;
    margin-bottom: 3rem; /* 48px */
    display: flex; /* Para centralizar os itens internos */
    flex-direction: column; /* Para empilhar imagem, nome e sociais */
    align-items: center; /* Centraliza horizontalmente os itens */
    text-align: center; /* Centraliza o texto */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .specialist-image-column {
        width: 40%; /* Ajuste a largura para a coluna da imagem */
        margin-bottom: 0;
        /* Alinha todos os itens da coluna da imagem ao centro em desktop */
        align-items: center;
        text-align: center;
    }
}

.profile-placeholder {
    position: relative;
    overflow: hidden;
    border-radius: 0.625rem; /* 10px */
    box-shadow: 0 10px 25px -5px rgba(30, 64, 175, 0.25);
    transition: all 0.3s ease;
    background-size: cover;
    background-position: center;
    height: 24rem; /* 384px */
    width: 100%; /* Garante que a imagem ocupe a largura total da coluna */
    max-width: 380px; /* Aumentado para 380px para deixar a foto mais larga */
}

@media (min-width: 768px) { /* md breakpoint */
    .profile-placeholder {
        height: 31.25rem; /* 500px */
    }
}

.profile-placeholder:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-blue-lg);
}

.profile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(30, 64, 175, 0) 70%, rgba(30, 64, 175, 0.8) 100%);
    pointer-events: none;
}

.editable-field {
    position: relative;
    width: 100%; /* Garante que o campo editável ocupe a largura do pai */
    display: flex; /* Para centralizar o conteúdo dentro dele */
    flex-direction: column; /* Para empilhar o nome e o botão de edição */
    align-items: center; /* Centraliza horizontalmente */
}

@media (min-width: 1024px) {
    .editable-field {
        /* Alinha ao centro em desktop para a foto e nome */
        align-items: center;
    }
}

/* Oculta o botão de edição */
.edit-button {
    display: none; /* Remove completamente o botão de edição */
}

.edit-icon {
    height: 1.25rem; /* 20px */
    width: 1.25rem; /* 20px */
    color: #1e40af; /* blue-700 */
}

.specialist-text-column {
    width: 100%;
    text-align: center; /* Centraliza o texto em mobile */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .specialist-text-column {
        width: 60%; /* Ajustado para 60% para dar mais espaço aos cards */
        text-align: left; /* Alinha o texto à esquerda em desktop */
    }
}

.mb-8-custom { /* margin-bottom: 2rem; (32px) */
    margin-bottom: 2rem;
}

.mb-6-custom { /* margin-bottom: 1.5rem; (24px) */
    margin-bottom: 1.5rem;
}

.mt-6-custom { /* margin-top: 1.5rem; (24px) */
    margin-top: 1.5rem;
}

.mt-4-custom { /* margin-top: 1rem; (16px) */
    margin-top: 1rem;
}

/* Novo estilo para o subtítulo do especialista */
.specialist-subtitle {
    font-size: 1.25rem; /* 20px */
    font-weight: 500;
    color: var(--color-tertiary-blue); /* Tom azulado */
    margin-bottom: 1rem; /* 16px */
    text-align: center; /* Centraliza em mobile */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .specialist-subtitle {
        text-align: left; /* Alinha à esquerda em desktop */
    }
}

.specialist-name {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: #1e3a8a; /* blue-800 */
    margin-bottom: 0.5rem; /* 8px */
    text-align: center; /* Centraliza em mobile */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .specialist-name {
        text-align: center; /* Alinha ao centro em desktop */
    }
}

.specialist-bio {
    color: var(--color-text-light);
    font-size: 1.125rem; /* 18px */
    line-height: 1.6;
    text-align: center; /* Centraliza em mobile */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .specialist-bio {
        text-align: left; /* Alinha à esquerda em desktop */
    }
}

.specialties-list-wrapper {
    margin-top: 2rem; /* Adicionado um margin-top para separar da biografia */
    margin-bottom: 2rem; /* 32px */
    width: 100%; /* Garante que ocupe a largura total da coluna de texto */
}

.specialties-title {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    color: #1e3a8a; /* blue-800 */
    margin-bottom: 1rem; /* 16px */
    text-align: center; /* Centraliza em mobile */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .specialties-title {
        text-align: left; /* Alinha à esquerda em desktop */
    }
}

/* Novos estilos para o grid de cards de especialidade */
.specialties-cards-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* 1 coluna em mobile */
    gap: 1.5rem; /* Espaçamento entre os cards */
}

@media (min-width: 768px) { /* md breakpoint */
    .specialties-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colunas em tablet */
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    .specialties-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colunas em desktop */
        /* Ajuste a largura da coluna de texto para 60% e a coluna da imagem para 40% */
        /* Isso vai dar mais espaço para os cards de especialidade */
    }
}

.specialty-card {
    background-color: var(--color-white);
    border-radius: 0.75rem; /* 12px */
    box-shadow: var(--shadow-md);
    padding: 1.5rem; /* Padding interno do card */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha o conteúdo à esquerda dentro do card */
    text-align: left; /* Alinha o texto à esquerda dentro do card */
    transition: all 0.3s ease;
    border: 1px solid var(--color-off-white); /* Borda suave */
}

.specialty-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-blue-lg);
    border-color: var(--color-tertiary-blue); /* Borda azul no hover */
}

.specialty-icon-wrapper {
    width: 3rem; /* Tamanho do wrapper do ícone */
    height: 3rem; /* Tamanho do wrapper do ícone */
    border-radius: 50%;
    background-color: rgba(59, 130, 246, 0.1); /* Fundo azul claro para o ícone */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem; /* Espaçamento abaixo do ícone */
    flex-shrink: 0;
}

.specialty-card-icon {
    color: var(--color-tertiary-blue); /* Cor do ícone */
    font-size: 1.5rem; /* Tamanho do ícone */
}

.specialty-card-title {
    font-size: 1.15rem; /* Tamanho do título do card */
    font-weight: 700;
    color: var(--color-primary-dark-blue);
    margin-bottom: 0.5rem; /* Espaçamento abaixo do título */
}

.specialty-card-description {
    font-size: 0.95rem; /* Tamanho da descrição do card */
    color: var(--color-text-light);
    line-height: 1.6;
}

.social-icons-wrapper {
    display: flex;
    gap: 1rem; /* 16px */
    justify-content: center; /* Centraliza os ícones em mobile */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .social-icons-wrapper {
        justify-content: center; /* Alinha ao centro em desktop */
    }
}

.social-icon {
    transition: all 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-3px);
    filter: brightness(1.2);
}

.text-blue-600-custom { /* Cor para o ícone do LinkedIn */
    color: #2563eb;
}

/* Estilo para o ícone do Instagram com gradiente */
.instagram-link .fa-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Garante que a cor do texto original seja transparente */
}

.text-blue-700-custom { /* Cor para o ícone do Email */
    color: #1d4ed8;
}


/* Estilos para a Seção de Contato */
.contact-section-custom {
    background-color: var(--color-gray-background);
    padding: 5rem 1.5rem; /* 80px 24px */
}

/* Removido o section-description-custom para a seção de contato */
/* .section-description-custom {
    font-size: 1.125rem;
    color: var(--color-text-light);
    max-width: 48rem;
    margin: 0 auto 2rem;
    text-align: center;
} */

.contact-columns-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 48px */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .contact-columns-wrapper {
        flex-direction: row;
        gap: 3rem; /* 48px */
    }
}

.contact-column {
    width: 100%;
}

@media (min-width: 1024px) { /* lg breakpoint */
    /* Ajustado para 50% para que as colunas tenham o mesmo tamanho */
    .contact-column {
        width: 50%; 
    }
}

.contact-form-column {
    width: 100%;
}

@media (min-width: 1024px) { /* lg breakpoint */
    /* Ajustado para 50% para que as colunas tenham o mesmo tamanho */
    .contact-form-column {
        width: 50%;
    }
}

.contact-column-inner {
    background-color: var(--color-white);
    border-radius: 0.75rem; /* 12px */
    box-shadow: var(--shadow-lg);
    padding: 2rem; /* 32px */
    transition: all 0.3s ease;
    position: relative; /* Necessário para a sombra interna */
    overflow: hidden; /* Garante que a sombra não vaze */
}

/* Adiciona a sombra interna à direita da coluna de contato para simular a separação */
.contact-column-inner::after {
    content: '';
    position: absolute;
    top: 0;
    right: -15px; /* Posição da sombra, ajustável */
    height: 100%;
    width: 30px; /* Largura da sombra */
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
    z-index: 1; /* Garante que a sombra esteja acima do conteúdo, mas abaixo da borda */
    display: none; /* Oculta por padrão em mobile */
}

@media (min-width: 1024px) {
    .contact-column-inner::after {
        display: block; /* Exibe a sombra apenas em desktop */
    }
}


.contact-column-inner:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-blue-lg);
}

.bg-white-custom { /* Fundo branco para os cards */
    background-color: var(--color-white);
}

.rounded-xl-custom { /* Cantos arredondados */
    border-radius: 0.75rem; /* 12px */
}

.shadow-lg-custom { /* Sombra suave */
    box-shadow: var(--shadow-lg);
}

.p-8-custom { /* Padding interno */
    padding: 2rem; /* 32px */
}

.contact-info-title, .contact-form-title {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: var(--color-primary-dark-blue);
    margin-bottom: 1.5rem; /* 24px */
}

.contact-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem; /* 20px */
    transition: all 0.3s ease;
}

.contact-info-item:hover {
    transform: translateX(5px);
}

.contact-info-icon {
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--color-tertiary-blue);
    margin-right: 1rem; /* 16px */
    flex-shrink: 0;
}

.contact-info-heading {
    font-weight: 600;
    color: #1e3a8a; /* blue-800 */
}

.contact-info-text {
    color: var(--color-text-light);
}

.contact-buttons-wrapper {
    margin-top: 2rem; /* 32px */
}

.contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem; /* 16px 24px */
    border-radius: 0.5rem; /* 8px */
    font-weight: 600;
    transition: all 0.3s ease;
    width: 100%;
    margin-bottom: 1rem; /* 16px */
    color: var(--color-white); /* Cor do texto padrão para botões de contato */
}

.whatsapp-button {
    background: linear-gradient(135deg, var(--color-whatsapp-start), var(--color-whatsapp-end));
    box-shadow: var(--shadow-whatsapp);
}

.whatsapp-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-whatsapp-hover);
}

.email-button {
    background: linear-gradient(135deg, var(--color-tertiary-blue), var(--color-secondary-dark-blue));
    box-shadow: var(--shadow-email);
}

.email-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-email-hover);
}

.ml-2-custom { /* margin-left: 0.5rem; (8px) */
    margin-left: 0.5rem;
}

.mr-2-custom { /* margin-right: 0.5rem; (8px) */
    margin-right: 0.5rem;
}

.text-xl-custom { /* font-size: 1.25rem; (20px) */
    font-size: 1.25rem;
}

.contact-social-icons-wrapper {
    display: flex;
    gap: 1rem; /* 16px */
    margin-top: 1.5rem; /* 24px */
}

.contact-social-icon {
    width: 2.25rem; /* 36px */
    height: 2.25rem; /* 36px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--color-tertiary-blue);
    transition: all 0.3s ease;
}

.contact-social-icon:hover {
    transform: translateY(-3px);
    background-color: var(--color-tertiary-blue);
    color: var(--color-white);
}

/* Novo estilo para o form-field-group para dar espaçamento consistente */
.form-field-group {
    margin-bottom: 1.25rem; /* 20px */
}

.form-label {
    display: block;
    color: #4b5563; /* gray-700 */
    font-weight: 500;
    margin-bottom: 0.5rem; /* 8px */
}

.contact-form-input, .contact-form-textarea {
    width: 100%;
    padding: 0.75rem 1rem; /* 12px 16px */
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 0.375rem; /* 6px */
    /* Removido o margin-bottom aqui, pois o form-field-group já lida com o espaçamento */
    transition: all 0.3s ease;
}

.contact-form-input:focus, .contact-form-textarea:focus {
    outline: none;
    border-color: var(--color-tertiary-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.contact-form-textarea {
    min-height: 9.375rem; /* 150px */
    resize: vertical;
}

.form-button-margin-top {
    margin-top: 1.5rem; /* 24px */
}

.contact-form-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem; /* 16px 24px */
    border-radius: 0.5rem; /* 8px */
    font-weight: 600;
    transition: all 0.3s ease;
    width: 100%;
    background: linear-gradient(135deg, var(--color-tertiary-blue), var(--color-secondary-dark-blue));
    box-shadow: var(--shadow-email); /* Usando a sombra de email para consistência */
    color: var(--color-white);
    cursor: pointer;
    border: none;
}

.contact-form-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-email-hover);
}


/* Estilos para o Footer */
.footer-custom {
    background-color: var(--color-footer-background); /* Fundo preto */
    color: var(--color-white);
    padding: 3rem 1.5rem; /* Padding superior e inferior, e lateral */
}

.footer-container-custom {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Colunas empilhadas em mobile */
    gap: 2rem; /* Espaçamento entre as colunas */
    align-items: center; /* Centraliza itens em mobile */
    text-align: center; /* Centraliza texto em mobile */
}

@media (min-width: 768px) { /* md breakpoint */
    .footer-container-custom {
        flex-direction: row; /* Colunas lado a lado em desktop */
        justify-content: space-between; /* Espaçamento entre as colunas */
        align-items: flex-start; /* Alinha ao topo */
        text-align: left; /* Alinha texto à esquerda */
    }
}

.footer-col-left {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza em mobile */
    text-align: center; /* Centraliza texto em mobile */
    width: 100%;
}

@media (min-width: 768px) { /* md breakpoint */
    .footer-col-left {
        width: 45%; /* Ajuste a largura para a coluna da esquerda */
        align-items: flex-start; /* Alinha à esquerda em desktop */
        text-align: left; /* Alinha texto à esquerda em desktop */
    }
}

.footer-logo-link {
    display: inline-block; /* Para que o link não ocupe a largura total */
    margin-bottom: 1rem; /* Espaçamento abaixo da logo */
}

.footer-logo-container {
    display: flex;
    align-items: center;
}

.footer-logo-icon {
    width: 3.5rem; /* Tamanho da logo no footer */
    height: 3.5rem;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Deixa a logo branca */
}

.footer-logo-text {
    color: var(--color-white);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.footer-description {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7); /* Texto mais claro */
    margin-bottom: 1.5rem; /* Espaçamento abaixo do texto */
    max-width: 25rem; /* Limita a largura do texto */
}

.footer-social-icons {
    display: flex;
    gap: 0.75rem; /* Espaçamento entre os ícones */
    margin-bottom: 2rem; /* Espaçamento antes do copyright em mobile */
}

.footer-social-icon {
    width: 2.5rem; /* Tamanho dos botões sociais */
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1); /* Fundo sutil */
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1.2rem; /* Tamanho do ícone */
}

.footer-social-icon:hover {
    background-color: var(--color-tertiary-blue); /* Fundo azul no hover */
    transform: translateY(-3px);
}

.footer-col-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza em mobile */
    text-align: center; /* Centraliza texto em mobile */
}

@media (min-width: 768px) { /* md breakpoint */
    .footer-col-right {
        width: 45%; /* Ajuste a largura para a coluna da direita */
        align-items: flex-end; /* Alinha à direita em desktop */
        text-align: right; /* Alinha texto à direita em desktop */
    }
}

.footer-links-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 1rem; /* Espaçamento abaixo do título */
}

.footer-links-list li {
    margin-bottom: 0.5rem; /* Espaçamento entre os links */
}

.footer-links-list li:last-child {
    margin-bottom: 0; /* Remove margem do último item */
}

.footer-link {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--color-light-blue);
}

.footer-copyright {
    text-align: center;
    padding-top: 1.5rem; /* Espaçamento acima do copyright */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linha divisória */
    margin-top: 2rem; /* Espaçamento acima da linha */
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5); /* Texto do copyright mais claro */
    width: 100%; /* Garante que ocupe a largura total */
}

/* Media Queries para responsividade geral (ajustes finos) */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.8rem; /* Ajuste para telas médias */
    }
    .section-title-custom {
        font-size: 2.2rem;
    }
    /* Oculta a sombra entre as colunas em telas menores que 1024px */
    .contact-column-inner::after {
        display: none;
    }
}

@media (max-width: 767px) {
    /* Ajustes para o header em mobile para evitar que logo e texto ocupem muito espaço */
    .header-container {
        padding: 0.75rem 1rem; /* Reduz o padding em telas menores */
    }

    .logo-icon {
        width: 3.5rem; /* Ajustado para 3.5rem (56px) em mobile */
        height: 3.5rem;
        background-color: transparent;
        border-radius: 0;
    }

    .logo-text {
        font-size: 1.5rem; /* Ajustado para 1.5rem (24px) em mobile */
    }
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    .cta-button {
        width: 100%; /* Botão CTA ocupa mais largura em mobile */
        text-align: center;
    }
    .servico-card {
        padding: 1.5rem; /* Ajusta padding em telas menores */
    }
    .section-title-custom {
        font-size: 1.8rem;
    }
    .section-description-custom {
        font-size: 1.0rem; /* Ajuste o tamanho da fonte para mobile */
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    .hero-subtitle {
    }
    .section-title-custom {
        font-size: 1.6rem;
    }
    .contact-info-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .contact-info-icon {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

/* NOVOS ESTILOS PARA O MODAL DE MENSAGEM */
.modal {
    display: none; /* Oculta o modal por padrão */
    position: fixed; /* Fixa o modal na tela */
    z-index: 100; /* Garante que o modal esteja acima de tudo */
    left: 0;
    top: 0;
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    overflow: auto; /* Habilita rolagem se o conteúdo for muito grande */
    background-color: rgba(0, 0, 0, 0.6); /* Fundo escuro semi-transparente */
    display: flex; /* Usa flexbox para centralizar o conteúdo */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    opacity: 0; /* Começa invisível para a transição */
    visibility: hidden; /* Esconde completamente para não receber eventos de clique */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transição suave */
}

.modal.active {
    display: flex; /* Exibe o modal quando a classe 'active' é adicionada */
    opacity: 1; /* Torna o modal visível */
    visibility: visible; /* Torna o modal visível para receber eventos de clique */
}

.modal-content {
    background-color: var(--color-white);
    margin: auto; /* Centraliza o conteúdo do modal */
    padding: 2rem; /* 32px */
    border-radius: 0.75rem; /* 12px */
    box-shadow: var(--shadow-xl);
    max-width: 90%; /* Largura máxima para responsividade */
    width: 500px; /* Largura padrão do modal */
    text-align: center;
    position: relative;
    transform: translateY(-20px); /* Começa um pouco acima para o efeito de entrada */
    transition: transform 0.3s ease; /* Transição suave para o efeito de entrada */
}

.modal.active .modal-content {
    transform: translateY(0); /* Move para a posição final */
}

.close-modal {
    color: var(--color-text-light);
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 1.75rem; /* 28px */
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--color-primary-dark-blue);
    text-decoration: none;
    cursor: pointer;
}

.modal-title {
    font-size: 1.8rem; /* 28.8px */
    font-weight: 700;
    color: var(--color-primary-dark-blue);
    margin-bottom: 1rem; /* 16px */
}

.modal-message {
    font-size: 1.125rem; /* 18px */
    color: var(--color-text-medium);
    margin-bottom: 1.5rem; /* 24px */
    line-height: 1.6;
}

.modal-buttons-wrapper {
    display: flex;
    justify-content: center;
    gap: 1rem; /* 16px */
    margin-top: 1rem; /* 16px */
}

/* Estilos para o botão "OK" do modal de mensagem */
.modal-button-save {
    background: linear-gradient(135deg, var(--color-tertiary-blue), var(--color-secondary-dark-blue));
    color: var(--color-white);
    padding: 0.75rem 1.5rem; /* 12px 24px */
    border-radius: 0.5rem; /* 8px */
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-email);
}

.modal-button-save:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-email-hover);
}

/* Estilos para o botão "Cancelar" (se houver, como nos modais de edição anteriores) */
.modal-button-cancel {
    background-color: #ef4444; /* red-500 */
    color: var(--color-white);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

.modal-button-cancel:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.4);
}