/* We Love Company: a home de entrada do grupo, estilo Cinema (escolhido pela Laise em 09/10/2026, estilo 1
   de propostas/home-we-love-company-5-estilos.html, sem o cartão do logo). Céu de verdade raspado pela
   rolagem e, depois, um palco em tela cheia que troca de país conforme a rolagem. Tokens: DI-003-wlc. */
@font-face { font-family: 'Lufga'; src: url('../assets/fonts/lufga-medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Lufga'; src: url('../assets/fonts/lufga-bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Lufga'; src: url('../assets/fonts/lufga-black.otf') format('opentype'); font-weight: 900; font-display: swap; }
:root {
  --wlc-space-cadet: #1B2A5E; --wlc-paper: #FBF8F2; --wlc-chinese-yellow: #F5B71C; --wlc-text-on-dark: #D9E1F5;
  --sans: 'Lufga', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --margem: clamp(20px, 5vw, 72px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #0B1024; }
body { font-family: var(--sans); color: #fff; background: #0B1024; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, video, canvas { display: block; }
:focus-visible { outline: 3px solid var(--wlc-chinese-yellow); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* ---------- abertura: o voo entre nuvens ---------- */
.abertura { position: relative; height: 200vh; }
.abertura__palco { position: sticky; top: 0; height: 100svh; min-height: 520px; overflow: hidden; display: grid; align-content: end;
  padding: 0 var(--margem) clamp(60px, 10vh, 120px); background: #5FA6E8 url('../assets/nuvens/ceu-fundo.webp') center / cover; }
.abertura__ceu { position: absolute; inset: 0; width: 100%; height: 100%; }
.abertura__scrim { position: absolute; inset: 0; background: rgba(8, 12, 32, .36); }
.abertura__topo { position: absolute; top: 24px; right: var(--margem); padding: 12px 22px; border: 1.5px solid rgba(255,255,255,.75); border-radius: 999px; font-weight: 700; font-size: 15px; transition: background .2s, color .2s; }
.abertura__topo:hover { background: #fff; color: var(--wlc-space-cadet); }
.abertura__texto { position: relative; max-width: 1300px; will-change: opacity, transform; }
.abertura__pre { margin: 0 0 18px; font-size: clamp(17px, 1.8vw, 24px); font-weight: 500; color: var(--wlc-text-on-dark); }
.abertura__titulo { font-size: clamp(54px, 10.5vw, 176px); font-weight: 900; line-height: .9; letter-spacing: -.035em; }
.abertura__titulo .linha { display: block; overflow: hidden; padding-bottom: .06em; }
.abertura__titulo .linha > span { display: block; animation: sobe 1.2s var(--ease) both; }
.abertura__titulo .linha:nth-child(2) > span { animation-delay: .12s; color: var(--wlc-chinese-yellow); }
@keyframes sobe { from { transform: translateY(105%); } }
.abertura__rola { position: absolute; right: var(--margem); bottom: 40px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; writing-mode: vertical-rl; }
.abertura__rola::after { content: ''; display: block; width: 1px; height: 60px; margin: 12px auto 0; background: #fff; animation: desce 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes desce { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- pra onde vamos: um país por vez, em tela cheia ---------- */
.destinos { position: relative; height: 330vh; }
.destinos__palco { position: sticky; top: 0; height: 100svh; min-height: 520px; overflow: hidden; background: #0B1024; }
.destinos__tela { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1s var(--ease), transform 1.6s var(--ease); }
.destinos__tela.is-on { opacity: 1; transform: scale(1); }
.destinos__scrim { position: absolute; inset: 0; background: rgba(8, 12, 32, .38); }
.destinos__pergunta { position: absolute; top: clamp(28px, 7vh, 72px); left: var(--margem); font-size: clamp(18px, 1.8vw, 24px); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.destinos__contador { position: absolute; top: clamp(22px, 6vh, 64px); right: var(--margem); font-size: 18px; font-weight: 700; color: var(--wlc-text-on-dark); }
.destinos__contador span { font-size: 44px; font-weight: 900; color: #fff; }
.destinos__nomes { position: absolute; left: clamp(14px, 4.5vw, 64px); bottom: clamp(150px, 24vh, 230px); height: 1em; font-size: clamp(76px, 19vw, 300px); font-weight: 900; line-height: 1; letter-spacing: -.05em; }
.destinos__nomes span { position: absolute; left: 0; bottom: 0; white-space: nowrap; opacity: 0; transform: translateY(40%); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.destinos__nomes span.is-on { opacity: 1; transform: none; }
.destinos__abas { position: absolute; left: var(--margem); right: var(--margem); bottom: clamp(28px, 6vh, 56px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 28px); list-style: none; }
.destinos__abas a { display: block; padding-top: 14px; color: var(--wlc-text-on-dark); }
.destinos__abas i { display: block; height: 3px; margin-bottom: 14px; background: rgba(255,255,255,.28); overflow: hidden; }
.destinos__abas i::after { content: ''; display: block; height: 100%; background: var(--wlc-chinese-yellow); transform: scaleX(var(--p, 0)); transform-origin: left; }
.destinos__abas b { display: block; font-size: clamp(18px, 1.8vw, 24px); color: #fff; }
.destinos__abas small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; }
.destinos__abas a.is-on small { color: #fff; }
.destinos__abas a:hover b { color: var(--wlc-chinese-yellow); }

/* ---------- o fim da página: uma linha só, com a identificação legal ---------- */
.rodape-min { padding: 28px var(--margem) 36px; text-align: center; }
.rodape-min p { font-size: 12.5px; font-weight: 500; line-height: 1.6; color: var(--wlc-text-on-dark); }
.rodape-min a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .abertura__topo { top: 18px; padding: 10px 16px; font-size: 14px; }
  .destinos__abas { grid-template-columns: 1fr; gap: 4px; }
  .destinos__abas a { padding-top: 4px; }
  .destinos__abas i { margin-bottom: 6px; }
  .destinos__abas small { display: none; }
  .destinos__abas a.is-on small { display: block; }
  .destinos__nomes { bottom: 46vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}