/* --- RESPONSIVIDADE AVANÇADA (NOVAS CLASSES) --- */
@media (max-width: 1200px) {
  .container {
    max-width: 1000px;
  }
}

@media (max-width: 900px) {
  .responsive-grid,
  .responsive-about,
  .responsive-diff,
  .responsive-faq,
  .responsive-location {
    display: block !important;
    width: 100%;
    padding: 0;
  }
  .responsive-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .responsive-diff-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .responsive-stats {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .responsive-gallery {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .responsive-carousel-track {
    flex-direction: column;
  }
  .responsive-carousel {
    padding: 0;
  }
  .responsive-insta {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 0 8px;
  }
  .responsive-cards,
  .responsive-diff-cards,
  .responsive-gallery {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .responsive-carousel-track {
    flex-direction: column;
  }
  .responsive-carousel {
    padding: 0;
  }
  .responsive-insta {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

/* Preloader responsivo */
.preloader-responsive {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.95);
  z-index: 9999;
}
.preloader-responsive .loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.preloader-responsive .spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #e2e8f0;
  border-top: 6px solid var(--kernit-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.preloader-responsive p {
  font-size: 1.1rem;
  color: var(--primary-blue);
  font-weight: 700;
}

/* Modais responsivos */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
}
.modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  width: 90vw;
  max-width: 350px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  animation: zoomInModal 0.3s ease;
}
@media (max-width: 600px) {
  .modal-content {
    padding: 15px;
    max-width: 95vw;
  }
}
@keyframes zoomInModal {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* --- 1. VARIÁVEIS E RESET (Cores Oficiais) --- */
:root {
  --primary-blue: #0e2a47; /* Azul Escuro Profundo (Fundo Premium) */
  --kernit-blue: #0033a0; /* Azul da Marca (Vibrante) */
  --accent-blue: #2563eb; /* Azul Claro (Botões/Destaques) */
  --text-dark: #1f2937;
  --text-light: #94a3b8;
  --white: #ffffff;
  --off-white: #f8fafc;
  --gradient-blue: linear-gradient(135deg, #0e2a47 0%, #1a3c5e 100%);
}

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

body {
  font-family: "Montserrat", sans-serif;
  color: var(--text-dark);
  background-color: var(--off-white);
  overflow-x: hidden;
  padding-top: 80px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- 2. HEADER (Limpo e Branco) --- */
.main-header {
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.header-content {
  display: flex !important;
  justify-content: space-between !important; /* Logo na esquerda, Menu na direita */
  align-items: center !important;
  height: 80px;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.logo img {
  height: 50px; /* Altura fixa para não deformar */
  width: auto;
  display: block;
}
.logo:hover img {
  transform: scale(1.05);
}
.desktop-nav {
  display: block;
}
.desktop-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
}
.desktop-nav a {
  text-decoration: none;
  color: var(--primary-blue);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  position: relative;
  transition: color 0.3s;
}
/* Efeito de sublinhado animado no menu */
.desktop-nav a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: var(--accent-blue);
  transition: width 0.3s;
}
.desktop-nav a:hover::after {
  width: 100%;
}
.mobile-menu-btn {
  display: none; /* Esconde por padrão */
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--primary-blue);
  cursor: pointer;
}
.mobile-nav {
  display: none;
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  background: white;
  flex-direction: column;
  padding: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #eee;
}
/* --- 3. HERO SECTION (Tecnológica) --- */
.hero-extended {
  position: relative;
  padding: 100px 0 160px 0; /* Padding inferior aumentado para dar espaço à barra e aos cards */
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: linear-gradient(105deg, #f0f9ff 0%, #ffffff 60%);
  overflow: hidden;
}
.slider-wrapper {
  width: 100%;
  position: relative;
  z-index: 5;
}

.hero-slide {
  display: none; /* Esconde todos */
  width: 100%;
}

.hero-slide.active {
  display: block; /* Mostra apenas o ativo */
  animation: fadeUpHero 0.6s ease-out forwards;
}

@keyframes fadeUpHero {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.bg-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  opacity: 0.5;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 10;
}

.hero-text .tagline {
  color: var(--accent-blue);
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 0.9rem;
  margin-bottom: 15px;
  display: block;
}

.hero-text h1 {
  font-size: 3.8rem;
  line-height: 1.1;
  color: var(--primary-blue);
  margin-bottom: 25px;
  font-weight: 800;
}

.hero-text p {
  font-size: 1.15rem;
  color: var(--text-dark);
  margin-bottom: 40px;
  opacity: 0.8;
}

/* Imagem Hero com "Aura" azul */
.hero-image img {
  max-height: 450px;
  width: auto;
  object-fit: contain;
}
.hero-indicator {
  width: 50px;
  height: 4px;
  background: rgba(14, 42, 71, 0.1);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: 0.3s;
}

.hero-indicator .progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--kernit-blue);
}

/* Quando o slide está ativo, a barrinha interna "enche" */
.hero-indicator.active .progress {
  animation: fillHeroBar 5s linear forwards;
}

@keyframes fillHeroBar {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.hero-slider-indicators {
  position: absolute;
  bottom: 120px; /* Subimos a barra para ficar acima dos cards brancos */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  z-index: 50; /* Garante que fique visível */
}
/* Botões Premium */
.btn-primary {
  background: var(--kernit-blue);
  color: white;
  padding: 16px 36px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(0, 51, 160, 0.3);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-primary:hover {
  background: var(--primary-blue);
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0, 51, 160, 0.4);
}

/* --- 4. CARDS FLUTUANTES (Detalhes Azuis) --- */
.floating-cards-section {
  position: relative;
  z-index: 60; /* Fica à frente das barrinhas do slider */
  margin-top: -80px; /* Sobe para cima da Hero */
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 900px) {
  .hero-extended {
    padding: 80px 0 180px 0;
    text-align: center;
  }

  .hero-slider-indicators {
    bottom: 150px; /* Sobe mais no mobile para não cobrir o texto */
  }

  .hero-image img {
    max-height: 300px;
    margin-top: 30px;
  }
}
.info-card {
  background: var(--white);
  padding: 40px 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 15px 50px rgba(14, 42, 71, 0.1);
  transition: all 0.4s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.info-card:hover {
  transform: translateY(-15px);
  border-bottom: 5px solid var(--accent-blue);
}
.info-card i {
  font-size: 2.8rem;
  color: var(--kernit-blue);
  margin-bottom: 20px;
}
.info-card h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary-blue);
  letter-spacing: 0.5px;
}

/* --- 5. QUEM SOMOS (Hexágono) --- */
.about-section {
  padding: 100px 0;
  background: var(--white);
}
.about-grid {
  display: grid;
  /* AJUSTE 1: Texto ocupa 45%, Imagem ocupa 55% (Mais destaque para a foto) */
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: stretch; /* AJUSTE 2: Faz os dois lados terem a mesma altura */
}

.hexagon-shape {
  width: 380px;
  height: 380px;
  clip-path: polygon(45% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--kernit-blue);
}
.hexagon-shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
}

.experience-badge {
  position: absolute;
  bottom: 20px;
  background: var(--white);
  padding: 20px 40px;
  border-radius: 15px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  text-align: center;
  border-left: 5px solid var(--kernit-blue); /* Detalhe azul lateral */
}
.experience-badge .years {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary-blue);
  line-height: 1;
}
.experience-badge .label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 1px;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 34px;
  border: 2px solid var(--kernit-blue);
  color: var(--kernit-blue);
  text-decoration: none;
  font-weight: 700;
  border-radius: 6px;
  transition: 0.3s;
}
.btn-outline:hover {
  background: var(--kernit-blue);
  color: var(--white);
}

/* --- 6. SEÇÃO DIFERENCIAIS (DARK MODE - AZUL KERNIT) --- */
.differentials-section {
  padding: 100px 0;
  background: var(--gradient-blue);
  position: relative;
}

/* Elemento decorativo de fundo */
.differentials-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.05) 0%,
    transparent 70%
  );
}

