/* =========================================================
   Home hero
   ========================================================= */

/* Base compartida */
.hero-carousel { position: relative; z-index: 1; width: 100%; }
.hero-carousel--empty { display: grid; place-items: center; min-height: clamp(300px, 42vw, 620px); }
.home-hero { --home-hero-empty-message-color: #1d2735; }
.home-hero__empty-message { margin: 0; padding: 1rem 0; font-family: var(--font-body); font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.45; color: var(--home-hero-empty-message-color); }
.site-main--home > .home-hero.section-shell { padding-block: 0; }

/* Carrusel */
.hero-carousel__viewport { position: relative; aspect-ratio: 1918 / 526; min-height: clamp(300px, 42vw, 620px); overflow: hidden; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.hero-carousel__viewport::after { content: none; }
.hero-carousel__slide { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; }
.hero-carousel__slide.is-active { opacity: 1; visibility: visible; }
.hero-carousel__slide picture { display: block; width: 100%; height: 100%; }
.hero-carousel__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
html[data-theme="light"] .home-hero { --home-hero-empty-message-color: #1d2735; }
html[data-theme="dark"] .home-hero { --home-hero-empty-message-color: #ffffff; }
.hero-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: 1.35rem; position: absolute; inset: 0 clamp(0.85rem, 1.6vw, 1.35rem); margin-top: 0; pointer-events: none; z-index: 4; }
.hero-carousel__controls > * { pointer-events: auto; }
.hero-carousel__arrow { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 1px solid rgba(1, 72, 152, 0.28); border-radius: var(--radius-small); background: linear-gradient(180deg, rgba(1, 72, 152, 0.62) 0%, rgba(1, 72, 152, 0.42) 100%); color: #ffffff; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease; }
.hero-carousel__arrow:hover, .hero-carousel__arrow:focus-visible { background: linear-gradient(180deg, rgba(1, 72, 152, 1) 0%, rgba(0, 58, 121, 1) 100%); border-color: rgba(1, 72, 152, 1); color: #fff; transform: translateY(-1px); }
.hero-carousel__arrow i { font-size: 1.2rem; line-height: 1; }
.hero-carousel__pagination { position: absolute; left: 50%; bottom: clamp(1rem, 2.4vw, 1.7rem); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 0.55rem; }
.hero-carousel__dot { width: 0.92rem; height: 0.92rem; border: 1px solid rgba(255, 255, 255, 0.44); border-radius: 4px; background: rgba(255, 255, 255, 0.16); transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
.hero-carousel__dot:hover, .hero-carousel__dot:focus-visible, .hero-carousel__dot.is-active { background: rgba(255, 255, 255, 0.94); border-color: rgba(255, 255, 255, 0.94); transform: translateY(-1px); }
html[data-theme="dark"] .hero-carousel__arrow { border-color: rgba(1, 72, 152, 0.28); background: linear-gradient(180deg, rgba(1, 72, 152, 0.52) 0%, rgba(1, 72, 152, 0.32) 100%); color: #ffffff; }
html[data-theme="dark"] .hero-carousel__arrow:hover, html[data-theme="dark"] .hero-carousel__arrow:focus-visible { background: linear-gradient(180deg, rgba(1, 72, 152, 0.96) 0%, rgba(0, 58, 121, 0.96) 100%); border-color: rgba(1, 72, 152, 0.96); color: #fff; }

/* Video */
.hero-video { position: relative; z-index: 1; width: 100%; }
.hero-video__viewport { position: relative; aspect-ratio: 1918 / 526; min-height: clamp(300px, 42vw, 620px); overflow: hidden; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.hero-video__media { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #000; }
.hero-video--empty { min-height: clamp(300px, 46vw, 420px); }
.hero-video__viewport--empty { display: grid; place-items: center; background: transparent; }
@media (max-width: 767px) {
  .hero-carousel--empty { min-height: clamp(300px, 78vw, 420px); }
  .hero-carousel__viewport,
  .hero-video__viewport,
  .hero-video--empty { min-height: clamp(300px, 78vw, 420px); }
  .hero-carousel__controls { gap: 1rem; inset: 0 0.75rem; }
  .hero-carousel__arrow { width: 3rem; height: 3rem; }
  .hero-carousel__pagination { bottom: 0.85rem; }
  .hero-carousel__dot { width: 0.95rem; height: 0.95rem; }
}