/* Responsive Hero Rotator - Estilos base v1.2.0 */
.rhr-hero {
  position: relative;
  width: 100%;
  height: var(--rhr-height, 70vh);
  min-height: var(--rhr-min-height, 420px);
  overflow: hidden;
  isolation: isolate;
}

.rhr-hero__bg {
  position: absolute;
  inset: 0;
  background-position: center center; /* se ajusta por JS según imagen/breakpoint */
  background-size: cover;
  background-repeat: no-repeat;
  will-change: opacity, transform, background-image, background-position;
  transition: opacity 800ms ease, transform 800ms ease, background-position 300ms ease;
  transform: scale(1.02);
}

.rhr-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--rhr-overlay, .35));
  pointer-events: none;
  z-index: 1;
}
.rhr--gradient .rhr-hero__overlay {
  background: linear-gradient(180deg,
    rgba(0,0,0,.52) 0%,
    rgba(0,0,0,.25) 35%,
    rgba(0,0,0,.25) 65%,
    rgba(0,0,0,.55) 100%
  );
}

.rhr-hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  margin-inline: auto;
  padding: var(--rhr-pad, clamp(16px, 3.5vw, 40px));
  display: grid;
  place-items: center;
  place-content: center;
  text-align: center;
  gap: var(--rhr-gap, 12px);
  transform: translateY(var(--rhr-content-y, 0));
}

.rhr-align-left { justify-items: start; text-align: left; }
.rhr-align-center { justify-items: center; text-align: center; }
.rhr-align-right { justify-items: end; text-align: right; }

.rhr-hero__title {
  margin: 0;
  line-height: var(--rhr-title-lh, 1.10);
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

.rhr-hero__subtitle {
  margin: 0;
  font-size: var(--rhr-subtitle-size, clamp(0.95rem, 1.4vw, 1.15rem));
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
  max-width: 70ch;
}

.rhr-hero__btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 15px!important;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.rhr-hero__btn:hover { transform: translateY(-2px); opacity: .95; }
.rhr-hero__btn:active { transform: translateY(0); opacity: .9; }

@media (max-width: 768px) {
  .rhr-hero { min-height: var(--rhr-min-height, 380px); }
}