/* 
 * ai2core - Stylesheet Principal
 * Versão: 1.0
 * Autor: Eduardo Marques
 * Descrição: Estilos completos do site incluindo layout, animações,
 * responsividade e componentes interativos
 */

/* ========================================
   RESET E CONFIGURAÇÕES GLOBAIS
======================================== */

/* Reset de margens e paddings + box-sizing universal */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variáveis CSS para cores e estilos reutilizáveis */
:root {
    /* Cores primárias */
    --primary-dark: #0A1F44;
    --primary-light: #1a3a66;
    
    /* Cores de destaque (accent) */
    --accent-blue: #0084FF;
    --accent-hover: #0066CC;
    
    /* Cores de texto */
    --text-white: #FFFFFF;
    --text-gray: #E0E0E0;
    --text-dark: #333333;
    
    /* Backgrounds */
    --bg-light: #F8F9FA;
    
    /* Sombras */
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Estilos base do body */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    overflow-x: hidden; /* Previne scroll horizontal */
}

/* Ativa scroll suave em toda a página */
html {
    scroll-behavior: smooth;
}

/* ========================================
   NAVEGAÇÃO (NAVBAR)
======================================== */

/* Navbar fixa no topo com efeito de blur */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(10, 31, 68, 0.95);
    backdrop-filter: blur(10px); /* Efeito de vidro fosco */
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Container centralizado da navegação */
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ========================================
   LOGO
======================================== */

/* Estilos base do logo */
.logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--text-white);
    text-decoration: none;
    display: flex !important;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease;
}

/* Efeito de escala ao hover */
.logo:hover {
    transform: scale(1.05);
}

/* Ícone do logo com animação de brilho */
.logo-icon {
    width: 40px;
    height: 40px;
    animation: glow 2s infinite alternate;
}

/* Animação de brilho pulsante */
@keyframes glow {
    from { filter: drop-shadow(0 0 3px #00c3ff); }
    to { filter: drop-shadow(0 0 12px #00c3ff); }
}

/* Texto do logo */
.logo-text {
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: baseline;
}

/* "ai2" com gradiente azul */
.ai2 {
    background: linear-gradient(90deg, #00c3ff, #0066ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* "core" em branco leve */
.core {
    font-weight: 300;
    color: white;
}

/* ========================================
   MENU DE NAVEGAÇÃO
======================================== */

/* Menu horizontal desktop */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

/* Links do menu */
.nav-menu a {
    color: var(--text-gray);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 5px;
}

/* Hover nos links com cor e background */
.nav-menu a:hover {
    color: var(--accent-blue);
    background: rgba(0, 132, 255, 0.1);
}

/* ========================================
   MENU MOBILE (HAMBURGUER)
======================================== */

/* Ícone hamburguer (3 linhas) */
.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

/* Linhas do hamburguer */
.mobile-menu span {
    width: 25px;
    height: 3px;
    background: var(--text-white);
    transition: all 0.3s ease;
}

/* ========================================
   SEÇÃO HERO (CABEÇALHO PRINCIPAL)
======================================== */

/* Hero com gradiente e altura mínima de 100vh */
.hero {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%);
    padding: 8rem 2rem 4rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Decoração SVG de fundo */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%230084FF" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,170.7C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-size: cover;
    background-position: bottom;
}

/* Grid 2 colunas: texto + visual */
.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Título principal com animação */
.hero-text h1 {
    font-size: 3rem;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    line-height: 1.2;
    animation: fadeInUp 1s ease;
}

/* Destaque azul no título */
.hero-text h1 span {
    color: var(--accent-blue);
}

/* Parágrafo descritivo */
.hero-text p {
    font-size: 1.3rem;
    color: var(--text-gray);
    margin-bottom: 2rem;
    animation: fadeInUp 1s ease 0.2s both;
}

/* Container dos botões de CTA */
.hero-buttons {
    display: flex;
    gap: 1rem;
    animation: fadeInUp 1s ease 0.4s both;
}

/* ========================================
   BOTÕES
======================================== */

/* Estilo base de botões */
.btn {
    padding: 1rem 2rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

/* Botão primário (azul) */
.btn-primary {
    background: var(--accent-blue);
    color: var(--text-white);
    box-shadow: 0 4px 15px rgba(0, 132, 255, 0.3);
}

/* Hover do botão primário */
.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 132, 255, 0.4);
}

/* Botão secundário (outline) */
.btn-secondary {
    background: transparent;
    color: var(--text-white);
    border: 2px solid var(--text-white);
}

/* Hover do botão secundário */
.btn-secondary:hover {
    background: var(--text-white);
    color: var(--primary-dark);
    transform: translateY(-2px);
}

/* ========================================
   ANIMAÇÃO VISUAL DO HERO
======================================== */

/* Container da animação com efeito flutuante */
.hero-visual {
    position: relative;
    animation: float 3s ease-in-out infinite;
}

/* Canvas da animação de rede */
.network-animation {
    width: 100%;
    height: 400px;
    position: relative;
}

/* Nós da rede (círculos) */
.node {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0084FF 0%, #0066ff 100%) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    font-size: 1.5rem;
    box-shadow: 0 0 20px rgba(0, 132, 255, 0.6), 0 4px 15px rgba(0, 132, 255, 0.4) !important;
    animation: pulse 2s ease-in-out infinite;
    border: 2px solid rgba(0, 195, 255, 0.3) !important;
}

/* Posicionamento de cada nó com delays diferentes */
.node:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; }
.node:nth-child(2) { top: 10%; right: 30%; animation-delay: 0.5s; }
.node:nth-child(3) { bottom: 30%; left: 10%; animation-delay: 1s; }
.node:nth-child(4) { bottom: 20%; right: 20%; animation-delay: 1.5s; }
.node:nth-child(5) { top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 2s; }

/* Linhas de conexão entre nós */
.connection {
    position: absolute;
    background: linear-gradient(90deg, 
        rgba(0, 132, 255, 0), 
        rgba(0, 132, 255, 0.5), 
        rgba(0, 132, 255, 0)
    );
    height: 2px;
    animation: flow 3s linear infinite;
    box-shadow: 0 0 5px rgba(0, 132, 255, 0.3); /* Sombra azul também nas linhas */
}

/* Animação de pulso (respiração) */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(0, 132, 255, 0.6), 0 4px 15px rgba(0, 132, 255, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(0, 132, 255, 0.8), 0 6px 20px rgba(0, 132, 255, 0.5);
    }
}

/* Animação de fluxo nas linhas */
@keyframes flow {
    0% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.3;
    }
}

/* Animação de flutuação */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ========================================
   SEÇÃO DE SERVIÇOS
======================================== */

.services {
    padding: 5rem 2rem;
    background: var(--bg-light);
}

/* Container centralizado reutilizável */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Título de seção */
.section-title {
    text-align: center;
    font-size: 2.5rem;
    color: var(--primary-dark);
    margin-bottom: 1rem;
}

/* Subtítulo de seção */
.section-subtitle {
    text-align: center;
    color: var(--text-dark);
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

/* Grid responsivo de serviços */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

/* Card de serviço individual */
.service-card {
    background: var(--text-white);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

/* Barra superior do card (aparece no hover) */
.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-blue), var(--primary-light));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

/* Mostra barra no hover */
.service-card:hover::before {
    transform: scaleX(1);
}

/* Efeito de elevação no hover */
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

/* Ícone do serviço com animação */
.service-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

/* Delays diferentes para cada card */
.service-card:nth-child(1) .service-icon { animation-delay: 0s; }
.service-card:nth-child(2) .service-icon { animation-delay: 0.5s; }
.service-card:nth-child(3) .service-icon { animation-delay: 1s; }

/* Título do serviço */
.service-card h3 {
    color: var(--primary-dark);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

/* Descrição do serviço */
.service-card p {
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}


/* ========================================
   SEÇÃO DE PACOTES (TI GERENCIADA)
   - Grid com altura consistente
   - Featured sem scale (não quebra alinhamento)
   - Tipografia estável no desktop (sem “quebra estranha”)
======================================== */

/* ---------- Container da seção ---------- */
.packages {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%);
  position: relative;
}

/* Título/Subtítulo em fundo escuro */
.packages .section-title {
  color: #fff;
}

.packages .section-subtitle {
  color: rgba(255, 255, 255, 0.85);
}

/* Fundo claro (use .packages packages-light no HTML) */
.packages.packages-light {
  background: var(--bg-light);
}

.packages.packages-light .section-title,
.packages.packages-light .section-subtitle {
  color: var(--text-dark) !important;
}

/* ---------- Grid ---------- */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 3rem;

  /* força os cards a terem altura consistente */
  align-items: stretch;

  /* evita “espalhar demais” em telas muito largas */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Card ---------- */
.package-card {
  background: var(--text-white);
  border-radius: 10px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border 0.25s ease;

  /* estrutura vertical e altura total do grid */
  display: flex;
  flex-direction: column;
  height: 100%;

  /* limita largura de leitura (evita linhas gigantes no desktop) */
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;

  /* títulos/valores centralizados, lista ficará left */
  text-align: center;
}

.package-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 15px 40px rgba(0, 132, 255, 0.3);
  border: 2px solid var(--accent-blue);
}

