/* =========================================
   PROJETO: FUNDAÇÃO DIGITAL
   ARQUIVO: style.css
   ESTRATÉGIA: Mobile-First + Alta Performance
   ========================================= */

/* 1. VARIÁVEIS GLOBAIS (Edite aqui para personalizar o tema) */
:root {
     --cor-primaria: #0d6efd;
     --cor-secundaria: #6c757d;
     /* Cor de apoio */
     --cor-destaque: #ffc107;
     /* Para CTAs e alertas */
     --cor-texto: #212529;
     /* Texto padrão (quase preto) */
     --cor-fundo: #ffffff;
     /* Fundo do site */
     --cor-light: #f8f9fa;
     /* Fundo de seções alternadas */

     /* WhatsApp (Padrão Oficial) */
     --cor-whatsapp: #25D366;

     /* Tipografia (Fontes de sistema para performance máxima - sem @import) */
     --fonte-principal: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

     /* Espaçamento e Layout */
     --container-max-width: 1140px;
     --espacamento-padrao: 1rem;

     --altura-header: 60px;

     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

     /* Altura fixa ajuda a calcular o espaçamento do conteúdo abaixo */
     --altura-header: 70px;
}

/* 2. RESET MÍNIMO & NORMALIZAÇÃO */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

html {
     font-size: 15px;
     scroll-behavior: smooth;
     /* Rolagem suave para navegação one-page */
}

body {
     font-family: var(--fonte-principal);
     color: var(--cor-texto);
     background-color: var(--cor-fundo);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
}

img {
     max-width: 100%;
     height: auto;
     display: block;
}

a {
     text-decoration: none;
     color: inherit;
     transition: 0.3s ease;
}

ul {
     list-style: none;
}

/* 3. UTILITÁRIOS GERAIS */
.container {
     width: 100%;
     padding-right: var(--espacamento-padrao);
     padding-left: var(--espacamento-padrao);
     margin-right: auto;
     margin-left: auto;
}

.text-center {
     text-align: center;
}

.section-padding {
     padding-top: 3rem;
     padding-bottom: 3rem;
     padding-left: 0.45rem;
     padding-right: 0.45rem;
}

.bg-light {
     background-color: var(--cor-light);
}

/* 4. COMPONENTES (Botões e CTAs) */
.btn {
     display: inline-block;
     padding: 0.75rem 1.5rem;
     font-weight: 600;
     text-align: center;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     font-size: 1rem;
}

.btn-primary {
     background-color: var(--cor-primaria);
     color: #fff;
}

.btn-primary:hover {
     filter: brightness(0.9);
}

.btn-whatsapp-flutuante {
     position: fixed;
     bottom: 20px;
     right: 20px;
     background-color: var(--cor-whatsapp);
     color: #fff;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     z-index: 1000;
}

/* 5. ESTRUTURA MOBILE (Padrão) */
/* Header, Serviços, etc. começam empilhados aqui */

header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: var(--altura-header);
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(12px);
     /* Efeito "vidro" premium */
     -webkit-backdrop-filter: blur(12px);
     /* Suporte Safari */
     box-shadow: var(--shadow-sm);
     z-index: 1000;
     transition: all 0.3s ease;
}

/* Classe utilitária para quando rolar a página (via JS) */
header.scrolled {
     background: rgba(255, 255, 255, 0.98);
     box-shadow: var(--shadow-md);
}