.diff-content h2 {
  color: var(--white);
  font-size: 2.8rem;
  font-weight: 700;
}
.diff-content .section-subtitle {
  color: var(--accent-blue);
}
.diff-content p {
  color: rgba(255, 255, 255, 0.8);
} /* Branco com transparência */

.diff-content .blue-line {
  background: var(--accent-blue);
}

.diff-card {
  background: rgba(255, 255, 255, 0.05); /* Card semi-transparente */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 35px;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.3s;
}
.diff-card:hover {
  background: var(--white);
  transform: translateY(-5px);
}
.diff-card:hover h4 {
  color: var(--primary-blue);
}
.diff-card:hover p {
  color: var(--text-dark);
}
.diff-card i {
  font-size: 2.2rem;
  color: var(--accent-blue);
  margin-bottom: 20px;
}
.diff-card h4 {
  color: var(--white);
  font-weight: 800;
  margin-bottom: 10px;
}
.diff-card p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

/* --- 7. FOOTER (NOVO) --- */
footer {
  background: #0a1e33; /* Quase preto/azul */
  color: rgba(255, 255, 255, 0.6);
  padding: 60px 0 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-col h4 {
  color: var(--white);
  margin-bottom: 20px;
  font-size: 1.1rem;
}
.footer-col p {
  margin-bottom: 15px;
  font-size: 0.9rem;
}
.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.8rem;
}

/* --- Mobile --- */
@media (max-width: 900px) {
  .hero-grid,
  .about-grid,
  .diff-grid-layout,
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-text h1 {
    font-size: 2.5rem;
  }
  .cards-grid,
  .diff-cards-container {
    grid-template-columns: 1fr;
  }
  .desktop-nav {
    display: none;
  }
  .mobile-menu-btn {
    display: block;
    border: none;
    background: none;
    font-size: 1.5rem;
    color: var(--primary-blue);
  }
  .mobile-nav {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  .hexagon-shape {
    width: 300px;
    height: 300px;
    margin: 0 auto;
  }
}
/* --- ESTILO DOS POPUPS (MODAIS) --- */
.modal-overlay {
  display: none; /* Oculto por padrão */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(14, 42, 71, 0.6); /* Azul escuro transparente */
  backdrop-filter: blur(5px); /* Efeito de desfoque no fundo */
  z-index: 2000; /* Acima de tudo */
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
}

.modal-content {
  background: var(--white);
  width: 90%;
  max-width: 500px;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  max-height: 90vh;
  overflow-y: auto; /* Permite rolagem se a tela for pequena */
}

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

.close-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1.8rem;
  color: var(--text-light);
  cursor: pointer;
  transition: color 0.2s;
}

.close-modal:hover {
  color: var(--accent-blue);
}

.modal-header {
  text-align: center;
  margin-bottom: 30px;
}

.modal-header h3 {
  color: var(--accent-blue);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.modal-header h2 {
  color: var(--primary-blue);
  font-size: 2rem;
  font-weight: 800;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modal-form input,
.modal-form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  background: #f8fafc;
  transition: border 0.3s;
}

.modal-form input:focus,
.modal-form textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.modal-contacts {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  text-align: center;
}

.modal-contacts p {
  color: var(--text-dark);
  margin: 8px 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.modal-contacts i {
  color: var(--accent-blue);
  margin-right: 8px;
}

/* Cursor pointer para os cards que abrem modal */
.info-card {
  cursor: pointer;
  /* Mantém os estilos anteriores também */
}
/* --- SECÇÃO DE DADOS (STATS) --- */
.stats-section {
  background: linear-gradient(
    135deg,
    #005fa3 0%,
    #003366 100%
  ); /* Azul degradê como na imagem */
  padding: 80px 0;
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Efeito sutil de fundo (opcional) */
.stats-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.stats-header {
  margin-bottom: 50px;
}

.stats-subtitle {
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.8;
  display: block;
  margin-bottom: 10px;
}

.stats-header h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.white-line {
  width: 80px;
  height: 3px;
  background: var(--white);
  border: none;
  margin: 0 auto;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.stat-number {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
}

.stat-icon {
  font-size: 3rem;
  margin-bottom: 5px;
}

.stat-item p {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- SECÇÃO PRODUTOS EM DESTAQUE --- */
.highlight-products {
  padding: 80px 0;
  background-color: var(--white);
  text-align: center;
}

.section-header-center h2 {
  font-size: 2.5rem;
  color: #1f2937; /* Cor escura quase preta */
  font-weight: 700;
  margin-bottom: 10px;
}

.green-line {
  width: 60px;
  height: 4px;
  background: #00cba9; /* Verde/Turquesa da imagem */
  border: none;
  margin: 15px auto 40px auto;
}

.products-grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

.product-card {
  background: var(--white);
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
}

.product-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-blue);
  transform: translateY(-5px);
}

.product-img-box {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
}

.product-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.5s;
}

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

.product-info h3 {
  color: var(--primary-blue);
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.link-arrow {
  color: var(--primary-blue);
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s;
}

.product-card:hover .link-arrow {
  gap: 10px;
  color: var(--accent-blue);
}

/* Bolinhas Decorativas (Visual apenas) */
.carousel-dots-visual {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
}

.dot-visual {
  width: 10px;
  height: 10px;
  background-color: #e2e8f0;
  border-radius: 50%;
  display: inline-block;
}

.dot-visual.active {
  background-color: var(--primary-blue);
  transform: scale(1.2);
}

/* Botão Centralizado */
.center-btn-container {
  text-align: center;
}

.btn-primary-block {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--kernit-blue); /* Azul forte */
  color: white;
  padding: 15px 50px; /* Botão largo */
  border-radius: 4px;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 51, 160, 0.3);
  transition: all 0.3s;
}

.btn-primary-block:hover {
  background-color: var(--primary-blue);
  transform: translateY(-2px);
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: 1fr; /* Empilha no mobile */
    gap: 40px;
  }

  .products-grid-layout {
    grid-template-columns: 1fr; /* Um produto por vez no mobile */
  }

  .stat-number {
    font-size: 3rem;
  }
  .section-header-center h2 {
    font-size: 2rem;
  }
}
/* --- SECÇÃO DEPOIMENTOS --- */
.testimonials-section {
  padding: 80px 0;
  background: #f8fafc;
  overflow: hidden;
}
.testimonial-track {
  display: flex;
  gap: 20px; /* Espaço entre os cartões */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonials-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* Card ocupa mais espaço que a foto */
  gap: 50px;
  align-items: center;
}
.testimonial-inner-card {
  background: white;
  padding: 35px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #f1f5f9;
}
.testimonial-track {
  display: flex;
  gap: 20px; /* Espaço entre os cartões */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-window {
  overflow: hidden;
  width: 100%;
}
.testimonial-carousel-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  gap: 20px;
  margin-top: 40px;
}
/* Card Branco Flutuante */
.testimonial-card {
  background: var(--white);
  padding: 50px;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); /* Sombra suave e elegante */
  position: relative;
  z-index: 10;
  margin-bottom: 80px; /* Margem inferior para afastar do rodapé */
}

.testimonial-header {
  text-align: center;
  margin-bottom: 30px;
}

.testimonial-card .section-subtitle {
  display: block;
  color: var(--primary-blue);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 5px;
  letter-spacing: 1px;
}

.testimonial-card h2 {
  font-size: 2.2rem;
  color: #1f2937;
  margin-bottom: 10px;
  font-weight: 800;
}

/* Conteúdo do Depoimento (Setas + Texto) */
.testimonial-content {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0 40px 0;
}