/* ---------- Featured (sem scale) ---------- */
.package-card.featured {
  border: 2px solid var(--accent-blue);
  box-shadow: 0 10px 30px rgba(0, 132, 255, 0.3);
}

.package-card.featured:hover {
  transform: translateY(-15px);
  box-shadow: 0 20px 50px rgba(0, 132, 255, 0.5);
}

.package-card.featured::before {
  content: "MAIS POPULAR";
  position: absolute;
  top: 20px;
  right: -30px;
  background: var(--accent-blue);
  color: var(--text-white);
  padding: 5px 40px;
  transform: rotate(45deg);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Badge NEW (se usado) */
.badge-new {
  position: absolute;
  top: 20px;
  right: -5px;
  background: linear-gradient(135deg, #00c3ff, #0066ff);
  color: #fff;
  padding: 5px 15px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0, 132, 255, 0.3);
  z-index: 10;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ---------- Elementos do card ---------- */
.package-name {
  font-size: 1.5rem;
  color: var(--primary-dark);
  margin-bottom: 1rem;
  font-weight: 700;
  transition: color 0.25s ease;
}

.package-card:hover .package-name {
  color: var(--accent-blue);
}

.package-price {
  font-size: 2.5rem;
  color: var(--accent-blue);
  font-weight: 800;
  margin-bottom: 0.5rem;
  line-height: 1.2;
  letter-spacing: -0.5px; /* visual mais “tight” */
}

.package-price span {
  font-size: 1rem;
  color: var(--text-dark);
}

.package-savings {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  color: #2e7d32;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin: 1rem 0 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  transition: background 0.25s ease;
}

.package-card:hover .package-savings {
  background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
}

.package-ideal {
  color: var(--accent-blue);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0.5rem 0 1rem;
  text-align: center;
  transition: color 0.25s ease;
}

.package-card:hover .package-ideal {
  color: var(--primary-dark);
}

/* ---------- Lista de features (FIX REAL do bug visual) ---------- */
/* O problema era usar flex no <li> com conteúdo misto (strong + texto),
   o browser quebra e "distribui" os pedaços parecendo colunas.
   Solução: <li> normal + ✓ absoluto à esquerda. */
.package-features {
  list-style: none;
  margin: 1.5rem auto;
  padding: 0;

  /* faz a lista ocupar o espaço e alinhar os botões na base */
  flex-grow: 1;

  /* leitura confortável */
  max-width: 34ch;

  /* lista sempre à esquerda */
  text-align: left;
}

/* NÃO usar flex aqui */
.package-features li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.9rem; /* espaço para o ✓ */
  color: var(--text-dark);
  line-height: 1.6;
  text-align: left;

  /* tipografia estável */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;

  word-spacing: normal;
  letter-spacing: normal;
}

/* ✓ fixo à esquerda */
.package-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.58rem;
  color: var(--accent-blue);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
}

.package-features li strong {
  color: var(--accent-blue);
  line-height: inherit;
}

/* ---------- Setup ---------- */
.package-setup {
  text-align: center;
  margin: 1rem 0;
  padding: 0.5rem;
  background: rgba(0, 132, 255, 0.1);
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-dark);
  transition: background 0.25s ease;
}

.package-card:hover .package-setup {
  background: rgba(0, 132, 255, 0.2);
}

