/* =========================================================
   MOLDURAMA MX — MX HERO CORE OFICIAL
   Archivo único para todos los heroes:
   - .mx-hero        = madres / hubs
   - .mx-prod-header = hijas / producto
   - .mx-hero__bg    = imagen HTML real del hero

   Sin import. Sin functions.php. Sin reglas de contenido.
   ========================================================= */

:root{
  --mx-hero-max:1320px;
  --mx-hero-wrap:min(calc(100% - 48px),var(--mx-hero-max));
  --mx-hero-min:430px;
  --mx-hero-pad-top:56px;
  --mx-hero-pad-bottom:42px;
  --mx-hero-ink:#071a3d;
  --mx-hero-ink-2:#10213f;
  --mx-hero-muted:#475569;
  --mx-hero-accent:#dd9933;
  --mx-hero-accent-2:#f49b00;
  --mx-hero-green:#0fa64a;
  --mx-hero-green-dark:#07823e;
  --mx-hero-red:#ef3438;
  --mx-hero-line:rgba(15,23,42,.08);
  --mx-hero-overlay:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.93) 44%,rgba(255,255,255,.62) 72%,rgba(255,255,255,.28) 100%);
  --mx-hero-pos:center right;
}

/* =========================================================
   01. HERO BASE
   ========================================================= */

.mx-hero,
.mx-prod-header{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-height:var(--mx-hero-min)!important;
  margin:0!important;
  padding:var(--mx-hero-pad-top) 0 var(--mx-hero-pad-bottom)!important;
  display:flex!important;
  align-items:center!important;
  color:var(--mx-hero-ink)!important;
  background:#fff!important;
  border:0!important;
}

.mx-hero::before,
.mx-prod-header::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:var(--mx-hero-overlay)!important;
}

.mx-hero::after,
.mx-prod-header::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:3!important;
  height:1px!important;
  pointer-events:none!important;
  background:var(--mx-hero-line)!important;
}

.mx-hero > .mx-hero__bg,
.mx-prod-header > .mx-hero__bg{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  display:block!important;
  object-fit:cover!important;
  object-position:var(--mx-hero-pos)!important;
  pointer-events:none!important;
  user-select:none!important;
}

/* =========================================================
   02. CONTENEDOR
   ========================================================= */

