/* =========================================
   MISSÃO 7 - ABERTURA DO SABER
   ========================================= */

.m7-wrap {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

/* =========================================
   POSICIONAMENTO GERAL
   ========================================= */

#m7-base {
  position: absolute;
  top: 64%;
  left: 91%;
  width: 5.8%;
  height: 8.8%;
  pointer-events: none;
}

#m7-flag-system {
  position: absolute;
  top: 54%;
  left: 92%;
  width: 8%;
  height: 16%;
  pointer-events: none;
}

#m7-btn-levantar {
  position: absolute;
  top: 47%;
  right: 1.2%;
  width: auto;
  padding: 0 1vw;
  height: 6.4%;
  pointer-events: auto;
}

/* =========================================
   BASE - começa vermelha
   ========================================= */

.m7-base {
  border-radius: 0.9vw;
  background: rgba(180, 35, 35, 0.92);
  outline: 0.18vw solid rgba(255, 255, 255, 0.22);

  box-shadow:
    0 0.7vw 1.3vw rgba(0, 0, 0, 0.35),
    inset 0 0 0.8vw rgba(255, 255, 255, 0.06);

  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-50deg);

  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    outline-color 0.25s ease;
}

/* concluída = verde */
.m7-base.m7-base-ok {
  background: rgba(46, 204, 113, 0.95);
  outline-color: rgba(255, 255, 255, 0.28);

  box-shadow:
    0 0.7vw 1.3vw rgba(0, 0, 0, 0.35),
    0 0 1vw rgba(46, 204, 113, 0.28),
    inset 0 0 0.8vw rgba(255, 255, 255, 0.06);
}

/* =========================================
   SISTEMA DA BANDEIRA
   ========================================= */

.m7-flag-system {
  overflow: visible;
}

/* COMEÇA BAIXADA */
.m7-pivot {
  position: absolute;
  left: 12%;
  bottom: 8%;

  width: 70%;
  height: 88%;

  transform-origin: 8% 92%;
  transform: rotate(-88deg);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* quando erguer */
.m7-pivot.m7-erguida {
  transform: rotate(0deg);
}

.m7-pole {
  position: absolute;
  left: 0;
  bottom: 0;

  width: 7%;
  height: 100%;

  border-radius: 0.5vw;
  background: linear-gradient(
    to right,
    rgba(105, 75, 35, 0.95) 0%,
    rgba(145, 105, 55, 0.98) 45%,
    rgba(95, 65, 28, 0.95) 100%
  );

  outline: 0.12vw solid rgba(255, 255, 255, 0.12);

  box-shadow:
    0 0.25vw 0.7vw rgba(0, 0, 0, 0.25),
    inset 0 0 0.3vw rgba(255, 255, 255, 0.08);
}

.m7-pole::before {
  content: "";
  position: absolute;
  top: -4%;
  left: 50%;
  transform: translateX(-50%);

  width: 180%;
  height: 6%;

  border-radius: 999px;
  background: rgba(212, 175, 55, 0.95);
  box-shadow: 0 0 0.5vw rgba(212, 175, 55, 0.25);
}

.m7-pole::after {
  content: "";
  position: absolute;
  bottom: -2%;
  left: 50%;
  transform: translateX(-50%);

  width: 240%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;

  background: rgba(35, 35, 35, 0.95);
  outline: 0.15vw solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0.3vw 0.8vw rgba(0, 0, 0, 0.3);
}

/* =========================================
   BANDEIRA
   ========================================= */

.m7-flag {
  position: absolute;
  left: 105%;
  top: 9%;

  width: 240%;
  height: 24%;

  transform-origin: left center;
  filter: drop-shadow(0 0.35vw 0.5vw rgba(0, 0, 0, 0.25));
}

.m7-flag-top {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 50%;

  background: rgba(46, 204, 113, 0.96);
  clip-path: polygon(0 0, 100% 6%, 91% 100%, 0 100%);
  border-top-right-radius: 0.35vw;
}

.m7-flag-bottom {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 50%;

  background: rgba(255, 255, 255, 0.96);
  clip-path: polygon(0 0, 91% 0, 100% 94%, 0 100%);
  border-bottom-right-radius: 0.35vw;
}

.m7-pivot.m7-erguida .m7-flag {
  animation: m7BandeiraOndular 1.2s ease-in-out infinite alternate;
}

@keyframes m7BandeiraOndular {
  0% {
    transform: skewY(0deg) scaleY(1);
  }
  50% {
    transform: skewY(-3deg) scaleY(1.01);
  }
  100% {
    transform: skewY(2.5deg) scaleY(0.99);
  }
}

/* =========================================
   BOTÃO
   ========================================= */

.m7-btn {
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  font-family: 'Archivo', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9vw;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  color: #ffffff !important;
  background-color: var(--tbr-azul, #022d62);
  
  box-shadow: 0 4px 12px rgba(2, 45, 98, 0.3);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding: 0 1.2vw;
  gap: 8px;
}

.m7-btn:hover {
  background-color: var(--tbr-verde, #00b144);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 177, 68, 0.4);
  border-color: rgba(255,255,255,0.4);
}

.m7-btn:active {
  transform: translateY(-1px) scale(0.98);
}

.m7-btn.m7-btn-on {
  background-color: var(--tbr-verde, #00b144);
  box-shadow: 0 0 15px rgba(0, 177, 68, 0.5);
  border-color: rgba(255,255,255,0.5);
}

/* REMOVE A CAIXINHA "MISSÃO 7" */
.m7-btn::before {
  display: none !important;
}

@media (max-width: 1200px) {
  .m7-btn {
    font-size: 1.1vw;
  }
}

@media (max-width: 768px) {
  .m7-btn {
    font-size: 1.45vw;
    border-radius: 10px;
  }
}