.header-content {
     width: 100%;
     height: 100%;
     /* Padding lateral seguro para mobile (não colar na borda) */
     padding: 0 var(--espacamento-padrao);
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.logo {
     display: flex;
     align-items: center;
     height: 100%;
     padding: 5px 0;
     /* Um pequeno respiro vertical */
}

.logo img {
     max-height: 50px;
     width: auto;
     display: block;
     object-fit: contain;
}

/* Botão Header (Específico para o topo) */
.header-cta {
     background-color: var(--cor-destaque);
     color: #000;
     padding: 0.5rem 1rem;
     font-size: 0.9rem;
     font-weight: 700;
     border-radius: 50px;
     white-space: nowrap;
     /* Impede quebra de linha no botão */
}

.header-cta:hover {
     filter: brightness(0.95);
}

/* =========================================
   MEDIA QUERIES (Ajustes para Desktop)
   ========================================= */

@media (min-width: 992px) {
     .header-content {
          /* Só trava a largura máxima em telas grandes */
          max-width: 1200px;
     }

     .logo {
          font-size: 1.5rem;
          /* Logo cresce um pouco no desktop */
     }
}

.nav-menu {
     display: none;
     /* Menu hambúrguer seria implementado aqui via JS */
}



/* 6. MEDIA QUERIES (Breakpoints para Tablet e Desktop) */

/* Tablet e acima (>= 768px) */
@media (min-width: 768px) {
     .container {
          max-width: 720px;
     }

     /* Ajustes de grade simples para tablet */
     .grid-2 {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
     }
}

/* Desktop e acima (>= 992px) */
@media (min-width: 992px) {
     .container {
          max-width: var(--container-max-width);
     }

     .nav-menu {
          display: flex;
          /* Exibe o menu horizontalmente no desktop */
          gap: 2rem;
     }

     /* Grid para serviços ou galeria */
     .grid-3 {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 2rem;
     }
}

@media (max-width: 375px) {
     .logo img {
          max-height: 40px;
          /* Reduz um pouco em telas muito estreitas */
     }
}


/* =========================================
   HERO SECTION (Mobile Default)
   ========================================= */
:root {
     --primary-blue: #003D7A;
     --dark-blue: #001F3F;
     --accent-yellow: #FFD100;
     --white: #FFFFFF;
     --success-green: #10B981;
     --closed-red: #EF4444;
     --altura-header: 70px;
}

.hero {
     position: relative;

     /* DEFINIÇÃO DA PELÍCULA (OVERLAY) */
     /* Se você não definir cor no HTML, ele usa este cinza escuro padrão (0.6 = 60% opacidade) */
     --overlay-cor: rgba(0, 0, 0, 0.6);

     /* 1. BACKGROUND MOBILE */
     /* Camada 1: A cor sólida (feita com gradiente repetido) */
     /* Camada 2: A imagem (controlada por variável) */
     background-image:
          linear-gradient(var(--overlay-cor), var(--overlay-cor)),
          var(--bg-mobile);

     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;

     /* Layout Mobile */
     padding-top: calc(var(--altura-header) + 3rem);
     padding-bottom: 4rem;
     padding-left: 1.25rem;
     padding-right: 1.25rem;

     overflow: hidden;
     color: var(--white);
     text-align: left;
}

/* O efeito de luz (Glow) no canto superior direito */
.hero-glow {
     position: absolute;
     top: -50px;
     right: -50px;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(255, 209, 0, 0.15), transparent 70%);
     border-radius: 50%;
     pointer-events: none;
     /* Para não atrapalhar cliques */
     z-index: 1;
}

.hero-content {
     position: relative;
     z-index: 2;
     /* Fica acima do glow */
     max-width: 600px;
     /* Limite de leitura para mobile e desktop inicial */
}

/* 1. Título */
.hero h1 {
     font-size: 2.25rem;
     /* Tamanho mobile original */
     line-height: 1.2;
     font-weight: 900;
     margin-bottom: 1rem;
     color: var(--white);
}

/* 2. Subtítulo */
.hero-subtitle {
     font-size: 1.125rem;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: 1.5rem;
     line-height: 1.6;
}

/* 3. Status Badge */
.status-wrapper {
     margin-bottom: 1.5rem;
}

.status-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: rgba(255, 255, 255, 0.15);
     /* Vidro fosco */
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     padding: 0.5rem 1rem;
     border-radius: 50px;
     font-size: 0.875rem;
     font-weight: 600;
     border: 1px solid rgba(255, 255, 255, 0.2);
}

.status-indicator {
     width: 10px;
     height: 10px;
     border-radius: 50%;
}

.status-indicator.open {
     background-color: var(--success-green);
     box-shadow: 0 0 10px var(--success-green);
     /* Brilho neon */
     animation: pulse 2s infinite;
}

.status-indicator.closed {
     background-color: var(--closed-red);
}

/* Animação do pino */
@keyframes pulse {
     0% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: 0.7;
          transform: scale(1.1);
     }

     100% {
          opacity: 1;
          transform: scale(1);
     }
}

/* 4. Rating */
.rating {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     margin-bottom: 2rem;
}

.stars {
     color: var(--accent-yellow);
     font-size: 1.25rem;
     letter-spacing: 2px;
}

.rating-text {
     font-size: 0.9rem;
     opacity: 0.9;
}

