/* ============================================================
   Card "Eu vou" — ExpoCommerce Uberaba × RS Soluções Digitais
   Mesma paleta/tipografia do formulário e do site do evento.
   ============================================================ */
:root{
  --bg-0:#050B24;
  --bg-1:#0A1640;
  --bg-2:#122055;

  --ink:#F5F7FF;
  --ink-dim:#A9B4D6;
  --ink-faint:#8189AD;
  --rule:rgba(255,255,255,.14);
  --rule-strong:rgba(255,255,255,.26);

  --accent:#2BE0FF;
  --accent-2:#3D5CFF;
  --rs:#F4A035;

  --font-display:'Space Grotesk', 'Inter Tight', system-ui, sans-serif;
  --font-body:'Inter Tight', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --radius:14px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(43,224,255,.14), transparent 70%),
    radial-gradient(60% 60% at 0% 100%, rgba(61,92,255,.22), transparent 70%),
    var(--bg-0);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
[hidden]{display:none !important;}
button{font:inherit;color:inherit;cursor:pointer;}

/* ---------- topo ---------- */
.topo{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px clamp(16px, 4vw, 48px);
  border-bottom:1px solid var(--rule);
}
.topo__marcas{display:flex;align-items:center;gap:16px;}
.topo__expo{height:34px;width:auto;}
.topo__rs{height:44px;width:auto;margin:-6px 0;}
.topo__sep{width:1px;height:28px;background:var(--rule-strong);}
.topo__meta{margin:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--ink-dim);text-transform:uppercase;}

/* ---------- layout ---------- */
/* Ordem no HTML = ordem no celular: formulário → card → baixar/vídeo.
   No computador o card vai pra coluna da direita, ocupando as duas linhas. */
.app{
  display:grid;
  grid-template-columns:minmax(0, 440px) minmax(0, 1fr);
  grid-template-areas:
    "form  previa"
    "acoes previa";
  grid-template-rows:auto 1fr;
  column-gap:clamp(24px, 4vw, 64px);
  row-gap:16px;
  align-items:start;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(20px, 4vw, 48px) clamp(16px, 4vw, 48px) 32px;
}
.painel--form{grid-area:form;}
.painel--acoes{grid-area:acoes;}
.previa{grid-area:previa;}
@media (max-width: 880px){
  .app{
    grid-template-columns:minmax(0, 1fr);
    grid-template-areas:"form" "previa" "acoes";
    grid-template-rows:auto;
    row-gap:20px;
    padding-top:16px;
  }
}

/* ---------- prévia ---------- */
.previa{position:sticky;top:24px;display:flex;flex-direction:column;align-items:center;gap:12px;}
/* título "4 · Seu card" só aparece no celular, onde o card fica entre o formulário e os botões */
.previa__titulo{display:none;}
@media (max-width: 880px){
  .previa{position:static;}
  .previa__titulo{
    display:flex;align-items:center;gap:8px;align-self:stretch;
    margin:4px 0 0;
    font-family:var(--font-body);font-size:13px;font-weight:600;
  }
  .previa__titulo b{
    display:inline-grid;place-items:center;
    width:20px;height:20px;border-radius:50%;
    background:rgba(43,224,255,.14);color:var(--accent);
    font-family:var(--font-mono);font-size:11px;font-weight:500;
  }
}
.previa__moldura{
  position:relative;
  line-height:0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px var(--rule);

}
#card{
  display:block;
  height:min(78vh, 760px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  cursor:pointer;
}
#card.arrastavel{cursor:grab;touch-action:none;}
#card.arrastando{cursor:grabbing;}
@media (max-width: 880px){
  #card{height:auto;width:min(100%, 420px);}
}
.previa__dica{margin:0;font-size:12.5px;color:var(--ink-faint);text-align:center;max-width:420px;}

/* ---------- painel ---------- */
.painel{
  background:linear-gradient(180deg, rgba(18,32,85,.55), rgba(10,22,64,.35));
  border:1px solid var(--rule);
  border-radius:20px;
  padding:clamp(20px, 3vw, 32px);
  backdrop-filter:blur(8px);
}
.painel__titulo{
  font-family:var(--font-display);
  font-size:clamp(26px, 3.2vw, 34px);
  line-height:1.08;
  margin:0 0 10px;
  letter-spacing:-.01em;
}
.painel__titulo span{color:var(--accent);}
.painel__sub{margin:0 0 26px;color:var(--ink-dim);font-size:15px;}

