/* Videos de la web (app/site_videos.py): a light facade, the player only after a tap. Mobile first. */
.vf-card{margin:1.25rem 0;max-width:720px}
.vf-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#111}
.vf-play{all:unset;cursor:pointer;display:block;position:absolute;inset:0}
.vf-play img{width:100%;height:100%;object-fit:cover;display:block}
.vf-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.vf-bg{fill:#212121;fill-opacity:.85}
.vf-play:hover .vf-bg,.vf-play:focus-visible .vf-bg{fill:#f00;fill-opacity:1}
.vf-play:focus-visible{outline:3px solid currentColor;outline-offset:-3px}
.vf-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vf-link{display:inline-block;margin-top:.4rem;font-size:.9rem}
.vf-chip{margin:.5rem 0;max-width:640px}
.vf-chip>summary{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;list-style:none;padding:.35rem .75rem;border-radius:999px;border:1px solid currentColor;font-size:.9rem;min-height:36px}
.vf-chip>summary::-webkit-details-marker{display:none}
.vf-chip>summary .icon{width:1.1em;height:1.1em}
.vf-chip[open]>summary{margin-bottom:.5rem}
/* A video kept on QuéHay: the browser's own player; tutorials vertical (9:16), commercials 16:9 */
.vf-web video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.vf-frame.vf-vertical{aspect-ratio:9/16;width:min(100%,360px,calc(80vh*9/16));margin-inline:auto}