/* A tela dividida: duas metades, cada uma com o seu site num quadro, as capas que abrem como portas e a barra de troca de lado.
   O movimento tem um eixo só: a LINHA DO MEIO. Os cartazes chegam por ela, as portas abrem a partir dela, a troca de lado cresce a
   partir dela, e dentro de cada site o topo entra a partir dela (movimento.js). */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url("/a-db560cfc2c/fontes/anton-latin.woff2") format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url("/a-db560cfc2c/fontes/archivo-latin.woff2") format('woff2')}

:root{
  --v:#b30f1c;          /* campo do lado 13 */
  --v-fundo:#8e0b16;
  --v-tinta:#fff8f2;
  --e:#07120b;          /* campo do lado 22 (o do site atual) */
  --e-tinta:#f3efe2;
  --verde:#009c3b;
  --ouro:#f2c94c;
  --sai:cubic-bezier(.16,1,.3,1);
  --expo:cubic-bezier(.19,1,.22,1);   /* chegadas (a curva do Text Reveal do 21st) */
  --porta:cubic-bezier(.7,0,.2,1);    /* a porta: arranca devagar, corre e encosta */
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--e);font-family:'Archivo',sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
:focus-visible{outline:3px solid #fff;outline-offset:3px}

.palco{position:fixed;inset:0;display:flex}
.lado{position:relative;flex:1 1 0;min-width:0;overflow:hidden;container-type:size}
.lado[data-lado="13"]{background:var(--v)}
.lado[data-lado="22"]{background:var(--e)}
.lado iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* um lado só: o outro continua montado atrás, invisível e do tamanho da tela. Não é display:none de propósito: no Safari um quadro
   escondido assim volta rolado para o topo, e a pessoa perderia o ponto em que estava */
.palco[data-modo="13"] .lado[data-lado="22"],.palco[data-modo="22"] .lado[data-lado="13"]{position:absolute;inset:0;visibility:hidden;pointer-events:none}

/* capa: o cartaz de cada lado. Fechada cobre a metade; aberta corre para a ponta de fora, como porta que abre a partir da linha do meio.
   O cartaz (capa-dentro) anda menos que a porta e some no caminho: a porta ganha espessura */
.capa{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:24px 10px;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;overflow:hidden;font:inherit;cursor:default;transition:transform 1s var(--porta),visibility 0s}
.lado[data-lado="13"] .capa{background:radial-gradient(120% 80% at 0 0,rgba(255,96,84,.5),transparent 62%),var(--v);color:var(--v-tinta)}
.lado[data-lado="22"] .capa{background:radial-gradient(120% 80% at 100% 0,rgba(0,156,59,.35),transparent 62%),var(--e);color:var(--e-tinta)}
.lado[data-aberta] .capa{visibility:hidden;transition:transform 1s var(--porta),visibility 0s linear 1s}
.lado[data-lado="13"][data-aberta] .capa{transform:translateX(-101%)}
.lado[data-lado="22"][data-aberta] .capa{transform:translateX(101%)}
.capa-dentro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2cqh,20px);transition:transform 1s var(--porta),opacity .45s ease .12s}
.lado[data-lado="13"][data-aberta] .capa-dentro{transform:translateX(46%);opacity:0}
.lado[data-lado="22"][data-aberta] .capa-dentro{transform:translateX(-46%);opacity:0}
.capa-moeda{display:block;width:clamp(56px,24cqw,120px);aspect-ratio:1;flex:none}
.capa-moeda svg,.capa-moeda img{display:block;width:100%;height:100%;object-fit:contain}
.capa-nome{display:flex;flex-direction:column;align-items:center;font-family:'Anton',sans-serif;text-transform:uppercase;line-height:.9}
.capa-linha{display:block;overflow:hidden;font-size:clamp(22px,10cqw,64px);letter-spacing:.02em}
.capa-linha>span{display:block}
b.capa-linha{font-weight:400;font-size:min(60cqw,38cqh);letter-spacing:0;color:var(--ouro)}
.capa-estado{border:1px solid currentColor;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.capa-entrar{display:none;align-items:center;gap:8px;margin-top:6px;padding:14px 20px;border-radius:999px;font-weight:800;font-size:16px;line-height:1;white-space:nowrap}
.capa-entrar svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lado[data-lado="13"] .capa-entrar{background:var(--v-tinta);color:var(--v-fundo)}
.lado[data-lado="22"] .capa-entrar{background:var(--verde);color:#fff}

/* chegada dos cartazes: cada linha sobe de trás da sua máscara (21st: Text Reveal (Mask), 0,8 s, escada de 0,08 s), a moeda chega
   girando a partir da linha do meio e o selo vem por último */
.capa-linha>span{animation:capa-sobe .85s var(--expo) both}
.capa-linha:nth-child(1)>span{animation-delay:.14s}
.capa-linha:nth-child(2)>span{animation-delay:.22s}
.capa-linha:nth-child(3)>span{animation-delay:.3s}
.capa-moeda{animation:capa-moeda 1.05s var(--expo) both}
.lado[data-lado="13"] .capa-moeda{--giro:80deg}
.lado[data-lado="22"] .capa-moeda{--giro:-80deg}
.capa-estado{animation:capa-surge .6s ease .5s both}
.capa-entrar{animation:capa-surge .6s ease .6s both}
@keyframes capa-sobe{from{transform:translateY(112%)}}
@keyframes capa-moeda{from{transform:perspective(900px) rotateY(var(--giro)) scale(.55);opacity:0}}
@keyframes capa-surge{from{opacity:0;transform:translateY(12px)}}

/* emenda: o fio dourado da linha do meio. Cresce do centro para as pontas na chegada e se apaga quando as portas abrem */
.emenda{position:absolute;z-index:4;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;pointer-events:none;background:linear-gradient(180deg,rgba(242,201,76,0),var(--ouro) 22%,#fff3c4 50%,var(--ouro) 78%,rgba(242,201,76,0));transform:scaleY(0);animation:emenda 1.1s var(--expo) .1s forwards;transition:opacity .5s ease .15s}
@keyframes emenda{to{transform:scaleY(1)}}
.palco[data-abriu] .emenda{opacity:0}
.palco:not([data-modo="split"]) .emenda{display:none}

/* barra de troca: só o 13, os dois, só o 22. Com um lado só na tela ela fica deitada embaixo, no meio, e sai de cena enquanto a pessoa
   rola para baixo (classe "some", posta pelo script); rolou para cima, volta */
.doca{position:absolute;z-index:5;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:4px;border-radius:26px;background:#0c0c0c;box-shadow:0 12px 28px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.16);transition:transform .45s var(--sai),opacity .3s ease;view-transition-name:doca}
.doca.some{transform:translate(-50%,calc(100% + 32px));opacity:0;pointer-events:none}
.doca button{width:58px;height:44px;padding:0;border:0;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:20px;line-height:1;letter-spacing:.02em;opacity:.6;transition:opacity .2s ease,transform .2s var(--sai),box-shadow .2s ease}
/* tela dividida: a barra fica em pé DENTRO do vão da linha do meio (24 px de margem de cada site = 48 px), sem cobrir nenhum dos dois;
   só os dois números, porque "os dois lados" já é o que está na tela */
.palco[data-modo="split"] .doca{flex-direction:column}
.palco[data-modo="split"] .doca button{width:34px;height:40px;font-size:16px;opacity:1}
.palco[data-modo="split"] .doca [data-ir="split"]{display:none}
.doca button[data-ir="13"]{background:var(--v);color:#fff}
.doca button[data-ir="22"]{background:#0d2a17;color:var(--ouro)}
.doca button[data-ir="split"]{background:linear-gradient(90deg,var(--v) 50%,#0d2a17 50%);color:#fff}
.doca svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.doca button:hover{opacity:1}
.doca button:active{transform:scale(.95)}
.doca button[aria-pressed="true"]{opacity:1;box-shadow:inset 0 0 0 2px #fff}

/* troca de lado (View Transitions; onde não há, a troca é seca). O estado novo fica por cima do antigo e é descoberto a partir da
   linha do meio; na volta para os dois lados, o que estava sozinho se recolhe à sua metade. data-passagem é posto pelo script. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-group(doca){animation-duration:.5s;animation-timing-function:var(--sai)}
html[data-passagem="split-13"]::view-transition-new(root){animation:passa-abre-13 .7s var(--expo) both}
html[data-passagem="split-22"]::view-transition-new(root){animation:passa-abre-22 .7s var(--expo) both}
html[data-passagem="13-split"]::view-transition-old(root){z-index:1;animation:passa-fecha-13 .7s var(--expo) both}
html[data-passagem="22-split"]::view-transition-old(root){z-index:1;animation:passa-fecha-22 .7s var(--expo) both}
html[data-passagem="13-22"]::view-transition-new(root){animation:passa-entra-22 .7s var(--expo) both}
html[data-passagem="22-13"]::view-transition-new(root){animation:passa-entra-13 .7s var(--expo) both}
@keyframes passa-abre-13{from{clip-path:inset(0 50% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes passa-abre-22{from{clip-path:inset(0 0 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes passa-fecha-13{0%{clip-path:inset(0 0 0 0);opacity:1}70%{opacity:1}100%{clip-path:inset(0 50% 0 0);opacity:0}}
@keyframes passa-fecha-22{0%{clip-path:inset(0 0 0 0);opacity:1}70%{opacity:1}100%{clip-path:inset(0 0 0 50%);opacity:0}}
@keyframes passa-entra-22{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes passa-entra-13{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* celular: dois sites lado a lado não cabem. Tela dividida = as duas capas fechadas (a escolha do lado); o site só carrega depois do toque */
@media (max-width:639px){
  .lado iframe{width:100vw}  /* sempre da largura da tela, mesmo atrás da capa: entrar num lado não redesenha o site nem mexe na rolagem */
  .palco[data-modo="split"] .lado iframe{visibility:hidden}
  .palco[data-modo="split"] .capa{cursor:pointer}
  .palco[data-modo="split"] .capa-entrar{display:inline-flex}
  .palco[data-modo="split"] .doca{display:none}
}
@media (prefers-reduced-motion:reduce){
  .capa,.lado[data-aberta] .capa,.capa-dentro{transition:none}
  .capa-linha>span,.capa-moeda,.capa-estado,.capa-entrar{animation:none}
  .emenda{animation:none;transform:none;transition:none}
  .doca,.doca button{transition:none}
}