/*
 * hero.css — Sección Hero con carousel de la Homepage
 *
 * Carousel de pantalla completa con fade elegante, mobile-first.
 * Autoplay controlado por hero.js vía data attributes.
 */

/* ── Contenedor principal ──────────────────────────────────────────────────── */

.rda-hero {
  position: relative;
  width: 100%;
  /* Móvil: ajusta la altura al ratio de las imágenes portrait (750×1334 ≈ 9:16).
     min() garantiza que nunca exceda el viewport; min-height evita heros muy pequeños. */
  height: min(100svh, calc(100vw * 1334 / 750));
  min-height: 580px;
  overflow: hidden;
  background-color: var(--color-navy-base);
}

/* ── Carousel wrapper ──────────────────────────────────────────────────────── */

.rda-hero__carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Slides ────────────────────────────────────────────────────────────────── */

.rda-hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-in-out);
  pointer-events: none;
}

.rda-hero__slide[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

/* Fondos placeholder — gradientes ricos que evocan cada temática */

/* Fallback crema para slides con imagen de fondo claro (mientras carga la foto) */
.rda-hero__slide--light {
  background: linear-gradient(155deg, #ede5d8 0%, #fdfaf5 55%, #f0e8dd 100%);
}

.rda-hero__slide--col1 {
  background: linear-gradient(
    160deg,
    var(--color-navy-deep) 0%,
    var(--color-navy-medium) 45%,
    #152245 100%
  );
}

.rda-hero__slide--col2 {
  background: linear-gradient(
    160deg,
    #160d2e 0%,
    #1a1640 40%,
    var(--color-navy-base) 100%
  );
}

.rda-hero__slide--col3 {
  background: linear-gradient(
    160deg,
    var(--color-navy-medium) 0%,
    #0d2244 50%,
    #0a1930 100%
  );
}

/* ── Imagen de fondo ───────────────────────────────────────────────────────── */

.rda-hero__img-wrap {
  position: absolute;
  inset: 0;
}

/* picture es inline por defecto — debe ser bloque para heredar dimensiones */
.rda-hero__img-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.rda-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Móvil: sujetos en la parte superior de las imágenes portrait → preservar top */
  object-position: center top;
}

/* ── Placeholder premium con luz y patrón de cuentas ──────────────────────── */

.rda-hero__placeholder {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Glow dorado centrado — slide 1 */
.rda-hero__slide--col1 .rda-hero__placeholder {
  background-image:
    radial-gradient(ellipse 70% 50% at 35% 65%, rgba(201, 168, 76, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 35% 30% at 78% 28%, rgba(201, 168, 76, 0.09) 0%, transparent 60%),
    radial-gradient(circle, rgba(201, 168, 76, 0.04) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px;
  background-position: 0 0, 0 0, 0 0;
}

/* Tono violeta cálido — slide 2 */
.rda-hero__slide--col2 .rda-hero__placeholder {
  background-image:
    radial-gradient(ellipse 60% 45% at 50% 60%, rgba(201, 168, 76, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 25% 30%, rgba(180, 140, 200, 0.07) 0%, transparent 55%),
    radial-gradient(circle, rgba(201, 168, 76, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px;
}

/* Azul profundo — slide 3 */
.rda-hero__slide--col3 .rda-hero__placeholder {
  background-image:
    radial-gradient(ellipse 65% 50% at 60% 55%, rgba(201, 168, 76, 0.16) 0%, transparent 65%),
    radial-gradient(ellipse 30% 25% at 20% 75%, rgba(201, 168, 76, 0.07) 0%, transparent 50%),
    radial-gradient(circle, rgba(201, 168, 76, 0.04) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px;
  background-position: 0 0, 0 0, 14px 14px;
}

/* ── Overlay de gradiente ──────────────────────────────────────────────────── */

.rda-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 23, 51, 0.92) 0%,
    rgba(13, 27, 62, 0.55) 35%,
    rgba(13, 27, 62, 0.20) 65%,
    rgba(13, 27, 62, 0.05) 100%
  );
  pointer-events: none;
}

/* Overlay mínimo para slides claros: solo un suave fade inferior para profundidad.
   El texto usa colores oscuros (navy) — no se necesita oscurecer la imagen. */
.rda-hero__overlay--onlight {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(240, 232, 220, 0.45) 0%,
    transparent 50%
  );
  pointer-events: none;
}

/* ── Tema claro: texto navy sobre imágenes de fondo crema/blanco ───────────── */

.rda-hero__slide--theme-light .rda-hero__eyebrow {
  color: var(--color-gold-deep, #9a6f1e);
}

.rda-hero__slide--theme-light .rda-hero__eyebrow::before {
  background-color: var(--color-gold-deep, #9a6f1e);
}

.rda-hero__slide--theme-light .rda-hero__headline {
  color: var(--color-navy-base);
}

.rda-hero__slide--theme-light .rda-hero__subheadline {
  color: rgba(13, 27, 62, 0.68);
}

/* CTA primario en tema claro: navy sólido con texto dorado */
.rda-hero__slide--theme-light .rda-hero__cta--primary {
  color: var(--color-cream-light);
  background-color: var(--color-navy-base);
  border-color: var(--color-navy-base);
}

.rda-hero__slide--theme-light .rda-hero__cta--primary:hover,
.rda-hero__slide--theme-light .rda-hero__cta--primary:focus-visible {
  background-color: var(--color-gold-base);
  border-color: var(--color-gold-base);
  color: var(--color-navy-base);
}

/* CTA secundario en tema claro: navy con opacidad */
.rda-hero__slide--theme-light .rda-hero__cta--secondary {
  color: rgba(13, 27, 62, 0.70);
}

.rda-hero__slide--theme-light .rda-hero__cta--secondary:hover,
.rda-hero__slide--theme-light .rda-hero__cta--secondary:focus-visible {
  color: var(--color-navy-base);
}

/* ── Contenido del slide ───────────────────────────────────────────────────── */

.rda-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* 64px en móvil — posiciona el texto dentro de la zona de fondo natural de cada imagen.
     128px previos subían el bloque al área del sujeto (manos/caja), causando solapamiento. */
  padding-bottom: var(--space-3xl);
}

.rda-hero__inner {
  max-width: var(--container-base);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* ── Eyebrow ───────────────────────────────────────────────────────────────── */

.rda-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold-soft);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--duration-slow) var(--ease-out) 80ms,
    transform var(--duration-slow) var(--ease-out) 80ms;
}

/* Línea decorativa izquierda del eyebrow */
.rda-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background-color: var(--color-gold-base);
  flex-shrink: 0;
  opacity: 0.70;
}

.rda-hero__slide[aria-hidden="false"] .rda-hero__eyebrow {
  opacity: 1;
  transform: translateY(0);
}

/* ── Headline ──────────────────────────────────────────────────────────────── */

.rda-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 5rem);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-cream-light);
  margin-bottom: var(--space-md);
  max-width: 14ch;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--duration-slow) var(--ease-out) 180ms,
    transform var(--duration-slow) var(--ease-out) 180ms;
}

