/* PANEL: fijo, oculto por defecto, se desliza desde la izquierda */
.mp-panel {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 50%;
  background: #fff;
  box-shadow: 4px 0 12px rgba(0,0,0,0.2);
  transform: translateX(-100%);
  transition: transform 0.4s ease, visibility 0s linear 0.4s;
  visibility: hidden;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.mp-panel.open {
  transform: translateX(0);
  transition-delay: 0s;
  visibility: visible;
}

/* HEADER */
.mp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(
    135deg,
    #3a0d0d 0%,
    #511f1f 50%,
    #7f2a2a 100%
  );
  padding: 0 1.5rem;
}

/* TÍTULO + ICONO 3D */
.mp-title-wrap {
  display: flex;
  align-items: center;
}
.mp-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0.75rem 0 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}
lord-icon {
  display: inline-block;
  animation: mp-pin-bounce 1.5s infinite ease-in-out;
}
@keyframes mp-pin-bounce {
  0%,100%   { transform: translateY(0) rotateY(0); }
  50%       { transform: translateY(-6px) rotateY(20deg); }
}

/* BOTÓN CERRAR */
#mp-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  color: #fff;
  cursor: pointer;
}

/* CONTENIDO */
.mp-content {
  flex: 1;
  display: flex;
  overflow-y: auto;
}
.mp-column {
  flex: 1;
  padding: 1rem;
}
.mp-column h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
.mp-column h3 i {
  margin-right: 0.5rem;
}

/* OPCIONES */
.mp-options {
  list-style: none;
  margin: 0; padding: 0;
}
.mp-option {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.mp-option i {
  margin-right: 0.5rem;
}
.mp-option:hover {
  background: #f9f9f9;
  transform: translateX(5px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .mp-panel { width: 100%; }
  .mp-content { flex-direction: column; }
}

/* PIN 3D animado */
lottie-player {
  display: inline-block;
  margin-left: 0.75rem;
  animation: mp-pin-bounce 1.5s infinite ease-in-out;
}
@keyframes mp-pin-bounce {
  0%,100%   { transform: translateY(0)    rotateY(0); }
  50%       { transform: translateY(-6px) rotateY(20deg); }
}

/* Aumenta el tamaño del pin Lottie */
.mp-pin-lottie {
  width: 140px;
  height: 140px;
}


/* 1) Importa la fuente si aún no lo has hecho */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');

/* 2) Keyframes para el “pop” y el destello */
@keyframes show {
  to { opacity: 1; }
}
@keyframes pop-word {
  to { transform: rotateX(0); }
}
@keyframes flash {
  0%   { text-shadow: 0 0 0 transparent; }
  50%  { text-shadow: 0 0 8px rgba(255,255,255,0.8); }
  100% { text-shadow: 0 0 0 transparent; }
}

/* 3) Ajustes en el título */
.mp-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
  perspective: 500px;
  display: inline-block; /* para que perspective tenga efecto */
}

/* 4) Estado inicial de cada palabra */
.mp-panel .mp-title .word {
  display: inline-block;
  opacity: 0;
  transform: rotateX(120deg);
  transform-origin: 50% 100%;
}

/* 5) Al abrir el panel (clase .open), arrancan las animaciones */
.mp-panel.open .mp-title .word {
  animation:
    show       0.01s forwards,
    pop-word   0.8s forwards  cubic-bezier(0.14,1.23,0.33,1.16),
    flash      0.4s forwards      ease-in-out 0.4s;
}

/* 6) Diferir el segundo “word” para que salga tras la primera */
.mp-panel.open .mp-title .word:nth-of-type(1) {
  animation-delay: 0.2s;
}
.mp-panel.open .mp-title .word:nth-of-type(2) {
  animation-delay: 0.6s;
}