/* ---------- Botão ---------- */
.package-card .btn {
  margin-top: 1rem;
  width: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.package-card:hover .btn-primary {
  background: var(--accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 132, 255, 0.4);
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1200px) {
  .packages-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* featured sem scale também no responsivo */
  .package-card.featured { transform: none; }
  .package-card.featured:hover { transform: translateY(-15px); }
}

@media (max-width: 768px) {
  .packages-grid {
    grid-template-columns: 1fr;
  }

  .package-card:hover,
  .package-card.featured:hover {
    transform: translateY(-10px);
  }

  .badge-new {
    top: 15px;
    right: 15px;
  }

  .package-card.featured::before {
    padding: 5px 30px;
    font-size: 0.7rem;
  }

  /* No mobile, mais “respiro” entre ✓ e texto */
  .package-features li {
    padding-left: 2.2rem;
    font-size: 0.9rem;
  }

  .package-features li::before {
    font-size: 1.05rem;
    top: 0.6rem;
  }
}

@media (max-width: 480px) {
  .package-price { font-size: 2rem; }
  .package-name { font-size: 1.3rem; }

  .package-savings {
    font-size: 0.85rem;
    padding: 0.5rem;
  }

  .package-features li {
    padding-left: 2.35rem;
    font-size: 0.85rem;
  }
}


/* ===== Ajustes utilitários usados em pacotes.html (para evitar inline style) ===== */

.hero-text--center {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.hero-lead {
  font-size: 1.05rem;
  line-height: 1.7;
}

.hero-buttons--center {
  justify-content: center;
}

.team-badges--spaced {
  margin-top: 1.5rem;
}

.section-subtitle--narrow {
  max-width: 900px;
  margin: 0 auto;
}

.packages-grid--wide {
  max-width: 1050px;
  margin: 3rem auto;
}

/* CTA row dos cards (substitui o inline display:flex...) */
.package-cta-row {
  margin-top: 1.2rem;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.package-cta-row .btn {
  flex: 1;
  text-align: center;
}

/* Card estratégico (40+) */
.package-card--strategic {
  border: 2px dashed rgba(0, 0, 0, 0.25);
}

/* Preço menor (usado em “Avaliação estratégica”) */
.package-price--small {
  font-size: 1.7rem;
}

/* Hint abaixo do grid */
.packages-hint {
  text-align: center;
  margin-top: 1.5rem;
  color: #666;
  font-size: 0.95rem;
}

/* Seção de add-ons (substitui style="background: var(--bg-light)...") */
.services--light {
  background: var(--bg-light);
  padding: 4rem 2rem;
}

.container--wide {
  max-width: 1050px;
}

.packages-grid--addons {
  max-width: 1000px;
  margin: 3rem auto;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Addon cards */
.package-card--addon {
  border: 2px solid transparent;
}

.package-card--addon-cyan {
  border-color: #00c3ff;
}

.package-card--addon-blue {
  border-color: #0066ff;
}

.package-name__tag {
  font-size: 0.8rem;
  opacity: 0.85;
  font-weight: 600;
}

.package-name--cyan { color: #00c3ff; }
.package-name--blue { color: #0066ff; }

.package-price--mid { font-size: 2rem; }

.package-ideal--spaced { margin-bottom: 1.5rem; }

.services-note {
  text-align: center;
  margin-top: 1rem;
  color: #666;
  font-size: 0.9rem;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.btn-lg {
  padding: 1.1rem 2.2rem;
}

.btn-xl {
  padding: 1.2rem 3rem;
  font-size: 1.1rem;
}





/* ========================================
   SERVIÇOS CUSTOMIZADOS
======================================== */

.custom-services {
    padding: 5rem 2rem;
    background: var(--bg-light);
}

/* Grid de itens customizados */
.custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

/* Item customizado com ícone */
.custom-item {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: var(--text-white);
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
}

/* Hover desliza para direita com gradiente */
.custom-item:hover {
    transform: translateX(10px);
    box-shadow: var(--shadow-hover);
    background: linear-gradient(135deg, var(--text-white) 0%, rgba(0, 132, 255, 0.05) 100%);
}

/* Ícone do item customizado */
.custom-icon {
    font-size: 2rem;
    margin-right: 1rem;
    color: var(--accent-blue);
}

/* ========================================
   DIFERENCIAIS
======================================== */

.differentials {
    padding: 5rem 2rem;
    background: var(--text-white);
}

/* Grid de diferenciais */
.differentials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

/* Item individual */
.differential-item {
    text-align: center;
    animation: fadeInUp 1s ease;
}

/* Ícone circular com gradiente */
.differential-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--primary-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
    color: var(--text-white);
    transition: all 0.3s ease;
    box-shadow: none !important;
    filter: none !important; /* Remove se for drop-shadow */
}

/* Hover no ícone - SEM SOMBRA */
.differential-item:hover .differential-icon {
    transform: rotate(360deg) scale(1.1);
    box-shadow: none !important;
    filter: none !important;
}


/* ========================================
   CTA (CALL TO ACTION)
======================================== */

.cta {
    padding: 5rem 2rem;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--primary-light) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Efeito de luz rotativa de fundo */
.cta::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

/* Conteúdo acima do fundo */
.cta-content {
    position: relative;
    z-index: 1;
}

/* Título do CTA */
.cta h2 {
    font-size: 2.5rem;
    color: var(--text-white);
    margin-bottom: 1rem;
}

/* Texto do CTA */
.cta p {
    font-size: 1.2rem;
    color: var(--text-white);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   FORMULÁRIO DE CONTATO
======================================== */

.contact-form {
    background: var(--text-white);
    border-radius: 10px;
    padding: 2rem;
    max-width: 600px;
    margin: 3rem auto 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Grupo de campo do formulário */
.form-group {
    margin-bottom: 1.5rem;
}

/* Label do campo */
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--primary-dark);
    font-weight: 500;
}

/* Inputs, selects e textareas */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* Estado de foco dos campos */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.1);
}

/* Textarea com altura ajustável */
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* ========================================
   RODAPÉ (FOOTER)
======================================== */

footer {
    background: var(--primary-dark);
    color: var(--text-white);
    padding: 3rem 2rem 1rem;
}

/* Grid do conteúdo do footer */
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Título de seção do footer */
.footer-section h3 {
    color: var(--accent-blue);
    margin-bottom: 1rem;
}

/* Links do footer */
.footer-section a {
    color: var(--text-gray);
    text-decoration: none;
    display: block;
    padding: 0.25rem 0;
    transition: color 0.3s ease;
}

/* Hover nos links */
.footer-section a:hover {
    color: var(--accent-blue);
}

/* Parte inferior do footer */
.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-gray);
}

/* Links sociais */
.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* Botões circulares das redes sociais */
.social-links a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
    color: white;
}

/* SVGs dentro dos botões sociais */
.social-links a svg {
    width: 20px;
    height: 20px;
}

/* Hover nos botões sociais */
.social-links a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

/* ========================================
   BOTÃO FLUTUANTE DO WHATSAPP
======================================== */

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    transition: all 0.3s ease;
    text-decoration: none;
    animation: pulse 2s infinite;
}

/* Ícone do WhatsApp */
.whatsapp-float svg {
    width: 32px;
    height: 32px;
    color: white;
}

/* Hover no botão WhatsApp */
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
    animation: none; /* Para a pulsação no hover */
}

/* Tooltip do WhatsApp */
.whatsapp-tooltip {
    position: absolute;
    right: 70px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Mostra tooltip no hover */
.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
}

/* ========================================
   ANIMAÇÕES KEYFRAMES
======================================== */

/* Animação de entrada (de baixo para cima) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animação de flutuação */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Animação de pulso (ondas expandindo) */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 132, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(0, 132, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 132, 255, 0);
    }
}

/* Animação de fluxo horizontal */
@keyframes flow {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Animação de rotação completa */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ========================================
   SOCIAL PROOF (PROVA SOCIAL)
======================================== */

.social-proof {
    padding: 5rem 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

/* Efeito de luz de fundo */
.social-proof::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 132, 255, 0.03) 0%, transparent 70%);
}

/* Grid de estatísticas */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
}

/* Card de estatística individual */
.stat-item {
    text-align: center;
    padding: 2rem;
    background: var(--text-white);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Barra superior colorida */
.stat-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-blue), var(--primary-light));
}

/* Hover nas estatísticas */
.stat-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 132, 255, 0.15);
}

/* Ícone da estatística */
.stat-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: float 3s ease-in-out infinite;
}

/* Número da estatística (grande) */
.stat-number {
    font-size: 3.5rem;
    font-weight: bold;
    color: var(--accent-blue);
    line-height: 1;
    margin-bottom: 0.5rem;
}

/* Texto menor dentro do número */
.stat-number span {
    font-size: 2rem;
    color: var(--primary-dark);
}

/* Label/descrição da estatística */
.stat-label {
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 500;
}


/* ========================================
   FAQ Section - Pergunas Frequentes
======================================== */

.faq {
    padding: 5rem 2rem;
    background: var(--text-white);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--bg-light);
    border-radius: 10px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.faq-question {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: rgba(4, 132, 255, 0.05);
}

.faq-question h3 {
    font-size: 1.1rem;
    color: var(--primary-dark);
    margin: 0;
    font-weight: 600;
    flex: 1;
}

.faq-icon {
    font-size: 1.5rem;
    color: var(--accent-blue);
    font-weight: bold;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-item.faq-active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 2rem;
}

.faq-item.faq-active .faq-answer {
    max-height: 500px;
    padding: 0 2rem 1.5rem;
}

.faq-answer p {
    margin: 0;
    color: var(--primary-dark);
    line-height: 1.7;
    opacity: 0.9;
}

/* Responsividade */
@media (max-width: 768px) {
    .faq {
        padding: 3rem 1.5rem;
    }
    
    .faq-question {
        padding: 1.2rem 1.5rem;
    }
    
    .faq-question h3 {
        font-size: 1rem;
    }
    
    .faq-answer {
        padding: 0 1.5rem;
    }
    
    .faq-item.faq-active .faq-answer {
        padding: 0 1.5rem 1.2rem;
    }
}



/* ========================================
   ECONOMIA DOS PACOTES
======================================== */