.quote-text {
  font-style: italic;
  color: #4b5563;
  line-height: 1.6;
  margin: 15px 0;
  font-size: 0.95rem;
  /* Limita o texto para não esticar demais o card */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.quote-text p {
  font-style: italic;
  color: #64748b; /* Cinza médio */
  line-height: 1.8;
  font-size: 0.95rem;
  margin-bottom: 25px;
}

.quote-text h4 {
  color: var(--text-dark);
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Setas Visuais */
.nav-arrow {
  background: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  flex-shrink: 0;
}
.nav-arrow:hover {
  background: var(--kernit-blue);
  color: white;
}

/* Área da Foto do Médico */
.doctor-image-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
}

.doctor-image-container img {
  max-width: 110%; /* Permite ser um pouco maior */
  height: auto;
  filter: drop-shadow(
    -20px 10px 30px rgba(0, 0, 0, 0.15)
  ); /* Sombra na silhueta */
  margin-bottom: -10px; /* Cola no fundo da section */
  mask-image: linear-gradient(
    to bottom,
    black 80%,
    transparent 100%
  ); /* Suaviza o corte inferior */
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* --- FAIXA AZUL: 100% ORIGINAIS --- */
.banner-strip {
  background: linear-gradient(
    135deg,
    #0e2a47 0%,
    #005fa3 100%
  ); /* Mesmo azul dos diferenciais */
  padding: 60px 0;
  text-align: center;
  position: relative;
  z-index: 20;
}

.banner-strip h2 {
  color: var(--white);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 900px) {
  .testimonials-grid {
    grid-template-columns: 1fr; /* Uma coluna */
    text-align: center;
    gap: 0;
  }

  .doctor-image-container {
    justify-content: center;
    margin-top: -50px; /* Médico sobe um pouco */
    order: -1; /* Opcional: Coloca a foto em cima do card */
  }

  .doctor-image-container img {
    max-width: 70%; /* Diminui o médico no celular */
    margin-bottom: 20px;
  }

  .testimonial-card {
    padding: 30px 20px;
    margin-bottom: 40px;
  }

  .banner-strip h2 {
    font-size: 1.4rem; /* Texto menor na faixa */
  }
}
/* --- SECÇÃO GALERIA --- */
.gallery-section {
  padding: 80px 0;
  background-color: var(--white);
}

/* Estilo das Abas (Tabs) */
.gallery-tabs {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
  border-bottom: 2px solid #f0f0f0;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.gallery-tab {
  background: none;
  border: none;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #94a3b8; /* Cinza inativo */
  padding-bottom: 10px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

.gallery-tab.active,
.gallery-tab:hover {
  color: var(--primary-blue);
  font-weight: 700;
}

/* Linha azul embaixo da aba ativa */
.gallery-tab::after {
  content: "";
  position: absolute;
  bottom: -2px; /* Para sobrepor a linha cinza */
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--primary-blue);
  transition: width 0.3s;
}

.gallery-tab.active::after {
  width: 100%;
}

/* Grid de Imagens */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colunas no PC */
  gap: 20px;
}

.gallery-item {
  position: relative;
  height: 250px; /* Altura fixa para alinhar tudo */
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease; /* Adicione esta linha */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Corta a imagem para preencher sem esticar */
  transition: transform 0.5s ease;
}

/* Efeito Hover (Zoom e Overlay) */
.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 42, 71, 0.6); /* Azul transparente */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.gallery-item .overlay i {
  color: white;
  font-size: 2rem;
}

/* Responsividade Galeria */
@media (max-width: 1000px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas em tablets */
  }
}

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr; /* 1 coluna em telemóveis */
  }
  .gallery-item {
    height: 300px;
  }
}
/* --- SECÇÃO INSTAGRAM --- */
.instagram-section {
  background: linear-gradient(
    135deg,
    #005fa3 0%,
    #082f49 100%
  ); /* Azul Petróleo/Escuro */
  padding: 80px 0;
  color: var(--white);
  text-align: center;
}

.instagram-header h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 20px;
}

.insta-subtitle {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 2px;
  opacity: 0.8;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.white-line-center {
  width: 60px;
  height: 3px;
  background: var(--white);
  border: none;
  margin: 0 auto 40px auto;
}

/* Barra de Perfil (Header falso do insta) */
.insta-profile-bar {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border-radius: 8px 8px 0 0; /* Arredondado só em cima */
  padding: 15px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px; /* Largura do grid */
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
}

.profile-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.profile-pic {
  width: 40px;
  height: 40px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-blue);
  font-size: 1.2rem;
}

.profile-text {
  text-align: left;
  display: flex;
  flex-direction: column;
}

.profile-text strong {
  font-size: 0.95rem;
}

.profile-text span {
  font-size: 0.75rem;
  background: var(--accent-blue);
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 2px;
  width: fit-content;
}

.profile-stats {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Grid do Instagram (3x3) */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px; /* Espaço pequeno típico do Instagram */
  max-width: 1000px;
  margin: 0 auto;
}

.insta-item {
  position: relative;
  padding-top: 100%; /* Truque para manter quadrado perfeito (1:1) */
  overflow: hidden;
  background: #000;
  display: block;
}

.insta-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  opacity: 0.9;
}

.insta-item:hover img {
  transform: scale(1.1);
  opacity: 0.6;
}

/* Overlay com ícone ao passar o mouse */
.insta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
}

.insta-item:hover .insta-overlay {
  opacity: 1;
}

.insta-overlay i {
  font-size: 2rem;
  color: var(--white);
}

/* Botão Branco Outline */
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 35px;
  border: 2px solid var(--white);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  border-radius: 4px;
  transition: all 0.3s;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.btn-outline-white:hover {
  background: var(--white);
  color: var(--primary-blue);
}

/* Responsividade Instagram */
@media (max-width: 768px) {
  .insta-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas em tablet */
  }
}

@media (max-width: 500px) {
  .insta-grid {
    grid-template-columns: repeat(1, 1fr); /* 1 coluna em celular */
    gap: 10px;
  }
  .insta-profile-bar {
    display: none; /* Esconde a barra de perfil no mobile para economizar espaço */
  }
}
/* --- SECÇÃO FAQ (Dúvidas) --- */
.faq-section {
  background: linear-gradient(
    135deg,
    #f0f4f8 0%,
    #d9e2ec 100%
  ); /* Gradiente suave e moderno */
  padding: 100px 0; /* Mais respiro em cima e em baixo */
  position: relative;
  overflow: hidden;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* Imagem ocupa 45%, Card 55% */
  gap: 60px; /* Mais espaço entre eles */
  align-items: center; /* O SEGREDO: Alinha verticalmente ao centro */
}

/* Container da Imagem (Esquerda) */
.faq-image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.faq-image-container img {
  width: 100%;
  max-width: 550px; /* Limite para não ficar gigante em telas wide */
  height: auto;
  border-radius: 20px; /* Cantos bem arredondados */
  box-shadow: -15px 15px 40px rgba(14, 42, 71, 0.15); /* Sombra elegante para a esquerda */
  transition: transform 0.3s ease;
  object-fit: cover;
}

.faq-image-container:hover img {
  transform: scale(1.02); /* Leve zoom ao passar o mouse */
}

/* Card Branco FAQ (Direita) */
.faq-card {
  background: var(--white);
  padding: 50px;
  border-radius: 20px; /* Combinando com a imagem */
  box-shadow: 0 20px 60px rgba(14, 42, 71, 0.08); /* Sombra difusa e premium */
  position: relative;
  z-index: 10;
}

.faq-header {
  margin-bottom: 30px;
}

.faq-header h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary-blue);
  margin-bottom: 15px;
}

.green-line-left {
  width: 60px;
  height: 4px;
  background: #00cba9; /* Verde Turquesa */
  border: none;
  margin: 0;
  border-radius: 2px;
}

