/* =========================
   HERO BASE
========================= */

.section-base--hero {
  padding: 0;
}

.hero-carousel {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  /* moderno y estable */
  overflow: hidden;

  background-color: var(--surface-dark);
  isolation: isolate;

  /* Absorb section-container--full properties */
  width: 100%;
  max-width: none;
  padding-inline: 0;
}


/* =========================
   SLIDES
========================= */

.hero-slide {
  position: absolute;
  inset: 0;

  display: grid;
  align-items: center;

  padding-block: clamp(var(--space-6), 6vh, var(--space-10));

  opacity: 0;
  pointer-events: none;
  z-index: 1;

  transition: opacity 1s var(--ease-smooth);
}

.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}


/* =========================
   BACKGROUND - Static (no zoom)
========================= */

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* No animation - static background */
}


/* =========================
   CONTENT
========================= */

.hero-content {
  position: relative;
  z-index: 5;
  color: var(--text-inverse);
}


/* =========================
   SLIDE-SPECIFIC ANIMATIONS
========================= */

/* Slide 1: Card enters from LEFT */
.hero-slide:nth-child(1) .hero-content {
  opacity: 0;
  transform: translateX(-100px);
  transition:
    opacity 0.8s var(--ease-smooth) 0.2s,
    transform 0.8s var(--ease-smooth) 0.2s;
}

.hero-slide:nth-child(1).active .hero-content {
  opacity: 1;
  transform: translateX(0);
}

/* Slide 2: Card enters from LEFT (igual que slide 3) */
.hero-slide:nth-child(2) .hero-content {
  opacity: 0;
  transform: translateX(-100px);
  transition:
    opacity 0.8s var(--ease-smooth) 0.2s,
    transform 0.8s var(--ease-smooth) 0.2s;
}

.hero-slide:nth-child(2).active .hero-content {
  opacity: 1;
  transform: translateX(0);
}

/* Slide 3: Card enters from LEFT */
.hero-slide:nth-child(3) .hero-content {
  opacity: 0;
  transform: translateX(-100px);
  transition:
    opacity 0.8s var(--ease-smooth) 0.2s,
    transform 0.8s var(--ease-smooth) 0.2s;
}

.hero-slide:nth-child(3).active .hero-content {
  opacity: 1;
  transform: translateX(0);
}


/* =========================
   HERO INTRO CARD
========================= */

.hero-intro-card {
  max-width: 42rem;

  background: rgba(var(--primary-rgb), 0.75);
  padding: clamp(var(--space-4), 3vh, var(--space-6));
  border-radius: var(--radius-xl);

  color: var(--text-inverse);
}

.hero-intro-card img {
  max-width: 250px;
  height: auto;
  display: block;
}

.hero-intro-card h1 {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
  font-weight: var(--weight-regular);
}


/* =========================
   HERO PURPOSE
========================= */

/* Slide 2 (purpose) — espeja slide 3 (advisory) */
.hero-slide--purpose {
  display: grid;
  align-items: center;
}

.hero-purpose {
  max-width: 24rem;
  background: var(--overlay-50);
  text-align: center;
  padding: clamp(var(--space-4), 3vh, var(--space-6));
  border-radius: 1.75rem;
  color: var(--text-inverse);
}

.hero-purpose h1 {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  font-weight: var(--weight-normal);
  color: var(--text-inverse);
  margin-bottom: 0;
}

.hero-purpose-btn {
  display: inline-block;
  margin-top: clamp(var(--space-3), 2vh, var(--space-5));
  padding: 0.85rem 1.8rem;
  background: var(--action-primary);
  color: var(--white);
  border-radius: 999px;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  transition: background var(--duration-base) var(--ease-standard);
}

.hero-purpose-btn:hover {
  background: var(--accent-hover);
}


/* =========================
   HERO ADVISORY
========================= */

.hero-slide--advisory {
  display: grid;
  align-items: center;
}

