/* --------------------------------------------------------------------------
   1. VARIÁVEIS E RESET (Design Tokens)
-------------------------------------------------------------------------- */
:root {
     /* Paleta de Cores */
     --brand-yellow: #ffc107;
     /* Amarelo Energia */
     --brand-dark: #1a1a1a;
     /* Fundo Escuro */
     --brand-gray: #f8f9fa;
     /* Fundo Leve */
     --text-main: #333333;
     --text-muted: #666666;
     --white: #ffffff;
     --success: #25D366;
     /* Verde WhatsApp */
     --zap: #08ac0d;
     --darkgray: #e0e0e0;

     /* Espaçamento e Layout */
     --container-width: 1200px;
     --header-height: 70px;
     --border-radius: 12px;
     --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
     --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

     /* Tipografia */
     --font-heading: 'Montserrat', sans-serif;
     --font-body: 'Open Sans', sans-serif;
}

/* Reset Moderno */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

body {
     font-family: var(--font-body);
     color: var(--text-main);
     line-height: 1.6;
     background-color: var(--brand-gray);
     padding-bottom: 60px;
     /* Espaço para a barra sticky mobile */
}

h1,
h2,
h3,
h4,
h5 {
     font-family: var(--font-heading);
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 1rem;
}

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

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

ul {
     list-style: none;
}

/* --------------------------------------------------------------------------
   2. COMPONENTES GLOBAIS (Mobile Default)
-------------------------------------------------------------------------- */

/* Layout Container */
.container {
     width: 100%;
     padding: 0 1.5rem;
     margin: 0 auto;
     max-width: var(--container-width);
}

.section {
     padding: 3rem 0;
}

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

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

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

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

.img-fluid {
     max-width: 100%;
     height: auto;
}

.txt-1 {
     font-size: 0.7rem !important;
}

.text-muted-i {
     font-size: 0.72rem;
     color: var(--text-muted);
     font-style: italic;
}

.txt-color-brand {
     color: var(--brand-yellow) !important;
}

/* Grid System (Padrão: 1 Coluna para Mobile) */
.grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 2rem;
}

/* Botões */
.btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.8rem 1.5rem;
     border-radius: 50px;
     font-weight: 700;
     font-family: var(--font-heading);
     text-transform: uppercase;
     font-size: 0.9rem;
     cursor: pointer;
     border: 2px solid transparent;
     transition: all 0.3s ease;
     width: 100%;
}

/* No mobile, botões tendem a ocupar a largura total para facilitar o toque */
@media (min-width: 768px) {
     .btn {
          width: auto;
     }
}

.btn-primary {
     background-color: var(--brand-yellow);
     color: var(--brand-dark);
}

.btn-zap {
     background-color: var(--zap);
     color: #ffffff;
}

.btn-zap:hover {
     background-color: #046b07;
}

.btn-primary:hover {
     background-color: #e6c200;
     transform: translateY(-2px);
}

.btn-dark {
     background-color: var(--brand-dark);
     color: var(--white);
}

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

.btn-outline-light {
     background: transparent;
     border-color: var(--white);
     color: var(--white);
}

.btn-outline-light:hover {
     background: var(--white);
     color: var(--brand-dark);
}

/* Inputs e Forms */
.form-group {
     margin-bottom: 1rem;
}

.form-label {
     font-size: 0.75rem;
     font-weight: 800;
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 0.5rem;
     display: block;
}

.form-input,
.form-select {
     width: 100%;
     padding: 0.8rem 1rem;
     border: 1px solid #ddd;
     border-radius: 8px;
     font-family: var(--font-body);
     font-size: 1rem;
     background: #fff;
}

.form-input:focus,
.form-select:focus {
     outline: 2px solid var(--brand-yellow);
     border-color: var(--brand-yellow);
}

/* Cards (Base) */
.card {
     background: var(--white);
     border-radius: var(--border-radius);
     overflow: hidden;
     box-shadow: var(--shadow-sm);
     transition: 0.3s;
     height: 100%;
     /* Garante altura igual no grid */
     display: flex;
     flex-direction: column;
}

.card-header {
     padding: 1rem;
     font-weight: 700;
     font-family: var(--font-heading);
}

.card-body {
     padding: 1.5rem;
     flex: 1;
     display: flex;
     flex-direction: column;
}

/* --------------------------------------------------------------------------
   3. HEADER & NAVEGAÇÃO (Atualizado)
-------------------------------------------------------------------------- */
.navbar {
     background-color: var(--white);
     /* Bootstrap py-3 é aproximadamente 1rem em cima e embaixo */
     padding: 1rem 0;
     position: sticky;
     top: 0;
     z-index: 1000;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     width: 100%;
}

.nav-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     /* Centraliza verticalmente logo e menu */
}

/* Tamanho do Logo idêntico ao original (12rem) */
.brand {
     display: flex;
     align-items: center;
}

.brand img {
     width: 12rem;
     /* Prioridade na largura */
     height: auto;
     max-width: 100%;
}

/* Ajuste fino para Ícones Google alinharem com texto */
.material-symbols-outlined {
     vertical-align: middle;
     font-size: 1.2rem;
     /* Tamanho confortável */
     line-height: 1;
}

/* Menu Mobile Toggle */
.icon-svg {
     width: 24px;
     height: 24px;
     fill: currentColor;
     vertical-align: middle;
}

.mobile-toggle {
     cursor: pointer;
     color: var(--text-main);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0.5rem;
}

/* Menu Container */
.nav-menu {
     list-style: none;
     display: none;
     /* Mobile first: escondido */
     flex-direction: column;
     position: absolute;
     top: 100%;
     /* Logo abaixo do header */
     left: 0;
     width: 100%;
     background: var(--white);
     padding: 1.5rem;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
     gap: 1rem;
     border-top: 1px solid #f0f0f0;
}

.nav-menu.active {
     display: flex;
}

/* Links */
.nav-link {
     font-weight: 600;
     color: var(--text-muted);
     font-family: var(--font-body);
     font-size: 0.95rem;
     transition: color 0.2s;
}

.nav-link:hover {
     color: var(--brand-yellow);
}

/* Ajuste Específico Desktop */
@media (min-width: 992px) {
     .navbar {
          padding: 1rem 0;
     }

     /* Mantém o respiro original */

     .mobile-toggle {
          display: none;
     }

     .nav-menu {
          position: static;
          width: auto;
          display: flex;
          flex-direction: row;
          align-items: center;
          /* Centraliza itens na vertical */
          background: transparent;
          box-shadow: none;
          padding: 0;
          gap: 2rem;
          /* Espaçamento entre links */
          border: none;
     }

     .nav-link {
          padding: 0;
     }

     /* Botão do header (Desktop) */
     .btn-header {
          margin: 0;
     }
}

/* --------------------------------------------------------------------------
   4. SEÇÕES ESPECÍFICAS
-------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   HERO SECTION (Atualizado - Visual "Baterias São Lourenço")
-------------------------------------------------------------------------- */
.hero {

     background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), var(--bg-mobile);
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;

     padding: 80px 0 100px 0;
     color: var(--white);
     position: relative;
}

/* Tipografia Hero */
.hero-badge {
     background-color: var(--brand-yellow);
     color: var(--brand-dark);
     padding: 0.5rem 1rem;
     border-radius: 50px;
     /* Rounded-pill */
     font-weight: 800;
     font-family: var(--font-heading);
     font-size: 0.85rem;
     display: inline-block;
     margin-bottom: 1.5rem;
}

.hero-title {
     font-size: 2.5rem;
     /* Mobile first */
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: 1.5rem;
}

.hero-lead {
     font-size: 1.1rem;
     opacity: 0.8;
     font-weight: 400;
     margin-bottom: 1rem;
     max-width: 600px;
}