.campo{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;min-width:0;}
.campo__rotulo{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;}
.campo__rotulo b{
  display:inline-grid;place-items:center;
  width:20px;height:20px;border-radius:50%;
  background:rgba(43,224,255,.14);color:var(--accent);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
}
.campo__rotulo em{font-style:normal;font-weight:400;color:var(--ink-faint);}

input[type="text"]{
  width:100%;
  padding:13px 14px;
  border-radius:var(--radius);
  border:1px solid var(--rule-strong);
  background:rgba(5,11,36,.6);
  color:var(--ink);
  font:inherit;font-size:16px;
  transition:border-color .15s, box-shadow .15s;
}
input[type="text"]::placeholder{color:var(--ink-faint);}
input[type="text"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(43,224,255,.18);}

.soltar{
  display:flex;align-items:center;gap:12px;
  padding:16px;
  border:1.5px dashed var(--rule-strong);
  border-radius:var(--radius);
  background:rgba(5,11,36,.4);
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.soltar svg{color:var(--accent);flex:none;}
.soltar small{display:block;color:var(--ink-faint);font-size:12.5px;}
.soltar:hover, .soltar.sobre{border-color:var(--accent);background:rgba(43,224,255,.07);}
input[type="file"]:focus-visible + .soltar{outline:2px solid var(--accent);outline-offset:2px;}

.zoom{display:flex;align-items:center;gap:10px;color:var(--ink-dim);}
.zoom input{flex:1;min-width:0;accent-color:var(--accent);}
.link{background:none;border:0;padding:4px 0;color:var(--accent);font-size:13px;font-weight:600;}
.link:hover{text-decoration:underline;}


.segmento{
  display:grid;grid-template-columns:1fr 1fr;
  padding:4px;gap:4px;
  border:1px solid var(--rule-strong);
  border-radius:var(--radius);
  background:rgba(5,11,36,.5);
}
.segmento button{
  border:0;background:none;
  padding:9px 8px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--ink-dim);
  white-space:nowrap;
}
.segmento button small{font-family:var(--font-mono);font-weight:400;font-size:11px;opacity:.75;}
.segmento button[aria-checked="true"]{background:var(--ink);color:var(--bg-0);}

.linha{display:grid;grid-template-columns:1fr auto;gap:16px;}
@media (max-width: 380px){ .linha{grid-template-columns:1fr;} }

.cores{display:flex;gap:10px;padding:6px 0;}
.cores button{
  width:32px;height:32px;border-radius:50%;
  border:2px solid transparent;
  background:var(--c);
  box-shadow:inset 0 0 0 3px var(--bg-0);
  transition:transform .15s;
}
.cores button:hover{transform:scale(1.08);}
.cores button[aria-checked="true"]{border-color:var(--c);}

.acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}
.btn{
  flex:1 1 160px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 18px;
  border-radius:999px;
  border:1px solid var(--rule-strong);
  background:rgba(255,255,255,.04);
  font-weight:700;font-size:15px;
  transition:transform .15s, background .15s, opacity .15s;
}
.btn:hover:not(:disabled){transform:translateY(-1px);background:rgba(255,255,255,.09);}
.btn--primario{
  border:0;
  background:linear-gradient(90deg, var(--accent), #6FB8FF);
  color:var(--bg-0);
}
.btn--primario:hover:not(:disabled){background:linear-gradient(90deg, #5CE8FF, #8DC7FF);}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.aviso{margin:12px 0 0;font-size:13px;color:var(--ink-faint);min-height:1.5em;}
.aviso:empty{display:none;}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- rodapé ---------- */
.rodape{
  text-align:center;
  padding:24px 16px 40px;
  color:var(--ink-faint);
  font-size:12.5px;
}
.rodape p{margin:0;}
.rodape__priv{margin-top:4px !important;opacity:.8;}

/* ---------- vídeo ---------- */
.video{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--rule);
}
.video__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.video__cab .campo__rotulo svg{color:var(--accent);}
.video__sub{margin:6px 0 14px;font-size:13.5px;color:var(--ink-dim);}
.btn--video{
  width:100%;
  border:1px solid rgba(43,224,255,.5);
  background:linear-gradient(90deg, rgba(43,224,255,.14), rgba(61,92,255,.2));
}
.btn--video svg{color:var(--accent);}
.video .acoes{margin-top:12px;}
.progresso{
  height:6px;margin-top:12px;
  border-radius:99px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.progresso span{
  display:block;height:100%;width:0;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .15s linear;
}

/* ============================================================
   Splash de abertura — cópia fiel da abertura do site do evento
   ([PG]ExpoCommerce/css/style.css). Se mudar lá, espelhe aqui.
   ============================================================

   Câmera assimétrica (punch rápido + settle bem mais longo — a mesma
   lógica de dois tempos do cameraPush do motor de apresentações, só que
   aqui num keyframe só: o stop em 30% troca a curva de "entrada" (rápida,
   acelerando) pra "assentamento" (lenta, desacelerando bastante), então
   a câmera "chega correndo e desacelera devagar" em vez de um ease único.
   Por cima: vinheta + scanlines (textura de lente, paradas, não empurram
   com a câmera) e o texto entra em blocos mascarados (eyebrow → UBERABA →
   data/local → régua), como um card de abertura de verdade, não só logo
   + cidade. Saída: a câmera continua empurrando pra frente (mais um
   avanço + blur) ao mesmo tempo que funde — não é só um dissolve. */
body.tem-splash{overflow:hidden;}
.splash{
  position:fixed;inset:0;z-index:999;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 100% at 50% 40%, #0A1230 0%, #030309 70%, #010104 100%);
  overflow:hidden;
  opacity:1;
  transition:opacity .85s cubic-bezier(.4,0,1,1);
}
.splash.is-saindo{opacity:0;pointer-events:none;}
.splash.is-saindo .splash__camera{
  transition:transform .85s cubic-bezier(.4,0,1,1), filter .85s cubic-bezier(.4,0,1,1);
  transform:scale(1.14);
  filter:blur(7px);
}

.splash__camera{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  transform-origin:50% 50%;
  animation:splashCameraPush 2s both;
}
@keyframes splashCameraPush{
  0%{transform:scale(1.18);filter:blur(15px);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  30%{transform:scale(1.015);filter:blur(1.5px);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  100%{transform:scale(1);filter:blur(0);}
}

/* vinheta + scanlines: textura de lente sobre a cena, fixas (não escalam
   com o push da câmera) — igual o motor de apresentações usa como "post"
   em vez de fazer parte do movimento da cena. */
.splash__vinheta{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 92% at 50% 45%, transparent 48%, rgba(1,1,4,.62) 100%);
  mix-blend-mode:multiply;
}
.splash__scanlines{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.3;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 1px, transparent 1px 3px);
  mix-blend-mode:soft-light;
}

@media (prefers-reduced-motion: reduce){
  .splash__camera{animation:none;}
  .splash.is-saindo .splash__camera{transition:none;transform:none;filter:none;}
}

.splash__estrelas{
  position:absolute;inset:-10%;
  background-repeat:repeat;
  animation:splashPiscar 5s ease-in-out infinite;
}
.splash__estrelas--1{
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent 100%),
    radial-gradient(1px 1px at 78% 58%, #fff, transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 82%, #fff, transparent 100%),
    radial-gradient(1px 1px at 63% 12%, #fff, transparent 100%),
    radial-gradient(1px 1px at 25% 48%, #fff, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 30%, #fff, transparent 100%);
  background-size:240px 240px;
  opacity:.55;
}
.splash__estrelas--2{
  background-image:
    radial-gradient(1px 1px at 30% 10%, #cfe6ff, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 65%, #cfe6ff, transparent 100%),
    radial-gradient(1px 1px at 85% 85%, #cfe6ff, transparent 100%),
    radial-gradient(1px 1px at 8% 75%, #cfe6ff, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 40%, #cfe6ff, transparent 100%);
  background-size:340px 340px;
  opacity:.4;
  animation-delay:1.6s;
}
.splash__estrelas--3{
  background-image:
    radial-gradient(1px 1px at 20% 60%, #fff, transparent 100%),
    radial-gradient(1px 1px at 50% 20%, #fff, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 12%, #fff, transparent 100%),
    radial-gradient(1px 1px at 38% 90%, #fff, transparent 100%),
    radial-gradient(1px 1px at 95% 68%, #fff, transparent 100%);
  background-size:170px 170px;
  opacity:.5;
  animation-delay:3s;
}
@keyframes splashPiscar{
  0%,100%{opacity:.3;}
  50%{opacity:.75;}
}

/* mesmo motivo de vidro flutuante do herói, só que em repouso (a splash
   dura pouco demais pra flutuação contínua valer a pena) — a ideia é dar
   ao olho uma "âncora" visual que atravessa o corte splash → herói, como
   se fosse a mesma cena revelada aos poucos. */
.splash__forma{
  position:absolute;
  border-radius:22px;
  opacity:0;
  border:1px solid rgba(61,92,255,.2);
  background:linear-gradient(135deg, rgba(61,92,255,.1) 0%, rgba(13,63,181,.02) 100%);
  box-shadow:inset 0 0 100px rgba(61,92,255,.14);
  animation:splashFormaIn 1.4s cubic-bezier(.16,1,.3,1) .5s both;
}
.splash__forma--1{
  top:16%;right:10%;
  width:min(22vw, 220px);height:min(22vw, 220px);
  transform:rotate(-10deg);
}
.splash__forma--2{
  bottom:12%;left:9%;
  width:min(13vw, 130px);height:min(13vw, 130px);
  border-color:rgba(43,224,255,.18);
  background:linear-gradient(135deg, rgba(43,224,255,.09) 0%, rgba(43,224,255,.02) 100%);
  box-shadow:inset 0 0 80px rgba(43,224,255,.12);
  transform:rotate(15deg);
  animation-delay:.68s;
}
@keyframes splashFormaIn{ to{opacity:.9;} }

.splash__conteudo{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;
}

/* logo: alvo do push da câmera + um glint de luz que cruza a arte uma vez,
   depois de tudo assentado — como se a luz pegasse no metal/vidro da marca.
   Duas camadas separadas de propósito: o wrap não corta nada (senão o
   drop-shadow/glow da logo, que se espalha bem além da própria arte, seria
   cortado em uma caixa retangular visível); só o .splash__logo-clip por
   cima (do tamanho exato da img, via inset:0) recorta o glint. */
.splash__logo-wrap{position:relative;display:inline-block;margin-bottom:8px;}
.splash__logo-wrap img{
  width:min(60vw, 380px);height:auto;display:block;
  filter:drop-shadow(0 0 40px rgba(43,224,255,.25));
}
.splash__logo-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.splash__sweep{
  position:absolute;top:-50%;left:0;width:36%;height:200%;
  background:linear-gradient(78deg, transparent, rgba(255,255,255,.5), transparent);
  transform:translateX(-220%) rotate(10deg);
  animation:splashSweep 1s cubic-bezier(.4,0,.2,1) 1.6s both;
}
@keyframes splashSweep{
  0%{transform:translateX(-220%) rotate(10deg);opacity:0;}
  18%{opacity:1;}
  70%{opacity:1;}
  100%{transform:translateX(220%) rotate(10deg);opacity:0;}
}

/* eyebrow → UBERABA → data/local: cada linha mora num "mask" que esconde a
   parte de baixo e a texto sobe de dentro dele — o mesmo bloco pra reveal
   de headline do motor de apresentações, sem SplitText/GSAP: aqui é só
   overflow:hidden no container + translateY no span de dentro. */
.splash__eyebrow, .splash__cidade, .splash__meta{
  margin:0;overflow:hidden;
}
.splash__eyebrow span, .splash__cidade span, .splash__meta span{
  display:block;
  transform:translateY(130%);
  opacity:0;
  animation:splashLinha .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes splashLinha{
  to{transform:translateY(0);opacity:1;}
}
.splash__eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}
.splash__eyebrow span{animation-delay:.68s;}
.splash__cidade{
  font-family:var(--font-mono);font-size:14px;letter-spacing:.5em;
  text-transform:uppercase;color:var(--ink-dim);padding-left:.5em;
}
.splash__cidade span{animation-delay:.95s;}
.splash__meta{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;
  color:var(--ink-faint);
}
.splash__meta span{animation-delay:1.32s;}

.splash__regua{
  display:block;width:56px;height:1px;margin-top:6px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  transform:scaleX(0);opacity:0;
  animation:splashRegua .6s cubic-bezier(.16,1,.3,1) 1.62s both;
}
@keyframes splashRegua{
  to{transform:scaleX(1);opacity:1;}
}

@media (prefers-reduced-motion: reduce){
  .splash__estrelas{animation:none;opacity:.45;}
  .splash__sweep{animation:none;opacity:0;}
  .splash__forma{animation:none;opacity:.9;}
  .splash__eyebrow span, .splash__cidade span, .splash__meta span{animation:none;transform:none;opacity:1;}
  .splash__regua{animation:none;transform:scaleX(1);opacity:1;}
}