/* 5. Botão CTA */
.hero-cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: var(--cor-destaque);
     /* Amarelo Sólido */
     color: #000000;
     padding: 1rem 2rem;
     border-radius: 50px;
     font-weight: 700;
     font-size: 1.125rem;
     text-decoration: none;
     box-shadow: 0 8px 24px rgba(255, 209, 0, 0.3);
     /* Sombra amarela */
     transition: transform 0.2s, box-shadow 0.2s;
     width: 100%;
     /* Botão full width no mobile facilita o clique */
}

.hero-cta:active {
     transform: scale(0.98);
}

/* =========================================
   MEDIA QUERIES (Tablet & Desktop)
   ========================================= */

@media (min-width: 768px) {
     .hero {
          /* 2. BACKGROUND DESKTOP */
          /* Mantém a mesma lógica de película, só troca a imagem de fundo */
          background-image:
               linear-gradient(var(--overlay-cor), var(--overlay-cor)),
               var(--bg-desktop);

          background-position: center top;

          /* Layout Desktop */
          padding-top: calc(var(--altura-header) + 6rem);
          padding-bottom: 8rem;
     }

     .hero-content {
          max-width: 800px;
          /* Permite o texto respirar mais */
     }

     .hero h1 {
          font-size: 3.5rem;
          /* Aumenta drasticamente no desktop */
          margin-bottom: 1.5rem;
     }

     .hero-subtitle {
          font-size: 1.25rem;
          max-width: 600px;
          /* Evita linhas muito longas */
     }

     .hero-cta {
          width: auto;
          /* Botão volta ao tamanho natural */
          padding: 1rem 2.5rem;
          /* Mais largo no desktop */
     }

     .hero-cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 30px rgba(255, 209, 0, 0.4);
     }
}

/* =========================================
   TRUST BAR (Barra de Confiança)
   ========================================= */

.trust-bar {
     background-color: var(--cor-light);
     /* Leve contraste com o fundo branco */
     padding: 1.5rem 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* MOBILE: Grid 2x2 (Duas colunas) 
   Isso é vital para não ocupar muita altura no celular */
.trust-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
     /* Espaço entre os itens */
}

.trust-item {
     display: flex;
     flex-direction: column;
     /* Ícone em cima, texto embaixo */
     align-items: center;
     text-align: center;
     padding: 0.5rem;
}

.trust-icon {
     font-size: 1.8rem;
     margin-bottom: 0.5rem;
     /* Opcional: Fundo colorido no ícone */
     width: 50px;
     height: 50px;
     background: #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.trust-text {
     line-height: 1.2;
}

.trust-text strong {
     display: block;
     color: var(--cor-texto);
     font-size: 0.9rem;
     font-weight: 700;
     margin-bottom: 2px;
}

.trust-text span {
     font-size: 0.8rem;
     color: #333333;
     font-weight: 500;
}

/* =========================================
   DESKTOP (Expandir para linha única)
   ========================================= */
@media (min-width: 992px) {
     .trust-bar {
          padding: 2.5rem 0;
     }

     .trust-grid {
          grid-template-columns: repeat(4, 1fr);
          /* 4 colunas em linha */
          gap: 2rem;
     }

     .trust-item {
          flex-direction: row;
          /* Ícone ao lado do texto */
          text-align: left;
          align-items: center;
          justify-content: center;
          gap: 1rem;
     }

     .trust-icon {
          margin-bottom: 0;
          /* Remove margem inferior pois agora está ao lado */
          width: 60px;
          height: 60px;
          font-size: 2rem;
     }

     .trust-text strong {
          font-size: 1.1rem;
     }

     .trust-text span {
          font-size: 0.9rem;
     }
}


/* =========================================
   SEÇÃO: VITRINE DE SOLUÇÕES
   ========================================= */

.solucoes-section {
     background-color: #f0f2f5;
     padding: 5rem 0;
}

/* Header da Seção */
.section-header {
     margin-bottom: 3rem;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
}

.section-header h2 {
     font-size: 2rem;
     font-weight: 800;
     margin-bottom: 0.5rem;
     color: var(--cor-texto);
}

.section-header p {
     color: var(--cor-secundaria);
     font-size: 1.1rem;
}

/* GRID SYSTEM (Mobile-First) */
.solucoes-grid {
     display: grid;
     grid-template-columns: 1fr;
     /* 1 Coluna no mobile */
     gap: 1.5rem;
}

