/* =========================================================
   INTERNAL HEROES — SISTEMA ÚNICO HOMOLOGADO
   Controla heroes internos:
   - Somos
   - Farmacovigilancia
   - Bioequivalentes
   - Plan Más Salud
   - Trabaja / Noticias
========================================================= */

/* =========================================================
   1. CONTENEDOR PRINCIPAL DEL HERO
========================================================= */

.hero-hero.hero-hero--internal,
.page-hero-farmacovigilancia,
.page-hero-bioequivalentes,
.page-hero-plan-salud,
.page-hero-trabaja,
.page-hero-noticias,
.page-somos .hero-hero,
.page-somos .somos-hero {
  position: relative !important;
  overflow: hidden !important;

  min-height: clamp(320px, 42vh, 430px) !important;
  padding: 28px 0 !important;

  display: grid !important;
  align-items: center !important;
  justify-items: center !important;

  background: none !important;
}

/* =========================================================
   2. CAPA DE IMAGEN / MEDIA
========================================================= */

.hero-hero.hero-hero--internal .hero-media,
.page-hero-farmacovigilancia .hero-media,
.page-hero-bioequivalentes .hero-media,
.page-hero-plan-salud .hero-media,
.page-hero-trabaja .hero-media,
.page-hero-noticias .hero-media,
.page-somos .hero-hero .hero-media,
.page-somos .somos-hero .hero-media {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  z-index: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Evita pseudo overlays viejos heredados */
.hero-hero.hero-hero--internal .hero-media::before,
.page-hero-farmacovigilancia .hero-media::before,
.page-hero-bioequivalentes .hero-media::before,
.page-hero-plan-salud .hero-media::before,
.page-hero-trabaja .hero-media::before,
.page-hero-noticias .hero-media::before,
.page-somos .hero-hero .hero-media::before,
.page-somos .somos-hero .hero-media::before {
  content: none !important;
  display: none !important;
}

/* Imagen del hero */
.hero-hero.hero-hero--internal .hero-img,
.page-hero-farmacovigilancia .hero-img,
.page-hero-bioequivalentes .hero-img,
.page-hero-plan-salud .hero-img,
.page-hero-trabaja .hero-img,
.page-hero-noticias .hero-img,
.page-somos .hero-hero .hero-img,
.page-somos .somos-hero .hero-img {
  position: absolute !important;
  inset: 0 !important;

  left: 0 !important;
  top: 0 !important;
  transform: none !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  z-index: 1 !important;
}

/* =========================================================
   3. OVERLAY UNIFICADO
========================================================= */

.hero-hero.hero-hero--internal .hero-overlay,
.hero-hero.hero-hero--internal .hero-overlay--internal,
.page-hero-farmacovigilancia .hero-overlay,
.page-hero-farmacovigilancia .hero-overlay--internal,
.page-hero-bioequivalentes .hero-overlay,
.page-hero-plan-salud .hero-overlay,
.page-hero-trabaja .hero-overlay,
.page-hero-noticias .hero-overlay,
.page-somos .hero-hero .hero-overlay,
.page-somos .somos-hero .hero-overlay {
  position: absolute !important;
  inset: 0 !important;

  z-index: 2 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      90deg,
      rgba(11, 31, 94, 0.78) 0%,
      rgba(11, 31, 94, 0.62) 46%,
      rgba(11, 31, 94, 0.50) 72%,
      rgba(11, 31, 94, 0.38) 100%
    ) !important;
}

/* Overlay más suave para Somos, porque suele usar imagen más clara */
.page-somos .hero-hero .hero-overlay,
.page-somos .somos-hero .hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(8, 43, 122, 0.58) 0%,
      rgba(8, 43, 122, 0.46) 45%,
      rgba(8, 43, 122, 0.34) 100%
    ) !important;
}

/* =========================================================
   4. CONTENIDO CENTRADO
========================================================= */

.hero-hero.hero-hero--internal .hero-content,
.hero-hero.hero-hero--internal .hero-content.container,
.page-hero-farmacovigilancia .hero-content,
.page-hero-farmacovigilancia .hero-content.container,
.page-hero-bioequivalentes .hero-content,
.page-hero-bioequivalentes .hero-content.container,
.page-hero-plan-salud .hero-content,
.page-hero-plan-salud .hero-content.container,
.page-hero-trabaja .hero-content,
.page-hero-trabaja .hero-content.container,
.page-hero-noticias .hero-content,
.page-hero-noticias .hero-content.container,
.page-somos .hero-hero .hero-content,
.page-somos .hero-hero .hero-content.container,
.page-somos .somos-hero .hero-content,
.page-somos .somos-hero .hero-content.container {
  position: relative !important;
  z-index: 3 !important;

  width: min(100% - 32px, 900px) !important;
  max-width: 900px !important;

  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;

  padding-left: 16px !important;
  padding-right: 16px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}

