/**
 * Construwebsite — custom overrides (versão estática Tailwind/CSS)
 * Adiciona: badge de preço, iframe dashboard, iframe marketing hero, logo mobile
 */

/* ============================================================
 * Badge de destaque pro preço (Investimento a partir de…)
 * ============================================================ */
strong.cw-price {
  display: inline-block;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(255, 83, 75, 0.22), rgba(255, 174, 71, 0.12));
  border: 1px solid rgba(255, 83, 75, 0.55);
  border-radius: 10px;
  padding: 10px 16px;
  margin-top: 6px;
  line-height: 1.3;
  box-shadow: 0 6px 18px rgba(255, 83, 75, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  letter-spacing: 0.2px;
}

/* ============================================================
 * Logo mobile no topo do hero
 * ============================================================ */
.hero-logo-mobile {
  display: none;
  max-width: 200px;
  width: 55%;
  height: auto;
  margin: 0 auto 18px;
}

/* ============================================================
 * Iframe Marketing Hero (mobile only)
 * ============================================================ */
.hero-marketing-mobile {
  display: none;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 18 / 13;
  border: 0;
  background: transparent;
  margin: 18px auto;
}

/* ============================================================
 * Iframe Dashboard — substitui a foto do laptop em todas as telas
 * ============================================================ */
.secret-dashboard {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 5;
  border: 0;
  background: transparent;
  margin: 0;
}

/* ============================================================
 * Mobile-only visibility
 * ============================================================ */
@media (max-width: 767px) {
  .hero-logo-mobile,
  .hero-marketing-mobile,
  .secret-dashboard {
    display: block;
  }

  /* Centraliza imagem hero no mobile */
  .hero-text {
    text-align: center;
  }

  /* Garante que o iframe não tenha barras de rolagem */
  .hero-marketing-mobile,
  .secret-dashboard {
    overflow: hidden;
  }

  /* Badge de preço fica em bloco no mobile pra ficar legível */
  strong.cw-price {
    display: block;
    text-align: center;
    font-size: 1rem !important;
  }
}

/* ============================================================
 * Cards de serviço: garantir botão alinhado no rodapé
 * ============================================================ */
.service-card {
  display: flex;
  flex-direction: column;
}
.service-card .btn {
  margin-top: auto;
}

/* ============================================================
 * Foco visível para acessibilidade
 * ============================================================ */
a:focus-visible, button:focus-visible {
  outline: 2px solid #ff534b;
  outline-offset: 3px;
  border-radius: 4px;
}

html { scroll-behavior: smooth; }

/* ============================================================
 * Carrossel de clientes: no desktop mostrar 3 por vez (imagens
 * maiores), no mobile mantém 2. Mantém animação contínua.
 * ============================================================ */
@media (min-width: 768px) {
  .clients-track-wrap {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }
  .clients-track {
    gap: 30px !important;
  }
  .clients-track img {
    width: 360px !important;
  }
}
@media (min-width: 1200px) {
  .clients-track img {
    width: 380px !important;
  }
}

/* ============================================================
 * Hero: texto estava gigante no desktop, layout descalibrado.
 * Reduzimos tipografia e ajustamos largura/padding.
 * ============================================================ */
.hero {
  min-height: 560px !important;
  padding: 70px 0 80px !important;
}
.hero-text { max-width: 620px !important; }
.hero-headline {
  font-size: 40px !important;
  line-height: 1.18 !important;
  margin-bottom: 24px !important;
  letter-spacing: -0.5px !important;
}
.hero-eyebrow {
  font-size: 13px !important;
  margin-bottom: 18px !important;
  letter-spacing: 0.22em !important;
}
.hero-tagline {
  font-size: 16px !important;
  margin-bottom: 28px !important;
}
@media (min-width: 1100px) {
  .hero-headline { font-size: 44px !important; }
  .hero { min-height: 600px !important; }
}
@media (max-width: 767px) {
  .hero { min-height: auto !important; padding: 40px 0 60px !important; }
  .hero-headline { font-size: 26px !important; margin-bottom: 18px !important; }
  .hero-eyebrow { font-size: 11px !important; margin-bottom: 14px !important; }
  .hero-tagline { font-size: 14px !important; margin-bottom: 22px !important; }
}

/* ============================================================
 * Ícones de serviço: o círculo vermelho enorme não combinava
 * com o design original. Reduzimos pra um quadrado arredondado
 * elegante com gradiente, igual aos cards anteriores.
 * ============================================================ */
.service-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ff534b 0%, #ffae47 100%) !important;
  font-size: 22px !important;
  box-shadow: 0 8px 22px rgba(255, 83, 75, 0.25);
}
.service-icon i {
  font-size: 22px;
  color: #fff;
}
.service-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  line-height: 1.25 !important;
}
@media (max-width: 767px) {
  .service-title { font-size: 19px !important; }
  .service-icon { width: 46px !important; height: 46px !important; border-radius: 10px !important; }
}

/* ============================================================
 * Rodapé: padrão geométrico estava deixando texto ilegível.
 * Substituímos por gradiente sutil e garantimos contraste.
 * ============================================================ */
.site-footer {
  background-image: none !important;
  background: linear-gradient(180deg, #0c0c10 0%, #000 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 50px 20px 36px !important;
  position: relative;
  color: #f5f7fb;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff534b, transparent);
  opacity: 0.55;
}
.footer-logo {
  max-width: 200px !important;
  filter: drop-shadow(0 4px 10px rgba(255, 83, 75, 0.20));
}
.footer-tagline {
  color: #d4d8e2 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}
.footer-tagline strong {
  color: #ffffff;
}
.footer-cnpj {
  color: #8a94a6 !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-top: 6px !important;
}
.footer-copy {
  color: #6b7385 !important;
  font-size: 12px !important;
  letter-spacing: 0.3px;
}
@media (max-width: 767px) {
  .site-footer { padding: 40px 18px 28px !important; }
  .footer-logo { max-width: 160px !important; }
  .footer-tagline { font-size: 14px !important; }
}

/* ============================================================
 * Barra de rolagem (scrollbar) com a cor da marca
 * Gradiente vermelho → laranja sobre trilho escuro.
 * ============================================================ */
/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #ff534b #141416;
}
/* WebKit (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #141416;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff534b 0%, #ffae47 100%);
  border-radius: 10px;
  border: 3px solid #141416;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff0b00 0%, #ff534b 100%);
}
::-webkit-scrollbar-corner {
  background: #141416;
}