/* assets/css/style.css */

:root {
  --brand-darkestblue: #030607;
  --brand-darkblue: #01333E; /* Cor principal do navbar no scroll e menu mobile */
  --brand-blue: #035F78;
  --brand-lightblue: #058AB0; /* Cor para CTAs antigos, pode ser substituída ou usada em conjunto */
  --brand-accent: #F59B1B;   /* NOVA COR DE DESTAQUE E HOVER */
  --text-light: #FFFFFF;
  --text-dark: #1f2937; /* Tailwind gray-800, para melhor contraste */
  --line-gray: #E9E8E8;
}

/* Configuração da largura máxima do conteúdo */
.site-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem;
}
@media (min-width: 640px) { /* sm */
  .site-container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) { /* lg */
  .site-container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem;
  }
}
/* Largura máxima de 1350px para o conteúdo */
@media (min-width: 1350px) {
  .site-container {
    max-width: 1350px;
  }
}

/* Estilo para o body ENQUANTO o preloader está ativo, e o DOM pronto */
body.body-visible-with-preloader {
  opacity: 1 !important; /* Torna o body visível (coberto pelo preloader) */
  overflow: hidden !important; /* Mantém o scroll bloqueado */
}

/* Estilos para o preloader principal (o que será animado pelo style.css) */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--brand-darkblue); /* Mesma cor do .preloader-fouc-initial-styles */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999; /* Mesmo z-index alto */
  opacity: 1; /* Começa opaco */
  visibility: visible; /* Começa visível */
  /* Transição para desaparecer */
  transition: opacity 0.6s ease-in-out 0.3s, visibility 0s linear 0.9s; /* Atraso na opacidade para dar tempo à logo */
}

#preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Importante para não bloquear interações após sumir */
}

/* Estilo para a imagem da logo DENTRO do #preloader principal */
#preloader img {
  width: 150px; /* Mesmo tamanho do preloader-fouc-initial-styles img */
  height: auto;
  opacity: 0; /* Começa invisível para animar */
  transform: scale(0.95);
  /* Animação de fade-in e leve scale para a logo */
  animation: fadeInLogoSimple 1.2s ease-out 0.5s forwards; /* Delay para dar tempo ao CSS carregar */
}

@keyframes fadeInLogoSimple {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ... (resto do seu style.css) ... */
body {
  font-family: 'Work Sans', sans-serif; /* Fonte normal: Work Sans Regular */
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.6;
  /* REMOVIDO padding-top: o header fica sobre o banner */
}

h1, h2, h3, h4, h5, h6, .font-title {
  font-family: 'Work Sans', sans-serif; /* Fonte para títulos: Work Sans Extrabold */
  font-weight: 800;
}

/* ===== TOPBAR ===== */
#topbar {
  background-color: transparent;
  height: 40px;
  /* text-shadow: 0 1px 2px rgba(0,0,0,0.3); Adiciona legibilidade sobre o banner */
}

#topbar .topbar-info,
#topbar .topbar-social {
  color: var(--text-light);
}
#topbar .topbar-social a:hover,
#topbar .topbar-social a:focus {
  color: var(--brand-accent);
}
#topbar .topbar-info .fa-map-marker-alt {
  color: var(--brand-accent); /* Cor do ícone de localização */
}

#topbar .separator-line {
  width: 1px;
  height: 16px;
  background-color: var(--line-gray);
  opacity: 0.5;
  margin: 0 0.5rem;
}

.topbar-divider {
  border: none;
  height: 1px;
  background-color: var(--line-gray);
  opacity: 0.2; /* Mais sutil */
}

/* ===== NAVBAR ===== */
#navbar {
  background-color: transparent; /* Inicialmente transparente */
  height: 80px;
  box-shadow: none;
  /* top: 40px;  definido pelo JS para o efeito de esconder topbar */
}

#navbar.scrolled {
  background-color: var(--brand-darkblue) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  top: 0 !important; /* Ocupa o lugar do topbar */
}

#navbar .nav-link {
  color: var(--text-light);
  font-weight: 400; /* Regular, títulos são Extrabold */
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.3s ease;
  /* text-shadow: 0 1px 2px rgba(0,0,0,0.3); Adiciona legibilidade sobre o banner */
}

#navbar.scrolled .nav-link,
#navbar.scrolled #mobile-menu-button {
  color: var(--text-light);
  text-shadow: none;
}

#navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; /* Pequeno ajuste para não sobrepor o texto */
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--brand-accent); /* Cor de destaque para o sublinhado */
  transition: width 0.3s ease;
}

#navbar .nav-link:hover::after,
#navbar .nav-link.active::after {
  width: 100%;
}
#navbar .nav-link:hover,
#navbar .nav-link.active,
#navbar .nav-link:focus {
 color: var(--brand-accent); /* Cor de destaque para hover e ativo */
}

#navbar .logo img {
  transition: transform 0.3s ease;
}
#navbar .logo img:hover {
  transform: scale(1.05);
}

/* Botão CTA Navbar */
.cta-button.whatsapp-button {
  background-color: var(--brand-accent); /* Cor de destaque */
  color: var(--brand-darkblue); /* Texto escuro para contraste com laranja */
  padding: 0.65rem 1.3rem; /* Ajuste de padding */
  border-radius: 25px;
  font-weight: 800; /* Extrabold */
  transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
}

.cta-button.whatsapp-button:hover {
  background-color: var(--text-light); /* Fundo branco no hover */
  color: var(--brand-accent); /* Texto na cor de destaque */
  transform: translateY(-2px);
}
.cta-button.whatsapp-button .fa-whatsapp {
  font-size: 1.1em; /* Ícone um pouco maior */
}


/* Language Switcher */
.language-switcher button img {
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
  opacity: 0.7;
  filter: grayscale(30%); /* Levemente desaturado se não for o atual */
}
.language-switcher button:hover img,
.language-switcher button img.current-lang {
  opacity: 1;
  transform: scale(1.1);
  filter: grayscale(0%);
}


/* Menu Mobile */
#mobile-menu-button {
  color: var(--text-light);
}
#navbar.scrolled #mobile-menu-button {
  color: var(--text-light);
}
#mobile-menu-button:hover,
#mobile-menu-button:focus {
    color: var(--brand-accent);
}

#mobile-menu {
  background-color: var(--brand-darkblue);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Efeito Sanfona */
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linha separadora sutil */
}

#mobile-menu.open {
  max-height: 600px; /* Aumentado para garantir espaço para todos os itens + CTA + lang */
}

#mobile-menu .nav-link-mobile {
  color: var(--text-light);
  font-weight: 400; /* Work Sans Regular */
  /* padding: 0.75rem 1rem;  Definido via Tailwind no HTML (py-3 px-2) */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Linha mais sutil */
  transition: background-color 0.3s ease, color 0.3s ease;
  display: block;
}
#mobile-menu .nav-link-mobile:last-of-type { /* Seleciona o último link da lista principal */
  border-bottom: none;
}

#mobile-menu .nav-link-mobile:hover,
#mobile-menu .nav-link-mobile.active,
#mobile-menu .nav-link-mobile:focus {
  background-color: var(--brand-blue);
  color: var(--brand-accent); /* Cor de destaque no hover/ativo */
}

/* ===== HERO BANNER ===== */
#hero {
  /* padding-top é aplicado ao container interno do hero para o header sobreposto */
}

.hero-background-image {
  background-image: url('../images/herobg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-gradient-overlay {
  background: linear-gradient(to right,
    rgba(3, 6, 7, 0.9),      /* HEX 030607 com opacidade (um pouco mais escuro) */
    rgba(1, 51, 62, 0.85),   /* HEX 01333E com opacidade */
    rgba(3, 95, 120, 0.75)  /* HEX 035F78 com opacidade */
  );
}

#hero h1 {
  text-shadow: 0 2px 6px rgba(0,0,0,0.6); /* Sombra mais pronunciada */
}