.rda-hero__slide[aria-hidden="false"] .rda-hero__headline {
  opacity: 1;
  transform: translateY(0);
}

/* ── Subheadline ───────────────────────────────────────────────────────────── */

.rda-hero__subheadline {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: rgba(245, 237, 216, 0.78);
  margin-bottom: var(--space-2xl);
  max-width: 40ch;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--duration-slow) var(--ease-out) 280ms,
    transform var(--duration-slow) var(--ease-out) 280ms;
}

.rda-hero__slide[aria-hidden="false"] .rda-hero__subheadline {
  opacity: 1;
  transform: translateY(0);
}

/* ── CTAs ──────────────────────────────────────────────────────────────────── */

.rda-hero__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--duration-slow) var(--ease-out) 380ms,
    transform var(--duration-slow) var(--ease-out) 380ms;
}

.rda-hero__slide[aria-hidden="false"] .rda-hero__ctas {
  opacity: 1;
  transform: translateY(0);
}

.rda-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-out);
  cursor: pointer;
}

/* CTA primario: outline dorado con fondo sutil */
.rda-hero__cta--primary {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-soft);
  border: 1px solid rgba(201, 168, 76, 0.70);
  padding: calc(var(--space-sm) + 2px) var(--space-xl);
  border-radius: var(--radius-sm);
  background-color: rgba(201, 168, 76, 0.06);
  min-height: 48px;
}

.rda-hero__cta--primary:hover,
.rda-hero__cta--primary:focus-visible {
  background-color: var(--color-gold-base);
  color: var(--color-navy-base);
  border-color: var(--color-gold-base);
}

