/* =========================================================
   TOPACI — BASE / PALETA
========================================================= */
:root{
  --wine:   #762836;  /* bordô */
  --orange: #ED7449;  /* laranja */
  --mint:   #C8EE99;  /* verde claro */
  --teal:   #1B3339;  /* azul petróleo */
  --ivory:  #FAF9F6;  /* off-white */
  --peach:  #EFDCCB;  /* pêssego */
  --black:  #080808;

  --shadow-md: 0 12px 28px rgba(0,0,0,.18);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.22);
}

/* =========================================================
   OVERRIDES TAILWIND (sem mexer no HTML)
   - você usa classes roxas do Tailwind, aqui vira o tema Topaci
========================================================= */

/* Textos roxos -> vinho */
.text-purple-900,
.text-purple-800,
.text-purple-700{ color: var(--wine) !important; }

/* Ícones/check roxos -> laranja */
.text-purple-600{ color: var(--orange) !important; }

/* Hovers roxos/fuchsia -> mint */
.hover\:text-purple-200:hover{ color: rgba(200,238,153,.95) !important; }
.hover\:text-fuchsia-400:hover,
.hover\:text-fuchsia-300:hover{ color: var(--mint) !important; }

/* Fundos roxos -> tema */
.bg-purple-50  { background: rgba(200,238,153,.18) !important; }
.bg-purple-100 { background: rgba(239,220,203,.55) !important; }
.bg-purple-700 { background: var(--wine) !important; }

/* OBS: color-mix pode falhar em navegadores antigos */
.bg-purple-800 { background: color-mix(in srgb, var(--wine) 92%, black 8%) !important; }
.bg-purple-900 { background: color-mix(in srgb, var(--wine) 85%, black 15%) !important; }

/* Gradiente de cards de serviços */
.bg-gradient-to-br.from-purple-700.to-fuchsia-600{
  background: linear-gradient(135deg, var(--wine), var(--orange)) !important;
}

/* CTA seção clara (ex: consultoria) */
section.bg-gradient-to-r.from-purple-100.to-fuchsia-50{
  background: linear-gradient(90deg, var(--ivory), var(--peach)) !important;
  color: var(--teal) !important;
}

/* =========================================================
   NAVBAR (vinho sólido igual ao mock)
========================================================= */
header.fixed.top-0.left-0.w-full{
  background: var(--wine) !important;
  border-bottom: 1px solid rgba(250,249,246,.10);
}

/* remove o gradiente roxo do Tailwind caso exista */
header.bg-gradient-to-r.from-purple-800.to-fuchsia-700{
  background: var(--wine) !important;
}

/* Links do menu */
header nav a{
  color: rgba(250,249,246,.92) !important;
}
header nav a:hover{
  color: var(--mint) !important;
}

/* Logo text */
header a span{
  color: var(--ivory) !important;
  letter-spacing: .2px;
}

/* =========================================================
   HERO (home) — fundo vinho chapado + overlay leve
========================================================= */
section#home.bg-gradient-to-br.from-purple-800.to-fuchsia-700{
  background: var(--wine) !important;
}
section#home{
  min-height: 78vh;
  padding-top: 7.5rem;
  position: relative;
  overflow: hidden;
}
section#home::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 600px at 75% 35%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(900px 500px at 20% 20%, rgba(0,0,0,.20), transparent 60%);
  pointer-events:none;
}
section#home > .container{
  position: relative;
  z-index: 2;
}

/* Título (se você usa .hero-title) */
.hero-title{
  color: rgba(250,249,246,.96) !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
  animation: none !important;
  line-height: 1.05 !important;
  letter-spacing: -0.5px;
  text-shadow: 0 10px 30px rgba(0,0,0,.22);
}

#home p{ color: rgba(250,249,246,.88) !important; }

/* Botões hero */
#home a.bg-white.text-purple-900{
  background: var(--mint) !important;
  color: var(--teal) !important;
  border-radius: 9999px !important;
  font-weight: 800 !important;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(27,51,57,.18);
}
#home a.bg-white.text-purple-900:hover{
  filter: brightness(.98);
  transform: scale(1.04);
}
#home a.bg-transparent.border-2.border-white{
  border-color: rgba(250,249,246,.85) !important;
  border-radius: 9999px !important;
  color: rgba(250,249,246,.95) !important;
}
#home a.bg-transparent.border-2.border-white:hover{
  background: rgba(250,249,246,.92) !important;
  color: var(--wine) !important;
}

