/* ==========================================================================
   AVL Editorial Duo — LOCKED (v9)
   - Evita que otros CSS sobreescriban variables (usa !important en custom props)
   - Fondo negro fijo (solo se revela contenido)
   - CTA se mueve por variables (aunque el reveal meta inline "transform:none")
   - Mobile: título dorado + más grande, layout estable
   ========================================================================== */

section.home-editorial-duo {
  background: #000 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

section.home-editorial-duo::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--avl-bg, #000) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* --- Grid base (desktop & mobile) --- */
section.home-editorial-duo .home-editorial-duo__grid {
  position: relative !important;
  z-index: 1 !important;
}

section.home-editorial-duo .home-editorial-duo__media {
  position: relative !important;
}

section.home-editorial-duo .home-editorial-duo__collage {
  position: relative !important;
  width: var(--avl-cw, 760px) !important;
  height: var(--avl-ch, 782px) !important;
  max-width: 100% !important;
}

section.home-editorial-duo .home-editorial-duo__imgwrap {
  position: absolute !important;
  overflow: hidden !important;
  background: transparent !important;
}

section.home-editorial-duo .home-editorial-duo__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Desktop positioning via vars */
@media (min-width: 992px) {
  section.home-editorial-duo {
    padding-top: max(0px, var(--avl-pad-y, 34px)) !important;
    padding-bottom: max(0px, var(--avl-pad-y, 34px)) !important;
  }

  section.home-editorial-duo .home-editorial-duo__grid {
    display: grid !important;
    grid-template-columns: 1.35fr .65fr !important;
    align-items: start !important;
    gap: 22px !important;
  }

  section.home-editorial-duo .home-editorial-duo__content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 80 !important;
    pointer-events: none !important;
  }

  section.home-editorial-duo .home-editorial-duo__title {
    color: var(--avl-title-color, #efbf13) !important;
    font-weight: 900 !important;
    letter-spacing: var(--avl-title-ls, .08em) !important;
    text-transform: uppercase !important;
    font-size: var(--avl-title-size, clamp(40px, 5.2vw, 92px)) !important;
    line-height: .92 !important;
    white-space: nowrap !important;
    max-width: none !important;
    display: inline-block !important;
    transform: translate(var(--avl-title-x, 0px), var(--avl-title-y, 0px)) !important;
  }

  section.home-editorial-duo .home-editorial-duo__text {
    max-width: var(--avl-text-maxw, 420px) !important;
    transform: translate(var(--avl-text-x, 0px), var(--avl-text-y, 0px)) !important;
  }

  section.home-editorial-duo .home-editorial-duo__cta {
    transform: translate(var(--avl-cta-x, 0px), var(--avl-cta-y, 0px)) !important;
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,.55) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    pointer-events: auto !important;
    z-index: 90 !important;
    position: relative !important;
  }

  section.home-editorial-duo .home-editorial-duo__imgwrap--primary {
    left: var(--avl-i1-x, 0px) !important;
    top: var(--avl-i1-y, 0px) !important;
    width: var(--avl-i1-w, 60%) !important;
    height: var(--avl-i1-h, 50%) !important;
    z-index: var(--avl-i1-z, 1) !important;
  }
  section.home-editorial-duo .home-editorial-duo__imgwrap--secondary {
    left: var(--avl-i2-x, 60%) !important;
    top: var(--avl-i2-y, 0px) !important;
    width: var(--avl-i2-w, 40%) !important;
    height: var(--avl-i2-h, 50%) !important;
    z-index: var(--avl-i2-z, 2) !important;
  }
  section.home-editorial-duo .home-editorial-duo__imgwrap--tertiary {
    left: var(--avl-i3-x, 60%) !important;
    top: var(--avl-i3-y, 50%) !important;
    width: var(--avl-i3-w, 40%) !important;
    height: var(--avl-i3-h, 50%) !important;
    z-index: var(--avl-i3-z, 3) !important;
  }
}

