/* =====================================================================
   VISUAL DA PÁGINA
   Mesmo jeito da página da Lince: uma coluna centrada, um objeto de
   verdade no topo (o ingresso da live), um cartão claro no meio e poucas
   cores chapadas. Sem degradê holográfico, sem vidro, sem brilho neon.
   Paleta da Jeni (nov/2026). Para mudar uma cor no site inteiro, troque
   só aqui em :root.
   ===================================================================== */

:root {
  --noite: #14121F;          /* fundo (a tinta da marca, um pouco mais escura) */
  --tinta: #191824;
  --indigo: #352270;          /* índigo */
  --grafite: #2E2B3A;         /* índigo acinzentado */
  --violeta: #7B6DFF;         /* destaques e botão */
  --violeta-claro: #B4ABFF;   /* destaque de texto no fundo escuro */
  --claro: #E3E3E4;           /* texto de apoio no escuro */
  --terracota: #A07055;
  --branco: #FAFAF8;
  --texto: #191824;
  --texto-suave: #5B5870;

  --fonte-titulo: "Poppins", Arial, sans-serif;
  --fonte-texto: "Poppins", Arial, sans-serif;

  --raio: 18px;
  --sombra: 0 18px 40px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 15px;
  line-height: 1.55;
  color: var(--branco);
  background:
    radial-gradient(ellipse 110% 50% at 50% 0%, rgba(53, 34, 112, .85) 0%, rgba(53, 34, 112, 0) 70%),
    radial-gradient(ellipse 80% 40% at 50% 45%, rgba(123, 109, 255, .08) 0%, rgba(123, 109, 255, 0) 70%),
    var(--noite);
  min-height: 100vh;
}

[hidden] { display: none !important; }
a { color: inherit; }
b { font-weight: 600; }

main { max-width: 1040px; margin: 0 auto; padding: 0 16px 48px; }

/* ---------- marca (texto, até chegar o logo) ---------- */
.marca {
  margin: 0;
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.01em;
  line-height: 1;
  text-align: center;
}
.marca span { color: var(--violeta-claro); }
.marca small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--claro);
}
.topo { display: flex; justify-content: center; padding: 22px 16px 6px; }

/* ---------- abertura ---------- */
.abertura { display: grid; gap: 8px; text-align: center; padding-top: 10px; }

.selo {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #FFD43B;            /* amarelo Black Friday: destaque pedido pela Jeni */
  background: #000000;
  border: 1px solid rgba(255, 212, 59, .35);
  padding: 7px 16px;
  border-radius: 999px;
}

h1 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(28px, 7.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 16px 0 12px;
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--violeta-claro); }

.destaque { margin: 0 0 12px; color: var(--claro); }
.destaque strong {
  display: block;
  font-size: clamp(28px, 8.2vw, 40px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--branco);
}
.destaque span {
  display: block; margin-top: 8px;
  font-size: clamp(16px, 4.6vw, 21px); font-weight: 500; line-height: 1.35; color: var(--branco);
  text-wrap: balance;
}

/* a curva que sobe, por cima de "DO BÁSICO AO AVANÇADO" */
.curva {
  display: block;
  width: min(92%, 500px);
  height: auto;
  margin: 0 auto -4px;
  overflow: visible;
}
.curva circle { fill: var(--violeta-claro); }
.curva path {
  fill: none;
  stroke: var(--violeta-claro);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* a linha se desenha uma vez ao abrir a página */
.curva-linha { stroke-dasharray: 440; stroke-dashoffset: 440; animation: subir 1.4s .3s ease-out forwards; }
.curva-seta { opacity: 0; animation: aparecer .3s 1.55s ease-out forwards; }
@keyframes subir { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .curva-linha { animation: none; stroke-dashoffset: 0; }
  .curva-seta { animation: none; opacity: 1; }
}

.abertura-apoio { margin: 0 auto; max-width: 36ch; color: var(--claro); }
.abertura-apoio b { color: var(--branco); }

/* ---------- foto + ingresso ---------- */
.abertura-visual {
  position: relative;
  width: min(360px, 100%);
  margin: 46px auto -46px;
  z-index: 2;
}
.foto-topo {
  position: relative;
  width: 66%;
  margin-left: -3%;
  margin-right: auto;   /* a Jeni à esquerda, olhando para o ingresso */
  aspect-ratio: 524 / 766;
  z-index: 2;   /* a Jeni na frente do ingresso */
}
/* a mesma luz suave da Lince, atrás da pessoa */
.foto-topo::before {
  content: ''; position: absolute; inset: 10% -6% 0 -6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(123, 109, 255, .32), rgba(123, 109, 255, 0));
}
.foto-topo img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block; }
.foto-vaga {
  position: relative; height: 100%; border-radius: 22px; border: 1.5px dashed rgba(227, 227, 228, .35);
  display: grid; place-content: center; text-align: center; color: var(--claro); font-size: 14px;
}
.foto-vaga small { display: block; font-size: 11px; opacity: .7; }

