/* =========================
   styles.css — Unificado
   ========================= */

/* Reset básico e variáveis */
:root{
  --bg: #f7f7f8;
  --surface: #ffffff;
  --primary: #303092;    /* azul principal - ajuste conforme referência */
  --primary-600: #191957;
  --muted: #71717a;
  --radius: 12px;
  --container: 1100px;
  --gap: 1.25rem;
  --shadow: 0 6px 22px rgba(11,99,214,0.08);
  --radius-sm: 8px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: light;

  /* WhatsApp floating button */
  --whatsapp-size: 64px;        /* tamanho do botão desktop */
  --whatsapp-size-mobile: 52px; /* tamanho em mobile */
  --whatsapp-bg: #25D366;       /* cor padrão do WhatsApp — altere se desejar */
  --whatsapp-offset: 20px;      /* distância da borda direita/baixo */
  --whatsapp-z: 1100;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

/* Container */
.container{
  max-width: var(--container);
  width: calc(100% - 2rem);
  margin: 0 auto;
  padding: 1.25rem 1rem; /* reduzido para menos "ar" nas laterais */
  box-sizing: border-box;
}

/* Header */
.site-header{
  background:linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255,255,255,0.85));
  position:sticky;
  top:0;
  z-index:80;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(15,23,42,0.04);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:var(--gap);
}

/* Logo */
.logo img{
  max-width:100%;
  width:200px;       /* ajuste conforme a proporção da logo */
  height: 80px;
  object-fit: cover;
  display:block;
}

/* Nav */
.main-nav{margin-left:1rem}
.main-nav ul{
  list-style:none;
  display:flex;
  gap:1rem;
  margin:0;
  padding:0;
  align-items:center;
}
.main-nav a{
  text-decoration:none;
  color:var(--muted);
  padding:0.5rem 0.6rem;
  border-radius:8px;
  font-weight:600;
}
.main-nav a:hover{
  padding:0.6rem 1rem;
  background:var(--primary);
  color:#fff;
  box-shadow: var(--shadow);
}

.header-cta{margin-left:auto; display:flex; gap:0.6rem; align-items:center}

/* --- Estilos para o Link Ativo --- */
/* Necessário para posicionar o detalhe (a barra) em relação ao link */
.main-nav a {
    position: relative;
    transition: all 0.3s ease;
}

/* Estilo para links comuns quando ativos */
.main-nav ul li a.ativo {
    color: var(--primary); /* Texto fica azul */
    font-weight: 700;
    background-color: rgba(48, 48, 146, 0.05); /* Um fundo MUITO suave, quase imperceptível */
}

/* O "rabisco" ou barra embaixo do link */
.main-nav ul li a.ativo::after {
    content: '';
    position: absolute;
    bottom: 0px; /* Encostado na base do padding */
    left: 50%;
    transform: translateX(-50%);
    width: 20px; /* Tamanho discreto */
    height: 3px;
    background-color: var(--primary);
    border-radius: 10px;
    animation: slideUp 0.3s ease forwards;
}

/* --- Ajuste Especial para o Botão Contato --- */

/* Quando o botão "Contato" for o ativo */
.main-nav ul li a.btn.ativo {
    background-color: var(--primary-600); /* Escurece um pouco o botão para indicar seleção */
    color: #fff; /* Mantém texto branco */
}

/* A barra embaixo do botão (fora dele) */
.main-nav ul li a.btn.ativo::after {
    bottom: -10px; /* Empurra a barra para fora do botão */
    background-color: var(--primary);
    width: 30px; /* Um pouco maior que nos links de texto */
}

/* Animação suave de entrada */
@keyframes slideUp {
    from { width: 0px; opacity: 0; }
    to { opacity: 1; } /* Width é definido no elemento acima */
}

/* Buttons — globais */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:0.6rem 1rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  font-size:0.95rem;
  border:0;
  cursor:pointer;
}

header nav ul li .btn{
  color: #fff;
}

.btn-primary{
  background:var(--primary);
  color:#fff;
  box-shadow: var(--shadow);
}

.btn-primary:hover{
  padding:0.8rem 1.2rem;
  background:var(--primary-600)
}

.btn-outline{
  background:transparent;
  color:var(--primary);
  border:2px solid rgba(11, 99, 214, 0.34);
}
.btn-outline:hover{
  background:var(--primary);
  color:#fff;
  box-shadow: var(--shadow);
}