#hero p {
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.hero-cta-button {
  background-color: var(--brand-accent); /* Cor de destaque */
  color: var(--brand-darkblue); /* Texto escuro para contraste */
  padding: 0.9rem 2.2rem; /* Ajuste de padding */
  border-radius: 30px;
  font-size: 1.1rem; /* Ajuste de tamanho */
  font-weight: 800; /* Work Sans Extrabold */
  text-transform: uppercase;
  letter-spacing: 0.5px; /* Ajuste de espaçamento */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-cta-button:hover {
  background-color: var(--text-light); /* Fundo branco no hover */
  color: var(--brand-accent); /* Texto na cor de destaque */
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 20px rgba(var(--brand-accent-rgb, 245, 155, 27), 0.4); /* Sombra colorida no hover */
}
/* Para a sombra colorida, precisamos da versão RGB da cor de destaque */
/* Se --brand-accent é #F59B1B, então RGB é 245, 155, 27 */
/* Pode adicionar :root { --brand-accent-rgb: 245, 155, 27; } ou aplicar diretamente. */
/* Por simplicidade, vou usar direto na sombra do hover. */


/* ===== RODAPÉ (FOOTER) ===== */
.footer-gradient {
  background: linear-gradient(135deg, var(--brand-darkestblue) 0%, var(--brand-darkblue) 50%, var(--brand-blue) 100%);
}

#footer h5.font-title { /* Garantir que use a fonte de título */
  color: var(--brand-accent); /* Destaque para os títulos das seções do rodapé */
  letter-spacing: 0.5px;
}

#footer .footer-link { /* Classe para links do rodapé */
  color: var(--text-light);
  opacity: 0.8;
  transition: color 0.3s ease, opacity 0.3s ease;
}

#footer .footer-link:hover,
#footer .footer-link:focus {
  color: var(--brand-accent);
  opacity: 1;
}
#footer .footer-link i {
  margin-right: 0.3em;
  color: var(--brand-accent); /* Ícones no rodapé com cor de destaque */
}


/* Back to Top Button */
#backToTopBtn {
  background-color: var(--brand-accent);
  color: var(--brand-darkblue); /* Contraste com o laranja */
  border: none;
  border-radius: 50%;
  width: 48px; /* Levemente menor */
  height: 48px;
  font-size: 18px; /* Ícone menor */
  cursor: pointer;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease, background-color 0.3s ease;
  visibility: hidden;
  opacity: 0;
}

#backToTopBtn.show {
  visibility: visible;
  opacity: 1;
}

#backToTopBtn:hover {
  background-color: var(--text-light);
  color: var(--brand-accent);
  transform: scale(1.1);
}

/* Ajustes Responsivos */
@media (max-width: 1023px) { /* lg breakpoint */
  /* O padding-top do body foi removido. O conteúdo do hero já é ajustado. */
  #navbar {
    /* O JS cuida da posição do navbar quando o topbar some no scroll */
  }
  #hero .site-container {
    /* Ajustes de padding para mobile já estão com Tailwind (pt-32) */
    /* Garantir que seja suficiente: topbar 40px + navbar 80px = 120px. pt-32 é 8rem = 128px. OK. */
  }
}

@media (max-width: 767px) { /* md breakpoint */
  #topbar {
     display: none; /* Esconder topbar em telas muito pequenas */
  }
  #navbar {
    top: 0 !important; /* Navbar vai para o topo se topbar estiver escondido */
  }
  #navbar.scrolled { /* Garantir que continue no topo */
    top: 0 !important;
  }
   #hero .site-container {
    padding-top: 6rem; /* 96px. navbar (80px) + um pouco de espaço. Ajustar se necessário */
  }
   #hero h1 {
    font-size: 2.25rem; /* text-4xl */
  }
  #hero p {
    font-size: 1rem; /* text-lg */
  }
  .hero-cta-button {
    padding: 0.8rem 1.8rem;
    font-size: 1rem;
  }
  .cta-button.whatsapp-button {
    font-size: 0.8rem;
    padding: 0.6rem 1.1rem;
  }
}

/* ... (seu CSS existente até o final do Hero Banner) ... */

/* ===== SEÇÃO A EMPRESA ===== */
.company-section {
  /* A altura é controlada por min-h-[viewport] no Tailwind para desktop */
}

.company-section .bg-brand-accent { /* Coluna esquerda */
  background-color: var(--brand-accent); /* #F59B1B */
}

.company-section .text-brand-darkblue h2,
.company-section .text-brand-darkblue p {
  color: var(--brand-darkblue);
}

.company-section .cta-button-secondary {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background-color: var(--brand-darkblue);
  color: var(--text-light);
  font-weight: 800;
  border-radius: 25px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  text-align: center;
}

.company-section .cta-button-secondary:hover {
  background-color: var(--brand-darkestblue);
  color: var(--brand-accent);
  transform: translateY(-2px);
}
.company-section .cta-button-secondary .fa-arrow-right {
    transition: transform 0.3s ease;
}
.company-section .cta-button-secondary:hover .fa-arrow-right {
    transform: translateX(4px);
}

/* Coluna da Imagem na seção "A Empresa" */
#company-image-column {
  /* Desktop: a altura será automática baseada no min-h da section e conteúdo da outra coluna */
  /* Mobile: altura controlada abaixo */
}

#company-image-column img {
  width: 100%;
  height: 100%; /* Faz a imagem preencher a altura da div #company-image-column */
  object-fit: cover;
  /* object-position: center; Se precisar ajustar o foco da imagem */
}

/* Responsividade para a seção "A Empresa" */
@media (max-width: 767px) { /* md breakpoint (mobile) */
  .company-section {
    min-height: auto; /* Remove a altura mínima da seção inteira para empilhar bem */
    flex-direction: column; /* Garante que as colunas empilhem */
  }

  /* Coluna da Imagem no Mobile */
  #company-image-column {
    width: 100%;
    /* AJUSTE AQUI A ALTURA DA IMAGEM NO MOBILE */
    height: 75vh; /* Ex: 75% da altura da viewport. AUMENTEI de 60vh */
                  /* Se ainda cortar, tente 80vh, 85vh ou um valor fixo alto como 500px ou 600px.
                     Lembre-se que 'cover' vai preencher, então se a imagem for MUITO retrato
                     e a viewport MUITO paisagem, algum corte lateral pode ocorrer, ou vice-versa. */
    order: 1; /* Garante que a imagem venha primeiro no mobile */
  }
  
  /* Coluna de Texto no Mobile */
  .company-section div[class*="bg-brand-accent"] { /* Seletor mais robusto para a coluna de texto */
    width: 100%;
    order: 2; /* Texto vem depois da imagem */
    padding: 2.5rem 1.5rem; /* Padding reduzido para mobile */
  }

   .company-section h2 {
    font-size: 2rem; /* Ajuste para título no mobile */
  }
  .company-section p {
    font-size: 0.95rem; /* Ajuste para texto no mobile */
  }
}

/* ===== SEÇÃO CLIENTES (CARROSSEL) ===== */
.client-carousel-section {
  background: linear-gradient(135deg, var(--brand-darkestblue) 0%, var(--brand-darkblue) 50%, var(--brand-blue) 100%);
  overflow: hidden; /* Crucial para o carrossel não quebrar o layout */
}

.client-carousel-section h2 { /* Título "Nossos Principais Clientes" */
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.client-logo-carousel { /* Contêiner geral do carrossel */
  width: 100%;
  display: flex; /* Necessário para o track funcionar corretamente */
  align-items: center;
  position: relative;
  /* Adiciona um mask-image para suavizar as bordas do carrossel (opcional, mas elegante) */
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.client-logo-track { /* A faixa que se move com os logos */
  display: flex; /* Coloca os logos em linha */
  align-items: center; /* Alinha verticalmente os logos */
  /* A largura será > 100% por causa dos clones, o JS cuida da duplicação */
  animation: scrollLogos 35s linear infinite; /* Ajuste a DURAÇÃO aqui (ex: 20s mais rápido, 40s mais lento) */
}

.client-logo-item { /* Cada item de logo individual */
  flex-shrink: 0; /* Impede que os logos encolham para caber */
  padding: 0 2rem; /* Espaçamento horizontal entre os logos (total 4rem) */
                       /* Ajuste esse padding para mais ou menos espaço */
  box-sizing: content-box; /* Para que o padding não afete a largura intrínseca do logo para cálculos de animação */
  display: flex; /* Para centralizar a imagem dentro do item se necessário */
  justify-content: center;
  align-items: center;
}

.client-logo-item img {
  max-height: 4rem;   /* Altura máxima dos logos (64px). Ajuste conforme necessário. */
  width: auto;        /* Mantém a proporção da imagem */
  filter: grayscale(80%) opacity(0.65); /* Logos em escala de cinza e levemente transparentes */
  transition: filter 0.3s ease, transform 0.3s ease;
  display: block; /* Remove espaço extra abaixo da imagem se for inline */
}

.client-logo-item:hover img {
  filter: grayscale(0%) opacity(1); /* Colorido e opaco no hover */
  transform: scale(1.1); /* Efeito de zoom no hover */
}

/* Animação do Carrossel */
@keyframes scrollLogos {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Move pela metade da largura total da track (que contém os logos originais + os clones) */
    /* Isso funciona porque o JS duplica os logos. Se você tem 6 logos originais, a track terá 12.
       Mover -50% da largura total da track move exatamente a largura dos 6 logos originais. */
    transform: translateX(-50%);
  }
}

/* Pausar animação no hover do carrossel (opcional) */
.client-logo-carousel:hover .client-logo-track {
  animation-play-state: paused;
}

/* ... (Resto do seu CSS: Rodapé, BackToTop, etc.) ... */

/* ... (seu CSS existente) ... */

/* Cor de fundo personalizada para a seção de valores */
.bg-custom-lightgray {
  background-color: #E9E8E8;
}

/* ===== SEÇÃO VALORES ===== */
#valores .selo-item img {
  /* Estilos para os selos, se necessário, além do Tailwind */
  /* Exemplo: filter: grayscale(50%); para um visual mais sutil */
}
#valores .selo-item p {
  /* Estilo para a legenda do selo */
}

