/* =========================================================================
   Primeiras dobras — splash, hero em duas colunas, faixa de clientes,
   depoimentos com logo e atendimento com foto.
   ========================================================================= */

/* ------------------------------------------------------------- splash */
.aute-splash {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center;
  background: var(--black);
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
.aute-splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.aute-splash-mark { display: grid; justify-items: center; gap: 26px; }
.aute-splash-mark img {
  width: clamp(132px, 22vw, 190px); height: auto;
  filter: invert(1) brightness(1.6);
  opacity: 0; transform: translateY(9px);
  animation: aute-splash-in .9s var(--ease) forwards;
}
.aute-splash-bar {
  display: block; width: clamp(132px, 22vw, 190px); height: 2px;
  border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden;
}
.aute-splash-bar i {
  display: block; height: 100%; width: 100%;
  border-radius: inherit; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  animation: aute-splash-load 1.5s var(--ease) forwards;
}
@keyframes aute-splash-in  { to { opacity: 1; transform: none; } }
@keyframes aute-splash-load { to { transform: scaleX(1); } }
/* enquanto o splash estiver visível o body não rola */
body.is-splashing { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .aute-splash-mark img { animation: none; opacity: 1; transform: none; }
  .aute-splash-bar i    { animation: none; transform: scaleX(1); }
}

/* ------------------------------------------------ malha animada do hero */
.hero-grid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.hero-grid.is-on { opacity: .55; }

/* ------------------------------------- depoimentos: foto + logo da marca */
.testimonial-person { position: relative; padding-right: 96px; }
.testimonial-avatar { position: relative; overflow: hidden; }
.testimonial-avatar::before {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 600; letter-spacing: .02em; color: #fff;
}
.testimonial-avatar img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
/* precisa da classe do pai: 01-base.css tem ".testimonial-person img"
   forcando 58x58 em qualquer imagem que caia aqui dentro */
.testimonial-person img.testimonial-brand {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: auto; height: 26px; max-width: 92px;
  object-fit: contain; border-radius: 0; background: none;
  opacity: .38; pointer-events: none;
}
@media (max-width: 620px) {
  .testimonial-person { padding-right: 0; }
  .testimonial-person img.testimonial-brand { position: static; transform: none; margin-left: auto; height: 22px; }
}

/* ------------------------------------------- atendimento no chat lateral */
.diagnostic-nudge-icon { position: relative; overflow: hidden; }
.diagnostic-nudge-icon::before {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #fff;
}
.diagnostic-nudge-icon img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  filter: none;
}
.diagnostic-nudge-copy small { color: var(--accent); font-weight: 500; }

/* no celular o balão cobria a faixa de indicadores do hero: fica compacto */
@media (max-width: 620px) {
  .aute-diagnostic-nudge { left: auto; right: 12px; bottom: 12px; max-width: calc(100% - 24px); }
  .diagnostic-nudge { padding: 10px 14px 10px 10px; gap: 10px; }
  .diagnostic-nudge-icon { width: 38px; height: 38px; }
  .diagnostic-nudge-copy small { font-size: 10px; }
  .diagnostic-nudge-copy strong { font-size: 12.5px; line-height: 1.3; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
  .aute-diagnostic-nudge { max-width: min(300px, calc(100% - 24px)); }
  .diagnostic-nudge-arrow { display: none; }
}