.btn-ghost{
  background:transparent;
  color:#111827;
  border:1px solid rgba(0,0,0,0.06);
}

/* Nav toggle (mobile) */
.nav-toggle{
  display:none;
  background:none;
  border:0;
  margin-left:0.5rem;
  padding:0.4rem;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:#111827;
  margin:4px 0;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg) }
.nav-toggle.open span:nth-child(2){ opacity:0 }
.nav-toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg) }

/* HERO: novo degradê bottom->top e layout (sobrescreve estilos anteriores do hero) */
.hero{
  padding:3.25rem 0;
  /* degrade de baixo para cima: #081244 embaixo -> #303092 em cima */
  background: linear-gradient(to top, #081244 0%, #303092 100%);
  color: #ffffff; /* texto claro sobre o fundo escuro */
}

/* hero-inner mantém a partição 2 colunas (conteúdo | logo) */
.hero-inner{
  display:grid;
  grid-template-columns: 1fr 460px;
  gap:2.25rem;
  align-items:center;
}

/* Pretítulo acima do H1 */
.hero-pretitle{
  font-size:0.95rem;
  font-weight:700;
  margin-bottom:0.6rem;
  opacity:0.95;
  letter-spacing:0.2px;
}

/* Ajustes de texto no hero para legibilidade no fundo escuro */
.hero-content h1{
  font-size:2rem;
  margin:0 0 0.75rem 0;
  line-height:1.12;
  color:#ffffff;
}
.hero .lead{
  color: rgba(255,255,255,0.85);
  margin-bottom:1.25rem;
}

/* Visual (logo) */
.hero-visual{
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-logo{
  max-width:100%;
  width:500px;       /* ajuste conforme a proporção da logo */
  height: auto;
  object-fit: contain;
  display:block;
}

.Home-Services{
  margin: 3rem 0 2rem 0;
}

.Home-Services h1, p{
  margin: 0;
  padding: 0;
}

/* BOTÕES no hero */
/* Sobrescreve .btn-primary apenas dentro do hero: laranja #f6821f */
.hero .btn-primary{
  background: #f6821f;
  color: #fff;
  box-shadow: 0 10px 30px rgba(246,130,31,0.12);
  border: 0;
}

/* Botão branco para "Solicitar Orçamento" (usado no hero) */
.btn-white{
  background: #ffffff;
  color: #0b1226; /* texto escuro */
  font-weight:700;
  border-radius:10px;
  padding:0.6rem 1rem;
  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(0,0,0,0.06);
}

/* Pequeno ajuste de espaçamento entre os botões */
.hero-buttons{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap
}

/* Visual placeholder (mantido caso queira usar) */
.img-placeholder{
  min-height:260px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(11,99,214,0.06), rgba(11,99,214,0.02)),
    url('hero-placeholder.jpg');
  background-size:cover;
  background-position:center;
  box-shadow: var(--shadow);
}

/* Sections */
.section{padding:1rem 0}
.section-title{
  font-size:1.8rem;
  margin:0 0 .2rem 0;
}
.section-intro{color:var(--muted); margin-top: 0; margin-bottom:1.5rem}

/* Services grid */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.25rem;
  margin-top:1rem;
}
.service-card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:1rem;
  box-shadow: 0 6px 20px rgba(15,23,42,0.04);
}
.service-media{
  height:190px;
  border-radius:10px;
  margin-bottom:0.85rem;
  background:linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
}

/* Why grid */
.why-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.25rem;
  margin-top:1rem;
}
.why-item{
  background:linear-gradient(180deg,#fff,#fbfdff);
  border-radius:var(--radius-sm);
  padding:1rem;
  border:1px solid rgba(10,10,10,0.02);
}

.icon-box {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem auto; /* Centraliza e dá espaço embaixo */
    background-color: rgba(48, 48, 146, 0.1); /* Fundo azul clarinho (da sua cor primary) */
    border-radius: 50%; /* Faz ficar redondo */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary); /* Ícone azul */
    font-size: 1.8rem; /* Tamanho do ícone */
    transition: all 0.3s ease;
}

/* CTA */
.section-cta{
  background:linear-gradient(45deg, rgba(214, 150, 11, 0.05), rgba(11, 99, 214, 0.05)); /*#F6821F*/
  padding:5rem 0;
  margin-top:2rem;
}
.cta-inner{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between
}
.cta-inner .section-intro {
  margin-bottom:0;
}

