/* Abertura "antes → depois" da home (aprovada em 18/10/2026). Cada par: site antigo ilustrativo → site feito pela Vért. */
/* ===== Opção A: antes → depois ===== */
.hero--ba h1 { font-size: clamp(2.8rem, 5.6vw, 4.8rem); color: var(--white); margin-top: 22px; }
.hero--ba h1 .serif { color: var(--champ); }
.hero--ba .hero__lead { color: var(--on-navy-2); }
.ba { position: relative; }
.ba__frame { position: relative; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); }
.ba__bar { height: 34px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #1B2436; }
.ba__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3A4558; }
.ba__url { margin: 0 auto; height: 20px; padding: 0 16px; border-radius: 6px; background: #0F1626; color: var(--on-navy-2); font-size: .75rem; display: flex; align-items: center; }
.ba__screen { position: relative; aspect-ratio: 16 / 10; }
.ba__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ba__after { clip-path: inset(0 100% 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; margin-left: -1.5px; background: var(--champ); box-shadow: 0 0 24px 6px rgba(216, 195, 165, .55); opacity: 0; z-index: 3; }
.ba__chip { position: absolute; bottom: 14px; z-index: 4; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; }
.ba__chip--antes { left: 14px; background: rgba(0, 0, 0, .55); color: #fff; }
.ba__chip--depois { right: 14px; background: var(--champ); color: var(--navy); opacity: 0; }
.ba__caps { position: relative; height: 24px; margin-top: 18px; }
.ba__caps span { position: absolute; left: 0; top: 0; font-size: .9375rem; color: var(--on-navy-2); opacity: 0; }
.ba__caps b { color: var(--white); }
@keyframes ba-cap { 0%, 4% { opacity: 0; } 10%, 29% { opacity: 1; } 33.3%, 100% { opacity: 0; } }

/* pares antes/depois: cada par aparece 4,5 s (ciclo de 13,5 s) */
.ba__pair { position: absolute; inset: 0; }
.ba__pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ba__pair + .ba__pair { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ba__pair { animation: ba-pair 13.5s step-end infinite; }
  .ba__pair:nth-child(1) { animation-name: ba-pair1; }
  .ba__pair:nth-child(2) { animation-delay: 4.5s; }
  .ba__pair:nth-child(3) { animation-delay: 9s; }
  .ba__after { animation: ba-wipe 4.5s cubic-bezier(.65, 0, .35, 1) infinite; }
  .ba__line { animation: ba-line 4.5s cubic-bezier(.65, 0, .35, 1) infinite; }
  .ba__chip--depois { animation: ba-chip 4.5s ease infinite; }
  .ba__chip--antes { animation: ba-antes 4.5s ease infinite; }
  .ba__caps span { animation: ba-cap 13.5s ease infinite; }
  .ba__caps span:nth-child(2) { animation-delay: 4.5s; }
  .ba__caps span:nth-child(3) { animation-delay: 9s; }
}
@media (prefers-reduced-motion: reduce) { .ba__pair:first-child .ba__after { clip-path: none; } .ba__chip--depois, .ba__caps span:first-child { opacity: 1; } .ba__chip--antes { opacity: 0; } }
@keyframes ba-pair1 { 0% { opacity: 1; } 33.33% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ba-pair { 0% { opacity: 1; } 33.33%, 100% { opacity: 0; } }
@keyframes ba-wipe { 0%, 34% { clip-path: inset(0 100% 0 0); } 62%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes ba-line { 0%, 33% { left: 0; opacity: 0; } 36% { opacity: 1; } 62% { left: 100%; opacity: 1; } 66%, 100% { left: 100%; opacity: 0; } }
@keyframes ba-chip { 0%, 60% { opacity: 0; transform: translateY(6px); } 68%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ba-antes { 0%, 34% { opacity: 1; } 42%, 100% { opacity: 0; } }


@media (max-width: 600px) { .ba__chip { font-size: .625rem; padding: 5px 9px; } .ba__caps span { font-size: .8125rem; } }

@media (min-width: 980px) { .hero--ba .hero__grid { grid-template-columns: .85fr 1.15fr; gap: 56px; } }
.ba { margin: 0; width: 100%; }