/* main.css — Fiesta CONMEBOL Evolución.
   Revista a sangre completa: cada página es una imagen que ocupa el 100% del
   ancho. Algunas páginas llevan una imagen ancha ("frame") que se desplaza
   entre dos posiciones con los dots, replicando el comportamiento del origen.

   Mobile-first (<=768px, rama isMobile del original) y media query
   (min-width: 769px) para la rama isDesktop. Las medidas específicas de cada
   página viven en custom properties al final del archivo. */

/* ------------------------------------------------------ contenedor y páginas */

/* _shared/css/reset.css clampa .cmb-revista a 402px (y a 1200px en desktop).
   Esta revista es a sangre completa, así que se anula con mayor especificidad. */
.cmb-revista.cmb-revista--conmebol-fiesta {
  --cmb-max-width: 100%;
  max-width: none;
  width: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  /* Posiciones por defecto del frame en mobile (el original usaba 4% → 96%).
     Van en el contenedor y no en la página para que se hereden: así una página
     puede redefinirlas (pag-06) sin competir en especificidad. */
  --cmb-pan-start: 4%;
  --cmb-pan-end: 96%;
}

.cmb-revista.cmb-revista--conmebol-fiesta > .cmb-fiesta__pag {
  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  overflow: hidden;
  aspect-ratio: var(--cmb-ratio);
  background: var(--cmb-pag-bg, transparent);
}

/* <picture> sólo selecciona el origen; el <img> es quien se posiciona. */
.cmb-revista--conmebol-fiesta picture {
  display: contents;
}

/* --------------------------------------------------------------------- fondo */

/* width/height explícitos: en un <img> (elemento reemplazado) los cuatro insets
   no bastan para estirarlo, porque auto se resuelve al tamaño intrínseco. */
.cmb-revista--conmebol-fiesta .cmb-fiesta__bg {
  position: absolute;
  inset: var(--cmb-bg-inset, 0);
  width: var(--cmb-bg-size, 100%);
  height: var(--cmb-bg-size, 100%);
  max-width: none;
  object-fit: cover;
}

/* ------------------------------------------------------------ frame desplazable */

.cmb-revista--conmebol-fiesta .cmb-fiesta__window {
  position: absolute;
  inset: var(--cmb-win);
  z-index: 1;
}

.cmb-revista--conmebol-fiesta .cmb-fiesta__frame {
  position: absolute;
  top: 0;
  left: var(--cmb-pan-start);
  width: auto;
  height: 100%;
  max-width: none;
  transform: translateX(0);
  transition: left 0.5s ease, transform 0.5s ease;
}

.cmb-revista--conmebol-fiesta [data-cmb-pan-index="1"] .cmb-fiesta__frame {
  left: var(--cmb-pan-end);
  transform: translateX(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .cmb-revista--conmebol-fiesta .cmb-fiesta__frame {
    transition: none;
  }
}

/* ---------------------------------------------------------------------- dots */

.cmb-revista--conmebol-fiesta .cmb-fiesta__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--cmb-dots-bottom);
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 10px;
  --cmb-dot-on: #ffffff;
  --cmb-dot-off: rgba(255, 255, 255, 0.45);
}

.cmb-revista--conmebol-fiesta .cmb-fiesta__dots--dark {
  --cmb-dot-on: #1a1a1a;
  --cmb-dot-off: rgba(0, 0, 0, 0.35);
}

.cmb-revista--conmebol-fiesta .cmb-fiesta__dot {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--cmb-dot-off);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: background 0.3s ease;
}

.cmb-revista--conmebol-fiesta .cmb-fiesta__dot[aria-pressed="true"] {
  background: var(--cmb-dot-on);
}

/* ------------------------------------------------------- zonas clicables */

.cmb-revista--conmebol-fiesta .cmb-fiesta__hotspot {
  position: absolute;
  z-index: 3;
  left: var(--cmb-hot-left);
  top: var(--cmb-hot-top);
  width: var(--cmb-hot-width);
  height: var(--cmb-hot-height);
  cursor: pointer;
}