.cta-actions .btn{min-width:220px}

/* Footer */
.site-footer{
  padding:1.25rem 0;
  background:#202020;
  border-top:1px solid rgb(15, 23, 42);
}

.footer-inner{display:flex; justify-content:space-between; gap:1rem; align-items:center; color: #fff;}
.footer-right a{margin-left:0.75rem; color:var(--muted); text-decoration:none; font-size:0.95rem}

/* Center helper */
.center{text-align:center; margin-top: 20px;}


/* ==========================================================================
   LAYOUT DE SERVIÇOS E CARDS (Refatorado - Estilo Moderno/Sem Borda)
   ========================================================================== */

.services-page { padding-top: 1.5rem; }

/* Grid Principal (2 Colunas) */
.services-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 1rem;
}

/* Container Base do Card (Serve para TODOS os cards) */
.service-block {
    background: var(--surface);
    border-radius: var(--radius); /* Arredonda o card inteiro */
    box-shadow: 0 8px 28px rgba(2,6,23,0.06); /* Sombra um pouco mais suave */
    
    display: flex;
    flex-direction: column; /* Padrão: Imagem em cima, texto em baixo */
    
    padding: 0; /* REMOVIDO o padding externo (o segredo do visual limpo) */
    overflow: hidden; /* Garante que a imagem respeite as bordas arredondadas do card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito leve ao passar o mouse em qualquer card */
.service-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(48, 48, 146, 0.12);
}

/* Área de Conteúdo (Texto) dentro dos Cards */
.service-content {
    padding: 1.5rem; /* Adiciona o respiro para o texto não colar na borda */
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.service-block h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--primary); /* Títulos em azul para destacar */
}

.service-block p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

/* --- ESTILO DE DESTAQUE (MASTER) --- */
/* Herda tudo do .service-block acima, mas muda o layout no Desktop */

.service-featured {
    margin-bottom: 2rem;
    border: 1px solid rgba(48, 48, 146, 0.1); /* Borda sutil extra para o destaque */
}

/* Ajustes Específicos do Destaque no Desktop */
@media (min-width: 721px) {
  .service-featured .carousel-slide img{
    height: 75%;
  }
}


/* --- CARROSSEL / TINY SLIDER (Ajustado para o novo estilo) --- */

.carousel {
    position: relative;
    width: 100%;
    /* O overflow hidden aqui garante que a imagem não "vaze" */
}

.carousel-slide img {
    width: 100%;
    object-fit: cover;
    display: block;
    /* Removemos o border-radius da imagem, pois o card pai (.service-block) já corta os cantos */
    border-radius: 0; 
}

/* Controles do Carrossel (Setas) */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8); /* Fundo branco semi-transparente fica mais "clean" */
    color: var(--primary); /* Seta azul */
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    opacity: 0; /* Esconde as setas por padrão para ficar mais limpo */
}

/* Mostra as setas apenas quando passa o mouse no card */
.service-block:hover .carousel-btn {
    opacity: 1;
}

.carousel-btn:hover {
    background-color: var(--primary);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

/* Indicadores (Bolinhas) */
.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 6;
}

.carousel-indicators > button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    padding: 0;
    cursor: pointer;
}

.carousel-indicators > button.carousel-indicator-active {
    background: #fff;
    transform: scale(1.2);
}