/* ---------- o ingresso ---------- */
.ingresso {
  position: absolute;
  right: -6px;
  bottom: 7%;
  width: min(152px, 42vw);
  transform: rotate(8deg);
  z-index: 1;   /* atrás da Jeni: o notebook passa na frente */
  filter: drop-shadow(0 0 22px rgba(123, 109, 255, .35)) drop-shadow(0 18px 26px rgba(0, 0, 0, .6));
  text-align: center;
}
.ingresso-topo {
  background: linear-gradient(170deg, #221C3D 0%, var(--tinta) 70%);
  border: 1px solid rgba(180, 171, 255, .25);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  padding: 10px 12px 14px;
}
.ingresso-linha {
  display: flex; justify-content: space-between;
  font-size: 6.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--claro);
}
.ingresso-marca { margin: 10px 0 0; font-weight: 700; font-size: 13px; line-height: 1; }
.ingresso-marca span { color: var(--violeta-claro); }
.ingresso-marca small { display: block; font-size: 5.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--claro); margin-top: 3px; }
.ingresso-rotulo { margin: 10px 0 2px; font-size: 6.5px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--violeta-claro); }
.ingresso-black { margin: 0; font-size: 28px; font-weight: 900; line-height: .95; letter-spacing: -.02em; color: var(--branco); }
.ingresso-pilula {
  display: inline-block; margin: 8px 0 4px; padding: 3px 10px; border-radius: 999px;
  background: var(--violeta-claro); color: var(--tinta); font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.ingresso-sub { margin: 0; font-size: 7px; color: var(--claro); }

/* canhoto claro com o picote */
.ingresso-canhoto {
  position: relative;
  background: var(--branco);
  color: var(--texto);
  border-radius: 0 0 14px 14px;
  padding: 12px 12px 10px;
  border-top: 2px dashed #C9C5DA;
}
.ingresso-canhoto::before, .ingresso-canhoto::after {
  content: ''; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--noite);
}
.ingresso-canhoto::before { left: -9px; }
.ingresso-canhoto::after { right: -9px; }
.canhoto-rotulo { margin: 0; font-size: 6px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-suave); }
.canhoto-nome { margin: 2px 0 8px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 17px; line-height: 1.1; color: var(--indigo); }
.canhoto-dados { display: flex; justify-content: space-between; text-align: left; gap: 6px; }
.canhoto-dados div, .canhoto-local { display: flex; flex-direction: column; }
.canhoto-dados span, .canhoto-local span { font-size: 5.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-suave); }
.canhoto-dados b, .canhoto-local b { font-size: 9px; font-weight: 700; }
.canhoto-local {
  margin-top: 6px; padding: 5px 8px; border: 1.5px dashed #C9C5DA; border-radius: 8px; text-align: left;
}
.canhoto-barras {
  height: 18px; margin-top: 8px;
  background: repeating-linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px 3px, var(--tinta) 3px 4px, transparent 4px 6px, var(--tinta) 6px 9px, transparent 9px 10px);
}

/* ---------- cartão claro ---------- */
.cartao {
  position: relative;
  z-index: 3;   /* o cartão passa na frente da foto e do ingresso */
  background: var(--branco);
  color: var(--texto);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 56px 20px 24px;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}