/* assets/css/style.css */

/* ... (seu CSS existente ANTES da seção de serviços) ... */

/* ===== SEÇÃO SERVIÇOS (ROVs) ===== */
#servicos {
  position: relative; /* Necessário para o posicionamento absoluto do overlay */
  background-image: url('../images/fundosection.png'); /* SUA IMAGEM DE FUNDO AQUI */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Opcional: Efeito parallax. Remova se não gostar. */
  /* Os paddings py-16 e py-24 são aplicados via classes do Tailwind no HTML.
     Se precisar sobrescrever ou controlar apenas via CSS, adicione-os aqui:
     padding-top: 4rem;  (equivalente a py-16)
     padding-bottom: 6rem; (equivalente a py-24)
  */
}

/* Overlay para a seção de serviços */
#servicos::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* ESCOLHA E AJUSTE O OVERLAY: */
  background-color: rgba(255, 255, 255, 0.88); /* Overlay BRANCO com 88% de opacidade (bom para texto escuro) */
  /* Exemplo de overlay ESCURO (se o texto da seção fosse claro):
     background-color: rgba(1, 51, 62, 0.75); /* --brand-darkblue com 75% opacidade */
  z-index: 1; /* Overlay acima da imagem de fundo, abaixo do conteúdo */
}

/* Conteúdo da seção (site-container) acima do overlay */
#servicos > .site-container {
  position: relative;
  z-index: 2;
}

/* (Opcional) Ajuste geral de cor de texto para a seção, se necessário.
   Atualmente, o HTML usa text-brand-darkblue e text-gray-700, que devem funcionar
   bem com o overlay branco translúcido. */
/*
#servicos .font-title,
#servicos p,
#servicos ul li {
  color: var(--text-dark); // Exemplo, se o overlay for muito claro
}
*/

/* Botão Primário (Ex: Solicite Inspeção) */
#servicos .cta-button-primary {
  display: inline-flex;
  align-items: center;
  background-color: var(--brand-accent); /* Laranja */
  color: var(--brand-darkblue); /* Texto escuro */
  padding: 0.8rem 1.8rem;
  border-radius: 25px;
  font-weight: 800; /* Extrabold */
  transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#servicos .cta-button-primary:hover {
  background-color: var(--brand-blue); /* Azul escuro no hover */
  color: var(--text-light); /* Texto branco */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--brand-accent-rgb, 245, 155, 27), 0.3);
}

#servicos .cta-button-primary .fa-whatsapp {
  font-size: 1.2em;
}

/* Estilos para a Tabela Comparativa dentro da seção de serviços */
#servicos .comparative-table-section {
  /* O padding-top pt-8 md:pt-12 está no HTML */
}

#servicos .comparative-table-section h3 { /* Título "Comparativo Técnico dos ROVs" */
  /* Estilos específicos para este título se necessário, já usa font-title */
}

#servicos .comparative-table-section .overflow-x-auto {
  /* A div com rounded-md border border-gray-300 shadow-lg já está no HTML */
}

#servicos .comparative-table-section table {
  /* min-w-full divide-y divide-gray-300 text-sm já no HTML */
}

#servicos .comparative-table-section thead.bg-gray-100 {
  /* bg-gray-100 já no HTML, equivalente a background-color: #f3f4f6; */
}

#servicos .comparative-table-section thead th {
  /* px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wider já no HTML */
}

/* Colunas Coloridas na Tabela */
#servicos .comparative-table-section .col-rov-falcon {
  background-color: #f0f9ff; /* Azul muito claro (Ex: sky-50 do Tailwind) */
}

#servicos .comparative-table-section .col-rov-blue {
  background-color: #fffed1; /* Amarelo/Laranja muito claro (Ex: amber-50 do Tailwind é #fffbeb, #fffed1 é um pouco mais para o amarelo) */
}

#servicos .comparative-table-section .col-rov-cougar {
  background-color: #e8fff6; /* Amarelo/Laranja muito claro (Ex: amber-50 do Tailwind é #fffbeb, #fffed1 é um pouco mais para o amarelo) */
}
#servicos .comparative-table-section .col-rov-tiger {
  background-color: #f3e8fe; /* Amarelo/Laranja muito claro (Ex: amber-50 do Tailwind é #fffbeb, #fffed1 é um pouco mais para o amarelo) */
}

/* Corpo da tabela */
#servicos .comparative-table-section tbody {
  /* divide-y divide-gray-200 bg-white já no HTML para o fundo geral do tbody */
}

/* Ajuste para fundo de linhas pares se as colunas já têm cor */
#servicos .comparative-table-section table tbody tr:nth-child(even) td {
  /* Se quiser remover o efeito de listra das linhas para focar nas cores das colunas: */
  /* background-color: transparent !important; /* Use !important se necessário para sobrescrever */
}
/* Garante que a primeira coluna (Características) mantenha seu fundo original */
#servicos .comparative-table-section tbody td:first-child {
  background-color: #ffffff; /* Fundo branco para a primeira célula de dados de cada linha */
}
#servicos .comparative-table-section thead th:first-child {
   background-color: #f3f4f6; /* bg-gray-100, para o cabeçalho da primeira coluna */
}

#servicos .comparative-table-section tbody td {
  /* px-4 py-3 whitespace-nowrap text-gray-600 (ou font-medium text-gray-800 para a primeira) já no HTML */
}


/* Imagens dos ROVs (Falcon e Blue ROV 2) dentro da seção de serviços */
#servicos img[src*="rov-falcon"],
#servicos img[src*="blue-rov-2"] {
  /* rounded-lg shadow-xl w-full h-auto max-h-[500px] object-cover já no HTML */
  /* Nenhum estilo adicional aqui a menos que seja muito específico */
}


/* Ajustes responsivos específicos para a seção de serviços, se necessário.
   O Tailwind (md:grid-cols-2, order-X, md:order-X) já cuida de muito. */
@media (max-width: 767px) { /* md breakpoint */
  /* Exemplo de como garantir que as colunas de serviço empilhem corretamente se necessário
     (embora as classes 'order' do Tailwind geralmente façam isso) */
  /*
  #servicos .grid.md\:grid-cols-2 > div {
    order: initial !important;
  }
  #servicos .grid.md\:grid-cols-2 > div.md\:order-1 { order: 1 !important; }
  #servicos .grid.md\:grid-cols-2 > div.md\:order-2 { order: 2 !important; }
  */

  /* A tabela com overflow-x-auto deve funcionar bem em mobile para rolagem horizontal.
     Não são necessários mais ajustes aqui a menos que o comportamento não seja o esperado. */
}

/* ... (seu CSS existente DEPOIS da seção de serviços) ... */

/* ... (seu CSS existente) ... */

/* assets/css/style.css */

/* ... (seu CSS existente ANTES da seção de diferenciais) ... */

/* ===== SEÇÃO DIFERENCIAIS ===== */
#diferenciais {
  /* position: relative; já no HTML */
  /* text-white; já no HTML */
  /* py-16 md:py-24; já no HTML */
  /* overflow: hidden; já no HTML */
}

.diferenciais-background-image {
  background-image: url('../images/diferenciaisbg.jpg'); /* SUA IMAGEM DE FUNDO */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* AJUSTE AQUI PARA MAIOR CONTRASTE SE NECESSÁRIO */
  filter: blur(2px) brightness(0.6); /* Ex: Aumentei um pouco o blur e diminuí mais o brilho */
                                     /* Experimente com brightness(0.5) ou até menos se o texto estiver difícil de ler */
  /* Se a imagem já for escura, você pode reduzir o blur ou o brightness */
  position: absolute; /* Garante que cubra toda a seção #diferenciais */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0; /* Atrás do conteúdo e das colunas */
}