.hero-advisory-card {
  max-width: 24rem;

  background: var(--overlay-50);
  text-align: center;

  padding: clamp(var(--space-4), 3vh, var(--space-6));

  border-radius: 1.75rem;
  color: var(--text-inverse);
}

.hero-advisory-card h1 {
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
  margin-bottom: 0;
}

.hero-advisory-card p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.hero-advisory-btn {
  display: inline-block;
  margin-top: clamp(var(--space-3), 2vh, var(--space-5));

  padding: 0.85rem 1.8rem;

  background: var(--action-primary);
  color: var(--white);

  border-radius: 999px;
  font-weight: var(--weight-semibold);

  transition: background var(--duration-base) var(--ease-standard);
}

.hero-advisory-btn:hover {
  background: var(--accent-hover);
}


/* =========================
   CONTROLS
========================= */



.hero-controls {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(var(--space-4), 2vh, var(--space-5));
  z-index: 10;

}

.hero-controls-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;

}

.hero-tabs {
  display: flex;
  gap: var(--space-3);
}

.hero-tab {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);

  color: rgba(255, 255, 255, .6);

  border-bottom: 3px solid transparent;
  padding-bottom: var(--space-1);

  position: relative;
  overflow: hidden;

  transition:
    color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-smooth);
}

.hero-tab:hover {
  color: var(--text-inverse);
  transform: translateY(-2px);
}

.hero-tab.active {
  border-color: var(--action-primary);
  color: var(--text-inverse);
}

/* Progress bar animation */
.hero-tab::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: var(--progress, 0%);
  height: 3px;
  background: var(--action-primary);
  transition: width 7s linear;
}

.hero-tab.active::before {
  width: var(--progress, 0%);
}



/* =========================
   MOBILE RESPONSIVENESS
========================= */

@media (max-width: 48rem) {
  .hero-slide {
    /* Optimized for 360x780: reduce safe zones to prevent overlap */
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: 9rem;
    align-items: center;
  }

  .hero-intro-card,
  .hero-purpose,
  .hero-advisory-card {
    margin-inline: auto;
    width: 94%;
    max-width: 28rem;
    text-align: center;
    padding: var(--space-4);
    /* More compact padding */
  }

  .hero-intro-card img {
    max-width: 140px;
    /* Smaller logo for mobile to save space */
    margin-inline: auto;
    /* .flow handles the gap */
  }

  .hero-intro-card h1 {
    font-size: var(--text-sm);
    /* Critical: smaller font for long text in Slide 1 */
    line-height: 1.5;
  }

  .hero-purpose h1,
  .hero-advisory-card h1 {
    font-size: var(--text-lg);
    /* Balanced heading size */
    margin-bottom: var(--space-3);
    line-height: var(--leading-snug);
  }

  /* Specific adjustment for Slide 2 mobile if text is too long */
  .hero-purpose h1 {
    font-size: 1.05rem;
  }

  .hero-advisory-card p {
    font-size: var(--text-sm);
    opacity: 0.9;
  }

  .hero-purpose-btn,
  .hero-advisory-btn {
    font-size: 0.85rem;
    /* More compact for 360px screens */
    padding: 0.7rem 1.25rem;
    white-space: nowrap;
    /* Keep text in one row */
    margin-top: var(--space-3);
  }

  /* Controls optimization */
  .hero-controls {
    bottom: 1.5rem;
    /* Closer to edge to maximize content area */
  }

  .hero-controls-inner {
    justify-content: center;
  }

  .hero-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }

  .hero-tab {
    font-size: 0.8rem;
    padding-bottom: 0.2rem;
  }

  /* Slide 2 (Propósito): Imagen específica para móvil */
  .hero-slide--purpose .hero-bg img {
    display: none;
  }

  .hero-slide--purpose .hero-bg {
    background-image: url("../assets/HeroIndex/slide2movil.webp");
    background-size: cover;
    background-position: center;
  }
}