/* Estilo do Acordeão */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Espaço entre as perguntas */
}

.accordion-item {
  border-bottom: 1px solid #f1f5f9;
}
.accordion-item:last-child {
  border-bottom: none;
}

.accordion-btn {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 0;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
}

.accordion-btn:hover {
  color: var(--accent-blue);
}

.accordion-btn.active {
  color: var(--primary-blue);
}

.accordion-btn i {
  font-size: 0.85rem;
  color: #94a3b8;
  transition: transform 0.3s ease;
}

.accordion-btn.active i {
  transform: rotate(180deg);
  color: var(--accent-blue);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-content p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
  padding-bottom: 25px;
  padding-right: 20px;
}

/* --- RESPONSIVIDADE (Mobile) --- */
@media (max-width: 900px) {
  .faq-section {
    padding: 60px 0;
  }

  .faq-grid {
    grid-template-columns: 1fr; /* Empilha tudo */
    gap: 40px;
  }

  .faq-image-container {
    order: -1; /* Joga a imagem para o topo */
    padding: 0 20px; /* Margem lateral no celular */
  }

  .faq-image-container img {
    max-width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra menor no mobile */
  }

  .faq-card {
    padding: 30px 25px;
    box-shadow: none; /* Remove sombra pesada no mobile para ficar mais leve */
    background: transparent; /* Integra com o fundo no mobile */
  }

  /* Opcional: Se quiser manter o card branco no mobile, apague as linhas acima */
}
/* --- SECÇÃO LOCALIZAÇÃO --- */
.location-section {
  background-color: var(--white);
  padding: 100px 0;
}

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* Mapa maior que o texto */
  gap: 60px;
  align-items: center;
}

/* Informações de Endereço */
.address-box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin: 30px 0 40px 0;
}

.icon-pin {
  color: var(--primary-blue);
  font-size: 1.5rem;
  margin-top: 2px;
}

.address-box p {
  font-weight: 800;
  color: var(--text-dark);
  font-size: 1rem;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Botões de Localização */
.location-buttons {
  display: flex;
  gap: 20px;
}

.btn-maps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 40px;
  border: 2px solid var(--primary-blue);
  color: var(--primary-blue);
  background: transparent;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 1px;
  transition: all 0.3s;
  min-width: 140px;
}

.btn-maps:hover {
  background: var(--primary-blue);
  color: var(--white);
}

.btn-waze {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 40px;
  background-color: var(--primary-blue);
  color: var(--white);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 1px;
  transition: all 0.3s;
  min-width: 140px;
}

.btn-waze:hover {
  background-color: var(--accent-blue);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Container do Mapa (Efeito Card) */
.map-container {
  height: 400px;
  background: var(--white);
  padding: 10px; /* Borda branca interna */
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.map-container iframe {
  border-radius: 12px;
}

/* Responsividade */
@media (max-width: 900px) {
  .location-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .address-box {
    justify-content: center;
    text-align: left; /* Mantém o texto alinhado à esquerda no bloco */
  }

  .location-buttons {
    justify-content: center;
    flex-direction: column; /* Botões um embaixo do outro no celular */
  }

  .btn-maps,
  .btn-waze {
    width: 100%;
  }

  .map-container {
    height: 300px;
  }
}
/* --- FOOTER MODERNO --- */
.main-footer {
  background-color: #0e2a47; /* Azul Profundo da Identidade Visual */
  color: #e2e8f0; /* Texto cinza claro para leitura */
  padding-top: 80px;
  font-size: 0.9rem;
  position: relative;
  border-top: 4px solid var(--accent-blue); /* Linha azul vibrante no topo */
}

/* Grid de 3 Colunas */
.footer-grid-3 {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr; /* Ajuste de largura das colunas */
  gap: 40px;
  margin-bottom: 60px;
  align-items: start; /* Alinha tudo ao topo */
}

/* Títulos das Colunas */
.footer-col h4 {
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 25px;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

/* --- COLUNA 1: ESQUERDA (Marca) --- */
.col-brand {
  text-align: left;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.footer-logo img {
  height: 50px;
  width: auto;
  /* Removemos qualquer fundo ou espaçamento do código */
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.footer-logo h3 {
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
}

.col-brand p {
  line-height: 1.6;
  opacity: 0.8;
  max-width: 300px;
}

/* --- COLUNA 2: CENTRO (Contatos) --- */
.col-contact {
  text-align: center;
}

.contact-list {
  list-style: none;
  padding: 0;
}

.contact-list li {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center; /* Centraliza o ícone e texto */
  gap: 10px;
  font-size: 0.95rem;
}

.contact-list i {
  color: var(--accent-blue);
  font-size: 1.1rem;
}

/* --- COLUNA 3: DIREITA (Social) --- */
.col-social {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Força alinhamento à direita */
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  text-decoration: none;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-btn:hover {
  background: var(--accent-blue);
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(37, 99, 235, 0.4);
}

/* --- BARRA INFERIOR --- */
.footer-bottom {
  background-color: #081b2e; /* Azul ainda mais escuro */
  padding: 20px 0;
  text-align: center;
  font-size: 0.8rem;
  color: #64748b;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- RESPONSIVIDADE (Mobile) --- */
@media (max-width: 900px) {
  .footer-grid-3 {
    grid-template-columns: 1fr; /* Tudo em uma coluna */
    text-align: center;
    gap: 50px;
  }

  /* No celular, centralizamos tudo para ficar bonito */
  .col-brand,
  .col-contact,
  .col-social {
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .footer-logo {
    justify-content: center;
  }

  .col-brand p {
    margin: 0 auto; /* Centraliza o parágrafo */
  }

  .col-social {
    align-items: center; /* Centraliza redes sociais no mobile */
  }
}
/* --- CARROSSEL DE PRODUTOS --- */
.carousel-window {
  overflow: hidden; /* Esconde o que está fora */
  width: 100%;
  position: relative;
  padding: 10px 5px; /* Espaço para a sombra não cortar */
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out; /* Movimento suave */
  width: 100%;
}

.product-slide {
  min-width: 33.333%; /* 3 produtos por vez no PC */
  padding: 0 15px; /* Espaço entre os cards */
  box-sizing: border-box;
}

/* Ajuste do Card para o Carrossel */
.product-card {
  background: var(--white);
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  height: 100%; /* Garante altura igual */
}

.product-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-blue);
  transform: translateY(-5px);
}

/* --- BOLINHAS DE PROGRESSO (Barra de carregamento) --- */
.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.indicator-dot {
  width: 40px; /* Largura da barra/bolinha */
  height: 4px;
  background-color: #e2e8f0;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* O elemento que "enche" a bolinha */
.indicator-dot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: var(--primary-blue);
  transition: width 0s linear; /* Padrão sem animação */
}

/* Quando está ativo, a barra enche */
.indicator-dot.active::after {
  width: 100%;
  transition: width 3s linear; /* Leva 3 segundos para encher */
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 1000px) {
  .product-slide {
    min-width: 50%; /* 2 produtos por vez em Tablet */
  }
}

@media (max-width: 600px) {
  .product-slide {
    min-width: 100%; /* 1 produto por vez em Celular */
  }
}
/* --- ESTILOS ESPECÍFICOS PARA PÁGINAS INTERNAS --- */

/* 1. Page Header (Faixa azul no topo) */
.page-header {
  background: linear-gradient(135deg, #0e2a47 0%, #005fa3 100%);
  padding: 80px 0;
  text-align: center;
  color: var(--white);
  margin-bottom: 60px;
}

.page-header h1 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.page-header p {
  font-size: 1.1rem;
  opacity: 0.8;
  max-width: 600px;
  margin: 0 auto;
}

.about-page-content {
  padding-bottom: 120px;
  overflow-x: visible;
}
.about-grid {
  display: grid;
  /* AJUSTE 1: Texto ocupa 45%, Imagem ocupa 55% (Mais destaque para a foto) */
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: stretch; /* AJUSTE 2: Faz os dois lados terem a mesma altura */
}

/* Estilo do Texto */
.text-block p {
  font-size: 1rem;
  line-height: 1.8;
  color: #4b5563;
  margin-bottom: 20px;
  text-align: justify;
}

.text-block strong {
  color: var(--primary-blue);
}

.text-block em {
  font-style: italic;
  color: #64748b;
}

/* Pequenos status abaixo do texto */
.about-stats {
  display: flex;
  gap: 40px;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #e2e8f0;
}

.stat-mini .number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-blue);
  line-height: 1;
}

.stat-mini .label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
  text-transform: uppercase;
}

/* Estilo da Imagem (Moldura estilo Polaroid moderna) */
.image-frame {
  background: var(--white);
  padding: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-radius: 4px; /* Levemente arredondado */
  transition: transform 0.3s;
}

.image-frame:hover {
  transform: rotate(2deg) scale(1.02); /* Endireita ao passar o mouse */
}

.image-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* Responsividade */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr; /* Uma coluna no celular */
    gap: 40px;
  }

  .about-image {
    order: -1; /* Joga a imagem para cima no celular */
    padding: 0 20px;
  }

  .page-header h1 {
    font-size: 2.2rem;
  }
}
.about-page-content {
  padding-bottom: 120px;
  overflow-x: visible; /* Permite elementos decorativos saírem da caixa */
}

.about-grid {
  display: grid;
  /* MUDANÇA 1: Grid 1 para 1 (50% cada) para a imagem ficar maior */
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Ajustes no Texto */
.text-block p {
  font-size: 1.05rem; /* Texto levemente maior para leitura */
  line-height: 1.8;
  color: #374151;
  margin-bottom: 25px;
  text-align: justify;
}

/* Ajustes nos Stats (Números em baixo) */
.about-stats {
  display: flex;
  gap: 60px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #e5e7eb;
}

.stat-mini .number {
  font-size: 2.5rem; /* Números maiores */
  color: var(--kernit-blue);
}

/* --- A NOVA IMAGEM PREMIUM --- */
.image-wrapper-premium {
  position: relative;
  z-index: 10;
  padding-top: 20px; /* Espaço para o detalhe azul aparecer em cima/esquerda */
  padding-left: 20px;
}

/* O quadrado azul decorativo atrás da foto */
.blue-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%; /* Não ocupa tudo, para dar estilo */
  height: 80%;
  background-color: var(--primary-blue); /* Azul escuro */
  border-radius: 12px;
  z-index: 1; /* Fica atrás da foto */
}

/* A Foto Principal */
.main-photo {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.15); /* Sombra suave */
  z-index: 2; /* Fica na frente do quadrado azul */
  border: 4px solid var(--white); /* Borda branca para separar do fundo */
  display: block;
  object-fit: cover;
}

/* Efeito Hover na Imagem */
.image-wrapper-premium:hover .main-photo {
  transform: translateY(-5px); /* Levanta um pouco */
  transition: transform 0.4s ease;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr; /* Uma coluna no celular */
    gap: 50px;
  }

  .image-wrapper-premium {
    padding: 0; /* Remove padding extra no celular */
    margin-bottom: 30px;
  }

  .blue-backdrop {
    display: none; /* Simplifica no celular removendo o fundo azul deslocado */
  }

  .about-text {
    order: 2; /* Texto fica em baixo */
  }

  .about-image {
    order: 1; /* Imagem fica em cima */
  }
}
/* --- SECÇÃO DIFERENCIAIS (Versão Clara / Light) --- */
.differentials-light-section {
  padding: 100px 0;
  background-color: var(--white); /* Fundo Branco conforme imagem */
}

