@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

*{ margin:0; padding:0; box-sizing:border-box; font-family:"Poppins",sans-serif; }

:root{
  --page-bg:#ffffff;
  --hard-bg:#c7bcbb;
  --body-bg:#f3f2f2;
}

/* ====== FONDO (DESKTOP/TABLET) ====== */
.content-img{
  position:relative;
  background-image:url("/images/revista/Fondo.jpg");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;          /* desktop normal */
  background-color:#0b5ed7;       /* color de respaldo */
  
}

/* ====== LAYOUT BASE ====== */
body{
  background-color:var(--body-bg);
  display:grid;
  place-content:center;
  min-height:100dvh;
  min-width:100vw;
  padding:12px;
  overflow:hidden;                 /* desktop: OK ocultar scroll */
}

.flipbook-wrap{
  width:100%;
  max-width:1100px;
  height:calc(100dvh - 24px);
  display:grid;
  place-items:center;
}

.flipbook{
  width:100%;
  height:auto;
  max-width:1100px;
}

.flipbook .hard{
  background:var(--hard-bg) !important;
  color:#fff; font-weight:700; border:none;
}

.flipbook .page{
  background:var(--page-bg);
  display:flex; justify-content:center; align-items:center;
  gap:10px; border:1px solid rgba(0,0,0,.11);
}
.page img{ width:98%; height:98%; object-fit:contain; display:block; }

/* ====== PANTALLAS MUY ANCHAS: EVITAR CORTE INFERIOR ====== */
@media (min-width:1800px){
  .content-img{
    background-size:100% auto;     /* llena por ancho, no recorta alto */
    background-position:top center;
  }
}

/* ====== MOBILE GENERAL (≤ 820px) ====== */
@media (max-width:820px){
  /* 1) Usar arte vertical móvil */
  .content-img{
    background-image:url("/images/revista/Fondo-Movil.jpg");
    background-repeat:no-repeat;
    background-position:top center;
    /* el size lo definimos por aspect-ratio abajo */
  }

  /* 2) Evitar cortes por alto dinámico del navegador */
  body{
    overflow:auto;                 /* permitir scroll si el vh efectivo baja */
    min-height:100svh;             /* svh maneja barras móviles */
  }

  .flipbook-wrap{
    height:auto;                   /* no fijar 100dvh en mobile */
    min-height:calc(100svh - 16px);
    display:grid; place-items:center;
  }
}

/* ====== MOBILE FINO (portrait alto): llenar por ALTO ====== */
@media (max-width:820px) and (max-aspect-ratio: 10/16){
  .content-img{
    background-size:auto 100svh;   /* colapsa por alto, sin recortes */
  }
}

/* ====== MOBILE más “cuadrado”: llenar por ANCHO ====== */
@media (max-width:820px) and (min-aspect-ratio: 10/16){
  .content-img{
    background-size:100vw auto;    /* colapsa por ancho, sin recortes */
  }
}

/* ====== EXTRA: ≤ 480px aún más estricto ====== */
@media (max-width:480px){
  /* Reafirmamos estrategia por alto para los teléfonos más altos y estrechos */
  .content-img{
    background-position:top center;
  }
  /* Afinar aún más por relación de aspecto en los más estrechos */
  @media (max-aspect-ratio: 9/19){
    .content-img{ background-size:auto 94svh; }  /* muy alto: por alto */
  }
  @media (min-aspect-ratio: 9/19){
    .content-img{ background-size:94vw auto; }   /* menos alto: por ancho */
  }

  /* IMPORTANTE: nada de padding en .content-img en mobile */
  /* Si necesitás “mover” el flipbook a la derecha, aplicá margen/padding
     en .flipbook-wrap, NUNCA en .content-img, para no desplazar el fondo. */
}