/* «VER LA EXPLICACIÓN EN VIDEO» (26-oct-2026). Fernando: «tenemos muchos videos subidos a YouTube y en el sitio
   no hay cómo ir a verlos. Que donde está cada producto, la gente le dé clic y se vaya a ver el video de la
   explicación en YouTube». Es UNA pieza para todo el sitio: un enlace, no un reproductor (un iframe por ficha
   pesa y deja cookies de terceros). Abre youtube.com/watch?v=ID en otra pestaña.

   La pone herramientas/poner_videos.py, que tiene la tabla video -> página y vuelve a poner el enlace si una
   ficha se reescribe; los Visores la llevan desde construir/armar_visores.py y la portada desde su JS.

   Dos fondos, una sola pieza: sobre claro el rótulo va en azul noche con el botón dorado; sobre azul noche
   (.yt-ver--oscuro) el rótulo pasa a dorado. El dorado de firma #C8973A como texto sobre blanco no da el
   contraste de un rótulo de 12 px, por eso sobre claro el dorado es el del botón y no el de la letra. */
.yt-ver{display:inline-flex;align-items:center;gap:10px;max-width:100%;
  font:500 12px/1.35 "DM Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;
  color:#0B1628;text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.yt-ver:hover,.yt-ver:focus-visible{border-bottom-color:#C8973A}
.yt-ver:focus-visible{outline:2px solid #C8973A;outline-offset:4px;border-radius:2px}
.yt-ver .yt-ic{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:#C8973A;box-shadow:0 0 0 4px rgba(200,151,58,.16);transition:transform .2s}
.yt-ver .yt-ic svg{width:10px;height:10px;margin-left:2px;fill:#0B1628}
.yt-ver:hover .yt-ic{transform:scale(1.08)}
.yt-ver .yt-t{min-width:0;overflow-wrap:anywhere}
.yt-ver .yt-d{color:#65728A;white-space:nowrap;text-transform:none}
.yt-ver--oscuro{color:#C8973A}
.yt-ver--oscuro .yt-d{color:#A9BBD4}
.yt-ver--oscuro:hover,.yt-ver--oscuro:focus-visible{color:#E0B663}
/* El contenedor que pone el guion: solo separa el enlace de lo que tiene encima. */
.yt-ver-caja{margin:16px 0 0}
@media (prefers-reduced-motion:reduce){.yt-ver,.yt-ver .yt-ic{transition:none}}