/* Hero da Home (Figma: Home nova / Hero, 2309:57). O fundo é a
   composição inteira (foto + arcos decorativos + gradiente) já
   renderizada pelo Figma e exportada como uma imagem única — replicar
   a máscara/gradiente originais em CSS puro seria muito mais frágil
   que reaproveitar o render exato do Figma. */

.hero {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  background-image: linear-gradient(131.033deg, #141B29 15.803%, #672A1C 51.298%, #EC4208 87.082%);
}

/* Formas vazadas ao fundo (Figma "Formas", 2511:14356): arte de
   2185×1322 que começa a -124px / -106px do canto do canvas de 1920px —
   ancorada no centro da tela (não no canto), cortada pelo hero. */
.hero-formas {
  position: absolute;
  left: calc(50% - 1084px);
  top: -106px;
  width: 2185px;
  height: 1322px;
  max-width: none;
  pointer-events: none;
  z-index: 0;
}

/* ===== Desktop (≥1280px): Figma "Imagem desktop" (2511:14393) =====
   Caixa de referência de 1023,66×866 a 45px do topo e 67px à esquerda do
   centro. --u = 1px (a caixa tem 1023,66px). As formas laranja/brancas
   ficam num retângulo de 840,5×1034,6 girado -3,1° e recortado por uma
   máscara de 1023,66×866 (também girada); o homem (684×769, esticado
   como no Figma) entra por cima. */
.hero-man-wrap,
.hero-m-formas,
.hero-m-art { display: none; }

.hero-man-wrap {
  --u: 1px;
  position: absolute;
  z-index: 1;
  left: calc(50% - 67px);
  top: 45px;
  width: 1023.66px;
  height: 866px;
}
.hero-man { position: absolute; inset: 0; }
.hero-man-shapes {
  position: absolute;
  left: calc(var(--u) * 40.09);
  top: calc(var(--u) * 106.03);
  width: calc(var(--u) * 840.523);
  height: calc(var(--u) * 1034.563);
  transform: rotate(-3.1deg);
  -webkit-mask: url(../img/hero-man-mask.svg) no-repeat calc(var(--u) * -12.698) calc(var(--u) * -84.035) / calc(var(--u) * 1023.659) calc(var(--u) * 866);
  mask: url(../img/hero-man-mask.svg) no-repeat calc(var(--u) * -12.698) calc(var(--u) * -84.035) / calc(var(--u) * 1023.659) calc(var(--u) * 866);
}
.hero-man-shapes img { display: block; width: 100%; height: 100%; max-width: none; }
.hero-man-photo {
  position: absolute;
  left: calc(var(--u) * 53);
  top: calc(var(--u) * 97);
  width: calc(var(--u) * 684);
  height: calc(var(--u) * 769);
  max-width: none;
  object-fit: fill;
}

@media (min-width: 1280px) {
  .hero-man-wrap { display: block; }
}

/* ===== Mobile / tablet (<1280px): Figma "Mobile" (2583:19093) =====
   Canvas de 800px de largura; --u = (largura do hero, no máx. 800px) / 800.
   Fundo em gradiente 103,36° + formas (1220×1426 a -188/34 do canvas,
   ancoradas no centro) e, embaixo do texto, o bloco do homem de 709×747
   (formas giradas não: aqui são retas) recortado pelo próprio bloco. */
@media (max-width: 1279px) {
  .hero {
    --u: calc(min(100cqw, 800px) / 800);
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(103.36deg, #141B29 15.803%, #672A1C 51.298%, #EC4208 87.082%);
  }
  .hero-formas { display: none; }
  /* Canvas inteiro do Figma Mobile (800×1391, com as formas já
     deslocadas dentro dele) na MESMA escala do resto da arte (--u =
     largura/800), colado no topo e centralizado: as formas ficam com a
     proporção do desenho (antes, com "cover" pela altura, saíam ~35%
     maiores no celular e ficavam grosseiras). */
  .hero-m-formas {
    display: block;
    position: absolute;
    z-index: 0;
    left: calc(50% - var(--u) * 400);
    top: 0;
    width: calc(var(--u) * 800);
    height: calc(var(--u) * 1391);
    max-width: none;
    pointer-events: none;
  }
  .hero-m-formas--bottom { top: auto; bottom: 0; }
  .hero-stage { order: 1; }
  .hero-m-art {
    display: block;
    order: 2;
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: calc(var(--u) * 709);
    height: calc(var(--u) * 747);
    /* Sobe o bloco: os primeiros 104u dele são vazios (o topo das formas
       começa em y=104); deixa só ~12px de respiro até a prova social. */
    margin: calc(var(--u) * -104 + 12px) auto 0;
  }
  .hero-stage { padding-bottom: 0; }
  .hero-m-shapes,
  .hero-m-photo { position: absolute; max-width: none; }
  .hero-m-shapes { left: calc(var(--u) * 1); top: calc(var(--u) * 104); width: calc(var(--u) * 708); height: calc(var(--u) * 871); }
  .hero-m-photo { left: calc(var(--u) * 64); top: calc(var(--u) * 122); width: calc(var(--u) * 556); height: calc(var(--u) * 625); object-fit: fill; }
}

.hero-stage {
  position: relative;
  z-index: 2;
  padding: 120px 20px 32px;
}
@media (min-width: 1280px) {
  /* Título a y=250 (caixa de 202px centrada em y=262 no Figma, o texto
     de 3 linhas tem 226px e vaza 12px pra cima); hero de 911px. */
  .hero-stage { padding: 250px 20px 0; min-height: 911px; box-sizing: border-box; }
}

.hero-copy { max-width: 620px; }

/* Pedido do cliente: no mobile o hero fica centralizado (título,
   texto, botões e usuários), diferente do desktop (alinhado à
   esquerda). */
@media (max-width: 899px) {
  .hero-copy { text-align: center; }
  .hero-actions { margin-left: auto; margin-right: auto; align-items: center; }
}

/* Tipografia bem mais compacta que o desktop de propósito: o homem
   na foto de fundo já começa na metade da altura da seção (ver nota
   acima), então esse bloco de texto precisa caber num espaço bem
   mais apertado do que pareceria natural — daí fontes/espaçamentos
   bem menores aqui do que o normal só até 1024px. */
.hero-copy h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.32px;
  margin-bottom: 12px;
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .hero-copy h1 { font-size: 58px; line-height: 1.3; letter-spacing: -0.58px; margin-bottom: 15.8px; }
}

/* As quebras manuais (ver render.php) valem só a partir de 1024px —
   é onde o Figma define a quebra em 3 linhas específicas. Abaixo
   disso, escondendo os <br>, o texto some e o balance/wrap automático
   (que já ficou bom nesse tamanho de fonte/coluna) assume de novo. */
@media (max-width: 1023px) {
  .hero-title-break { display: none; }
}

.lead--on-dark { color: var(--color-white); font-weight: 300; font-size: 15px; line-height: 1.4; text-wrap: balance; }
@media (min-width: 1024px) {
  .lead--on-dark { font-size: 24px; line-height: 1.5; max-width: 580px; margin: 0; text-wrap: wrap; }
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  gap: 10px;
  margin-top: 26px;
}
@media (min-width: 1024px) {
  /* Botões a y=620,5: 33,5px abaixo do texto; 18px entre eles. */
  .hero-actions { gap: 18px; margin-top: 33.5px; }
}
.hero-actions .btn-primary,
.hero-actions .btn-ghost {
  justify-content: center;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 15px;
}
@media (min-width: 1024px) {
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { box-sizing: border-box; height: 60.5px; padding: 0 24px; font-size: 18px; line-height: 1.3; }
  .hero-actions .btn-primary { min-width: 314px; }
}
/* Gradiente do botão principal (Figma 2511:14368). */
.hero-actions .btn-primary { background-image: linear-gradient(146.071deg, #BD2019 2.4171%, #EC4208 58.946%); }
@media (min-width: 500px) {
  .hero-actions { flex-direction: row; align-items: center; width: auto; }
}
/* Mobile/tablet: botões mais largos — largura total da coluna (um embaixo
   do outro no celular, lado a lado e dividindo a linha a partir de 500px). */
@media (max-width: 1023px) {
  .hero-actions { width: 100%; max-width: 560px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { flex: 1 1 0; width: 100%; padding-left: 16px; padding-right: 16px; }
}
/* Celular: um pouco mais largos que o conteúdo (≈80% da coluna), não a
   largura toda. */
@media (max-width: 499px) {
  .hero-actions { margin-left: auto; margin-right: auto; align-items: center; width: 80%; min-width: 260px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { flex: 0 0 auto; width: 100%; }
}

/* Botão secundário do Hero: variante com blur, só aqui — o
   ".btn-ghost--white" padrão (usado em outros heróis internos) não
   tem esse vidro fosco, então isso fica isolado numa classe extra em
   vez de mudar o componente compartilhado. */
.hero-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Seta do botão principal: pequeno deslize pra direita no hover,
   reforçando a ideia de avançar. */
.hero-actions .btn-primary img { transition: transform 200ms ease; }
.hero-actions .btn-primary:hover img { transform: translateX(4px); }

/* Compound com ".headline-social-proof" (não só ".hero-social-proof")
   de propósito: as duas classes têm a mesma especificidade e
   modulos.css — que define justify-content:center nela — carrega
   DEPOIS de hero.css na fila de estilos, então venceria no empate.
   Precisa de mais especificidade aqui, não só depender da ordem. */
.headline-social-proof.hero-social-proof { margin-top: 24px; justify-content: center; }
@media (min-width: 1024px) {
  /* Avatares a y=725,3: 44,3px abaixo dos botões. */
  .headline-social-proof.hero-social-proof { margin-top: 44.3px; justify-content: flex-start; gap: 8.8px; }
}

/* flex-shrink:0 é o que importa aqui: sem isso, ao passar o mouse
   (avatar-stack fica mais largo, "expansão lateral") o texto era
   espremido pra caber no espaço que sobrava, quebrando numa 3ª linha
   diferente do estado normal — parecia "desalinhar" do grupo de
   avatares no hover. Com largura própria fixa, ele não reage mais ao
   quanto o vizinho cresce. */
.hero-social-proof .headline-text { flex-shrink: 0; }

/* Só no hero (não mexe no headline de Módulos, que usa o mesmo
   componente): largura pensada pra "Referência entre os maiores
   players de cada segmento." quebrar em exatamente 2 linhas, não 3. */
@media (max-width: 899px) {
  .hero-social-proof .headline-text { max-width: 190px; text-align: left; }
}
/* No desktop, largura pensada pra quebrar em exatamente 2 linhas
   ("Referência entre os maiores / players de cada segmento."), não 3
   (largo demais) nem 1 (estreito demais). */
@media (min-width: 1024px) {
  /* Texto de 11,77px em caixa de 166px (Figma 2511:14386). */
  .hero-social-proof .headline-text { max-width: 188.4px; font-size: 11.772px; line-height: 1.5; gap: 4.4px; }
  .hero-social-proof .headline-text .arrow-up { width: 17.66px; height: 17.66px; }
}

/* Avatares um pouco menores aqui do que no padrão compartilhado
   (56px) — tanto no mobile (pra a fileira ficar mais compacta e
   sobrar espaço pra foto abaixo do texto) quanto no desktop (pedido
   do cliente, ficavam grandes demais perto do texto). */
.hero-social-proof .avatar-stack img,
.hero-social-proof .avatar-stack .avatar-badge {
  width: 40px;
  height: 40px;
  margin-left: -12px;
  font-size: 11px;
}
@media (min-width: 1024px) {
  /* Avatares de 51,87px com passo de 37,65px (Figma 2511:14376…14380). */
  .hero-social-proof .avatar-stack img,
  .hero-social-proof .avatar-stack .avatar-badge { width: 51.87px; height: 51.87px; margin-left: -14.22px; font-size: 14.98px; letter-spacing: -0.15px; }
}

/* "Expansão lateral": os avatares empilhados (componente
   compartilhado com o headline de Módulos, ver modulos.css) se
   afastam uns dos outros ao passar o mouse por cima do grupo,
   revelando cada foto por inteiro em vez de ficarem só encavalados. */
.hero-social-proof .avatar-stack img,
.hero-social-proof .avatar-stack .avatar-badge {
  transition: margin-left 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-social-proof .avatar-stack:hover img:not(:first-child),
.hero-social-proof .avatar-stack:hover .avatar-badge {
  margin-left: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-social-proof .avatar-stack img,
  .hero-social-proof .avatar-stack .avatar-badge { transition: none; }
}

/* Entrada suave: título, texto, botões e prova social aparecem em
   sequência ao carregar a página (a seção já está visível de cara,
   sem precisar de scroll, então não depende de IntersectionObserver
   como o restante das animações de revelação do site). */
.hero-copy h1,
.hero-copy .lead,
.hero-copy .hero-actions,
.hero-copy .hero-social-proof {
  opacity: 0;
  transform: translateY(24px);
  animation: mercanet-hero-in 700ms ease forwards;
}
.hero-copy h1 { animation-delay: 120ms; }
.hero-copy .lead { animation-delay: 260ms; }
.hero-copy .hero-actions { animation-delay: 400ms; }
.hero-copy .hero-social-proof { animation-delay: 540ms; }

@keyframes mercanet-hero-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy h1,
  .hero-copy .lead,
  .hero-copy .hero-actions,
  .hero-copy .hero-social-proof {
    opacity: 1;
    transform: none;
    animation: none;
  }
}