.cmb-revista--conmebol-fiesta .cmb-fiesta__hotspot--youtube {
  --cmb-hot-left: 72.5%;
  --cmb-hot-top: 59%;
  --cmb-hot-width: 13%;
  --cmb-hot-height: 21%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__hotspot--revista {
  --cmb-hot-left: 13%;
  --cmb-hot-top: 64%;
  --cmb-hot-width: 11%;
  --cmb-hot-height: 11%;
}

/* ------------------------------------------------------------------ desktop */

@media (min-width: 769px) {
  .cmb-revista.cmb-revista--conmebol-fiesta {
    background: #052e0d;
  }

  /* En desktop todas las páginas son 3:2 y el fondo cubre la página completa. */
  .cmb-revista.cmb-revista--conmebol-fiesta > .cmb-fiesta__pag {
    aspect-ratio: 3 / 2;
    background: transparent;
    --cmb-pan-start: 24%;
    --cmb-pan-end: 97%;
  }

  .cmb-revista.cmb-revista--conmebol-fiesta .cmb-fiesta__bg {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .cmb-revista.cmb-revista--conmebol-fiesta .cmb-fiesta__window {
    inset: 2.5% 0 4% 0;
  }

  .cmb-revista.cmb-revista--conmebol-fiesta .cmb-fiesta__dots {
    bottom: 2%;
  }

  /* Páginas con desplazamiento sólo en mobile: en desktop la imagen de fondo
     ya contiene la doble página completa. */
  .cmb-revista--conmebol-fiesta .cmb-fiesta__window--m,
  .cmb-revista--conmebol-fiesta .cmb-fiesta__dots--m {
    display: none;
  }

  .cmb-revista--conmebol-fiesta .cmb-fiesta__hotspot--youtube {
    --cmb-hot-left: 72.7%;
    --cmb-hot-top: 61.1%;
    --cmb-hot-width: 14%;
    --cmb-hot-height: 19%;
  }
  .cmb-revista--conmebol-fiesta .cmb-fiesta__hotspot--revista {
    --cmb-hot-left: 12.1%;
    --cmb-hot-top: 63.2%;
    --cmb-hot-width: 12%;
    --cmb-hot-height: 15%;
  }
}

@media (max-width: 768px) {
  /* pag-06 no tiene fondo en mobile: el frame ocupa toda la página. */
  .cmb-revista--conmebol-fiesta .cmb-fiesta__bg--d {
    display: none;
  }
}

/* --------------------------------------------- medidas por página (mobile) */

.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--00 {
  --cmb-ratio: 1608 / 2196;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--01 {
  --cmb-ratio: 1608 / 2005;
  --cmb-win: 5% 0 7.5% 0;
  --cmb-dots-bottom: 2%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--02 {
  --cmb-ratio: 1608 / 2400;
  --cmb-win: 7% 0 11% 0;
  --cmb-dots-bottom: 3%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--03 {
  --cmb-ratio: 1608 / 2320;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--04 {
  --cmb-ratio: 1608 / 2324;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--05 {
  --cmb-ratio: 1608 / 3232;
  --cmb-win: 18% 0 23% 0;
  --cmb-dots-bottom: 19%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--06 {
  --cmb-ratio: 3 / 4;
  --cmb-win: 0 0 0 0;
  --cmb-dots-bottom: 3%;
  --cmb-pan-start: 0%;
  --cmb-pan-end: 100%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--07 {
  --cmb-ratio: 1608 / 3352;
  --cmb-win: 19% 0 22.5% 0;
  --cmb-dots-bottom: 18.5%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--08 {
  --cmb-ratio: 1608 / 2800;
  --cmb-win: 13% 0 15% 0;
  --cmb-dots-bottom: 11%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--09 {
  --cmb-ratio: 1608 / 2396;
  --cmb-win: 6% 0 8.5% 0;
  --cmb-dots-bottom: 3%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--10 {
  --cmb-ratio: 1608 / 2960;
  --cmb-win: 6.5% 0 9.5% 0;
  --cmb-dots-bottom: 3%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--11 {
  --cmb-ratio: 1608 / 2800;
  --cmb-bg-inset: -0.5%;
  --cmb-bg-size: 101%;
  --cmb-win: 15% 0 18% 0;
  --cmb-dots-bottom: 13.5%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--12 {
  --cmb-ratio: 1608 / 2872;
  --cmb-bg-inset: -0.5%;
  --cmb-bg-size: 101%;
  --cmb-win: 12% 0 16.5% 0;
  --cmb-dots-bottom: 2.2%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--13 {
  --cmb-ratio: 1608 / 3196;
  --cmb-win: 15% 0 18% 0;
  --cmb-dots-bottom: 14%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--14 {
  --cmb-ratio: 1608 / 2848;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--15 {
  --cmb-ratio: 1608 / 3120;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--16 {
  --cmb-ratio: 1608 / 3120;
  --cmb-win: 12% 0 16.5% 0;
  --cmb-dots-bottom: 13%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--17 {
  --cmb-ratio: 1608 / 2880;
  --cmb-win: 12% 0 16% 0;
  --cmb-dots-bottom: 12.5%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--18 {
  --cmb-ratio: 1608 / 2880;
  --cmb-win: 12.5% 0 16.5% 0;
  --cmb-dots-bottom: 13%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--19 {
  --cmb-ratio: 1608 / 2880;
  --cmb-win: 6% 0 9% 0;
  --cmb-dots-bottom: 3%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--20 {
  --cmb-ratio: 1608 / 2880;
  --cmb-win: 8% 0 11% 0;
  --cmb-dots-bottom: 4%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--21 {
  --cmb-ratio: 1608 / 2880;
  --cmb-win: 9% 0 12.5% 0;
  --cmb-dots-bottom: 4.5%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--22 {
  --cmb-ratio: 1608 / 2800;
  --cmb-win: 11% 0 14.5% 0;
  --cmb-dots-bottom: 5%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--23 {
  --cmb-ratio: 1608 / 3096;
  --cmb-win: 14.5% 0 18.5% 0;
  --cmb-dots-bottom: 15%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--24 {
  --cmb-ratio: 1608 / 3096;
  --cmb-win: 14.5% 0 18.5% 0;
  --cmb-dots-bottom: 15%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--25 {
  --cmb-ratio: 1608 / 2496;
  --cmb-win: 5.5% 0 8.5% 0;
  --cmb-dots-bottom: 3%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--26 {
  --cmb-ratio: 1608 / 3200;
  --cmb-win: 14.5% 0 18.5% 0;
  --cmb-dots-bottom: 15%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--27 {
  --cmb-ratio: 1608 / 3116;
  --cmb-bg-inset: -0.5%;
  --cmb-bg-size: 101%;
  --cmb-win: 14.5% 0 18.5% 0;
  --cmb-dots-bottom: 15%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--28 {
  --cmb-ratio: 1608 / 2780;
  --cmb-bg-inset: -1.2%;
  --cmb-bg-size: 102.4%;
  --cmb-win: 11% 0 14% 0;
  --cmb-dots-bottom: 10.5%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--29 {
  --cmb-ratio: 1608 / 3200;
  --cmb-bg-inset: -0.5%;
  --cmb-bg-size: 101%;
  --cmb-win: 12% 0 16.5% 0;
  --cmb-dots-bottom: 13%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--30 {
  --cmb-ratio: 3880 / 2948;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--31 {
  --cmb-ratio: 1608 / 2560;
  --cmb-bg-inset: -0.6%;
  --cmb-bg-size: 101.2%;
  --cmb-pag-bg: #14418b;
  --cmb-win: 5% 0 7% 0;
  --cmb-dots-bottom: 2.5%;
}
.cmb-revista--conmebol-fiesta .cmb-fiesta__pag--32 {
  --cmb-ratio: 4896 / 3248;
}