/* Responsividade Mobile */
@media (max-width: 720px) {
    .services-columns {
        grid-template-columns: 1fr;
    }
    
    .service-block .carousel-slide img {
        height: 100%; /* Altura um pouco menor no celular */
    }
    
    .service-content {
        padding: 1.25rem;
    }
    
    /* No mobile, as setas ficam sempre visíveis */
    .carousel-btn {
        opacity: 1;
        background-color: rgba(255,255,255,0.6);
    }
}

  
/* Página Sobre --------------------------------------------------------------------------------------*/
.hero-sobre {
    padding: 8rem 0;
    text-align: center;
    color: #fff;
    position: relative; /* Garante que o pseudo-elemento fique contido */
    overflow: hidden;    /* Esconde o excesso da animação */
    
    /* Define o gradiente FINAL e ESTÁTICO (paleta original) */
    background: linear-gradient(to top, #081244 0%, #303092 100%);
}

/* Pseudo-elemento apenas para a animação */
.hero-sobre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Gradiente expandido para a animação ter "espaço" para correr */
    background: linear-gradient(-45deg, #081244, #191957, #303092, #191957);
    background-size: 400% 400%;
    
    /* Configuração da Animação:
       - 10s: Duração
       - ease-out: Começa rápido, termina devagar (suave)
       - 1: Roda APENAS UMA VEZ
       - forwards: Mantém o estado final da animação (opacidade 0)
    */
    animation: gradientIntro 5s ease-out 1 forwards;
    
    z-index: 1; /* Fica atrás do conteúdo */
    pointer-events: none; /* Não interfere nos cliques */
}

/* 3. Garante que o conteúdo (texto) fique ACIMA da animação */
.hero-sobre .container {
    position: relative;
    z-index: 2;
}

/* 4. A Keyframe da Animação: Move o gradiente e depois faz ele sumir */
@keyframes gradientIntro {
    0% {
        background-position: 0% 50%;
        opacity: 1; /* Começa visível */
    }
    50% {
        background-position: 100% 50%;
        opacity: 1; /* Continua visível no meio */
    }
    100% {
        background-position: 0% 50%;
        opacity: 0; /* No final, o pseudo-elemento fica invisível */
    }
}

/*ANIMAÇÃO TEXTO*/
.hero-content {
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.hsob {
  font-size: 4rem;
  margin: 0;
  padding: 0;
}

.h p{
  font-size: 1.3rem;
  margin: 0;
  padding: 0;
}

.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:#111827;
  margin:4px 0;
  transition:transform .2s ease, opacity .2s ease
}
.nav-toggle.open span:nth-child(1){transform: translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform: translateY(-6px) rotate(-45deg)}

/* SOBRE - nossa história: duas colunas (texto | logo) */
.sobre-historia{padding:2.25rem 0 1.5rem 0}
.sobre-grid{display:grid; grid-template-columns: 1fr 420px; gap:2rem; align-items:center;}
.historia-text h2{font-size:1.6rem; color:var(--primary); margin-bottom:.6rem}
.historia-text p{color:#1f2937; margin-bottom:0.9rem; font-size:1rem; line-height:1.6}
.historia-logo{display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center}
.logo-big{max-width:100%; width:340px; height:auto; object-fit:contain;}

/* destaques ao lado da logo */
.historia-destaques{list-style:none; padding:0; margin:0; color:var(--muted); font-weight:600}
.historia-destaques li{padding:6px 0; border-top:1px dashed rgba(15,23,42,0.04); width:100%}

/* VALORES / MISSÃO / VISÃO */
.valores{padding:1rem 0 2rem 0}
.valores-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
  align-items:stretch
}
.valor-card{
  background:var(--surface);
  padding: 2.2rem 1.5rem;
  border-radius:10px;
  box-shadow:var(--shadow);
  text-align:center
}
.valor-card h3{color:var(--primary); margin:0; margin-bottom: .5rem;}
.valor-card p{color:var(--muted); margin:0}

/* --- SEÇÃO DE CLIENTES --- */
.clients-section {
    background-color: #f7f7f8; /*Cor de fundo leve*/
    padding: 0rem 0 4rem 0;
}

/* Grid Flexível */
.clients-grid {
  display: flex;
  flex-wrap: wrap; /* Permite quebrar linha */
  justify-content: center; /* Centraliza tudo (inclusive a última linha incompleta) */
  gap: 1rem; /* Espaço entre os cartões */
  margin-top: 2rem;
}

/* O Cartão da Logo */
.client-item {
  background: #ffffff;
  width: 200px;       /* Largura fixa para uniformidade */
  height: 140px;      /* Altura fixa */
  border-radius: 12px;
  display: flex;
  align-items: center;     /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  padding: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* Sombra suave */
  border: 1px solid rgba(0,0,0,0.04);
  transition: all 0.3s ease;
}

/* A Imagem da Logo em si */
.client-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Garante que a logo inteira apareça sem cortar */
    
    /* EFEITO PRETO E BRANCO */
    filter: grayscale(100%);
    opacity: 0.7; /* Levemente transparente */
    transition: all 0.3s ease;
}

/* Hover: Efeito ao passar o mouse */
.client-item:hover {
    transform: translateY(-5px); /* O cartão sobe um pouquinho */
    box-shadow: 0 10px 20px rgba(48, 48, 146, 0.1); /* Sombra azulada */
    border-color: rgba(48, 48, 146, 0.1);
}