/* Mobile layout (stack) */
@media (max-width: 991px) {
  section.home-editorial-duo {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  section.home-editorial-duo .home-editorial-duo__grid {
    display: block !important;
  }

  /* collage */
  section.home-editorial-duo .home-editorial-duo__collage {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 0.78 !important;
  }

  section.home-editorial-duo .home-editorial-duo__imgwrap {
    position: absolute !important;
    inset: auto !important;
  }

  /* 2-up top row */
  section.home-editorial-duo .home-editorial-duo__imgwrap--primary {
    left: 0 !important;
    top: 0 !important;
    width: 50% !important;
    height: 100% !important;
    transform: translate(var(--avl-m-i1-x, 0px), var(--avl-m-i1-y, 0px)) !important;
  }
  section.home-editorial-duo .home-editorial-duo__imgwrap--secondary {
    left: 50% !important;
    top: 0 !important;
    width: 50% !important;
    height: 100% !important;
    transform: translate(var(--avl-m-i2-x, 0px), var(--avl-m-i2-y, 0px)) !important;
  }

  /* tertiary optional (para test) */
  section.home-editorial-duo .home-editorial-duo__imgwrap--tertiary {
    display: var(--avl-m-i3-display, none) !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: translate(var(--avl-m-i3-x, 0px), var(--avl-m-i3-y, 0px)) !important;
  }

  section.home-editorial-duo .home-editorial-duo__content {
    margin-top: var(--avl-m-content-mt, 0px) !important;
    margin-bottom: var(--avl-m-content-mb, 0px) !important;
  }

  section.home-editorial-duo .home-editorial-duo__title {
    color: var(--avl-m-title-color, #efbf13) !important;
    font-size: var(--avl-m-title-size, clamp(30px, 8.2vw, 44px)) !important;
    letter-spacing: var(--avl-m-title-ls, -0.03em) !important;
    transform: translate(var(--avl-m-title-x, 0px), var(--avl-m-title-y, 0px)) !important;
    white-space: normal !important;
    max-width: 92vw !important;
    line-height: .94 !important;
  }

  section.home-editorial-duo .home-editorial-duo__text {
    transform: translate(var(--avl-m-text-x, 0px), var(--avl-m-text-y, 0px)) !important;
  }

  section.home-editorial-duo .home-editorial-duo__cta {
    transform: translate(var(--avl-m-cta-x, 0px), var(--avl-m-cta-y, 0px)) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.55) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
}

/* =======================
   LOCK: variables per store
   (si algo cambia en otro CSS, esto prevalece)
   ======================= */

@media (min-width: 992px) {
  section.home-editorial-duo[data-store="home-editorial-duo-1"],
  section.home-editorial-duo[data-store="home-editorial-duo-2"],
  section.home-editorial-duo[data-store="home-editorial-duo-3"],
  section.home-editorial-duo[data-store="home-editorial-duo-4"] {
  --avl-text-x: 608px !important;
  --avl-text-y: 60px !important;
  --avl-text-maxw: 420px !important;
  --avl-title-x: 605px !important;
  --avl-title-y: 55px !important;
  --avl-title-size: clamp(40px, 5.2vw, 92px) !important;
  --avl-title-ls: -0.03em !important;
  --avl-cta-x: 610px !important;
  --avl-cta-y: 70px !important;
  --avl-cw: 760px !important;
  --avl-ch: 782px !important;
  --avl-pad-y: 34px !important;
  --avl-i1-x: -260px !important;
  --avl-i1-y: 0px !important;
  --avl-i1-w: 550.8px !important;
  --avl-i1-h: 535.5px !important;
  --avl-i2-x: -20px !important;
  --avl-i2-y: 40px !important;
  --avl-i2-w: 786.24px !important;
  --avl-i2-h: 393.12px !important;
  --avl-i3-x: -120px !important;
  --avl-i3-y: 430px !important;
  --avl-i3-w: 702px !important;
  --avl-i3-h: 351px !important;
  }
}

@media (max-width: 991px) {
  section.home-editorial-duo[data-store="home-editorial-duo-1"],
  section.home-editorial-duo[data-store="home-editorial-duo-2"],
  section.home-editorial-duo[data-store="home-editorial-duo-3"],
  section.home-editorial-duo[data-store="home-editorial-duo-4"] {
  --avl-m-content-mt: -36px !important;
  --avl-m-content-mb: 12px !important;
  --avl-m-title-x: 0px !important;
  --avl-m-title-y: 20px !important;
  --avl-m-title-size: clamp(30px, 8.2vw, 44px) !important;
  --avl-m-title-ls: -0.03em !important;
  --avl-m-title-color: #efbf13 !important;
  --avl-m-text-x: 0px !important;
  --avl-m-text-y: 3px !important;
  --avl-m-cta-x: 0px !important;
  --avl-m-cta-y: 20px !important;
  --avl-m-i1-x: 0px !important;
  --avl-m-i1-y: 0px !important;
  --avl-m-i1-w: auto !important;
  --avl-m-i1-h: auto !important;
  --avl-m-i2-x: 0px !important;
  --avl-m-i2-y: 0px !important;
  --avl-m-i2-w: auto !important;
  --avl-m-i2-h: auto !important;
  --avl-m-i3-x: 0px !important;
  --avl-m-i3-y: 0px !important;
  --avl-m-i3-w: auto !important;
  --avl-m-i3-h: auto !important;
  --avl-m-i3-display: block !important;
  }
}

/* Desktop: mover 3 imágenes juntas (grupo) */
@media (min-width: 992px){
  section.home-editorial-duo[data-store^="home-editorial-duo-"] .home-editorial-duo__collage{
    transform: translate(var(--avl-g-img-x, 0px), var(--avl-g-img-y, 0px)) scale(var(--avl-g-img-s, 1)) !important;
    transform-origin: top left !important;
  }
}

/* ==========================================================================
   AVL Editorial Duo — DESKTOP FIXED VALUES (PUNTO 0)
   Aplicado a home-editorial-duo-1..4 (según dump de consola)
   ========================================================================== */
@media (min-width: 992px){
  section.home-editorial-duo[data-store="home-editorial-duo-1"],
  section.home-editorial-duo[data-store="home-editorial-duo-2"],
  section.home-editorial-duo[data-store="home-editorial-duo-3"],
  section.home-editorial-duo[data-store="home-editorial-duo-4"]{
    --avl-g-img-x: 184px !important;
    --avl-g-img-y: 0px !important;
    --avl-g-img-s: 1 !important;

    --avl-title-x: 755px !important;
    --avl-title-y: 295px !important;
    --avl-title-size: 92px !important;
    --avl-title-ls: -0.03em !important;

    --avl-text-x: 759px !important;
    --avl-text-y: 240px !important;

    --avl-cta-x: 759px !important;
    --avl-cta-y: 250px !important;
  }
}
