/* ==============================
   SERVICIOS / MERCADOS
   Banner dinámico vía: --hero-bg (inline)
   OBJETIVO: imagen completa (contain) + fondo BLANCO real (sin “marco gris”)
   ============================== */

/* 0) Por si el theme pinta el wrapper general de page-title */
body .page-title.hero-mercado{
  --hero-h: clamp(360px, 45vh, 520px);

  min-height: var(--hero-h);
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;

  position: relative;
  z-index: 1;

  /* ✅ MUY IMPORTANTE: el blanco tiene que ser real, no transparente */
  background-color: #fff !important;

  /* ✅ Reseteos típicos del theme */
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;

  /* Si el theme mete padding que deja ver el “marco” */
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  /* ✅ Imagen completa */
  background: var(--hero-bg) right center / contain no-repeat #fff !important;
  background-blend-mode: normal !important;
}

/* 1) Mata overlays del theme */
body .page-title.hero-mercado::before,
body .page-title.hero-mercado::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* 2) Si el theme mete capas internas */
body .page-title.hero-mercado .overlay,
body .page-title.hero-mercado .img-overlay,
body .page-title.hero-mercado .page-title-overlay,
body .page-title.hero-mercado .hero-overlay{
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* 3) ✅ Anti-“marco gris”: fuerza blanco en los contenedores internos (a veces el gris viene de .container) */
body .page-title.hero-mercado > .container,
body .page-title.hero-mercado > .container > .row,
body .page-title.hero-mercado > .container > .row > [class*="col-"]{
  background: transparent !important;
}

/* Título */
body .page-title.hero-mercado .hero-mercado__title{
  text-shadow: 1px 1px 2px black;
}

/* Móvil/Tablet */
@media (max-width: 991.98px){
  body .page-title.hero-mercado{
    background: var(--hero-bg) center center / contain no-repeat #fff !important;
  }
}

/* Móvil chico: más alto */
@media (max-width: 575.98px){
  body .page-title.hero-mercado{
    --hero-h: clamp(340px, 52vh, 560px);
  }
}

/* ® superíndice */
.reg-sup{
  font-size: .72em;
  vertical-align: super;
  line-height: 0;
}