/* Sección del VSL (video de ~30 s por servicio) y el enlace "Ver el video" de los heros.
   Independiente de style.css, contenido.css y los estilos en línea: la usan las 3 familias de páginas. */
.vsl, .vsl-cta {
  --vsl-paper: #f2ede7; --vsl-paper-2: #e9e2d9; --vsl-ink: #14162a; --vsl-steel: #5b647c;
  --vsl-wine: #7d1c34; --vsl-wine-lit: #a02843;
}

/* ---- Enlace del hero ---- */
.vsl-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 600; font-size: 1rem;
  color: var(--vsl-ink); text-decoration: none; align-self: flex-start;
}
.vsl-cta__i {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%; background: var(--vsl-wine); color: #fff;
  box-shadow: 3px 3px 0 var(--vsl-ink); transition: transform .15s ease;
}
.vsl-cta__i svg { margin-left: 3px; }
.vsl-cta__s { color: var(--vsl-steel); font-weight: 400; }
.vsl-cta:hover .vsl-cta__i, .vsl-cta:focus-visible .vsl-cta__i { transform: scale(1.08); }
.vsl-cta:hover > span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }
.vsl-cta:focus-visible { outline: 3px solid var(--vsl-wine-lit); outline-offset: 4px; border-radius: 24px; }

/* ---- Sección ---- */
.vsl { background: var(--vsl-paper-2); padding: 64px 20px 72px; scroll-margin-top: 80px; }
.vsl__w { max-width: 980px; margin: 0 auto; text-align: center; }
.vsl__eb {
  margin: 0; font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 600; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--vsl-wine);
}
.vsl h2 {
  margin: 10px auto 0; max-width: 22ch; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.08; letter-spacing: -.02em; color: var(--vsl-ink);
}
/* .vsl .vsl__p le gana a «.pg p { margin: 0 0 14px }», que lo pegaba a la izquierda. */
.vsl .vsl__p { margin: 14px auto 0; max-width: 56ch; font-family: "Instrument Sans", system-ui, sans-serif; font-size: 1.05rem; line-height: 1.55; color: var(--vsl-steel); }

.vsl__frame {
  position: relative; margin: 32px auto 0; aspect-ratio: 16 / 9; width: 100%;
  border: 4px solid var(--vsl-ink); border-radius: 14px; overflow: hidden; background: var(--vsl-ink);
  box-shadow: 10px 10px 0 var(--vsl-wine);
}
/* Vertical: que quepa entero entre la barra de arriba y la barra fija de abajo del celular. */
.vsl__frame.is-v { aspect-ratio: 9 / 16; max-width: min(360px, calc((100svh - 190px) * 9 / 16)); box-sizing: border-box; }
.vsl__v { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--vsl-ink); }
.vsl__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; background: rgba(20, 22, 42, .18); cursor: pointer;
}
.vsl__play span {
  display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 50%;
  background: var(--vsl-wine); color: #fff; border: 4px solid #fff; box-shadow: 6px 6px 0 var(--vsl-ink);
  transition: transform .15s ease;
}
.vsl__play span svg { margin-left: 6px; }
.vsl__play:hover span, .vsl__play:focus-visible span { transform: scale(1.08); }
.vsl__play:focus-visible { outline: 4px solid var(--vsl-wine-lit); outline-offset: -8px; }
.vsl__frame.is-on .vsl__play { display: none; }

/* .vsl .vsl__btn: le gana a «.pg a { color: … }» de las páginas de contenido. */
.vsl .vsl__btn {
  display: inline-block; margin-top: 30px; padding: 15px 26px; border-radius: 6px;
  background: var(--vsl-wine); color: var(--vsl-paper-2); text-decoration: none; border: 3px solid var(--vsl-ink);
  box-shadow: 5px 5px 0 var(--vsl-ink); font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 600; font-size: 1.02rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.vsl .vsl__btn:hover { color: var(--vsl-paper-2); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--vsl-ink); }
.vsl .vsl__btn:focus-visible { outline: 3px solid var(--vsl-wine-lit); outline-offset: 3px; }

@media (max-width: 760px) {
  .vsl { padding: 48px 16px 56px; }
  .vsl__frame { box-shadow: 7px 7px 0 var(--vsl-wine); }
  .vsl__play span { width: 76px; height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .vsl-cta__i, .vsl__play span, .vsl__btn { transition: none; }
}