/* Tokens do kit da marca (marealta-org/00-contexto/marca/README.md), modo escuro.
   11/10/2026: uma tela só, sem rolagem; o logo no centro e as informações passando na horizontal. */
:root {
  --bg: #0A1517; --line: #1F3336;
  --ink: #EAF2F0; --body: #C0D2CF; --muted: #88A09E;
  --tide: #4FBFB4; --tide-deep: #7FD6CB;
  --serif: "Spectral", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.65, 0, .2, 1);
  --dur: 1100ms;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--bg); color: var(--body); font: 400 16px/1.6 var(--sans);
       text-align: center; -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; }

/* fundos: a Luz entrando (foco no alto, ao centro), a Diagonal a 27,6° e duas variações de foco da Luz */
.fundo, .camada { position: fixed; inset: 0; }
.camada { opacity: 0; transition: opacity 1600ms var(--ease); }
.camada.ativa { opacity: 1; }
.c0 { background: radial-gradient(80% 65% at 50% 0%, rgba(79,191,180,.30) 0%, rgba(15,111,108,.13) 42%, rgba(10,21,23,0) 75%), var(--bg); }
.c1 { background: radial-gradient(80% 70% at 12% 8%, rgba(79,191,180,.26) 0%, rgba(15,111,108,.12) 40%, rgba(10,21,23,0) 72%), var(--bg); }
.c2 { background: linear-gradient(117.6deg, #0A1517 0%, #0C2F31 55%, #0A4F4D 100%); }
.c3 { background: radial-gradient(80% 70% at 88% 8%, rgba(79,191,180,.28) 0%, rgba(15,111,108,.12) 40%, rgba(10,21,23,0) 72%), var(--bg); }

.lang { position: fixed; top: max(20px, env(safe-area-inset-top)); right: 20px; display: flex; gap: 2px; z-index: 3; }
.lang button { font: 500 12px/1 var(--sans); letter-spacing: .1em; color: var(--muted); background: none; border: 0;
               border-radius: 6px; padding: 8px 9px; cursor: pointer; }
.lang button[aria-pressed="true"] { color: var(--ink); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; }

/* o palco ocupa a tela exata: logo em cima, slides no meio, pé embaixo */
.palco { position: relative; z-index: 1; height: 100vh; height: 100svh; display: grid;
         grid-template-rows: auto 1fr auto; padding: clamp(28px, 7vh, 72px) 20px max(20px, env(safe-area-inset-bottom)); }
.logo { margin: 0 auto; }
.logo img { width: clamp(120px, 15vh, 190px); }

.slides { position: relative; overflow: hidden; align-self: center; width: 100%; max-width: 1100px; margin: 0 auto;
          touch-action: pan-y; }
.trilho { display: flex; transition: transform var(--dur) var(--ease); will-change: transform; }
.slide { flex: 0 0 100%; padding: 0 clamp(8px, 4vw, 48px); display: flex; flex-direction: column; align-items: center; }
.frase { font: 300 clamp(30px, min(6vw, 7.2vh), 76px)/1.1 var(--serif); color: var(--ink); max-width: 17ch; margin: 0; }
.frase em { font-style: italic; color: var(--tide-deep); }
.leg { color: var(--muted); max-width: 46ch; margin: clamp(16px, 3vh, 28px) 0 0; font-size: clamp(15px, 2vh, 18px); }

/* a entrada em etapas: a frase, depois a legenda, saindo do desfoque */
.slide .frase, .slide .leg { opacity: 0; filter: blur(10px); transform: translateY(14px);
  transition: opacity 900ms var(--ease), filter 900ms var(--ease), transform 900ms var(--ease); }
.slide.ativo .frase { opacity: 1; filter: blur(0); transform: none; transition-delay: 380ms; }
.slide.ativo .leg { opacity: 1; filter: blur(0); transform: none; transition-delay: 620ms; }

.pe { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.progresso { display: flex; gap: 8px; }
.progresso button { width: 44px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; display: flex; align-items: center; }
.progresso i { position: relative; display: block; width: 100%; height: 2px; background: rgba(234,242,240,.18); overflow: hidden; border-radius: 2px; }
.progresso i::after { content: ""; position: absolute; inset: 0; background: var(--tide); transform: scaleX(0); transform-origin: left; }
.progresso .feito i::after { transform: scaleX(1); }
.progresso .agora i::after { animation: enche var(--tempo, 6500ms) linear forwards; }
.pausado .progresso .agora i::after { animation-play-state: paused; }
@keyframes enche { to { transform: scaleX(1); } }

.email { font: 400 clamp(16px, 2.2vh, 19px)/1.3 var(--serif); color: var(--ink); text-decoration: none;
         border-bottom: 1px solid rgba(79,191,180,.6); }
.email:hover { color: #fff; border-bottom-color: var(--tide); }
.cnpj { margin: 0; font-size: 11px; letter-spacing: .05em; color: var(--muted); opacity: .8; }

/* movimento reduzido: os slides se sobrepõem e trocam por opacidade, sem deslizar nem desfocar */
@media (prefers-reduced-motion: reduce) {
  .trilho { display: grid; transform: none !important; transition: none; }
  .slide { grid-area: 1 / 1; }
  .slide .frase, .slide .leg { filter: none; transform: none; transition: opacity 700ms linear; }
  .slide.ativo .frase, .slide.ativo .leg { transition-delay: 300ms; }
  .camada { transition: opacity 900ms linear; }
}
@media (max-height: 560px) { .cnpj { display: none; } .leg { display: none; } }