/* Botões da Hero */
.hero-btns {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     margin-top: 1.5rem;
     margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   CARD DE COTAÇÃO (Réplica do Visual)
-------------------------------------------------------------------------- */
.quote-card {
     background: var(--white);
     border-radius: 1rem;
     /* Rounded-4 */
     overflow: hidden;
     box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
     /* Shadow-lg */
     color: var(--text-main);
}

.quote-header {
     background-color: var(--brand-yellow);
     color: var(--brand-dark);
     padding: 1.5rem;
     text-align: center;
     font-weight: 800;
     font-family: var(--font-heading);
     font-size: 1.2rem;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
}

.quote-body {
     padding: 2rem;
}

/* Input Groups Customizados (Simula o Bootstrap input-group-lg) */
.custom-input-group {
     background-color: var(--brand-gray);
     /* bg-light */
     border-radius: 8px;
     display: flex;
     align-items: center;
     padding: 0.2rem;
     margin-bottom: 1.5rem;
     /* mb-4 */
}

.input-icon {
     padding: 0 1rem;
     color: var(--text-main);
     display: flex;
     align-items: center;
     justify-content: center;
}

.custom-input,
.custom-select {
     width: 100%;
     border: none;
     background: transparent;
     padding: 1rem 1rem 1rem 0;
     /* Padding-lg */
     font-size: 1.1rem;
     color: var(--text-main);
     font-family: var(--font-body);
}

.custom-input:focus,
.custom-select:focus {
     outline: none;
}

/* Label pequena acima do input */
.form-label-sm {
     font-size: 0.75rem;
     font-weight: 800;
     color: #999;
     /* text-muted */
     margin-bottom: 0.5rem;
     display: block;
     text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   MEDIA QUERIES (Ajustes Desktop)
-------------------------------------------------------------------------- */
@media (min-width: 992px) {
     .hero-layout {
          display: grid;
          grid-template-columns: 5fr 5fr;
          /* 50% 50% aprox */
          gap: 4rem;
          align-items: center;
     }

     /* Simula o offset-lg-1 do bootstrap criando um grid assimétrico ou margin */
     .hero-form-wrapper {
          margin-left: auto;
          width: 100%;
          max-width: 450px;
     }

     .hero-title {
          font-size: 3.5rem;
     }

     /* Display-4 */

     .hero-btns {
          flex-direction: row;
          gap: 1rem;
     }

     .btn-hero {
          padding: 1rem 2.5rem;
          /* Btn-lg */
          font-size: 1rem;
     }
}

/* Services (Icons) */
.icon-box {
     width: 70px;
     height: 70px;
     background: rgba(255, 215, 0, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem auto;
     color: #cca300;
     font-size: 1.8rem;
}

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

/* Stores */
.store-card {
     border: 1px solid #eee;
}

.store-card .card-header {
     background: var(--brand-dark);
     color: var(--white);
     display: flex;
     justify-content: space-between;
     align-items: center;
}

/* Footer */
footer {
     background: var(--brand-dark);
     color: #999;
     padding: 3rem 0 2rem 0;
     text-align: center;
}

footer h5 {
     color: var(--white);
     margin-top: 1.5rem;
}

footer a:hover {
     color: var(--brand-yellow);
}

/* --------------------------------------------------------------------------
   5. UTILS MOBILE (Sticky Bar & Floating)
-------------------------------------------------------------------------- */

/* Botão Flutuante WhatsApp */
.btn-whats-float {
     position: fixed;
     bottom: 80px;
     /* Acima da barra sticky */
     right: 20px;
     width: 55px;
     height: 55px;
     background: var(--success);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.3);
     z-index: 999;
     animation: pulse 2s infinite;
}

/* Barra Sticky Inferior (Só Mobile) */
.mobile-sticky-bar {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background: var(--white);
     padding: 10px;
     z-index: 1000;
     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
     display: flex;
     gap: 10px;
}

@keyframes pulse {
     0% {
          box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
     }

     70% {
          box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
     }

     100% {
          box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
     }
}

/* --------------------------------------------------------------------------
   6. VERSÃO DESKTOP (@media min-width: 992px)
-------------------------------------------------------------------------- */
@media (min-width: 992px) {

     /* Layout */
     body {
          padding-bottom: 0;
     }

     /* Remove espaço da barra sticky */
     .section {
          padding: 5rem 0;
     }

     /* Grid de 2 e 4 Colunas */
     .grid-2 {
          grid-template-columns: 1fr 1fr;
     }

     .grid-4 {
          grid-template-columns: repeat(4, 1fr);
     }

     /* Navigation Desktop */
     .mobile-toggle {
          display: none;
     }

     .nav-menu {
          position: static;
          width: auto;
          background: transparent;
          box-shadow: none;
          display: flex;
          flex-direction: row;
          padding: 0;
          gap: 2rem;
     }

     .nav-link {
          border: none;
          padding: 0;
          width: auto;
     }

     .nav-link:hover {
          color: var(--brand-yellow);
     }

     .d-lg-block {
          display: block;
     }

     /* Hero Desktop */
     .hero {
          padding: 6rem 0 8rem 0;
          text-align: left;
     }

     .hero-content {
          display: flex;
          align-items: center;
          gap: 4rem;
          justify-content: space-between;
     }

     .hero-text {
          flex: 1;
     }

     .hero h1 {
          font-size: 3.5rem;
     }

     .hero-form-wrapper {
          width: 400px;
          flex-shrink: 0;
     }

     /* Text Alignment */
     .text-lg-start {
          text-align: left;
     }

     /* Footer */
     footer {
          text-align: left;
     }

     footer h5 {
          margin-top: 0;
     }

     /* Utils Desktop */
     .mobile-sticky-bar {
          display: none;
     }

     /* Esconde barra sticky */
     .btn-whats-float {
          bottom: 30px;
          width: 60px;
          height: 60px;
     }
}


/* Estilo Base (Mobile First - Escondido por padrão) */
.submenu {
     display: none;
     /* JS vai alternar para 'block' no mobile */
     list-style: none;
     background-color: #f9f9f9;
     margin-left: 1rem;
     padding-left: 0;
     border-left: 2px solid #eee;
}

.submenu-link {
     display: block;
     padding: 0.8rem 1rem;
     font-size: 0.9rem;
     color: var(--text-muted);
     border-bottom: 1px solid #f0f0f0;
}

.submenu-link:hover {
     color: var(--brand-yellow);
     background-color: #fff;
}

.submenu-divider {
     height: 1px;
     margin: 0.5rem 0;
     overflow: hidden;
     background-color: #e5e5e5;
}

/* Indicador de Seta (CSS Puro) */
.submenu-toggle {
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
}

.submenu-toggle::after {
     content: '';
     display: inline-block;
     width: 0;
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 5px solid #999;
     margin-left: 8px;
     transition: transform 0.3s;
}

/* Estado Ativo (Mobile) */
.has-submenu.open .submenu {
     display: block;
}

.has-submenu.open .submenu-toggle::after {
     transform: rotate(180deg);
}


/* --------------------------------------------------------------------------
   VERSÃO DESKTOP (Hover Effect)
-------------------------------------------------------------------------- */
@media (min-width: 992px) {

     /* Posição Absoluta para o Dropdown */
     .has-submenu {
          position: relative;
     }

     .submenu {
          display: none;
          /* Escondido até o hover */
          position: absolute;
          top: 100%;
          left: 0;
          min-width: 220px;
          background: var(--white);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
          border: 1px solid #eee;
          border-top: 3px solid var(--brand-yellow);
          border-radius: 0 0 8px 8px;
          margin-left: 0;
          padding: 0.5rem 0;
          z-index: 1100;
     }

     /* Mostra submenu ao passar o mouse no item pai (.has-submenu) */
     .has-submenu:hover .submenu {
          display: block;
          animation: fadeUp 0.3s ease;
     }

     .submenu-link {
          padding: 0.6rem 1.5rem;
          border-bottom: none;
     }

     @keyframes fadeUp {
          from {
               opacity: 0;
               transform: translateY(10px);
          }

          to {
               opacity: 1;
               transform: translateY(0);
          }
     }
}

/* --------------------------------------------------------------------------
   8. SISTEMA DE MODAL
-------------------------------------------------------------------------- */

/* Fundo Escuro (Overlay) */
.modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     /* Fundo escuro semi-transparente */
     z-index: 2000;
     /* Acima do Header (1000) */
     display: none;
     /* Escondido por padrão */
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s ease;
     backdrop-filter: blur(2px);
     /* Efeito de desfoque no fundo */
}

/* Onde o modal aparece */
.modal-overlay.active {
     display: flex;
     opacity: 1;
}

/* Caixa do Modal */
.modal-container {
     background: var(--white);
     width: 90%;
     max-width: 500px;
     border-radius: var(--border-radius);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
     overflow: hidden;
     transform: translateY(20px);
     transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-container {
     transform: translateY(0);
}

/* Header do Modal */
.modal-header {
     background-color: var(--brand-dark);
     color: var(--brand-yellow);
     padding: 1.2rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.modal-title {
     margin: 0;
     font-size: 1.2rem;
     font-weight: 800;
     font-family: var(--font-heading);
     color: var(--white);
}

.modal-close {
     background: transparent;
     border: none;
     color: var(--white);
     cursor: pointer;
     display: flex;
     align-items: center;
     padding: 5px;
     border-radius: 50%;
     transition: background 0.3s;
}

.modal-close:hover {
     background: rgba(255, 255, 255, 0.1);
     color: var(--brand-yellow);
}

/* Corpo do Modal */
.modal-body {
     padding: 1.5rem;
     max-height: 80vh;
     overflow-y: auto;
}

/* Layout das Lojas no Modal */
.store-row {
     margin-bottom: 1.5rem;
     border-bottom: 1px solid #eee;
     padding-bottom: 1.5rem;
}

.store-row:last-child {
     margin-bottom: 0;
     border-bottom: none;
     padding-bottom: 0;
}

.store-name {
     font-weight: 700;
     margin-bottom: 1rem;
     color: var(--text-main);
     display: flex;
     align-items: center;
     gap: 0.5rem;
}

.phones-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
}

/* Botões de Telefone */
.btn-phone {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     padding: 0.8rem;
     border-radius: 8px;
     background: #000000;
     color: var(--brand-yellow);
     font-weight: 800;
     font-size: 1rem;
     width: 100%;
     transition: all 0.2s;
}

.btn-phone:hover {
     border-color: var(--brand-yellow);
     background: #999999;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
     color: var(--brand-dark);
}

.btn-phone.whatsapp {
     color: #ffffff;
     background: var(--zap);
     font-weight: 800;
}

.btn-phone.whatsapp:hover {
     background: #25D366;
     color: white;
}

/* Mobile Ajuste */
@media (max-width: 480px) {
     .phones-grid {
          grid-template-columns: 1fr;
          /* Empilha no celular */
     }
}

/* --------------------------------------------------------------------------
   TRUST BAR SECTION (Atualizado para Acessibilidade)
-------------------------------------------------------------------------- */
.trust-bar {
     background-color: var(--white);
     padding: 3rem 0;
     border-bottom: 1px solid #f0f0f0;
}

/* Grid: 2 Colunas no Mobile (Layout base) */
.trust-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 2rem 1rem;
     text-align: center;
}

.trust-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

/* Ícone em Círculo */
.trust-icon {
     width: 80px;
     /* Tamanho fixo do círculo */
     height: 80px;
     background-color: var(--brand-yellow);
     /* Fundo Amarelo */
     border-radius: 50%;
     /* Faz virar círculo */

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

     margin-bottom: 1rem;
     color: var(--brand-dark);
     /* Ícone Preto para contraste alto */

     /* Sombra suave para dar profundidade */
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.trust-icon svg {
     width: 2.5rem;
     /* Ajuste do tamanho do SVG dentro do círculo */
     height: 2.5rem;
     fill: currentColor;
}

/* Tipografia */
.trust-title {
     font-weight: 800;
     font-size: 1rem;
     margin-bottom: 0.3rem;
     color: #000000;
}

.trust-desc {
     color: #333;
     /* Escurecido (antes era muted) para passar no Lighthouse */
     font-size: 0.85rem;
     font-weight: 600;
     /* Aumenta a legibilidade */
}

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

/* --------------------------------------------------------------------------
   9. VITRINE DE PRODUTOS (Completo)
-------------------------------------------------------------------------- */

/* Container do Grid */
.products-grid {
     display: grid;
     grid-template-columns: 1fr;
     /* Mobile: 1 por linha */
     gap: 2rem;
}

/* O Card do Produto */
.product-card {
     background: var(--white);
     border-radius: var(--border-radius);
     padding: 2.5rem 1.5rem;
     text-align: center;

     /* Sombra suave e borda quase invisível para profundidade */
     box-shadow: var(--shadow-sm);
     border: 1px solid rgba(0, 0, 0, 0.05);

     /* Flexbox para alinhar conteúdo verticalmente (botão sempre embaixo) */
     display: flex;
     flex-direction: column;
     align-items: center;
     height: 100%;

     transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito Hover no Card Inteiro */
.product-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* A Imagem do Ícone (Sem fundo, conforme pedido) */
.product-img-icon {
     width: 100px;
     /* Tamanho confortável */
     height: 100px;
     object-fit: contain;
     /* Garante que a imagem não estique */
     margin-bottom: 1.5rem;
     display: block;
     transition: transform 0.3s ease;
}

/* Efeito Zoom na Imagem ao passar mouse no Card */
.product-card:hover .product-img-icon {
     transform: scale(1.1);
}

/* Tipografia */
.product-card h3 {
     font-size: 1.25rem;
     font-weight: 800;
     margin-bottom: 0.8rem;
     color: var(--text-main);
}

.product-card p {
     font-size: 0.95rem;
     color: var(--text-muted);
     margin-bottom: 1.5rem;
     line-height: 1.5;
     flex-grow: 1;
     /* Empurra o botão para o final do card */
}

.btn-outline-dark {
     display: inline-block;
     background: transparent;
     border: 2px solid var(--text-main);
     color: var(--text-main);
     padding: 0.6rem 2rem;
     font-size: 0.85rem;
     border-radius: 50px;
     font-weight: 700;
     text-transform: uppercase;
     text-decoration: none;
     transition: all 0.3s ease;
}

.btn-outline-dark:hover {
     background: var(--brand-dark);
     color: var(--brand-yellow);
     border-color: var(--brand-dark);
}

.btn-outline-limpar {
     display: inline-block;
     background: transparent;
     border: 2px solid var(--darkgray);
     color: var(--darkgray);
     padding: 0.6rem 2rem;
     font-size: 0.85rem;
     border-radius: 50px;
     font-weight: 700;
     text-transform: uppercase;
     text-decoration: none;
     transition: all 0.3s ease;
}

.btn-outline-limpar:hover {
     background: var(--darkgray);
     color: #000000;
     border-color: var(--brand-dark);
}

.btn-outline-limpar {
     text-align: center;
     font-size: 0.85rem;
}

.btn-detalhes {
     background-color: #999999;
     color: #ffffff;
     padding: 0.6rem 1rem;
}

.btn-detalhes:hover {
     background-color: #666666;
}

/* Responsividade */

/* Tablet (>= 768px) */
@media (min-width: 768px) {
     .products-grid {
          grid-template-columns: repeat(2, 1fr);
          /* 2 por linha */
     }
}

/* Desktop (>= 992px) */
@media (min-width: 992px) {
     .products-grid {
          grid-template-columns: repeat(3, 1fr);
          /* 3 por linha */
     }
}

/* --------------------------------------------------------------------------
   10. AVALIAÇÕES / REVIEWS
-------------------------------------------------------------------------- */

.reviews-section {
     background-color: var(--white);
     padding: 4rem 0;
     border-bottom: 1px solid #f0f0f0;
}

/* Grid Responsivo (Mesma lógica do Trust Bar) */
.reviews-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 2rem;
}

/* O Card do Review */
.review-card {
     background: var(--brand-gray);
     /* Fundo cinza bem clarinho para destacar no branco */
     padding: 2rem;
     border-radius: var(--border-radius);
     position: relative;
     /* Para posicionar as aspas */
     overflow: hidden;
     border: 1px solid rgba(0, 0, 0, 0.03);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Decoração: Aspas gigantes no fundo */
.review-card::before {
     content: '"';
     position: absolute;
     top: -10px;
     right: 20px;
     font-size: 8rem;
     color: rgba(0, 0, 0, 0.03);
     /* Muito sutil */
     font-family: serif;
     line-height: 1;
     pointer-events: none;
}

/* Cabeçalho do Card (Avatar + Nome) */
.card-header-review {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 1.5rem;
     position: relative;
     z-index: 1;
}

/* Avatar (Círculo Preto com Letra Amarela) */
.reviewer-avatar {
     width: 50px;
     height: 50px;
     background-color: var(--brand-dark);
     color: var(--brand-yellow);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     font-size: 1.2rem;
     flex-shrink: 0;
}

/* Info do Usuário */
.reviewer-info {
     display: flex;
     flex-direction: column;
}

.reviewer-info strong {
     color: var(--text-main);
     font-size: 1rem;
}

/* Estrelas */
.stars {
     color: #FFD700;
     /* Dourado */
     font-size: 0.9rem;
     letter-spacing: 2px;
}

/* Texto do Review */
.review-text {
     color: var(--text-muted);
     font-style: italic;
     line-height: 1.6;
     font-size: 0.95rem;
     position: relative;
     z-index: 1;
}

/* Responsividade */
@media (min-width: 768px) {
     .reviews-grid {
          grid-template-columns: repeat(2, 1fr);
          /* 2 por linha no Tablet */
     }
}

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

.reviewer-avatar-img {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid var(--brand-yellow);
     /* Borda amarela para destacar */
}

.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);
}

/* --------------------------------------------------------------------------
   12. LISTA DE BAIRROS (SEO & COBERTURA)
-------------------------------------------------------------------------- */

.coverage-wrapper {
     background-color: #fcfcfc;
     /* Um fundo sutilmente diferente do branco puro */
     padding: 2rem;
     border-radius: var(--border-radius);
     border: 1px solid #eee;
     margin-top: 1.5rem;
}

.coverage-list {
     list-style: none;
     padding: 0;
     margin: 0;

     /* O SEGREDO: Colunas automáticas tipo jornal */
     column-count: 2;
     /* Mobile starts with 2 cols */
     column-gap: 2rem;
}

.coverage-list li {
     font-size: 0.85rem;
     /* Fonte pequena e discreta */
     color: #666;
     margin-bottom: 0.5rem;
     break-inside: avoid;
     /* Não quebra o nome do bairro no meio */
     display: flex;
     align-items: center;
     gap: 6px;
     transition: color 0.2s;
     cursor: default;
}

.coverage-list li:hover {
     color: var(--brand-dark);
     /* Escurece ao passar o mouse */
}

/* O "Check" decorativo */
.check-icon {
     color: var(--brand-yellow);
     font-weight: bold;
     font-size: 0.8rem;
     display: inline-block;
}

/* RESPONSIVIDADE DAS COLUNAS */

/* Tablet pequeno */
@media (min-width: 576px) {
     .coverage-list {
          column-count: 3;
     }
}

/* Tablet / Laptop */
@media (min-width: 768px) {
     .coverage-list {
          column-count: 4;
     }
}

/* Desktop Grande */
@media (min-width: 1200px) {
     .coverage-list {
          column-count: 5;
          /* 5 Colunas para aproveitar bem a largura */
     }
}

/* =========================================
   FOOTER (Atualizado)
   ========================================= */

.main-footer {
     background-color: #000000;
     /* Preto Puro */
     color: #ffffff;
     padding: 4rem 0 2rem;
     position: relative;
     padding-bottom: 5rem;
     /* Espaço para barra mobile */
}

/* Grid */
.footer-content-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 3rem;
     margin-bottom: 3rem;
     text-align: center;
}

