/* Design system — Aula Magna / Imersão Terapia de Alto Valor */

@font-face { font-family: "Circular Std"; src: url("/assets/fonts/CircularStd-Book.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Circular Std"; src: url("/assets/fonts/CircularStd-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --fundo: #0A0E0F;
  --fundo-alt: #121D1F;
  --painel: #17262A;
  --tinta: #F4F0ED;
  --tinta-corpo: rgba(244, 240, 237, 0.82);
  --tinta-sec: #B6B0A8;
  --tinta-ter: #9A9691;
  --ouro-texto: #FED387;
  --ouro: #C69B4E;
  --ouro-regua: #F8CE83;
  --ouro-glow: rgba(255, 220, 79, 0.6);
  --ouro-faixa: linear-gradient(90deg, #A9762C, #F8CE83 26%, #FFF0C9 50%, #F8CE83 74%, #A9762C);
  --cta: #3BE06A;
  --cta-tinta: #0B1A0E;
  --cta-glow: rgba(59, 224, 106, 0.42);
  --erro: #FF8A7A;

  --f-display: "arnika-variable", "Playfair Display", serif;
  --f-corpo: "Circular Std", system-ui, sans-serif;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --rapido: 150ms;
}

* { box-sizing: border-box; margin: 0; }

html, body { background: var(--fundo); font-synthesis: none; }

body {
  color: var(--tinta);
  font-family: var(--f-corpo);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

body.travado { overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Página ---------- */

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  overflow: hidden;
  text-align: center;
}

.bg { position: absolute; inset: 0; pointer-events: none; }

.bg-foto {
  position: absolute; inset: 0;
  background: url("/assets/hero-bg.jpg") center 42% / cover no-repeat;
}
.bg-foto::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.84); }

.bg-aneis span {
  position: absolute;
  left: 50%; top: 58%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(217, 217, 217, 0.02);
  box-shadow: 0 4.389px 4.389px #000;
}
.bg-aneis span:nth-child(1) { width: 150vmax; height: 150vmax; }
.bg-aneis span:nth-child(2) { width: 120vmax; height: 120vmax; }
.bg-aneis span:nth-child(3) { width: 92vmax;  height: 92vmax; }
.bg-aneis span:nth-child(4) { width: 66vmax;  height: 66vmax; }
.bg-aneis span:nth-child(5) { width: 42vmax;  height: 42vmax; }

.bg-luz {
  position: absolute;
  left: -10%; right: -10%; bottom: -18%;
  height: 60%;
  background: url("/assets/hero-luz.png") center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.3;
}

/* ---------- Faixa de urgência ---------- */

.faixa {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 0.8em;
  width: 100%;
  padding: clamp(14px, 2.2dvh, 24px) 4vw;
  background: var(--ouro-faixa);
  color: #000;
  box-shadow: 0 1px 18.3px rgba(255, 220, 79, 0.35);
}

.faixa-aviso {
  font-weight: 500;
  font-size: clamp(0.78rem, min(1.2vw, 1.7dvh), 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.faixa-contador {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.1rem, min(1.8vw, 2.4dvh), 1.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Conteúdo ---------- */

.conteudo {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: clamp(16px, 2.6dvh, 30px) 5vw clamp(12px, 2dvh, 24px);
}

.marca { display: flex; align-items: center; gap: 16px; }

.marca-texto {
  font-weight: 500;
  font-size: clamp(0.8rem, min(1.2vw, 1.8dvh), 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ouro);
}

.regua {
  width: clamp(36px, 5vw, 72px);
  height: 1px;
  box-shadow: 0 1px 18.3px var(--ouro-glow);
}
.regua-esq { background: linear-gradient(90deg, rgba(248, 206, 131, 0), var(--ouro-regua)); }
.regua-dir { background: linear-gradient(270deg, rgba(248, 206, 131, 0), var(--ouro-regua)); }

.coluna {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 2dvh, 24px);
  width: 100%;
  max-width: 900px;
  padding-top: clamp(10px, 1.6dvh, 18px);
}

.titulo {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.75rem, min(3.2vw, 4.4dvh), 2.6rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--tinta);
}

/* ---------- Player ---------- */

.palco {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(198, 155, 78, 0.5);
  border-radius: 14px;
  background: #000;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}

.palco iframe, .palco-vazio {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.palco-vazio { background: var(--fundo-alt); }

.palco:fullscreen { display: grid; place-items: center; border: 0; border-radius: 0; background: #000; }
.palco:fullscreen iframe { aspect-ratio: auto; height: 100%; }
.palco:-webkit-full-screen { border: 0; border-radius: 0; }

.btn-sair, .btn-tela-cheia {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color var(--rapido) var(--ease), background var(--rapido) var(--ease);
}
.btn-sair svg, .btn-tela-cheia svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.btn-sair {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 10;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(10, 14, 15, 0.7);
  color: var(--tinta);
  font-size: 0.9rem;
}
.btn-sair:hover { background: var(--fundo); }

.btn-tela-cheia {
  align-self: flex-end;
  margin-top: calc(clamp(12px, 2dvh, 24px) * -0.5);
  background: none;
  color: var(--tinta-sec);
  font-size: clamp(0.75rem, min(1vw, 1.5dvh), 0.9rem);
}
.btn-tela-cheia:hover { color: var(--ouro-texto); }

[hidden] { display: none !important; }

/* ---------- CTA ---------- */

.cta-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(52px, 7dvh, 68px);
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 50px;
  padding: 12px 28px;
  border: 0;
  border-radius: 12px;
  background: var(--cta);
  color: var(--cta-tinta);
  font-family: var(--f-corpo);
  font-weight: 500;
  font-size: clamp(0.95rem, min(1.4vw, 2dvh), 1.1rem);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 28px var(--cta-glow);
  transition: box-shadow var(--rapido) var(--ease), filter var(--rapido) var(--ease);
}
.btn-cta:hover { box-shadow: 0 0 40px rgba(59, 224, 106, 0.6); filter: brightness(1.05); }
.btn-cta:active { filter: brightness(0.92); }
.btn-cta svg { width: 0.8em; height: 0.8em; flex-shrink: 0; }

.btn-oferta { font-size: clamp(0.95rem, 1.5vw, 1.2rem); padding: 14px 32px; }

/* ---------- Portão ---------- */

.portao {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 0 6vw;
  background: rgba(10, 14, 15, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.portao-card {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8dvh, 18px);
  width: 100%;
  max-width: 420px;
  padding: clamp(24px, 3.4dvh, 36px);
  text-align: center;
  background: var(--fundo-alt);
  border: 1px solid rgba(198, 155, 78, 0.2);
  border-top: 2px solid var(--ouro-regua);
  box-shadow: 0 -1px 18px rgba(255, 220, 79, 0.18), 0 40px 80px -20px rgba(0, 0, 0, 0.8);
}

.portao-cabeca { display: flex; flex-direction: column; gap: 8px; margin-bottom: 2px; }

.portao-titulo {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.25rem, min(2.2vw, 3dvh), 1.7rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tinta);
}

.portao-sub {
  font-size: clamp(0.88rem, min(1.2vw, 1.7dvh), 1rem);
  line-height: 1.5;
  color: var(--tinta-sec);
}

.campo { display: flex; flex-direction: column; gap: 5px; text-align: left; }

.campo input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(244, 240, 237, 0.15);
  border-radius: 10px;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--f-corpo);
  font-size: 16px;
  transition: border-color var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease);
}
.campo input::placeholder { color: var(--tinta-ter); }
.campo input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(198, 155, 78, 0.18); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }

.campo-erro { font-size: 0.8rem; color: var(--erro); }
.campo-erro:empty { display: none; }

.portao .btn-cta { margin-top: 2px; }

/* ---------- Movimento ---------- */

@keyframes sobe {
  from { opacity: 0; transform: translateY(0.6em); }
  to { opacity: 1; transform: none; }
}
.sobe { animation: sobe 420ms var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .sobe { animation: none; }
}

@media (max-width: 600px) {
  .conteudo { padding-left: 16px; padding-right: 16px; }
  .palco { border-radius: 10px; }
  .btn-cta { padding-left: 20px; padding-right: 20px; letter-spacing: 0.03em; }
  .btn-oferta { max-width: 100%; padding-left: 18px; padding-right: 18px; font-size: clamp(0.72rem, 3.6vw, 0.95rem); }
  .portao { padding: 0 16px; }
}