/* sección del video: título centrado, video en un marco con brillo morado y botón propio sobre el póster */
/* lo que va encima del video (velo, botón, duración) conserva sus colores en los dos temas */
.sv { border-top: 0; }
.sv-h { margin: 0 auto; text-align: center; font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.sv-sub { margin: 18px auto 0; max-width: 52ch; text-align: center; color: var(--muted); font-size: 17.5px; text-wrap: balance; }
.sv-marco { margin: 56px auto 0; max-width: 880px; border-radius: 18px; border: 1px solid var(--line2); }   /* más chico (antes 1080 px) y sin el halo morado alrededor */
.sv-play { all: unset; position: absolute; inset: 0; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 14px; background: radial-gradient(60% 60% at 50% 50%, rgb(8 9 10 / .1), rgb(8 9 10 / .45)); transition: background .3s; }
.sv-play:hover { background: radial-gradient(60% 60% at 50% 50%, rgb(8 9 10 / 0), rgb(8 9 10 / .35)); }
.sv-play:focus-visible { outline: 2px solid var(--brand-l); outline-offset: -4px; border-radius: 18px; }
.sv-btn { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, var(--k8b3dff), var(--k5a8dff)); box-shadow: 0 0 0 10px var(--k8b3dff-18), 0 20px 50px var(--k5a3cdc-55); position: relative; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.sv-btn::after { content: ""; position: absolute; left: 34px; top: 27px; border-left: 22px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.sv-play:hover .sv-btn { transform: scale(1.07); }
.sv-dur { font-size: 14px; font-weight: 600; color: #e6e6ea; text-shadow: 0 1px 8px rgb(0 0 0 / .6); }
.sv-marco.reproduciendo .sv-play { display: none; }
@media (max-width: 760px) { .sv-marco { margin-top: 36px; border-radius: 12px; } .sv-btn { width: 64px; height: 64px; } .sv-btn::after { left: 26px; top: 20px; border-left-width: 17px; border-top-width: 12px; border-bottom-width: 12px; } }