.cartao h2 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(23px, 6.4vw, 28px);
  line-height: 1.2;
  margin: 0 auto;
  max-width: 22ch;
  color: var(--indigo);
  text-wrap: balance;
}
.cartao-destaque {
  margin: 10px auto 22px;
  max-width: 24ch;
  font-size: clamp(17px, 4.8vw, 20px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--tinta);
}
/* marca-texto embaixo das palavras, em cada linha */
.cartao-destaque span {
  background: linear-gradient(180deg, transparent 55%, #D9D2FF 55%, #D9D2FF 92%, transparent 92%);
  padding: 0 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* contagem: placas escuras, como um placar de verdade */
.relogio { display: flex; align-items: flex-start; justify-content: center; gap: 6px; }
.relogio .peca { flex: 1; max-width: 86px; display: flex; flex-direction: column; align-items: center; }
.relogio b {
  position: relative;
  display: block;
  width: 100%;
  padding: 14px 0 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2E2B3A 0%, #2E2B3A 50%, var(--tinta) 50%, var(--tinta) 100%);
  box-shadow: 0 10px 18px rgba(25, 24, 36, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: var(--branco);
  font-size: clamp(34px, 10.5vw, 46px);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
/* a linha do meio, como nas placas de virar */
.relogio b::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55);
}
.relogio span { display: block; margin-top: 7px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); }
.relogio i { font-style: normal; font-weight: 800; font-size: 28px; line-height: 1; color: var(--violeta); padding-top: 18px; }
.relogio.terminou b { color: var(--texto-suave); }
.nota { margin: 12px 0 0; font-size: 13px; color: var(--texto-suave); }

.botao {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 54px; margin-top: 18px; padding: 14px 18px;
  border: 0; border-radius: 999px;
  background: var(--indigo); color: var(--branco);
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(53, 34, 112, .35);
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.botao:hover { filter: brightness(1.15); }
.botao:active { transform: scale(.98); }
.botao:focus-visible { outline: 3px solid var(--violeta); outline-offset: 3px; }
.dica { margin: 10px 0 0; font-size: 13px; color: var(--texto-suave); }

/* ---------- o que você vai dominar ---------- */
.passos, .live { max-width: 480px; margin: 48px auto 0; }
.passos h2, .live h2 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 26px;
  text-align: center;
  margin: 0 0 18px;
}
.passos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.passos li {
  display: flex; gap: 14px; align-items: center;
  background: rgba(227, 227, 228, .06);
  border: 1px solid rgba(227, 227, 228, .13);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--claro);
}
.passos b { color: var(--branco); }
.passo-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; background: var(--violeta-claro); color: var(--tinta);
}

/* ---------- a live ---------- */
.live h2 { margin-bottom: 4px; }
.live-hora { text-align: center; font-weight: 700; color: var(--violeta-claro); margin: 0 0 14px; }
.live ul { margin: 0; padding-left: 20px; color: var(--claro); }
.live li { margin-bottom: 6px; }

/* ---------- quem é a Jeni ---------- */
/* como um perfil de rede social: bolinha, nome ao lado, descrição embaixo */
.quem { max-width: 480px; margin: 48px auto 0; }
.quem-topo { display: flex; align-items: center; gap: 14px; }
.quem-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; display: block; flex: none; }
.quem-topo h2 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 20px; margin: 0; line-height: 1.2; }
.quem-arroba { margin: 2px 0 0; font-size: 13px; color: var(--violeta-claro); }
.quem-texto { margin-top: 14px; }
.quem-texto p { margin: 0 0 6px; color: var(--claro); }

/* ---------- rodapé ---------- */
.rodape {
  text-align: center;
  padding: 36px 16px 40px;
  margin-top: 56px;
  border-top: 1px solid rgba(227, 227, 228, .12);
  font-size: 13px;
  color: var(--claro);
}
.rodape .marca { font-size: 17px; margin-bottom: 12px; }
.rodape p { margin: 4px 0; }

/* ---------- janela do lembrete ---------- */
.janela { position: fixed; inset: 0; z-index: 10; background: rgba(10, 8, 20, .72); display: grid; place-items: end center; padding: 16px; }
.janela-caixa {
  width: 100%; max-width: 420px; padding: 24px 20px 16px; border-radius: var(--raio);
  background: var(--branco); color: var(--texto); display: grid; gap: 10px; box-shadow: var(--sombra);
}
.janela-caixa h3 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 20px; margin: 0 0 6px; color: var(--indigo); text-align: center; }
.opcao {
  display: block; width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid #D6D2E6; background: #F7F6FB; color: var(--texto);
  font: inherit; font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer;
}
.opcao:hover { border-color: var(--indigo); }
.fechar { background: none; border: 0; color: var(--texto-suave); font: inherit; font-size: 14px; padding: 8px; cursor: pointer; }

/* ---------- telas maiores (computador) ---------- */
@media (min-width: 860px) {
  .abertura {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    text-align: left;
    padding: 24px 0 40px;
  }
  .abertura-apoio { margin: 0; }
  .abertura-visual { width: 100%; max-width: 440px; margin: 0 0 0 auto; }
  .ingresso { width: 210px; bottom: 4%; }
  .ingresso-black { font-size: 34px; }
  .cartao { padding-top: 32px; }
  .janela { place-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}