/* Tipografia */
.footer-title,
.footer-hours h4 {
     font-size: 1.3rem;
     font-weight: 800;
     color: var(--brand-yellow);
     margin-bottom: 1rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}

.footer-address p {
     margin-bottom: 0.3rem;
     font-size: 1rem;
     color: #e0e0e0;
}

/* Logo no Rodapé */
.footer-logo-wrapper {
     margin-top: 2rem;
     padding-top: 2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.15);
     display: flex;
     justify-content: center;
}

.footer-logo {
     max-width: 180px;
     /* Tamanho controlado */
     height: auto;
     filter: drop-shadow(0px 0px 9px rgba(255, 255, 255, 0.6));
}

.footer-logo:hover {
     opacity: 1;
}

/* Horários */
.footer-hours ul {
     list-style: none;
     padding: 0;
}

.footer-hours ul li {
     font-size: 0.95rem;
     color: #ccc;
     margin-bottom: 1.2rem;
     line-height: 0.72;
}

.footer-hours ul li strong {
     color: #fff;
     display: block;
}

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

.phone-link {
     font-size: 2rem;
     font-weight: 800;
     color: #fff;
     text-decoration: none;
     display: block;
     line-height: 1;
}

.phone-link:hover {
     color: var(--brand-yellow);
}

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

.footer-copy a {
     color: #999;
     text-decoration: none;
}

.footer-copy a:hover {
     color: var(--brand-yellow);
}

/* --- BLOCOS DE ENDEREÇO NO FOOTER --- */

.footer-address-block {
    margin-bottom: 1.5rem; /* Espaço entre os blocos */
}

/* Remove margem do último para não empurrar o rodapé */
.footer-address-block:last-child {
    margin-bottom: 0;
}

