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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
  background:
  radial-gradient(circle at top, #1f4d29 0%, #0b1f12 55%);
  color: #ffffff;

  margin: 0;
}

.page {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* =========================
   HEADER / LOGO
========================= */
/*.header {
    text-align: center;
    margin-top: 20px;
}*/

.logo {
  max-width: 250px;
  height: auto;
}

/* =========================
   FOOTER
========================= */
.footer {
  margin-top: 20px;
  font-size: 12px;
  color: #aaa;
  text-align: center;
}

/* CARD PRINCIPAL */
.card {
  .card {
  animation: fade .35s ease;
  }

  @keyframes fade {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  width: 95%;
  max-width: 400px;

  background: rgba(22, 47, 28, 0.92);
  backdrop-filter: blur(10px);
  padding: 25px;
  border-radius: 20px;

  text-align: center;

  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  border: 1px solid rgba(77, 165, 53, 0.2);
}

/* TITULOS */
h1, h2, h3 {
  margin-bottom: 10px;
}

/* SUBTITULO */
.subtitle {
  font-size: 14px;
  color: #b6e2b0;
  margin-bottom: 20px;
}

/* BOTÕES */
.btn {
  display: block;
  width: 100%;
  padding: 15px;
  margin-top: 15px;

  border-radius: 14px;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;

  transition: all 0.2s ease;
}

/* BOTÃO PRINCIPAL */
.btn.primary {
  background: #4DA535;
  color: white;
  box-shadow: 0 6px 15px rgba(77, 165, 53, 0.4);
}

.btn.primary:hover {
  background: #5ecf3f;
}

.btn.primary:active {
  transform: scale(0.96);
}

/* BOTÃO SECUNDÁRIO */
.btn.secondary {
  background: #1f3d26;
  color: #c7f0c2;
  border: 1px solid rgba(77, 165, 53, 0.3);
}

.btn.secondary:active {
  transform: scale(0.96);
}

/* VIDEO */
.video {
  width: 100%;
  border-radius: 12px;
  margin-top: 15px;
  border: 1px solid rgba(77, 165, 53, 0.3);
  pointer-events: none;
}

.video-container {
  position: relative;
  width: 100%;
}

.sound-btn {
  position: absolute;
  top: 25px;
  right: 10px;

  padding: 8px 14px;

  border-radius: 20px;
  border: none;

  background: rgba(0, 0, 0, 0.6);
  color: white;

  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
  backdrop-filter: blur(6px);

  display: flex;
  align-items: center;
  gap: 6px;

  transition: all 0.2s ease;
}

.sound-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.sound-btn:active {
  transform: scale(0.95);
}

/* CONTROLES */
.video-controls {
  margin-top: 10px;
}

/* barra */
.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  overflow: hidden;
}

/* progresso */
.progress {
  height: 100%;
  width: 0%;
  background: #4DA535;
  transition: width 0.2s linear;
}

/* tempo */
.time {
  margin-top: 5px;
  font-size: 12px;
  color: #ccc;
  text-align: right;
}

.progress {
  background: linear-gradient(90deg, #4DA535, #7CFF5A);
}

/* TEXTOS LGPD */
.terms {
  font-size: 14px;
  margin-bottom: 15px;
  color: #d8f5d4;
}

.terms.small {
  font-size: 12px;
  color: #9edc96;
}

/* MOBILE EXTRA (ajuste fino) */
@media (max-width: 400px) {
  .card {
    margin: 10px;
    padding: 20px;
  }
}

.msg {
  margin-top: 15px;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;

  white-space: pre-line;

}

/* sucesso */
.msg.success {
  background: rgba(77, 165, 53, 0.15);
  border: 1px solid rgba(77, 165, 53, 0.4);
  color: #b6e2b0;
}

/* erro */
.msg.error {
  background: rgba(255, 80, 80, 0.12);
  border: 1px solid rgba(255, 80, 80, 0.3);
  color: #ffb3b3;
}

/* esconder */
.hidden {
  display: none;
}

.termos-card {
  max-width: 700px;
  text-align: left;
}

.texto-termos {
  margin-top: 15px;

  font-size: 15x;
  line-height: 1.7;

  color: #d7ead3;

  text-align: justify;

  hyphens: auto;
}

.texto-termos h3 {
  margin-top: 2px;
  margin-bottom: 8px;

  color: #7CFF5A;
}

.texto-termos ul {
  margin-top: 8px;
  margin-left: 18px;
}

.check {
  margin-top: 18px;

  font-size: 13px;
  line-height: 1.7;

  color: #d4ebcf;

  text-align: left;

  user-select: none;
}

.check input {
  margin-right: 8px;
  transform: translateY(1px);
}

.check a,
.check a:visited {
  color: #7CFF5A;
  text-decoration: none;
}

.check a:hover {
  text-decoration: underline;
  color: #9CFF84;
}