/* ===========================================
   ARQUIVO PRINCIPAL - IMPORTAÇÕES
   =========================================== */

/* Importa as fontes do projeto */
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* 1º - Definir */
@import url('variables.css');
/* 2º - Limpar */
@import url('reset.css');
/* 3º - Estrutura */
@import url('layout.css');
/* 4º - Componentes */
@import url('components.css');

/* ESTILOS ESPECÍFICOS DO PROJETO */

/* ===========================================
    CABECALHO PRINCIPAL
=========================================== */

#cabecalho-principal {
   background-color: var(--bg-dark);
}

.cabecalho-container {
   color: var(--text-light);
}

.menu-toggle {
   font-size: var(--text-xl);
   background: none;
   border: none;
   cursor: pointer;
   color: var(--text-light);
}

.menu-toggle:hover {
   color: var(--accent-hover);
}

.navbar-principal {
   transition: opacity 0.3s ease, visibility 0.3s ease;
}

.navbar-principal a:hover {
   border-bottom: 1px solid var(--accent-hover);
}

.dropdown-toggle {
   background: none;
   border: none;
   cursor: pointer;
   border-radius: var(--radius);
   transition: all 0.3s ease;
}

.dropdown-toggle::after {
   content: '▼';
   font-size: 0.9rem;
   transition: transform 0.2s ease;
}

.dropdown.active .dropdown-toggle::after {
   transform: rotate(180deg);
}

.dropdown-menu {
   background-color: var(--bg-muted);
   border-radius: var(--radius);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   transform: translateY(-10px);
   transition: all 0.3s ease;
}

.dropdown.active .dropdown-menu {
   transform: translateY(0);
}

.dropdown-item {
   transition: all 0.2s ease;
}

.dropdown-item:hover {
   background-color: var(--accent-muted);
   color: var(--text-dark);
}

@media (max-width: 768px) {

   .navbar-principal {
      z-index: 999;
      background-color: var(--bg-dark);
   }

   .navbar-principal a {
      text-align: center;
   }

   .navbar-principal a:hover {
      border-bottom: 0;
      border-radius: var(--radius);
      background-color: var(--accent-muted);
      color: var(--text-dark)
   }

}

/* ===========================================
    BOTOES FLUTUANTES
=========================================== */

.botoes-fixos>* {
   background-color: var(--secondary-color);
   color: var(--text-light);
   border-radius: 50%;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

/* ===========================================
    SEÇÃO HERO
=========================================== */

.hero {
   text-shadow: var(--text-shadow);
}

/* ===========================================
    SEÇÃO PRODUTOS DESTAQUE
=========================================== */

.container-carousel-products {
   background-color: var(--secondary-color);
   border-radius: var(--radius);
}

.carousel-track {
   border-radius: var(--radius);
}

.product-card {
   background-color: var(--bg-light);
   border-radius: var(--radius);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
   transform: translateY(-5px);
}

.product-card img {
   border-radius: var(--radius) var(--radius) 0 0;
   transition: transform 0.3s ease;
}

.product-card:hover img {
   transform: scale(1.1);
}

.setas-produtos {
   font-size: var(--text-lg);
   background-color: var(--bg-light);
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
}

.carousel-indicator {
   background-color: var(--bg-muted);
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.3s ease;
   border: 2px solid transparent;
}

.carousel-indicator.active {
   background: var(--accent-color);
   transform: scale(1.2);
   border-color: var(--primary-color);
}

.carousel-indicator:hover {
   background: var(--accent-color);
}

.setas-produtos {
   padding: var(--space-xs) var(--space-xs);
   border-radius: 50%;
}

.setas-produtos:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 20px rgba(139, 69, 19, 0.4);
}

.setas-produtos:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none;
}


/* ===========================================
    SEÇÃO DEPOIMENTOS
=========================================== */

.depoimentos {
   text-align: center;
}

.depoimento {
   background-color: var(--bg-light);
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   border-radius: var(--radius);
   opacity: 0.7;
   transform: scale(0.95);
}

.depoimento.ativo {
   opacity: 1;
   transform: scale(1);
}

.depoimento:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.user-info img {
   border-radius: 100px;
}

.indicador {
   background-color: var(--bg-muted);
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.3s ease;
   border: 2px solid transparent;
}

.indicador.ativo {
   background: var(--accent-color);
   transform: scale(1.2);
   border-color: var(--primary-color);
}

.indicador:hover {
   background: var(--accent-color);
}

/* Botões de navegação */
.carousel-nav {
   transform: translateY(-50%);
   background: rgba(255, 255, 255, 0.95);
   border: none;
   border-radius: 50%;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   transition: all 0.3s ease;
   color: var(--color-text, #333);
}

.carousel-nav:hover {
   background: white;
   transform: translateY(-50%) scale(1.1);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.carousel-nav:focus {
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
}

/* Estados de loading */
.depoimento img {
   background: var(--accent-muted);
}

.depoimento img[data-src] {
   background-image: url('data:image/svg+xml,<svg>...</svg>');
   /* Placeholder */
}

.depoimento img.loading {
   animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: 0.5;
   }
}

/* ===========================================
    SEÇÃO DIFERENCIAIS
=========================================== */

.lista-diferenciais li {
   text-align: center;
   box-shadow: var(--shadow);
   border-radius: var(--radius);
}

/* ===========================================
    SEÇÃO CTA CADASTRO
=========================================== */

.video-institucional {
   border-radius: var(--radius);
   box-shadow: var(--shadow);
}

/* ===========================================
    SEÇÃO GALERIA
=========================================== */

.galeria-grid img {
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   transition: var(--transition);
   cursor: pointer;
}

.galeria-grid img:hover {
   transform: translateY(-5px) scale(1.02);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
   filter: brightness(1.05);
}

/* ===========================================
    SEÇÃO VENHA VISITAR
=========================================== */

.iframe-localizacao {
   border: none;
   border-radius: var(--radius);
   box-shadow: var(--shadow);
}

.localizacao,
.horario,
.contato {
   box-shadow: var(--shadow);
   border-radius: var(--radius);
}

.horario li .marker {
   background-color: var(--primary-color);
   border-radius: 50%;
}

/* ===========================================
    SEÇÃO SOBRE NOS
=========================================== */

.sobre-nos-img {
   border-radius: var(--radius);
}

@media (max-width: 768px) {

   .sobre-nos-info {
      text-align: center;
   }

}

/* ===========================================
    RODAPE
=========================================== */

#rodape {
   background-color: var(--bg-dark);
   color: var(--text-light)
}

#rodape h4 {
   color: var(--secondary-color);
}

.endereco {
   text-align: center;
}

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

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

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

.sobre-nos-container ul {
   list-style: disc;
}

#missao span,
#equipe span {
   font-weight: var(--font-weight-bold);
}

.sobre-nos-container img:not(.logo-section):not(.img-logo-sobre-nos) {
   object-fit: cover;
}

#trabalhe-conosco p {
   text-align: center;
}

/* ===========================================
    PÁGINA CONTATO
=========================================== */

.contact-social i {
   border: 1.5px solid var(--text-dark);
}

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