.mx-hero > .mx-wrap,
.mx-hero .mx-wrap,
.mx-prod-header > .mx-prod-wrap,
.mx-prod-header .mx-prod-wrap,
.mx-prod-header > .mx-wrap,
.mx-prod-header .mx-wrap{
  position:relative!important;
  z-index:2!important;
  width:var(--mx-hero-wrap)!important;
  max-width:var(--mx-hero-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
  min-width:0!important;
}

.mx-hero__content,
.mx-prod-header__content,
.mx-hero .mx-content,
.mx-prod-header .mx-content{
  max-width:860px!important;
  min-width:0!important;
}

/* =========================================================
   03. BREADCRUMB — ordenado horizontal
   ========================================================= */

.mx-hero .mx-breadcrumb,
.mx-hero .mx-prod-breadcrumb,
.mx-prod-header .mx-breadcrumb,
.mx-prod-header .mx-prod-breadcrumb{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  margin:0 0 20px!important;
  padding:0!important;
  color:rgba(7,26,61,.68)!important;
  font-size:13px!important;
  line-height:1.25!important;
  font-weight:850!important;
  list-style:none!important;
  white-space:normal!important;
}

.mx-hero .mx-breadcrumb a,
.mx-hero .mx-prod-breadcrumb a,
.mx-prod-header .mx-breadcrumb a,
.mx-prod-header .mx-prod-breadcrumb a,
.mx-hero .mx-breadcrumb span,
.mx-hero .mx-prod-breadcrumb span,
.mx-prod-header .mx-breadcrumb span,
.mx-prod-header .mx-prod-breadcrumb span{
  display:inline-flex!important;
  width:auto!important;
  max-width:none!important;
  align-items:center!important;
  color:inherit!important;
  text-decoration:none!important;
}

.mx-hero .mx-breadcrumb a,
.mx-hero .mx-prod-breadcrumb a,
.mx-prod-header .mx-breadcrumb a,
.mx-prod-header .mx-prod-breadcrumb a{
  border-bottom:1px solid rgba(221,153,51,.55)!important;
}

.mx-hero .mx-breadcrumb a:hover,
.mx-hero .mx-prod-breadcrumb a:hover,
.mx-prod-header .mx-breadcrumb a:hover,
.mx-prod-header .mx-prod-breadcrumb a:hover{
  color:#7c4a03!important;
  border-bottom-color:var(--mx-hero-accent)!important;
}

/* =========================================================
   04. KICKER / TÍTULO / LEAD
   ========================================================= */

.mx-hero .mx-kicker,
.mx-hero .mx-small-kicker,
.mx-prod-header .mx-prod-kicker,
.mx-prod-header .mx-kicker,
.mx-prod-header .mx-small-kicker{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0 0 10px!important;
  color:var(--mx-hero-green-dark)!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
}

.mx-hero .mx-kicker::before,
.mx-hero .mx-small-kicker::before,
.mx-prod-header .mx-prod-kicker::before,
.mx-prod-header .mx-kicker::before,
.mx-prod-header .mx-small-kicker::before{
  content:""!important;
  width:10px!important;
  height:10px!important;
  flex:0 0 10px!important;
  display:inline-block!important;
  background:var(--mx-hero-accent-2)!important;
  border-radius:2px!important;
}

.mx-hero .mx-title,
.mx-prod-header .mx-prod-title,
.mx-prod-header .mx-title,
.mx-hero h1,
.mx-prod-header h1{
  max-width:860px!important;
  margin:0!important;
  color:var(--mx-hero-ink)!important;
  font-size:clamp(38px,4.25vw,62px)!important;
  line-height:1.04!important;
  font-weight:950!important;
  letter-spacing:-.05em!important;
  text-align:left!important;
  text-wrap:pretty!important;
  text-shadow:none!important;
}

.mx-hero .mx-subtitle,
.mx-hero .mx-lead,
.mx-prod-header .mx-prod-lead,
.mx-prod-header .mx-subtitle,
.mx-prod-header .mx-lead{
  max-width:78ch!important;
  margin:16px 0 0!important;
  color:var(--mx-hero-ink)!important;
  font-size:16.5px!important;
  line-height:1.58!important;
  font-weight:700!important;
  text-align:left!important;
  white-space:normal!important;
  word-spacing:normal!important;
  letter-spacing:normal!important;
  text-wrap:pretty!important;
  opacity:1!important;
  text-shadow:none!important;
}

/* =========================================================
   05. BOTONES DEL HERO — visual anterior restaurado
   ========================================================= */

.mx-hero .mx-actions,
.mx-prod-header .mx-prod-actions,
.mx-prod-header .mx-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:16px!important;
  margin-top:26px!important;
  max-width:100%!important;
}

.mx-hero .mx-actions .mx-btn,
.mx-prod-header .mx-prod-actions .mx-prod-btn,
.mx-prod-header .mx-actions .mx-btn{
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  min-height:64px!important;
  padding:0 28px 2px!important;
  border-radius:17px!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:950!important;
  text-decoration:none!important;
  text-align:center!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease!important;
}

.mx-hero .mx-actions .mx-btn:hover,
.mx-prod-header .mx-prod-actions .mx-prod-btn:hover,
.mx-prod-header .mx-actions .mx-btn:hover{
  transform:translateY(-2px)!important;
}

/* WhatsApp */
.mx-hero .mx-actions .mx-btn--primary,
.mx-prod-header .mx-prod-actions .mx-prod-btn--primary,
.mx-prod-header .mx-actions .mx-btn--primary,
.mx-hero .mx-actions a[href*="wa.me"],
.mx-prod-header .mx-prod-actions a[href*="wa.me"],
.mx-hero .mx-actions a[href*="whatsapp"],
.mx-prod-header .mx-prod-actions a[href*="whatsapp"]{
  min-width:300px!important;
  background:linear-gradient(135deg,var(--mx-hero-green) 0%,var(--mx-hero-green-dark) 100%)!important;
  border:2px solid var(--mx-hero-green)!important;
  color:#fff!important;
  box-shadow:0 16px 34px rgba(15,166,74,.32),0 0 0 6px rgba(15,166,74,.10)!important;
}

