/* ── EMBEDS (hw-embeds.js) ── */
.embed-placeholder { position:relative; width:100%; background:#0a0a0a; overflow:hidden; border-radius:14px; }
.embed-skeleton { position:absolute; inset:0; background:linear-gradient(100deg,#0a0a0a 30%,#1c1c1c 50%,#0a0a0a 70%); background-size:200% 100%; animation:embedShimmer 1.4s ease-in-out infinite; transition:opacity 0.3s var(--ease); }
@keyframes embedShimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
.embed-play-hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; transition:opacity 0.3s var(--ease); }
.embed-iframe { position:absolute; inset:0; width:100%; height:100%; border:none; transition:opacity 0.35s var(--ease); }
.embed-placeholder[data-embed-type="twitter"], .embed-placeholder[data-embed-type="tumblr"] { min-height:200px; aspect-ratio:auto; }

/* Boton de respaldo para sitios NO reconocidos entre los proveedores
   soportados - siempre visible (no solo si el iframe falla), porque no
   hay forma confiable de detectar desde JS si un sitio bloqueo el embed
   via X-Frame-Options/CSP. */
.embed-generic-fallback {
  position:absolute; bottom:0.6rem; right:0.6rem; z-index:15;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(6px);
  color:#fff; font-size:0.7rem; font-weight:600;
  padding:0.4rem 0.75rem; border-radius:20px;
  text-decoration:none; white-space:nowrap;
  border:1px solid rgba(255,255,255,0.15);
}
.embed-generic-fallback:active { transform:scale(0.95); }

/* ── Player nativo de YouTube (controles propios) ── */
.yt-mount { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 0.35s var(--ease); pointer-events:none; }
.yt-mount iframe { position:absolute !important; inset:0; width:100% !important; height:100% !important; border:none; }
.yt-controls {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:0.5rem;
  padding:0.5rem 0.7rem calc(0.5rem + var(--safe-bottom,0px));
  background:linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  opacity:0; transition:opacity 0.35s var(--ease);
}
.yt-btn { background:none; border:none; color:#fff; width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; transition:transform 0.25s var(--ease-bounce), background 0.2s; }
.yt-btn:active { transform:scale(0.85); background:rgba(255,255,255,0.15); }
.yt-btn svg { width:18px; height:18px; }
.yt-progress { flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,0.25); position:relative; cursor:pointer; }
.yt-progress-fill { position:absolute; left:0; top:0; height:100%; width:0%; border-radius:2px; background:var(--fire-orange); transition:width 0.2s linear; }
.yt-time { color:#fff; font-size:0.68rem; font-family:var(--font-b); flex-shrink:0; min-width:34px; text-align:right; }

/* ── CLIPS GRID (Reels-style, perfil propio y visitante) ── */
.clips-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:0.35rem; padding:0.5rem; }
.clip-thumb { position:relative; aspect-ratio:9/16; border-radius:10px; overflow:hidden; background:var(--surface-2); cursor:pointer; transition:transform 0.25s var(--ease-bounce); }
.clip-thumb:active { transform:scale(0.95); }
.clip-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.clip-thumb-fallback { width:100%; height:100%; background:linear-gradient(135deg,var(--surface-3),var(--surface-2)); }
.clip-thumb-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; pointer-events:none; }
.clip-overlay-body { padding-bottom:2rem; padding-top:calc(env(safe-area-inset-top,0px) + 3rem); }
.clip-thumb .embed-placeholder { position:absolute; inset:0; border-radius:0; aspect-ratio:auto; }
.clip-thumb-tapcatcher { position:absolute; inset:0; z-index:5; cursor:pointer; }
.tumblr-post { width:100%; position:relative; min-height:200px; }
.tumblr-post iframe { width:100% !important; max-width:100% !important; }
.aspect-pick-btn { background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); font-size:0.68rem; padding:0.3rem 0.6rem; border-radius:8px; cursor:pointer; }
.aspect-pick-btn.active { background:var(--fire-orange); color:#fff; border-color:var(--fire-orange); }
.embed-tap-confirm { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.15); cursor:pointer; }