/* =========================================================================
   MatzApp — Slider HERO para MÓVIL (reemplaza a RevSlider en pantallas ≤767px)
   RevSlider "slider2" no funciona bien en móvil (grid retrato 480x720 con
   imágenes panorámicas 1920x556 y textos de 54px). Aquí se construye un hero
   propio, responsive y liviano (HTML/CSS/JS), con los PNG de producto reales.
   Update-safe: solo child theme. Se inyecta junto al RevSlider y se muestra por
   CSS solo en móvil; el RevSlider se oculta en móvil.
   ========================================================================= */

.matz-mhero{ display:none; }

/* En móvil: mostrar el hero propio y ocultar el RevSlider (wrapper de Visual Composer) */
@media (max-width:767px){
    .matz-mhero{ display:block; }
    .wpb_revslider_element,
    .rev_slider_wrapper,
    rs-module-wrap{ display:none !important; }
}

/* ------------------------------------------------------------------ */
.matz-mhero{
    --navy:#2e448e; --dark:#20305f; --steel:#476faa; --red:#ff5b5b;
    position:relative;
    width:100%;
    margin:0 0 14px;
    -webkit-tap-highlight-color:transparent;
}
.matz-mhero__track{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.matz-mhero__track::-webkit-scrollbar{ display:none; }

.matz-mhero__slide{
    position:relative;
    flex:0 0 100%;
    scroll-snap-align:center;
    min-height:440px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:hidden;
    text-decoration:none;
    background:linear-gradient(150deg,var(--dark) 0%,var(--navy) 55%,var(--steel) 120%);
    isolation:isolate;
}
/* Retícula blueprint */
.matz-mhero__slide::before{
    content:""; position:absolute; inset:0; z-index:0;
    background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
    background-size:30px 30px;
    -webkit-mask-image:radial-gradient(120% 90% at 70% 20%,#000 40%,transparent 100%);
            mask-image:radial-gradient(120% 90% at 70% 20%,#000 40%,transparent 100%);
    opacity:.7; pointer-events:none;
}
/* Blob decorativo */
.matz-mhero__slide::after{
    content:""; position:absolute; z-index:0; pointer-events:none;
    width:340px; height:340px; border-radius:50%;
    right:-120px; bottom:-140px;
    background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.14),rgba(255,255,255,0) 70%);
}

/* Texto */
.matz-mhero__text{
    position:relative; z-index:2;
    padding:26px 22px 6px;
}
.matz-mhero__kicker{
    display:inline-block;
    font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
    color:#a9c2ea; margin-bottom:9px;
}
.matz-mhero__title{
    color:#fff; font-size:27px; line-height:1.15; font-weight:800; margin:0 0 8px;
    text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.matz-mhero__title em{ font-style:normal; display:block; color:var(--accent,#ff6b6b); }
.matz-mhero__sub{
    color:rgba(255,255,255,.82); font-size:14px; line-height:1.45; margin:0 0 16px; max-width:300px;
}
.matz-mhero__cta{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; color:var(--navy);
    font-size:12.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
    padding:11px 22px; border-radius:26px;
    box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.matz-mhero__cta::after{ content:"\2192"; font-size:15px; }
.matz-mhero__slide--offer .matz-mhero__cta{ background:var(--red); color:#fff; }

/* Zona de producto */
.matz-mhero__art{
    position:relative; z-index:1;
    flex:1 1 auto; min-height:190px;
    margin-top:4px;
}
.matz-mhero__art img{ position:absolute; display:block; filter:drop-shadow(0 10px 14px rgba(0,0,0,.32)); }
/* Podio elíptico bajo el producto principal */
.matz-mhero__art::before{
    content:""; position:absolute; z-index:0;
    left:50%; bottom:16px; transform:translateX(-50%);
    width:200px; height:34px; border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(0,0,0,.28),rgba(0,0,0,0) 72%);
}
.matz-mhero__art .hero{ width:186px; height:auto; left:50%; bottom:20px; transform:translateX(-50%); z-index:2; }
.matz-mhero__art .mini{ width:88px; height:auto; z-index:1; }
.matz-mhero__art .mini.l{ left:8px;  bottom:30px; }
.matz-mhero__art .mini.r{ right:8px; bottom:34px; }

/* Etiqueta de descuento opcional */
.matz-mhero__tag{
    position:absolute; z-index:3; top:18px; right:16px;
    background:var(--red); color:#fff; font-weight:800; font-size:12px;
    padding:8px 12px; border-radius:10px; transform:rotate(6deg);
    box-shadow:0 6px 14px rgba(0,0,0,.25);
}

/* Puntos de navegación */
.matz-mhero__dots{
    position:absolute; z-index:4; left:0; right:0; bottom:12px;
    display:flex; justify-content:center; gap:8px;
}
.matz-mhero__dot{
    width:8px; height:8px; border-radius:50%; border:0; padding:0;
    background:rgba(255,255,255,.45); cursor:pointer; transition:all .2s;
}
.matz-mhero__dot.is-active{ width:22px; border-radius:5px; background:#fff; }

/* Colores de acento por slide */
.matz-mhero__slide--s1{ --accent:#ffd36b; }
.matz-mhero__slide--s2{ --accent:#9db8e8; }
.matz-mhero__slide--s3{ --accent:#8fe0c0; }

@media (prefers-reduced-motion:reduce){
    .matz-mhero__track{ scroll-behavior:auto; }
}