.diff-light-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Metade Texto, Metade Cards */
  gap: 60px;
  align-items: center;
}

/* -- Lado Esquerdo (Texto) -- */
.diff-text-area h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--primary-blue);
  margin-bottom: 10px;
}

.diff-features-list {
  margin: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.diff-feature-item h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
  text-transform: uppercase;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.diff-feature-item p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #64748b;
  max-width: 90%;
}

/* Botões */
.diff-buttons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

/* Botão Outline Azul (Saiba Mais) */
.btn-outline-blue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 34px;
  border: 2px solid var(--kernit-blue);
  color: var(--kernit-blue);
  background: transparent;
  text-decoration: none;
  font-weight: 700;
  border-radius: 6px;
  transition: 0.3s;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.btn-outline-blue:hover {
  background: var(--kernit-blue);
  color: var(--white);
}

/* -- Lado Direito (Grid de Cards) -- */
.diff-cards-area {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colunas de cards */
  gap: 20px;
}

.diff-white-card {
  background: #fff;
  border: 1px solid #f0f0f0; /* Borda bem suave */
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* Sombra muito leve */
  transition: all 0.3s ease;
}

.diff-white-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-blue);
}

.diff-white-card i {
  font-size: 2.5rem;
  color: var(--kernit-blue); /* Ícone azul */
  margin-bottom: 20px;
}

.diff-white-card h4 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--primary-blue);
  margin-bottom: 15px;
  text-transform: uppercase;
}

.diff-white-card p {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
}

/* -- Responsividade -- */
@media (max-width: 900px) {
  .diff-light-grid {
    grid-template-columns: 1fr; /* Empilha texto e cards */
    gap: 50px;
  }

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

  .diff-features-list {
    align-items: center; /* Centraliza os textos */
  }

  .diff-feature-item p {
    max-width: 100%;
  }

  .green-line-left {
    margin: 15px auto 40px auto; /* Centraliza a linha verde no mobile */
  }

  .diff-buttons {
    justify-content: center;
    flex-direction: column;
  }

  .btn-outline-blue,
  .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 500px) {
  .diff-cards-area {
    grid-template-columns: 1fr; /* Cards ficam um embaixo do outro no celular pequeno */
  }
} /* --- SECÇÃO MISSÃO, VISÃO, VALORES (Redesign Premium) --- */
.mvv-section {
  padding: 120px 0;
  background: var(--gradient-blue); /* Usa o gradiente azul escuro do topo */
  color: var(--white);
  position: relative;
  overflow: hidden;
}

/* Overlay de pontilhados para textura (reaproveitando estilo do Hero) */
.bg-dots-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.1) 1.5px,
    transparent 1.5px
  );
  background-size: 30px 30px;
  pointer-events: none;
}

/* Ajustes de Cabeçalho para fundo escuro */
.content-white h2 {
  color: var(--white);
}
.content-white .section-subtitle {
  color: var(--accent-blue);
}

.blue-line-center {
  width: 60px;
  height: 4px;
  background: var(--accent-blue);
  border: none;
  margin: 20px auto;
  border-radius: 2px;
}

/* --- ESTILO GERAL DOS CARDS MVV --- */
.mvv-card {
  background: var(--white);
  color: var(--text-dark);
  border-radius: 16px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); /* Sombra mais marcada para destacar do fundo escuro */
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
}

/* Efeito Hover de Flutuação */
.mvv-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

.mvv-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #64748b; /* Cinza para texto de leitura */
}

/* --- GRID PRINCIPAL (TOP 3) --- */
.mvv-main-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}

.main-card {
  border-top: 5px solid var(--kernit-blue); /* Detalhe azul no topo */
}

/* Círculo do Ícone */
.card-icon-circle {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-blue), var(--kernit-blue));
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 25px auto;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
}

.card-icon-circle i {
  font-size: 2.5rem;
  color: var(--white);
}

.main-card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-blue);
  margin-bottom: 15px;
  letter-spacing: 1px;
}

/* --- GRID SECUNDÁRIO (BOTTOM 4) --- */
.values-secondary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.secondary-card {
  padding: 30px 20px; /* Um pouco menores */
  background: rgba(255, 255, 255, 0.95); /* Leve transparência */
}