/* Badge de economia/desconto */
.package-savings {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #2e7d32;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
}

/* ========================================
   RESPONSIVIDADE - TABLET (768px)
======================================== */

@media (max-width: 768px) {
    /* Menu mobile: escondido por padrão */
    .nav-menu {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background: var(--primary-dark);
        flex-direction: column;
        padding: 2rem;
        gap: 1rem;
    }

    /* Menu mobile quando ativo */
    .nav-menu.active {
        display: flex;
    }

    /* Mostra hamburguer no mobile */
    .mobile-menu {
        display: flex;
    }

    /* Hero em coluna única */
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* Reduz tamanho do título */
    .hero-text h1 {
        font-size: 2rem;
    }

    /* Reduz tamanho do parágrafo */
    .hero-text p {
        font-size: 1.1rem;
    }

    /* Centraliza botões */
    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Esconde visual do hero no mobile */
    .hero-visual {
        display: none;
    }

    /* Pacotes em coluna única */
    .packages-grid {
        grid-template-columns: 1fr;
    }

    /* Remove escala do pacote em destaque */
    .package-card.featured {
        transform: none;
    }

    /* Footer em coluna única */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* Centraliza links sociais */
    .social-links {
        justify-content: center;
    }

    /* Ajusta botão WhatsApp */
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 25px;
    }

    /* Stats em 2 colunas */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Reduz tamanho dos números */
    .stat-number {
        font-size: 2.5rem;
    }
    
    /* Reduz tamanho dos ícones */
    .stat-icon {
        font-size: 2rem;
    }
    
    /* Reduz padding das perguntas */
    .faq-question {
        padding: 1rem 1.5rem;
    }
    
    /* Reduz tamanho do título */
    .faq-question h3 {
        font-size: 1rem;
    }
    
    /* Ajusta padding da resposta */
    .faq-item.active .faq-answer {
        padding: 0 1.5rem 1rem;
    }
}

/* ========================================
   RESPONSIVIDADE - MOBILE PEQUENO (480px)
======================================== */

@media (max-width: 480px) {
    /* Reduz padding do hero */
    .hero {
        padding: 6rem 1rem 3rem;
    }

    /* Título ainda menor */
    .hero-text h1 {
        font-size: 1.75rem;
    }

    /* Botões menores */
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    /* Título de seção menor */
    .section-title {
        font-size: 2rem;
    }

    /* Grids em coluna única */
    .services-grid,
    .custom-grid,
    .differentials-grid {
        grid-template-columns: 1fr;
    }

    /* Stats em coluna única */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* Reduz padding das seções */
    .social-proof {
        padding: 3rem 1rem;
    }
    
    .faq {
        padding: 3rem 1rem;
    }
}

/* ========================================
   RESPONSIVIDADE - WHATSAPP MOBILE
======================================== */

@media (max-width: 768px) {
    /* Esconde tooltip no mobile */
    .whatsapp-tooltip {
        display: none;
    }
    
    /* Ajusta tamanho do botão */
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
    }
    
    /* Ajusta tamanho do ícone */
    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }
}

/* ========================================
   ANIMAÇÃO DE PULSO DO WHATSAPP
======================================== */

/* Pulso específico para o botão WhatsApp */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 4px 30px rgba(37, 211, 102, 0.7);
    }
}




/* Lista de detalhes do serviço */
.service-details {
    list-style: none;
    text-align: left;
    margin: 1.5rem 0;
    padding: 0;
}

.service-details li {
    padding: 0.5rem 0;
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Hero para páginas internas */
.hero-page {
    min-height: 60vh;
    padding: 6rem 2rem 4rem;
}


/* ========================================
   TABELA COMPARATIVA DE PACOTES
======================================== */

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--text-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.comparison-table thead {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%);
    color: var(--text-white);
}

.comparison-table th {
    padding: 1.5rem 1rem;
    font-weight: 600;
    text-align: center;
}

.comparison-table td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}

.comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--primary-dark);
}

.comparison-table tbody tr:hover {
    background: rgba(0, 132, 255, 0.05);
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

/* Coluna em destaque (Business) */
.featured-column {
    background: rgba(0, 132, 255, 0.1) !important;
    font-weight: 600;
}

.comparison-table thead .featured-column {
    background: var(--accent-blue) !important;
}

/* Responsividade da tabela */
@media (max-width: 768px) {
    .comparison-table {
        font-size: 0.85rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .comparison-table {
        font-size: 0.75rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 0.5rem 0.25rem;
    }
}


/* ========================================
   PÃGINA DE CONTATO
======================================== */

/* Wrapper do formulário + sidebar */
.contact-wrapper {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 3rem;
    margin-top: 3rem;
}

/* Sidebar de informações */
.contact-info-sidebar {
    background: var(--text-white);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    height: fit-content;
}

.contact-info-sidebar h2 {
    color: var(--primary-dark);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.contact-info-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.contact-info-item:last-of-type {
    border-bottom: none;
}

.contact-info-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.contact-info-item h4 {
    margin: 0 0 0.5rem 0;
    color: var(--primary-dark);
    font-size: 1.1rem;
}

.contact-info-item p {
    margin: 0;
    color: var(--text-dark);
    line-height: 1.6;
}

.contact-info-item a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.contact-info-item a:hover {
    color: var(--accent-hover);
}

.social-contact {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}

/* Container do formulário */
.contact-form-container {
    background: var(--text-white);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.contact-form-container h2 {
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
}

/* Form row para campos lado a lado */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Seção do mapa */
.map-section {
    padding: 5rem 2rem;
    background: var(--text-white);
}

.map-container {
    margin-top: 3rem;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Hover nos links das outras formas de contato */
.differential-item:hover {
    transform: translateY(-5px);

}

/* ========================================
   RESPONSIVIDADE - CONTATO
======================================== */

@media (max-width: 968px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
    
    .contact-info-sidebar {
        order: 2;
    }
    
    .contact-form-container {
        order: 1;
    }
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .contact-info-sidebar,
    .contact-form-container {
        padding: 1.5rem;
    }
}


/* ========================================
   PÁGINA SOBRE
======================================== */

/* Story Grid */
.story-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: start;
    margin-top: 3rem;
}

.story-title {
    font-size: 2.5rem;
    color: var(--primary-dark);
    margin-bottom: 1.5rem;
}

.story-title span {
    color: var(--accent-blue);
}

.story-content p {
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    line-height: 1.8;
    font-size: 1.05rem;
}

/* Highlight Box (citação) */
.highlight-box {
    background: linear-gradient(135deg, rgba(0, 132, 255, 0.08) 0%, rgba(26, 58, 102, 0.08) 100%);
    border-left: 4px solid var(--accent-blue);
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 0 10px 10px 0;
}

.highlight-box p {
    margin: 0;
    color: var(--primary-dark);
    font-style: italic;
}

/* Experience Cards */
.experience-card {
    background: var(--text-white);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.experience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 132, 255, 0.2);
}

.experience-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--accent-blue), var(--primary-light));
}

.experience-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.experience-number {
    font-size: 3.5rem;
    font-weight: bold;
    color: var(--accent-blue);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.experience-label {
    font-size: 1.2rem;
    color: var(--primary-dark);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.experience-detail {
    color: var(--text-dark);
    opacity: 0.8;
    font-size: 0.95rem;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 3rem auto;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-blue), var(--primary-light));
}

.timeline-item {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 3rem;
    position: relative;
}

.timeline-item:nth-child(even) .timeline-year {
    order: 3;
}

.timeline-item:nth-child(even) .timeline-content {
    order: 1;
    text-align: right;
}