.store-title {
    color: var(--brand-yellow); /* Destaque no nome da loja */
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Estilo dos parágrafos de endereço dentro do bloco */
.footer-address-block p {
    margin: 0;
    line-height: 1.5;
    font-size: 0.9rem;
    color: #ccc; /* Cor cinza claro para contraste no fundo escuro */
}


/* =========================================
   BARRA MOBILE (Fixo Apenas Mobile)
   ========================================= */
.mobile-bar {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     display: flex;
     z-index: 1000;
     box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.bar-btn {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1.2rem 0;
     font-weight: 800;
     font-size: 1rem;
     color: #fff;
     text-decoration: none;
     text-transform: uppercase;
}

.btn-call {
     background-color: var(--brand-dark);
}

/* =========================================
   MEDIA QUERIES (Desktop)
   ========================================= */
@media (min-width: 992px) {
     .main-footer {
          padding-bottom: 2rem;
          /* Remove o espaço extra do mobile */
     }

     .footer-content-grid {
          grid-template-columns: repeat(3, 1fr);
          gap: 2rem;
          text-align: left;
          align-items: start;
     }

     .footer-logo-wrapper {
          border-top: none;
          /* Remove a linha divisória no desktop */
          margin-top: 1.5rem;
          padding-top: 0;
          display: flex;
          justify-content: start;
     }

     .footer-logo {
          max-width: 12rem;
          /* Um pouco menor no desktop para equilibrar */
          margin-left: 0;
     }

     /* Linha vertical entre colunas */
     .footer-col:not(:last-child) {
          border-right: 1px solid rgba(255, 255, 255, 0.1);
          padding-right: 2rem;
     }

     /* ESCONDE A BARRA MOBILE NO DESKTOP */
     .mobile-bar {
          display: none !important;
     }
}

/* =========================================
   13. ESTILOS GLOBAIS - PÁGINAS INTERNAS
   ========================================= */

/* Espaçamento Padrão */
.section-content {
     padding: 5rem 0;
     /* Mais respiro vertical */
}

.border-top {
     border-top: 1px solid #eee;
}

/* 1. HERO INTERNO (Padronizado) */
.page-hero {
     position: relative;
     width: 100%;

     /* Altura Mobile */
     height: 350px;

     /* CORREÇÃO: Usamos propriedades separadas para evitar conflitos */
     background-color: #111111;
     /* Cor de fundo de segurança */

     /* Chamamos a variável definida no HTML */
     background-image: var(--bg-mob);

     /* Configurações obrigatórias para a imagem aparecer */
     background-position: center center;
     background-size: cover;
     /* Garante que preencha tudo */
     background-repeat: no-repeat;

     margin-top: 0;
     display: flex;
     align-items: center;
     z-index: 1;
}

@media (min-width: 992px) {
     .page-hero {
          height: 630px;
          background-image: var(--bg-desk);
     }
}

.hero-overlay {
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     /* Centraliza verticalmente todo o bloco de conteúdo */
}

.hero-content {
     max-width: 800px;
     color: #fff;
     display: flex;
     flex-direction: column;
     /* Garante que fiquem um abaixo do outro */
     justify-content: center;
     align-items: flex-start;
     /* Alinha tudo à esquerda */
}

.hero-tag {
     display: inline-block;
     background-color: var(--brand-yellow);
     color: var(--brand-dark);
     font-size: 0.75rem;
     font-weight: 800;
     text-transform: uppercase;
     padding: 0.4rem 1rem;
     border-radius: 4px;
     /* Mais quadrado, mais técnico */
     margin-bottom: 1.5rem;
     letter-spacing: 1px;
}

.hero-title {
     font-size: 2.5rem;
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: 1rem;
     color: #fff;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
     font-size: 1.1rem;
     color: #f0f0f0;
     font-weight: 400;
     line-height: 1.6;
     max-width: 600px;
     margin-top: 0;
     /* Garante que fique logo abaixo */
     text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

/* 2. HEADER DE SEÇÃO */
.section-header {
     margin-bottom: 4rem;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
}

.section-title {
     font-size: 2.2rem;
     font-weight: 800;
     color: var(--brand-dark);
     margin-bottom: 1rem;
}

.section-desc {
     font-size: 1.1rem;
     color: var(--text-muted);
}

/* 3. GRID DE ESPECIFICAÇÕES (CARDS) */
.specs-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     /* Responsivo Automático */
     gap: 2rem;
}

.spec-card {
     background: #fff;
     border: 1px solid rgba(0, 0, 0, 0.08);
     border-radius: var(--border-radius);
     padding: 2.5rem 2rem;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
}

.spec-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
     border-color: var(--brand-yellow);
}

/* O "Badge" Amarelo (Substitui o Emoji) */
.spec-header {
     margin-bottom: 1.5rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
}

.spec-badge {
     width: 120px;
     height: 120px;
     background-color: var(--brand-yellow);
     color: var(--brand-dark);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     font-size: 1.1rem;
     margin-bottom: 1.5rem;
     box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

.spec-card h3 {
     font-size: 1.25rem;
     font-weight: 800;
     color: var(--brand-dark);
     margin-bottom: 0.5rem;
}

.spec-context {
     font-size: 0.9rem;
     color: #888;
     margin-bottom: 1.5rem;
     font-style: italic;
}

.spec-list {
     list-style: none;
     padding: 0;
     margin: 0;
     border-top: 1px solid #f0f0f0;
     padding-top: 1rem;
}

.spec-list li {
     font-size: 0.95rem;
     color: var(--text-main);
     margin-bottom: 0.6rem;
     padding-left: 1.2rem;
     position: relative;
}

/* Bullet Point Personalizado */
.spec-list li::before {
     content: '';
     width: 6px;
     height: 6px;
     background-color: var(--brand-yellow);
     border-radius: 50%;
     position: absolute;
     left: 0;
     top: 8px;
}

/* 4. BLOCOS DE INFORMAÇÃO TÉCNICA */
.info-box {
     background-color: #f8f9fa;
     border-left: 4px solid var(--brand-dark);
     padding: 1.5rem;
     border-radius: 0 8px 8px 0;
     margin-top: 2rem;
}

.info-box h5 {
     font-weight: 800;
     color: var(--brand-dark);
     margin-bottom: 0.5rem;
}

.image-wrapper-styled img {
     border-radius: var(--border-radius);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* 5. CTA FINAL INTERNO */
.section-cta-internal {
     background-color: var(--brand-dark);
     padding: 5rem 0;
     color: #fff;
}

.cta-title {
     font-size: 2.5rem;
     font-weight: 800;
     margin-bottom: 1rem;
     color: #fff;
}

.cta-subtitle {
     font-size: 1.2rem;
     color: rgba(255, 255, 255, 0.8);
     margin-bottom: 2.5rem;
}

/* Ajustes Mobile */
@media (max-width: 768px) {
     .page-hero {
          height: 330px;
     }

     .hero-title {
          font-size: 2rem;
     }

     .hero-subtitle {
          font-size: 1rem;
     }

     .specs-grid {
          grid-template-columns: 1fr;
          /* 1 Coluna no mobile */
     }

     .section-content {
          padding: 3.5rem 0;
     }
}

/* =========================================
   14. INTRODUÇÃO TÉCNICA (CSS PURO / FLEXBOX)
   ========================================= */

.section-intro {
     padding: 5rem 0;
     background-color: #fff;
     width: 100%;
}

/* O Container Flex que substitui o .row do Bootstrap */
.intro-wrapper {
     display: flex;
     align-items: center;
     /* Centraliza verticalmente texto e imagem */
     justify-content: space-between;
     gap: 4rem;
     /* Espaço generoso entre texto e imagem */
     width: 100%;
}

/* --- COLUNA DE TEXTO --- */
.intro-text {
     flex: 1;
     /* Ocupa 50% do espaço disponível */
     padding-right: 1rem;
}

.intro-title {
     font-family: 'Montserrat', sans-serif;
     font-size: 2rem;
     font-weight: 800;
     color: var(--brand-dark);
     /* Preto/Cinza escuro da marca */
     margin-bottom: 1.5rem;
     line-height: 1.2;
     text-transform: uppercase;
     text-align: left;
     /* Garante alinhamento à esquerda */
}

.intro-paragraph {
     font-size: 1.1rem;
     line-height: 1.8;
     color: var(--text-muted);
     /* Cinza suave */
     margin-bottom: 1.5rem;
     text-align: left;
}

.intro-paragraph strong {
     color: var(--brand-dark);
     font-weight: 700;
}

/* --- COLUNA DA IMAGEM --- */
.intro-visual {
     flex: 1;
     /* Ocupa 50% do espaço (Imagem Maior) */
     display: flex;
     justify-content: center;
     align-items: center;
}

.intro-img {
     width: 100%;
     /* Força a imagem a preencher a coluna */
     height: auto;
     border-radius: var(--border-radius);
     /* Borda arredondada padrão do site */
     box-shadow: var(--shadow-sm);
     /* Sombra suave */
     object-fit: cover;
}

/* =========================================
   RESPONSIVIDADE (MOBILE)
   ========================================= */
@media (max-width: 992px) {
     .intro-wrapper {
          flex-direction: column;
          /* Empilha um em cima do outro */
          gap: 3rem;
     }

     .intro-text {
          text-align: center;
          /* Centraliza texto no mobile */
          padding-right: 0;
     }

     .intro-title {
          text-align: center;
          font-size: 1.8rem;
     }

     .intro-paragraph {
          text-align: center;
          /* Leitura melhor no mobile centralizada ou justificada */
     }

     .intro-visual {
          width: 100%;
          max-width: 500px;
          /* Limita tamanho no mobile para não estourar */
     }
}

/* =========================================
   16. SEÇÃO TÉCNICA & FAQ (Expert Panel)
   ========================================= */

.section-tech-details {
     padding: 5rem 0;
     background-color: #fff;
     border-top: 1px solid #f0f0f0;
}

.tech-header {
     margin-bottom: 4rem;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
}

.tech-title {
     font-size: 2rem;
     font-weight: 800;
     color: var(--brand-dark);
     margin-bottom: 1rem;
}

.tech-subtitle {
     font-size: 1.1rem;
     color: var(--text-muted);
}

/* --- GRID DE PILARES (CARDS) --- */
.tech-pillars-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin-bottom: 5rem;
}

.tech-pillar-card {
     background: #f9f9f9;
     padding: 2.5rem 2rem;
     border-radius: var(--border-radius);
     text-align: left;
     transition: transform 0.3s ease;
     border: 1px solid transparent;
}

.tech-pillar-card:hover {
     background: #fff;
     box-shadow: var(--shadow-sm);
     transform: translateY(-5px);
     border-color: #eee;
}

.pillar-icon {
     width: 60px;
     height: 60px;
     background-color: var(--brand-dark);
     color: var(--brand-yellow);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.5rem;
}

.tech-pillar-card h3 {
     font-size: 1.25rem;
     font-weight: 800;
     color: var(--brand-dark);
     margin-bottom: 1rem;
}

.tech-pillar-card p {
     font-size: 0.95rem;
     color: #666;
     line-height: 1.6;
}

/* --- FAQ (ACCORDION STYLE) --- */
.tech-faq-wrapper {
     max-width: 800px;
     margin: 0 auto;
     background: #fff;
}

.faq-section-title {
     text-align: center;
     font-size: 1.5rem;
     font-weight: 800;
     margin-bottom: 2rem;
     color: var(--brand-dark);
}

.faq-item {
     border-bottom: 1px solid #636363;
     margin-bottom: 1rem;
}

.faq-item:last-child {
     border-bottom: none;
}

/* O elemento clicável */
.faq-question {
     list-style: none;
     /* Remove seta padrão feia */
     cursor: pointer;
     font-weight: 700;
     font-size: 1.1rem;
     color: var(--text-main);
     padding: 1.5rem 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: color 0.3s;
}

.faq-question::-webkit-details-marker {
     display: none;
     /* Remove seta no Chrome/Safari */
}

.faq-question:hover {
     color: var(--brand-yellow);
}

/* Criamos nossa própria seta (+) com CSS */
.faq-question::after {
     content: '+';
     font-size: 1.5rem;
     font-weight: 300;
     color: var(--brand-dark);
     transition: transform 0.3s;
}

/* Quando aberto */
.faq-item[open] .faq-question {
     color: var(--brand-dark);
}

.faq-item[open] .faq-question::after {
     transform: rotate(45deg);
     /* Vira um X */
}

/* A resposta */
.faq-answer {
     padding-bottom: 1.5rem;
     color: var(--text-muted);
     font-size: 1rem;
     line-height: 1.6;
     animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
     from {
          opacity: 0;
          transform: translateY(-10px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
     .section-tech-details {
          padding: 3rem 0;
     }

     .tech-pillars-grid {
          grid-template-columns: 1fr;
          /* Um card por linha */
          gap: 1.5rem;
     }

     .tech-pillar-card {
          text-align: center;
          padding: 2rem;
     }

     .pillar-icon {
          margin: 0 auto 1.5rem auto;
          /* Centraliza ícone no mobile */
     }
}

/* =========================================
   MENU NAVIGATION (REMASTERED & FINAL)
   ========================================= */

/* Seta do Menu */
.arrow-icon {
     display: inline-block;
     width: 0;
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 5px solid #999;
     margin-left: 8px;
     vertical-align: middle;
     transition: transform 0.3s ease;
}

/* -----------------------------------------
   1. MOBILE MENU (iOS STYLE)
   Max-width: 991px
----------------------------------------- */
@media (max-width: 991px) {

     .nav-menu {
          background-color: #F2F2F7;
          /* Cinza iOS */
          height: 100vh;
          overflow-y: auto;
     }

     /* Estilo dos Links Principais Mobile */
     .nav-link {
          display: block;
          padding: 1rem 1.5rem;
          font-size: 1.1rem;
          font-weight: 600;
          color: #000;
          border-bottom: 1px solid #e5e5e5;
          background: #fff;
     }

     /* O CONTÊINER DO SUBMENU (Wrapper) */
     .submenu-wrapper {
          display: none;
          /* Escondido por padrão */
          background-color: #fff;
          margin: 10px 16px 20px 16px;
          /* Margem Inset iOS */
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
          border: 1px solid rgba(0, 0, 0, 0.05);
     }

     .submenu-list {
          list-style: none;
          padding: 0;
          margin: 0;
     }

     /* Links do Submenu */
     .submenu-link {
          display: block;
          padding: 12px 16px;
          font-size: 1rem;
          color: #333;
          text-decoration: none;
          position: relative;
          background: #fff;
     }

     /* Linha divisória fina (Exceto no último item) */
     .submenu-link::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 16px;
          width: 100%;
          height: 1px;
          background-color: #E5E5EA;
     }

     .submenu-list li:last-child .submenu-link::after {
          display: none;
     }

     /* Hover/Active no Mobile */
     .submenu-link:active {
          background-color: #E5E5EA;
     }

     /* LÓGICA DE ABERTURA (JS Class) */
     .has-submenu.open .submenu-wrapper {
          display: block;
          animation: slideInIOS 0.3s cubic-bezier(0.25, 1, 0.5, 1);
     }

     .has-submenu.open .arrow-icon {
          transform: rotate(180deg);
     }

     @keyframes slideInIOS {
          from {
               opacity: 0;
               transform: translateY(-10px);
          }

          to {
               opacity: 1;
               transform: translateY(0);
          }
     }
}

/* -----------------------------------------
   2. DESKTOP MENU (MODERN DARK - TECH STYLE)
   Min-width: 992px
----------------------------------------- */
@media (min-width: 992px) {

     /* Reset de layout */
     .nav-menu {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 2rem;
          background: transparent;
          height: auto;
          overflow: visible;
     }

     .static-desktop {
          position: static !important;
     }

     /* Links do Menu Principal */
     .nav-link {
          padding: 0;
          background: transparent;
          border: none;
          font-size: 0.95rem;
          color: var(--text-muted);
          position: relative;
          height: 70px;
          display: flex;
          align-items: center;
          font-weight: 600;
          letter-spacing: 0.5px;
     }

     /* Hover no Link Principal */
     .nav-link:hover,
     .nav-link:hover .arrow-icon {
          color: var(--brand-dark);
          border-top-color: var(--brand-dark);
     }

     /* --- O PAINEL (WRAPPER) --- */
     .submenu-wrapper {
          position: absolute;
          top: 84%;
          left: 0;
          width: 100%;
          background-color: #1a1a1a;

          /* Linha fina amarela no topo para conectar com a marca */
          border-top: 2px solid var(--brand-yellow);

          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);

          opacity: 0;
          visibility: hidden;
          transform: translateY(-10px);
          transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
          /* Animação suave */
          z-index: 990;

          padding: 3.5rem 0;
          /* Mais respiro vertical */
     }

     /* O GRID */
     .submenu-list {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1rem 6rem;
          padding: 0;
          margin: 0;
          list-style: none;
          max-width: 900px;
     }

     /* --- ITEM DO MENU (CLEAN LIST) --- */
     .submenu-link {
          display: block;

          /* Sem fundo de botão */
          background: transparent;

          /* Texto Branco Limpo */
          color: rgba(255, 255, 255, 0.85);

          font-family: var(--font-heading);
          font-size: 1.15rem;
          font-weight: 600;
          text-decoration: none;

          /* Espaçamento */
          padding: 1rem 1.5rem;

          /* Borda lateral invisível (preparada para o hover) */
          border-left: 3px solid transparent;

          transition: all 0.3s ease;
     }

     /* HOVER SOFISTICADO (Slide & Glow) */
     .submenu-link:hover {
          /* Texto Amarelo Aceso */
          color: var(--brand-yellow);

          /* Fundo com brilho muito sutil (Gradiente) */
          background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);

          /* Barra lateral amarela */
          border-left-color: var(--brand-yellow);

          /* Leve deslocamento para a direita */
          padding-left: 2rem;
     }

     /* Removemos linhas do mobile */
     .submenu-link::after {
          display: none;
     }

     /* --- LÓGICA DE ABERTURA --- */
     .has-submenu:hover .submenu-wrapper {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
     }

     .has-submenu:hover .arrow-icon {
          transform: rotate(180deg);
     }
}

/* NOVO */

@media (min-width: 992px) {

     .mega-row {
          display: flex;
          align-items: stretch;
          justify-content: space-between;
          width: 100%;
     }

     .submenu-list {
          flex: 0 0 65%;
          max-width: 65%;
          border-right: 1px solid rgba(255, 255, 255, 0.05);
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1rem 4rem;
          align-content: center;
          padding: 0;
          margin: 0;
          list-style: none;
          height: 100%;
     }

     .mega-visual-col {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100%;
          position: relative;
     }

     .circle-viewer {
          width: 280px;
          /* Tamanho do círculo */
          height: 280px;
          background-color: #ffffff;
          /* Fundo Branco solicitado */
          border-radius: 50%;
          /* Faz virar círculo */
          overflow: hidden;
          /* Corta a imagem que passar */

          /* Estilo Tech/Moderno para combinar com seu tema */
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
          border: 4px solid rgba(255, 255, 255, 0.1);

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

          opacity: 0;
          /* Começa invisível até o hover */
          transform: scale(0.8);
          transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
     }

     /* Estado ativo do círculo (via JS) */
     .circle-viewer.is-active {
          opacity: 1;
          transform: scale(1);
     }

     /* A Imagem dentro do círculo */
     .circle-img {
          width: 72%;
          height: 72%;
          object-fit: cover;
          display: block;
     }

     .circle-img-full {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          display: block;
     }

     /* Estilos do novo texto */
     .visual-caption {
          margin-top: 2rem;
          min-height: 120px;
          width: 320px;
          display: flex;
          flex-direction: column;
          opacity: 0;
          transform: translateY(10px);
          transition: all 0.4s ease;
          max-width: 300px;
          text-align: center;
     }

     /* Título (Copia o estilo do menu, mas maior) */
     .visual-caption h4 {
          font-family: var(--font-heading);
          font-size: 1.5rem;
          font-weight: 700;
          color: var(--white);
          margin-bottom: 0.5rem;
          line-height: 1.2;
     }

     /* Descrição */
     .visual-caption p {
          font-family: var(--font-body);
          font-size: 0.95rem;
          color: rgba(255, 255, 255, 0.7);
          margin: 0;
          line-height: 1.5;
     }

     /* Quando ativo (controlado pelo JS) */
     .visual-caption.is-active {
          opacity: 1;
          transform: translateY(0);
     }
}

@media (max-width: 992px) {
     .mega-visual-col {
          display: none !important;
     }
}

#menuTitleTarget {
     color: var(--brand-yellow);
}

