/* ============================================================
   M4 - ACESSIBILIDADE E INGRESSO À UNIVERSIDADE (High)
   ============================================================ */

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

/* --- Rampa (Animação 3D) ---
   Assumiu as propriedades da antiga Área Cinza
*/
.m4h-scene {
  position: absolute;
  top: 37.7%;       
  left: 78.6%;      
  width: 19.2%;    
  height: 22.6%;   
  transform: rotate(258.3deg);
  perspective: 800px;
  perspective-origin: 50% 50%;
  z-index: 5;
  pointer-events: none; /* Só os filhos arrastáveis (ou a rampa em si) reagem */

  /* Estilos da antiga Área Cinza repassados pro fundo, caso seja visível: */
  border: 0.2vw solid #666;
  background: rgba(150, 150, 150, 0.4);
  border-radius: 0.1vw;
}

/* Degraus da Escada */
.m4h-degrau {
  position: absolute;
  background: #aaa;
  border: 0.1vw solid #888;
  border-radius: 0.1vw;
  pointer-events: none;
  z-index: 2; /* Sobre a área cinza base, mas não atrapalha eventos */
  box-shadow: inset 0.1vw 0.1vw 0.2vw rgba(255,255,255,0.3), inset -0.1vw -0.1vw 0.2vw rgba(0,0,0,0.2);
}

/* Tamanhos pré-definidos para você ajustar como ficar melhor sobre a área */
#m4h-degrau-1 {
  top: 36%;
  left: 70%;
  width: 55%;
  height: 25%;
  transform: rotate(88.3deg);
}

#m4h-degrau-2 {
  top: 36%;
  left: 57%;
  width: 55%;
  height: 25%;
  transform: rotate(88.3deg);
}

/* Robô da Missão 4 (High) */
.m4h-robo {
  position: absolute;
  top: 55%;       
  left: 4%;
  width: 3.5vw;
  height: 3.5vw;
  background: radial-gradient(circle at 30% 30%, #e6e6e6, #888);
  border: 0.2vw solid #333;
  border-radius: 0.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8vw;
  cursor: grab;
  pointer-events: auto;
  z-index: 30;
  box-shadow: 0 0.3vw 0.5vw rgba(0, 0, 0, 0.4);
}

.m4h-robo:active {
  cursor: grabbing;
}

.m4h-rampa-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.m4h-rampa-base {
  position: absolute;
  inset: 0;
  /* background e borders removidos para não sobrepor o fundo transparente do .m4h-scene */
}

.m4h-rampa-movel-wrap {
  position: absolute;
  inset: 0;
  width: 45%; /* Comprimento menor quando levantada (perspectiva topo) */
  transform-origin: left center; 
  /* Fica encolhida e sem rotação invertida quando levantada */
  transform: rotateY(0deg); 
  transition: transform 0.90s cubic-bezier(0.4, 0, 0.2, 1), width 0.90s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

/* Rampa abaixada: ela estica até o outro lado */
.m4h-rampa-container.abaixada .m4h-rampa-movel-wrap {
  width: 65%; /* Esticada ao máximo */
  transform: rotateY(180deg); /* Faz o giro de tombar para o outro lado */
}

.m4h-rampa-frente {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #bbbbbb 0%, #888888 100%);
  border: 0.2vw solid #333;
  border-radius: 0.2vw;
  backface-visibility: hidden;
}

.m4h-rampa-tras {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #888888 0%, #555555 100%);
  border: 0.2vw solid #333;
  border-radius: 0.2vw;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

/* Botão da Rampa */
#m4h-btn-rampa {
  position: absolute;
  top: 76%;     
  left: 91%;    
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  z-index: 15;

  background-color: var(--tbr-azul, #022d62);
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.2);
  padding: 8px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9vw;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Archivo', 'Montserrat', sans-serif;
  box-shadow: 0 4px 12px rgba(2, 45, 98, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

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

#m4h-btn-rampa:active {
  transform: translateX(-50%) translateY(-1px) scale(0.98);
}

#m4h-btn-rampa.abaixada {
  background-color: var(--tbr-verde, #00b144);
  box-shadow: 0 0 15px rgba(0, 177, 68, 0.5);
}