.mx-hero .mx-actions .mx-btn--primary::before,
.mx-prod-header .mx-prod-actions .mx-prod-btn--primary::before,
.mx-prod-header .mx-actions .mx-btn--primary::before,
.mx-hero .mx-actions a[href*="wa.me"]::before,
.mx-prod-header .mx-prod-actions a[href*="wa.me"]::before,
.mx-hero .mx-actions a[href*="whatsapp"]::before,
.mx-prod-header .mx-prod-actions a[href*="whatsapp"]::before{
  content:""!important;
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background-color:#fff!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:26px 26px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%2307823e' d='M16.01 3.2C9.05 3.2 3.4 8.78 3.4 15.65c0 2.25.61 4.45 1.78 6.38L3.3 28.8l6.98-1.82a12.7 12.7 0 0 0 5.73 1.37c6.96 0 12.61-5.58 12.61-12.45S22.97 3.2 16.01 3.2Zm0 22.98c-1.84 0-3.65-.49-5.22-1.42l-.37-.22-4.13 1.08 1.1-4-.24-.39a10.17 10.17 0 0 1-1.56-5.38c0-5.66 4.68-10.27 10.42-10.27S26.43 10.2 26.43 15.86s-4.68 10.32-10.42 10.32Zm5.72-7.72c-.31-.15-1.85-.91-2.14-1.01-.29-.1-.5-.15-.71.15-.21.31-.81 1.01-.99 1.22-.18.21-.37.23-.68.08-.31-.15-1.31-.48-2.49-1.53-.92-.82-1.54-1.83-1.72-2.14-.18-.31-.02-.48.14-.63.14-.14.31-.37.47-.55.16-.18.21-.31.31-.52.1-.21.05-.39-.03-.55-.08-.15-.71-1.71-.98-2.34-.26-.62-.52-.53-.71-.54h-.61c-.21 0-.55.08-.84.39-.29.31-1.1 1.07-1.1 2.62s1.13 3.05 1.29 3.26c.16.21 2.22 3.38 5.38 4.74.75.32 1.34.52 1.8.66.76.24 1.45.21 2 .13.61-.09 1.85-.76 2.11-1.49.26-.73.26-1.36.18-1.49-.08-.13-.29-.21-.6-.36Z'/%3E%3C/svg%3E")!important;
}

/* Teléfono */
.mx-hero .mx-actions .mx-btn--dark,
.mx-prod-header .mx-prod-actions .mx-prod-btn--dark,
.mx-prod-header .mx-actions .mx-btn--dark,
.mx-hero .mx-actions a[href^="tel:"],
.mx-prod-header .mx-prod-actions a[href^="tel:"]{
  min-width:300px!important;
  background:var(--mx-hero-ink)!important;
  border:2px solid var(--mx-hero-ink)!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(7,26,61,.18)!important;
}

.mx-hero .mx-actions .mx-btn--dark:hover,
.mx-prod-header .mx-prod-actions .mx-prod-btn--dark:hover,
.mx-prod-header .mx-actions .mx-btn--dark:hover,
.mx-hero .mx-actions a[href^="tel:"]:hover,
.mx-prod-header .mx-prod-actions a[href^="tel:"]:hover{
  background:var(--mx-hero-ink-2)!important;
  border-color:var(--mx-hero-ink-2)!important;
  color:#fff!important;
}

/* Botón secundario rojo / datos */
.mx-hero .mx-actions .mx-btn--light,
.mx-hero .mx-actions .mx-btn--outline,
.mx-prod-header .mx-prod-actions .mx-prod-btn--light,
.mx-prod-header .mx-prod-actions .mx-prod-btn--outline,
.mx-prod-header .mx-actions .mx-btn--light,
.mx-prod-header .mx-actions .mx-btn--outline{
  min-width:285px!important;
  background:#fff!important;
  border:2px solid var(--mx-hero-red)!important;
  color:var(--mx-hero-red)!important;
  box-shadow:0 12px 26px rgba(239,52,56,.13),0 0 0 6px rgba(239,52,56,.06)!important;
}

.mx-hero .mx-actions .mx-btn--light::before,
.mx-hero .mx-actions .mx-btn--outline::before,
.mx-prod-header .mx-prod-actions .mx-prod-btn--light::before,
.mx-prod-header .mx-prod-actions .mx-prod-btn--outline::before,
.mx-prod-header .mx-actions .mx-btn--light::before,
.mx-prod-header .mx-actions .mx-btn--outline::before{
  content:"→"!important;
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#fff3f3!important;
  border:1px solid rgba(239,52,56,.28)!important;
  color:var(--mx-hero-red)!important;
  font-size:27px!important;
  font-weight:950!important;
  line-height:1!important;
}

.mx-hero .mx-actions .mx-btn--light:hover,
.mx-hero .mx-actions .mx-btn--outline:hover,
.mx-prod-header .mx-prod-actions .mx-prod-btn--light:hover,
.mx-prod-header .mx-prod-actions .mx-prod-btn--outline:hover,
.mx-prod-header .mx-actions .mx-btn--light:hover,
.mx-prod-header .mx-actions .mx-btn--outline:hover{
  background:var(--mx-hero-red)!important;
  border-color:var(--mx-hero-red)!important;
  color:#fff!important;
}