/* CARD DESIGN */
.solucoes-card {
     background: #fff;
     border-radius: 1rem;
     padding: 2rem;
     text-align: center;
     box-shadow: var(--shadow-sm);
     transition: transform 0.3s ease, box-shadow 0.3s ease;

     /* Flex para empurrar o botão para o fundo */
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
}

.solucoes-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-md);
}

.card-content {
     margin-bottom: 1.5rem;
}

/* ÍCONE (Círculo Amarelo + SVG Preto) */
.card-icon {
     width: 80px;
     height: 80px;
     background-color: var(--cor-destaque);
     /* Amarelo */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem auto;
     box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.card-icon svg {
     width: 40px;
     height: 40px;
     fill: #000000;
     /* Preto total */
     transition: transform 0.3s ease;
}

.solucoes-card:hover .card-icon svg {
     transform: scale(1.1);
}

/* Tipografia do Card */
.solucoes-card h3 {
     font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
     color: var(--cor-texto);
}

.solucoes-card p {
     font-size: 0.9rem;
     color: var(--cor-secundaria);
     line-height: 1.5;
}

/* BOTÃO OUTLINE (Customizado) */
.btn-outline {
     display: inline-block;
     padding: 0.6rem 1.8rem;
     border: 2px solid #000;
     border-radius: 50px;
     color: #000;
     font-weight: 700;
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     background: transparent;
     transition: all 0.3s ease;
}

.btn-outline:hover {
     background-color: var(--cor-destaque);
     border-color: var(--cor-destaque);
     box-shadow: 0 4px 10px rgba(255, 193, 7, 0.4);
}

/* =========================================
   MEDIA QUERIES (Responsividade)
   ========================================= */

@media (min-width: 768px) {

     /* Tablet: 2 Colunas */
     .solucoes-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 2rem;
     }
}

@media (min-width: 992px) {

     /* Desktop: 4 Colunas */
     .solucoes-grid {
          grid-template-columns: repeat(4, 1fr);
     }
}

/* =========================================
   SEÇÃO: REVIEWS (Grade Estática Dark)
   ========================================= */

.reviews-section {
     background-color: #111111;
     /* Fundo Escuro */
     padding: 5rem 0;
}

/* Ajuste de Texto para Fundo Escuro */
.reviews-section .section-header h2 {
     color: #ffffff;
}

.reviews-section .section-header p {
     color: rgba(255, 255, 255, 0.7);
}

/* GRID SYSTEM (Responsivo) */
.reviews-grid {
     display: grid;
     grid-template-columns: 1fr;
     /* Mobile: 1 coluna (empilhado) */
     gap: 1.5rem;
}

/* CARD DESIGN (Efeito Lente/Vidro) */
.review-card {
     /* A "Película" translúcida */
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     /* Borda sutil */
     backdrop-filter: blur(10px);
     /* Desfoque do fundo */
     -webkit-backdrop-filter: blur(10px);
     /* Suporte Safari */

     border-radius: 1rem;
     padding: 2rem;
     height: 100%;
     /* Garante que todos tenham a mesma altura */

     display: flex;
     flex-direction: column;
     justify-content: space-between;

     color: #fff;
     transition: transform 0.3s ease, background 0.3s ease;
}

/* Interação ao passar o mouse */
.review-card:hover {
     background: rgba(255, 255, 255, 0.08);
     /* Clareia levemente */
     border-color: rgba(255, 255, 255, 0.2);
     transform: translateY(-5px);
     /* Flutua */
}

/* CONTEÚDO DO CARD */
.card-header {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 1rem;
}

.reviewer-avatar {
     width: 45px;
     height: 45px;
     background-color: var(--cor-destaque);
     /* Amarelo */
     color: #000;
     font-weight: 800;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     flex-shrink: 0;
}

.reviewer-info {
     display: flex;
     flex-direction: column;
}

.reviewer-info strong {
     font-size: 0.95rem;
     color: #fff;
}

.stars {
     color: var(--cor-destaque);
     font-size: 0.9rem;
     letter-spacing: 1px;
}

.review-card p {
     font-size: 0.95rem;
     color: rgba(255, 255, 255, 0.8);
     line-height: 1.5;
     font-style: italic;
     margin: 0;
}

/* =========================================
   MEDIA QUERIES (Layout da Grade)
   ========================================= */