/* REMOVA OU COMENTE ESTA REGRA PARA TIRAR O GRADIENTE OVERLAY */
/*
.diferenciais-gradient-overlay {
  background: linear-gradient(to right,
    rgba(3, 6, 7, 0.92),
    rgba(1, 51, 62, 0.88),
    rgba(3, 95, 120, 0.85)
  );
  position: absolute; // Certifique-se de que estava aqui ou adicione
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; // Estava abaixo do conteúdo mas acima da imagem
}
*/

/* Conteúdo da seção (site-container) precisa estar acima da imagem de fundo */
#diferenciais > .site-container {
  position: relative;
  z-index: 2; /* Acima da imagem de fundo e de qualquer overlay que possa ter sido deixado */
}


/* Estilo para as colunas internas, para dar um destaque sutil e melhorar contraste do texto */
.diferenciais-coluna {
  /* AUMENTE A OPACIDADE AQUI SE O GRADIENTE FOI REMOVIDO */
  background-color: rgba(0, 0, 0, 0.45); /* Fundo preto translúcido mais forte para contraste */
                                         /* Experimente com 0.5, 0.6 se necessário */
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  backdrop-filter: blur(3px); /* Pode aumentar o blur aqui também */
  -webkit-backdrop-filter: blur(3px);
  /* padding e border-radius já estão no HTML */
  position: relative; /* Para garantir que o z-index funcione corretamente com o z-index do site-container */
  z-index: 3; /* Acima do site-container (que está acima da imagem de fundo) */
}

#diferenciais h2 {
  color: var(--text-light); /* Garante que os títulos sejam brancos */
  /* text-shadow: 0 1px 3px rgba(0,0,0,0.7); /* Sombra mais forte se necessário */
}

#diferenciais ul li,
#diferenciais .testimonial-quote p,
#diferenciais .testimonial-quote footer,
#diferenciais > .site-container > .grid > .diferenciais-coluna > p /* Parágrafo da segunda coluna */ {
  color: var(--text-light); /* Garante que o texto seja claro/branco */
  /* text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* Sombra para ajudar na legibilidade */
}
/* Certifique-se de que os ícones também tenham cor clara se não herdarem */
#diferenciais ul li .fas {
  width: 1.25em;
  color: var(--brand-accent); /* Mantém a cor de destaque para os ícones */
}


.testimonial-quote {
  background-color: rgba(255, 255, 255, 0.05); /* Fundo ainda mais sutil para o quote */
  border-l-4 border-brand-accent; /* A borda já está no HTML e deve se destacar */
  /* pl-6 py-4 italic mb-8 já no HTML */
  border-radius: 0 0.25rem 0.25rem 0;
}
.testimonial-quote footer {
  color: #ccc; /* Cor mais clara para o rodapé do testemunho */
}


/* CTA Button - Estilo já definido e deve funcionar */
.cta-button-secondary-light {
  /* ... (estilos existentes) ... */
}

/* Linha divisória opcional */
@media (min-width: 768px) {
  /* ... (estilos existentes) ... */
}

/* ... (seu CSS existente DEPOIS da seção de diferenciais) ... */

/* ... (seu CSS existente) ... */

/* Cores já definidas nas variáveis:
   --brand-accent: #F59B1B;
   --custom-lightgray: #E9E8E8; (se você definiu .bg-custom-lightgray assim)
   --brand-darkblue: #01333E;
*/

/* assets/css/style.css */

/* ... (seu CSS existente) ... */

/* ===== SEÇÃO DE CONTATO ===== */
#contato-formulario {
  /* overflow-hidden já no HTML */
}

/* Cores de fundo - Certifique-se que estas variáveis ou classes Tailwind existam e estejam corretas */
/* Se não estiver usando config do Tailwind para cores, defina-as aqui ou use as variáveis :root */
.bg-brand-accent { background-color: var(--brand-accent); } /* #F59B1B */
.text-brand-darkblue { color: var(--brand-darkblue); } /* #01333E (para texto sobre amarelo) */
.bg-custom-lightgray { background-color: #E9E8E8; }
.bg-brand-darkblue { background-color: var(--brand-darkblue); } /* #01333E */


/* Coluna Esquerda - Linha Superior (Amarela) */
#contato-formulario .md\:h-1\/2 { /* Seletor para as divs com md:h-1/2 */
  /* A altura é controlada pelo Tailwind.
     Se precisar de mais controle, pode adicionar aqui:
     min-height: 35vh; ou uma altura fixa.
  */
}

/* Coluna Esquerda - Linha Inferior (Cinza com Imagem) */
/* A imagem usa object-cover e object-center para preencher e centralizar */


/* Coluna Direita (Formulário - Azul) */
#contact-form-fields h3 {
  color: var(--text-light); /* Garante que o título "Envie sua Mensagem" seja branco */
}

/* Estilos para os campos do formulário na seção de contato */
.form-input-contact {
  width: 100%;
  padding: 0.85rem 1rem; /* Aumentei um pouco o padding vertical */
  background-color: rgba(255, 255, 255, 0.08); /* Fundo um pouco mais visível */
  border: 1px solid rgba(255, 255, 255, 0.25); /* Borda um pouco mais visível */
  border-radius: 0.375rem; /* rounded-md */
  color: var(--text-light);
  transition: border-color 0.3s ease, background-color 0.3s ease;
  font-size: 1rem; /* Aumentei um pouco o tamanho da fonte */
}

.form-input-contact::placeholder {
  color: rgba(255, 255, 255, 0.6); /* Placeholder um pouco mais visível */
  opacity: 1;
}

.form-input-contact:focus {
  outline: none;
  border-color: var(--brand-accent); /* Laranja no foco */
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(245, 155, 27, 0.3); /* Anel de foco laranja */
}

textarea.form-input-contact {
  min-height: 120px; /* Altura mínima para o textarea */
}

/* Container do reCAPTCHA */
.recaptcha-container-contact {
  display: flex;
  justify-content: flex-start; /* Alinha à esquerda por padrão */
  margin-top: 0.5rem; /* Adiciona espaço acima do recaptcha */
  margin-bottom: 1rem; /* Adiciona espaço abaixo */
}
/* Ajuste de tamanho do reCAPTCHA para mobile, se necessário */
@media (max-width: 380px) { /* Ponto de quebra um pouco menor */
  .g-recaptcha {
    transform: scale(0.80); /* Reduz um pouco mais */
    transform-origin: 0 0;
  }
  .recaptcha-container-contact {
    min-height: 65px; /* Ajuste para compensar */
    margin-left: -20px; /* Tenta compensar o scale se ficar desalinhado */
  }
}


/* Botão de Envio do Formulário */
.cta-form-submit-contact {
  /* w-full já no HTML */
  padding: 0.9rem 1.5rem; /* Aumentei padding */
  background-color: var(--brand-accent);
  color: var(--brand-darkblue);
  font-weight: 800;
  font-size: 1.05rem; /* Aumentei um pouco */
  border-radius: 25px;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.cta-form-submit-contact:hover {
  background-color: var(--text-light);
  color: var(--brand-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Ajustes responsivos para a seção de contato */
@media (max-width: 767px) { /* md breakpoint */
  #contato-formulario .md\:min-h-\[85vh\] { /* Seletor para a div principal com min-h */
    min-height: auto; /* Remove altura mínima em mobile, deixa o conteúdo ditar */
  }

  /* As colunas já empilham por causa de flex-col no container principal da seção
     e w-full em cada coluna. As linhas internas da coluna esquerda
     também empilham por causa do flex-col na coluna esquerda. */

  /* Ajustar paddings para mobile */
  #contato-formulario .p-8,
  #contato-formulario .sm\:p-10,
  #contato-formulario .md\:p-12 {
    padding: 2rem 1.5rem; /* Consistência no padding mobile */
  }
}

/* assets/css/style.css */

/* ... (seu CSS existente) ... */

/* ===== PRELOADER SIMPLES ===== */
body.preloading {
  overflow: hidden; /* Evita scroll enquanto o preloader está ativo */
}

/* Estilo inicial para o preloader, pode ser duplicado no <head> para evitar FOUC */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--brand-darkblue); /* Cor de fundo do preloader */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease-in-out, visibility 0s linear 0.6s; /* Transição suave para sumir */
}

.preloader.loaded {
  opacity: 0;
  visibility: hidden;
}

