/* Pie en tres zonas y vídeo «Cómo funciona». */
.video-dialog{width:min(94vw,1040px);max-height:94vh;overflow:auto;background:#17151f;color:#f8f8ff;border:1px solid #4f4660;border-radius:22px;padding:18px 20px 20px;box-shadow:0 30px 80px #000a}
.video-dialog::backdrop{background:#08080cea}
.video-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.video-head h2{margin:0;font-size:20px}
.video-close{background:none;border:1px solid #4f4660;color:inherit;border-radius:10px;min-width:44px;min-height:44px;font-size:22px;line-height:1;cursor:pointer}
.video-close:focus-visible{outline:2px solid #be8eec;outline-offset:2px}
.video-dialog video{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;background:#05050a}

/* Pie: marca a la izquierda (negrita), información en el centro, moderación a la derecha. */
footer{display:grid!important;grid-template-columns:1fr auto 1fr;grid-template-areas:"brand links mod";align-items:center;gap:10px 20px}
.footer-brand{grid-area:brand;justify-self:start;font-weight:800;letter-spacing:.04em}
.footer-links{grid-area:links;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
footer .footer-moderation{grid-area:mod;justify-self:end}
footer .footer-pill{margin:0;min-height:40px;padding:0 16px;background:#ffffff08;border:1px solid #3a3a48;border-radius:999px;color:#b4b4c4;font:inherit;font-size:11px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
footer .footer-pill:hover{background:#ffffff12;border-color:#7d6aa8;color:#f2f2fb;text-decoration:none}
footer .footer-pill:focus-visible{outline:2px solid #35e2c4;outline-offset:3px}
@media (max-width:640px){
 footer{grid-template-columns:1fr auto;grid-template-areas:"brand mod" "links links"}
 .footer-links{justify-content:flex-start}
}