.book-frame{
    position:relative;
    --book-paper:#f8f0dd;
    --book-paper-2:#f2e6c9;
    --book-ink:#3c2c17;
    --book-ink-soft:#6b5738;
    --book-gold:#9c7d4f;
    --book-gold-light:#c9b385;
    --book-line:#d8c49c;

    border-radius:2px;
    padding: 40px 46px 30px;
    background:
      repeating-linear-gradient(0deg, rgba(156,125,79,0.035) 0px, transparent 1px, transparent 3px),
      radial-gradient(140% 100% at 50% 0%, #fdf7e8, var(--book-paper) 65%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 26px 50px -26px rgba(60,44,23,.38),
      0 2px 6px rgba(60,44,23,.10);
    border:2px double var(--book-gold);
    max-width: 1200px;
    margin: -85px 50px 50px 310.15px;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* marco ornamentado en las esquinas, sin marcado extra en el HTML */
  .book-frame::after{
    content:"";
    position:absolute; inset:12px;
    pointer-events:none;
    background:
      linear-gradient(var(--book-gold),var(--book-gold)) top left / 20px 1px no-repeat,
      linear-gradient(var(--book-gold),var(--book-gold)) top left / 1px 20px no-repeat,
      linear-gradient(var(--book-gold),var(--book-gold)) top right / 20px 1px no-repeat,
      linear-gradient(var(--book-gold),var(--book-gold)) top right / 1px 20px no-repeat,
      linear-gradient(var(--book-gold),var(--book-gold)) bottom left / 20px 1px no-repeat,
      linear-gradient(var(--book-gold),var(--book-gold)) bottom left / 1px 20px no-repeat,
      linear-gradient(var(--book-gold),var(--book-gold)) bottom right / 20px 1px no-repeat,
      linear-gradient(var(--book-gold),var(--book-gold)) bottom right / 1px 20px no-repeat;
    opacity:.75;
  }
  .book-frame::before{ /* sombra de lomo, se conserva pero suavizada al tono cálido */
    content:"";
    position:absolute; left:0; top:0; bottom:0; width:22px;
    background:linear-gradient(90deg, rgba(60,44,23,.13), transparent);
    pointer-events:none; z-index:1;
  }
  @media (max-width: 860px){
    .book-frame{ margin: 0 24px; padding: 32px 30px 24px; }
  }
  @media (max-width: 620px){
    .book-frame{ margin: 0 14px; padding: 26px 18px 18px; }
  }
  @media (max-width: 400px){
    .book-frame{ margin: 0 10px; padding: 20px 12px 14px; }
  }

  .book-top{
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;
    gap:8px;
    margin-bottom:26px;
    padding-bottom:18px;
    text-align:center;
    position:relative;
    z-index:2;
  }
  .book-top .count{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:19px;
    color:var(--book-ink-soft);
    order:1;
  }
  .book-top .count b{color:var(--book-ink);font-weight:600; font-style:normal;}
  .book-top::after{
    content:"❧";
    display:block;
    order:2;
    font-size:13px;
    color:var(--book-gold);
    position:relative;
    width:70px;
    text-align:center;
    line-height:1;
  }
  .book-top::before{
    content:"";
    order:2;
    display:block;
    width:100%;
    max-width:340px;
    height:1px;
    background:var(--book-gold-light);
    margin-top:2px;
  }
  .page-indicator{
    display:flex; gap:8px;
    order:3;
    justify-content:center;
  }
  .page-indicator .dot{
    width:14px;height:1px;background:var(--book-gold-light);
    transition:background .35s ease, width .35s ease;
    cursor:pointer;
  }
  .page-indicator .dot.active{background:var(--book-gold); width:26px;}
  @media (max-width: 620px){
    .book-top{ margin-bottom:18px; padding-bottom:14px; }
    .book-top .count{ font-size:15.5px; }
  }

  .book-stage{
    perspective: 2600px;
    position:relative;
    min-height: 200px;
    transition: height .35s ease;
    overflow: hidden;
    z-index:2;
  }

  .leaf{
    position:absolute; inset:0;
    transform-style:preserve-3d;
    transform-origin:left center;
    backface-visibility:hidden;
    will-change:transform;
  }
  .leaf.static-behind{ z-index:1; }
  .leaf.turning{ z-index:5; }

  .leaf-face{
    position:absolute; inset:0;
    backface-visibility:hidden;
    background:linear-gradient(120deg,#fdf8ec,#f3e7c9);
  }
  .leaf-face.back{
    transform: rotateY(180deg);
  }

  .curl-shadow{
    position:absolute; inset:0;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(60,44,23,0) 70%, rgba(60,44,23,.18) 100%);
    opacity:0;
    transition:opacity .2s linear;
  }

  .grid-products{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px 16px;
    padding: 4px 6px 6px;
  }
  @media (max-width:860px){ .grid-products{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:620px){ .grid-products{grid-template-columns:repeat(2,1fr); gap:14px 12px; padding:2px 2px 4px;} }
  @media (max-width:380px){ .grid-products{grid-template-columns:repeat(1,1fr);} }

  .card-product{
    background:#fffdf6;
    border:1px solid var(--book-gold-light);
    border-radius:1px;
    overflow:hidden;
    display:flex; flex-direction:column;
    text-align:center;
    text-decoration:none; color:inherit;
    box-shadow:0 4px 10px rgba(60,44,23,.10);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    opacity:0; transform:translateY(10px);
  }
  .card-product.in{ opacity:1; transform:translateY(0); }
  .card-product:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 24px -12px rgba(60,44,23,.32);
    border-color:var(--book-gold);
  }
  .card__img{
    aspect-ratio:1/1;
    background:#fdf9ef;
    display:flex;align-items:center;justify-content:center;
    padding:14px;
    border-bottom:1px solid var(--book-gold-light);
  }
  .card__img img{width:100%;height:100%;object-fit:contain; filter:sepia(.12);}
  .card__body{padding:12px 12px 15px;}
  .card__body .name{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    font-size:15.5px;
    line-height:1.2;
    margin:0 0 4px;
    letter-spacing:.01em;
    color:var(--book-ink);
  }
  .card__body .size{
    font-size:10.5px;
    font-style:italic;
    color:var(--book-ink-soft);
    letter-spacing:.02em;
  }
  @media (max-width: 620px){
    .card__img{ padding:9px; }
    .card__body{ padding:9px 9px 11px; }
    .card__body .name{ font-size:14px; }
    .card__body .size{ font-size:9.5px; }
  }

  /* ---------- Controls ---------- */
  .book-controls{
    display:flex; align-items:center; justify-content:center;
    gap:20px;
    margin-top: 30px;
    position:relative;
    z-index:2;
  }
  .nav-btn{
    width:38px;height:38px;border-radius:50%;
    border:1px solid var(--book-gold);
    background:transparent;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:all .25s ease;
    color:var(--book-ink-soft);
  }
  .nav-btn:hover{background:var(--book-gold); color:#fdf8ec; transform:scale(1.05);}
  .nav-btn:active{transform:scale(.95);}
  .nav-btn svg{width:15px;height:15px;}

  .btn-more{
    appearance:none;
    border:1px solid var(--book-gold);
    outline:1px solid var(--book-gold);
    outline-offset:3px;
    background:transparent;
    color:var(--book-ink);
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:15px; letter-spacing:.03em;
    padding:11px 26px;
    border-radius:1px;
    cursor:pointer;
    display:inline-flex; align-items:center; gap:9px;
    transition:background .3s ease, color .3s ease, transform .2s ease;
  }
  .btn-more:hover{background:var(--book-gold); color:#fdf8ec;}
  .btn-more:active{transform:scale(.98);}
  .btn-more svg{width:12px;height:12px; transition:transform .4s ease;}
  .btn-more.loading svg{animation:spin .7s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}

  @media (max-width: 480px){
    .book-controls{ gap:12px; margin-top:20px; }
    .nav-btn{ width:32px; height:32px; }
    .nav-btn svg{ width:13px; height:13px; }
    .btn-more{ padding:9px 16px; font-size:13px; gap:6px; outline-offset:2px; }
  }