/* =========================================
   PÁGINA DE LOJAS (PREMIUM LAYOUT)
   ========================================= */

/* Cabeçalho Centralizado Clean */
.page-header-clean {
     padding: 4rem 0 3rem 0;
     text-align: center;
     background-color: var(--brand-gray);
}

.page-header-clean-dark {
     padding: 4rem 0 3rem 0;
     text-align: center;
     background-color: var(--brand-dark);
     color: #ffffff;
}

.header-tag {
     display: inline-block;
     font-size: 0.8rem;
     font-weight: 800;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--brand-yellow);
     /* Amarelo da marca */
     margin-bottom: 0.5rem;
}

.header-title {
     font-size: 2.8rem;
     font-weight: 800;
     color: var(--brand-dark);
     margin-bottom: 1rem;
     line-height: 1.1;
}

.header-title-dark {
     font-size: 2.8rem;
     font-weight: 800;
     color: var(--brand-yellow);
     margin-bottom: 1rem;
     line-height: 1.1;
}

.header-desc {
     font-size: 1.15rem;
     color: var(--text-muted);
     max-width: 600px;
     margin: 0 auto;
}

.header-desc-dark {
     font-size: 1.15rem;
     color: #ffffff;
     max-width: 600px;
     margin: 0 auto;
}