/* Tablet: 2 Colunas */
@media (min-width: 768px) {
     .reviews-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 2rem;
     }
}

/* Desktop: 4 Colunas */
@media (min-width: 992px) {
     .reviews-grid {
          grid-template-columns: repeat(4, 1fr);
     }
}

/* =========================================
   SEÇÃO: QUEM SOMOS (Minimalista)
   ========================================= */

.about-section {
     background-color: #ffffff;
     /* Fundo Branco */
     padding: 5rem 0;
}

/* Container Centralizador */
.about-wrapper {
     max-width: 800px;
     /* Limita a largura para leitura ideal */
     margin: 0 auto;
     /* Centraliza o bloco na tela */
     text-align: center;
}

/* Título */
.about-section h2 {
     font-size: 2rem;
     font-weight: 800;
     color: var(--cor-texto);
     margin-bottom: 2rem;
     line-height: 1.2;
}

/* Texto */
.about-text p {
     font-size: 1.15rem;
     /* Texto levemente maior */
     color: var(--cor-secundaria);
     line-height: 1.8;
     /* Bom espaçamento entre linhas */
     margin-bottom: 1.5rem;
}

.about-text strong {
     color: var(--cor-texto);
     font-weight: 700;
}

/* =========================================
   MEDIA QUERIES
   ========================================= */

@media (min-width: 992px) {
     .about-section h2 {
          font-size: 2.5rem;
          /* Aumenta o impacto do título no desktop */
     }
}

/* =========================================
   FOOTER (Rodapé Geográfico Dark)
   ========================================= */

.main-footer {
     background-color: #000000;
     /* Preto Puro */
     color: #ffffff;
     padding: 4rem 0 2rem;
     position: relative;
     /* Espaço extra no mobile para não esconder conteúdo atrás da barra fixa */
     padding-bottom: 6rem;
}

/* GRID SYSTEM */
.footer-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 3rem;
     margin-bottom: 3rem;
}

/* Títulos em Amarelo (Primary Color) */
.footer-title {
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--cor-destaque);
     /* Amarelo */
     margin-bottom: 1.5rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}

.footer-address p {
     margin-bottom: 0.5rem;
     font-size: 1rem;
     color: #e0e0e0;
     /* Branco levemente suavizado para leitura */
}

/* Horário */
.footer-hours {
     margin: 2rem 0;
     padding: 1.5rem 0;
     border-top: 1px solid rgba(255, 255, 255, 0.15);
     border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-hours h4 {
     font-size: 1.1rem;
     font-weight: 700;
     margin-bottom: 0.75rem;
     color: var(--cor-destaque);
     /* Título do horário em Amarelo */
}

.footer-hours ul li {
     font-size: 0.95rem;
     color: #e0e0e0;
     margin-bottom: 0.3rem;
}

/* Destaque Telefone */
.footer-contact-highlight span {
     display: block;
     font-size: 0.85rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #999;
     margin-bottom: 0.25rem;
}

.phone-link {
     font-size: 1.75rem;
     font-weight: 800;
     color: #fff;
     text-decoration: none;
     transition: color 0.3s ease;
}

.phone-link:hover {
     color: var(--cor-destaque);
}

/* MAPA */
.footer-map {
     width: 100%;
     height: 300px;
     border-radius: 1rem;
     overflow: hidden;
     background: #222;
     border: 1px solid rgba(255, 255, 255, 0.1);
     /* Borda sutil para delimitar o mapa no fundo preto */
}

.footer-map iframe {
     width: 100% !important;
     height: 100% !important;
     display: block;
}

/* COPYRIGHT */
.footer-copy {
     text-align: center;
     font-size: 0.85rem;
     color: #888;
     padding-top: 2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-copy a {
     color: #fff;
     text-decoration: none;
     font-weight: 700;
}

.footer-copy a:hover {
     color: var(--cor-destaque);
}

/* =========================================
   FOOTER (Rodapé Geográfico Dark)
   ========================================= */

.main-footer {
     background-color: #000000;
     /* Preto Puro */
     color: #ffffff;
     padding: 4rem 0 2rem;
     position: relative;
     /* Espaço extra no mobile para a barra fixa não cobrir conteúdo */
     padding-bottom: 5rem;
}

/* GRID SYSTEM */
.footer-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 3rem;
     margin-bottom: 3rem;
}

/* Títulos em Amarelo (Primary Color) */
.footer-title {
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--cor-destaque);
     /* Amarelo */
     margin-bottom: 1.5rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}