/* Wrapper interno cuando exista */
.hero-hero.hero-hero--internal .hero-inner-content,
.page-hero-farmacovigilancia .hero-inner-content,
.page-hero-bioequivalentes .hero-inner-content,
.page-hero-plan-salud .hero-inner-content,
.page-hero-trabaja .hero-inner-content,
.page-hero-noticias .hero-inner-content,
.page-somos .hero-inner-content {
  width: 100% !important;
  max-width: 900px !important;

  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}

/* =========================================================
   5. KICKER / BADGE
========================================================= */

.hero-hero.hero-hero--internal .hero-kicker,
.hero-hero.hero-hero--internal .hero-kicker--badge,
.page-hero-farmacovigilancia .hero-kicker,
.page-hero-farmacovigilancia .hero-kicker--badge,
.page-hero-bioequivalentes .hero-kicker,
.page-hero-plan-salud .hero-kicker,
.page-hero-trabaja .hero-kicker,
.page-hero-noticias .hero-kicker,
.page-somos .hero-kicker,
.page-somos .eyebrow,
.page-somos .section-label {
  align-self: center !important;

  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;

  text-align: center !important;
}

/* Badge amarillo */
.hero-hero.hero-hero--internal .hero-kicker--badge,
.page-hero-farmacovigilancia .hero-kicker--badge,
.page-hero-bioequivalentes .hero-kicker--badge,
.page-hero-plan-salud .hero-kicker--badge,
.page-hero-trabaja .hero-kicker--badge,
.page-hero-noticias .hero-kicker--badge {
  background:
    linear-gradient(
      180deg,
      rgba(255, 199, 44, 0.98),
      rgba(229, 168, 35, 0.98)
    ) !important;

  color: #0b1220 !important;
  box-shadow: 0 8px 20px rgba(229, 168, 35, 0.12) !important;
}

/* =========================================================
   6. TÍTULO
========================================================= */

.hero-hero.hero-hero--internal .hero-title,
.page-hero-farmacovigilancia .hero-title,
.page-hero-bioequivalentes .hero-title,
.page-hero-plan-salud .hero-title,
.page-hero-trabaja .hero-title,
.page-hero-noticias .hero-title,
.page-somos .hero-title,
.page-somos .somos-hero h1 {
  color: #fff !important;

  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;

  max-width: 16ch !important;

  text-align: center !important;
  text-wrap: balance;

  font-size: clamp(2.35rem, 4vw, 4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
}

/* Títulos largos */
.page-hero-bioequivalentes .hero-title,
.page-hero-plan-salud .hero-title,
.page-somos .somos-hero h1 {
  max-width: 22ch !important;
}

/* Farmacovigilancia mantiene lectura compacta */
.page-hero-farmacovigilancia .hero-title {
  max-width: 13ch !important;
}

/* =========================================================
   7. SUBTÍTULO
========================================================= */

.hero-hero.hero-hero--internal .hero-sub,
.page-hero-farmacovigilancia .hero-sub,
.page-hero-bioequivalentes .hero-sub,
.page-hero-plan-salud .hero-sub,
.page-hero-trabaja .hero-sub,
.page-hero-noticias .hero-sub,
.page-somos .hero-sub,
.page-somos .somos-hero p {
  color: rgba(255, 255, 255, 0.94) !important;

  max-width: 60ch !important;

  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;

  text-align: center !important;

  font-size: clamp(1rem, 1.15vw, 1.14rem) !important;
  line-height: 1.65 !important;
}

/* Farmacovigilancia subtítulo compacto */
.page-hero-farmacovigilancia .hero-sub {
  max-width: 46ch !important;
}

/* =========================================================
   8. CTAS / BOTONES
========================================================= */

.hero-hero.hero-hero--internal .hero-ctas,
.page-hero-farmacovigilancia .hero-ctas,
.page-hero-bioequivalentes .hero-ctas,
.page-hero-plan-salud .hero-ctas,
.page-hero-trabaja .hero-ctas,
.page-hero-noticias .hero-ctas,
.page-somos .hero-ctas,
.page-somos .hero-actions,
.page-somos .actions,
.page-somos .cta-group {
  width: 100% !important;

  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 16px !important;
  margin-top: 28px !important;
}

.hero-hero.hero-hero--internal .hero-ctas .btn,
.page-hero-farmacovigilancia .hero-ctas .btn,
.page-hero-bioequivalentes .hero-ctas .btn,
.page-hero-plan-salud .hero-ctas .btn,
.page-hero-trabaja .hero-ctas .btn,
.page-hero-noticias .hero-ctas .btn,
.page-somos .hero-ctas .btn,
.page-somos .hero-actions .btn,
.page-somos .actions .btn,
.page-somos .cta-group .btn {
  min-width: 170px !important;
  justify-content: center !important;
}

/* Ghost button sobre fondo oscuro */
.hero-hero.hero-hero--internal .hero-ctas .btn.ghost,
.page-hero-farmacovigilancia .hero-ctas .btn.ghost,
.page-hero-bioequivalentes .hero-ctas .btn.ghost,
.page-hero-plan-salud .hero-ctas .btn.ghost,
.page-hero-trabaja .hero-ctas .btn.ghost,
.page-hero-noticias .hero-ctas .btn.ghost {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.36) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.hero-hero.hero-hero--internal .hero-ctas .btn.ghost:hover,
.page-hero-farmacovigilancia .hero-ctas .btn.ghost:hover,
.page-hero-bioequivalentes .hero-ctas .btn.ghost:hover,
.page-hero-plan-salud .hero-ctas .btn.ghost:hover,
.page-hero-trabaja .hero-ctas .btn.ghost:hover,
.page-hero-noticias .hero-ctas .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.56) !important;
}