.secondary-card:hover {
  background: var(--white);
  border-bottom: 4px solid var(--accent-blue); /* Detalhe no hover */
}

.status-icon {
  font-size: 2.2rem;
  color: var(--accent-blue);
  margin-bottom: 20px;
  display: block;
}

.secondary-card h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary-blue);
  margin-bottom: 10px;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 1000px) {
  .mvv-main-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
  }
  .values-secondary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .values-secondary-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .mvv-section {
    padding: 80px 0;
  }
}
/* --- LINHA DO TEMPO HORIZONTAL (SLIDER) --- */
.timeline-horizontal-section {
  padding: 100px 0;
  background: var(--gradient-blue);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

/* Dica de Swipe */
.swipe-hint {
  font-size: 0.9rem;
  color: #fff;
  margin-top: -10px;
  animation: slideRight 1.5s infinite;
}
@keyframes slideRight {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.5;
  }
  50% {
    transform: translateX(10px);
    opacity: 1;
  }
}

/* Container de Rolagem */
.timeline-scroller {
  width: 100%;
  overflow-x: auto; /* Permite rolar para o lado */
  padding-bottom: 40px; /* Espaço para o scrollbar não colar */
  padding-top: 20px;
  /* Esconde barra de rolagem no Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-blue) rgba(255, 255, 255, 0.1);
}

/* Personaliza a barra de rolagem (Chrome/Safari) */
.timeline-scroller::-webkit-scrollbar {
  height: 8px;
}
.timeline-scroller::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.timeline-scroller::-webkit-scrollbar-thumb {
  background: var(--accent-blue);
  border-radius: 4px;
}

/* O Trilho onde ficam os itens */
.timeline-track {
  display: flex; /* Coloca um item ao lado do outro */
  gap: 0; /* O espaçamento é controlado pelo padding do item */
  position: relative;
  padding: 0 50px; /* Margem nas pontas */
  min-width: max-content; /* Garante que cresce o quanto precisar */
}

/* A Linha Azul Central */
.absolute-line {
  position: absolute;
  top: 50px; /* Alinhado com as bolinhas */
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(37, 99, 235, 0.3);
  border-radius: 2px;
  z-index: 1;
}

/* ITEM INDIVIDUAL */
.h-timeline-item {
  position: relative;
  width: 320px; /* Largura fixa de cada card */
  padding: 0 20px;
  flex-shrink: 0; /* Não deixa encolher */
  text-align: center;
  z-index: 2;
}

/* Ano (Em cima da linha) */
.h-year {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 35px; /* Empurra para cima da linha */
  opacity: 0.8;
  transition: 0.3s;
}

/* Bolinha (Na linha) */
.h-dot {
  width: 20px;
  height: 20px;
  background: var(--accent-blue);
  border-radius: 50%;
  margin: -10px auto 30px auto; /* Centraliza na linha */
  position: relative;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3);
  transition: all 0.3s;
}

/* Card Branco (Em baixo da linha) */
.h-card {
  background: var(--white);
  padding: 25px;
  border-radius: 12px;
  text-align: left;
  position: relative;
  border-top: 4px solid var(--accent-blue);
  transition: transform 0.3s ease;
  min-height: 180px; /* Altura mínima para alinhar */
}

/* Efeitos Hover */
.h-timeline-item:hover .h-year {
  color: var(--accent-blue);
  transform: scale(1.1);
  opacity: 1;
}

.h-timeline-item:hover .h-dot {
  background: var(--white);
  transform: scale(1.2);
  box-shadow: 0 0 15px var(--accent-blue);
}

.h-timeline-item:hover .h-card {
  transform: translateY(-10px); /* Card sobe */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Destaque 2005 */
.highlight-year .h-year {
  color: var(--kernit-blue);
  font-size: 1.8rem;
}

.highlight-year .h-dot.big-star {
  width: 40px;
  height: 40px;
  top: -10px;
  background: var(--kernit-blue);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.highlight-card-bg {
  border-top-color: var(--kernit-blue);
  background: #f8fafc;
}

.h-card h4 {
  color: var(--primary-blue);
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-weight: 800;
}

.h-card p {
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Ícone transparente de fundo no card */
.icon-bg {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 3rem;
  color: rgba(14, 42, 71, 0.05); /* Quase invisível */
  pointer-events: none;
}
/* --- PÁGINA DE PRODUTOS --- */
.products-page-section {
  padding: 80px 0 120px 0; /* Espaço em cima e em baixo */
  background-color: var(--white);
}

/* Garante que as imagens dos produtos fiquem sempre bonitas e contidas */
.product-img-box img {
  max-height: 180px; /* Limite de altura para ficarem todas iguais */
  width: auto;
  max-width: 100%;
}
/* --- PÁGINA DE DETALHES DO PRODUTO (nty60-k.html) --- */

/* 1. HERO SECTION (Topo) */
.product-hero-section {
  padding: 80px 0;
  background-color: #f8fafc; /* Fundo cinza bem claro */
  border-bottom: 1px solid #e2e8f0;
}

.product-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.p-hero-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  /* Sombra suave para destacar a máquina */
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1));
}
.p-brand-tag img {
  height: 40px; /* Define uma altura fixa pequena */
  width: auto; /* A largura ajusta-se automaticamente */
  max-width: 200px; /* Garante que não estoure em telas pequenas */
  margin-bottom: 20px;
  display: block; /* Garante que fique na sua própria linha */

  /* Opcional: Se quiser alinhar à esquerda junto com o texto */
  margin-left: 0;
}

.p-hero-info h1 {
  font-size: 2.5rem;
  color: var(--primary-blue);
  font-weight: 800;
  margin-bottom: 5px;
  margin-top: 10px;
}

.p-hero-info .subtitle {
  font-size: 1.1rem;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 20px;
}

.p-hero-info .description {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: var(--text-dark);
}

.specs-list {
  list-style: none;
  margin-bottom: 30px;
  background: var(--white);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  display: inline-block;
}

.specs-list li {
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.specs-list li:last-child {
  margin-bottom: 0;
}

/* 2. CONTEÚDO + SIDEBAR */
.product-content-section {
  padding: 80px 0;
  background-color: var(--white);
}

.content-sidebar-grid {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Esquerda larga (2), Direita estreita (1) */
  gap: 60px;
}

/* Coluna Esquerda (Conteúdo) */
.content-block {
  margin-bottom: 40px;
}

.content-block h3 {
  color: var(--text-dark);
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 15px;
}

.advantages-list {
  list-style: disc; /* Bolinhas */
  padding-left: 20px;
  color: #4b5563;
  line-height: 1.8;
}

.example-image img {
  margin-top: 15px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.example-image {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Área de Downloads */
.downloads-block small {
  font-weight: 400;
  font-size: 0.8rem;
  color: #94a3b8;
}

.download-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
}

.download-item h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.pdf-link {
  color: #00cba9; /* Verde Turquesa (estilo link) */
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s;
}

.pdf-link:hover {
  color: var(--accent-blue);
  text-decoration: underline;
}

/* Coluna Direita (Sidebar) */
.sidebar-products {
  background: #f8fafc;
  padding: 30px;
  border-radius: 12px;
  height: fit-content; /* Altura ajusta ao conteúdo */
}

.sidebar-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.sidebar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--white);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  transition: transform 0.3s;
}

.sidebar-item:hover {
  transform: translateY(-5px);
  border-color: var(--accent-blue);
}

.sidebar-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
  max-height: 100px; /* Limita altura para não ficar gigante */
  object-fit: contain;
}

.btn-sidebar {
  background-color: #008b9e; /* Azul petróleo da imagem */
  color: var(--white);
  width: 100%;
  text-align: center;
  padding: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
}