.footer-address p {
     margin-bottom: 0.5rem;
     font-size: 1rem;
     color: #e0e0e0;
     /* Branco levemente suavizado */
}

/* Horário */
.footer-hours {
     margin: 2rem 0;
     padding: 1.5rem 0;
     border-top: 1px solid rgba(255, 255, 255, 0.15);
     border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-hours h4 {
     font-size: 1.1rem;
     font-weight: 700;
     margin-bottom: 0.75rem;
     color: var(--cor-destaque);
     /* Amarelo */
}

.footer-hours ul li {
     font-size: 0.95rem;
     color: #e0e0e0;
     margin-bottom: 0.3rem;
}

/* Destaque Telefone */
.footer-contact-highlight span {
     display: block;
     font-size: 0.85rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #999;
     margin-bottom: 0.25rem;
}

.phone-link {
     font-size: 1.75rem;
     font-weight: 800;
     color: #fff;
     text-decoration: none;
     transition: color 0.3s ease;
}

.phone-link:hover {
     color: var(--cor-destaque);
}

/* MAPA */
.footer-map {
     width: 100%;
     height: 300px;
     border-radius: 1rem;
     overflow: hidden;
     background: #222;
     border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-map iframe {
     width: 100% !important;
     height: 100% !important;
     display: block;
}

/* COPYRIGHT */
.footer-copy {
     text-align: center;
     font-size: 0.85rem;
     color: #888;
     padding-top: 2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-copy a {
     color: #fff;
     text-decoration: none;
     font-weight: 700;
}

.footer-copy a:hover {
     color: var(--cor-destaque);
}

/* =========================================
   BARRA MOBILE FLUTUANTE (Sticky Full Width - Texto Puro)
   ========================================= */

.mobile-bar {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     display: flex;
     /* Coloca os botões lado a lado */
     padding: 0;
     /* Remove qualquer espaçamento do container */
     margin: 0;
     z-index: 1000;
     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.bar-btn {
     flex: 1;
     /* Força divisão exata (50% cada) */
     display: flex;
     align-items: center;
     justify-content: center;

     padding: 1.2rem 0;
     /* Altura generosa para o toque */
     border-radius: 0;
     /* Retangular */
     border: none;

     font-weight: 800;
     font-size: 1rem;
     color: #ffffff;
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}

/* Cores Específicas */
.btn-call {
     background-color: var(--cor-primaria);
     /* Azul da Marca */
}

.btn-zap {
     background-color: #0d9f16;
     /* Verde WhatsApp Específico */
}

.bar-btn:active {
     filter: brightness(0.9);
}

/* =========================================
   MEDIA QUERIES (Desktop)
   ========================================= */

@media (min-width: 992px) {
     .main-footer {
          padding-bottom: 2rem;
          /* Remove espaço da barra mobile */
     }

     .footer-grid {
          grid-template-columns: 1fr 1fr;
          gap: 4rem;
          align-items: start;
     }

     .footer-map {
          height: 100%;
          min-height: 350px;
     }

     /* Esconde barra mobile no PC */
     .mobile-bar {
          display: none;
     }
}

/* =========================================
   BOTÕES DE ROTA (Waze & Maps)
   ========================================= */

.footer-routes {
     margin-top: 1.5rem;
     padding-top: 1.5rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-routes span {
     display: block;
     font-size: 0.85rem;
     color: #999;
     margin-bottom: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}

.routes-wrapper {
     display: flex;
     gap: 1rem;
}

.route-btn {
     flex: 1;
     /* Botões dividem o espaço */
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.6rem 1rem;
     border: 1px solid;
     /* Borda definida pela cor específica abaixo */
     border-radius: 4px;
     background: transparent;
     font-size: 0.9rem;
     font-weight: 700;
     text-decoration: none;
     transition: all 0.3s ease;
}

/* Estilo Google Maps (Azul/Branco) */
.google-btn {
     border-color: #fff;
     color: #fff;
}

.google-btn:hover {
     background-color: #fff;
     color: #000;
}

/* Estilo Waze (Azul Waze) */
.waze-btn {
     border-color: #33CCFF;
     color: #33CCFF;
}

.waze-btn:hover {
     background-color: #33CCFF;
     color: #000;
     /* Texto preto no hover para leitura */
     box-shadow: 0 0 15px rgba(51, 204, 255, 0.4);
     /* Brilho neon */
}

/* =========================================
   MAPA OTIMIZADO (CORREÇÃO DE CAMADAS)
   ========================================= */

.footer-map {
     width: 100%;
     height: 300px;
     border-radius: 1rem;
     overflow: hidden;
     background: #222;
     /* Fundo cinza enquanto carrega */
     border: 1px solid rgba(255, 255, 255, 0.1);
     position: relative;
     /* Importante para posicionar os filhos */
}

/* O Placeholder (Texto) */
.map-placeholder {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #888;
     font-size: 0.9rem;
     background-color: #1a1a1a;
     z-index: 10;
     /* Fica POR CIMA do iframe inicialmente */
     transition: opacity 0.3s ease;
}

/* O Iframe */
.google-map-iframe {
     position: relative;
     width: 100% !important;
     height: 100% !important;
     display: block;
     opacity: 0;
     /* Começa invisível */
     z-index: 5;
     /* Fica POR BAIXO do placeholder inicialmente */
     transition: opacity 0.5s ease;
}

/* --- ESTADO ATIVO (Adicionado via JS quando carregar) --- */

/* Quando o mapa estiver pronto: */
.footer-map.map-ready .map-placeholder {
     display: none;
     /* Remove o texto da frente (resolve o "vidro" e a visualização) */
}

.footer-map.map-ready .google-map-iframe {
     opacity: 1;
     /* Mostra o mapa */
     z-index: 20;
     /* Traz o mapa para frente (garantia extra) */
}

@media (min-width: 992px) {
     .footer-map {
          height: 100%;
          min-height: 350px;
     }
}

/* =========================================
   PÁGINAS INTERNAS (BATERIAS AUTOMOTIVAS)
   Zero Bootstrap - Estilo Puro
   ========================================= */

/* Espaçamento padrão para substituir classes 'mb-4', 'mb-5' etc */
.mb-section {
     margin-bottom: 3rem;
}

/* 1. HEADER INTERNO (Dark Gradient) */
.page-header-dark {
     position: relative;
     background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
     padding: calc(var(--altura-header) + 4rem) 0 5rem;
     color: #fff;
     text-align: center;
     overflow: hidden;
}

/* Textura sutil */
.page-header-dark::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
     background-size: 20px 20px;
     pointer-events: none;
}

.header-text-content {
     position: relative;
     z-index: 2;
     max-width: 800px;
     margin: 0 auto;
}

.header-text-content h1 {
     font-size: 2.2rem;
     font-weight: 900;
     margin-bottom: 1rem;
     color: var(--cor-destaque);
     letter-spacing: -0.5px;
}

.header-text-content .lead {
     font-size: 1.15rem;
     opacity: 0.9;
     font-weight: 400;
}

/* 2. BLOCO INTRODUTÓRIO */
.intro-product-block {
     display: grid;
     grid-template-columns: 1fr;
     gap: 2.5rem;
     align-items: center;
     margin-bottom: 3rem;
     /* Substitui mb-5 */
}

.intro-text h2 {
     font-size: 1.8rem;
     font-weight: 800;
     margin-bottom: 1.5rem;
     color: var(--cor-texto);
}

.intro-text p {
     font-size: 1.05rem;
     color: var(--cor-texto);
     margin-bottom: 1rem;
}

/* Imagem Principal do Produto (Substitui img-fluid rounded shadow) */
.product-main-image {
     width: 100%;
     height: auto;
     border-radius: 1rem;
     box-shadow: var(--shadow-md);
     object-fit: cover;
     aspect-ratio: 4 / 3;
}

/* 3. GRID PRINCIPAL */
.content-grid-layout {
     display: grid;
     grid-template-columns: 1fr;
     gap: 3rem;
}

.main-details-block h3 {
     font-size: 1.5rem;
     font-weight: 700;
     margin-top: 1rem;
     margin-bottom: 1rem;
     color: var(--cor-texto);
     border-left: 4px solid var(--cor-destaque);
     padding-left: 1rem;
}

/* Lista de Marcas */
.brands-list-svg {
     list-style: none;
     margin: 2rem 0;
}

.brands-list-svg li {
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
     margin-bottom: 1.25rem;
     font-size: 1.05rem;
     color: var(--cor-texto);
}

.brands-list-svg li svg {
     flex-shrink: 0;
     margin-top: 2px;
}

/* 4. SIDEBAR E CARDS */
.sidebar-block {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
}

.service-highlight-card {
     background: #fff;
     border: 1px solid #eee;
     padding: 2rem;
     border-radius: 1rem;
     box-shadow: var(--shadow-sm);
     text-align: left;
     transition: transform 0.3s ease, border-color 0.3s ease;
}

.service-highlight-card:hover {
     transform: translateY(-5px);
     border-color: var(--cor-destaque);
}

.icon-wrapper {
     margin-bottom: 1.5rem;
}

.icon-wrapper svg {
     fill: var(--cor-texto);
}

.service-highlight-card h4 {
     font-weight: 700;
     font-size: 1.2rem;
     margin-bottom: 0.75rem;
     color: var(--cor-texto);
}

.service-highlight-card p {
     font-size: 0.95rem;
     color: var(--cor-texto);
     line-height: 1.6;
}

/* 5. CTA BOX BRAND */
.cta-box-brand {
     background-color: #fff;
     border: 2px solid var(--cor-destaque);
     padding: 2rem;
     margin: 3rem 0;
     border-radius: 1rem;
     text-align: center;
     box-shadow: var(--shadow-sm);
}

.cta-label {
     font-weight: 700;
     font-size: 1.1rem;
     margin-bottom: 1.5rem;
     display: block;
     color: var(--cor-texto);
}

.btn-brand-cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.75rem;
     background-color: var(--cor-destaque);
     color: #000;
     padding: 1rem 2.5rem;
     border-radius: 50px;
     font-weight: 800;
     text-decoration: none;
     font-size: 1.1rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

.btn-brand-cta:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(255, 193, 7, 0.5);
     filter: brightness(1.05);
}

/* 6. FAQ (Sem Bootstrap) */
.faq-grid-container {
     max-width: 800px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     gap: 1rem;
}

.faq-accordion {
     background: #fff;
     border-radius: 0.75rem;
     border: 1px solid rgba(0, 0, 0, 0.1);
     overflow: hidden;
     transition: all 0.3s ease;
}

.faq-accordion[open] {
     border-color: var(--cor-destaque);
     box-shadow: var(--shadow-sm);
}

.faq-accordion summary {
     padding: 1.25rem;
     font-weight: 700;
     font-size: 1.05rem;
     cursor: pointer;
     background-color: #fff;
     list-style: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: var(--cor-texto);
}

.faq-accordion summary::-webkit-details-marker {
     display: none;
}

.faq-accordion summary::after {
     content: '+';
     font-size: 1.5rem;
     font-weight: 400;
     color: var(--cor-texto);
     transition: transform 0.3s ease;
}

.faq-accordion[open] summary::after {
     content: '\2212';
     color: var(--cor-destaque);
     transform: rotate(180deg);
}

.faq-content {
     padding: 0 1.25rem 1.5rem 1.25rem;
}

.faq-content p {
     color: var(--cor-texto);
     font-size: 1rem;
     line-height: 1.7;
}

/* =========================================
   MEDIA QUERIES (Desktop)
   ========================================= */
@media (min-width: 992px) {
     .page-header-dark {
          padding: calc(var(--altura-header) + 6rem) 0 7rem;
     }

     .header-text-content h1 {
          font-size: 3rem;
     }

     /* Intro Lado a Lado */
     .intro-product-block {
          grid-template-columns: 1fr 1fr;
          gap: 4rem;
     }

     /* Grid Principal: Conteúdo (2/3) e Sidebar (1/3) */
     .content-grid-layout {
          grid-template-columns: 2fr 1fr;
          gap: 4rem;
          align-items: start;
     }

     .intro-text h2 {
          font-size: 2.5rem;
     }
}

/* COOKIE NOTICE */
#cookie-notice {
     bottom: 58px;
}

@media (min-width: 992px) {
     #cookie-notice {
          bottom: 0;
          flex-direction: row !important;
          justify-content: center;
          gap: 2rem;
          padding: 1rem 2rem;
     }

     #cookie-notice p {
          margin-bottom: 0 !important;
     }

     #cookie-notice button {
          width: auto !important;
     }
}

.review-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     padding: 0.5rem 1rem;
     border-radius: 50px;
     font-size: 0.875rem;
     font-weight: 600;
     border: 1px solid rgba(255, 255, 255, 0.2);
}

.reviewer-avatar-img {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid var(--brand-yellow);
}