.preloader-logo {
  width: 150px; /* Ajuste o tamanho da sua logo SVG */
  height: auto;
  opacity: 0; /* Começa invisível */
  transform: scale(0.95); /* Começa um pouco menor */
  animation: fadeInLogoSimple 1.2s ease-out 0.3s forwards;
  /*
    fadeInLogoSimple: Animação para aparecer e escalar suavemente.
    0.3s de delay para começar.
    'forwards' mantém o estado final.
  */
}

@keyframes fadeInLogoSimple {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Configuração da largura máxima do conteúdo */
.site-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem;
}
@media (min-width: 640px) { /* sm */
  .site-container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) { /* lg */
  .site-container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem;
  }
}
/* Largura máxima de 1350px para o conteúdo */
@media (min-width: 1350px) {
  .site-container {
    max-width: 1350px;
  }
}


body {
  font-family: 'Work Sans', sans-serif; /* Fonte normal: Work Sans Regular */
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.6;
  /* REMOVIDO padding-top: o header fica sobre o banner */
}

h1, h2, h3, h4, h5, h6, .font-title {
  font-family: 'Work Sans', sans-serif; /* Fonte para títulos: Work Sans Extrabold */
  font-weight: 800;
}

/* ===== TOPBAR ===== */
#topbar {
  background-color: transparent;
  height: 40px;
  /* text-shadow: 0 1px 2px rgba(0,0,0,0.3); Adiciona legibilidade sobre o banner */
}

#topbar .topbar-info,
#topbar .topbar-social {
  color: var(--text-light);
}
#topbar .topbar-social a:hover,
#topbar .topbar-social a:focus {
  color: var(--brand-accent);
}
#topbar .topbar-info .fa-map-marker-alt {
  color: var(--brand-accent); /* Cor do ícone de localização */
}

#topbar .separator-line {
  width: 1px;
  height: 16px;
  background-color: var(--line-gray);
  opacity: 0.5;
  margin: 0 0.5rem;
}

.topbar-divider {
  border: none;
  height: 1px;
  background-color: var(--line-gray);
  opacity: 0.2; /* Mais sutil */
}

/* ===== NAVBAR ===== */
#navbar {
  background-color: transparent; /* Inicialmente transparente */
  height: 80px;
  box-shadow: none;
  /* top: 40px;  definido pelo JS para o efeito de esconder topbar */
}

#navbar.scrolled {
  background-color: var(--brand-darkblue) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  top: 0 !important; /* Ocupa o lugar do topbar */
}

#navbar .nav-link {
  color: var(--text-light);
  font-weight: 400; /* Regular, títulos são Extrabold */
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.3s ease;
  /* text-shadow: 0 1px 2px rgba(0,0,0,0.3); Adiciona legibilidade sobre o banner */
}

#navbar.scrolled .nav-link,
#navbar.scrolled #mobile-menu-button {
  color: var(--text-light);
  text-shadow: none;
}

#navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; /* Pequeno ajuste para não sobrepor o texto */
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--brand-accent); /* Cor de destaque para o sublinhado */
  transition: width 0.3s ease;
}

#navbar .nav-link:hover::after,
#navbar .nav-link.active::after {
  width: 100%;
}
#navbar .nav-link:hover,
#navbar .nav-link.active,
#navbar .nav-link:focus {
 color: var(--brand-accent); /* Cor de destaque para hover e ativo */
}

#navbar .logo img {
  transition: transform 0.3s ease;
}
#navbar .logo img:hover {
  transform: scale(1.05);
}

/* Botão CTA Navbar */
.cta-button.whatsapp-button {
  background-color: var(--brand-accent); /* Cor de destaque */
  color: var(--brand-darkblue); /* Texto escuro para contraste com laranja */
  padding: 0.65rem 1.3rem; /* Ajuste de padding */
  border-radius: 25px;
  font-weight: 800; /* Extrabold */
  transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
}

.cta-button.whatsapp-button:hover {
  background-color: var(--text-light); /* Fundo branco no hover */
  color: var(--brand-accent); /* Texto na cor de destaque */
  transform: translateY(-2px);
}
.cta-button.whatsapp-button .fa-whatsapp {
  font-size: 1.1em; /* Ícone um pouco maior */
}


/* Language Switcher */
.language-switcher button img {
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
  opacity: 0.7;
  filter: grayscale(30%); /* Levemente desaturado se não for o atual */
}
.language-switcher button:hover img,
.language-switcher button img.current-lang {
  opacity: 1;
  transform: scale(1.1);
  filter: grayscale(0%);
}


/* Menu Mobile */
#mobile-menu-button {
  color: var(--text-light);
}
#navbar.scrolled #mobile-menu-button {
  color: var(--text-light);
}
#mobile-menu-button:hover,
#mobile-menu-button:focus {
    color: var(--brand-accent);
}

#mobile-menu {
  background-color: var(--brand-darkblue);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Efeito Sanfona */
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linha separadora sutil */
}

#mobile-menu.open {
  max-height: 600px; /* Aumentado para garantir espaço para todos os itens + CTA + lang */
}

#mobile-menu .nav-link-mobile {
  color: var(--text-light);
  font-weight: 400; /* Work Sans Regular */
  /* padding: 0.75rem 1rem;  Definido via Tailwind no HTML (py-3 px-2) */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Linha mais sutil */
  transition: background-color 0.3s ease, color 0.3s ease;
  display: block;
}
#mobile-menu .nav-link-mobile:last-of-type { /* Seleciona o último link da lista principal */
  border-bottom: none;
}

#mobile-menu .nav-link-mobile:hover,
#mobile-menu .nav-link-mobile.active,
#mobile-menu .nav-link-mobile:focus {
  background-color: var(--brand-blue);
  color: var(--brand-accent); /* Cor de destaque no hover/ativo */
}

/* ===== HERO BANNER ===== */
#hero {
  /* padding-top é aplicado ao container interno do hero para o header sobreposto */
}

.hero-background-image {
  background-image: url('../images/herobg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-gradient-overlay {
  background: linear-gradient(to right,
    rgba(3, 6, 7, 0.9),      /* HEX 030607 com opacidade (um pouco mais escuro) */
    rgba(1, 51, 62, 0.85),   /* HEX 01333E com opacidade */
    rgba(3, 95, 120, 0.75)  /* HEX 035F78 com opacidade */
  );
}

#hero h1 {
  text-shadow: 0 2px 6px rgba(0,0,0,0.6); /* Sombra mais pronunciada */
}

#hero p {
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.hero-cta-button {
  background-color: var(--brand-accent); /* Cor de destaque */
  color: var(--brand-darkblue); /* Texto escuro para contraste */
  padding: 0.9rem 2.2rem; /* Ajuste de padding */
  border-radius: 30px;
  font-size: 1.1rem; /* Ajuste de tamanho */
  font-weight: 800; /* Work Sans Extrabold */
  text-transform: uppercase;
  letter-spacing: 0.5px; /* Ajuste de espaçamento */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-cta-button:hover {
  background-color: var(--text-light); /* Fundo branco no hover */
  color: var(--brand-accent); /* Texto na cor de destaque */
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 20px rgba(var(--brand-accent-rgb, 245, 155, 27), 0.4); /* Sombra colorida no hover */
}
/* Para a sombra colorida, precisamos da versão RGB da cor de destaque */
/* Se --brand-accent é #F59B1B, então RGB é 245, 155, 27 */
/* Pode adicionar :root { --brand-accent-rgb: 245, 155, 27; } ou aplicar diretamente. */
/* Por simplicidade, vou usar direto na sombra do hover. */


/* ===== RODAPÉ (FOOTER) ===== */
.footer-gradient {
  background: linear-gradient(135deg, var(--brand-darkestblue) 0%, var(--brand-darkblue) 50%, var(--brand-blue) 100%);
}

#footer h5.font-title { /* Garantir que use a fonte de título */
  color: var(--brand-accent); /* Destaque para os títulos das seções do rodapé */
  letter-spacing: 0.5px;
}

#footer .footer-link { /* Classe para links do rodapé */
  color: var(--text-light);
  opacity: 0.8;
  transition: color 0.3s ease, opacity 0.3s ease;
}

#footer .footer-link:hover,
#footer .footer-link:focus {
  color: var(--brand-accent);
  opacity: 1;
}
#footer .footer-link i {
  margin-right: 0.3em;
  color: var(--brand-accent); /* Ícones no rodapé com cor de destaque */
}