.sidebar-item:hover .btn-sidebar {
  background-color: var(--primary-blue);
}

/* Responsividade */
@media (max-width: 900px) {
  .product-hero-grid,
  .content-sidebar-grid {
    grid-template-columns: 1fr; /* Tudo em uma coluna no celular */
    gap: 40px;
  }

  .p-hero-info {
    order: -1; /* Texto em cima da imagem no celular? Ou deixe normal */
    text-align: center;
  }

  .p-hero-image {
    text-align: center;
  }

  .sidebar-products {
    order: 2; /* Sidebar vai para o final da página */
  }
}
/* --- ESTILOS ESPECÍFICOS SMP 3000 GOLD --- */

/* Tabela de Aplicações */
.specs-table {
  width: 100%;
  border-collapse: collapse; /* Junta as bordas */
  margin-bottom: 20px;
  background-color: #f8fafc;
}

.specs-table td {
  border: 1px solid #cbd5e1; /* Cor da borda cinza */
  padding: 12px 15px;
  font-size: 0.9rem;
  color: var(--text-dark);
  font-weight: 500;
}

/* Efeito Zebrado na tabela (opcional, fica bonito) */
.specs-table tr:nth-child(even) {
  background-color: #fff;
}
/* --- AJUSTE ELETRODOS (Imagem Única) --- */
.electrodes-full-image img {
  width: 100%;
  max-width: 500px; /* Limita para não ficar gigante */
  height: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  background-color: #fff;
  display: block;
}
/* Grid de Eletrodos */
.electrodes-grid {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.electrode-item {
  text-align: center;
  border: 1px solid #e2e8f0;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  width: 80px;
}

.electrode-item img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 5px;
}

.electrode-item span {
  font-weight: 800;
  color: var(--primary-blue);
}

/* Botões de Ação (Download e Upgrade) */
.action-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #f1f5f9;
}

.btn-download {
  color: #64748b;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s;
}

.btn-download:hover {
  color: var(--text-dark);
}

.btn-upgrade {
  color: #00cba9; /* Verde Turquesa */
  text-decoration: none;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

.btn-upgrade:hover {
  color: var(--accent-blue);
  text-decoration: underline;
}
/* --- ESTILOS ESPECÍFICOS PONTOMATIC --- */

/* Botão de Download Verde (Estilo PDF) */
.btn-download-green {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #059669; /* Verde escuro */
  font-weight: 700;
  text-decoration: none;
  background-color: #ecfdf5; /* Verde bem clarinho */
  padding: 12px 20px;
  border-radius: 6px;
  border: 1px solid #d1fae5;
  transition: all 0.3s;
  font-size: 0.9rem;
  margin-right: 15px;
  margin-bottom: 10px;
}

.btn-download-green:hover {
  background-color: #059669;
  color: #fff;
  transform: translateY(-2px);
}

/* Caixa de Aviso (Warning Box) */
.warning-box {
  margin-top: 40px;
  background-color: #fef2f2; /* Vermelho muito claro */
  border-left: 5px solid #ef4444; /* Vermelho alerta */
  padding: 20px;
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  color: #b91c1c; /* Texto vermelho escuro */
}

.warning-box i {
  font-size: 1.5rem;
  margin-top: 2px;
}

.warning-box p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0; /* Remove margem padrão do p */
}

.warning-box strong {
  font-weight: 800;
  text-transform: uppercase;
}
/* --- AJUSTE PARA O CARD CLICÁVEL --- */
a.product-card {
  display: block; /* Garante que o link ocupe o espaço todo */
  text-decoration: none; /* Remove sublinhado azul feio */
  color: inherit; /* Mantém as cores originais do texto */
}

/* Mantém o comportamento ao passar o mouse */
a.product-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-blue);
  transform: translateY(-5px);
}
/* --- PÁGINA DE CONTATO (Estilo Clean) --- */
.contact-page-section {
  padding: 80px 0;
  background-color: var(--white);
}

.contact-grid-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* Form um pouco maior */
  gap: 60px;
  margin-bottom: 100px; /* Espaço para a localização */
}

/* Formulário */
.form-intro {
  color: #64748b;
  margin-bottom: 30px;
}

.kernit-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.kernit-form input,
.kernit-form textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  color: var(--text-dark);
  transition: border 0.3s;
}

.kernit-form input:focus,
.kernit-form textarea:focus {
  outline: none;
  border-color: var(--kernit-blue);
}

/* Card de Informações (Direita) */
.contact-info-card {
  background: var(--white);
  padding: 50px;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); /* Sombra suave igual imagem */
  border: 1px solid #f1f5f9;
  height: fit-content;
}

.info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.info-list li {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 1.1rem;
  color: var(--text-dark);
  font-weight: 600;
}

.info-list i {
  color: var(--kernit-blue); /* Ícones azuis */
  font-size: 1.5rem;
  width: 30px; /* Alinhamento fixo */
  text-align: center;
}

.email-item span {
  text-transform: uppercase;
  font-weight: 700;
}

/* Localização (Parte de Baixo) */
.location-split-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* Mapa maior */
  gap: 60px;
  align-items: center;
}

.address-text {
  display: flex;
  gap: 15px;
  margin: 30px 0;
}

.address-text i {
  color: var(--kernit-blue);
  font-size: 1.8rem;
}

.address-text p {
  font-weight: 700;
  color: var(--primary-blue);
  text-transform: uppercase;
  line-height: 1.5;
}

.geo-buttons {
  display: flex;
  gap: 15px;
}

.btn-maps-outline {
  border: 2px solid var(--kernit-blue);
  color: var(--kernit-blue);
  padding: 12px 30px;
  text-decoration: none;
  font-weight: 800;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
}

.btn-maps-outline:hover {
  background: var(--kernit-blue);
  color: white;
}

.btn-waze-filled {
  background: var(--kernit-blue);
  color: white;
  padding: 12px 30px;
  text-decoration: none;
  font-weight: 800;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
}

.btn-waze-filled:hover {
  background: var(--primary-blue);
}

.map-card-wrapper {
  background: white;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.map-card-wrapper iframe {
  border-radius: 8px;
}

/* Mobile */
@media (max-width: 900px) {
  .contact-grid-layout,
  .location-split-grid,
  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-info-card {
    padding: 30px;
  }
}
.insta-loader {
  grid-column: 1 / -1; /* Ocupa a largura toda do grid para centralizar */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  color: rgba(255, 255, 255, 0.9);
}

.insta-loader i {
  font-size: 3.5rem;
  color: #00cba9; /* Verde/Azul claro da Kernit */
  margin-bottom: 20px;
}
.insta-loader p {
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Garante que o grid tenha uma altura mínima enquanto carrega */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  min-height: 300px; /* Evita que o site "pule" quando carregar */
}
/* Estilos do Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* Fundo branco ou a cor do seu site */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999; /* Garante que fique acima de TUDO */
  transition:
    opacity 0.5s ease,
    visibility 0.5s;
}

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

/* O Spinner Animado */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #0078d4; /* Azul Kernit */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

.loader-content p {
  font-family: "Montserrat", sans-serif;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Classe para esconder com suavidade */
.preloader-hidden {
  opacity: 0;
  visibility: hidden;
}
/* Garante que o header tenha uma transição suave */
#header-container {
  position: fixed; /* Fixa no topo */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.4s ease-in-out; /* Animação de subir/descer */
}

/* Classe que esconde o header (será aplicada via JS ao descer) */
.header-hidden {
  transform: translateY(-100%);
}

/* Classe que mostra o header (será aplicada ao subir) */
.header-visible {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra para destacar ao subir */
}
/* Estilo base dos links do rodapé */
.footer-link {
  color: inherit; /* Mantém a cor original do texto do footer */
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}

/* Efeito Hover */
.footer-link:hover {
  color: #0078d4; /* Azul Kernit ao passar o mouse */
  transform: translateX(5px); /* Pequeno deslocamento para a direita */
}

