/* HERO_EDITORIAL_V22 (layout + overlay final)
   - PC: que el hero NO colapse a mini slider
   - Móvil: que el poster llene el alto sin recortar (auto 100%)
   - Overlay: abajo derecha, más pequeño, sin left/transform heredados
*/

section.hero-banner.hero-slider{
  width: 100% !important;
}

section.hero-banner.hero-slider .hero-slider-viewport{
  width: 100% !important;
  overflow: hidden !important;
}

section.hero-banner.hero-slider .hero-slider-track{
  width: 100% !important;
}

section.hero-banner.hero-slider .hero-slide.is-editorial{
  display: block !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  background-repeat: no-repeat !important;
  position: relative !important;
}

/* Móvil: en vez de contain (deja aire), usamos auto 100% (llena alto sin recortar) */
@media (max-width: 820px){
  section.hero-banner.hero-slider .hero-slide.is-editorial{
    background-size: auto 100% !important;
    background-position: 50% 50% !important;
  }
}

/* Overlay final: abajo derecha + reset total de reglas viejas */
.hero-slide.is-editorial .hero-product-overlay{
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 120px !important;
  height: auto !important;
  max-width: 34vw !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* HERO_WIDTH_EXPANSION_V23 */

/* Desktop grande */
@media (min-width: 1200px){
  section.hero-banner.hero-slider{
    max-width: 1500px !important;
    width: 96% !important;
    margin: 0 auto !important;
  }
}

/* Desktop estándar */
@media (min-width: 1024px) and (max-width: 1199px){
  section.hero-banner.hero-slider{
    width: 95% !important;
    margin: 0 auto !important;
  }
}

/* Tablet */
@media (min-width: 821px) and (max-width: 1023px){
  section.hero-banner.hero-slider{
    width: 94% !important;
    margin: 0 auto !important;
  }
}

/* Móvil */
@media (max-width: 820px){
  section.hero-banner.hero-slider{
    width: 92% !important;
    margin: 0 auto !important;
  }
}


/* === BRILLO/NITIDEZ: quitar capa blanquecina del template === */
/* Anula el linear-gradient heredado y deja SOLO la foto */
.hero-slide.is-editorial{
  background-image: var(--hero-photo) !important;
}

/* En móvil: usar la foto móvil si existe */
@media (max-width: 820px){
  .hero-slide.is-editorial{
    background-image: var(--hero-photo-mobile, var(--hero-photo)) !important;
  }
}

/* (Opcional) micro-boost sin “reventar” blancos */
.hero-slide.is-editorial{
  filter: none !important;
}

/* === V22: HERO MÁS DOMINANTE (más ancho útil) === */
section.hero-banner.hero-slider{
  margin-left: 8px !important;
  margin-right: 8px !important;
}

/* En desktop/tablet: que ocupe más ancho y no quede “mini” */
@media (min-width: 821px){
  section.hero-banner.hero-slider{
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Evitar que el viewport recorte raro por border-radius externo */
section.hero-banner.hero-slider .hero-slider-viewport{
  border-radius: 18px !important;
}


/* === V22: OVERLAY PRODUCTO (posición + tamaño) === */
.hero-slide.is-editorial{
  position: relative !important; /* asegura contexto */
}

.hero-slide.is-editorial .hero-product-overlay{
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;

  width: 110px !important;       /* base */
  max-width: 28vw !important;    /* responsive */
  height: auto !important;

  z-index: 5 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)) !important;
}

/* En móvil: un poco más pequeño para no tapar texto */
@media (max-width: 820px){
  .hero-slide.is-editorial .hero-product-overlay{
    width: 96px !important;
    max-width: 26vw !important;
    right: 14px !important;
    bottom: 14px !important;
  }
}


/* === FIX: recuperar controles (dots) del slider === */
section.hero-banner.hero-slider{
  position: relative !important;  /* ancla para absolute */
}

/* Asegura que el área del hero no “tape” los dots */
section.hero-banner.hero-slider .hero-slider-viewport{
  overflow: hidden !important;    /* la imagen se recorta */
}

/* Contenedor dots: visible y por encima */
.hero-dots{
  position: absolute !important;
  left: 50% !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

/* Botón dot: clickeable y visible */
.hero-dot{
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  opacity: .65 !important;
  pointer-events: auto !important;
}

/* Dot activo: resalta */
.hero-dot.is-active{
  opacity: 1 !important;
  transform: scale(1.08) !important;
}


/* ===========================
   HERO EDITORIAL V23 - FIX PC
   Fallback de imagen:
   Si --hero-photo no existe, usa --hero-photo-mobile
   (evita "fondo gris" en desktop)
   =========================== */

:root {
  /* por si alguna vista solo define la variable mobile */
  --hero-photo-fallback: var(--hero-photo, var(--hero-photo-mobile));
}

/* Intento 1: slide típico */
.hero-slide,
.hero-editorial-slide,
.hero .slide,
.hero .swiper-slide,
.hero .splide__slide {
  background-image: var(--hero-photo-fallback) !important;
}

/* Intento 2: si el background se aplica a un wrapper interno */
.hero-slide-bg,
.hero-editorial-bg,
.hero .bg {
  background-image: var(--hero-photo-fallback) !important;
}


/* ===========================
   HERO EDITORIAL V23 - DESKTOP
   Poster centrado (usa ::before)
   =========================== */
@media (min-width: 992px){

  /* Asegurar que el bloque del hero no esté colapsado */
  .hero-banner.hero-slider{
    display: block !important;
    background: transparent !important;
    padding: 18px 0 10px 0 !important;
  }

  /* Viewport como “tarjeta” centrada */
  .hero-slider-viewport{
    max-width: 560px !important;
    margin: 0 auto !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background: #f4f4f4 !important;
  }

  /* Cada slide ocupa el viewport (poster) */
  .hero-slide{
    width: 100% !important;
    min-width: 100% !important;   /* IMPORTANTE: no 100vw en desktop */
    height: 620px !important;     /* poster alto e impactante */
    position: relative !important;
  }

  /* La imagen editorial REAL está en ::before */
  .hero-slide::before{
    background-image: var(--hero-photo, var(--hero-photo-mobile)) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  /* Si hay capas extra, en editorial NO se necesitan (evita conflictos) */
  .hero-slide.is-editorial .hero-slide-left,
  .hero-slide.is-editorial .hero-slide-right,
  .hero-slide.is-editorial .hero-product-overlay{
    display: none !important;
  }

  /* Dots centrados debajo de la tarjeta */
  .hero-dots{
    max-width: 560px !important;
    margin: 10px auto 0 auto !important;
    justify-content: center !important;
  }
}


/* ===========================
   HERO EDITORIAL V23 - FIX DEFINITIVO DESKTOP
   =========================== */
@media (min-width: 992px){

  /* El hero debe tener altura real */
  .hero-banner.hero-slider{
    display: block !important;
    width: 100% !important;
  }

  .hero-slider-track{
    display: flex !important;
    width: 100% !important;
  }

  /* Viewport centrado tipo poster */
  .hero-slider-viewport{
    max-width: 560px !important;
    margin: 30px auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #f3f3f3 !important;
  }

  .hero-slide{
    min-width: 100% !important;
    width: 100% !important;
    height: 640px !important;
    position: relative !important;
  }

  /* Asegurar que ::before exista y pinte la imagen */
  .hero-slide::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: var(--hero-photo, var(--hero-photo-mobile)) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  /* Ocultar capas extra en modo editorial */
  .hero-slide.is-editorial .hero-slide-left,
  .hero-slide.is-editorial .hero-slide-right,
  .hero-slide.is-editorial .hero-product-overlay{
    display: none !important;
  }

  .hero-dots{
    max-width: 560px !important;
    margin: 10px auto 0 auto !important;
    justify-content: center !important;
  }
}


/* ===========================
   HERO EDITORIAL V23 - FORZADO DE PINTURA (DESKTOP)
   - asegura que ::before quede visible y encima del fondo
   =========================== */
@media (min-width: 992px){

  /* El slide debe ser el "contexto" del pseudo-elemento */
  .hero-banner.hero-slider .hero-slide{
    position: relative !important;
    background: transparent !important;
  }

  /* Forzamos que el pseudo-elemento pinte y quede visible */
  .hero-banner.hero-slider .hero-slide::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    opacity: 1 !important;

    background-image: var(--hero-photo, var(--hero-photo-mobile)) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  /* Si hay cualquier capa “de contenido” encima, la mandamos arriba */
  .hero-banner.hero-slider .hero-slide > *{
    position: relative !important;
    z-index: 2 !important;
  }
}


/* ===========================
   HERO EDITORIAL V23 - OVERRIDE FINAL DESKTOP
   El ::before estaba quedando SOLO con gradiente.
   Aquí forzamos el background completo a la imagen editorial.
   =========================== */
@media (min-width: 992px){

  .hero-banner.hero-slider .hero-slide.is-editorial::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;

    /* PISAR SHORTHAND (no solo background-image) */
    background: var(--hero-photo, var(--hero-photo-mobile)) center / contain no-repeat !important;
    background-color: #f3f3f3 !important;

    opacity: 1 !important;
    z-index: 1 !important;
  }

  /* Asegura que nada tape el ::before */
  .hero-banner.hero-slider .hero-slide{
    position: relative !important;
    background: transparent !important;
  }

  .hero-banner.hero-slider .hero-slide > *{
    position: relative !important;
    z-index: 2 !important;
  }
}


/* ===========================

/* ===========================
   HERO EDITORIAL V23 - DESKTOP CORRECTO
   Mantener layout, forzar altura real
   =========================== */
@media (min-width: 992px){

  .hero-banner.hero-slider{
    display: block !important;
  }

  .hero-slider-viewport{
    max-width: 560px !important;
    margin: 30px auto !important;
  }

  /* Mantener layout original pero forzar altura */
  .hero-slide{
    min-height: 640px !important;
    height: 640px !important;
  }

  /* Quitar solo el gradiente */
  .hero-slide::before{
    background-image: var(--hero-photo, var(--hero-photo-mobile)) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    opacity: 1 !important;
  }

  .hero-dots{
    max-width: 560px !important;
    margin: 10px auto 0 auto !important;
    justify-content: center !important;
  }
}


/* ===========================
   HERO DESKTOP - LIMPIEZA TOTAL
   Eliminamos gradientes por data-accent
   =========================== */
@media (min-width: 992px){

  /* Neutralizar reglas por data-accent */
  .hero-slide[data-accent]::before{
    display: none !important;
    content: none !important;
  }

  /* Forzar altura real */
  .hero-slider-viewport{
    min-height: 640px !important;
  }

  .hero-slider-track{
    min-height: 640px !important;
  }

  .hero-slide{
    min-height: 640px !important;
    height: 640px !important;
    display: block !important;

    /* Pintar imagen directamente aquí */
    background: var(--hero-photo, var(--hero-photo-mobile)) center / contain no-repeat !important;
  }

}


/* ===========================
   HERO DESKTOP - CORREGIR SLIDER TRACK
   =========================== */
@media (min-width: 992px){

  /* No usar 100vw en desktop */
  .hero-slide{
    min-width: 100% !important;
  }

  /* Evitar desplazamiento incorrecto */
  .hero-slider-track{
    transform: translateX(0) !important;
  }

}


/* ===========================
   HERO EDITORIAL V24 - DESKTOP HEIGHT FIX
   Problema: en PC .hero-slide queda height:0, entonces el ::before con la foto no pinta.
   Solución: dar altura explícita al viewport/track/slide solo en desktop.
   =========================== */

@media (min-width: 900px){
  .hero-banner.hero-slider{
    /* altura editorial tipo “poster” en PC */
    min-height: clamp(360px, 42vw, 560px) !important;
  }

  .hero-slider-viewport{
    height: 100% !important;
  }

  .hero-slider-track{
    height: 100% !important;
    align-items: stretch !important;
  }

  .hero-slide{
    height: 100% !important;
    min-height: 100% !important;
  }

  .hero-slide::before{
    inset: 0 !important;
  }
}


@media (min-width: 900px){
  .hero-wrap .container{ height: auto !important; }
  .hero-banner.hero-slider{ display: block !important; }
}


/* ===========================
   V24 - FORCE DESKTOP HEIGHT (TOC)
   Si el hero se ve "vacío" en PC:
   el problema es viewport/track/slide con height:0.
   Esto lo anula SOLO en desktop.
   =========================== */
@media (min-width: 900px){
  .hero-banner.hero-slider .hero-slider-viewport{
    display: block !important;
    min-height: clamp(360px, 42vw, 560px) !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .hero-banner.hero-slider .hero-slider-track{
    display: flex !important;
    min-height: inherit !important;
    height: auto !important;
  }

  .hero-banner.hero-slider .hero-slide{
    display: grid !important;
    min-height: inherit !important;
    height: auto !important;
  }
}




/* ===========================
   HOTFIX RANGE 821–1023 (TOC)
   Problema real: viewport/track/slide colapsan a height:0 en este rango.
   Objetivo: asegurar altura real SIN afectar mobile.
   =========================== */
@media (min-width: 821px) and (max-width: 1023px){

  .hero-banner.hero-slider{
    display: block !important;
    min-height: 420px !important;
    height: auto !important;
  }

  .hero-banner.hero-slider .hero-slider-viewport{
    display: block !important;
    min-height: 420px !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .hero-banner.hero-slider .hero-slider-track{
    display: flex !important;
    min-height: 420px !important;
    height: auto !important;
    align-items: stretch !important;
  }

  .hero-banner.hero-slider .hero-slide{
    display: grid !important;
    min-height: 420px !important;
    height: auto !important;
  }
}


/* ===========================
   TOC: SINGLE SOURCE OF TRUTH (>=821px)
   - En desktop/tablet, la editorial SIEMPRE se pinta en el background del .hero-slide
   - Se apaga ::before para que no tape la imagen.
   =========================== */
@media (min-width: 821px){

  .hero-banner.hero-slider .hero-slide{
    background-image: var(--hero-photo, var(--hero-photo-mobile)) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  .hero-banner.hero-slider .hero-slide::before{
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
  }

}

/* =========================================================
   V24 - LAST WINS (TOC)
   Constraint: viewport/track/slide quedan height:0 en 821-991px
   Objetivo: En NO-MOBILE (>=821px) el hero SIEMPRE pinta editorial.
   Estrategia: forzar altura + neutralizar transform del track
              + pintar editorial en background del .hero-slide
              + apagar ::before conflictivo.
   ========================================================= */
@media (min-width: 821px){

  /* Hero visible */
  .hero-banner.hero-slider{
    display: block !important;
  }

  /* Viewport tipo poster (altura real SIEMPRE) */
  .hero-banner.hero-slider .hero-slider-viewport{
    display: block !important;
    max-width: 560px !important;
    margin: 30px auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;

    height: clamp(360px, 42vw, 560px) !important;
    min-height: clamp(360px, 42vw, 560px) !important;
  }

  /* Track: NO slider-move en desktop */
  .hero-banner.hero-slider .hero-slider-track{
    display: block !important;
    height: 100% !important;
    min-height: 100% !important;
    transform: none !important;
  }

  /* Slide: ocupa todo y pinta editorial */
  .hero-banner.hero-slider .hero-slide{
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;

    height: 100% !important;
    min-height: 100% !important;

    background-image: var(--hero-photo, var(--hero-photo-mobile)) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  /* Apagar pseudo-elemento que compite */
  .hero-banner.hero-slider .hero-slide::before{
    display: none !important;
    content: none !important;
    background: none !important;
  }

  /* (Opcional) si quieres poster estático sin dots */
  /* .hero-banner.hero-slider .hero-dots{ display:none !important; } */
}


/* =========================================================
   V24 - LAST WINS (TOC)
   Constraint: viewport/track/slide quedan height:0 en 821-991px
   Objetivo: En NO-MOBILE (>=821px) el hero SIEMPRE pinta editorial.
   Estrategia: forzar altura + neutralizar transform del track
              + pintar editorial en background del .hero-slide
              + apagar ::before conflictivo.
   ========================================================= */
@media (min-width: 821px){

  /* Hero visible */
  .hero-banner.hero-slider{
    display: block !important;
  }

  /* Viewport tipo poster (altura real SIEMPRE) */
  .hero-banner.hero-slider .hero-slider-viewport{
    display: block !important;
    max-width: 560px !important;
    margin: 30px auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;

    height: clamp(360px, 42vw, 560px) !important;
    min-height: clamp(360px, 42vw, 560px) !important;
  }

  /* Track: NO slider-move en desktop */
  .hero-banner.hero-slider .hero-slider-track{
    display: block !important;
    height: 100% !important;
    min-height: 100% !important;
    transform: none !important;
  }

  /* Slide: ocupa todo y pinta editorial */
  .hero-banner.hero-slider .hero-slide{
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;

    height: 100% !important;
    min-height: 100% !important;

    background-image: var(--hero-photo, var(--hero-photo-mobile)) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  /* Apagar pseudo-elemento que compite */
  .hero-banner.hero-slider .hero-slide::before{
    display: none !important;
    content: none !important;
    background: none !important;
  }

  /* (Opcional) si quieres poster estático sin dots */
  /* .hero-banner.hero-slider .hero-dots{ display:none !important; } */
}

/* Retina: usar versión 2x si existe (mejora nitidez en pantallas con DPR alto) */
@media (max-width: 802px) and (min-resolution: 2dppx) {
  .hero-slide.is-editorial {
    background-image: var(--hero-photo-mobile-2x, var(--hero-photo-mobile, var(--hero-photo))) !important;
  }
}