.timeline-year {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-blue);
    background: var(--text-white);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 132, 255, 0.3);
    position: relative;
    z-index: 2;
}

.timeline-content {
    background: var(--text-white);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.timeline-content h3 {
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
}

.timeline-content p {
    margin: 0;
    color: var(--text-dark);
}


/* ========================================
   SEÇÃO DE EQUIPE
======================================== */

.team-section {
    max-width: 800px;
    margin: 3rem auto;
}

.team-member-featured {
    text-align: center;
    background: var(--text-white);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.team-photo {
    width: 150px;
    height: 150px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* Remove a linha border: 4px solid var(--accent-blue); */
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a foto preencha o círculo */
    object-position: center; /* Centraliza a foto */
}

/* Placeholder (caso não tenha foto ainda) */
.team-photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--accent-blue), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: bold;
    color: var(--text-white);
}

.team-member-featured h3 {
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
}

.team-role {
    color: var(--accent-blue);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.team-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.badge {
    background: rgba(0, 132, 255, 0.1);
    color: var(--accent-blue);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ========================================
   RESPONSIVIDADE - SOBRE
======================================== */

@media (max-width: 968px) {
    .story-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .timeline::before {
        left: 30px;
    }

    .timeline-item {
        grid-template-columns: auto 1fr;
        gap: 1.5rem;
    }

    .timeline-item:nth-child(even) .timeline-year {
        order: 1;
    }

    .timeline-item:nth-child(even) .timeline-content {
        order: 2;
        text-align: left;
    }

    .timeline-year {
        width: 80px;
        height: 80px;
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .story-title {
        font-size: 2rem;
    }

    .experience-number {
        font-size: 2.5rem;
    }

    .timeline-year {
        width: 60px;
        height: 60px;
        font-size: 1rem;
    }
}




/* ========================================
   PÁGINA DE GLOSSÁRIO
======================================== */

/* Navegação alfabética */
.alphabet-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--text-white);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.alphabet-nav a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.alphabet-nav a:hover {
    background: var(--accent-blue);
    color: var(--text-white);
    transform: translateY(-2px);
}

/* Seção de letra */
.glossary-section {
    margin-bottom: 4rem;
    scroll-margin-top: 100px; /* Compensa navbar fixa */
}

.glossary-letter {
    font-size: 3rem;
    color: var(--accent-blue);
    font-weight: bold;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--accent-blue);
}

/* Item do glossário */
.glossary-item {
    background: var(--bg-light);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.glossary-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 132, 255, 0.15);
}