/* Back to Top Button */
#backToTopBtn {
  background-color: var(--brand-accent);
  color: var(--brand-darkblue); /* Contraste com o laranja */
  border: none;
  border-radius: 50%;
  width: 48px; /* Levemente menor */
  height: 48px;
  font-size: 18px; /* Ícone menor */
  cursor: pointer;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease, background-color 0.3s ease;
  visibility: hidden;
  opacity: 0;
}

#backToTopBtn.show {
  visibility: visible;
  opacity: 1;
}

#backToTopBtn:hover {
  background-color: var(--text-light);
  color: var(--brand-accent);
  transform: scale(1.1);
}

/* Ajustes Responsivos */
@media (max-width: 1023px) { /* lg breakpoint */
  /* O padding-top do body foi removido. O conteúdo do hero já é ajustado. */
  #navbar {
    /* O JS cuida da posição do navbar quando o topbar some no scroll */
  }
  #hero .site-container {
    /* Ajustes de padding para mobile já estão com Tailwind (pt-32) */
    /* Garantir que seja suficiente: topbar 40px + navbar 80px = 120px. pt-32 é 8rem = 128px. OK. */
  }
}

@media (max-width: 767px) { /* md breakpoint */
  #topbar {
     display: none; /* Esconder topbar em telas muito pequenas */
  }
  #navbar {
    top: 0 !important; /* Navbar vai para o topo se topbar estiver escondido */
  }
  #navbar.scrolled { /* Garantir que continue no topo */
    top: 0 !important;
  }
   #hero .site-container {
    padding-top: 6rem; /* 96px. navbar (80px) + um pouco de espaço. Ajustar se necessário */
  }
   #hero h1 {
    font-size: 2.25rem; /* text-4xl */
  }
  #hero p {
    font-size: 1rem; /* text-lg */
  }
  .hero-cta-button {
    padding: 0.8rem 1.8rem;
    font-size: 1rem;
  }
  .cta-button.whatsapp-button {
    font-size: 0.8rem;
    padding: 0.6rem 1.1rem;
  }
}

/* ... (seu CSS existente até o final do Hero Banner) ... */

/* ===== SEÇÃO A EMPRESA ===== */
.company-section {
  /* A altura é controlada por min-h-[viewport] no Tailwind para desktop */
}

.company-section .bg-brand-accent { /* Coluna esquerda */
  background-color: var(--brand-accent); /* #F59B1B */
}

.company-section .text-brand-darkblue h2,
.company-section .text-brand-darkblue p {
  color: var(--brand-darkblue);
}

.company-section .cta-button-secondary {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background-color: var(--brand-darkblue);
  color: var(--text-light);
  font-weight: 800;
  border-radius: 25px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  text-align: center;
}

.company-section .cta-button-secondary:hover {
  background-color: var(--brand-darkestblue);
  color: var(--brand-accent);
  transform: translateY(-2px);
}
.company-section .cta-button-secondary .fa-arrow-right {
    transition: transform 0.3s ease;
}
.company-section .cta-button-secondary:hover .fa-arrow-right {
    transform: translateX(4px);
}

/* Coluna da Imagem na seção "A Empresa" */
#company-image-column {
  /* Desktop: a altura será automática baseada no min-h da section e conteúdo da outra coluna */
  /* Mobile: altura controlada abaixo */
}

#company-image-column img {
  width: 100%;
  height: 100%; /* Faz a imagem preencher a altura da div #company-image-column */
  object-fit: cover;
  /* object-position: center; Se precisar ajustar o foco da imagem */
}

/* Responsividade para a seção "A Empresa" */
@media (max-width: 767px) { /* md breakpoint (mobile) */
  .company-section {
    min-height: auto; /* Remove a altura mínima da seção inteira para empilhar bem */
    flex-direction: column; /* Garante que as colunas empilhem */
  }

  /* Coluna da Imagem no Mobile */
  #company-image-column {
    width: 100%;
    /* AJUSTE AQUI A ALTURA DA IMAGEM NO MOBILE */
    height: 75vh; /* Ex: 75% da altura da viewport. AUMENTEI de 60vh */
                  /* Se ainda cortar, tente 80vh, 85vh ou um valor fixo alto como 500px ou 600px.
                     Lembre-se que 'cover' vai preencher, então se a imagem for MUITO retrato
                     e a viewport MUITO paisagem, algum corte lateral pode ocorrer, ou vice-versa. */
    order: 1; /* Garante que a imagem venha primeiro no mobile */
  }
  
  /* Coluna de Texto no Mobile */
  .company-section div[class*="bg-brand-accent"] { /* Seletor mais robusto para a coluna de texto */
    width: 100%;
    order: 2; /* Texto vem depois da imagem */
    padding: 2.5rem 1.5rem; /* Padding reduzido para mobile */
  }

   .company-section h2 {
    font-size: 2rem; /* Ajuste para título no mobile */
  }
  .company-section p {
    font-size: 0.95rem; /* Ajuste para texto no mobile */
  }
}

/* ===== SEÇÃO CLIENTES (CARROSSEL) ===== */
.client-carousel-section {
  background: linear-gradient(135deg, var(--brand-darkestblue) 0%, var(--brand-darkblue) 50%, var(--brand-blue) 100%);
  overflow: hidden; /* Crucial para o carrossel não quebrar o layout */
}

.client-carousel-section h2 { /* Título "Nossos Principais Clientes" */
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.client-logo-carousel { /* Contêiner geral do carrossel */
  width: 100%;
  display: flex; /* Necessário para o track funcionar corretamente */
  align-items: center;
  position: relative;
  /* Adiciona um mask-image para suavizar as bordas do carrossel (opcional, mas elegante) */
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.client-logo-track { /* A faixa que se move com os logos */
  display: flex; /* Coloca os logos em linha */
  align-items: center; /* Alinha verticalmente os logos */
  /* A largura será > 100% por causa dos clones, o JS cuida da duplicação */
  animation: scrollLogos 35s linear infinite; /* Ajuste a DURAÇÃO aqui (ex: 20s mais rápido, 40s mais lento) */
}

.client-logo-item { /* Cada item de logo individual */
  flex-shrink: 0; /* Impede que os logos encolham para caber */
  padding: 0 2rem; /* Espaçamento horizontal entre os logos (total 4rem) */
                       /* Ajuste esse padding para mais ou menos espaço */
  box-sizing: content-box; /* Para que o padding não afete a largura intrínseca do logo para cálculos de animação */
  display: flex; /* Para centralizar a imagem dentro do item se necessário */
  justify-content: center;
  align-items: center;
}

.client-logo-item img {
  max-height: 4rem;   /* Altura máxima dos logos (64px). Ajuste conforme necessário. */
  width: auto;        /* Mantém a proporção da imagem */
  filter: grayscale(80%) opacity(0.65); /* Logos em escala de cinza e levemente transparentes */
  transition: filter 0.3s ease, transform 0.3s ease;
  display: block; /* Remove espaço extra abaixo da imagem se for inline */
}

.client-logo-item:hover img {
  filter: grayscale(0%) opacity(1); /* Colorido e opaco no hover */
  transform: scale(1.1); /* Efeito de zoom no hover */
}

/* Animação do Carrossel */
@keyframes scrollLogos {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Move pela metade da largura total da track (que contém os logos originais + os clones) */
    /* Isso funciona porque o JS duplica os logos. Se você tem 6 logos originais, a track terá 12.
       Mover -50% da largura total da track move exatamente a largura dos 6 logos originais. */
    transform: translateX(-50%);
  }
}

/* Pausar animação no hover do carrossel (opcional) */
.client-logo-carousel:hover .client-logo-track {
  animation-play-state: paused;
}

/* ... (Resto do seu CSS: Rodapé, BackToTop, etc.) ... */

/* ... (seu CSS existente) ... */

/* Cor de fundo personalizada para a seção de valores */
.bg-custom-lightgray {
  background-color: #E9E8E8;
}

/* ===== SEÇÃO VALORES ===== */
#valores .selo-item img {
  /* Estilos para os selos, se necessário, além do Tailwind */
  /* Exemplo: filter: grayscale(50%); para um visual mais sutil */
}
#valores .selo-item p {
  /* Estilo para a legenda do selo */
}

/* assets/css/style.css */

/* ... (seu CSS existente ANTES da seção de serviços) ... */

