/* ============================================================
   heros.css — hero da landing Feitosa & Freitas (direção escolhida:
   Opção 2 · Split moderno com o mapa do Brasil).
   Os heros das direções descartadas (editorial, clássico, seamless)
   foram removidos em 21/07/2026 — histórico no git e estudos em
   saidas/hero-lab/. Mobile-first; reusa .btn-zap/.btn-secundario
   do base.css.
   ============================================================ */

/* entrada orquestrada no carregamento (progressive enhancement) */
@media (prefers-reduced-motion: no-preference) {
  .h-sobe { animation: h-sobe 0.85s cubic-bezier(0.16, 0.8, 0.24, 1) both; }
  .hs-miolo > .h-sobe:nth-child(2) { animation-delay: 0.12s; }
  .hs-miolo > .h-sobe:nth-child(3) { animation-delay: 0.24s; }
  .hs-miolo > .h-sobe:nth-child(4) { animation-delay: 0.36s; }
  .hs-miolo > .h-sobe:nth-child(5) { animation-delay: 0.48s; }
  .hs-miolo > .h-sobe:nth-child(6) { animation-delay: 0.60s; }
  @keyframes h-sobe { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}

/* ============================================================
   HERO SPLIT (badge animada, tiles, foto IA do mapa do Brasil)
   ============================================================ */
.hero-split {
  position: relative;
  padding-top: 64px; /* header fixo */
  display: grid;
}
.hs-texto { position: relative; padding: 2.5rem 1.25rem 2.25rem; }
.hs-texto::before { /* grid de pontos com máscara radial */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--destaque-texto) 1.2px, transparent 1.2px);
  background-size: 24px 24px; opacity: 0.07;
  -webkit-mask-image: radial-gradient(480px 380px at 30% 30%, #000, transparent 75%);
  mask-image: radial-gradient(480px 380px at 30% 30%, #000, transparent 75%);
}
.hs-miolo { max-width: 560px; margin: 0 auto; } /* sem position: a foto absoluta (desktop) referencia a section */

/* Badge quieta e premium: borda dourada estática; só o ponto verde respira */
.hs-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 600; color: var(--destaque-texto);
  padding: 0.55rem 1.05rem; border-radius: 999px; background: var(--fundo);
  border: 1px solid color-mix(in srgb, var(--destaque) 45%, transparent);
  margin-bottom: 1.3rem;
}
.hs-ponto {
  width: 8px; height: 8px; border-radius: 50%; background: #25d366;
  box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.18); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hs-ponto { animation: hs-ponto 2.6s ease-in-out infinite; }
  @keyframes hs-ponto {
    0%, 100% { box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.18); }
    50% { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0.09); }
  }
}

.hero-split h1 { letter-spacing: -0.03em; margin-bottom: 1rem; }
/* "não é" com fio dourado que se desenha após a entrada */
.hero-split h1 em {
  font-style: normal; color: var(--destaque-texto);
  position: relative; white-space: nowrap;
}
.hero-split h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.1em;
  height: 2px; border-radius: 2px; background: var(--destaque);
  transform: scaleX(1); transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-split h1 em::after {
    transform: scaleX(0);
    animation: hs-risco 0.7s cubic-bezier(0.16, 0.8, 0.24, 1) 1.35s forwards;
  }
  @keyframes hs-risco { to { transform: scaleX(1); } }
}
.hs-sub { color: var(--texto-suave); font-size: 1.02rem; margin-bottom: 1.5rem; }
.hs-ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.9rem; justify-content: center; }
/* mobile: os dois CTAs lado a lado, compactados */
@media (max-width: 767px) {
  .hs-ctas .btn-zap,
  .hs-ctas .btn-secundario {
    padding: 0.85rem 0.9rem;
    font-size: 0.92rem;
    white-space: nowrap;
  }
}

