/* ==========================================================================
   Slider principal (hero) — se dibuja con js/hero-slider.js
   Medidas y colores por defecto tomados del slide original de Wix.
   ========================================================================== */

.hero {
  --hero-h: 565px;
  --hero-h-mobile: 520px;
  --hero-duration: 1000ms;

  /* Colores por defecto (cada diapositiva puede cambiarlos) */
  --badge-bg: #d72d2d;
  --badge-text: #fff;
  --title: #bc9b5d;
  --subtitle: #000;

  --f-title: "Lato", "Helvetica Neue", Arial, sans-serif;
  --f-subtitle: "Cormorant Garamond", Garamond, Georgia, serif;

  position: relative;
  overflow: hidden;
  height: var(--hero-h);
  background: #949494; /* color de fondo mientras carga la imagen (color_13) */
  isolation: isolate;
}

.hero[hidden] { display: none; }

.hero__track { position: absolute; inset: 0; }

/* ---------- Diapositivas ---------- */

.hero__slide {
  position: absolute;
  inset: 0;
  transition: opacity var(--hero-duration) ease, transform var(--hero-duration) ease, visibility var(--hero-duration);
}

/* Fundido */
.hero--fade .hero__slide { opacity: 0; visibility: hidden; }
.hero--fade .hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

/* Desplazamiento lateral */
.hero--slide .hero__slide { transform: translateX(100%); visibility: hidden; }
.hero--slide .hero__slide.is-active { transform: none; visibility: visible; z-index: 1; }
.hero--slide .hero__slide:not(.is-active)[style*="translateX"] { visibility: visible; }

.hero__slide.no-anim { transition: none; }

.hero__media,
.hero__overlay { position: absolute; inset: 0; }

.hero__media picture { display: contents; }

.hero__img,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}

.hero__overlay {
  background: var(--overlay, transparent);
  pointer-events: none;
}

/* ---------- Contenido ---------- */

/* Mismo bloque que en Wix: ancho (100% - 380px) con mínimo de 980px, centrado */
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100% - 32px, max(980px, 100% - 380px));
  height: 100%;
  margin: 0 auto;
  padding: 76px 35px 64px;
}

.hero__content--left   { justify-content: flex-start; text-align: left; }
.hero__content--center { justify-content: center; text-align: center; }
.hero__content--right  { justify-content: flex-end; text-align: right; }
.hero__content--v-top    { align-items: flex-start; }
.hero__content--v-center { align-items: center; padding-top: 48px; padding-bottom: 48px; }
.hero__content--v-bottom { align-items: flex-end; padding-top: 48px; }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 560px;
}
.hero__content--center .hero__inner { align-items: center; max-width: 760px; }
.hero__content--right .hero__inner  { align-items: flex-end; }

.hero__badge {
  margin: 0 0 12px;
  padding: 0 .3em;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.4;
}

.hero__title {
  margin: 0 0 19px;
  max-width: 479px;
  color: var(--title);
  font-family: var(--f-title);
  font-size: 60px;
  font-weight: 300;
  line-height: normal;
  text-wrap: balance;
}
.hero__content--center .hero__title { max-width: none; }

.hero__subtitle {
  margin: 0 0 25px;
  color: var(--subtitle);
  font-family: var(--f-subtitle);
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Los estilos de los botones están en css/cms.css (.cms-btn) */

/* ---------- Controles (solo con más de una diapositiva) ---------- */

.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  color: #edecec;
  transition: color .3s ease, transform .3s ease;
}
.hero__arrow::before {
  content: "";
  width: 18px;
  height: 18px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .45));
}
.hero__arrow--prev { left: clamp(8px, 4vw, 60px); }
.hero__arrow--prev::before { transform: translateX(3px) rotate(45deg); }
.hero__arrow--next { right: clamp(8px, 4vw, 60px); }
.hero__arrow--next::before { transform: translateX(-3px) rotate(-135deg); }
.hero__arrow:hover { color: #fff; }

.hero__controls {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translateX(-50%);
}

.hero__dots { display: flex; gap: 4px; }

.hero__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}
.hero__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(237, 236, 236, .55);
  box-shadow: 0 0 3px rgba(0, 0, 0, .35);
  transition: background-color .3s ease, transform .3s ease;
}
.hero__dot:hover::before { background: #fff; }
.hero__dot[aria-current="true"]::before { background: #fff; transform: scale(1.25); }

.hero__pause {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: #fff;
}
.hero__pause[hidden] { display: none; }
/* Icono pausa (dos barras) / reproducir (triángulo) */
.hero__pause::before {
  content: "";
  width: 8px;
  height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.hero__pause.is-paused::before {
  width: 0;
  height: 0;
  margin-left: 3px;
  border: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.hero__arrow:focus-visible,
.hero__dot:focus-visible,
.hero__pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1020px) {
  .hero__content { padding-left: 24px; padding-right: 24px; }
  .hero__title { font-size: clamp(36px, 5.6vw, 60px); }

  /* En tablet y móvil el texto suele quedar encima de la foto: capa propia si se define */
  .hero__overlay { background: var(--overlay-mobile, var(--overlay, transparent)); }
}

@media (max-width: 600px) {
  .hero { height: min(var(--hero-h-mobile), 85svh); }

  .hero__img,
  .hero__video { object-position: var(--focal-mobile, var(--focal, 50% 50%)); }

  .hero__content {
    width: 100%;
    padding: 40px 20px 72px;
  }
  .hero__content--v-center,
  .hero__content--v-bottom { padding-top: 32px; }

  .hero__badge { font-size: 16px; margin-bottom: 10px; }
  .hero__title { font-size: clamp(30px, 9vw, 40px); margin-bottom: 14px; }
  .hero__subtitle { font-size: 18px; margin-bottom: 20px; }

  .hero__arrow { display: none; } /* en móvil se desliza con el dedo */
  .hero__controls { bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition-duration: 1ms; }
}