.so-me-wrap{
  width: 100%;
  max-width: var(--so-me-max, 900px);
  margin: 16px auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* centrar todo */
}

.so-me-align-left{ align-items: flex-start; margin-left: 0; margin-right: auto; }
.so-me-align-center{ align-items: center; margin-left: auto; margin-right: auto; }
.so-me-align-right{ align-items: flex-end; margin-left: auto; margin-right: 0; }

.so-me-title{
  width: 100%;
  text-align: center;
  font-weight: 900;
  font-size: 14px;
  opacity: .9;
  margin: 0 0 10px;
  letter-spacing: .2px;
}

.so-me-frame{
  width: 100%;
  margin: 0 auto;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  box-shadow: 0 18px 55px rgba(15,23,42,.10);

  /* aspect ratio (correcto) */
  aspect-ratio: var(--so-me-ar, 16/9);
  min-height: 260px; /* evita la "raya" y se ve más sólido */
}

/* Fallback si el navegador no soporta aspect-ratio */
@supports not (aspect-ratio: 16/9) {
  .so-me-frame{ padding-top: calc(100% * (var(--so-me-h, 9) / var(--so-me-w, 16))); }
  .so-me-frame > *{ position:absolute; inset:0; }
}

.so-me-frame iframe,
.so-me-frame embed,
.so-me-frame object{
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important; /* evita que el tema lo reduzca */
  position: absolute;
  inset: 0;
  border: 0;
}

.so-me-msg{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.9);
  box-shadow: 0 14px 40px rgba(15,23,42,.10);
  max-width: 900px;
  margin: 14px auto;
  font-weight: 800;
}

/* Mobile: no se vea "chico" */
@media (max-width: 480px){
  .so-me-frame{ min-height: 220px; border-radius: 16px; }
}


/* --- Spotify: NO usar aspect-ratio, usar altura real del embed --- */
.so-me-spotify .so-me-frame{
  aspect-ratio: auto;
  min-height: 0;
  height: var(--so-me-spotify-h, 352px);
}

.so-me-spotify .so-me-frame iframe,
.so-me-spotify .so-me-frame embed,
.so-me-spotify .so-me-frame object{
  position: relative;
  inset: auto;
  height: 100% !important;
}

/* YouTube mantiene responsive */
.so-me-youtube .so-me-frame{
  height: auto;
}

.so-me-frame iframe{ max-width: 100% !important; }