.hs-tiles { display: grid; gap: 0.7rem; }
.hs-tile {
  background: var(--fundo-card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 0.9rem 1rem;
}
.hs-tile b { display: block; font-size: 1rem; letter-spacing: -0.01em; margin-bottom: 0.15rem; }
.hs-tile span { font-size: 0.78rem; color: var(--texto-suave); line-height: 1.35; }

.hs-foto { /* mobile: card compacto e centrado entre o sub e os CTAs */
  position: relative; overflow: hidden; background: #16090a;
  max-width: 360px;
  margin: 0 auto 1.6rem;
  border-radius: var(--radius-card);
  box-shadow: 0 16px 40px rgba(90, 14, 18, 0.18);
}
.hs-foto img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; /* recorte que preserva os dois rostos */
  object-fit: cover; object-position: 50% 24%;
}
/* "Sinal pelo Brasil": anéis de luz emanando do centro dos anéis PINTADOS na foto.
   mix-blend-mode: screen → só clareia o fundo escuro (parece vir de dentro da imagem);
   cada anel nasce alinhado aos anéis da arte e se apaga antes de alcançar as advogadas. */
.hs-sinal {
  position: absolute; left: 50%; top: 30%;
  width: 0; height: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hs-sinal i {
  position: absolute; left: 0; top: 0;
  width: 460px; height: 460px; margin: -230px 0 0 -230px;
  border: 1.5px solid rgba(226, 186, 77, 0.55);
  border-radius: 50%;
  filter: blur(0.6px);
  transform: scale(0.12);
  opacity: 0; /* invisível parado e no reduced-motion */
}
@media (prefers-reduced-motion: no-preference) {
  .hs-sinal i { animation: hs-sinal 8s linear infinite; }
  .hs-sinal i:nth-child(2) { animation-delay: 2.7s; }
  .hs-sinal i:nth-child(3) { animation-delay: 5.4s; }
  @keyframes hs-sinal {
    0%   { transform: scale(0.12); opacity: 0; }
    10%  { opacity: 0.5; }
    65%  { opacity: 0.14; }
    100% { transform: scale(1); opacity: 0; }
  }
}
@media (max-width: 767px) {
  /* card compacto: anéis proporcionais e mais discretos sobre as advogadas */
  .hs-sinal { left: 50%; top: 26%; }
  .hs-sinal i { width: 280px; height: 280px; margin: -140px 0 0 -140px; border-color: rgba(226, 186, 77, 0.45); }
}

.hs-flutua {
  position: absolute; left: 0.8rem; bottom: 0.8rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff; font-size: 0.74rem; font-weight: 600;
  padding: 0.5rem 0.8rem; border-radius: 10px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hs-flutua svg { width: 19px; height: 19px; fill: #25d366; flex: none; }

@media (min-width: 768px) {
  .hero-split { display: block; position: relative; min-height: min(92vh, 860px); }
  .hs-texto { display: grid; align-content: center; width: 52.5%; min-height: min(92vh, 860px); padding: 3rem 2.5rem 3rem 1.5rem; }
  .hs-miolo { margin: 0; justify-self: end; }
  .hs-tiles { grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
  .hs-ctas { justify-content: flex-start; }
  /* a foto sai do fluxo e vira a metade direita inteira.
     containing block = .hs-texto (52.5% da tela, relative): left 100% cola a foto
     na borda direita do texto; 90.48% de 52.5% = os 47.5% restantes da tela. */
  .hs-foto {
    position: absolute; top: 0; left: 100%; bottom: 0; width: 90.48%; margin: 0;
    max-width: none; border-radius: 0; box-shadow: none;
  }
  .hs-flutua { left: 1.1rem; bottom: 1.1rem; font-size: 0.84rem; padding: 0.65rem 1rem; border-radius: 12px; }
  .hs-foto img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    aspect-ratio: auto;
    object-fit: cover; object-position: 50% 18%; /* rostos sempre na janela */
  }
}