/* Cabecera 1 · Vídeo a pantalla completa */
.hero-video { background: #111; color: var(--white); }
.hv-media { position: absolute; inset: 0; z-index: -2; }
.hv-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-video::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .42) 50%, rgba(0, 0, 0, 0) 100%),
  linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, transparent 45%); }
.js .hv-media { clip-path: inset(0 0 100% 0); }
.js .hero.is-on .hv-media { animation: hv-open 1.4s var(--ease) forwards; }
@keyframes hv-open { to { clip-path: inset(0 0 0 0); } }
.hero-video .hero-brand, .hero-video .hero-display, .hero-video .hero-sub, .hero-video .hero-cities { color: var(--white); }
.hero-video .hero-brand { background-image: linear-gradient(var(--blue), var(--blue)); }
.hero-video .hero-cities { border-top-color: rgba(255, 255, 255, .5); }
.hero-video .hero-cities li + li::before { background: var(--blue); }
.hero-video .pill-ink { background: var(--blue); color: var(--ink); border-color: var(--blue); }
.hero-video .pill-ink:hover { background: var(--white); border-color: var(--white); }
.hero-video .pill-line { color: var(--white); border-color: var(--white); }
.hero-video .pill-line:hover { background: var(--white); color: var(--ink); }
.hero-video .hero-pause { color: var(--white); }
.hero-video .hero-pause:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.hero-video :focus-visible { outline-color: var(--blue); }
@media (max-width: 760px) {
  /* text spans the full width on phones: darken from the bottom up instead of left to right */
  .hero-video::before { background: linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .74) 55%, rgba(0, 0, 0, .35) 80%, rgba(0, 0, 0, .2) 100%); }
}
@media (prefers-reduced-motion: reduce) { .js .hv-media { clip-path: none; } .js .hero.is-on .hv-media { animation: none; } }
/* pause control sits on the cities row, below the rule, centred on the city names */
@media (min-width: 761px) {
  .hero-video .hero-pause { bottom: 22px; min-height: 34px; padding: 0 14px; }
  body:has(.hero-switch) .hero-video .hero-pause { bottom: 86px; }
}