  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f7f7f7;
      color: #222;
      margin: 0;
      padding: 0;
      line-height: 1.6;
    }

    .container {
      max-width: 700px;
      margin: auto;
      background: #ffffff;
      padding: 40px 30px;
    }

    h1 {
      font-size: 32px;
      margin-bottom: 20px;
    }

    h2 {
      margin-top: 40px;
      font-size: 28px;
    }

    p {
      margin-bottom: 18px;
      font-size: 17px;
    }

    ul {
      margin: 20px 0;
      padding-left: 20px;
    }

    li {
      margin-bottom: 10px;
    }

    .highlight {
      background: #fff3cd;
      padding: 15px;
      border-left: 4px solid #ffc107;
      margin: 25px 0;
    }

    .price {
      font-size: 32px;
      font-weight: bold;
      margin: 20px 0;
    }

    .old-price {
      text-decoration: line-through;
      color: #888;
      font-size: 18px;
    }

    .cta {
      margin: 30px 0;
      text-align: center;
    }

    footer {
      text-align: center;
      font-size: 14px;
      color: #777;
      margin-top: 40px;
    }
    
    /* Ajuste automático para todas las imágenes de libros */
img {
    max-width: 100%;  /* No permite que la imagen sea más ancha que la pantalla */
    height: auto;      /* Mantiene la proporción para que no se vea estirada */
    display: block;
    margin: 0 auto;    /* Las centra automáticamente en el móvil */
}

/* Si usas contenedores para los libros, haz que se apilen uno debajo de otro */
.contenedor-libros { 
    display: flex;
    flex-wrap: wrap;   /* Si no caben de lado, los manda abajo */
    justify-content: center;
}


/* Esto hará que todas las imágenes se adapten al móvil 
img {
    max-width: 100%;
    height: auto !important; /* El !important anula el 'height: 900px' que tienes en el HTML */
}
*/

img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
}

/* Ajuste opcional para el contenedor principal */
.container {
    padding: 15px; /* Para que el texto no pegue en los bordes del móvil */
    max-width: 800px; /* Para que en PC no se vea infinitamente ancho */
    margin: 0 auto;
}

/* Centrar h1 y h2 en móvil */
h1, h2 {
    font-size: 1.5rem; /* Reduce un poco el tamaño del título en móvil */
    text-align: center;
}
  </style>