.tripy-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 20, 18, 0);
  opacity: 0;
  /* visibility:hidden remueve el elemento del hit-testing de gestos en iOS,
     a diferencia de pointer-events:none que no aplica al scroll layer */
  visibility: hidden;
  pointer-events: none;
  padding: 24px;
  /* Al cerrar: visibility se oculta después del fade (0s delay = duración del fade) */
  transition: background .28s ease, opacity .28s ease, visibility 0s linear .28s;
}
.tripy-overlay.abierto {
  background: rgba(15, 20, 18, .6);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Al abrir: visibility visible de inmediato (sin delay) */
  transition: background .28s ease, opacity .28s ease, visibility 0s linear 0s;
}
.tripy-panel {
  position: relative; width: min(1150px, 94vw); height: 94vh;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  display: flex; flex-direction: column;
  transform: translateY(24px) scale(.98);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.tripy-overlay.abierto .tripy-panel { transform: translateY(0) scale(1); }
.tripy-barra {
  flex-shrink: 0; height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 16px; border-bottom: 1px solid #eee; background: #fff;
}
.tripy-barra-titulo { font-size: 14px; font-weight: 600; color: #333; }
.tripy-cerrar {
  width: 36px; height: 36px; border: none; background: transparent; cursor: pointer;
  font-size: 24px; line-height: 1; color: #555; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.tripy-cerrar:hover { background: #f3f3f3; color: #111; }
.tripy-cuerpo { position: relative; flex: 1 1 auto; min-height: 0; }
.tripy-iframe { width: 100%; height: 100%; border: none; display: block; }
.tripy-cargando {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #888; font-size: 15px; background: #fff;
}
@media (max-width: 900px) {
  .tripy-overlay { padding: 16px; }
  .tripy-panel { width: 100%; height: 96vh; border-radius: 16px; }
}
@media (max-width: 600px) {
  .tripy-overlay { padding: 0; }
  .tripy-panel { width: 100%; height: 100%; border-radius: 0; }
}