/* ===== SEÇÃO SERVIÇOS (ROVs) ===== */
#servicos {
  position: relative; /* Necessário para o posicionamento absoluto do overlay */
  background-image: url('../images/fundosection.png'); /* SUA IMAGEM DE FUNDO AQUI */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Opcional: Efeito parallax. Remova se não gostar. */
  /* Os paddings py-16 e py-24 são aplicados via classes do Tailwind no HTML.
     Se precisar sobrescrever ou controlar apenas via CSS, adicione-os aqui:
     padding-top: 4rem;  (equivalente a py-16)
     padding-bottom: 6rem; (equivalente a py-24)
  */
}

/* Overlay para a seção de serviços */
#servicos::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* ESCOLHA E AJUSTE O OVERLAY: */
  background-color: rgba(255, 255, 255, 0.88); /* Overlay BRANCO com 88% de opacidade (bom para texto escuro) */
  /* Exemplo de overlay ESCURO (se o texto da seção fosse claro):
     background-color: rgba(1, 51, 62, 0.75); /* --brand-darkblue com 75% opacidade */
  z-index: 1; /* Overlay acima da imagem de fundo, abaixo do conteúdo */
}

/* Conteúdo da seção (site-container) acima do overlay */
#servicos > .site-container {
  position: relative;
  z-index: 2;
}

/* (Opcional) Ajuste geral de cor de texto para a seção, se necessário.
   Atualmente, o HTML usa text-brand-darkblue e text-gray-700, que devem funcionar
   bem com o overlay branco translúcido. */
/*
#servicos .font-title,
#servicos p,
#servicos ul li {
  color: var(--text-dark); // Exemplo, se o overlay for muito claro
}
*/

/* Botão Primário (Ex: Solicite Inspeção) */
#servicos .cta-button-primary {
  display: inline-flex;
  align-items: center;
  background-color: var(--brand-accent); /* Laranja */
  color: var(--brand-darkblue); /* Texto escuro */
  padding: 0.8rem 1.8rem;
  border-radius: 25px;
  font-weight: 800; /* Extrabold */
  transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#servicos .cta-button-primary:hover {
  background-color: var(--brand-blue); /* Azul escuro no hover */
  color: var(--text-light); /* Texto branco */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--brand-accent-rgb, 245, 155, 27), 0.3);
}

#servicos .cta-button-primary .fa-whatsapp {
  font-size: 1.2em;
}

/* Estilos para a Tabela Comparativa dentro da seção de serviços */
#servicos .comparative-table-section {
  /* O padding-top pt-8 md:pt-12 está no HTML */
}

#servicos .comparative-table-section h3 { /* Título "Comparativo Técnico dos ROVs" */
  /* Estilos específicos para este título se necessário, já usa font-title */
}

#servicos .comparative-table-section .overflow-x-auto {
  /* A div com rounded-md border border-gray-300 shadow-lg já está no HTML */
}

#servicos .comparative-table-section table {
  /* min-w-full divide-y divide-gray-300 text-sm já no HTML */
}

#servicos .comparative-table-section thead.bg-gray-100 {
  /* bg-gray-100 já no HTML, equivalente a background-color: #f3f4f6; */
}

#servicos .comparative-table-section thead th {
  /* px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wider já no HTML */
}

/* Colunas Coloridas na Tabela */
#servicos .comparative-table-section .col-rov-falcon {
  background-color: #f0f9ff; /* Azul muito claro (Ex: sky-50 do Tailwind) */
}

#servicos .comparative-table-section .col-rov-blue {
  background-color: #fffed1; /* Amarelo/Laranja muito claro (Ex: amber-50 do Tailwind é #fffbeb, #fffed1 é um pouco mais para o amarelo) */
}

/* Corpo da tabela */
#servicos .comparative-table-section tbody {
  /* divide-y divide-gray-200 bg-white já no HTML para o fundo geral do tbody */
}

/* Ajuste para fundo de linhas pares se as colunas já têm cor */
#servicos .comparative-table-section table tbody tr:nth-child(even) td {
  /* Se quiser remover o efeito de listra das linhas para focar nas cores das colunas: */
  /* background-color: transparent !important; /* Use !important se necessário para sobrescrever */
}
/* Garante que a primeira coluna (Características) mantenha seu fundo original */
#servicos .comparative-table-section tbody td:first-child {
  background-color: #ffffff; /* Fundo branco para a primeira célula de dados de cada linha */
}
#servicos .comparative-table-section thead th:first-child {
   background-color: #f3f4f6; /* bg-gray-100, para o cabeçalho da primeira coluna */
}

#servicos .comparative-table-section tbody td {
  /* px-4 py-3 whitespace-nowrap text-gray-600 (ou font-medium text-gray-800 para a primeira) já no HTML */
}


/* Imagens dos ROVs (Falcon e Blue ROV 2) dentro da seção de serviços */
#servicos img[src*="rov-falcon"],
#servicos img[src*="blue-rov-2"] {
  /* rounded-lg shadow-xl w-full h-auto max-h-[500px] object-cover já no HTML */
  /* Nenhum estilo adicional aqui a menos que seja muito específico */
}


/* Ajustes responsivos específicos para a seção de serviços, se necessário.
   O Tailwind (md:grid-cols-2, order-X, md:order-X) já cuida de muito. */
@media (max-width: 767px) { /* md breakpoint */
  /* Exemplo de como garantir que as colunas de serviço empilhem corretamente se necessário
     (embora as classes 'order' do Tailwind geralmente façam isso) */
  /*
  #servicos .grid.md\:grid-cols-2 > div {
    order: initial !important;
  }
  #servicos .grid.md\:grid-cols-2 > div.md\:order-1 { order: 1 !important; }
  #servicos .grid.md\:grid-cols-2 > div.md\:order-2 { order: 2 !important; }
  */

  /* A tabela com overflow-x-auto deve funcionar bem em mobile para rolagem horizontal.
     Não são necessários mais ajustes aqui a menos que o comportamento não seja o esperado. */
}

/* ... (seu CSS existente DEPOIS da seção de serviços) ... */

/* ... (seu CSS existente) ... */

/* assets/css/style.css */

/* ... (seu CSS existente ANTES da seção de diferenciais) ... */

/* ===== SEÇÃO DIFERENCIAIS ===== */
#diferenciais {
  /* position: relative; já no HTML */
  /* text-white; já no HTML */
  /* py-16 md:py-24; já no HTML */
  /* overflow: hidden; já no HTML */
}

.diferenciais-background-image {
  background-image: url('../images/diferenciaisbg.jpg'); /* SUA IMAGEM DE FUNDO */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* AJUSTE AQUI PARA MAIOR CONTRASTE SE NECESSÁRIO */
  filter: blur(2px) brightness(0.6); /* Ex: Aumentei um pouco o blur e diminuí mais o brilho */
                                     /* Experimente com brightness(0.5) ou até menos se o texto estiver difícil de ler */
  /* Se a imagem já for escura, você pode reduzir o blur ou o brightness */
  position: absolute; /* Garante que cubra toda a seção #diferenciais */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0; /* Atrás do conteúdo e das colunas */
}

/* REMOVA OU COMENTE ESTA REGRA PARA TIRAR O GRADIENTE OVERLAY */
/*
.diferenciais-gradient-overlay {
  background: linear-gradient(to right,
    rgba(3, 6, 7, 0.92),
    rgba(1, 51, 62, 0.88),
    rgba(3, 95, 120, 0.85)
  );
  position: absolute; // Certifique-se de que estava aqui ou adicione
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; // Estava abaixo do conteúdo mas acima da imagem
}
*/

/* Conteúdo da seção (site-container) precisa estar acima da imagem de fundo */
#diferenciais > .site-container {
  position: relative;
  z-index: 2; /* Acima da imagem de fundo e de qualquer overlay que possa ter sido deixado */
}


/* Estilo para as colunas internas, para dar um destaque sutil e melhorar contraste do texto */
.diferenciais-coluna {
  /* AUMENTE A OPACIDADE AQUI SE O GRADIENTE FOI REMOVIDO */
  background-color: rgba(0, 0, 0, 0.45); /* Fundo preto translúcido mais forte para contraste */
                                         /* Experimente com 0.5, 0.6 se necessário */
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  backdrop-filter: blur(3px); /* Pode aumentar o blur aqui também */
  -webkit-backdrop-filter: blur(3px);
  /* padding e border-radius já estão no HTML */
  position: relative; /* Para garantir que o z-index funcione corretamente com o z-index do site-container */
  z-index: 3; /* Acima do site-container (que está acima da imagem de fundo) */
}

#diferenciais h2 {
  color: var(--text-light); /* Garante que os títulos sejam brancos */
  /* text-shadow: 0 1px 3px rgba(0,0,0,0.7); /* Sombra mais forte se necessário */
}

