/*--------------------------------------------------------------
# Dois Gestores - personalização do iLanding
# Paleta da marca (azul #1498D5, preto e branco) aplicada por
# variáveis; não editar main.css.
--------------------------------------------------------------*/
:root {
  --brand-blue: #1498d5;
  --brand-blue-light: #4db4e4;
  --brand-blue-dark: #0e6e9c;
  --brand-ink: #000000;

  --background-color: #ffffff;
  --default-color: #1d2a33;
  --heading-color: #000000;
  --accent-color: #1498d5;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;

  --nav-color: #1d2a33;
  --nav-hover-color: #1498d5;
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #1d2a33;
  --nav-dropdown-hover-color: #1498d5;
}

.light-background {
  --background-color: #f1f8fc;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #1498d5;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #3aa9e0;
  --contrast-color: #ffffff;
}

/* Logo */
.brand-logo {
  display: block;
  height: 44px;
  width: auto;
}
.header .logo .brand-logo { height: 42px; }
.footer .logo .brand-logo { height: 46px; }

@media (max-width: 575px) {
  .header .logo .brand-logo { height: 34px; }
}

/* Destaque em preto, como no "DOIS GESTORES" da logo */
.hero .hero-content h1 .ink-text { color: var(--brand-ink); }

/* Selo de conteúdo provisório (some quando o texto final entrar) */
.conteudo-provisorio {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 50px;
  background: #fff4d6;
  color: #8a5a00;
  font-size: 0.6875rem;
  font-weight: 600;
  vertical-align: middle;
}

/* Portfólio (cases) com os cards do iLanding */
.portfolio .case-card {
  height: 100%;
  padding: 28px;
  border-radius: 16px;
  background: var(--surface-color);
  box-shadow: 0 10px 30px rgb(20 152 213 / 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
.portfolio .case-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgb(20 152 213 / 0.16); }
.portfolio .case-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 12px;
  border-radius: 50px;
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
  font-size: 0.75rem;
  font-weight: 600;
}
.portfolio .case-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; }
.portfolio .case-card p { margin-bottom: 16px; color: color-mix(in srgb, var(--default-color), transparent 20%); }
.portfolio .case-card { display: flex; flex-direction: column; align-items: flex-start; }
.portfolio .case-card h3 { margin-bottom: 2px; }
.portfolio .case-tipo { display: block; margin-bottom: 12px; font-size: 0.875rem; font-weight: 600; color: var(--accent-color); }
.portfolio .case-link { margin-top: auto; font-weight: 600; font-size: 0.875rem; }
.portfolio .case-link i { font-size: 0.75rem; margin-left: 4px; }

/* Formulário de contato: envio normal (sem o validate.js do template) */
.contact .contact-form .invalid-feedback { display: block; text-align: left; }
.contact .contato-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact .contact-form .btn i { margin-left: 6px; }

/*--------------------------------------------------------------
# Hero vivo: elementos flutuando em volta da ilustração
--------------------------------------------------------------*/
.hero .hero-vivo { padding: 24px 12px; }
.hero .hero-ilustracao { animation: hero-respira 7s ease-in-out infinite; }