/* Ajuste na lista para os ícones não mexerem junto com o texto no hover */
.contact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.contact-list li i {
  color: #0078d4; /* Ícones sempre azuis ou na cor de destaque */
  width: 20px;
}
.footer-bottom a:hover {
  opacity: 0.8;
  text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
} /* Ajuste para o Header Fixo em Telas Pequenas */
@media (max-width: 768px) {
  /* Força o header a ter no máximo a largura da tela */
  #header-container {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 70px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 20px; /* Respiro nas laterais */
  }

  /* O elemento interno que segura logo e menu */
  .header-content-inner {
    /* Ou o nome da div que envolve logo e menu */
    display: flex;
    justify-content: space-between; /* Logo na esquerda, Menu na direita */
    align-items: center;
    width: 100%;
  }

  /* Reduz o tamanho do Logo no Celular */
  #header-container img {
    max-width: 130px; /* Ajuste esse valor conforme necessário */
    height: auto;
  }

  /* Ajusta o Menu Hambúrguer */
  .menu-toggle {
    /* Use a classe ou ID real do seu botão hambúrguer */
    font-size: 24px;
    cursor: pointer;
    z-index: 1001;
    margin-left: auto; /* Garante que ele fique na direita */
  }

  /* Corrige o menu que abre (mobileNav) */
  #mobileNav {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: #fff;
    display: none; /* JS controla isso */
    flex-direction: column;
    z-index: 1000;
  }
}
/* --- MOBILE ESPECÍFICO --- */
@media (max-width: 900px) {
  .header-content {
    height: 70px;
  }

  .logo img {
    height: 35px; /* Menor no celular */
  }

  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #0078d4;
    font-size: 25px;
    cursor: pointer;
    padding: 10px;
    flex-shrink: 0; /* Impede o botão de sumir */
  }

  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: #fff;
    display: none; /* JS controla */
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    gap: 25px;
  }
}

/* --- POPUP CORRIGIDO (Ficou gigante na imagem) --- */
.modal-content {
  max-width: 320px !important; /* Limita a largura */
  padding: 25px !important;
  border-radius: 15px !important;
}

.modal-icon svg {
  width: 50px !important; /* Fixa o tamanho do check */
  height: 50px !important;
}
/* Lightbox Style */
.gallery-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 20000;
  justify-content: center;
  align-items: center;
  cursor: zoom-out;
  backdrop-filter: blur(5px);
}

.gallery-lightbox img {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s ease;
  cursor: default;
}

.gallery-lightbox.active img {
  transform: scale(1);
}

.close-lightbox {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 50px;
  font-weight: bold;
  cursor: pointer;
}

/* Ajuste no item da galeria para mostrar que é clicável */
.gallery-item {
  cursor: pointer;
}
.review-item {
  margin-bottom: 25px;
}

.stars {
  color: #ffd700;
  font-size: 18px;
  margin: 8px 0;
}

.review-date {
  font-size: 13px;
  color: #888;
}
.review-text {
  font-style: italic;
  color: #4b5563;
  line-height: 1.7;
  margin: 20px 0;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* Limita a 4 linhas para manter altura igual */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-author h4 {
  color: var(--primary-blue);
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
}
.testimonial-nav {
  background: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  position: absolute;
  z-index: 10;
  color: var(--primary-blue);
  transition: 0.3s;
}
.testimonial-nav:hover {
  background: var(--kernit-blue);
  color: white;
}
.testimonial-nav.prev {
  left: -60px;
}
.testimonial-nav.next {
  right: -60px;
}

/* Responsividade */
@media (max-width: 1100px) {
  .testimonial-nav {
    display: none;
  } /* Esconde setas em telas médias */
  .testimonial-carousel-wrapper {
    padding: 0 20px;
  }
}
@media (max-width: 900px) {
  .testimonial-item {
    min-width: 100%; /* No celular, mostra apenas 1 por vez */
  }
  .nav-arrow {
    display: none; /* Esconde setas no mobile para usar scroll ou swipe */
  }
}
@media (max-width: 768px) {
  .testimonial-item {
    min-width: 100%; /* Exibe 1 por vez no celular */
  }
}
/* Sobe as barrinhas para cima dos cards ou dá mais espaço */
.hero-extended {
  padding-bottom: 200px !important; /* Aumenta o respiro para as barras não baterem nos cards */
}

.hero-slider-indicators {
  bottom: 160px !important; /* Posiciona as barras claramente acima dos cards brancos */
  z-index: 100; /* Garante que fiquem na frente de qualquer fundo */
}

.floating-cards-section {
  position: relative;
  z-index: 10; /* Mantém os cards em uma camada abaixo das barrinhas do slider */
}
/* Força 1 depoimento por vez */
.testimonial-item {
  min-width: 100%;
  flex-shrink: 0;
  padding: 0 10px;
}

.testimonial-inner-card {
  max-width: 800px; /* Evita que o card fique largo demais em telas grandes */
  margin: 0 auto;
  text-align: center;
}

/* Estilo das 5 bolinhas de indicação */
.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.t-dot {
  width: 12px;
  height: 12px;
  background: #cbd5e1;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.t-dot.active {
  background: var(--kernit-blue);
  transform: scale(1.2);
}

.testimonial-carousel-wrapper {
  max-width: 950px; /* Ajuste para o layout de 1 card + setas */
  margin: 0 auto;
}
/* Estilo para alinhar os campos Select com os Inputs do site */
.kernit-form select {
  width: 100%;
  padding: 15px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  color: var(--text-dark);
  background-color: #fff;
  cursor: pointer;
  appearance: none; /* Remove seta padrão do sistema */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230033a0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 20px;
}

.kernit-form select:focus {
  outline: none;
  border-color: var(--kernit-blue);
}
.section-header-center {
  text-align: center;
  margin-bottom: 60px;
}
.section-description {
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto;
}
.diff-new-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colunas no PC */
  gap: 30px;
}
.diff-new-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(10px);
}

.diff-new-card:hover {
  background: var(--white);
  transform: translateY(-15px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.diff-icon-wrapper {
  width: 70px;
  height: 70px;
  background: rgba(37, 99, 235, 0.2);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  transition: 0.3s;
}

.diff-new-card i {
  font-size: 2rem;
  color: var(--accent-blue);
}

.diff-new-card h4 {
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.diff-new-card p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  transition: 0.3s;
}

/* Mudança de cor no Hover */
.diff-new-card:hover h4 {
  color: var(--primary-blue);
}
.diff-new-card:hover p {
  color: var(--text-dark);
}
.diff-new-card:hover .diff-icon-wrapper {
  background: var(--kernit-blue);
}
.diff-new-card:hover i {
  color: var(--white);
}

/* Responsividade Diferenciais */
@media (max-width: 1000px) {
  .diff-new-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas em tablets */
  }
}

@media (max-width: 700px) {
  .diff-new-grid {
    grid-template-columns: 1fr; /* 1 coluna no celular */
  }
  .differentials-section {
    padding: 60px 0;
  }
}
/* Garante que o cabeçalho da seção seja visível sobre o fundo escuro */
.differentials-section .section-header-center h2 {
  color: #ffffff !important; /* Branco puro para o título principal */
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.differentials-section .section-subtitle {
  color: var(
    --accent-blue
  ) !important; /* Azul claro vibrante para o subtítulo */
  font-weight: 700;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 5px;
}

.differentials-section .section-description {
  color: rgba(
    255,
    255,
    255,
    0.7
  ) !important; /* Branco levemente transparente para o texto de apoio */
  font-size: 1.1rem;
  margin-top: 15px;
}

/* Ajuste da linha decorativa para não sumir */
.differentials-section .blue-line-center {
  background-color: var(--accent-blue) !important;
  opacity: 1;
}