/* Imagem do hero (se existir esse alt) */
#home img[alt="Equipe Topaci"]{
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.35));
}

/* =========================
   BOTÃO WHATSAPP — NAVBAR
========================= */

.nav-whatsapp-btn{
  background: var(--mint);
  color: #000000 !important; /* TEXTO PRETO */
  border-radius: 9999px;
  font-weight: 700;
  letter-spacing: .2px;

  border: 1px solid rgba(27,51,57,.22);
  box-shadow: 0 10px 22px rgba(0,0,0,.16);

  transition:
    background-color .2s ease,
    transform .15s ease,
    box-shadow .2s ease;
}

.nav-whatsapp-btn span,
.nav-whatsapp-btn i{
  color: #000000 !important; /* garante texto e ícone pretos */
}

/* hover elegante */
.nav-whatsapp-btn:hover{
  background: #b8e888;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
/* mobile */
@media (max-width: 768px){
  .nav-whatsapp-btn{
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
  }
}


/* =========================================================
   FORMS / FOCUS
========================================================= */
.focus\:ring-purple-500:focus{
  box-shadow: 0 0 0 3px rgba(200,238,153,.60) !important;
}
.dark .dark\:focus\:ring-fuchsia-500:focus{
  box-shadow: 0 0 0 3px rgba(200,238,153,.35) !important;
}
.form-checkbox.text-purple-600{
  accent-color: var(--mint) !important;
}

/* =========================================================
   MOBILE MENU
========================================================= */
#mobile-menu.bg-purple-900{
  background: linear-gradient(180deg, var(--wine), var(--teal)) !important;
}
#mobile-menu a:hover{
  color: var(--mint) !important;
}

@media (max-width: 768px){
  section#home{
    padding-top: 7rem;
    min-height: 86vh;
  }
}

/* =========================================================
   FOOTER (Tailwind antigo) — se você ainda usa classes do footer roxo
========================================================= */
footer.bg-gradient-to-b.from-purple-800.to-purple-950{
  background: linear-gradient(180deg, var(--wine), var(--teal)) !important;
}
footer .border-purple-500{
  border-color: rgba(200,238,153,.22) !important;
}
footer .bg-gradient-to-r.from-purple-400.via-fuchsia-400.to-purple-400{
  background: linear-gradient(90deg, var(--orange), var(--mint), var(--orange)) !important;
}

/* Cookie/theme banners */
#cookie-consent-banner.bg-purple-900,
#theme-notice-banner.bg-purple-700{
  background: var(--wine) !important;
}
#accept-cookies.bg-fuchsia-500{
  background: var(--mint) !important;
  color: var(--teal) !important;
}
#accept-cookies.bg-fuchsia-500:hover{ filter: brightness(.98); }

/* =========================================================
   BOKEH (bolhas do footer novo)
========================================================= */
.bokeh{
  filter: blur(1px);
  opacity: .7;
  mix-blend-mode: screen;
}