.hero-flutuante {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface-color);
  box-shadow: 0 12px 30px rgb(20 152 213 / 0.18);
  text-align: left;
  font-family: var(--heading-font);
  will-change: transform;
}
.hero-flutuante strong { display: block; font-size: 1.1rem; line-height: 1.1; color: var(--heading-color); }
.hero-flutuante small { display: block; font-size: 0.72rem; color: color-mix(in srgb, var(--default-color), transparent 35%); }
.hero-flutuante .hf-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color), transparent 86%);
  color: var(--accent-color);
}
.hero-flutuante .hf-rosa { background: #ffe4ec; color: #e11d48; }

.hf-cliques { top: 6%; left: -2%; animation: hero-flutua 5s ease-in-out infinite; }
.hf-curtidas { top: 34%; right: -3%; animation: hero-flutua 6s ease-in-out -2s infinite; }
.hf-grafico {
  bottom: 30%; left: 2%;
  flex-direction: column; align-items: flex-start; gap: 6px;
  animation: hero-flutua 7s ease-in-out -1s infinite;
}
.hf-grafico .hf-titulo { font-size: 0.72rem; font-weight: 600; color: color-mix(in srgb, var(--default-color), transparent 30%); }
.hf-grafico .hf-barras { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.hf-grafico .hf-barras i {
  width: 8px; height: var(--h); border-radius: 4px;
  background: linear-gradient(180deg, #4db4e4, #1498d5);
  transform-origin: bottom;
  animation: hero-barra 2.8s ease-in-out infinite;
}
.hf-grafico .hf-barras i:nth-child(2) { animation-delay: .2s; }
.hf-grafico .hf-barras i:nth-child(3) { animation-delay: .4s; }
.hf-grafico .hf-barras i:nth-child(4) { animation-delay: .6s; }
.hf-grafico .hf-barras i:nth-child(5) { animation-delay: .8s; }
.hf-grafico .hf-barras i:nth-child(6) { animation-delay: 1s; }
.hf-grafico .hf-variacao { font-size: 0.8rem; color: #16a34a; display: flex; align-items: center; gap: 4px; }
.hf-grafico .hf-variacao strong { display: inline; font-size: 0.9rem; color: #16a34a; }

.hero-bolha {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-color); color: #fff;
  box-shadow: 0 10px 22px rgb(20 152 213 / 0.35);
  font-size: 1.05rem;
}
.hb-1 { top: 0; right: 22%; animation: hero-sobe 6s ease-in-out infinite; }
.hb-2 { bottom: 18%; right: 8%; background: #000; animation: hero-sobe 7s ease-in-out -3s infinite; }
.hb-3 { top: 52%; left: 38%; width: 34px; height: 34px; font-size: .85rem; background: #4db4e4; animation: hero-sobe 8s ease-in-out -5s infinite; }

@keyframes hero-flutua {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -14px, 0); }
}
@keyframes hero-sobe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6px, -18px, 0) scale(1.08); }
}
@keyframes hero-barra {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.7); }
}
@keyframes hero-respira {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

/* Entrada escalonada do texto e dos botões do hero */
.hero-entrada > * {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-entra .8s cubic-bezier(.2, .7, .2, 1) forwards;
}
.hero-entrada > *:nth-child(1) { animation-delay: .1s; }
.hero-entrada > *:nth-child(2) { animation-delay: .25s; }
.hero-entrada > *:nth-child(3) { animation-delay: .4s; }
.hero-entrada > *:nth-child(4) { animation-delay: .55s; }
@keyframes hero-entra { to { opacity: 1; transform: none; } }

/* Destaque que alterna na palavra "resultados" */
.hero .accent-text {
  background: linear-gradient(90deg, #1498d5, #4db4e4, #0e6e9c, #1498d5);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hero-brilho 6s linear infinite;
}
@keyframes hero-brilho { to { background-position: 300% 0; } }

/* Cards que sobem um pouco ao passar o mouse */
.services .service-card,
.hero .stat-item { transition: transform .3s, box-shadow .3s; }
.services .service-card:hover,
.hero .stat-item:hover { transform: translateY(-6px); }

/* No computador, o cartão "Empresas que confiam" fica abaixo da ilustração
   (antes cobria a mesa, as pernas e a planta da direita) */
@media (min-width: 992px) {
  .hero .hero-vivo { padding-bottom: 132px; }
  .hero .customers-badge { bottom: 0; right: 24px; }
  .hb-2 { bottom: 104px; right: 4%; }
  .hf-grafico { bottom: 44%; left: -4%; }
}
/* Notebook: coluna estreita; "curtidas" sobe para o céu da ilustração para não cobrir o rapaz */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .hf-curtidas { top: 14%; right: -2%; }
}

@media (max-width: 991px) {
  .hf-cliques { left: 0; }
  .hf-curtidas { right: 0; }
}
@media (max-width: 575px) {
  .hero-flutuante { padding: 7px 10px; gap: 7px; border-radius: 10px; }
  .hero-flutuante strong { font-size: .9rem; }
  .hero-flutuante .hf-icone { width: 28px; height: 28px; }
  .hf-grafico, .hb-3 { display: none; }
  .hf-curtidas { top: 30%; }
}

/* Menos movimento para quem pediu no sistema */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-ilustracao,
  .hero-flutuante, .hero-bolha, .hf-grafico .hf-barras i,
  .hero .accent-text, .hero .customers-badge { animation: none !important; }
  .hero-entrada > * { opacity: 1; transform: none; animation: none; }
  .services .service-card:hover, .hero .stat-item:hover { transform: none; }
}