/* =========================================================
   9. RESPONSIVE
========================================================= */

@media (max-width: 900px) {
  .hero-hero.hero-hero--internal,
  .page-hero-farmacovigilancia,
  .page-hero-bioequivalentes,
  .page-hero-plan-salud,
  .page-hero-trabaja,
  .page-hero-noticias,
  .page-somos .hero-hero,
  .page-somos .somos-hero {
    min-height: 340px !important;
    padding: 24px 0 !important;
  }

  .hero-hero.hero-hero--internal .hero-content,
  .page-hero-farmacovigilancia .hero-content,
  .page-hero-bioequivalentes .hero-content,
  .page-hero-plan-salud .hero-content,
  .page-hero-trabaja .hero-content,
  .page-hero-noticias .hero-content,
  .page-somos .hero-content,
  .page-somos .somos-hero .hero-content {
    width: min(100% - 28px, 760px) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero-hero.hero-hero--internal .hero-title,
  .page-hero-farmacovigilancia .hero-title,
  .page-hero-bioequivalentes .hero-title,
  .page-hero-plan-salud .hero-title,
  .page-hero-trabaja .hero-title,
  .page-hero-noticias .hero-title,
  .page-somos .hero-title,
  .page-somos .somos-hero h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 7vw, 3rem) !important;
  }

  .hero-hero.hero-hero--internal .hero-sub,
  .page-hero-farmacovigilancia .hero-sub,
  .page-hero-bioequivalentes .hero-sub,
  .page-hero-plan-salud .hero-sub,
  .page-hero-trabaja .hero-sub,
  .page-hero-noticias .hero-sub,
  .page-somos .hero-sub,
  .page-somos .somos-hero p {
    max-width: 38ch !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 640px) {
  .hero-hero.hero-hero--internal,
  .page-hero-farmacovigilancia,
  .page-hero-bioequivalentes,
  .page-hero-plan-salud,
  .page-hero-trabaja,
  .page-hero-noticias,
  .page-somos .hero-hero,
  .page-somos .somos-hero {
    min-height: 320px !important;
  }

  .hero-hero.hero-hero--internal .hero-title,
  .page-hero-farmacovigilancia .hero-title,
  .page-hero-bioequivalentes .hero-title,
  .page-hero-plan-salud .hero-title,
  .page-hero-trabaja .hero-title,
  .page-hero-noticias .hero-title,
  .page-somos .hero-title,
  .page-somos .somos-hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
  }

  .hero-hero.hero-hero--internal .hero-ctas,
  .page-hero-farmacovigilancia .hero-ctas,
  .page-hero-bioequivalentes .hero-ctas,
  .page-hero-plan-salud .hero-ctas,
  .page-hero-trabaja .hero-ctas,
  .page-hero-noticias .hero-ctas,
  .page-somos .hero-ctas,
  .page-somos .hero-actions,
  .page-somos .actions,
  .page-somos .cta-group {
    gap: 10px !important;
  }

  .hero-hero.hero-hero--internal .hero-ctas .btn,
  .page-hero-farmacovigilancia .hero-ctas .btn,
  .page-hero-bioequivalentes .hero-ctas .btn,
  .page-hero-plan-salud .hero-ctas .btn,
  .page-hero-trabaja .hero-ctas .btn,
  .page-hero-noticias .hero-ctas .btn,
  .page-somos .hero-ctas .btn,
  .page-somos .hero-actions .btn,
  .page-somos .actions .btn,
  .page-somos .cta-group .btn {
    min-width: 148px !important;
  }
}