/* =========================================================
   TESTEMUNHOS — carrossel
========================================================= */
.testimonials-section{ padding: 64px 0 72px; }
.testimonials-section .container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.testimonials-title{
  text-align: center;
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: clamp(26px, 3vw, 42px);
  margin: 0 0 28px;
}
.testimonial-wrapper{ position: relative; padding: 0 64px; }
.testimonial-viewport{ overflow: hidden; }
.testimonial-track{
  display: flex !important;
  gap: 32px !important;
  will-change: transform;
  transition: transform .45s ease;
  align-items: stretch;
}
.testimonial-card{
  flex: 0 0 auto !important;
  width: 100%;
  max-width: 640px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  padding: 28px;
}
.t-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.t-avatar{
  width: 50px; 
  height: 56px; 
  border-radius: 9999px;
  overflow: hidden;
  background: rgba(200,238,153,.7);
  flex: 0 0 56px;
  display: block;
  
.t-avatar img{
    width:10%;
    height:100%
    display: block;
    object-fin: contain;
    object-position: center;
    object-fit: contain;
    padding: 0px
    border-radius: 9999px;
  }
}
.t-name{ margin: 0; font-weight: 800; color: #111827; }
.t-role{ margin: 2px 0 0; color: #6b7280; font-size: .95rem; }
.t-quote{ margin: 0; line-height: 1.7; color: #374151; }

.testimonial-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(27,51,57,.18);
  display: grid;
  place-items: center;
  background: #ffffff;
  color: var(--teal);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 5;
  transition: transform .15s ease, box-shadow .2s ease;
}
.testimonial-arrow.left{ left: 16px; }
.testimonial-arrow.right{ right: 16px; }
.testimonial-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}
.testimonial-dots{
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.testimonial-dots button{
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  background: rgba(27,51,57,.25);
  transition: transform .2s ease, background .2s ease;
}
.testimonial-dots button.active{
  background: var(--teal);
  transform: scale(1.25);
}
@media (min-width: 768px){ .testimonial-card{ max-width: 520px; } }
@media (min-width: 1024px){ .testimonial-card{ max-width: 380px; } }

/* =========================================================
   DROPDOWN ANTIGO (#services-submenu)
   - mantém se alguma página ainda usa
========================================================= */
#services-menu{ position: relative; }

/* submenu antigo “lista simples” */
#services-submenu{
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 260px;

  background: linear-gradient(180deg, var(--ivory), var(--peach)) !important;
  border: 1px solid rgba(27,51,57,.12);
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(0,0,0,.18);

  padding: 10px;
  z-index: 999;

  opacity: 0;
  transform: translateY(6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#services-menu:hover #services-submenu{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#services-submenu::before{
  content: "";
  position: absolute;
  top: -8px;
  left: 22px;
  width: 14px;
  height: 14px;
  background: linear-gradient(180deg, var(--ivory), var(--peach)) !important;
  border-left: 1px solid rgba(27,51,57,.12);
  border-top: 1px solid rgba(27,51,57,.12);
  transform: rotate(45deg);
}
#services-submenu a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--teal) !important;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background-color .18s ease, transform .12s ease, color .18s ease;
}
#services-submenu li + li{ margin-top: 4px; }
#services-submenu a:hover{
  background: linear-gradient(90deg, rgba(200,238,153,.45), rgba(118,40,54,.10));
  color: var(--wine) !important;
  transform: translateX(2px);
}
#services-submenu a::after{
  content: "›";
  font-size: 1.1rem;
  opacity: .55;
  transition: transform .18s ease, opacity .18s ease;
}
#services-submenu a:hover::after{
  transform: translateX(2px);
  opacity: .9;
}
#services-menu::after{
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 16px;
}

/* =========================================================
   DROPDOWN NOVO (painel bonitão) — .nav-dropdown
   - é o que você usa na página consultoria.html
========================================================= */

/* animação do painel */
.nav-dropdown{
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#services-menu:hover .nav-dropdown,
#services-menu:focus-within .nav-dropdown{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* FIX: topo do dropdown continua branco */
#services-menu .nav-dropdown .bg-gradient-to-r,
#services-menu .nav-dropdown .bg-gradient-to-r *{
  color: #ffffff !important;
}

/* FIX: itens da lista em vinho */
#services-menu .nav-dropdown ul a,
#services-menu .nav-dropdown ul a *{
  color: #3a141f !important;
}
#services-menu .nav-dropdown ul a:hover,
#services-menu .nav-dropdown ul a:hover *{
  color: #6b2232 !important;
}
#services-menu .nav-dropdown ul a i.fa-arrow-right{
  color: #9a6a78 !important;
}
/* badge atual */
#services-menu .nav-dropdown span.text-\[\#6b2232\],
#services-menu .nav-dropdown span.text-purple-700{
  color: #6b2232 !important;
}
/* HERO intro animation */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeRight {
  from { opacity: 0; transform: translateX(22px) scale(.985); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* evita animação pra quem desativa motion */
@media (prefers-reduced-motion: reduce){
  .hero-anim-left, .hero-anim-img { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* bloco texto */
.hero-anim-left{
  opacity: 0;
  animation: heroFadeUp .75s ease forwards;
}

/* imagem */
.hero-anim-img{
  opacity: 0;
  animation: heroFadeRight .85s ease forwards;
  animation-delay: .15s;
}