/* Evita que el botón teléfono herede iconos equivocados */
.mx-hero .mx-actions .mx-btn--dark::before,
.mx-prod-header .mx-prod-actions .mx-prod-btn--dark::before,
.mx-prod-header .mx-actions .mx-btn--dark::before,
.mx-hero .mx-actions a[href^="tel:"]::before,
.mx-prod-header .mx-prod-actions a[href^="tel:"]::before{
  content:none!important;
  display:none!important;
}

/* =========================================================
   06. HERO CENTRADO
   ========================================================= */

.mx-hero--center .mx-hero__content{
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

.mx-hero--center .mx-title,
.mx-hero--center .mx-subtitle,
.mx-hero--center .mx-lead{
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

.mx-hero--center .mx-actions{
  justify-content:center!important;
}

/* =========================================================
   07. RESPONSIVE
   ========================================================= */

@media(max-width:1180px){
  :root{
    --mx-hero-wrap:calc(100% - 32px);
  }

  .mx-hero .mx-actions .mx-btn--primary,
  .mx-prod-header .mx-prod-actions .mx-prod-btn--primary,
  .mx-prod-header .mx-actions .mx-btn--primary,
  .mx-hero .mx-actions a[href*="wa.me"],
  .mx-prod-header .mx-prod-actions a[href*="wa.me"],
  .mx-hero .mx-actions a[href*="whatsapp"],
  .mx-prod-header .mx-prod-actions a[href*="whatsapp"]{
    min-width:340px!important;
  }

  .mx-hero .mx-actions .mx-btn--dark,
  .mx-prod-header .mx-prod-actions .mx-prod-btn--dark,
  .mx-hero .mx-actions a[href^="tel:"],
  .mx-prod-header .mx-prod-actions a[href^="tel:"],
  .mx-hero .mx-actions .mx-btn--light,
  .mx-hero .mx-actions .mx-btn--outline,
  .mx-prod-header .mx-prod-actions .mx-prod-btn--light,
  .mx-prod-header .mx-prod-actions .mx-prod-btn--outline{
    min-width:260px!important;
  }
}

@media(max-width:980px){
  :root{
    --mx-hero-wrap:calc(100% - 24px);
    --mx-hero-min:390px;
    --mx-hero-pad-top:42px;
    --mx-hero-pad-bottom:32px;
    --mx-hero-overlay:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.90) 100%);
    --mx-hero-pos:center center;
  }

  .mx-hero .mx-actions,
  .mx-prod-header .mx-prod-actions,
  .mx-prod-header .mx-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    align-items:stretch!important;
  }

  .mx-hero .mx-actions .mx-btn,
  .mx-prod-header .mx-prod-actions .mx-prod-btn,
  .mx-prod-header .mx-actions .mx-btn{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
}

@media(max-width:560px){
  :root{
    --mx-hero-wrap:calc(100% - 22px);
    --mx-hero-min:520px;
    --mx-hero-pad-top:30px;
    --mx-hero-pad-bottom:24px;
    --mx-hero-overlay:linear-gradient(180deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.95) 55%,rgba(255,255,255,.82) 100%);
  }

  .mx-hero,
  .mx-prod-header{
    align-items:flex-start!important;
  }

  .mx-hero .mx-breadcrumb,
  .mx-hero .mx-prod-breadcrumb,
  .mx-prod-header .mx-breadcrumb,
  .mx-prod-header .mx-prod-breadcrumb{
    gap:6px!important;
    font-size:12.5px!important;
    margin-bottom:18px!important;
  }

  .mx-hero .mx-title,
  .mx-prod-header .mx-prod-title,
  .mx-prod-header .mx-title,
  .mx-hero h1,
  .mx-prod-header h1{
    font-size:31px!important;
    line-height:1.08!important;
    letter-spacing:-.038em!important;
  }

  .mx-hero .mx-subtitle,
  .mx-hero .mx-lead,
  .mx-prod-header .mx-prod-lead,
  .mx-prod-header .mx-subtitle,
  .mx-prod-header .mx-lead{
    font-size:14.8px!important;
    line-height:1.52!important;
  }

  .mx-hero .mx-actions .mx-btn,
  .mx-prod-header .mx-prod-actions .mx-prod-btn,
  .mx-prod-header .mx-actions .mx-btn{
    min-height:62px!important;
    padding:0 14px!important;
    font-size:14.5px!important;
    white-space:normal!important;
  }

  .mx-hero .mx-actions .mx-btn::before,
  .mx-prod-header .mx-prod-actions .mx-prod-btn::before,
  .mx-prod-header .mx-actions .mx-btn::before{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
    background-size:24px 24px!important;
  }
}

@media(max-width:380px){
  :root{
    --mx-hero-wrap:calc(100% - 16px);
  }
}