/* O CARD PREMIUM */
.store-card-premium {
     background: #fff;
     border-radius: 16px;
     /* Borda mais arredondada */
     overflow: hidden;
     /* Sombra difusa premium */
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
     margin-bottom: 3rem;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border: 1px solid rgba(0, 0, 0, 0.02);
}

.store-card-premium:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* Grid Interno do Card */
.store-grid-premium {
     display: grid;
     grid-template-columns: 1fr;
}

/* -- ÁREA DE CONTEÚDO (ESQUERDA) -- */
.store-content {
     padding: 3rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
}

/* Título e Badge */
.store-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 1.5rem;
     border-bottom: 1px solid #f0f0f0;
     padding-bottom: 1rem;
}

.store-head h2 {
     font-size: 1.8rem;
     font-weight: 800;
     color: var(--brand-dark);
     margin: 0;
}

.badge-type {
     background: #f0f0f0;
     color: #666;
     font-size: 0.75rem;
     font-weight: 700;
     padding: 0.3rem 0.8rem;
     border-radius: 50px;
     text-transform: uppercase;
}

/* Endereço */
.store-addr p {
     font-size: 1.05rem;
     color: #444;
     line-height: 1.6;
     margin-bottom: 0;
}

.store-addr strong {
     color: var(--brand-dark);
}

/* Horários (Caixa de Destaque) */
.store-schedule {
     margin: 1.5rem 0;
     background: #fcfcfc;
     border-left: 4px solid var(--brand-yellow);
     padding: 1rem 1.5rem;
     border-radius: 0 8px 8px 0;
}

.store-schedule h5 {
     font-size: 0.9rem;
     font-weight: 800;
     text-transform: uppercase;
     color: #999;
     margin-bottom: 0.5rem;
}

.store-schedule ul {
     padding: 0;
     margin: 0;
     list-style: none;
}

.store-schedule li {
     font-size: 0.95rem;
     color: #333;
     display: flex;
     justify-content: space-between;
     margin-bottom: 0.3rem;
     max-width: 250px;
     /* Limita largura da lista */
}

.store-schedule li span {
     font-weight: 600;
     color: var(--brand-dark);
}

/* Botões de Ação */
.store-actions {
     display: flex;
     gap: 1rem;
     margin-bottom: 2rem;
     flex-wrap: wrap;
}

.btn-sm-full {
     flex: 1;
     /* Botões ocupam espaço igual */
     min-width: 140px;
}

/* Rotas (Apps) */
.store-routing {
     display: flex;
     align-items: center;
     gap: 1rem;
     padding-top: 1.5rem;
     border-top: 1px solid #f0f0f0;
}

.store-routing span {
     font-size: 0.85rem;
     font-weight: 700;
     color: #999;
     text-transform: uppercase;
}

.app-buttons {
     display: flex;
     gap: 0.8rem;
}

.app-link {
     font-size: 0.85rem;
     font-weight: 700;
     text-decoration: none;
     padding: 0.4rem 1rem;
     border-radius: 6px;
     transition: opacity 0.2s;
}

.app-link:hover {
     opacity: 0.8;
}

.app-link.google {
     background-color: #4285F4;
     color: #fff;
}

.app-link.waze {
     background-color: #33CCFF;
     color: #fff;
}

/* -- ÁREA DO MAPA (DIREITA) -- */
.store-map-frame {
     width: 100%;
     min-height: 300px;
     /* Altura mínima no mobile */
     background-color: #eee;
}

.label-funcionamento {
     color: #000000 !important;
}

.texto-rota {
     color: #111111 !important;
}

/* RESPONSIVIDADE DESKTOP */
@media (min-width: 992px) {
     .store-grid-premium {
          /* Divide: 45% Info | 55% Mapa */
          grid-template-columns: 45% 55%;
     }

     .store-map-frame {
          min-height: 100%;
          /* Ocupa altura total do card */
          border-left: 1px solid #f0f0f0;
     }

     .header-title {
          font-size: 3.5rem;
     }
}

/* =========================================
   PÁGINA INDIVIDUAL DA LOJA (SINGLE STORE)
   ========================================= */

/* Grid Principal: Fachada + Informações */
.single-store-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 3rem;
     margin-bottom: 4rem;
}

/* Área da Fachada (Imagem Estática) */
.store-featured-img {
     position: relative;
     width: 100%;
     height: auto;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.store-featured-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Garante que a imagem preencha o quadro sem distorcer */
     display: block;
     /* Sem transition/transform */
}

/* Área de Detalhes */
.detail-label {
     font-size: 1rem;
     color: #111111;
     font-weight: 800;
     letter-spacing: 1px;
     margin-bottom: 1rem;
     text-transform: uppercase;
     border-bottom: 1px solid #eee;
     padding-bottom: 0.5rem;
}

.detail-group {
     margin-bottom: 2.5rem;
}

/* Endereço Grande */
.store-big-address {
     display: flex;
     gap: 1rem;
     align-items: flex-start;
     font-style: normal;
}

.store-big-address .icon {
     font-size: 2rem;
     color: var(--brand-dark);
}

.store-big-address p {
     font-size: 1.2rem;
     color: var(--text-main);
     font-weight: 600;
     margin-bottom: 0.2rem;
     line-height: 1.4;
}

.store-big-address small {
     display: block;
     color: var(--text-muted);
     font-size: 0.95rem;
     margin-top: 0.5rem;
}

/* Horários Estilizados */
.store-big-schedule {
     list-style: none;
     padding: 0;
}

.store-big-schedule li {
     display: flex;
     justify-content: space-between;
     padding: 0.8rem 0;
     border-bottom: 1px dashed #eee;
     font-size: 1.05rem;
}

.store-big-schedule .day {
     color: var(--text-muted);
     font-weight: 600;
}

.store-big-schedule .time {
     color: var(--brand-dark);
     font-weight: 800;
}

.store-big-schedule .closed .status {
     color: #d9534f;
     font-weight: 700;
}

/* Botões CTA Gigantes */
.store-cta-box {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     background: #fcfcfc;
     padding: 2rem;
     border-radius: 12px;
     border: 1px solid #eee;
}

.btn-lg-full {
     width: 100%;
     padding: 1.2rem;
     font-size: 1.1rem;
     display: flex;
     align-items: center;
     justify-content: center;
}

/* Seção do Mapa Expandido */
.single-store-map-section {
     background: #fff;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     border: 1px solid rgba(0, 0, 0, 0.05);
}

.map-header {
     padding: 1.5rem 2rem;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     border-bottom: 1px solid #f0f0f0;
     align-items: center;
}

.map-header h3 {
     margin: 0;
     font-size: 1.4rem;
     color: var(--brand-dark);
}

.big-map-frame {
     width: 100%;
     height: 450px;
     background: #eee;
}

/* RESPONSIVIDADE (DESKTOP) */
@media (min-width: 992px) {
     .single-store-grid {
          grid-template-columns: 1fr 1fr;
          gap: 4rem;
          align-items: center;
     }

     .store-featured-img {
          height: auto;
     }

     .map-header {
          flex-direction: row;
          justify-content: space-between;
     }
}

/* =========================================
   CATÁLOGO DE PRODUTOS (PREMIUM & COMPACT)
   ========================================= */

