/* Movimento e elementos flutuantes.
   Os estados iniciais só valem com JS ativo (html.js) e sem "reduzir movimento". */

/* Transição entre páginas (View Transitions — Chrome, Edge e Safari recentes).
   Cabeçalho e botão do WhatsApp ficam parados; o conteúdo sai para cima e o novo entra por uma cortina. */
@view-transition { navigation: auto; }
.site-head { view-transition-name: site-head; }
.wa-float { view-transition-name: wa-float; }
::view-transition-old(root) { animation: vt-out .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .62s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-16px); } }
@keyframes vt-in  { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* Barra de carregamento no topo ao clicar num link interno */
.nav-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; pointer-events: none;
  background: linear-gradient(90deg, var(--orange), #FFB38A); transform: scaleX(0); transform-origin: left; }
.nav-progress.is-on { animation: np 1.4s cubic-bezier(.1, .7, .1, 1) forwards; }
@keyframes np { to { transform: scaleX(.85); } }

/* Linha de varredura que atravessa a tela quando a nova página chega */
.scanline { position: fixed; left: 0; right: 0; top: 0; height: 90px; z-index: 99; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(240, 90, 30, .07) 70%, rgba(240, 90, 30, .85) 98%, transparent); }
.scanline.is-on { animation: scan .9s cubic-bezier(.3, .1, .2, 1) forwards; }
@keyframes scan { 0% { opacity: 1; transform: translateY(-90px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(100vh); } }

/* Revelar ao rolar */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv.is-in { opacity: 1; transform: none; }

/* Cortina dupla (marinho + laranja) sobre fotos e vídeos */
.js .rv-img { position: relative; overflow: hidden; }
.js .rv-img::before, .js .rv-img::after { content: ""; position: absolute; inset: 0; z-index: 3; transform-origin: right; pointer-events: none;
  transition: transform .9s cubic-bezier(.75, 0, .2, 1); }
.js .rv-img::before { background: var(--orange); }
.js .rv-img::after  { background: var(--navy); }
.js .rv-img.is-in::after  { transform: scaleX(0); }
.js .rv-img.is-in::before { transform: scaleX(0); transition-delay: .16s; }

/* Títulos grandes: palavra por palavra */
.js .display .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.js .display .w > span { display: inline-block; transform: translateY(105%); transition: transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 55ms + 80ms); }
.js .display.is-in .w > span { transform: none; }

/* Fio laranja que se estende sob os títulos de seção */
.sec-head h2, .service h2, .faq > h2 { position: relative; padding-bottom: 16px; }
.sec-head h2::after, .service h2::after, .faq > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--orange); }
.js .sec-head h2::after, .js .service h2::after, .js .faq > h2::after { transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.7, 0, .2, 1) .25s; }
.js .is-in h2::after, .js h2.is-in::after { transform: scaleX(1); }

/* Moldura laranja do retrato se desenha */
.js .hero__photo::before { clip-path: inset(0 0 100% 100%); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1) .7s; }
.js .hero__photo.is-in::before { clip-path: inset(0 0 0 0); }

/* Grade técnica e varredura lenta nas faixas escuras */
.band--navy { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% 0%, #17498A 0%, var(--navy) 45%, var(--navy-2) 100%); }
.band--navy::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.band--navy::after { content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255, 138, 87, .06) 80%, rgba(255, 138, 87, .2) 99%, transparent);
  animation: band-scan 9s linear infinite; }
@keyframes band-scan { to { transform: translateY(440%); } }
.band--navy > * { position: relative; z-index: 1; }

.facts dt { font-variant-numeric: tabular-nums; }

/* Setas que andam no hover */
.link-arrow::after, .row__t a::after { display: inline-block; transition: transform .25s; }
.link-arrow:hover::after, .row:hover .row__t a::after { transform: translate(3px, -3px); }
.row { transition: background .3s; }
.row:hover { background: linear-gradient(90deg, rgba(240, 90, 30, .07), transparent 60%); }

/* Play com pulso */
.yt:hover .yt__play::after { content: ""; position: absolute; width: 64px; height: 64px; border: 2px solid var(--orange); animation: pulse 1.2s ease-out infinite; }
.yt--wide:hover .yt__play::after { width: 84px; height: 84px; }
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

/* Capa de artigo */
.art { display: grid; grid-template-columns: 1fr; gap: 0 32px; }
.art--cover { grid-template-columns: 240px 1fr; align-items: start; }
.art__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.article__cover { margin: 0 0 40px; max-width: 1000px; }
.article__cover img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

/* ---------- Botão flutuante do WhatsApp ---------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; align-items: center;
  background: var(--navy-2); color: #fff; text-decoration: none; font-weight: 700; font-size: .9375rem; line-height: 1.25;
  box-shadow: 0 10px 30px rgba(10, 39, 72, .35); padding: 8px 16px 8px 8px; border: 1px solid rgba(255, 255, 255, .12); }
.wa-float:hover { color: #fff; background: #0D3160; }
.wa-float__ico { width: 44px; height: 44px; display: grid; place-items: center; background: #25D366; margin-right: 12px; position: relative; flex: none; }
.wa-float__ico svg { width: 26px; height: 26px; fill: #fff; }
.wa-float__ico::after { content: ""; position: absolute; inset: 0; border: 2px solid #25D366; animation: wa-ring 2.4s ease-out infinite; }
@keyframes wa-ring { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.wa-float__txt { white-space: nowrap; }
.wa-float__txt small { display: block; font-weight: 500; font-size: .75rem; color: #9FB3CC; letter-spacing: .04em; }
.js .wa-float { transform: translateY(160%); transition: transform .6s cubic-bezier(.2, .8, .2, 1) .9s; }
.js .wa-float.is-in { transform: none; }
.site-foot { padding-bottom: 96px; }

@media (max-width: 560px) {
  .wa-float { right: 12px; bottom: 12px; font-size: .875rem; padding-right: 16px; }
  .wa-float__ico { width: 40px; height: 40px; margin-right: 12px; }
  .art--cover { grid-template-columns: 1fr; }
  .art__img { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js .rv, .js .display .w > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .rv-img::before, .js .rv-img::after, .scanline, .nav-progress, .band--navy::after { display: none !important; }
  .js .wa-float { transform: none; transition: none; }
  .wa-float__ico::after, .yt:hover .yt__play::after { animation: none; display: none; }
  .js .hero__photo::before, .js .sec-head h2::after, .js .service h2::after, .js .faq > h2::after { clip-path: none; transform: none; transition: none; }
}

.hero__photo picture { display: block; }