.glossary-item h3 {
    color: var(--primary-dark);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.glossary-full {
    color: var(--accent-blue);
    font-weight: 600;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.glossary-description {
    color: var(--text-dark);
    line-height: 1.8;
    margin: 0;
}

/* Responsivo */
@media (max-width: 768px) {
    .alphabet-nav a {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .glossary-letter {
        font-size: 2rem;
    }
    
    .glossary-item h3 {
        font-size: 1.2rem;
    }
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.cta-buttons .btn {
    padding: 1.2rem 3rem;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cta-buttons .btn {
        width: 100%;
        padding: 1rem 2rem;
        font-size: 1rem;
    }
}


/* Responsividade para a seção de pacotes */
@media (max-width: 768px) {
    /* Grid de pacotes vira 1 coluna no mobile */
    .packages-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    /* Ajusta cards dos pacotes */
    .package-card {
        padding: 1.5rem;
    }
    
    .package-name {
        font-size: 1.5rem;
    }
    
    .package-price {
        font-size: 2rem;
    }
    
    .package-price span {
        font-size: 1rem;
    }
    
    .package-features {
        font-size: 0.95rem;
    }
    
    .package-features li {
        padding: 0.4rem 0;
    }
    
    /* Botão "Ver todos os pacotes" */
    .packages .btn-secondary {
        width: 90%;
        padding: 1rem 2rem !important;
        font-size: 1rem;
    }
}


/* A ai2core Existe Para Resolver Isso // Para telas muito pequenas (menos de 480px) */
@media (max-width: 480px) {
    .package-card {
        padding: 1rem;
    }
    
    .package-price {
        font-size: 1.8rem;
    }
    
    .package-features {
        font-size: 0.9rem;
    }
}

.price-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.price-box {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.vs-separator {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-white);
}

@media (max-width: 768px) {
    .price-comparison {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }
}


/* ===== Utilitários: servicos.html (remover inline e padronizar) ===== */

.hero-text--center { text-align: center; margin: 0 auto; }
.hero-text--w900 { max-width: 900px; }

.hero-buttons--center { justify-content: center; }
.btn-lg { padding: 1.1rem 2.2rem; }
.btn-xl { padding: 1.2rem 3rem; font-size: 1.1rem; }

.section-subtitle--narrow { max-width: 900px; margin: 0 auto; }

.services--light { background: var(--bg-light); padding: 4rem 2rem; }
.container--wide { max-width: 1050px; }

.center-cta { text-align: center; margin-top: 2.5rem; }

.hint-center {
  text-align: center;
  margin-top: 1.5rem;
  color: #666;
  font-size: 0.95rem;
}

.custom-grid--tight { gap: 1.25rem; }

.mini-cta-row {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.split-cta {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.split-cta__box {
  background: var(--text-white);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  border-left: 4px solid rgba(0, 102, 255, 0.35);
}

.split-cta__box h3 {
  margin-bottom: 0.5rem;
}

@media (max-width: 900px) {
  .split-cta { grid-template-columns: 1fr; }
}

/* ========================================
   FIX: Botões claros em fundo claro
   - garante contraste mínimo em bg-light/white
======================================== */

/* Base: todo botão precisa ter borda visível */
.btn {
  border: 2px solid transparent;
}

/* Secondary: contorno + texto visível */
.btn.btn-secondary {
  background: transparent;
  border-color: rgba(0, 102, 255, 0.35);
  color: var(--primary-dark);
}

/* Secondary hover: fica “clicável” */
.btn.btn-secondary:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  background: rgba(0, 102, 255, 0.06);
}

/* Quando o botão está dentro de seção clara */
.packages-light .btn.btn-secondary,
.services--light .btn.btn-secondary {
  border-color: rgba(0, 0, 0, 0.18);
  color: var(--text-dark);
}

.packages-light .btn.btn-secondary:hover,
.services--light .btn.btn-secondary:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  background: rgba(0, 102, 255, 0.06);
}

/* ========================================
   PADRÃO ÚNICO DE BOTÕES (GLOBAL)
   Objetivo:
   - Primary sempre legível
   - Secondary sempre visível (inclusive em fundo branco)
   - WhatsApp com contraste bom em fundo azul/escuro e claro
======================================== */

.btn{
  border: 2px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 700;
}

/* ---------- PRIMARY (CTA principal) ---------- */
.btn.btn-primary{
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}

.btn.btn-primary:hover{
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* ---------- SECONDARY (CTA secundário, outlined neutro) ---------- */
.btn.btn-secondary{
  background: transparent;
  color: var(--text-dark);
  border-color: rgba(0,0,0,.18);
}

.btn.btn-secondary:hover{
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  background: rgba(0,102,255,.06);
}

/* Quando estiver em seções escuras (hero/cta azul), o secondary precisa inverter */
.hero .btn.btn-secondary,
.cta .btn.btn-secondary{
  color: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
}

.hero .btn.btn-secondary:hover,
.cta .btn.btn-secondary:hover{
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.12);
}

/* ---------- WHATSAPP (variante específica) ---------- */
/* Use junto com btn-secondary: class="btn btn-secondary btn-whatsapp" */
.btn.btn-whatsapp{
  border-color: rgba(37,211,102,.55);
  color: rgba(37,211,102,1);
  background: rgba(37,211,102,.08);
}

.btn.btn-whatsapp:hover{
  border-color: rgba(37,211,102,.9);
  background: rgba(37,211,102,.14);
}

/* No hero/CTA escuro, whatsapp precisa ficar bem legível */
.hero .btn.btn-whatsapp,
.cta .btn.btn-whatsapp{
  color: #fff;
  border-color: rgba(37,211,102,.85);
  background: rgba(37,211,102,.20);
}

.hero .btn.btn-whatsapp:hover,
.cta .btn.btn-whatsapp:hover{
  border-color: rgba(37,211,102,1);
  background: rgba(37,211,102,.28);
}

/* ---------- CONSISTÊNCIA: botões lado a lado não ficam “tortos” ---------- */
.hero-buttons .btn,
.cta-buttons .btn,
.mini-cta-row .btn{
  min-height: 48px;
}


/* ===== Padronização: botões das caixas "Como contratar" ===== */
.mini-cta-row{
  display: flex;
  flex-direction: column;   /* empilha */
  gap: .75rem;
  align-items: stretch;
}

.mini-cta-row .btn{
  width: 100%;              /* full width */
}

/* ========================================
   SERVIÇOS: cards "Como contratar"
   - conteúdo em coluna
   - CTA sempre colada no fundo
======================================== */

.custom-item {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}

/* Coluna de conteúdo do card */
.custom-item > div:last-child {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%;
}

/* Empurra o bloco de CTA para o fundo */
.custom-item .mini-cta-row {
  margin-top: auto;
  padding-top: 1rem;
}

/* Botões do card: full width e altura consistente */
.custom-item .mini-cta-row .btn {
  width: 100%;
  min-height: 48px;
  padding: 0.95rem 1.1rem;
  font-weight: 700;
  border-radius: 10px;
  white-space: nowrap; /* evita quebrar "Começar pelo diagnóstico" */
}

/* Se estourar em telas menores, deixa quebrar só no mobile */
@media (max-width: 420px) {
  .custom-item .mini-cta-row .btn {
    white-space: normal;
  }
}

/* ========================================
   FIX DEFINITIVO: "Como contratar"
   - cards com mesma altura
   - CTA colada no rodapé do card
======================================== */

/* O grid deve esticar os itens */
.custom-grid {
  align-items: stretch;
}

/* O card vira coluna e ocupa 100% da célula do grid */
.custom-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Cabeçalho do card (ícone + título + texto) */
.custom-item .custom-head {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}

/* Conteúdo (texto) + CTA em coluna */
.custom-item .custom-body {
  display: flex;
  flex-direction: column;
  flex: 1;          /* ocupa o restante do card */
  min-height: 0;
}

/* CTA sempre no fim */
.custom-item .mini-cta-row {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* Botões full width e consistentes */
.custom-item .mini-cta-row .btn {
  width: 100%;
  min-height: 48px;
  padding: 0.95rem 1.1rem;
  font-weight: 700;
  border-radius: 10px;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .custom-item .mini-cta-row .btn {
    white-space: normal;
  }
}




/* ========================================
   CONTATO / TRIAGEM — PADRONIZAÇÃO DOS CARDS
   Objetivo:
   - Mesma altura visual
   - Botões alinhados no final do card
   - Ordem fixa: primário em cima, secundário embaixo
   - Sem “pular” conforme o texto
======================================== */

/* Grid: garante alinhamento consistente */
.custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;

  /* força mesma altura por linha */
  align-items: stretch;

  /* evita ficar largo demais em telas grandes */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Variante mais “justa” (se você estiver usando) */
.custom-grid--tight {
  gap: 1.5rem;
}

/* Card */
.custom-item {
  background: #fff;
  border-radius: 14px;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);

  /* o pulo acabava aqui: agora é layout de card real */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Header do card: ícone + texto */
.custom-item > div:first-child {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* Ícone */
.custom-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

/* Conteúdo textual dentro do card (h3 + p): ocupa espaço e empurra CTA pra baixo */
.custom-item > div:first-child > div {
  flex: 1 1 auto;
}

/* Título e texto */
.custom-item h3 {
  margin: 0 0 0.6rem 0;
  line-height: 1.2;
}

.custom-item p {
  margin: 0;
  line-height: 1.75;
  color: #333;
}

/* CTA no rodapé do card */
.mini-cta-row {
  margin-top: auto; /* chave: cola no rodapé */
  padding-top: 1.5rem;

  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Botões em largura total e alinhamento */
.mini-cta-row .btn {
  width: 100%;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 1.1rem;
  border-radius: 12px;
}

/* Ordem fixa */
.mini-cta-row .btn-primary { order: 1; }
.mini-cta-row .btn-secondary { order: 2; }

/* Responsivo */
@media (max-width: 768px) {
  .custom-grid {
    grid-template-columns: 1fr;
  }
  .custom-item {
    padding: 1.6rem;
  }
}



/* ========================================
   CONTATO — cards com CTA no rodapé (fix definitivo)
======================================== */

.custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
  align-items: stretch;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.custom-grid--tight { gap: 1.5rem; }

.custom-item {
  background: #fff;
  border-radius: 14px;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);

  display: flex;
  flex-direction: column;
  height: 100%;
}

/* faz o texto ocupar o “miolo” e empurrar o CTA pro fundo */
.custom-body { flex: 1 1 auto; }

.custom-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.custom-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

.custom-item h3 { margin: 0 0 0.6rem 0; line-height: 1.2; }
.custom-item p  { margin: 0; line-height: 1.75; color: #333; }

.mini-cta-row {
  margin-top: auto;     /* cola no rodapé */
  padding-top: 1.5rem;
  display: grid;
  gap: 0.85rem;
}

/* padroniza botão */
.mini-cta-row .btn {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem 1.1rem;
  border-radius: 12px;
}

/* responsivo */
@media (max-width: 768px) {
  .custom-grid { grid-template-columns: 1fr; }
  .custom-item { padding: 1.6rem; }
}

/* ===== PATCH: CTA não pode sobrepor conteúdo ===== */

/* garante stacking e fluxo previsível dentro do card */
.custom-item{
  position: relative;
  overflow: hidden; /* impede qualquer coisa “vazar” por cima */
}

/* header + conteúdo sempre no fluxo */
.custom-body,
.custom-head{
  position: relative;
  z-index: 1;
}

/* CTA sempre depois do conteúdo, no rodapé */
.mini-cta-row{
  position: relative !important;
  z-index: 2;
  margin-top: auto !important;
}

/* remove qualquer “pulo”/transform herdado de botões */
.mini-cta-row .btn{
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}


/* ========================================
   FIX CONTATO: botões padronizados e no rodapé do card
   Motivo: alguma regra anterior está sobrescrevendo o layout
======================================== */

/* 1) Card precisa ser coluna flex, SEM DISCUSSÃO */
.custom-item{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* 2) O miolo do card precisa crescer e empurrar o CTA pra baixo */
.custom-item .custom-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* 3) O bloco de botões precisa ficar no final */
.custom-item .mini-cta-row{
  margin-top: auto !important;
  width: 100% !important;

  display: grid !important;
  gap: 0.85rem !important;

  /* garante que o CTA não “flutua” por regra herdada */
  position: static !important;
  transform: none !important;
}

/* 4) Botões sempre ocupam a largura toda (mata o width ~260px) */
.custom-item .mini-cta-row .btn{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;

  transform: none !important;
  margin: 0 !important;
}




/* ========================================
   FIX DEFINITIVO — CONTATO: CTA no rodapé + botões 100%
   (override final para CSS grande)
======================================== */

.custom-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 2rem !important;
  align-items: stretch !important;
}

.custom-grid--tight{
  gap: 1.5rem !important;
}

/* card precisa ser coluna flex e ter altura total do grid */
.custom-item{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;

  /* garante que nada “empilhe” por cima */
  position: relative !important;
}

/* miolo ocupa o espaço e empurra o CTA pro fim */
.custom-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* CTA colado no final */
.mini-cta-row{
  margin-top: auto !important;
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;

  /* elimina qualquer regra global que tente mover */
  position: static !important;
  transform: none !important;
}

/* BOTÕES padronizados (mata width fixo tipo 260px) */
.mini-cta-row .btn,
.mini-cta-row a.btn{
  width: 100% !important;
  max-width: none !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 1rem 1.1rem !important;
  border-radius: 12px !important;

  margin: 0 !important;
  transform: none !important;
}

/* garante que o texto do botão não quebre esquisito */
.mini-cta-row .btn{
  white-space: nowrap !important;
}


/* ========================================
   FIX: botões gigantes no CTA (algum CSS global aplica flex:1)
======================================== */

.mini-cta-row{
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
}

/* trava tamanho normal do botão (não deixa crescer verticalmente) */
.mini-cta-row .btn,
.mini-cta-row a.btn{
  flex: 0 0 auto !important;      /* <<< ESSA é a chave */
  height: auto !important;
  min-height: 52px !important;    /* padrão bonito e consistente */
  padding: 1rem 1.1rem !important;

  width: 100% !important;
  max-width: none !important;

  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;

  margin: 0 !important;
  transform: none !important;
}


/* ========================================
   CONTATO — FIX FINAL: botões nunca esticam
======================================== */

.services--light .custom-item .mini-cta-row{
  display: flex !important;
  flex-direction: column !important;
  gap: .85rem !important;
  align-items: stretch !important;
}

/* trava altura do botão (mata qualquer height herdado/forçado) */
.services--light .custom-item .mini-cta-row .btn{
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;

  width: 100% !important;
  max-width: 100% !important;

  padding: 0 18px !important;     /* tira o padding vertical pra não somar */
  line-height: 54px !important;   /* centraliza texto sem depender de flex */
  display: block !important;      /* evita stretch vertical de flex interno */
  text-align: center !important;

  align-self: stretch !important;

  margin: 0 !important;
  transform: none !important;
}

/* se algum estilo global estiver aplicando display:flex nos btn */
.services--light .custom-item .mini-cta-row .btn *{
  pointer-events: none;
}


/* ========================================
   CONTATO — cards com CTA fixo no fundo
======================================== */

.services--light .custom-item{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* corpo cresce e empurra o CTA pra baixo */
.services--light .custom-item .custom-body{
  flex: 1 1 auto;
}

/* CTA sempre no fundo */
.services--light .custom-item .mini-cta-row{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* botão com tamanho correto */
.services--light .custom-item .mini-cta-row .btn{
  height: 52px;
  line-height: 52px;
  padding: 0 18px;
  width: 100%;
  text-align: center;
}


/* ========================================
   CONTATO — RESET DEFINITIVO (mata absolute/top/overlays antigos)
======================================== */

.services--light .custom-item{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;

  /* se você colocou algum "padding-bottom" em patches anteriores, mata aqui */
  padding-bottom: 0 !important;

  position: relative !important;
}

/* conteúdo cresce e ocupa o meio */
.services--light .custom-item .custom-body{
  order: 1 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* CTA SEMPRE no final, SEM absolute, SEM overlay */
.services--light .custom-item .mini-cta-row{
  order: 2 !important;
  margin-top: auto !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;

  /* zera qualquer regra antiga de posicionamento */
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  z-index: auto !important;
  transform: none !important;
}

/* botão padrão e sem “esticar” */
.services--light .custom-item .mini-cta-row .btn{
  width: 100% !important;
  max-width: 100% !important;

  height: 52px !important;
  min-height: 52px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  flex: 0 0 auto !important;
  transform: none !important;
  white-space: nowrap !important;
}

/* ========================================
   CONTATO — FIX: CTA visível (sem ser coberto pelo conteúdo/overlay)
======================================== */

.services--light .custom-item{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important; /* evita pseudo-elemento “vazar” */
  padding: 2rem !important;    /* garante espaço interno consistente */
}

/* garante que o conteúdo não empurre por cima do CTA */
.services--light .custom-item .custom-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* CTA sempre em cima de qualquer fundo/pseudo-elemento */
.services--light .custom-item .mini-cta-row{
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;

  position: relative !important;
  z-index: 5 !important;
}

/* se existir algum ::before/::after decorativo no card, joga pra trás */
.services--light .custom-item::before,
.services--light .custom-item::after{
  z-index: 0 !important;
}

/* botões consistentes */
.services--light .custom-item .mini-cta-row .btn{
  width: 100% !important;
  max-width: 100% !important;

  height: 52px !important;
  min-height: 52px !important;

  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;

  margin: 0 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;

  position: relative !important;
  z-index: 6 !important;
}

/* ========================================
   CONTATO — layout FINAL correto dos cards
======================================== */

.services--light .custom-item{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
}

/* Conteúdo pode crescer normalmente */
.services--light .custom-item .custom-body{
  flex: 1 1 auto;
  overflow: visible; /* 🔥 IMPORTANTE */
}

/* CTA sempre no final */
.services--light .custom-item .mini-cta-row{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Botões padronizados */
.services--light .custom-item .mini-cta-row .btn{
  width: 100%;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  white-space: nowrap;
}

/* ========================================
   CONTATO — FIX DEFINITIVO (texto volta + botões no final)
   Causa provável: .custom-body ou filhos com position/height quebrando o fluxo
======================================== */

.services--light .custom-grid .custom-item{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 2rem !important;
}

/* O conteúdo PRECISA estar no fluxo e crescer */
.services--light .custom-grid .custom-item .custom-body{
  position: static !important;     /* mata qualquer absolute antigo */
  display: block !important;
  flex: 1 1 auto !important;       /* ocupa o espaço e empurra CTA */
  min-height: 1px !important;      /* evita colapsar */
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Se existir wrapper interno (custom-head), também no fluxo */
.services--light .custom-grid .custom-item .custom-head{
  position: static !important;
  display: flex !important;
  gap: 1rem !important;
  align-items: flex-start !important;
}

/* CTA fica SEMPRE no fim */
.services--light .custom-grid .custom-item .mini-cta-row{
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  padding-top: 1.25rem !important;
}

/* Botões padronizados */
.services--light .custom-grid .custom-item .mini-cta-row .btn{
  width: 100% !important;
  height: 52px !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* ========================================
   CONTATO — ROTAS (corrige sobreposição e
   empurra botões pro final do card)
======================================== */

.custom-item--stack{
  /* quebra o layout antigo (flex em linha) só aqui */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.custom-item--stack .custom-body{
  /* faz o conteúdo ocupar o espaço */
  flex: 1;
  width: 100%;
}

.custom-item--stack .custom-head{
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.custom-item--stack .mini-cta-row{
  /* empurra pro final do card */
  margin-top: auto;

  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .8rem;

  /* respiro */
  padding-top: 1rem;
}

.custom-item--stack .mini-cta-row .btn{
  width: 100%;
}

/* opcional: hover mais elegante (evita “andar pro lado”) */
.custom-item--stack:hover{
  transform: translateY(-8px);
}


/* =========================================================
   CONTATO — ROTAS
   Objetivo:
   1) Card em coluna (texto em cima, botões no final)
   2) Impedir botões de "crescer" e cobrir texto
   3) Isolar regras SÓ nessa seção (sem quebrar o site)
========================================================= */

.contact-routes .contact-route-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.contact-routes .contact-route-body{
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
}

.contact-routes .contact-route-cta{
  margin-top: auto !important;
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  gap: .8rem !important;

  padding-top: 1rem !important;

  /* mata qualquer position antigo que esteja zoando */
  position: static !important;
}

/* O ponto crítico: se algum CSS antigo aplicou flex:1 nos botões,
   eles "engolem" o card. Aqui a gente PROÍBE isso nessa seção. */
.contact-routes .contact-route-cta .btn{
  width: 100% !important;

  flex: 0 0 auto !important;     /* NÃO cresce */
  height: auto !important;       /* sem altura gigante */
  min-height: 52px !important;   /* padrão bonito */
  padding: 1rem 1.1rem !important;

  position: static !important;   /* evita sobreposição */
  z-index: 1 !important;
}

/* =========================================================
   CONTATO — ROTAS (FIX DEFINITIVO)
   - força card em coluna
   - corpo em cima, botões no final
   - mata qualquer position/transform antigo na mini-cta-row
========================================================= */

.contact-routes .custom-item{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-height: 100% !important;
}

/* garante que o conteúdo (ícone+título+texto) ocupe o espaço */
.contact-routes .custom-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* header do card (ícone + texto) */
.contact-routes .custom-head{
  display: flex !important;
  gap: 1rem !important;
  align-items: flex-start !important;
}

/* 🔥 aqui está o pulo do gato:
   reseta a mini-cta-row pra NÃO flutuar/absoluta/transformada */
.contact-routes .mini-cta-row{
  margin-top: auto !important;

  display: flex !important;
  flex-direction: column !important;
  gap: .85rem !important;

  width: 100% !important;

  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  clear: both !important;

  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;

  padding-top: 1.2rem !important;

  z-index: 2 !important;
}

/* botão nessa área: não cresce e fica 100% */
.contact-routes .mini-cta-row .btn{
  width: 100% !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 52px !important;
  padding: 1rem 1.1rem !important;

  position: relative !important;
  z-index: 3 !important;
}

/* opcional: deixa o texto com espaçamento consistente */
.contact-routes .custom-item p{
  margin: .35rem 0 0 !important;
}



/* =========================================================
   CONTATO — ROTAS (FIX DEFINITIVO)
   - corpo em cima, CTA no final
   - mata position/inset/transform “fantasma”
   - remove overflow hidden que está clipando/bugando
========================================================= */

.contact-routes .custom-item{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  /* 🔥 isso estava te atrapalhando */
  overflow: visible !important;

  /* altura do card com CTA no final */
  min-height: 100% !important;
}

/* garante que o bloco do texto existe e ocupa espaço */
.contact-routes .custom-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  order: 1 !important;

  position: static !important;
  inset: auto !important;
  transform: none !important;
}

/* CTA SEMPRE no final e SEMPRE no fluxo normal */
.contact-routes .mini-cta-row{
  order: 2 !important;
  margin-top: auto !important;

  display: flex !important;
  flex-direction: column !important;
  gap: .85rem !important;

  width: 100% !important;

  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  transform: none !important;

  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;

  padding-top: 1.2rem !important;
}

/* Botões padrão e sem “crescer” */
.contact-routes .mini-cta-row .btn{
  width: 100% !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 52px !important;
  padding: 1rem 1.1rem !important;

  position: relative !important;
  z-index: 1 !important;
}


/* =========================================================
   CONTATO — ROTAS (fix definitivo e isolado)
   - CTA no final do card
   - remove qualquer “position absolute/transform” herdado
   - padroniza tamanho/altura dos botões
========================================================= */

#contact-routes .custom-grid.custom-grid--tight{
  align-items: stretch;
}

#contact-routes .custom-item{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  /* mata bug de “botão atrás/por cima” */
  overflow: visible !important;
  position: relative !important;

  /* garante que todos os cards alinhem */
  height: 100% !important;
}

#contact-routes .custom-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;

  position: static !important;
  inset: auto !important;
  transform: none !important;
}

#contact-routes .mini-cta-row{
  margin-top: auto !important;

  display: grid !important;
  gap: .85rem !important;

  /* garante que fica DENTRO do card e no final */
  padding-top: 1.25rem !important;

  position: static !important;
  inset: auto !important;
  transform: none !important;

  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* botões consistentes */
#contact-routes .mini-cta-row .btn{
  width: 100% !important;
  height: auto !important;
  min-height: 54px !important;
  padding: 1rem 1.1rem !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  white-space: normal !important;
  text-align: center !important;

  margin: 0 !important;
  transform: none !important;
}

/* só pra garantir que o “secondary” não fica apagado */
#contact-routes .mini-cta-row .btn.btn-secondary{
  background: #fff !important;
  color: var(--primary-dark) !important;
  border: 2px solid rgba(10,31,68,.22) !important;
}

/* =========================================================
   CONTATO — ROTAS (fix definitivo)
   Causa raiz: .btn tem "order" aplicado e bagunça a ordem no flex
========================================================= */

#contact-routes .custom-grid.custom-grid--tight > .custom-item{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  position: relative !important;
  overflow: hidden !important;   /* evita “vazar” por cima */
  height: 100% !important;
}

/* TEXTO sempre primeiro */
#contact-routes .custom-item > .custom-body{
  order: 1 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;

  position: static !important;
  transform: none !important;
  z-index: 1 !important;
}

/* CTA sempre por último e no FINAL do card */
#contact-routes .custom-item > .mini-cta-row{
  order: 2 !important;
  margin-top: auto !important;

  display: grid !important;
  gap: .85rem !important;

  padding-top: 1.25rem !important;

  /* mata qualquer regra antiga que esteja “flutuando” */
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;

  z-index: 2 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Botões 100% padronizados (e remove "order" deles) */
#contact-routes .mini-cta-row .btn{
  order: 0 !important;           /* <- ESSENCIAL (anula seu order global) */
  width: 100% !important;

  min-height: 54px !important;
  padding: 1rem 1.1rem !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  white-space: normal !important;

  margin: 0 !important;
}

/* Secondary visível no fundo branco */
#contact-routes .mini-cta-row .btn.btn-secondary{
  background: #fff !important;
  color: var(--primary-dark) !important;
  border: 2px solid rgba(10,31,68,.22) !important;
}


/* =========================================
   FIX FINAL — ROTAS DE CONTATO (contato.html)
   - trava layout do card
   - mini-cta sempre no final
   - remove overlays/position quebrados
========================================= */

#contact-routes .custom-item{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

#contact-routes .custom-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Cabeçalho do card */
#contact-routes .custom-head{
  display: flex !important;
  gap: 1rem !important;
  align-items: flex-start !important;
}

/* MINI CTA: precisa estar no fluxo, sem position/inset/transform */
#contact-routes .mini-cta-row{
  margin-top: auto !important;        /* empurra pro final do card */
  padding-top: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .85rem !important;

  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Botões dentro do mini-cta: largura total e altura “normal” */
#contact-routes .mini-cta-row .btn{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 52px !important;
  padding: 1rem 1.2rem !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  white-space: normal !important;
  line-height: 1.2 !important;
}

/* Evita qualquer regra antiga que esteja esticando "último div" */
#contact-routes .custom-item > div:last-child{
  flex: 0 0 auto !important;
  min-height: auto !important;
}