/* --- BARRA DE FILTROS (Compacta) --- */
.filter-bar-section {
     background: var(--brand-dark);
     padding: 0.8rem 0;
     /* Mais fina */
     border-bottom: 1px solid #eee;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
     position: sticky;
     top: 92px;
     z-index: 900;
}

.filter-form {
     display: flex;
     gap: 1rem;
     align-items: flex-end;
     flex-wrap: wrap;
}

.filter-group {
     flex: 1;
     /* Ocupa espaço disponível */
     min-width: 160px;
     /* Menor largura mínima */
     max-width: 300px;
}

.filter-group label {
     display: block;
     font-size: 0.7rem;
     /* Label delicada */
     font-weight: 700;
     color: #999;
     margin-bottom: 0.2rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}

/* Estilo do Select mais delicado */
.filter-group .form-select {
     height: 30px;
     padding: 0.3rem 2rem 0.3rem 0.8rem;
     font-size: 0.9rem;
     border-radius: 6px;
     border: 1px solid #ddd;
     color: var(--text-main);
     background-position: right 0.5rem center;
     /* Ajuste da seta */
}

.filter-group .form-select:focus {
     border-color: var(--brand-yellow);
     box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
}

.filter-actions {
     display: flex;
     gap: 0.5rem;
}

/* Botão de Filtro Compacto */
.btn-filter {
     height: 30px;
     display: flex;
     align-items: center;
     gap: 0.4rem;
     padding: 0 1.2rem;
     font-size: 0.85rem;
     font-weight: 700;
     text-transform: uppercase;
     border-radius: 6px;
}

/* Ícone dentro do botão */
.btn-filter .material-symbols-outlined {
     font-size: 0.9rem;
}

/* --- GRID DE PRODUTOS --- */
.catalog-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
     gap: 2rem;
     margin-bottom: 3rem;
}

/* Card Premium */
.product-card-premium {
     background: #fff;
     border-radius: 12px;
     border: 1px solid #eee;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     display: flex;
     flex-direction: column;
     overflow: hidden;
}

.product-card-premium:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
     border-color: var(--brand-yellow);
}

.card-img-wrapper {
     height: 200px;
     /* Levemente menor para equilibrar */
     padding: 1.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fff;
     border-bottom: 1px solid #f9f9f9;
}

.card-img-wrapper img {
     max-height: 100%;
     max-width: 100%;
     object-fit: contain;
     transition: transform 0.3s;
}

.product-card-premium:hover .card-img-wrapper img {
     transform: scale(1.05);
}

.card-body-premium {
     padding: 1.2rem 1.5rem 1.5rem 1.5rem;
     flex: 1;
     display: flex;
     flex-direction: column;
}

/* Título Centralizado */
.product-title {
     font-size: 1rem;
     font-weight: 800;
     color: var(--brand-dark);
     margin-bottom: 0.5rem;
     line-height: 1.3;
     text-align: center;
}

/* Tags de Specs */
.product-specs {
     display: flex;
     gap: 0.4rem;
     flex-wrap: wrap;
     justify-content: center;
     margin-bottom: 1.2rem;
}

.spec-tag {
     font-size: 0.7rem;
     background: #f4f4f4;
     color: #666;
     padding: 0.2rem 0.5rem;
     border-radius: 4px;
     font-weight: 600;
}

.card-actions {
     margin-top: auto;
     display: flex;
     flex-direction: column;
     gap: 0.6rem;
}

/* Botões do Card */
/* .btn-zap {
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 0.9rem;
} */

.icon-svg-sm {
     width: 18px;
     height: 18px;
     margin-right: 8px;
     vertical-align: middle;
}

/* Botão E-commerce (Vermelho) */
.btn-ecommerce {
     background-color: #dc3545;
     color: #fff;
     font-weight: 700;
     font-size: 0.9rem;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50px;
     padding: 0.6rem 1rem;
     transition: all 0.3s;
     text-decoration: none;
}

.btn-ecommerce:hover {
     background-color: #bb2d3b;
     color: #fff;

     box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}

.btn-ecommerce .material-symbols-outlined {
     font-size: 1.1rem;
     margin-right: 6px;
}

/* Botão Detalhes */
.btn-outline-dark {
     text-align: center;
     font-size: 0.85rem;
}

/* Paginação Clean */
.pagination-wrapper {
     display: flex;
     justify-content: center;
     margin-top: 3rem;
}

.pagination-clean {
     list-style: none;
     display: flex;
     gap: 0.5rem;
     padding: 0;
}

.pagination-clean a {
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 36px;
     height: 36px;
     border-radius: 6px;
     background: #fff;
     color: var(--brand-dark);
     border: 1px solid #ddd;
     font-weight: 700;
     text-decoration: none;
     transition: all 0.2s;
     padding: 0 10px;
     font-size: 0.9rem;
}

.pagination-clean a:hover,
.pagination-clean a.active {
     background: var(--brand-dark);
     color: var(--brand-yellow);
     border-color: var(--brand-dark);
}

/* Empty State */
.empty-state {
     text-align: center;
     padding: 4rem 0;
     color: var(--text-muted);
}

/* Estado Desabilitado do Botão de Busca */
#btnBuscar:disabled {
     background-color: #e0e0e0;
     /* Cinza claro */
     color: #999;
     border-color: #ddd;
     cursor: not-allowed;
     transform: none;
     /* Remove efeito de click/hover */
     box-shadow: none;
}

#btnBuscar:disabled:hover {
     background-color: #e0e0e0;
     /* Mantém cinza no hover */
     transform: none;
}


@media (min-width: 992px) {
     .filter-bar-section {
          top: 102px;
     }

     .filter-form {
          justify-content: center;
     }

     .filter-group {
          flex: 0 1 250px;
     }

     .container-catalog {
          max-width: 1500px !important;
          width: 100%;
          padding-left: 2rem;
          padding-right: 2rem;
          margin-left: auto;
          margin-right: auto;
     }

}

/* =========================================
   PÁGINA DO PRODUTO (SINGLE) - FINAL
   ========================================= */

/* Breadcrumb */
.product-breadcrumb {
     background: #f9f9f9;
     padding: 1rem 0;
     font-size: 0.85rem;
     color: #888;
     border-bottom: 1px solid #eee;
}

.product-breadcrumb a {
     text-decoration: none;
     color: #555;
     font-weight: 600;
}

.product-breadcrumb span {
     color: var(--brand-dark);
     font-weight: 700;
}

/* GRID PRINCIPAL
   No mobile: usamos Flex Column para ordenar visualmente
*/
.product-single-grid {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
}

/* TRUQUE DE REORDENAÇÃO MOBILE 
   Usamos 'display: contents' no wrapper para que os filhos
   (Header e Buttons) se tornem irmãos diretos da Galeria
   na árvore do Flexbox.
*/
.product-content-wrapper {
     display: contents;
}

/* Ordem Mobile (Tudo em uma coluna só) */
.product-info-header {
     order: 1;
     /* 1º: Título e Specs */
}

.product-gallery-area {
     order: 2;
     /* 2º: Fotos */
}

.product-actions-block {
     order: 3;
     /* 3º: Botões CTA */
}

/* Estilos de Elementos */
.brand-tag {
     background: var(--brand-yellow);
     color: var(--brand-dark);
     font-size: 0.75rem;
     font-weight: 800;
     padding: 0.2rem 0.8rem;
     border-radius: 4px;
     text-transform: uppercase;
     display: inline-block;
     margin-bottom: 0.5rem;
}

.product-single-title {
     font-size: 1.8rem;
     margin: 0 0 0.5rem 0;
     color: var(--brand-dark);
     line-height: 1.1;
}

.summary-text {
     font-size: 1rem;
     color: #666;
     margin-bottom: 0.5rem;
}

.install-alert {
     color: #28a745;
     font-weight: 700;
     font-size: 0.9rem;
     display: flex;
     align-items: center;
     gap: 5px;
     margin-bottom: 1.5rem;
}

.install-alert .icon {
     font-size: 1.1rem;
}

/* Specs Grid */
.tech-specs-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 0.8rem;
     margin-bottom: 1rem;
}

.spec-box {
     background: #fff;
     padding: 0.6rem;
     border-radius: 6px;
     text-align: center;
     border: 1px solid #eee;
}

.spec-box .label {
     font-size: 0.7rem;
     color: #999;
     text-transform: uppercase;
     font-weight: 800;
     display: block;
}

.spec-box .value {
     font-size: 1rem;
     color: var(--brand-dark);
     font-weight: 800;
     display: block;
}

/* Galeria */
.main-image-frame {
     border: 1px solid #eee;
     border-radius: 12px;
     padding: 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fff;
     margin-bottom: 1rem;
     height: 300px;
}

.main-image-frame img {
     max-height: 100%;
     max-width: 100%;
     object-fit: contain;
}

.thumbs-list {
     display: flex;
     gap: 0.8rem;
     justify-content: center;
}

.thumb-item {
     width: 60px;
     height: 60px;
     border: 1px solid #ddd;
     border-radius: 8px;
     padding: 5px;
     cursor: pointer;
     opacity: 0.6;
     transition: all 0.2s;
}

.thumb-item.active {
     opacity: 1;
     border-color: var(--brand-dark);
}

.thumb-item img {
     width: 100%;
     height: 100%;
     object-fit: contain;
}

/* BOTÕES DELICADOS (Solicitação) */
.product-actions-block {
     display: flex;
     flex-direction: column;
     gap: 0.8rem;
     margin-top: 1rem;
     /* Espaço entre Galeria e Botões */
}

.btn-delicate {
     width: 100%;
     /* Full width no mobile */
     padding: 0.75rem 1rem;
     /* Menos padding vertical */
     font-size: 0.95rem;
     /* Fonte levemente menor */
     border-radius: 8px;
     /* Borda suave */
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
     transition: all 0.2s;
}

