/* cmb-revistas: reset compartido entre revistas
   Aislado al wrapper .cmb-revista para no contaminar el resto del sitio. */
.cmb-revista,
.cmb-revista *,
.cmb-revista *::before,
.cmb-revista *::after {
  box-sizing: border-box;
}

.cmb-revista {
  margin: 0;
  padding: 0;
  font-family: inherit;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.cmb-revista img {
  max-width: 100%;
  height: auto;
  display: block;
}

.cmb-revista h1,
.cmb-revista h2,
.cmb-revista h3,
.cmb-revista h4,
.cmb-revista p {
  margin: 0;
}

.cmb-revista figure {
  margin: 0;
}

/* Wrapper que comparten todas las revistas: mobile-first 402px centrado.
   Para añadir desktop más adelante, redefinir --cmb-max-width o añadir
   media queries en el main.css de cada revista. */
.cmb-revista {
  --cmb-max-width: 402px;
  max-width: var(--cmb-max-width);
  margin-inline: auto;
  overflow-x: clip;
  position: relative;
}

/* Inner wrapper MVP — todas las secciones no-pixel-perfect llevan
   <div class="cmb-sub15__inner-mvp"> alrededor del contenido mobile.
   En mobile es transparente (100%×100%, position:relative). En desktop se
   clampa a 402px centrado dentro de la sección de 1200px. */
.cmb-sub15__inner-mvp {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Desktop ≥1200px: el wrapper de la revista se expande a 1200px.
   Secciones con `cmb-sub15--has-desktop` tienen su propio layout desktop.
   Secciones sin esa clase se ensanchan a 1200px y centran su contenido
   mobile (402px) vía `__inner-mvp`. */
@media (min-width: 1200px) {
  .cmb-revista {
    --cmb-max-width: 1200px;
  }
  .cmb-revista > section:not(.cmb-sub15--has-desktop),
  .cmb-revista .cmb-parallax-group > section:not(.cmb-sub15--has-desktop) {
    width: 1200px;
    max-width: none;
    margin-inline: auto;
  }
  .cmb-revista > section:not(.cmb-sub15--has-desktop) > .cmb-sub15__inner-mvp,
  .cmb-revista .cmb-parallax-group > section:not(.cmb-sub15--has-desktop) > .cmb-sub15__inner-mvp {
    width: 402px;
    margin-inline: auto;
  }
}

/* Sticky-top shared base — el fondo queda pegado al top del viewport mientras
   se scrollea por las secciones del grupo, y se "despega" cuando el grupo termina.
   `overflow:hidden` ROMPE position:sticky, así que NO se aplica al wrapper. */
.cmb-parallax-group {
  position: relative;
  isolation: isolate;
}
.cmb-parallax-group__bg {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh;  /* colapsa el espacio del bg para que las secciones se rendericen encima */
  z-index: -1;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}