#diferenciais ul li,
#diferenciais .testimonial-quote p,
#diferenciais .testimonial-quote footer,
#diferenciais > .site-container > .grid > .diferenciais-coluna > p /* Parágrafo da segunda coluna */ {
  color: var(--text-light); /* Garante que o texto seja claro/branco */
  /* text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* Sombra para ajudar na legibilidade */
}
/* Certifique-se de que os ícones também tenham cor clara se não herdarem */
#diferenciais ul li .fas {
  width: 1.25em;
  color: var(--brand-accent); /* Mantém a cor de destaque para os ícones */
}


.testimonial-quote {
  background-color: rgba(255, 255, 255, 0.05); /* Fundo ainda mais sutil para o quote */
  border-l-4 border-brand-accent; /* A borda já está no HTML e deve se destacar */
  /* pl-6 py-4 italic mb-8 já no HTML */
  border-radius: 0 0.25rem 0.25rem 0;
}
.testimonial-quote footer {
  color: #ccc; /* Cor mais clara para o rodapé do testemunho */
}


/* CTA Button - Estilo já definido e deve funcionar */
.cta-button-secondary-light {
  /* ... (estilos existentes) ... */
}

/* Linha divisória opcional */
@media (min-width: 768px) {
  /* ... (estilos existentes) ... */
}

/* ... (seu CSS existente DEPOIS da seção de diferenciais) ... */

/* ... (seu CSS existente) ... */

/* Cores já definidas nas variáveis:
   --brand-accent: #F59B1B;
   --custom-lightgray: #E9E8E8; (se você definiu .bg-custom-lightgray assim)
   --brand-darkblue: #01333E;
*/

/* assets/css/style.css */

/* ... (seu CSS existente) ... */

/* ===== SEÇÃO DE CONTATO ===== */
#contato-formulario {
  /* overflow-hidden já no HTML */
}

/* Cores de fundo - Certifique-se que estas variáveis ou classes Tailwind existam e estejam corretas */
/* Se não estiver usando config do Tailwind para cores, defina-as aqui ou use as variáveis :root */
.bg-brand-accent { background-color: var(--brand-accent); } /* #F59B1B */
.text-brand-darkblue { color: var(--brand-darkblue); } /* #01333E (para texto sobre amarelo) */
.bg-custom-lightgray { background-color: #E9E8E8; }
.bg-brand-darkblue { background-color: var(--brand-darkblue); } /* #01333E */


/* Coluna Esquerda - Linha Superior (Amarela) */
#contato-formulario .md\:h-1\/2 { /* Seletor para as divs com md:h-1/2 */
  /* A altura é controlada pelo Tailwind.
     Se precisar de mais controle, pode adicionar aqui:
     min-height: 35vh; ou uma altura fixa.
  */
}

/* Coluna Esquerda - Linha Inferior (Cinza com Imagem) */
/* A imagem usa object-cover e object-center para preencher e centralizar */


/* Coluna Direita (Formulário - Azul) */
#contact-form-fields h3 {
  color: var(--text-light); /* Garante que o título "Envie sua Mensagem" seja branco */
}

/* Estilos para os campos do formulário na seção de contato */
.form-input-contact {
  width: 100%;
  padding: 0.85rem 1rem; /* Aumentei um pouco o padding vertical */
  background-color: rgba(255, 255, 255, 0.08); /* Fundo um pouco mais visível */
  border: 1px solid rgba(255, 255, 255, 0.25); /* Borda um pouco mais visível */
  border-radius: 0.375rem; /* rounded-md */
  color: var(--text-light);
  transition: border-color 0.3s ease, background-color 0.3s ease;
  font-size: 1rem; /* Aumentei um pouco o tamanho da fonte */
}

.form-input-contact::placeholder {
  color: rgba(255, 255, 255, 0.6); /* Placeholder um pouco mais visível */
  opacity: 1;
}

.form-input-contact:focus {
  outline: none;
  border-color: var(--brand-accent); /* Laranja no foco */
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(245, 155, 27, 0.3); /* Anel de foco laranja */
}

textarea.form-input-contact {
  min-height: 120px; /* Altura mínima para o textarea */
}

/* Container do reCAPTCHA */
.recaptcha-container-contact {
  display: flex;
  justify-content: flex-start; /* Alinha à esquerda por padrão */
  margin-top: 0.5rem; /* Adiciona espaço acima do recaptcha */
  margin-bottom: 1rem; /* Adiciona espaço abaixo */
}
/* Ajuste de tamanho do reCAPTCHA para mobile, se necessário */
@media (max-width: 380px) { /* Ponto de quebra um pouco menor */
  .g-recaptcha {
    transform: scale(0.80); /* Reduz um pouco mais */
    transform-origin: 0 0;
  }
  .recaptcha-container-contact {
    min-height: 65px; /* Ajuste para compensar */
    margin-left: -20px; /* Tenta compensar o scale se ficar desalinhado */
  }
}


/* Botão de Envio do Formulário */
.cta-form-submit-contact {
  /* w-full já no HTML */
  padding: 0.9rem 1.5rem; /* Aumentei padding */
  background-color: var(--brand-accent);
  color: var(--brand-darkblue);
  font-weight: 800;
  font-size: 1.05rem; /* Aumentei um pouco */
  border-radius: 25px;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.cta-form-submit-contact:hover {
  background-color: var(--text-light);
  color: var(--brand-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Ajustes responsivos para a seção de contato */
@media (max-width: 767px) { /* md breakpoint */
  #contato-formulario .md\:min-h-\[85vh\] { /* Seletor para a div principal com min-h */
    min-height: auto; /* Remove altura mínima em mobile, deixa o conteúdo ditar */
  }

  /* As colunas já empilham por causa de flex-col no container principal da seção
     e w-full em cada coluna. As linhas internas da coluna esquerda
     também empilham por causa do flex-col na coluna esquerda. */

  /* Ajustar paddings para mobile */
  #contato-formulario .p-8,
  #contato-formulario .sm\:p-10,
  #contato-formulario .md\:p-12 {
    padding: 2rem 1.5rem; /* Consistência no padding mobile */
  }
}


/* assets/css/style.css */

/* ... (seu CSS existente) ... */

/* Estilos para formulários em páginas de conteúdo internas (ex: Trabalhe Conosco) */
.form-input-page,
.form-input-page-file {
  width: 100%;
  padding: 0.65rem 0.9rem;
  background-color: #fff; /* Fundo branco */
  border: 1px solid #cbd5e1; /* Tailwind gray-300 */
  border-radius: 0.375rem; /* rounded-md */
  color: var(--text-dark); /* Texto escuro */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-size: 0.95rem;
}

.form-input-page::placeholder {
  color: #a0aec0; /* Tailwind gray-500 */
  opacity: 1;
}

.form-input-page:focus,
.form-input-page-file:focus {
  outline: none;
  border-color: var(--brand-accent); /* Laranja no foco */
  box-shadow: 0 0 0 3px rgba(245, 155, 27, 0.3); /* Anel de foco laranja */
}

/* Estilo específico para input de arquivo, se necessário */
.form-input-page-file {
  /* Tailwind geralmente aplica bons estilos padrão,
     mas você pode precisar de mais customização aqui para consistência entre navegadores.
     Um truque comum é esconder o input original e estilizar um label. */
  padding: 0.5rem; /* Ajuste de padding para input file */
}

.recaptcha-container-page { /* Se precisar de ajustes específicos para o recaptcha nestas páginas */
  display: flex;
  justify-content: flex-start;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
@media (max-width: 380px) {
  .recaptcha-container-page .g-recaptcha { /* Seletor mais específico */
    transform: scale(0.80);
    transform-origin: 0 0;
  }
  .recaptcha-container-page {
    min-height: 65px;
    margin-left: -20px; /* Pode precisar ajustar dependendo do seu layout */
  }
}

/* Estilização para o <article class="prose"> (se estiver usando @tailwindcss/typography) */
/* O plugin typography já faz um bom trabalho. Adicione customizações aqui se necessário. */
.prose h2 { /* Exemplo de customização para títulos dentro do .prose */
  color: var(--brand-darkblue);
  margin-bottom: 1em; /* Tailwind mb-4 */
}
.prose p {
  color: var(--text-dark);
  line-height: 1.7;
}
.prose a {
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 500;
}
.prose a:hover {
  color: var(--brand-accent);
  text-decoration: underline;
}
.prose ul > li::before { /* Cor dos marcadores da lista */
  background-color: var(--brand-accent);
}