.btn-delicate:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* Abas (Modern Tabs) */
.modern-tabs-header {
     display: flex;
     list-style: none;
     padding: 0;
     margin-top: 2rem;
     border-bottom: 1px solid #ddd;
     gap: 1.5rem;
     overflow-x: auto;
}

.tab-link {
     padding: 1rem 0;
     font-size: 0.95rem;
     font-weight: 600;
     color: #888;
     cursor: pointer;
     border-bottom: 3px solid transparent;
     white-space: nowrap;
}

.tab-link.active {
     color: var(--brand-dark);
     border-bottom-color: var(--brand-yellow);
}

.tab-content {
     display: none;
     padding: 2rem 0;
     opacity: 0;
     transition: opacity 0.4s ease;
}

.tab-content.active {
     display: block;
     opacity: 1;
}

.content-box h3 {
     font-size: 1.3rem;
     margin-bottom: 1rem;
     color: var(--brand-dark);
}

.content-box p {
     color: #555;
     line-height: 1.6;
     margin-bottom: 1rem;
}

/* Tabela Specs */
.table-specs-full {
     width: 100%;
     border-collapse: collapse;
}

.table-specs-full th {
     text-align: left;
     padding: 0.8rem;
     background: #f9f9f9;
     color: var(--brand-dark);
     width: 40%;
     border-bottom: 1px solid #eee;
     font-size: 0.9rem;
}

.table-specs-full td {
     padding: 0.8rem;
     border-bottom: 1px solid #eee;
     color: #555;
     font-size: 0.9rem;
}

/* Grid Aplicações */
.app-grid-columns {
     column-count: 1;
     column-gap: 2rem;
}

.app-brand-group {
     break-inside: avoid;
     margin-bottom: 1.5rem;
}

.app-brand-title {
     display: block;
     font-size: 0.9rem;
     color: var(--brand-dark);
     border-bottom: 1px solid #eee;
     padding-bottom: 0.3rem;
     margin-bottom: 0.5rem;
}

.app-model-list {
     list-style: none;
     padding: 0;
}

.app-model-list li {
     font-size: 0.85rem;
     color: #666;
     margin-bottom: 0.2rem;
}

.badge-orig {
     font-size: 0.65rem;
     background: #eee;
     padding: 1px 5px;
     border-radius: 4px;
     color: #333;
     margin-left: 5px;
}


/* =========================================
   DESKTOP (Restaurar Layout 2 Colunas)
   ========================================= */
@media (min-width: 992px) {
     .product-single-grid {
          display: grid;
          /* Volta a ser Grid */
          grid-template-columns: 45% 50%;
          gap: 5%;
     }

     .product-content-wrapper {
          display: block;
          /* Remove o 'contents' */
          order: 2;
          /* Vai para a coluna da Direita */
     }

     .product-gallery-area {
          order: 1;
          /* Vai para a Esquerda */
     }

     /* Ajustes Desktop */
     .main-image-frame {
          height: 450px;
     }

     .product-single-title {
          font-size: 2.2rem;
     }

     .app-grid-columns {
          column-count: 3;
     }

     /* Botões Desktop podem ser um pouco maiores se quiser, ou manter delicados */
     .btn-delicate {
          width: 100%;
          font-size: 1rem;
     }

}

/* --- APLICAÇÕES COM LOGO --- */

.app-brand-group {
     break-inside: avoid;
     margin-bottom: 2rem;
}

/* Novo Header Flexbox para alinhar Logo e Texto */
.app-brand-header {
     display: flex;
     align-items: center;
     gap: 10px;
     /* Espaço entre logo e nome */
     border-bottom: 1px solid #eee;
     padding-bottom: 0.5rem;
     margin-bottom: 0.8rem;
}

/* O Logo da Montadora */
.app-brand-logo {
     width: 45px;
     height: 45px;
     object-fit: contain;
}

/* O Nome da Montadora */
.app-brand-title {
     display: block;
     font-size: 0.95rem;
     color: var(--brand-dark);
     margin: 0;
     line-height: 1;
}

/* Ajuste na lista para ficar alinhada visualmente */
.app-model-list {
     list-style: none;
     padding: 0;
     margin-left: 2px;
}

/* =========================================
   PÁGINA NOSSA HISTÓRIA (ATUALIZADO)
   ========================================= */

/* Limita largura do texto para leitura confortável */
.max-w-800 {
     max-width: 800px;
}

.history-text {
     margin-bottom: 2.1rem;
}

.history-text p {
     color: #666;
     line-height: 1.8;
     margin-bottom: 1.2rem;
     font-size: 1.05rem;
}

/* --- GALERIAS DE FOTOS --- */

/* Estilo Base do Item da Galeria */
.gallery-item {
     overflow: hidden;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
     background: #fff;
     border: 1px solid #eee;
     display: flex;
     flex-direction: column;
}

.gallery-item img {
     width: 210px;
     height: auto;
     object-fit: cover;
     transition: transform 0.3s ease;
}

.img-height-300px {
     width: auto !important;
     height: 300px !important;
}

/* Grid de 5 Fotos (Antigas) */
.history-gallery-grid-5 {
     display: grid;
     gap: 1rem;
     /* Mobile: 2 colunas, Desktop: 5 colunas */
     grid-template-columns: repeat(2, 1fr);
}

/* Grid de 3 Fotos (Novas) */
.history-gallery-grid-3 {
     display: grid;
     gap: 1.5rem;
     /* Mobile: 1 coluna, Desktop: 3 colunas */
     grid-template-columns: 1fr;
}

/* Legenda das fotos novas */
.gallery-caption {
     padding: 0.8rem;
     text-align: center;
     font-size: 0.9rem;
     font-weight: 700;
     color: var(--brand-dark);
     background: #f9f9f9;
     border-top: 1px solid #eee;
}

/* RESPONSIVIDADE PARA GRIDS */
@media (min-width: 768px) {
     .history-gallery-grid-5 {
          grid-template-columns: repeat(3, 1fr);
          /* Tablet: 3 colunas */
     }

     .history-gallery-grid-3 {
          grid-template-columns: repeat(3, 1fr);
          /* Tablet/Desktop: 3 colunas */
     }
}

@media (min-width: 992px) {
     .history-gallery-grid-5 {
          grid-template-columns: repeat(5, 1fr);
          /* Desktop: 5 colunas lado a lado */
     }
}

/* --- PILARES (Estilos Mantidos) --- */
.static-value-card {
     background: #fff;
     padding: 2.5rem 2rem;
     border-radius: 8px;
     border: 1px solid #e5e5e5;
     text-align: center;
     height: 100%;
     margin-top: 1rem;
}

.value-icon {
     width: 64px;
     height: 64px;
     background: #f8f9fa;
     color: var(--brand-dark);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem auto;
}

.value-icon .material-symbols-outlined {
     font-size: 32px;
}

.static-value-card h4 {
     color: var(--brand-dark);
     font-weight: 800;
     margin-bottom: 1rem;
     font-size: 1.2rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}

.static-value-card p {
     color: #666;
     font-size: 0.95rem;
     line-height: 1.6;
     margin-bottom: 0;
}

.values-list-clean {
     list-style: none;
     padding: 0;
     margin: 0;
     text-align: left;
     display: inline-block;
}

.values-list-clean li {
     padding: 0.5rem 0;
     color: #555;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 8px;
}

.values-list-clean li::before {
     content: '';
     display: block;
     width: 6px;
     height: 6px;
     background-color: var(--brand-yellow);
     border-radius: 50%;
}

/* GRID DOS PILARES (CSS PURO) */
.pillars-grid {
     display: grid;
     gap: 2rem;
     /* Espaçamento entre os cards */
     grid-template-columns: 1fr;
     /* Mobile: 1 coluna (um embaixo do outro) */
}

/* Apenas no Desktop vira 3 colunas */
@media (min-width: 992px) {
     .pillars-grid {
          grid-template-columns: repeat(3, 1fr);
          /* 3 Colunas iguais */
     }
}


/* =========================================
   PÁGINAS DE MARCAS (ATUALIZADO)
   ========================================= */

/* Grid e Margens */
.brand-intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 5rem;
}

.brand-main-title {
    color: var(--brand-dark);
    font-weight: 800;
    font-size: 2.2rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.brand-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

.section-subtitle-spacer {
    font-size: 1.4rem;
    color: var(--brand-dark);
    margin: 3rem 0 1.2rem 0; /* Margem superior para separar listas */
    border-bottom: 2px solid var(--brand-yellow);
    display: inline-block;
    padding-bottom: 0.4rem;
}

/* TIMELINE COM EFEITO VISUAL (RESTAURADO) */
.timeline-clean {
    position: relative;
    padding-left: 30px;
    border-left: 2px solid #eee;
    margin-top: 2rem;
}

.timeline-item {
    position: relative;
    margin-bottom: 2.5rem;
}

/* O Efeito das Esferas */
.timeline-item::before {
    content: '';
    position: absolute;
    left: -37px; /* Alinhado ao centro da borda de 2px */
    top: 5px;
    width: 12px;
    height: 12px;
    background-color: var(--brand-yellow);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #eee;
    z-index: 2;
}

.timeline-item strong {
    display: block;
    font-size: 1.1rem;
    color: var(--brand-dark);
    margin-bottom: 0.4rem;
}

.timeline-item p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* PADRÃO DE LISTAS UNIFICADO (Simples e Elegante) */
.brand-simple-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.brand-simple-list li {
    padding: 0.6rem 0;
    color: #555;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f2f2f2;
}

.brand-simple-list li:last-child {
    border-bottom: none;
}

.brand-simple-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--brand-yellow);
    border-radius: 50%;
    flex-shrink: 0;
}

/* DESKTOP REFINEMENT */
@media (min-width: 992px) {
    .brand-intro-grid {
        grid-template-columns: 1fr 1fr;
    }

    .brand-details-grid {
        grid-template-columns: 55% 40%;
        gap: 5%;
    }
}