/* ============================================================
   DESTAQUE — Camada de marca (carregada por último)
   Aplica a paleta Destaque sobre o molde Construktion.
   Rosa #e91e8c · hover #c4186f · grafite #151515
   ============================================================ */

:root{
  --neutral--800:#151515;
  /* IMPORTANTE: este token é o FUNDO ESCURO dos painéis grandes (hero, CTA,
     rodapé). Mantemos grafite e aplicamos o rosa só nos acentos (abaixo). */
  --accent--primary-1:#151515;
}

/* ---- Rosa Destaque reaplicado APENAS nos usos de acento ---- */
.color-accent-1{ color:#e91e8c; }
.badge-primary{ background-color:#e91e8c; border-color:#e91e8c; color:#fff; }
.badge-primary.white{ color:#e91e8c; }
.input:focus, .input.-wfp-focus, .text-area:focus{ border-color:#e91e8c; }
.checkbox.w--redirected-checked,
.radio-button.w--redirected-checked{ border-color:#e91e8c; background-color:#e91e8c; }
.link-wrapper:hover, .link-wrapper.color-primary{ color:#e91e8c; }
.btn-circle-primary:hover{ border-color:#e91e8c; color:#e91e8c; }
.divider, .cta-section-divider{ background-color:#e91e8c; }

/* ---- Botões primários = rosa Destaque ---- */
.btn-primary{
  background-color:#e91e8c;
  border-color:#e91e8c;
  color:#fff;
}
.btn-primary:hover{
  background-color:#c4186f;
  border-color:#c4186f;
  color:#fff;
}
/* Variante branca (sobre fundo escuro: hero / CTA) — mantém branca, vira rosa no hover */
.btn-primary.white{
  background-color:#fff;
  border-color:#fff;
  color:#151515;
}
.btn-primary.white:hover{
  background-color:#e91e8c;
  border-color:#e91e8c;
  color:#fff;
}

/* ---- Botões secundários ---- */
.btn-secondary:hover{
  border-color:#e91e8c;
  color:#e91e8c;
}
.btn-secondary.white:hover{
  border-color:#e91e8c;
  color:#e91e8c;
}

/* ---- Navegação ---- */
.header-nav-link:hover,
.header-nav-link.w--current{
  color:#e91e8c;
}

/* ---- Links de título / cards ---- */
.link-title-dark:hover{ color:#e91e8c; }
.footer-link:hover{ color:#e91e8c; }

/* ---- Ícones / setas de acento ---- */
.diagonal-link-arrow{ color:#e91e8c; }
.stat-symbol-right{ color:#e91e8c; }
.line-square-icon, .line-rounded-icon{ /* herdam a cor do contexto */ }

/* ---- Links de texto sobre fundo escuro (e-mail no CTA/rodapé) ---- */
a.color-neutral-100.hover-color-neutral-400:hover{ color:#e91e8c !important; }

/* ---- Ícones sociais (hover) ---- */
.social-icon-link:hover{ color:#e91e8c; }

/* ---- Detalhes de seleção ---- */
::selection{ background:#e91e8c; color:#fff; }

/* ============================================================
   AUDITORIA UX/UI — Acessibilidade, CRO e responsividade
   ============================================================ */

/* ---- Foco visível p/ teclado (WCAG 2.4.7) ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid #e91e8c;
  outline-offset:3px;
  border-radius:3px;
}

/* ---- Skip link (pular para o conteúdo) ---- */
.skip-link{
  position:fixed; left:12px; top:-120px; z-index:1100;
  background:#151515; color:#fff; padding:12px 20px;
  border-radius:0 0 8px 8px; font-weight:600; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{ top:0; color:#fff; }

/* ---- Respeita preferência de menos movimento ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---- Contraste AA p/ links de texto em rosa (texto pequeno, fundo claro) ---- */
p a:not(.btn-primary):not(.btn-secondary), .text-link{ color:#c4186f; }
p a:not(.btn-primary):not(.btn-secondary):hover, .text-link:hover{ color:#9c1456; }

/* ---- Rodapé: coluna vertical, espaçamento e quebra de texto ---- */
.footer-list-wrapper{ display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; }
.footer-list-item{ display:block; }
.footer-list-wrapper .footer-link{
  display:inline-block; white-space:normal; word-break:break-word;
  line-height:1.5; color:#b8b3b6; transition:color .2s ease;
}
.footer-list-wrapper a.footer-link:hover{ color:#e91e8c; }
.footer-text{ color:#8c8790; }   /* itens não-clicáveis (ex.: horário) */

/* ============================================================
   Botão flutuante de WhatsApp (CRO — canal principal do negócio)
   ============================================================ */
.destaque-whatsapp-fab{
  position:fixed; right:24px; bottom:24px; z-index:950;
  display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:#fff;
  padding:14px 20px; border-radius:999px;
  box-shadow:0 8px 24px rgba(37,211,102,.45);
  text-decoration:none; font-weight:600; line-height:1;
  font-family:inherit; font-size:15px;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.destaque-whatsapp-fab:hover{
  background:#1ebe5d; color:#fff; transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(37,211,102,.6);
}
.destaque-whatsapp-fab svg{ width:26px; height:26px; flex:none; fill:#fff; }
@media (max-width:768px){
  .destaque-whatsapp-fab{ right:16px; bottom:16px; padding:15px; }
  .destaque-whatsapp-fab .fab-label{ display:none; }
}

/* ============================================================
   COR + EFEITOS — painéis escuros com gradiente sutil de marca
   (grafite dominante, rosa como brilho de acento — 60-30-10)
   ============================================================ */
.top-section.large-image-right,
.top-section.large-image-left,
.top-section.bg-image-large,
.section.template-pages-hero{
  background-image:
    radial-gradient(120% 140% at 0% 0%, rgba(233,30,140,.22) 0%, rgba(233,30,140,0) 45%),
    linear-gradient(135deg, #17151a 0%, #15131a 55%, #2a0f1d 100%) !important;
}
.cta-section, .cta-card, .footer-top-bg-top, .footer-v2-container{
  background-image:
    radial-gradient(100% 120% at 100% 0%, rgba(233,30,140,.20) 0%, rgba(233,30,140,0) 50%),
    linear-gradient(120deg, #151515 0%, #1d1218 100%) !important;
}
/* leve overlay rosa na borda da imagem do hero (coesão de marca) */
.top-section---image-right-wrapper::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(21,21,21,.55) 0%, rgba(21,21,21,0) 30%);
}
.top-section---image-right-wrapper{ position:relative; }

/* ============================================================
   TIPOGRAFIA — display mais encorpado e legível
   ============================================================ */
.display-1{ letter-spacing:-.02em; line-height:1.02; }
.display-2{ letter-spacing:-.015em; }
.display-3, .display-4{ letter-spacing:-.01em; }
/* subtítulo do hero com leitura mais confortável */
.top-section .color-neutral-200{ font-size:1.0625rem; line-height:1.6; }
/* rótulos/eyebrows em rosa para hierarquia */
.text-200.medium.color-neutral-400{ color:#e91e8c !important; letter-spacing:.08em; text-transform:uppercase; }

/* ============================================================
   Ajustes Customizados do Hero (Imagem Direita com Degradê e Reflexo)
   ============================================================ */

/* Faz com que a imagem do carro na direita pareça um background translúcido nas bordas */
#conteudo .top-section---image-right-wrapper {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 35%);
  mask-image: linear-gradient(to right, transparent 0%, black 35%);
  padding-bottom: 20px; /* espaço para o reflexo curto */
}

/* Arredonda as pontas da imagem e aplica o reflexo e leve sombra */
#conteudo .top-section---image-right-wrapper img {
  border-radius: 8px;
  -webkit-box-reflect: below 2px linear-gradient(transparent 85%, rgba(150, 150, 150, 0.4));
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  max-height: 100%;
}

/* Ocultar os pontos brilhantes roxos/azuis (Brix templates badges) */
.brix-badges-wrapper {
  display: none !important;
}

/* ============================================================
   Otimização de Espaços (Remoção de Vazios)
   ============================================================ */

/* 1. Ocultar botão com seta pra baixo */
.scroll-down-button-right-container {
  display: none !important;
}

/* 2. Diminuir o espaço sobrando no final do bloco do Hero (área escura) */
section#conteudo.top-section {
  padding-bottom: 80px !important; /* Aumentado de 40px para 80px para o fundo escuro cobrir a sombra da imagem e passar os botões */
}

/* 3. Diminuir o espaço sobrando no começo do bloco de Clientes (área branca) */
section#conteudo + section {
  padding-top: 0px !important; /* Zerado para compensar o aumento do fundo escuro acima e não empurrar os clientes para baixo */
}

/* ============================================================
   Arredondamento Global de Imagens
   ============================================================ */
img:not([src*="logo"]):not([src*="svg"]):not(.line-square-icon):not(.large-button-white-icon) {
  border-radius: 12px;
}

/* ============================================================
   Redução drástica (60%) nos espaços em branco globais do site
   ============================================================ */
.section { padding-top: 30px !important; padding-bottom: 30px !important; }
.pd-148px { padding-top: 40px !important; padding-bottom: 40px !important; }
.pd-80px { padding-top: 24px !important; padding-bottom: 24px !important; }
.mg-bottom-80px { margin-bottom: 24px !important; }
.mg-bottom-72px { margin-bottom: 20px !important; }
.mg-bottom-64px-tablet { margin-bottom: 18px !important; }
.mg-bottom-48px { margin-bottom: 14px !important; }
.mg-bottom-40px { margin-bottom: 12px !important; }
.mg-bottom-32px { margin-bottom: 10px !important; }
.gap-row-80px { row-gap: 24px !important; }
.gap-row-48px { row-gap: 14px !important; }