/* ==========================================================================
   HPCreative — Hero da home (apresentação, aprovada em 03/11/2026)
   Não promete: apresenta. Cada serviço vende na própria landing page.
   O texto fica no centro e, embaixo, duas faixas de trabalhos reais correm
   em sentidos opostos (as imagens ficam em assets/img/heros/parede/).
   ========================================================================== */
.ha {
  position: relative; isolation: isolate; overflow: hidden; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
  padding: clamp(104px, 13vh, 140px) 0 clamp(48px, 8vh, 88px); background: var(--bg);
}
.ha__inner {
  position: relative; z-index: 2; width: min(1240px, 100% - var(--gutter, 24px) * 2); margin-inline: auto;
  display: grid; gap: 22px; justify-items: center; text-align: center;
}
.ha__olho { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ha__titulo {
  margin: 0; font-family: var(--font-display); font-weight: 300; color: var(--text);
  font-size: clamp(2.5rem, 5.6vw, 5rem); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance;
}
.ha__titulo strong { font-weight: 700; color: var(--accent-text); }
.ha__lead { margin: 0; max-width: 38rem; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.ha__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; }
.ha .hp-btn--primary { animation: hx-respira 3.2s ease-in-out infinite; }

/* as duas faixas de trabalhos */
.ha-trilhos {
  position: relative; z-index: 1; min-width: 0; overflow: hidden; display: grid; gap: 14px; margin-top: clamp(36px, 6vh, 60px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ha-trilho { display: flex; gap: 14px; width: max-content; animation: ha-corre 60s linear infinite; }
.ha-trilho--volta { animation-direction: reverse; animation-duration: 70s; }
.ha-trilho a { flex: none; display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .9); }
.ha-trilho img { display: block; height: clamp(150px, 19vh, 210px); width: auto; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ha-trilhos:hover .ha-trilho { animation-play-state: paused; }
  .ha-trilho a:hover img { transform: scale(1.04); }
}
@keyframes ha-corre { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .ha-trilho, .ha .hp-btn--primary { animation: none; }
}

/* ==========================================================================
   Sobre com a foto sem moldura (proposta de 03/11/2026, no jeito da LP de saúde):
   a foto do escritório sangra pela esquerda e some no fundo; o texto fica à direita.
   ========================================================================== */
.sb-sangra { overflow: hidden; isolation: isolate; }
.sb-sangra .hp-section__inner { position: relative; z-index: 2; }
.sb-foto { position: absolute; z-index: 1; inset: 0 auto 0 0; width: 52%; margin: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 40%), linear-gradient(to top, transparent 0, #000 18%), linear-gradient(to bottom, transparent 0, #000 12%);
          mask-image: linear-gradient(to left, transparent 0, #000 40%), linear-gradient(to top, transparent 0, #000 18%), linear-gradient(to bottom, transparent 0, #000 12%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* foto mais perto: o rosto e a caneca ocupam a seção */
.sb-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; transform: scale(1.32); transform-origin: 46% 36%; }
.sb-cta { margin-top: var(--s-8); }
.sb-vazio { min-height: 1px; }
@media (max-width: 820px) {
  .sb-sangra { padding-top: 0; }
  .sb-foto { position: relative; inset: auto; width: calc(100% + var(--gutter) * 2); margin: 0 calc(var(--gutter) * -1) -64px; height: min(110vw, 520px);
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 34%); mask-image: linear-gradient(to top, transparent 0, #000 34%);
    -webkit-mask-composite: source-over; mask-composite: add; }
  .sb-foto img { object-position: 50% 20%; transform: scale(1.25); transform-origin: 48% 34%; }
  .sb-vazio { display: none; }
}

/* ==========================================================================
   Dois banners girando (03/11/2026): troca a cada 5 s, setas e barrinhas.
   Os dois ocupam a mesma célula da grade; só o ativo aparece.
   ========================================================================== */
.ha-palco { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
/* tudo (texto, faixas e controles) cabe na primeira tela */
.ha-palco > .ha { grid-area: 1 / 1; padding-top: clamp(96px, 11vh, 124px); padding-bottom: 88px; min-height: 100svh;
  opacity: 0; visibility: hidden; transition: opacity 450ms ease, visibility 0s linear 450ms; }
.ha-palco > .ha.is-ativo { opacity: 1; visibility: visible; transition: opacity 450ms ease, visibility 0s; }
.ha-palco .ha-nav { bottom: 20px; }
.ha-palco .ha-trilhos { margin-top: clamp(24px, 4vh, 44px); gap: 12px; }
.ha-palco .ha-trilho { gap: 12px; }
.ha-palco .ha-trilho img { height: clamp(112px, 15vh, 190px); }
.ha-palco .hx-nav.is-contando .hx-nav__ponto.is-ativo i::after { animation-duration: 5s; }

/* banner 2: a foto sem moldura sangrando à direita, no jeito da LP de saúde */
.ha--foto .ha__inner { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); justify-items: start; text-align: left; }
.ha--foto .ha__copy { position: relative; z-index: 2; display: grid; gap: 22px; justify-items: start; }
.ha--foto .ha__titulo { font-size: clamp(2.4rem, 4.8vw, 4.3rem); }
.ha--foto .ha__ctas { justify-content: flex-start; }
.ha-prova { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: var(--text-3); font-size: .9rem; }
.ha-prova b { color: var(--text); font-weight: 600; }
.ha-prova__logos { display: flex; gap: 18px; align-items: center; opacity: .7; }
.ha-prova__logos img { height: 26px; width: auto; filter: grayscale(1) brightness(2.2); }
.ha-sangra { position: absolute; z-index: 1; inset: 0 0 0 auto; width: 58%; margin: 0; pointer-events: none; }
.ha-sangra img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to top, transparent 0, #000 22%);
          mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to top, transparent 0, #000 22%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 820px) {
  .ha-palco > .ha { padding-bottom: 84px; }
  .ha-palco .ha-nav { bottom: 16px; }
  .ha--foto { padding-top: 0; align-content: start; }
  .ha--foto .ha__inner { grid-template-columns: minmax(0, 1fr); }
  .ha-sangra { position: relative; inset: auto; width: 100%; height: min(84vw, 420px); margin-bottom: -56px; }
  .ha-palco .ha-trilho img { height: 96px; }
  .ha-sangra img { object-position: 50% 22%;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 34%); mask-image: linear-gradient(to top, transparent 0, #000 34%);
    -webkit-mask-composite: source-over; mask-composite: add; }
}
@media (prefers-reduced-motion: reduce) {
  .ha-palco > .ha { transition: none; }
}