.rda-hero__cta--primary:focus-visible {
  outline: 2px solid var(--color-gold-soft);
  outline-offset: 3px;
}

/* CTA secundario: link con flecha */
.rda-hero__cta--secondary {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--weight-light);
  color: rgba(245, 237, 216, 0.75);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.rda-hero__cta--secondary:hover,
.rda-hero__cta--secondary:focus-visible {
  color: var(--color-cream-light);
}

.rda-hero__cta--secondary:focus-visible {
  outline: 2px solid var(--color-gold-base);
  outline-offset: 3px;
  border-radius: 2px;
}

.rda-hero__cta-arrow {
  transition: transform var(--duration-base) var(--ease-out);
  font-size: 1rem;
}

.rda-hero__cta--secondary:hover .rda-hero__cta-arrow {
  transform: translateX(5px);
}

/* ── Indicadores (dots) ────────────────────────────────────────────────────── */

.rda-hero__indicators {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  z-index: 10;
}

.rda-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: rgba(201, 168, 76, 0.35);
  border: 1px solid rgba(201, 168, 76, 0.60);
  padding: 0;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  /* Área táctil mínima de 44px sin cambiar el tamaño visual */
  position: relative;
}

.rda-hero__dot::before {
  content: '';
  position: absolute;
  inset: -18px;
}

.rda-hero__dot--active {
  width: 20px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-gold-base);
  border-color: var(--color-gold-base);
}

.rda-hero__dot:not(.rda-hero__dot--active):hover {
  background-color: rgba(201, 168, 76, 0.60);
  transform: scale(1.3);
}

.rda-hero__dot:focus-visible {
  outline: 2px solid var(--color-gold-soft);
  outline-offset: 3px;
}

/* ── Indicador de scroll hacia abajo ──────────────────────────────────────── */

.rda-hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(201, 168, 76, 0.60);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.rda-hero__scroll-indicator-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, transparent, rgba(201, 168, 76, 0.50));
  animation: rda-scroll-line 2s ease-in-out infinite;
}

.rda-hero__scroll-indicator svg {
  animation: rda-scroll-bounce 2s ease-in-out infinite;
}

@keyframes rda-scroll-line {
  0%, 100% { opacity: 0.4; transform: scaleY(0.8); }
  50%       { opacity: 0.9; transform: scaleY(1); }
}

@keyframes rda-scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%       { transform: translateY(5px); opacity: 1; }
}

/* ── Flechas de navegación — solo desktop ──────────────────────────────────── */

.rda-hero__arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(201, 168, 76, 0.40);
  background-color: rgba(10, 23, 51, 0.35);
  color: var(--color-gold-soft);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-base) var(--ease-out);
  backdrop-filter: blur(10px);
}

.rda-hero__arrow--prev { left: var(--space-xl); }
.rda-hero__arrow--next { right: var(--space-xl); }

.rda-hero__arrow:hover {
  background-color: rgba(201, 168, 76, 0.15);
  border-color: var(--color-gold-base);
  color: var(--color-gold-base);
}

.rda-hero__arrow:focus-visible {
  outline: 2px solid var(--color-gold-base);
  outline-offset: 2px;
}

/* ── Desktop ───────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .rda-hero {
    /* Desktop: ajusta al ratio 16:9 de las imágenes de escritorio (1920×1080).
       min() evita que supere el 90% del viewport en monitores muy grandes. */
    height: min(90vh, calc(100vw * 9 / 16));
  }

  .rda-hero__slide {
    align-items: center;
  }

  /* Desktop: imágenes diseñadas con zona de texto izquierda y sujeto derecho → centrar */
  .rda-hero__img {
    object-position: center center;
  }

  .rda-hero__content {
    padding-bottom: 0;
  }

  .rda-hero__arrow {
    display: flex;
  }

  .rda-hero__indicators {
    bottom: var(--space-2xl);
    left: var(--space-3xl);
    transform: none;
  }

  .rda-hero__scroll-indicator {
    right: var(--space-2xl);
    bottom: var(--space-2xl);
  }

  .rda-hero__inner {
    padding-inline: var(--space-3xl);
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .rda-hero__slide {
    transition: none;
  }

  .rda-hero__eyebrow,
  .rda-hero__headline,
  .rda-hero__subheadline,
  .rda-hero__ctas {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .rda-hero__scroll-indicator-line,
  .rda-hero__scroll-indicator svg {
    animation: none;
  }
}