.client-item:hover img {
    filter: grayscale(0%); /* Volta a cor original */
    opacity: 1; /* Opacidade total */
    transform: scale(1.05); /* Logo cresce um pouquinho */
}

/* Responsividade para Clientes */
@media (max-width: 720px) {
    .clients-grid {
        gap: 1rem;
    }
    .client-item {
        /* No mobile, diminui um pouco o tamanho para caber mais na tela */
        width: 150px;
        height: 90px;
    }
    .section-header.center {
        margin-bottom: 1.5rem;
    }
}

/*Página Contato ------------------------------------------------------------------------------------*/

/* CONTACT SECTION LAYOUT */
.contato-section{
  padding:2rem 0;
}
.contato-inner{padding-top:0;}
.contato-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2rem;
  align-items:start;
}

/* Form wrapper */
.contato-form-wrapper{
  background:var(--surface);
  padding:1.25rem;
  border-radius:12px;
  box-shadow:var(--shadow);
}
.contato-form-wrapper h2{margin:0 0 .5rem 0; color:var(--primary)}
.contato-form-wrapper .muted{color:var(--muted); margin-bottom:1rem}

/* Form elements */
.contato-form .form-row{margin-bottom:0.85rem}
.contato-form label{display:block; font-weight:700; margin-bottom:0.35rem; color:#111827}
.contato-form input[type="text"],
.contato-form input[type="email"],
.contato-form input[type="tel"],
.contato-form textarea{
  width:100%;
  padding:0.7rem 0.85rem;
  border-radius:8px;
  border:1px solid rgba(15,23,42,0.08);
  background:#fff;
  font-size:0.95rem;
  color:#111827;
  box-shadow:inset 0 1px 0 rgba(0,0,0,0.02);
}
.contato-form textarea{resize:vertical; min-height:120px}

/* two column inputs */
.two-cols{display:flex; gap:0.8rem}
.two-cols .col{flex:1}

/* actions */
.form-actions{display:flex; gap:0.75rem; align-items:center}
.form-actions .btn{padding:0.6rem 1rem}
.form-feedback{margin-top:0.8rem; padding:0.65rem 0.8rem; border-radius:8px; display:block}
.form-feedback.sending{background:#fff7e6; color:#7a4b00}
.form-feedback.success{background:#e6f9f0; color:#065f46}
.form-feedback.error{background:#ffe6e6; color:#6b0b0b}

/* Info aside */
.contato-info{
  background:var(--surface);
  padding:1.25rem;
  margin-top: 2rem;
  border-radius:12px;
  box-shadow:var(--shadow);
}
.contato-info h3{margin:0 0 .6rem 0; color:var(--primary)}
.info-list{list-style:none; padding:0; margin:0 0 1rem 0; color:#111827}
.info-list li{margin-bottom:0.6rem}
.info-list a{color:var(--primary); text-decoration:none}

/* map */
.map-wrap{border-radius:8px; overflow:hidden; box-shadow:0 8px 18px rgba(2,6,23,0.06); margin-bottom:1rem}

/* quick actions */
.quick-actions{display:flex; gap:0.6rem; margin-top:0.5rem}


/* WhatsApp floating button -------------------------------------------------------------------------*/
.whatsapp-float{
  position:fixed;
  right:var(--whatsapp-offset);
  bottom:var(--whatsapp-offset);
  width:var(--whatsapp-size);
  height:var(--whatsapp-size);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--whatsapp-bg);
  color:#fff; /* Cor do ícone */
  text-decoration:none;
  box-shadow: 0 8px 28px rgba(2,6,23,0.18);
  z-index:var(--whatsapp-z);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  width: 90px;
  height: 90px;
  font-size: 40px; /* Tamanho do ícone para Font Awesome */
}

/* leve zoom ao passar o mouse */
.whatsapp-float:hover,
.whatsapp-float:focus{
  transform: scale(1.10);
  box-shadow: 0 14px 36px rgba(2,6,23,0.22);
}

/* efeito ao clicar (feedback) */
.whatsapp-float:active{
  transform: scale(0.98);
}

/* acessibilidade: foco bem visível */
.whatsapp-float:focus{
  box-shadow: 0 0 0 4px rgba(37,211,102,0.14), 0 14px 36px rgba(2,6,23,0.22);
  border-radius:50%;
}

/* ==========================================================================
   RESPONSIVIDADE (Copie e substitua toda a parte final do CSS a partir daqui)
   ========================================================================== */

/* --- Tablets e Notebooks menores (até 980px) --- */
@media (max-width: 980px){
  
  /* 1. Ajuste do Header/Hero */
  .hero-inner{
    grid-template-columns: 1fr; /* pilha vertical */
  }
  .hero-visual{ order: -1; margin-bottom:1rem; }
  .hero-logo{
    max-width:110%;
    width: 500px;
    height: 140px;
    object-fit: cover;
  }
  .hero-content{ text-align:center; }
  .hero-pretitle{ text-align:center; }
  .hero-buttons{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* 2. RESOLUÇÃO DO PEDIDO: Nossa História (Logo em cima, Texto em baixo) */
  .sobre-grid {
    grid-template-columns: 1fr; /* Transforma em uma única coluna */
    text-align: center;         /* Centraliza o texto para ficar bonito no mobile */
  }

  /* A mágica acontece aqui: order -1 joga o elemento para o topo */
  .historia-logo {
    order: -1; 
    margin-bottom: 2rem; /* Espaço entre a logo e o texto */
  }
  
  /* O texto fica na ordem natural (1), ou seja, abaixo da logo (-1) */
  .historia-text {
    order: 1;
  }

  /* 3. RESOLUÇÃO DO PEDIDO: Missão, Visão e Valores (Um embaixo do outro) */
  .valores-grid {
    grid-template-columns: 1fr; /* Remove as 3 colunas e deixa 1 só */
    gap: 1.5rem; /* Aumenta um pouco o espaço entre os cards */
  }

  /* Outros ajustes de Tablet */
  .why-grid{grid-template-columns: 1fr}
  .cta-inner{flex-direction:column; gap:1rem; text-align:center}
  .services-columns{ grid-template-columns: repeat(2,1fr); }
  
  /* Ajuste específico para página de contato em tablets */
  .contato-grid{grid-template-columns: 1fr 340px}
}

/* --- Mobile (Celulares até 720px) --- */
@media (max-width: 720px){
  /* Menu Mobile e Header */
  .main-nav{display:none}
  .nav-toggle{display:block; margin-left:auto}
  .header-cta{display:none}
  
  .main-nav.open{
    display:block;
    position:absolute;
    top:64px;
    right:16px;
    background:var(--surface);
    padding:0.75rem;
    border-radius:8px;
    box-shadow:0 10px 30px rgba(2,6,23,0.08);
    z-index: 100;
  }
  .main-nav.open ul{flex-direction:column; gap:0.4rem}
  .main-nav.open a{display:block; padding:0.6rem 0.9rem}

  /* Container e Grids gerais */
  .container{padding:1rem}
  
  /* Garante que serviços também fiquem um embaixo do outro no celular */
  .services-grid, 
  .services-columns {
     grid-template-columns: 1fr; 
  }

  /* Ajustes de Tipografia e Botões Mobile */
  .hero-content h1{font-size:1.5rem}
  .hero-logo{ width: 300px; }
  
  /* Ajustes do Tiny Slider Mobile */
  .tns-controls button{ width:34px; height:34px; font-size: 1.2rem; }

  /* Página Contato Mobile */
  .hero-contact .hero-inner{grid-template-columns:1fr; gap:0.6rem}
  .contato-grid{grid-template-columns:1fr; gap:1rem}
  .two-cols{flex-direction:column}
  .form-actions{flex-direction:column; align-items:stretch}
  
  /* Botão do WhatsApp menor no mobile */
  .whatsapp-float{
    right:14px; 
    bottom:14px; 
    width:52px; 
    height:52px; 
    font-size: 24px;
  }
}

/* Pequenos refinamentos finais */
a{transition:all .15s ease}
img{max-width:100%; height:auto; display:block}



/* RESPONSIVIDADE específica para contato */
@media (max-width: 1000px){
  .contato-grid{grid-template-columns: 1fr 340px}
  .hero-contact .hero-inner{grid-template-columns:1fr 180px}
}
@media (max-width: 720px){
  .main-nav{display:none}
  .nav-toggle{display:block}
  .header-cta{display:none}
  .hero-contact .hero-inner{grid-template-columns:1fr; gap:0.6rem}
  .contato-grid{grid-template-columns:1fr; gap:1rem}
  .two-cols{flex-direction:column}
  .form-actions{flex-direction:column; align-items:stretch}
  .container{padding:1rem}
  .whatsapp-float{right:14px; bottom:14px; width:52px; height:52px}
}

/* small helpers used by contact page */
.muted{color:var(--muted); font-size:0.95rem}
.req{color:#c0392b; margin-left:4px}


/* ==========================================================================
  FOOTER COMPLETO E ASSINATURA DA AGÊNCIA
  ========================================================================== */

.site-footer {
  background-color: #0b1226; /* Fundo bem escuro e elegante, combinando com o topo do Hero */
  color: rgba(255, 255, 255, 0.7);
  padding: 0; /* O padding agora é controlado por seções internas */
  border-top: 4px solid var(--primary); /* Linha azul separadora no topo do footer */
}

/* Área Superior (Colunas) */
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 3rem;
}

.footer-col h4 {
  color: #ffffff;
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.brand-col .footer-logo {
  max-width: 220px;
  margin-bottom: 1rem;
  /* Se a logo do cliente for escura, ative o filtro abaixo para deixá-la branca: */
  /* filter: brightness(0) invert(1); */ 
}

.brand-col p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Redes Sociais do Cliente */
.social-links {
  display: flex;
  gap: 1rem;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-links a:hover {
  background-color: var(--primary);
  transform: translateY(-3px);
}

/* Links Rápidos e Contato */
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
}

.footer-col ul li i {
  color: var(--primary); /* Ícones de contato com a cor da marca */
  width: 16px;
}

.links-col ul li a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.links-col ul li a:hover {
  color: #ffffff;
  padding-left: 5px; /* Efeito sutil de movimento */
}

/* Área Inferior (Copyright e Sua Agência) */
.footer-bottom {
  background-color: #050a17; /* Um tom ainda mais escuro para o rodapé final */
  padding: 1.5rem 0;
  font-size: 0.85rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}

.footer-left p {
  margin: 0;
}

/* Destaque para a Sua Agência */
.assinatura-agencia {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.assinatura-agencia p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5); /* Discreto */
}

.agencia-logo {
  height: 24px; /* Ajuste a altura conforme a proporção da sua logo */
  width: auto;
  object-fit: contain;
  transition: all 0.3s ease;
  opacity: 0.7; /* Começa um pouco transparente para não ofuscar o cliente */
}

.assinatura-agencia a:hover .agencia-logo {
  opacity: 1; /* Acende totalmente ao passar o mouse */
  transform: scale(1.05);
}

/* Responsividade do Footer */
@media (max-width: 980px) {
  .footer-top {
      grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .footer-top {
      grid-template-columns: 1fr;
      gap: 2.5rem;
      text-align: center;
  }
  
  .brand-col .footer-logo {
      margin: 0 auto 1rem auto;
  }
  
  .social-links {
      justify-content: center;
  }
  
  .footer-col ul li {
      justify-content: center;
  }
  
  .footer-inner {
      flex-direction: column;
      gap: 1.5rem;
      text-align: center;
  }
  
  .assinatura-agencia {
      flex-direction: column;
      gap: 0.5rem;
  }
}

/* ==========================================================================
  Botão chamada de ação
  ========================================================================== */
.btn-dynamic {
    position: relative;
    overflow: hidden;
    padding: 0.8rem 1.5rem;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* O fundo laranja que entra em diagonal */
.btn-dynamic::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%; /* Fica escondido fora do botão */
    width: 100%;
    height: 100%;
    background-color: #f6821f; /* Cor chamativa (Laranja) */
    transform: skewX(-20deg); /* Mantém a inclinação agressiva */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: -1;
}

/* O Ícone que começa invisível e menor */
.btn-dynamic .btn-icon {
    opacity: 0;
    transform: translateX(-15px) scale(0.5);
    transition: all 0.4s ease;
    width: 0; /* Esconde o espaço do ícone */
}

/* A Mágica acontece no Hover */
.btn-dynamic:hover::before {
    left: 0;
    transform: skewX(0deg); /* Endireita a cor enquanto preenche */
}

.btn-dynamic:hover {
    transform: translateY(0px); /* Dá um salto 3D */
    box-shadow: 0 15px 30px rgba(246, 130, 31, 0.4); /* Sombra pesada */
    color: #fff;
    border-color: #f6821f;
}

.btn-dynamic:hover .btn-icon {
    opacity: 1;
    transform: translateX(0) scale(1);
    width: auto; /* Abre espaço para a seta */
}