/* ═══════════════════════════════════════════════════════════
   PRINCE CLUB DE LIBROS — TIENDA v4  ·  Rediseño profesional
   ═══════════════════════════════════════════════════════════ */

/* ── Barra de progreso de scroll ────────────────────────── */
.scroll-progress{position:fixed;top:0;left:0;height:4px;z-index:9997;background:linear-gradient(90deg,var(--rust) 0%,var(--gold) 50%,var(--sky) 100%);transform-origin:left;transform:scaleX(0);box-shadow:0 1px 4px rgba(42,36,32,0.18);pointer-events:none;}
nav{transition:background 0.25s,box-shadow 0.25s,border-color 0.25s;}
nav.scrolled{background:rgba(250,244,232,0.97);box-shadow:0 2px 0 var(--ink),0 4px 14px rgba(42,36,32,0.10);border-bottom-color:var(--ink);}
.feat-icon{display:inline-block;transform-origin:bottom center;}
.feat:hover .feat-icon{animation:iconBounce 0.5s cubic-bezier(.36,.07,.19,.97);}
@keyframes iconBounce{0%,100%{transform:translateY(0) rotate(0deg);}30%{transform:translateY(-8px) rotate(-8deg);}60%{transform:translateY(-4px) rotate(4deg);}}
.a-num{display:inline-block;}
:root{
  /* ── Paleta Scrapbook / Cuaderno (guía PDF clienta) ──
     Se conservan los nombres --rust, --sky, --gold, --sage
     para no romper NINGÚN selector existente; solo cambian valores. */
  /* Coral (acento primario — antes rust) — PDF brand */
  --rust:#EE7A5A; --rust-dark:#C85A3F; --rust-light:#FBDED2;
  --rust-ink:#8F3A24;
  /* Celeste (acento secundario — antes sky) — PDF brand */
  --sky:#A9D5E0;  --sky-dark:#78B5C8;  --sky-light:#E4F0F4;
  /* Mostaza (acento terciario — antes gold) — PDF brand */
  --gold:#F7CC7A; --gold-dark:#D9A94A; --gold-light:#FDF0D4;
  /* Beige cálido (acento cuaternario — antes sage) — PDF brand */
  --sage:#C9B79E; --sage-light:#EEE5D1;
  /* ── Neutros tipo papel cuaderno ── */
  --ink:#2A2420; --ink2:#4A3F35;
  --paper:#FAF4E8;    /* Crema principal (PDF) */
  --paper2:#F3E8D4;   /* Crema más tostado */
  --cream:#FFFFFF;
  --muted:#8C7D6F;
  --muted2:#B5A595;
  --border:#E8DDC8;
  --border-dark:#D4C4A8;
  /* Tipografía — display chunky + script handwritten + body soft */
  --serif:'Bagel Fat One',cursive;        /* display (Bluberry-like) */
  --script:'Caveat',cursive;              /* handwritten accents */
  --sans:'Quicksand','Nunito',sans-serif; /* body */
  /* Formas */
  --radius-pill:999px;
  --radius-card:18px;
  --radius-sm:10px;
  /* Sombras suaves + ligera rotación tipo sticker */
  --shadow-sm: 0 1px 2px rgba(42,36,32,0.05), 0 2px 6px rgba(232,122,93,0.04);
  --shadow-md: 0 3px 10px rgba(42,36,32,0.07), 0 10px 24px rgba(232,122,93,0.07);
  --shadow-lg: 0 6px 20px rgba(42,36,32,0.09), 0 20px 48px rgba(232,122,93,0.10);
  /* Misc */
  --low-stock:#E87A5D; --out-stock:#A84B35;
  /* Papel cuadriculado (para fondos sin imagen) */
  --grid-paper:
    linear-gradient(rgba(168,213,226,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,213,226,0.22) 1px, transparent 1px);
  --grid-size: 28px 28px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:hidden;}
body{
  font-family:var(--sans);color:var(--ink);font-weight:500;line-height:1.6;overflow-x:hidden;
  background:
    /* papel cuadriculado muy sutil */
    var(--grid-paper),
    /* crema base PDF */
    var(--paper);
  background-size: var(--grid-size), auto;
}

/* ── SCRAPBOOK UTILS ───────────────────────────────────────
   Clases decorativas reutilizables. NO tocan ninguna funcionalidad,
   solo se montan encima como pseudo-elementos o helpers visuales.
   ─────────────────────────────────────────────────────────── */
.scrap-script{font-family:var(--script);font-weight:600;letter-spacing:0.01em;}
.scrap-display{font-family:var(--serif);letter-spacing:-0.01em;line-height:1.05;}

/* Washi tape (cinta decorativa — pseudo-elemento absoluto) */
.washi{position:relative;}
.washi::before{
  content:'';position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:78px;height:22px;
  background:repeating-linear-gradient(45deg,
    var(--gold) 0 6px, var(--gold-light) 6px 12px);
  opacity:0.85;border-radius:2px;
  box-shadow:0 2px 4px rgba(42,36,32,0.12);
  z-index:3;pointer-events:none;
}
.washi-coral::before{
  background:repeating-linear-gradient(45deg,
    var(--rust) 0 6px, var(--rust-light) 6px 12px);
}
.washi-celeste::before{
  background:repeating-linear-gradient(45deg,
    var(--sky) 0 6px, var(--sky-light) 6px 12px);
}

/* Asterisco hand-drawn (SVG inline via background) */
.scrap-aster{
  position:absolute;width:36px;height:36px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23E87A5D' stroke-width='3' stroke-linecap='round' fill='none'%3E%3Cline x1='20' y1='6' x2='20' y2='34'/%3E%3Cline x1='6' y1='20' x2='34' y2='20'/%3E%3Cline x1='10' y1='10' x2='30' y2='30'/%3E%3Cline x1='30' y1='10' x2='10' y2='30'/%3E%3C/g%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
  animation:scrap-spin 12s linear infinite;
}
@keyframes scrap-spin{to{transform:rotate(360deg);}}

/* Flecha punteada hand-drawn (para conectar secciones) */
.scrap-arrow{
  position:absolute;width:120px;height:60px;pointer-events:none;opacity:0.7;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M5 30 Q 40 5, 80 25 T 110 40' fill='none' stroke='%232A2420' stroke-width='2' stroke-linecap='round' stroke-dasharray='2 6'/%3E%3Cpath d='M100 32 L112 40 L102 48' fill='none' stroke='%232A2420' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
}

/* Marco "papel rasgado" (torn edge arriba + abajo) */
.torn-paper{
  position:relative;
  mask-image:
    linear-gradient(#000,#000),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q 30 2, 60 8 T 120 6 T 180 10 T 240 4 T 300 8 T 360 10 T 420 6 T 480 8 T 540 4 T 600 10 T 660 6 T 720 8 T 780 4 T 840 10 T 900 6 T 960 8 L 1000 0 L 0 0 Z' fill='white'/%3E%3C/svg%3E");
}

/* Sticker / etiqueta inclinada */
.scrap-sticker{
  display:inline-block;
  padding:6px 14px;
  background:var(--gold);
  color:var(--ink);
  font-family:var(--script);
  font-weight:700;font-size:1.15rem;
  border-radius:4px;
  transform:rotate(-2deg);
  box-shadow:2px 2px 0 rgba(42,36,32,0.15);
}
.scrap-sticker.coral{background:var(--rust);color:#fff;}
.scrap-sticker.celeste{background:var(--sky);}

/* Overlay crema sobre fondos personalizados — SOLO se activa cuando hay imagen */
.hero[style*="background-image"]::after,
.catalog[style*="background-image"]::after,
.about[style*="background-image"]::after,
footer[style*="background-image"]::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,
    rgba(250,244,232,0.72) 0%,
    rgba(250,244,232,0.55) 40%,
    rgba(250,244,232,0.72) 100%);
}
.hero[style*="background-image"] > *,
.catalog[style*="background-image"] > *,
.about[style*="background-image"] > *,
footer[style*="background-image"] > *{
  position:relative;z-index:1;
}

/* ══════════════════════════════════════════════════════════
   NAV — Limpio, con personalidad
   ══════════════════════════════════════════════════════════ */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(250,244,232,0.94);
  backdrop-filter:blur(12px) saturate(1.05);
  -webkit-backdrop-filter:blur(12px) saturate(1.05);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 2rem;height:72px;gap:1rem;
  border-bottom:2px solid var(--ink);
  box-shadow:0 2px 0 var(--gold-light);
}
/* Franja de color animada al fondo del nav */
nav::after{
  content:'';position:absolute;bottom:-4px;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--rust),var(--gold),#A9D5E0,var(--rust));
  background-size:200% 100%;
  animation:navStripe 4s linear infinite;
  border-radius:0 0 2px 2px;
}
@keyframes navStripe{0%{background-position:0% 0%;}100%{background-position:200% 0%;}}
/* Icono en nav links */
.nav-icon{
  font-size:0.85rem;
  display:inline-block;
  transition:transform 0.2s ease;
}
.nav-left a:hover .nav-icon{transform:scale(1.3) rotate(-5deg);}
/* Logo bounce al hover */
.nav-left{display:flex;gap:1.4rem;align-items:center;}
.nav-left a{
  color:var(--ink2);text-decoration:none;
  font-size:0.9rem;font-weight:700;letter-spacing:0.02em;
  transition:all 0.2s;position:relative;padding:6px 2px;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-right-link{
  color:var(--ink2);text-decoration:none;
  font-size:0.9rem;font-weight:700;letter-spacing:0.02em;
  transition:all 0.2s;position:relative;padding:6px 2px;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-right-link::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--rust);transform:scaleX(0);
  transform-origin:left;transition:transform 0.3s ease;
}
.nav-right-link:hover{color:var(--rust);}
.nav-right-link:hover::after{transform:scaleX(1);}
.nav-right-link:hover .nav-icon{transform:scale(1.3) rotate(-5deg);}
.nav-left a::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--gold);opacity:0;transform:scale(0);
  transition:all 0.25s ease;
}
.nav-left a:hover::before{opacity:1;transform:scale(1);}
.nav-left a::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--rust);transform:scaleX(0);
  transform-origin:left;transition:transform 0.3s ease;
}
.nav-left a:hover{color:var(--rust);}
.nav-left a:hover::after{transform:scaleX(1);}
/* Pequeña etiqueta scrapbook "menú ↓" arriba de los links */
.nav-left::before{
  content:'★ explora';
  position:absolute;top:-4px;left:0;
  font-family:var(--script);font-size:0.7rem;color:var(--rust);
  font-weight:700;opacity:0.6;transform:rotate(-3deg);
  pointer-events:none;
}
.nav-left{position:relative;padding-top:8px;}
.nav-logo{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--serif);font-size:1.3rem;font-weight:400;
  color:var(--ink);text-align:center;white-space:nowrap;
  text-decoration:none;
  transform:rotate(-1.5deg);transform-origin:center;
}
.nav-logo img{
  height:56px;width:auto;display:block;
  filter:drop-shadow(2px 3px 0 rgba(42,36,32,0.15));
}
.nav-logo em{
  color:var(--rust);font-style:normal;font-family:var(--script);
  font-size:1.55em;font-weight:700;display:inline-block;
  line-height:1;transform:rotate(3deg);margin:0 2px;
}
.nav-right{display:flex;justify-content:flex-end;align-items:center;gap:1rem;}
.cart-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--ink);border:none;color:var(--paper);cursor:pointer;
  padding:9px 20px;font-family:var(--sans);font-size:0.78rem;font-weight:700;
  border-radius:var(--radius-pill);
  transition:background 0.2s ease, transform 0.15s ease;
  letter-spacing:0.01em;
}
.cart-btn:hover{background:var(--rust);transform:translateY(-1px);}
.cart-n{background:rgba(255,255,255,0.25);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:800;}

/* ── WISHLIST ─────────────────────────────────────────── */
.wl-btn{
  background:none;border:none;cursor:pointer;
  font-size:1.4rem;line-height:1;padding:6px 8px;
  border-radius:var(--radius-pill);position:relative;
  transition:transform 0.2s;
}
.wl-btn:hover{transform:scale(1.2);}
.wl-n{
  position:absolute;top:-2px;right:-2px;
  background:var(--rust);color:#fff;border-radius:50%;
  width:16px;height:16px;display:flex;align-items:center;justify-content:center;
  font-size:0.55rem;font-weight:800;
}
.wl-n.hidden{display:none;}
/* Corazón en tarjeta */
.card-wl{
  position:absolute;top:10px;right:10px;z-index:5;
  background:rgba(255,255,255,0.85);backdrop-filter:blur(4px);
  border:none;cursor:pointer;border-radius:50%;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-size:1rem;transition:transform 0.2s,background 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.card-wl:hover{transform:scale(1.15);background:#fff;}
.card-wl.activo{background:#fff0ee;}

/* ── MODAL LEGAL ──────────────────────────────────────── */
.legal-bg{
  position:fixed;inset:0;z-index:2000;
  background:rgba(30,27,23,0.6);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
  padding:1rem;
}
.legal-bg.open{display:flex;}
.legal-box{
  background:#fff;border-radius:16px;width:100%;max-width:680px;
  max-height:88vh;overflow-y:auto;padding:2.5rem 2rem;position:relative;
  box-shadow:0 24px 64px rgba(0,0,0,0.2);
}
.legal-close{
  position:absolute;top:1rem;right:1rem;
  background:none;border:none;font-size:1.5rem;cursor:pointer;
  color:var(--muted);line-height:1;
}
.legal-box h2{font-family:var(--serif);font-size:1.6rem;color:var(--rust);margin-bottom:1.5rem;}
.legal-box h3{font-size:1rem;font-weight:700;margin:1.2rem 0 0.4rem;color:var(--ink);}
.legal-box p,.legal-box li{font-size:0.88rem;color:var(--ink2);line-height:1.75;margin-bottom:0.5rem;}
.legal-box ul{padding-left:1.2rem;margin-bottom:0.8rem;}
.legal-box .legal-fecha{font-size:0.75rem;color:var(--muted);margin-bottom:1.2rem;}

/* ── DELIVERY BADGE ───────────────────────────────────── */
.delivery-row{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--sky-light);border:1px solid var(--sky);
  border-radius:8px;padding:0.55rem 0.8rem;margin-bottom:0.6rem;
  font-size:0.82rem;
}
.delivery-row span:first-child{color:var(--sky-dark);font-weight:600;}
.delivery-row strong{color:var(--ink);}

/* ══════════════════════════════════════════════════════════
   HERO — Impactante, basado en el espíritu del logo
   ══════════════════════════════════════════════════════════ */
.hero{
  background:
    /* Papel rasgado coral arriba-izquierda */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L400 0 L400 40 Q 360 55 320 42 T 240 48 T 160 35 T 80 50 T 0 38 Z' fill='%23FBDED2' opacity='0.55'/%3E%3C/svg%3E") top left / 55% 80px no-repeat,
    /* Papel rasgado mostaza arriba-derecha */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L400 0 L400 30 Q 360 50 320 38 T 240 42 T 160 30 T 80 45 T 0 32 Z' fill='%23FDF0D4' opacity='0.75'/%3E%3C/svg%3E") top right / 45% 70px no-repeat,
    /* papel cuadriculado sutil */
    linear-gradient(rgba(169,213,224,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,213,224,0.22) 1px, transparent 1px),
    linear-gradient(180deg,var(--paper) 0%,#F7E9CC 100%);
  background-size: 55% 80px, 45% 70px, 28px 28px, 28px 28px, auto;
  min-height:calc(100vh - 68px);
  display:grid;
  grid-template-columns:0.52fr 1.96fr 0.52fr;
  align-items:end;
  overflow:hidden;position:relative;
}
/* El texto del hero centrado verticalmente, libritos también centrados */
.hero > .hero-text,
.hero > .hero-left,
.hero > .hero-right{align-self:center;}
/* Capa de fondo desde Firestore — fade-in sobre el gradiente */
.hero-bg-layer{
  position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.2s ease;
  background-size:cover;background-position:center;pointer-events:none;
}
/* Forzamos el contenido del hero por encima de la imagen */
.hero > .hero-text,
.hero > .hero-left,
.hero > .hero-right{position:relative;z-index:2;}
/* Halo crema SOLO detrás del texto (título + descripción + botones) */
.hero > .hero-text::before{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%, -50%);
  width:min(620px, 95%);height:min(440px, 95%);
  background:radial-gradient(ellipse at center,
    rgba(250,244,232,0.92) 0%,
    rgba(250,244,232,0.78) 45%,
    rgba(250,244,232,0.35) 75%,
    rgba(250,244,232,0) 100%);
  z-index:-1;pointer-events:none;
  border-radius:50%;
  filter:blur(12px);
}
/* Asterisco hand-drawn flotante (izquierda arriba) */
.hero::before{
  content:'';position:absolute;top:14%;left:6%;width:44px;height:44px;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23E87A5D' stroke-width='3' stroke-linecap='round' fill='none'%3E%3Cline x1='20' y1='6' x2='20' y2='34'/%3E%3Cline x1='6' y1='20' x2='34' y2='20'/%3E%3Cline x1='10' y1='10' x2='30' y2='30'/%3E%3Cline x1='30' y1='10' x2='10' y2='30'/%3E%3C/g%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
  animation:scrap-spin 14s linear infinite;
  pointer-events:none;opacity:0.85;
}
/* Borde rasgado inferior + asterisco mostaza derecha */
.hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:22px;z-index:2;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 22' preserveAspectRatio='none'%3E%3Cpath d='M0 22 L0 10 Q 30 2, 60 8 T 120 6 T 180 10 T 240 4 T 300 8 T 360 10 T 420 6 T 480 8 T 540 4 T 600 10 T 660 6 T 720 8 T 780 4 T 840 10 T 900 6 T 960 8 L 1000 10 L 1000 22 Z' fill='%23FAF4E8'/%3E%3C/svg%3E") bottom center / 100% 22px no-repeat;
  pointer-events:none;
}
.hero-text{
  padding:2rem 2rem;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;position:relative;z-index:2;
  min-width:0;
}
/* ── Decoraciones flotantes scrapbook del hero ── */
.hero-text::after{
  /* Flecha curva señalando el CTA */
  content:'';position:absolute;bottom:4rem;right:5%;
  width:70px;height:80px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 80'%3E%3Cpath d='M10 10 Q 40 10 55 35 Q 62 50 45 65' fill='none' stroke='%23C85A3F' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='5 4'/%3E%3Cpath d='M38 58 L45 65 L52 56' fill='none' stroke='%23C85A3F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='8' y='6' font-family='Georgia,serif' font-size='9' fill='%23C85A3F' font-style='italic'%3E%C2%A1explora!%3C/text%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(8deg);pointer-events:none;
  animation:heroBob 3s ease-in-out infinite;
  z-index:3;
}
@keyframes heroSpin{to{transform:rotate(360deg);}}
/* ── Hero entrance — CSS puro, sin esperar GSAP ─────────── */
@keyframes heroIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.hero-tag  {animation:heroIn 0.5s ease both;animation-delay:0.05s;}
.hero-h1   {animation:heroIn 0.55s ease both;animation-delay:0.18s;}
.hero-p    {animation:heroIn 0.5s ease both;animation-delay:0.32s;}
.hero-btns {animation:heroIn 0.5s ease both;animation-delay:0.44s;}
.hero-trust{animation:heroIn 0.5s ease both;animation-delay:0.55s;}
/* ── Pre-ocultar elementos animados por GSAP (scroll) ───── */
/* Evita el flash: están ocultos por CSS, GSAP los revela */
.feats > *{opacity:0;transform:translateY(35px);}
.sec-head{opacity:0;transform:translateY(20px);}
.footer-col{opacity:0;transform:translateY(20px);}
#covers-left{opacity:0;transform:translateX(-40px);}
#covers-right{opacity:0;transform:translateX(40px);}
/* Failsafe: si GSAP no carga en 4s, mostrar todo */
.gsap-loaded .feats > *,
.gsap-loaded .sec-head,
.gsap-loaded .footer-col,
.gsap-loaded #covers-left,
.gsap-loaded #covers-right{opacity:unset;transform:unset;}
@keyframes heroBob{0%,100%{transform:rotate(8deg) translateY(0);}50%{transform:rotate(10deg) translateY(-6px);}}
.hero-tag{
  font-family:var(--script);
  font-size:1.35rem;font-weight:600;color:var(--rust-ink);
  margin-bottom:1.1rem;
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--gold);padding:4px 18px;
  border-radius:4px;width:fit-content;
  transform:rotate(-2deg);
  box-shadow:2px 2px 0 rgba(42,36,32,0.15);
  letter-spacing:0.02em;text-transform:none;
}
.hero-h1{
  font-family:var(--serif);
  font-size:clamp(2rem,3.4vw,3.2rem);
  line-height:1;color:var(--ink);font-weight:400;
  margin-bottom:0.8rem;letter-spacing:-0.01em;
  white-space:nowrap;
}
.hero-h1 em{
  color:var(--rust);font-style:normal;display:block;
  font-family:var(--script);font-weight:700;
  font-size:1.15em;line-height:0.9;
  transform:rotate(-2deg);transform-origin:center;
  margin-top:4px;
  text-shadow:2px 2px 0 var(--gold-light);
}
.hero-p{
  color:var(--ink2);font-size:1.05rem;line-height:1.6;
  max-width:480px;margin-bottom:1.6rem;text-align:center;font-weight:500;
}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.btn-gold{
  padding:13px 30px;background:var(--rust);color:#fff;
  border:2px solid var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:0.88rem;font-weight:700;
  border-radius:var(--radius-pill);
  transition:transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-decoration:none;display:inline-block;
  letter-spacing:0.02em;
  box-shadow:3px 3px 0 var(--ink);
}
.btn-gold:hover{
  background:var(--rust-dark);
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--ink);
}
.btn-gold:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.btn-ghost{
  padding:13px 30px;background:var(--sky);color:var(--ink);
  border:2px solid var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:0.88rem;font-weight:700;
  border-radius:var(--radius-pill);
  transition:transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-decoration:none;display:inline-block;
  letter-spacing:0.02em;
  box-shadow:3px 3px 0 var(--ink);
}
.btn-ghost:hover{
  background:var(--sky-dark);color:#fff;
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--ink);
}
.btn-ghost:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.hero-left{
  display:flex;align-items:center;justify-content:flex-end;
  padding:0 0.5rem 0 0.8rem;overflow:visible;min-height:340px;
  position:relative;
  margin-top:22rem; /* baja los libritos */
}
.hero-right{
  display:flex;align-items:center;justify-content:flex-start;
  padding:0 0.8rem 0 0.5rem;overflow:visible;min-height:340px;
  position:relative;
  margin-top:22rem;
}
/* Sticker "NUEVO" rotado sobre los libros izquierda */
.hero-left::before{
  content:'';position:absolute;top:-1rem;left:1.2rem;z-index:4;
  width:78px;height:78px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='34' fill='%23EE7A5A' stroke='%232A2420' stroke-width='2.5'/%3E%3Ccircle cx='40' cy='40' r='34' fill='none' stroke='%23FAF4E8' stroke-width='1.5' stroke-dasharray='2 3'/%3E%3Ctext x='40' y='33' text-anchor='middle' font-family='Georgia,serif' font-size='11' fill='%23FAF4E8' font-style='italic'%3Enuevos%3C/text%3E%3Ctext x='40' y='48' text-anchor='middle' font-family='Georgia,serif' font-size='9' fill='%23FAF4E8'%3Ey usados%3C/text%3E%3Ctext x='40' y='59' text-anchor='middle' font-family='Georgia,serif' font-size='7' fill='%23FAF4E8' opacity='0.85'%3E%E2%98%85 %E2%98%85 %E2%98%85%3C/text%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(-12deg);
  filter:drop-shadow(3px 3px 0 rgba(42,36,32,0.25));
  animation:heroBob2 4s ease-in-out infinite;
}
/* Corazón scrapbook derecha */
.hero-right::after{
  content:'';position:absolute;top:-1rem;right:1.2rem;z-index:4;
  width:54px;height:54px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M27 48 C 6 34, 6 14, 18 10 C 24 8, 27 14, 27 14 C 27 14, 30 8, 36 10 C 48 14, 48 34, 27 48 Z' fill='%23EE7A5A' stroke='%232A2420' stroke-width='2'/%3E%3Cpath d='M22 20 Q 27 15 32 20' stroke='%23FAF4E8' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(15deg);
  filter:drop-shadow(2px 2px 0 rgba(42,36,32,0.2));
  animation:heroBob3 3.2s ease-in-out infinite;
}
@keyframes heroBob2{0%,100%{transform:rotate(-12deg) translateY(0);}50%{transform:rotate(-9deg) translateY(-5px);}}
@keyframes heroBob3{0%,100%{transform:rotate(15deg) scale(1);}50%{transform:rotate(12deg) scale(1.08);}}
/* Contenedor de portadas — fila horizontal dentro de cada lado */
.covers-row{
  display:flex;align-items:flex-end;gap:6px;
  flex-wrap:nowrap;overflow:visible;
  padding:0;
}
/* Portadas con leve rotación alterna scrapbook */
.covers-row .hero-cover:nth-child(odd){transform:rotate(-2deg);}
.covers-row .hero-cover:nth-child(even){transform:rotate(2deg) translateY(-3px);}
.covers-row .hero-cover:nth-child(3n){transform:rotate(-3deg) translateY(-6px);}
.covers-col{display:contents;}
/* Portada individual en el hero */
.hero-cover{
  width:70px;height:102px;
  border-radius:3px 8px 8px 3px;
  overflow:hidden;cursor:pointer;flex-shrink:0;
  box-shadow:3px 5px 14px rgba(42,36,32,0.22);
  transition:transform 0.35s cubic-bezier(.34,1.56,.64,1),box-shadow 0.35s;
  position:relative;
  border:1.5px solid var(--ink);
}
.hero-cover:hover{transform:translateY(-10px) scale(1.08);box-shadow:5px 12px 24px rgba(42,36,32,0.34);z-index:3;}
.hero-cover img{width:100%;height:100%;object-fit:cover;display:block;}
/* Fallback sin portada: lomo de color */
.hero-cover-fb{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;font-family:var(--serif);font-size:0.52rem;font-weight:700;
  color:rgba(255,255,255,0.92);padding:4px 3px;text-align:center;line-height:1.2;
  overflow:hidden;
}
/* Lomos legacy — se mantiene por compatibilidad con GSAP */
.spine{display:none;}
.spines-row{display:none;}

/* ══════════════════════════════════════════════════════════
   MARQUEE — banda scrapbook (washi-tape feel)
   ══════════════════════════════════════════════════════════ */
.marquee{
  background:var(--ink);
  padding:12px 0;overflow:hidden;white-space:nowrap;
  border-top:3px solid var(--rust);
  border-bottom:3px solid var(--rust);
  position:relative;
}
.marquee::before,
.marquee::after{
  content:'✦';position:absolute;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:1rem;z-index:2;pointer-events:none;
}
.marquee::before{left:10px;}
.marquee::after{right:10px;}
.mq-inner{display:inline-block;animation:mq 32s linear infinite;}
.mq-inner span{
  font-family:var(--script);
  font-size:1.05rem;letter-spacing:0.02em;color:#fff;font-weight:700;
  margin:0 1.6rem;text-transform:none;
}
.mq-inner span.dot{opacity:0.6;margin:0 0.5rem;color:var(--gold);font-size:0.9rem;}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════════════════════════════════════════════════════
   FEATURES — Cards con color accent
   ══════════════════════════════════════════════════════════ */
.feats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:2px solid var(--ink);background:var(--cream);
  border-top:2px solid var(--ink);
}
.feat{
  padding:2.4rem 1.8rem;
  border-right:2px dashed var(--border-dark);
  display:flex;gap:1.1rem;align-items:flex-start;
  transition:background 0.3s ease;
  position:relative;overflow:hidden;
}
.feat::before{
  content:'';position:absolute;bottom:0;left:1.8rem;right:1.8rem;height:3px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.4s ease;
  background:var(--rust);
}
.feat:nth-child(2)::before{background:var(--sky);}
.feat:nth-child(3)::before{background:var(--gold);}
.feat:nth-child(4)::before{background:var(--sage);}
.feat:hover::before{transform:scaleX(1);}
.feat:hover{background:var(--paper);}
.feat:last-child{border-right:none;}
.feat-icon{
  font-size:1.8rem;flex-shrink:0;margin-top:2px;opacity:0.9;
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:var(--gold-light);
  border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  transition:transform 0.3s ease;
}
.feat:nth-child(1) .feat-icon{background:var(--rust-light);}
.feat:nth-child(2) .feat-icon{background:var(--sky-light);}
.feat:nth-child(3) .feat-icon{background:var(--gold-light);}
.feat:nth-child(4) .feat-icon{background:var(--sage-light);}
.feat:hover .feat-icon{transform:translate(-1px,-1px) rotate(-5deg);box-shadow:3px 3px 0 var(--ink);}
.feat-title{font-family:var(--serif);font-size:1.2rem;margin-bottom:5px;font-weight:400;color:var(--ink);letter-spacing:0;line-height:1.1;}
.feat-body{font-size:0.82rem;color:var(--ink2);line-height:1.6;font-weight:500;}

/* ══════════════════════════════════════════════════════════
   CATÁLOGO
   ══════════════════════════════════════════════════════════ */
.catalog{
  max-width:1400px;margin:0 auto;padding:5rem 2.5rem;position:relative;
}
/* El `hidden` que pone el código no basta por sí solo: esta regla
   declara display:flex y le gana. Es el mismo fallo que ya apareció
   tres veces —.filters, .pf-bg y .cat-barra— así que va escrito aquí
   mismo, pegado a la regla que lo causa. */
.sec-head[hidden]{display:none !important;}
.sec-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:2.5rem;padding-bottom:1.2rem;
  border-bottom:2px dashed var(--border-dark);
  position:relative;
}
.sec-head::before{
  content:'';position:absolute;top:-14px;left:20px;transform:rotate(-4deg);
  width:90px;height:22px;
  background:repeating-linear-gradient(45deg,
    var(--rust) 0 7px, var(--rust-light) 7px 14px);
  opacity:0.9;border-radius:2px;
  box-shadow:0 2px 4px rgba(42,36,32,0.12);
}
.sec-head::after{
  content:'✦';position:absolute;bottom:-14px;left:42%;
  background:var(--paper);color:var(--rust);font-size:1.5rem;
  padding:0 12px;line-height:1;
}
.sec-title{
  font-family:var(--serif);font-size:2.6rem;font-weight:400;
  letter-spacing:0;color:var(--ink);line-height:1;
}
.sec-title em{
  color:var(--rust);font-style:normal;
  font-family:var(--script);font-size:1.2em;font-weight:700;
  display:inline-block;transform:rotate(-2deg);
  text-shadow:2px 2px 0 var(--gold-light);
}
.sec-link{
  font-family:var(--script);
  font-size:1.05rem;font-weight:700;letter-spacing:0.01em;
  color:var(--ink);text-decoration:none;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  padding:5px 16px;border:2px solid var(--ink);border-radius:var(--radius-pill);
  background:var(--gold);
  transition:transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow:2px 2px 0 var(--ink);
}
.sec-link:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);background:var(--rust);color:#fff;}

/* ── FILTROS ────────────────────────────────────────────── */
.filters{display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem;flex-wrap:wrap;}
.fsearch{flex:1;min-width:200px;max-width:340px;position:relative;}
.fsearch input{
  width:100%;padding:11px 16px 11px 42px;
  border:1px solid var(--border);background:var(--cream);
  font-family:var(--sans);font-size:0.85rem;color:var(--ink);outline:none;font-weight:500;
  transition:border-color 0.2s, box-shadow 0.2s;border-radius:var(--radius-pill);
}
.fsearch input:focus{border-color:var(--rust);box-shadow:0 0 0 3px rgba(204,120,92,0.1);}
.fsearch input::placeholder{color:var(--muted2);font-weight:400;}
.fsearch-ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:1rem;}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  padding:7px 18px;font-size:0.82rem;font-weight:700;cursor:pointer;
  border:2px solid var(--ink);background:var(--cream);color:var(--ink);
  transition:transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-family:var(--sans);border-radius:var(--radius-pill);
  box-shadow:2px 2px 0 var(--ink);
}
.chip:hover{background:var(--gold-light);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);}
.chip.active{background:var(--rust);color:#fff;}
.chip.an.active{background:var(--sky);color:var(--ink);}
.chip.au.active{background:var(--gold);color:var(--ink);}
.fsel{
  padding:10px 34px 10px 16px;
  border:1px solid var(--border);background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238C7D6F'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance:none;font-family:var(--sans);font-size:0.8rem;color:var(--ink);outline:none;cursor:pointer;font-weight:500;border-radius:var(--radius-pill);
  transition:border-color 0.2s;
}
.fsel:focus{border-color:var(--rust);}
.rcount{margin-left:auto;font-size:0.78rem;color:var(--muted);letter-spacing:0.01em;white-space:nowrap;font-weight:500;}
.cat-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:1.4rem;}
.cat-chip{
  padding:5px 14px;font-size:0.8rem;font-weight:700;cursor:pointer;
  border:2px solid var(--ink);background:var(--cream);color:var(--ink);
  transition:transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-family:var(--sans);border-radius:4px;letter-spacing:0.01em;
  box-shadow:2px 2px 0 var(--ink);
}
.cat-chip:nth-child(3n){transform:rotate(-1.5deg);}
.cat-chip:nth-child(3n+1){transform:rotate(1deg);}
.cat-chip:hover{background:var(--sky-light);transform:rotate(0) translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);}
.cat-chip.active{background:var(--rust);color:#fff;transform:rotate(-1deg);}
/* Chip especial de Ofertas */
.cat-chip.oferta-chip{border-color:#FFD700;color:#B8860B;}
.cat-chip.oferta-chip:hover{border-color:var(--rust);color:var(--rust);background:#fff8f0;}
.cat-chip.oferta-chip.active{background:linear-gradient(135deg,var(--rust),#ff8c42);color:#fff;border-color:var(--rust);box-shadow:0 3px 14px rgba(232,99,74,0.4);}

/* ── PRECIOS CON OFERTA ────────────────────────────────────── */
.iprice-wrap{display:flex;flex-direction:column;gap:1px;}
.iprice-old{font-size:0.72rem;color:var(--muted);text-decoration:line-through;line-height:1.2;}
.iprice-oferta{color:var(--rust);font-weight:800;}
.iprice-badge{display:inline-flex;align-items:center;background:var(--rust);color:#fff;border-radius:4px;padding:1px 6px;font-size:0.62rem;font-weight:800;margin-left:4px;vertical-align:middle;}
/* Ribbon de oferta en tarjeta */
.r-oferta{background:linear-gradient(135deg,var(--rust),#ff6b35)!important;color:#fff!important;}

/* ══════════════════════════════════════════════════════════
   SEGUNDA MANO — look scrapbook/cuaderno (en vez de oscuro)
   ══════════════════════════════════════════════════════════ */
.smano-section{
  background:
    /* papel rasgado arriba */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1000 0 L1000 12 Q 960 22 920 14 T 840 18 T 760 10 T 680 20 T 600 12 T 520 6 T 440 18 T 360 10 T 280 20 T 200 12 T 120 6 T 40 18 L0 14 Z' fill='%23FBDED2'/%3E%3C/svg%3E") top center / 100% 24px no-repeat,
    /* cuadrícula celeste sutil */
    linear-gradient(rgba(169,213,224,0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,213,224,0.28) 1px, transparent 1px),
    linear-gradient(180deg, var(--sky-light) 0%, #F1FAFD 100%);
  background-size: 100% 24px, 30px 30px, 30px 30px, auto;
  padding:5rem 2.5rem 4rem;
  position:relative;
  overflow:hidden;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
}
/* Sin overlay — la imagen de fondo se ve completa */
.smano-section::before{display:none;}
.smano-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;position:relative;z-index:1;}
.smano-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gold);color:var(--ink);
  border-radius:4px;padding:5px 16px;
  font-family:var(--script);font-size:1rem;font-weight:700;letter-spacing:0.02em;text-transform:none;
  margin-bottom:1rem;transform:rotate(-2deg);
  box-shadow:2px 2px 0 rgba(42,36,32,0.15);
  border:none;
}
.smano-h2{
  font-family:var(--serif);font-size:2.8rem;font-weight:400;
  color:var(--ink);line-height:1;margin-bottom:1.2rem;letter-spacing:-0.01em;
}
.smano-h2 em{
  color:var(--rust);font-style:normal;
  font-family:var(--script);font-weight:700;font-size:1.2em;
  display:inline-block;transform:rotate(-2deg);
  text-shadow:2px 2px 0 var(--gold-light);
}
.smano-p{color:var(--ink2);font-size:0.95rem;line-height:1.75;margin-bottom:1.5rem;font-weight:500;}
.smano-perks{display:flex;flex-direction:column;gap:10px;margin-bottom:2rem;}
.smano-perk{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:0.88rem;font-weight:500;}
.smano-perk span:first-child{
  width:24px;height:24px;background:var(--rust);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:800;flex-shrink:0;
  border:2px solid var(--ink);box-shadow:1px 1px 0 var(--ink);
}
.smano-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--rust);color:#fff;
  padding:14px 32px;
  border-radius:var(--radius-pill);
  font-family:var(--sans);font-size:0.82rem;font-weight:800;letter-spacing:0.02em;
  text-decoration:none;cursor:pointer;border:2px solid var(--ink);
  transition:transform 0.15s, box-shadow 0.2s, background 0.2s;
  box-shadow:3px 3px 0 var(--ink);text-transform:none;
}
.smano-cta:hover{background:var(--rust-dark);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.smano-books{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.smano-book{
  background:#fff;
  border:2px solid var(--ink);
  border-radius:12px;padding:1rem;text-align:center;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform 0.2s, box-shadow 0.2s;
}
.smano-book:nth-child(2){transform:rotate(-1.5deg);}
.smano-book:nth-child(3){transform:rotate(1deg);}
.smano-book:hover{transform:translate(-2px,-2px) rotate(0);box-shadow:5px 5px 0 var(--ink);}
.smano-book-cover{width:64px;height:84px;border-radius:4px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;border:1.5px solid var(--ink);}
.smano-book-title{font-size:0.75rem;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:4px;}
.smano-book-price{font-family:var(--serif);font-size:1rem;font-weight:400;color:var(--rust);}
.smano-book-badge{
  font-family:var(--script);font-size:0.85rem;
  background:var(--gold);color:var(--ink);border-radius:3px;padding:1px 10px;
  display:inline-block;margin-bottom:6px;font-weight:700;
}
/* smano mobile → ver bloque @media(max-width:768px) principal */

/* ══════════════════════════════════════════════════════════
   CARDS DE LIBROS — El corazón visual del sitio
   ══════════════════════════════════════════════════════════ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:22px;}
.card{
  background:var(--cream);cursor:pointer;
  display:flex;flex-direction:column;position:relative;overflow:visible;
  border-radius:var(--radius-card);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform 0.3s cubic-bezier(.25,.46,.45,.94), box-shadow 0.3s ease;
  /* Sin content-visibility:auto: dejaba de pintar las tarjetas fuera de
     pantalla y al volver se veian en blanco un instante (parpadeo, 12/10). */
}
.card:nth-child(4n){transform:rotate(-0.6deg);}
.card:nth-child(4n+2){transform:rotate(0.5deg);}
.card:hover{
  transform:translate(-3px,-5px) rotate(0);
  box-shadow:7px 8px 0 var(--ink);
}
.card.agotado{opacity:0.55;cursor:default;}
.card.agotado:hover{transform:none;box-shadow:4px 4px 0 var(--ink);}
.cover{
  aspect-ratio:2/3;
  background:linear-gradient(170deg,var(--paper2) 0%,var(--paper) 100%);
  position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:calc(var(--radius-card) - 2px) calc(var(--radius-card) - 2px) 0 0;
  border-bottom:2px solid var(--ink);
}
.cover img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform 0.45s ease;image-rendering:auto;filter:contrast(1.08) saturate(1.05);contain:strict;}
.card:hover .cover img{transform:scale(1.04);}
.cover-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:1.5rem;}
.sp{
  width:80px;height:118px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;font-family:var(--serif);font-size:0.7rem;
  letter-spacing:0.06em;color:#fff;padding:0.8rem 0.5rem;
  text-align:center;overflow:hidden;
  box-shadow:4px 4px 12px rgba(0,0,0,0.15);
}
.ribbon{
  position:absolute;top:12px;left:0;
  padding:5px 14px 5px 10px;font-size:0.65rem;font-weight:800;
  border-radius:0 var(--radius-pill) var(--radius-pill) 0;
  letter-spacing:0.04em;
}
.rn{background:var(--sage);color:#fff;}
.rb{background:var(--gold-dark);color:#fff;}
.rr{background:var(--sky);color:#fff;}
.r-agotado{background:#888;color:#fff;}
.r-bajo{background:var(--rust);color:#fff;}
.overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,13,10,0) 30%,rgba(15,13,10,0.92) 100%);
  opacity:0;transition:opacity 0.3s;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;
  gap:7px;padding:1.2rem;
}
.card:hover .overlay{opacity:1;}
.ob{
  width:100%;padding:10px 12px;font-family:var(--sans);
  font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;border:none;font-weight:800;
  transition:all 0.2s;border-radius:var(--radius-sm);
}
.ob-gold{background:var(--rust);color:#fff;}
.ob-gold:hover{background:var(--rust-dark);color:#fff;}
.ob-gold:disabled{background:#888;color:#ccc;cursor:not-allowed;}
.ob-ghost{background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.4);}
.ob-ghost:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.7);}
.info{padding:1.1rem 1.2rem 1.2rem;flex:1;display:flex;flex-direction:column;}
.icat{
  font-family:var(--script);
  font-size:0.95rem;font-weight:700;text-transform:none;
  color:var(--rust);margin-bottom:2px;letter-spacing:0.01em;
  transform:rotate(-1deg);display:inline-block;
}
.ititle{
  font-family:var(--serif);font-size:1.42rem;color:var(--ink);
  margin-bottom:5px;line-height:1.2;font-weight:500;letter-spacing:0;
}
.iauthor{
  font-family:var(--script);
  font-size:1rem;color:var(--muted);margin-bottom:auto;padding-bottom:0.5rem;
  font-weight:600;font-style:normal;
}
.ifoot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:0.55rem;border-top:1px solid var(--border);
  flex-wrap:wrap;gap:4px;
}
.iprice{font-family:var(--serif);font-size:1.95rem;font-weight:500;color:var(--rust);letter-spacing:0;}
.iprice-c{font-size:0.8rem;color:var(--muted);font-family:var(--sans);font-weight:500;}
.istock{font-size:0.7rem;font-weight:600;}
.istock-ok{color:var(--sage);}
.istock-low{color:var(--low-stock);}
.istock-out{color:var(--out-stock);}

/* ══════════════════════════════════════════════════════════
   PAGINACIÓN
   ══════════════════════════════════════════════════════════ */
.pag{display:flex;justify-content:center;align-items:center;gap:6px;padding:4rem 0 2rem;}
.pb{
  width:40px;height:40px;
  border:2px solid var(--ink);background:var(--cream);cursor:pointer;
  font-family:var(--sans);font-size:0.88rem;font-weight:700;color:var(--ink);
  transition:transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  border-radius:50%;
  box-shadow:2px 2px 0 var(--ink);
}
.pb.act{background:var(--rust);color:#fff;}
.pb:hover:not(.act){background:var(--gold-light);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);}

/* ══════════════════════════════════════════════════════════
   ABOUT — Sección con más carácter
   ══════════════════════════════════════════════════════════ */
.about{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--rust);
  position:relative;overflow:hidden;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
}
.about::before{
  content:'';position:absolute;top:0;left:0;right:0;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1000 0 L1000 12 Q 960 4 920 10 T 840 6 T 760 12 T 680 4 T 600 10 T 520 14 T 440 6 T 360 12 T 280 4 T 200 10 T 120 14 T 40 6 L0 10 Z' fill='%23FAF4E8'/%3E%3C/svg%3E") top center / 100% 22px no-repeat;
  pointer-events:none;z-index:2;
}
.about::after{
  content:'';position:absolute;bottom:-80px;left:-80px;
  width:260px;height:260px;border-radius:50%;
  background:rgba(255,255,255,0.04);pointer-events:none;
}
.about-t{padding:6.5rem 5rem;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1;}
.a-tag{
  font-family:var(--script);
  font-size:1.2rem;font-weight:700;color:var(--ink);
  margin-bottom:1.4rem;display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);padding:4px 18px;
  border-radius:4px;width:fit-content;
  transform:rotate(-2deg);
  box-shadow:2px 2px 0 rgba(42,36,32,0.35);
  letter-spacing:0.01em;text-transform:none;
}
.a-h2{
  font-family:var(--serif);font-size:3rem;color:#fff;font-weight:400;
  line-height:1;margin-bottom:1.8rem;letter-spacing:-0.01em;
}
.a-h2 em{
  color:var(--gold-light);font-style:normal;
  font-family:var(--script);font-size:1.2em;font-weight:700;
  display:inline-block;transform:rotate(-2deg);
  text-shadow:2px 2px 0 rgba(0,0,0,0.25);
}
.a-p{color:rgba(255,255,255,0.85);font-size:0.95rem;line-height:1.75;max-width:440px;font-weight:400;}
.a-soc{display:flex;gap:1.5rem;margin-top:3rem;flex-wrap:wrap;}
.a-soc a{
  color:rgba(255,255,255,0.8);text-decoration:none;
  font-size:0.78rem;font-weight:600;letter-spacing:0.02em;
  transition:all 0.25s ease;padding:7px 16px;
  border:1px solid rgba(255,255,255,0.25);border-radius:var(--radius-pill);
}
.a-soc a:hover{color:var(--rust);background:#fff;border-color:#fff;}
.about-v{
  background:rgba(0,0,0,0.08);
  display:flex;align-items:center;justify-content:center;
  position:relative;padding:4rem 3rem;overflow:hidden;
  min-height:520px;
}
.about-v::before{
  /* cuadrícula sutil tipo cuaderno en el lateral coral */
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size:30px 30px;pointer-events:none;
}
.big-dog{display:none;}
/* Polaroid con foto del logo */
.ab-polaroid{
  position:absolute;top:3.5rem;left:3rem;
  background:#fff;padding:12px 12px 40px;
  border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink), 10px 10px 28px rgba(0,0,0,0.25);
  transform:rotate(-5deg);
  width:160px;z-index:3;
  transition:transform 0.3s ease;
}
.ab-polaroid:hover{transform:rotate(-2deg) translateY(-4px);}
.ab-polaroid::before{
  /* washi tape arriba */
  content:'';position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:80px;height:22px;
  background:repeating-linear-gradient(45deg, var(--gold) 0 6px, var(--gold-light) 6px 12px);
  border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
.ab-polaroid img{
  width:100%;height:140px;object-fit:contain;
  background:var(--paper);display:block;
}
.ab-polaroid-cap{
  position:absolute;bottom:10px;left:0;right:0;text-align:center;
  font-family:var(--script);font-size:1rem;color:var(--ink);
  font-weight:700;
}
/* Cita flotante */
.ab-quote{
  position:absolute;top:2rem;right:2.5rem;
  background:var(--paper);border:2px solid var(--ink);
  padding:1rem 1.3rem 1.2rem;border-radius:4px;
  max-width:240px;transform:rotate(3deg);
  box-shadow:4px 4px 0 var(--ink);z-index:3;
  font-family:var(--serif);font-size:0.95rem;line-height:1.35;
  color:var(--ink);font-style:italic;
}
.ab-quote::before{
  /* washi tape esquina */
  content:'';position:absolute;top:-10px;right:20px;transform:rotate(10deg);
  width:60px;height:18px;
  background:repeating-linear-gradient(45deg, var(--sky) 0 5px, var(--sky-light) 5px 10px);
  border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,0.15);
}
.ab-quote-mark{
  font-family:var(--serif);font-size:3.5rem;color:var(--rust);
  font-style:normal;font-weight:700;line-height:0.3;
  display:block;margin-bottom:-10px;margin-top:-6px;
}
.ab-quote-who{
  display:block;margin-top:8px;font-style:normal;font-family:var(--sans);
  font-size:0.72rem;font-weight:700;color:var(--rust-ink);letter-spacing:0.02em;
  text-transform:uppercase;
}
/* Stack de libros SVG centrado abajo */
.ab-books{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:260px;height:300px;z-index:2;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,0.25));
  animation:abFloat 6s ease-in-out infinite;
}
@keyframes abFloat{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(-8px);}
}
/* Marcador/bookmark colgando desde arriba */
.ab-bookmark{
  position:absolute;top:0;left:38%;z-index:3;
  width:52px;height:100px;
  background:var(--gold);
  border:2px solid var(--ink);border-top:none;
  box-shadow:3px 3px 0 rgba(42,36,32,0.3);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:14px;
  font-family:var(--serif);font-size:0.78rem;font-weight:700;
  color:var(--ink);text-align:center;line-height:1.1;
  transform:rotate(4deg);
  animation:bookmarkSway 5s ease-in-out infinite;
}
.ab-bookmark::after{
  content:'';position:absolute;bottom:-16px;left:0;right:0;
  border-left:26px solid var(--gold);
  border-right:26px solid var(--gold);
  border-bottom:16px solid transparent;
  filter:drop-shadow(0 2px 0 var(--ink));
}
@keyframes bookmarkSway{
  0%,100%{transform:rotate(4deg);}
  50%{transform:rotate(-2deg);}
}
/* Ticket admit one */
.ab-ticket{
  position:absolute;bottom:40%;right:3rem;z-index:3;
  background:var(--paper);border:2px dashed var(--ink);
  border-radius:6px;padding:0.8rem 1.2rem;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transform:rotate(-8deg);
  box-shadow:3px 3px 0 rgba(42,36,32,0.35);
  min-width:110px;
}
.ab-ticket-top{
  font-family:var(--script);font-size:0.7rem;font-weight:700;
  color:var(--rust);letter-spacing:0.05em;
}
.ab-ticket-big{
  font-family:var(--serif);font-size:1.05rem;font-weight:700;
  color:var(--ink);text-align:center;line-height:1;letter-spacing:0.02em;
}
.ab-ticket-bot{
  font-family:var(--script);font-size:0.75rem;color:var(--ink2);
  border-top:1px dashed var(--ink);padding-top:3px;width:100%;text-align:center;
}
/* Corazón grande */
.ab-heart{
  position:absolute;top:38%;right:36%;width:110px;height:100px;
  z-index:1;opacity:0.55;
  animation:heartPulse 3s ease-in-out infinite;
}
@keyframes heartPulse{
  0%,100%{transform:scale(1) rotate(-5deg);}
  50%{transform:scale(1.08) rotate(-3deg);}
}
/* Estrella dibujada decorativa */
.ab-star{
  position:absolute;top:9rem;right:7rem;width:36px;height:36px;z-index:2;
  animation:abSpin 14s linear infinite;opacity:0.85;
}
@keyframes abSpin{to{transform:rotate(360deg);}}
/* Estrellita 2 y sparkle */
.ab-star-2{
  position:absolute;top:55%;left:35%;width:22px;height:22px;z-index:2;
  animation:abSpin 10s linear infinite reverse;opacity:0.9;
}
.ab-sparkle{
  position:absolute;top:15%;right:48%;width:26px;height:26px;z-index:2;
  opacity:0.8;animation:heartPulse 2.5s ease-in-out infinite;
}
@keyframes abSpin{to{transform:rotate(360deg);}}
.a-num{font-family:var(--serif);font-size:3.2rem;color:#fff;font-weight:800;line-height:1;}
.a-lbl{font-size:0.68rem;font-weight:800;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-top:4px;letter-spacing:0.1em;}
.a-stats{position:absolute;bottom:3rem;right:3rem;z-index:4;}
.a-stat{margin-bottom:2.2rem;text-align:right;}
.a-stat:last-child{margin-bottom:0;}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
footer{
  background:var(--ink);
  border-top:4px dashed var(--rust);
  padding:5rem 2.5rem 2rem;
  position:relative;
}
footer::before{
  content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:140px;height:26px;
  background:repeating-linear-gradient(45deg,
    var(--gold) 0 7px, var(--gold-light) 7px 14px);
  opacity:0.9;border-radius:2px;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
  z-index:2;
}
.fg{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:3rem;max-width:1200px;margin:0 auto 3rem;}
.fb h2{font-family:var(--serif);font-size:1.6rem;color:var(--paper);font-weight:400;margin-bottom:1rem;letter-spacing:0;}
.fb h2 em{color:var(--rust);font-style:normal;font-family:var(--script);font-size:1.2em;font-weight:700;}
.fb p{font-size:0.85rem;color:rgba(250,245,239,0.55);line-height:1.75;font-weight:400;}
.fc h4{font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(250,245,239,0.45);margin-bottom:1.4rem;font-weight:600;}
.fc a{display:block;color:rgba(250,245,239,0.65);text-decoration:none;font-size:0.85rem;margin-bottom:10px;transition:color 0.2s ease;font-weight:400;}
.fc a:hover{color:var(--rust);}
.fbot{
  border-top:1px solid rgba(255,255,255,0.08);padding-top:2rem;
  display:flex;justify-content:space-between;align-items:center;
  max-width:1200px;margin:0 auto;font-size:0.75rem;
  color:rgba(250,245,239,0.4);letter-spacing:0.02em;flex-wrap:wrap;gap:1rem;font-weight:400;
}

/* ══════════════════════════════════════════════════════════
   WA FAB
   ══════════════════════════════════════════════════════════ */
.wa-fab{
  position:fixed;bottom:2rem;right:2rem;z-index:90;
  width:56px;height:56px;background:#25D366;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:1.5rem;
  box-shadow:0 4px 20px rgba(37,211,102,0.4);
  transition:transform 0.25s, box-shadow 0.25s;
}
.wa-fab svg{width:60%;height:60%;display:block;}
.wa-fab:hover{transform:scale(1.12);box-shadow:0 8px 28px rgba(37,211,102,0.5);}

/* ── Hero trust bar ──────────────────────────────────────── */
.hero-trust{
  display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center;
  margin-top:1.4rem;
}
.hero-trust span{
  font-size:0.72rem;font-weight:700;color:var(--muted);
  display:flex;align-items:center;gap:5px;
}

/* ══════════════════════════════════════════════════════════
   FLASH SALE STRIP — Barra después del hero
   ══════════════════════════════════════════════════════════ */
.flash-strip{
  background:var(--gold-light);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:1rem 2.5rem;
  position:relative;
  background-image:
    radial-gradient(circle, rgba(232,122,93,0.12) 1.2px, transparent 1.2px);
  background-size:18px 18px;
}
.flash-strip-inner{
  max-width:1300px;margin:0 auto;
  display:flex;align-items:center;gap:2rem;flex-wrap:wrap;justify-content:space-between;
}
.flash-strip-left{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;}
.fstrip-badge{
  background:var(--rust);color:#fff;
  padding:4px 14px;border-radius:4px;
  font-family:var(--script);font-size:1.05rem;font-weight:700;letter-spacing:0.02em;
  white-space:nowrap;transform:rotate(-3deg);
  border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
}
.fstrip-code{
  font-size:0.92rem;color:var(--ink2);font-weight:600;
  font-family:var(--script);
}
.fstrip-code strong{color:var(--rust);font-weight:700;}
.fstrip-timer{display:flex;align-items:center;gap:10px;}
.fstrip-timer-label{
  font-family:var(--script);
  font-size:0.95rem;font-weight:700;color:var(--ink2);
  letter-spacing:0.01em;text-transform:none;
}
.fstrip-digits{
  display:flex;align-items:center;gap:4px;
  font-family:var(--serif);font-size:1.35rem;font-weight:400;color:var(--ink);
}
.fstrip-digits span{
  background:#fff;border:2px solid var(--ink);
  border-radius:6px;padding:2px 8px;min-width:38px;text-align:center;
  box-shadow:1px 1px 0 var(--ink);
}
.fstrip-sep{color:var(--rust);padding:0 1px;background:none!important;border:none!important;box-shadow:none!important;min-width:auto!important;}
.fstrip-cta{
  padding:10px 26px;background:var(--rust);color:#fff;border-radius:var(--radius-pill);
  text-decoration:none;font-size:0.82rem;font-weight:800;white-space:nowrap;letter-spacing:0.02em;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  transition:transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.fstrip-cta:hover{background:var(--rust-dark);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}

/* ══════════════════════════════════════════════════════════
   PACK 3×2 BANNER — Entre features y envíos
   ══════════════════════════════════════════════════════════ */
.pack-banner{
  background:var(--sky);
  padding:1.8rem 2.5rem;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  position:relative;
}
.pack-banner::before{
  content:'';position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:120px;height:20px;
  background:repeating-linear-gradient(45deg, var(--rust) 0 6px, var(--rust-light) 6px 12px);
  border-radius:2px;box-shadow:0 2px 4px rgba(42,36,32,0.2);z-index:2;
}
.pack-banner-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:2.5rem;justify-content:space-between;flex-wrap:wrap;
}
.pack-banner-books{
  display:flex;gap:6px;font-size:2.2rem;flex-shrink:0;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
.pack-banner-text{flex:1;}
.pack-banner-title{
  font-family:var(--serif);font-size:1.7rem;font-weight:400;color:var(--ink);
  letter-spacing:-0.01em;line-height:1.1;
}
.pack-banner-sub{
  font-family:var(--sans);font-size:0.88rem;color:var(--ink2);font-weight:600;margin-top:4px;
}
.pack-banner-sub strong{color:var(--rust-ink);font-family:var(--script);font-size:1.2em;}
.pack-banner-cta{
  padding:13px 32px;background:var(--ink);color:#fff;border-radius:var(--radius-pill);
  text-decoration:none;font-size:0.82rem;font-weight:800;white-space:nowrap;flex-shrink:0;
  transition:all 0.2s;border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(42,36,32,0.4);
}
.pack-banner-cta:hover{background:var(--rust);color:#fff;transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(42,36,32,0.4);}

/* ══════════════════════════════════════════════════════════
   RULETA — Sección entre catálogo y about
   ══════════════════════════════════════════════════════════ */
.ruleta-section{
  background:
    /* papel rasgado arriba coral */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1000 0 L1000 12 Q 960 4 920 10 T 840 6 T 760 12 T 680 4 T 600 10 T 520 14 T 440 6 T 360 12 T 280 4 T 200 10 T 120 14 T 40 6 L0 10 Z' fill='%23FBDED2'/%3E%3C/svg%3E") top center / 100% 22px no-repeat,
    /* cuadrícula celeste más visible */
    linear-gradient(rgba(169,213,224,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,213,224,0.35) 1px, transparent 1px),
    linear-gradient(180deg, #FFF8E8 0%, var(--paper) 100%);
  background-size: 100% 22px, 32px 32px, 32px 32px, auto;
  padding:6rem 2.5rem;position:relative;overflow:hidden;
  border-top:2px solid var(--ink);
}
.ruleta-section::before{content:none;}
.ruleta-section::after{content:none;}
.ruleta-inner{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto;gap:5rem;align-items:center;
  position:relative;z-index:1;
}
.ruleta-text{display:flex;flex-direction:column;}
.ruleta-tag{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;
  background:var(--gold);color:var(--ink);
  padding:5px 18px;border-radius:4px;
  font-family:var(--script);font-size:1.1rem;font-weight:700;letter-spacing:0.02em;
  border:none;margin-bottom:1.5rem;
  transform:rotate(-2deg);
  box-shadow:2px 2px 0 rgba(42,36,32,0.2);
  text-transform:none;
}
.ruleta-h2{
  font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.2rem);
  color:var(--ink);font-weight:400;line-height:1;margin-bottom:1.2rem;letter-spacing:-0.01em;
}
.ruleta-h2 em{
  color:var(--rust);font-style:normal;
  font-family:var(--script);font-weight:700;font-size:1.2em;
  display:block;transform:rotate(-2deg);transform-origin:left;
  text-shadow:2px 2px 0 var(--gold-light);
  margin-top:4px;
}
.ruleta-p{
  font-size:0.95rem;color:var(--ink2);line-height:1.8;
  font-weight:500;max-width:420px;margin-bottom:2rem;
}
.wheel-result{
  min-height:80px;display:flex;flex-direction:column;gap:10px;
}
.wheel-prize{
  font-family:var(--serif);font-size:2rem;color:var(--rust);
  font-weight:400;animation:popIn 0.4s cubic-bezier(.36,.07,.19,.97);
}
.wheel-code{
  font-size:0.85rem;color:var(--ink2);font-weight:600;
}
.wheel-code strong{color:var(--rust-ink);font-family:var(--script);font-size:1.2em;}
.wheel-wa{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;background:#25D366;
  color:#fff;border:2px solid var(--ink);
  border-radius:var(--radius-pill);text-decoration:none;
  font-size:0.78rem;font-weight:800;transition:all 0.15s;width:fit-content;
  box-shadow:3px 3px 0 var(--ink);
}
.wheel-wa:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
@keyframes popIn{0%{transform:scale(0.5);opacity:0;}80%{transform:scale(1.1);}100%{transform:scale(1);opacity:1;}}
.ruleta-center{
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
}
.wheel-wrap{
  position:relative;width:280px;height:280px;flex-shrink:0;
}
.wheel-svg{
  width:280px;height:280px;border-radius:50%;
  box-shadow:0 0 0 6px var(--paper),0 0 0 9px var(--ink),0 16px 40px rgba(42,36,32,0.25);
  transition:transform 4.5s cubic-bezier(0.17,0.67,0.12,0.99);
}
.wheel-pin{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  font-size:2.2rem;color:var(--rust);z-index:2;user-select:none;
  filter:drop-shadow(0 2px 4px rgba(42,36,32,0.4));
}
.wheel-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;background:var(--ink);border-radius:50%;
  border:4px solid var(--paper);z-index:3;
  box-shadow:0 0 0 2px var(--ink);
}
.btn-spin{
  padding:14px 40px;background:var(--rust);color:#fff;
  border:2px solid var(--ink);
  font-family:var(--sans);font-size:0.88rem;font-weight:800;
  border-radius:var(--radius-pill);cursor:pointer;
  transition:all 0.15s;letter-spacing:0.02em;
  box-shadow:4px 4px 0 var(--ink);
}
.btn-spin:hover:not(:disabled){background:var(--rust-dark);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
.btn-spin:disabled{opacity:0.5;cursor:not-allowed;transform:none;}

/* ── Premios posibles + prueba social ─────────────────────── */
.ruleta-premios{margin-bottom:1.6rem;}
.ruleta-premios-title{
  font-family:var(--script);font-size:1rem;font-weight:700;
  color:var(--ink2);margin-bottom:0.75rem;
}
.ruleta-chips{display:flex;flex-wrap:wrap;gap:8px;}
.r-chip{
  padding:5px 13px;font-family:var(--sans);font-size:0.76rem;font-weight:800;
  border:2px solid var(--ink);border-radius:var(--radius-pill);
  box-shadow:2px 2px 0 var(--ink);color:#fff;white-space:nowrap;
  transition:transform 0.15s,box-shadow 0.15s;cursor:default;
}
.r-chip:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);}
.r-chip--a{background:#E8634A;}
.r-chip--b{background:#5BB8D4;}
.r-chip--c{background:#5BAD72;}
.r-chip--d{background:#D4A80E;color:var(--ink);}
.r-chip--e{background:#D44F37;}
.r-chip--f{background:#3FA0BC;}
.r-chip--g{background:#9A8A7A;}
.r-chip--h{background:#F5C518;color:var(--ink);}

/* Tarjetitas misterio */
.ruleta-misterio{margin-bottom:1.6rem;}
.ruleta-mystery-cards{display:flex;gap:10px;align-items:flex-end;}
.rmcard{
  width:58px;height:80px;
  background:var(--rust);border:2px solid var(--ink);border-radius:6px;
  box-shadow:3px 3px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.8rem;font-weight:400;color:rgba(255,255,255,0.5);
  cursor:default;user-select:none;
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.rmcard:hover{transform:translateY(-4px);box-shadow:4px 7px 0 var(--ink);}
.rmcard--2{background:var(--sky);transform:rotate(3deg);height:74px;}
.rmcard--2:hover{transform:rotate(3deg) translateY(-4px);}
.rmcard--3{background:var(--gold);transform:rotate(-2deg);height:70px;}
.rmcard--3:hover{transform:rotate(-2deg) translateY(-4px);}
.rmcard--4{background:#5BAD72;transform:rotate(4deg);height:76px;}
.rmcard--4:hover{transform:rotate(4deg) translateY(-4px);}

/* Badge prueba social */
.ruleta-proof{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;margin-bottom:1.8rem;
  background:var(--paper2);
  border:2px solid var(--ink);border-radius:4px;
  box-shadow:3px 3px 0 var(--ink);
  font-family:var(--sans);font-size:0.82rem;font-weight:700;color:var(--ink);
  transform:rotate(-1.5deg);
}

/* Decoraciones flotantes de la sección ruleta */
.rs-deco{position:absolute;pointer-events:none;user-select:none;line-height:1;}
.rs-deco--star1{
  top:14%;left:3%;font-size:2.2rem;color:var(--gold);
  text-shadow:2px 2px 0 var(--ink);
  animation:heroBob 4s ease-in-out infinite;
}
.rs-deco--star2{
  bottom:18%;left:6%;font-size:1.4rem;color:var(--sky);
  text-shadow:1px 1px 0 var(--ink);
  animation:heroBob 5s ease-in-out infinite 1s;
}
.rs-deco--confetti{
  top:20%;right:4%;font-size:1.6rem;
  animation:heroBob 3.5s ease-in-out infinite 0.5s;
}
.rs-deco--book{
  bottom:15%;right:3%;font-size:2rem;
  animation:heroBob 4.5s ease-in-out infinite 2s;
}

/* ══════════════════════════════════════════════════════════
   VÉNDENOS — Sección de compra de libros al público
   ══════════════════════════════════════════════════════════ */
.vendenos-section{
  background:
    /* papel rasgado arriba */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1000 0 L1000 12 Q 960 4 920 10 T 840 6 T 760 12 T 680 4 T 600 10 T 520 14 T 440 6 T 360 12 T 280 4 T 200 10 T 120 14 T 40 6 L0 10 Z' fill='%23FDF0D4'/%3E%3C/svg%3E") top center / 100% 22px no-repeat,
    /* cuadrícula papel mostaza */
    linear-gradient(rgba(247,204,122,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,204,122,0.18) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 22px, 28px 28px, 28px 28px, auto;
  padding:6rem 2.5rem 5rem;
  border-top:2px solid var(--ink);
  position:relative;
}
.vendenos-section::after{content:none;}
.vendenos-inner{max-width:1100px;margin:0 auto;}
.vendenos-head{text-align:center;margin-bottom:5rem;}
.vendenos-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--sky);color:var(--ink);
  padding:5px 18px;border-radius:4px;
  font-family:var(--script);font-size:1.05rem;font-weight:700;letter-spacing:0.02em;text-transform:none;
  border:none;margin-bottom:1.4rem;
  transform:rotate(-2deg);
  box-shadow:2px 2px 0 rgba(42,36,32,0.2);
}
.vendenos-h2{
  font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.9rem);
  color:var(--ink);font-weight:400;line-height:1.05;margin-bottom:1.2rem;letter-spacing:-0.01em;
}
.vendenos-h2 em{
  color:var(--rust);font-style:normal;
  font-family:var(--script);font-weight:700;font-size:1.2em;
  display:inline-block;transform:rotate(-2deg);
  text-shadow:2px 2px 0 var(--gold-light);
}
.vendenos-p{
  font-size:0.95rem;color:var(--ink2);line-height:1.8;font-weight:500;max-width:520px;margin:0 auto;
}
.vendenos-steps{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;gap:1rem;margin-bottom:4rem;
}
.v-step{
  background:#fff;border-radius:14px;padding:2.2rem 1.8rem;
  box-shadow:4px 4px 0 var(--ink);text-align:center;
  transition:transform 0.25s, box-shadow 0.25s;
  border:2px solid var(--ink);
  position:relative;
}
.v-step::before{
  content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-4deg);
  width:80px;height:20px;
  background:repeating-linear-gradient(45deg, var(--gold) 0 6px, var(--gold-light) 6px 12px);
  border-radius:2px;box-shadow:0 2px 3px rgba(42,36,32,0.12);
}
.v-step:nth-child(1){transform:rotate(-1deg);}
.v-step:nth-child(3){transform:rotate(1deg);}
.v-step:nth-child(5){transform:rotate(-0.8deg);}
.v-step:nth-child(3)::before{
  background:repeating-linear-gradient(45deg, var(--rust) 0 6px, var(--rust-light) 6px 12px);
}
.v-step:nth-child(5)::before{
  background:repeating-linear-gradient(45deg, var(--sky) 0 6px, var(--sky-light) 6px 12px);
}
.v-step:hover{transform:translate(-3px,-5px) rotate(0);box-shadow:7px 8px 0 var(--ink);}
.v-num{
  font-family:var(--serif);font-size:0.8rem;font-weight:400;
  color:var(--rust);letter-spacing:0.18em;margin-bottom:0.8rem;
}
.v-step-icon{font-size:2.4rem;margin-bottom:1rem;display:block;}
.v-step h3{
  font-family:var(--serif);font-size:1.3rem;font-weight:400;
  color:var(--ink);margin-bottom:0.6rem;
}
.v-step p{font-size:0.85rem;color:var(--ink2);line-height:1.7;font-weight:500;}
.v-step-arrow{
  font-family:var(--script);font-size:2.2rem;color:var(--rust);font-weight:700;flex-shrink:0;
  transform:rotate(-5deg);
}
.vendenos-accept{
  background:#fff;border:2px solid var(--ink);
  border-radius:16px;padding:2.2rem 2.5rem;margin-bottom:1rem;text-align:center;
  box-shadow:4px 4px 0 var(--ink);
  position:relative;
}
.vendenos-accept::before{
  content:'';position:absolute;top:-14px;right:30px;transform:rotate(5deg);
  width:90px;height:22px;
  background:repeating-linear-gradient(45deg, var(--sky) 0 7px, var(--sky-light) 7px 14px);
  border-radius:2px;box-shadow:0 2px 4px rgba(42,36,32,0.12);
}
.vendenos-accept-title{
  font-family:var(--script);
  font-size:1.3rem;font-weight:700;letter-spacing:0.02em;text-transform:none;
  color:var(--rust);margin-bottom:1.2rem;
}
.vendenos-chips{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:1.2rem;
}
.vendenos-chips span{
  background:var(--gold-light);border:2px solid var(--ink);
  padding:5px 16px;border-radius:var(--radius-pill);
  font-size:0.8rem;font-weight:700;color:var(--ink);
  box-shadow:2px 2px 0 var(--ink);
}
.vendenos-chips span:nth-child(2n){background:var(--sky-light);}
.vendenos-chips span:nth-child(3n){background:var(--rust-light);}
.vendenos-note{
  font-size:0.82rem;color:var(--ink2);font-weight:500;
}
.vendenos-note strong{color:var(--rust-ink);}

/* ── RESEÑAS ─────────────────────────────────────────────── */
.resenas-section{padding:5rem 1.5rem;background:var(--paper2);position:relative;overflow:hidden;}
.resenas-section::before{content:'';position:absolute;inset:0;background:var(--grid-paper);background-size:var(--grid-size);opacity:0.45;pointer-events:none;}
.resenas-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1;}
.resenas-head{text-align:center;margin-bottom:3rem;}
.resenas-tag{display:inline-block;background:var(--gold-light);color:var(--ink2);font-family:var(--sans);font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:6px 16px;border-radius:var(--radius-pill);border:1.5px solid var(--gold-dark);margin-bottom:1rem;}
.resenas-h2{font-family:var(--serif);font-size:2.2rem;color:var(--ink);margin-bottom:0.5rem;line-height:1.2;}
.resenas-h2 em{color:var(--rust);font-style:normal;}
.resenas-sub{color:var(--ink2);font-size:0.92rem;max-width:480px;margin:0 auto;}
.resenas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;margin-bottom:3rem;}
.resena-card{background:#fff;border-radius:var(--radius-card);border:1.5px solid var(--border);padding:1.4rem 1.3rem;box-shadow:var(--shadow-sm);transition:transform 0.2s,box-shadow 0.2s;display:flex;flex-direction:column;gap:0.5rem;}
.resena-card:hover{transform:translateY(-3px) rotate(0.3deg);box-shadow:var(--shadow-md);}
.resena-estrellas{font-size:1.05rem;letter-spacing:2px;color:var(--gold-dark);}
.resena-texto{font-size:0.88rem;color:var(--ink2);line-height:1.7;font-style:italic;flex:1;}
.resena-nombre{font-size:0.8rem;font-weight:700;color:var(--muted);font-family:var(--sans);}
.resenas-empty{text-align:center;color:var(--muted);font-size:0.9rem;padding:2.5rem;grid-column:1/-1;}
/* Formulario */
.resena-form-wrap{background:#fff;border-radius:var(--radius-card);border:1.5px solid var(--border);padding:2rem;max-width:560px;margin:0 auto;box-shadow:var(--shadow-sm);}
.resena-form-title{font-family:var(--serif);font-size:1.25rem;color:var(--ink);margin-bottom:1.3rem;text-align:center;}
.resena-stars-row{display:flex;gap:10px;justify-content:center;margin-bottom:1.2rem;}
.resena-stars-row span{font-size:2rem;cursor:pointer;color:var(--border-dark);transition:transform 0.15s,color 0.1s;user-select:none;line-height:1;}
.resena-stars-row span.lit{color:var(--gold-dark);}
.resena-stars-row span:hover{transform:scale(1.25);}
.resena-inp{width:100%;padding:0.7rem 1rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:var(--sans);font-size:0.9rem;outline:none;transition:border-color 0.2s;box-sizing:border-box;margin-bottom:0.8rem;background:var(--paper);}
.resena-inp:focus{border-color:var(--rust);}
.resena-textarea{resize:vertical;min-height:90px;}
.resena-btn{width:100%;padding:0.8rem;background:var(--rust);color:#fff;border:2px solid var(--ink);border-radius:var(--radius-sm);font-family:var(--sans);font-size:0.95rem;font-weight:700;cursor:pointer;transition:background 0.2s,transform 0.1s,box-shadow 0.1s;box-shadow:3px 3px 0 var(--ink);}
.resena-btn:hover{background:var(--rust-dark);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);}
.resena-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.resena-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:3px 3px 0 var(--ink);}
.resena-msg{text-align:center;margin-top:0.8rem;font-size:0.85rem;font-weight:600;min-height:1.3em;}
@media(max-width:768px){
  .resenas-section{padding:3rem 1.2rem;}
  .resenas-h2{font-size:1.7rem;}
  .resenas-grid{grid-template-columns:1fr;}
  .resena-form-wrap{padding:1.4rem 1.2rem;}
}

/* ── DRAWER / CARRITO ─────────────────────────────────────── */
.back{position:fixed;inset:0;background:rgba(15,13,10,0.65);z-index:200;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.back.open{opacity:1;pointer-events:all;}
.drawer{position:fixed;right:0;top:0;bottom:0;width:400px;max-width:100vw;background:#fff;z-index:201;transform:translateX(100%);transition:transform 0.35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;border-left:2px solid var(--border);}
.drawer.open{transform:translateX(0);}
.dh{padding:2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.dh h2{font-family:var(--serif);font-size:1.5rem;font-weight:400;}
.dc{background:none;border:none;cursor:pointer;color:var(--muted);font-size:1.1rem;transition:color 0.2s;}
.dc:hover{color:var(--ink);}
.di{flex:1;overflow-y:auto;padding:1.5rem 2rem;}
.de{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--muted);gap:1rem;}
.de p{font-family:var(--serif);font-size:1.1rem;font-weight:300;}
.ci{display:flex;gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--border);}
.ci-img{width:50px;height:68px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:1px;}
.ci-info{flex:1;}
.ci-t{font-family:var(--serif);font-size:0.9rem;margin-bottom:2px;}
.ci-a{font-size:0.72rem;color:var(--muted);font-style:italic;margin-bottom:6px;}
.ci-p{font-size:0.85rem;}
.ci-ctrl{display:flex;align-items:center;gap:8px;margin-top:6px;}
.ci-qty-btn{width:22px;height:22px;border:1px solid var(--border);background:transparent;cursor:pointer;font-size:0.8rem;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all 0.2s;}
.ci-qty-btn:hover{border-color:var(--ink);color:var(--ink);}
.ci-qty{font-size:0.82rem;min-width:20px;text-align:center;}
.ci-rm{background:none;border:none;cursor:pointer;color:var(--muted);margin-left:auto;align-self:flex-start;transition:color 0.2s;padding:2px;font-size:0.9rem;}
.ci-rm:hover{color:var(--rust);}
.ci-maxstock{font-size:0.65rem;color:var(--low-stock);margin-top:2px;}
.df{padding:1.5rem 2rem;border-top:1px solid var(--border);background:var(--paper2);display:none;}
.dt{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.5rem;}
.dt-l{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
.dt-p{font-family:var(--serif);font-size:1.9rem;font-weight:300;}
.btn-ck{display:block;width:100%;padding:14px;background:var(--rust);color:#fff;border:none;font-family:var(--sans);font-size:0.82rem;font-weight:700;border-radius:var(--radius-pill);cursor:pointer;transition:all 0.2s;margin-bottom:8px;}
.btn-ck:hover{background:var(--gold);transform:translateY(-1px);}
.btn-wa{display:block;width:100%;padding:12px;background:transparent;color:var(--ink);border:1px solid var(--border);font-family:var(--sans);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;transition:all 0.2s;}
.btn-wa:hover{border-color:#25D366;color:#25D366;}

/* ── MODAL PEDIDO ─────────────────────────────────────────── */
.mdl-bg{position:fixed;inset:0;background:rgba(45,42,38,0.6);backdrop-filter:blur(4px);z-index:300;display:none;align-items:center;justify-content:center;padding:1rem;}
.mdl-bg.open{display:flex;}
.mdl{background:#fff;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:2.5rem;border-radius:24px;}
.mdl h2{font-family:var(--serif);font-size:1.8rem;font-weight:300;margin-bottom:1.5rem;}
.mdl-resumen{background:var(--paper2);border:1px solid var(--border);padding:1rem 1.2rem;margin-bottom:1.5rem;}
.mdl-resumen-title{font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-bottom:0.6rem;}
.mdl-resumen-item{display:flex;justify-content:space-between;font-size:0.82rem;padding:3px 0;}
.mdl-resumen-item span:first-child{color:var(--muted);}
.fld{margin-bottom:1.1rem;}
.fld label{display:block;font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.fld input,.fld select{width:100%;padding:11px 13px;border:1px solid var(--border);background:#fff;font-family:var(--sans);font-size:0.88rem;color:var(--ink);outline:none;transition:border-color 0.2s;font-weight:300;}
.fld input:focus,.fld select:focus{border-color:var(--gold);}
.fld input.error,.fld input:invalid:not(:placeholder-shown){border-color:var(--rust);}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.pays{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:1.5rem;}
.pay{padding:11px 4px;border:2px solid var(--border);cursor:pointer;text-align:center;font-size:0.72rem;font-weight:700;color:var(--muted);transition:all 0.2s;font-family:var(--sans);border-radius:12px;}
.pay.act{border-color:var(--rust);background:var(--rust);color:#fff;}
.totrow{display:flex;justify-content:space-between;align-items:center;padding:1.2rem;background:var(--paper2);border:1px solid var(--border);margin-bottom:1.5rem;}
.totrow span:first-child{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}
.totrow span:last-child{font-family:var(--serif);font-size:1.5rem;}
.mbtns{display:flex;gap:8px;}
.mcancel{flex:1;padding:12px;border:1px solid var(--border);background:none;font-family:var(--sans);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;color:var(--muted);transition:all 0.2s;}
.mcancel:hover{border-color:var(--ink);color:var(--ink);}
.mconfirm{flex:2;padding:12px;background:var(--rust);color:#fff;border:none;font-family:var(--sans);font-size:0.78rem;font-weight:700;border-radius:var(--radius-pill);cursor:pointer;transition:all 0.2s;}
.mconfirm:hover{background:var(--gold);}
.mconfirm:disabled{background:#aaa;cursor:not-allowed;}

/* ── ÉXITO PEDIDO ─────────────────────────────────────────── */
.suc{text-align:center;padding:1.5rem 0;}
.suc-ico{font-size:3rem;margin-bottom:1.5rem;}
.suc h2{font-family:var(--serif);font-size:2rem;font-weight:300;color:var(--sage);margin-bottom:1rem;}
.suc p{font-size:0.85rem;color:var(--muted);line-height:1.8;}
.suc-id{display:inline-block;margin:1rem 0;padding:8px 18px;border:1px solid var(--border);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}

/* ── TOAST ────────────────────────────────────────────────── */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(140px);opacity:0;z-index:500;background:var(--ink);color:#fff;padding:12px 28px;font-size:0.82rem;font-weight:700;border-radius:var(--radius-pill);transition:transform 0.35s cubic-bezier(.4,0,.2,1),opacity 0.35s ease;white-space:nowrap;pointer-events:none;box-shadow:0 4px 20px rgba(0,0,0,0.2);}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
.toast.gold{background:var(--gold);color:var(--ink);}
.toast.rust{background:var(--rust);}

/* ── LOADING ──────────────────────────────────────────────── */
.loading-state{grid-column:1/-1;padding:6rem;text-align:center;color:var(--muted);}
.loading-state p{font-family:var(--serif);font-size:1.2rem;font-weight:300;margin-bottom:8px;}
.loading-state span{font-size:0.8rem;}

/* ── BANNER STOCK BAJO (HERO) ─────────────────────────────── */
.stock-notice{
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
  background-size:200% 100%;
  color:var(--ink);text-align:center;padding:10px;
  font-size:0.78rem;font-weight:800;border-radius:0;display:none;
  letter-spacing:0.03em;
  border-bottom:2px dashed var(--ink);
  animation:stockShine 6s linear infinite;
  position:relative;
}
@keyframes stockShine{
  0%{background-position:0% 0;}
  100%{background-position:200% 0;}
}

/* ── UNIVERSO MODE ────────────────────────────────────────── */
.univ-overlay{position:fixed;inset:0;z-index:150;opacity:0;pointer-events:none;transition:opacity 0.8s ease;background-size:cover;background-position:center;}
.univ-overlay.active{opacity:1;pointer-events:none;}
body.in-universo{overflow:hidden;}
.univ-screen{position:fixed;inset:0;z-index:160;display:none;flex-direction:column;overflow-y:auto;}
.univ-screen.active{display:flex;}
.univ-bg{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;transition:opacity 0.6s;}
/* Velo sobre el fondo del universo. Al 55% se comia la ilustracion: bajado al
   38% y con degradado, mas oscuro abajo, que es donde va el texto. */
/* Velo sobre el fondo del universo. Es un fondo, no el protagonista: con poca
   opacidad la ilustracion se comia los titulos y las portadas. Se deja la parte
   alta mas clara —ahi se ve el dibujo— y se oscurece donde hay contenido. */
.univ-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0.42) 0%,rgba(0,0,0,0.58) 38%,rgba(0,0,0,0.78) 100%);}
.univ-content{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;}
.univ-nav{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 2.5rem;border-bottom:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(8px);background:rgba(0,0,0,0.3);position:sticky;top:0;z-index:10;}
.univ-nav-logo{font-family:var(--serif);font-size:1.2rem;font-weight:300;color:#fff;letter-spacing:0.04em;}
.univ-exit{display:flex;align-items:center;gap:8px;padding:9px 20px;border:1px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.08);color:#fff;cursor:pointer;font-family:var(--sans);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;transition:all 0.2s;backdrop-filter:blur(4px);}
.univ-exit:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.6);}
.univ-cart-btn{display:flex;align-items:center;gap:8px;background:none;border:1px solid rgba(255,255,255,0.25);color:rgba(255,255,255,0.85);cursor:pointer;padding:8px 18px;font-family:var(--sans);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;transition:all 0.2s;}
.univ-cart-btn:hover{border-color:rgba(255,255,255,0.6);color:#fff;}
.univ-hero{padding:4rem 2.5rem 3rem;text-align:center;}
.univ-hero-tag{font-size:0.65rem;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:1rem;}
.univ-hero-title{font-family:var(--serif);font-size:clamp(3rem,7vw,6rem);font-weight:300;color:#fff;line-height:0.95;margin-bottom:1rem;text-shadow:0 4px 32px rgba(0,0,0,0.5);}
.univ-hero-desc{font-size:0.88rem;color:rgba(255,255,255,0.55);max-width:500px;margin:0 auto 2rem;line-height:1.8;}
.univ-body{padding:0 2.5rem 4rem;max-width:1400px;margin:0 auto;width:100%;}
.univ-series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:3rem;}
.serie-card{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(6px);cursor:pointer;transition:all 0.25s;overflow:hidden;}
.serie-card:hover{background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.3);transform:translateY(-4px);}
.serie-card-cover{height:140px;display:flex;align-items:center;justify-content:center;gap:8px;padding:1rem;overflow:hidden;}
.serie-spine{width:36px;height:110px;border-radius:2px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-family:var(--serif);font-size:0.6rem;color:#fff;padding:0.4rem;text-align:center;flex-shrink:0;transition:transform 0.3s;}
.serie-card:hover .serie-spine{transform:translateY(-6px);}
.serie-card-info{padding:1rem 1.2rem;border-top:1px solid rgba(255,255,255,0.1);}
.serie-card-name{font-family:var(--serif);font-size:1.1rem;color:#fff;margin-bottom:4px;}
.serie-card-count{font-size:0.72rem;color:rgba(255,255,255,0.45);letter-spacing:0.08em;}
.univ-sec-label{font-size:0.62rem;letter-spacing:0.25em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:1.5rem;display:flex;align-items:center;gap:12px;}
.univ-sec-label::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.12);}
.univ-libros-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);}
.univ-card{background:rgba(15,13,10,0.7);backdrop-filter:blur(4px);cursor:pointer;transition:all 0.25s;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.univ-card:hover{background:rgba(30,25,20,0.85);z-index:2;}
.univ-card .cover{height:220px;}
.univ-card .info{padding:1rem 1.1rem 1.1rem;}
.univ-card .icat{color:rgba(255,255,255,0.35);}
.univ-card .ititle{color:#fff;}
.univ-card .iauthor{color:rgba(255,255,255,0.45);}
.univ-card .ifoot{border-top:1px solid rgba(255,255,255,0.08);}
.univ-card .iprice{color:#fff;}
.univ-back-btn{display:flex;align-items:center;gap:8px;background:none;border:none;color:rgba(255,255,255,0.55);cursor:pointer;font-family:var(--sans);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;padding:0;margin-bottom:2rem;transition:color 0.2s;}
.univ-back-btn:hover{color:#fff;}
.univ-serie-title{font-family:var(--serif);font-size:2.5rem;color:#fff;font-weight:300;margin-bottom:0.4rem;}
.univ-serie-sub{font-size:0.82rem;color:rgba(255,255,255,0.45);margin-bottom:2.5rem;}
.univ-particles{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.particle{position:absolute;border-radius:50%;animation:pfloat linear infinite;}
@keyframes pfloat{0%{transform:translateY(100vh) rotate(0deg);opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{transform:translateY(-100px) rotate(720deg);opacity:0;}}
@media(max-width:768px){
  .univ-nav{padding:1rem 1.2rem;}
  .univ-hero{padding:2.5rem 1.2rem 2rem;}
  .univ-body{padding:0 1.2rem 3rem;}
  .univ-series-grid{grid-template-columns:1fr 1fr;}
}

/* ── MODAL DETALLE LIBRO ──────────────────────────────────── */
.bdl-bg{position:fixed;inset:0;background:rgba(15,13,10,0.82);z-index:400;display:none;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto;}
.bdl-bg.open{display:flex;}
.bdl{background:var(--cream);width:100%;max-width:900px;margin:auto;position:relative;animation:bdlIn 0.35s cubic-bezier(0.22,1,0.36,1);border-radius:4px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,0.35);}
@keyframes bdlIn{from{opacity:0;transform:translateY(32px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.bdl-close{position:absolute;top:1.2rem;right:1.2rem;background:rgba(255,255,255,0.9);border:none;font-size:1rem;cursor:pointer;color:var(--muted);z-index:2;transition:all 0.2s;line-height:1;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.12);}
.bdl-close:hover{color:var(--ink);background:#fff;transform:scale(1.08);}
.bdl-top{display:grid;grid-template-columns:340px 1fr;gap:0;}
.bdl-gallery{background:linear-gradient(160deg,#f7ede0 0%,var(--paper2) 100%);padding:2.5rem 2rem;display:flex;flex-direction:column;gap:12px;position:relative;}
.bdl-gallery-label{font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:-4px;}
.bdl-main-wrap{position:relative;background:#f5f0e8;border-radius:6px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.12);aspect-ratio:3/4;min-height:200px;}
.bdl-main-img{width:100%;height:100%;object-fit:cover;object-position:top center;background:#f5f0e8;display:block;transition:opacity 0.3s;image-rendering:auto;filter:contrast(1.08) saturate(1.05);}
.bdl-main-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.bdl-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px;}
.bdl-thumb{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:all 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.bdl-thumb:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.12);}
.bdl-thumb.active{border-color:var(--gold);box-shadow:0 4px 12px rgba(232,168,56,0.3);}
.bdl-thumb-ph{width:100%;aspect-ratio:2/3;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--paper2);border:2px dashed var(--border);}
.bdl-photo-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px;}
.bdl-photo-label{font-size:0.55rem;text-align:center;color:var(--muted);letter-spacing:0.06em;text-transform:uppercase;}
.bdl-info{padding:2.5rem;display:flex;flex-direction:column;background:#fff;}
.bdl-cat{font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.bdl-title{font-family:var(--serif);font-size:1.9rem;font-weight:300;line-height:1.1;color:var(--ink);margin-bottom:6px;}
.bdl-author{font-size:0.9rem;color:var(--muted);font-style:italic;margin-bottom:1rem;}
.bdl-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.2rem;}
.bdl-badge{padding:5px 13px;font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;border-radius:2px;}
.bdl-price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:1.2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--border);}
.bdl-price{font-family:var(--serif);font-size:2.2rem;font-weight:300;}
.bdl-price-c{font-size:0.8rem;color:var(--muted);}
.bdl-desc-label{font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.bdl-desc-label::after{content:'';flex:1;height:1px;background:var(--border);}
.bdl-desc{font-size:0.92rem;line-height:1.9;color:var(--ink);opacity:0.82;margin-bottom:1.4rem;max-height:220px;overflow-y:auto;padding-right:8px;}
.bdl-desc::-webkit-scrollbar{width:4px;} .bdl-desc::-webkit-scrollbar-track{background:var(--paper);border-radius:4px;} .bdl-desc::-webkit-scrollbar-thumb{background:var(--border-dark,#c8b9a8);border-radius:4px;}
.bdl-desc::-webkit-scrollbar{width:3px;} .bdl-desc::-webkit-scrollbar-thumb{background:var(--border);}
.bdl-desc-loading{font-size:0.82rem;color:var(--muted);font-style:italic;margin-bottom:1.5rem;}
.bdl-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1.4rem;background:var(--paper);padding:12px 14px;border-radius:6px;}
.bdl-meta-item span:first-child{color:var(--muted);display:block;font-size:0.58rem;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:2px;}
.bdl-meta-item{font-size:0.8rem;font-weight:500;}
.bdl-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:1rem;}
.bdl-btn-cart{padding:14px;background:var(--ink);color:var(--cream);border:none;font-family:var(--sans);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;font-weight:500;transition:background 0.2s;border-radius:2px;}
.bdl-btn-cart:hover{background:var(--rust);}
.bdl-btn-cart:disabled{background:#aaa;cursor:not-allowed;}
.bdl-btn-wa{padding:12px;background:transparent;color:var(--ink);border:1px solid var(--border);font-family:var(--sans);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;transition:all 0.2s;border-radius:2px;}
.bdl-btn-wa:hover{border-color:#25D366;color:#25D366;}
.bdl-rec{padding:2rem 2.5rem;border-top:1px solid var(--border);background:var(--paper);}
.bdl-rec-title{font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem;display:flex;align-items:center;gap:10px;}
.bdl-rec-title::after{content:'';flex:1;height:1px;background:var(--border);}
.bdl-rec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.bdl-rec-card{cursor:pointer;background:var(--cream);transition:transform 0.2s;border-radius:4px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.bdl-rec-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,0.1);}
.bdl-rc-cover{aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.bdl-rc-cover img{width:100%;height:100%;object-fit:cover;}
.bdl-rc-sp{width:100%;height:100%;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-family:var(--serif);font-size:0.6rem;color:#fff;padding:0.5rem;text-align:center;}
.bdl-rc-info{padding:0.6rem;}
.bdl-rc-t{font-family:var(--serif);font-size:0.78rem;line-height:1.2;margin-bottom:2px;}
.bdl-rc-a{font-size:0.68rem;color:var(--muted);font-style:italic;margin-bottom:4px;}
.bdl-rc-p{font-size:0.78rem;font-weight:500;}
@media(max-width:768px){
  .bdl-top{grid-template-columns:1fr;}
  .bdl-gallery{padding:1.5rem;}
  .bdl-info{padding:1.5rem;max-height:none;background:var(--cream);}
  .bdl-rec-grid{grid-template-columns:repeat(2,1fr);}
  .bdl-rec{padding:1.5rem;}
  .bdl-thumbs{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:480px){
  .bdl-title{font-size:1.5rem;}
  .bdl-top{grid-template-columns:1fr;}
  .bdl-gallery{padding:1.2rem;}
}

/* ── AUTH MODAL ───────────────────────────────────────────── */
.auth-bg{position:fixed;inset:0;background:rgba(15,13,10,0.75);z-index:500;display:none;align-items:center;justify-content:center;padding:1.5rem;}
.auth-bg.open{display:flex;}
.auth-box{background:var(--cream);width:100%;max-width:420px;padding:2.5rem;position:relative;animation:bdlIn 0.3s ease;}
.auth-close{position:absolute;top:1rem;right:1.2rem;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--muted);}
.auth-close:hover{color:var(--ink);}
.auth-tag{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.auth-title{font-family:var(--serif);font-size:1.8rem;font-weight:300;margin-bottom:0.4rem;}
.auth-sub{font-size:0.82rem;color:var(--muted);margin-bottom:1.8rem;line-height:1.6;}
.auth-fld{margin-bottom:1rem;}
.auth-fld label{display:block;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.auth-fld input{width:100%;padding:11px 14px;border:1px solid var(--border);background:var(--paper);font-family:var(--sans);font-size:0.88rem;outline:none;transition:border-color 0.2s;box-sizing:border-box;}
.auth-fld input:focus{border-color:var(--gold);}
.auth-btn{width:100%;padding:13px;background:var(--ink);color:var(--cream);border:none;font-family:var(--sans);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;margin-top:0.5rem;transition:background 0.2s;}
.auth-btn:hover{background:var(--rust);}
.auth-switch{text-align:center;font-size:0.8rem;color:var(--muted);margin-top:1.2rem;}
.auth-switch a{color:var(--gold);cursor:pointer;text-decoration:none;}
.auth-switch a:hover{text-decoration:underline;}
.auth-err{font-size:0.78rem;color:var(--rust);margin-top:8px;min-height:18px;}
.auth-ok{font-size:0.78rem;color:var(--sage);margin-top:8px;}
/* Nav avatar */
.nav-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-pill);transition:all 0.2s;}
.nav-user:hover{border-color:var(--rust);background:var(--rust-light);}
.nav-avatar{width:28px;height:28px;border-radius:50%;background:var(--rust);display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:800;color:#fff;flex-shrink:0;}
.nav-user-name{font-size:0.75rem;font-weight:700;color:var(--ink);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Botón mis pedidos — sutil, no CTA */
.nav-pedidos-btn{
  display:flex;align-items:center;gap:6px;
  background:none;border:1.5px solid var(--border);color:var(--ink2);cursor:pointer;
  padding:8px 16px;font-family:var(--sans);font-size:0.76rem;font-weight:700;
  border-radius:var(--radius-pill);transition:all 0.2s;
}
.nav-pedidos-btn:hover{border-color:var(--rust);color:var(--rust);background:var(--rust-light);}
.nav-pedidos-btn.hidden{display:none!important;}
/* Mi cuenta modal */
.mcta-section{margin-bottom:1.5rem;}
.mcta-section-title{font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.mcta-pedido{padding:12px;background:var(--paper2);margin-bottom:8px;border-left:3px solid var(--gold);}
.mcta-pedido-id{font-size:0.68rem;color:var(--muted);margin-bottom:4px;}
.mcta-pedido-items{font-size:0.82rem;font-weight:500;margin-bottom:4px;}
.mcta-pedido-meta{display:flex;gap:10px;font-size:0.75rem;color:var(--muted);}

/* ── HAMBURGER & MOBILE MENU ──────────────────────────────── */
.hamburger-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;margin-left:4px;}
.hamburger-btn span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all 0.3s;}
.hamburger-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger-btn.open span:nth-child(2){opacity:0;}
.hamburger-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none;position:fixed;top:72px;left:0;right:0;background:#fff;z-index:99;
  border-bottom:2px solid var(--border);box-shadow:0 8px 24px rgba(30,27,23,0.1);
  flex-direction:column;padding:1rem 1.5rem 1.5rem;}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:14px 0;font-size:0.9rem;font-weight:700;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.mobile-menu a:last-of-type{border-bottom:none;}
.mobile-menu a:hover{color:var(--rust);}
.mobile-menu-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:1rem;}
.mobile-menu-btns button{padding:12px;background:var(--rust);color:#fff;border:none;
  border-radius:var(--radius-pill);font-family:var(--sans);font-size:0.8rem;font-weight:700;cursor:pointer;}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr;}
  .hero-left{padding:1rem 1rem 0.8rem;}
  .hero-right{display:none;}
  .about{grid-template-columns:1fr;}
  .about-v{min-height:260px;}
  .feats{grid-template-columns:1fr 1fr;}
  .feat:nth-child(2){border-right:none;}
  .fg{grid-template-columns:1fr 1fr;}
  .ruleta-inner{grid-template-columns:1fr;gap:3rem;text-align:center;}
  .ruleta-p{margin:0 auto 2rem;}
  .wheel-result{align-items:center;}
  .vendenos-steps{grid-template-columns:1fr 1fr;}
  .v-step-arrow{display:none;}
}

@media(max-width:768px){

  /* ── NAV ── */
  nav{grid-template-columns:auto 1fr auto;padding:0 1rem;height:60px;overflow:hidden;}
  .nav-left{display:none;}
  .nav-logo{font-size:1.25rem;}
  .nav-right{gap:6px;flex-shrink:0;}
  /* En mobile ocultar links del nav (están en el menú hamburguesa) */
  .nav-right-link{display:none;}
  #btn-mis-pedidos{display:none!important;}
  #nav-auth-area{display:none;}
  .hamburger-btn{display:flex;}

  /* ── HERO ── */
  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero-right{display:none;}
  .hero-left{display:none;} /* en mobile solo se muestra el texto central */
  .hero-text{padding:3rem 1.4rem 2.5rem;text-align:center;}
  .hero-tag{font-size:0.78rem;padding:5px 14px;}
  .hero-h1{font-size:2rem;margin-bottom:1rem;white-space:normal;}
  .hero-p{font-size:0.88rem;margin-bottom:1.5rem;}
  .hero-btns{justify-content:center;flex-direction:column;align-items:center;gap:10px;}
  .hero-btns a{width:100%;max-width:280px;text-align:center;padding:13px 20px;font-size:0.82rem;}
  .hero-trust{justify-content:center;gap:0.4rem;flex-wrap:wrap;margin-top:1.2rem;}
  .hero-trust span{font-size:0.7rem;}

  /* ── MARQUEE ── */
  .mq-inner span{font-size:0.7rem;margin:0 1rem;}

  /* ── FLASH STRIP ── */
  .flash-strip-inner{flex-direction:column;gap:0.8rem;padding:1rem 1.2rem;text-align:center;}
  .fstrip-timer{display:none;}
  .fstrip-badge{font-size:0.62rem;}
  .fstrip-cta{text-align:center;display:inline-block;}

  /* ── PACK BANNER ── */
  .pack-banner-inner{flex-direction:column;text-align:center;gap:0.8rem;padding:1.2rem;}
  .pack-banner-cta{text-align:center;}

  /* ── SHIPPING BANNER (inline styles) ── */
  [style*="grid-template-columns:auto 1fr 1fr"]{grid-template-columns:1fr!important;gap:0.8rem!important;padding:1.2rem 1.2rem!important;}

  /* ── FEATS ── */
  .feats{grid-template-columns:1fr;}
  .feat{border-right:none;border-bottom:1px solid var(--border);padding:1.6rem 1.2rem;}
  .feat:last-child{border-bottom:none;}

  /* ── CATEGORÍAS CHIPS ── */
  .cat-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:1rem;}
  .cat-chips::-webkit-scrollbar{display:none;}
  .cat-chip{flex-shrink:0;font-size:0.7rem;padding:6px 13px;}

  /* ── STATUS CHIPS (Todos/Nuevo/Usado) ── */
  .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .chips::-webkit-scrollbar{display:none;}
  .chip{flex-shrink:0;font-size:0.72rem;padding:8px 18px;}

  /* ── FILTROS ── */
  .filters{gap:8px;flex-wrap:wrap;}
  .fsearch{min-width:0;max-width:none;flex:1 1 100%;} /* búsqueda en línea propia */
  .fsel{font-size:0.75rem;padding:9px 28px 9px 12px;flex:1;}
  .rcount{width:100%;text-align:center;margin-left:0;}

  /* ── CATÁLOGO ── */
  .catalog{padding:2.5rem 1rem;}
  .sec-head{flex-direction:column;align-items:flex-start;gap:0.8rem;margin-bottom:1.5rem;}
  .sec-title{font-size:1.7rem;}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px;}

  /* ── CARDS ── */
  .info{padding:0.8rem 0.9rem 0.9rem;}
  .icat{font-size:0.58rem;}
  .ititle{font-size:1.12rem;}
  .iauthor{font-size:0.72rem;}
  .iprice{font-size:1.5rem;}
  .iprice-c{font-size:0.72rem;}
  .istock{font-size:0.62rem;}
  .ob{font-size:0.62rem;padding:8px 8px;letter-spacing:0.06em;}

  /* ── SEGUNDA MANO ── */
  .smano-section{padding:3rem 1.2rem;}
  .smano-inner{grid-template-columns:1fr;gap:2rem;}
  .smano-h2{font-size:1.8rem;}
  .smano-books{grid-template-columns:repeat(2,1fr);gap:8px;}
  .smano-book{padding:0.8rem;}
  .smano-book-cover{width:44px;height:58px;font-size:1.3rem;}
  .smano-book-title{font-size:0.7rem;}

  /* ── RULETA ── */
  .ruleta-inner{display:flex;flex-direction:column;gap:2rem;align-items:center;}
  .ruleta-center{order:-1;width:100%;display:flex;flex-direction:column;align-items:center;}
  .ruleta-text{width:100%;text-align:center;}
  .ruleta-tag{margin:0 auto 1.2rem;}
  .ruleta-premios{width:100%;}
  .ruleta-proof{margin:0 auto 1.5rem;}
  .wheel-wrap{width:240px;height:240px;}
  .wheel-svg{width:240px;height:240px;}
  .btn-spin{width:100%;max-width:240px;}
  .ruleta-section{padding:3rem 1.2rem;overflow:hidden;}
  .ruleta-h2{font-size:2rem;}

  /* ── ABOUT ── */
  .about-t{padding:3rem 1.2rem;}
  .a-h2{font-size:2rem!important;}
  .fg{grid-template-columns:1fr;}
  /* About visual — layout limpio en mobile (grid 2 col) */
  .about-v{
    min-height:auto;padding:2rem 1.2rem 2rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    gap:1.2rem;align-items:center;justify-items:center;
  }
  .ab-polaroid{
    position:static;transform:rotate(-2deg);
    width:110px;grid-column:1;grid-row:1;
  }
  .ab-polaroid img{height:80px;}
  .ab-quote{
    position:static;transform:rotate(1deg);
    grid-column:2;grid-row:1;
    top:auto;right:auto;
    font-size:0.78rem;padding:0.8rem;
    max-width:160px;
  }
  .ab-quote-mark{font-size:2rem;line-height:0.5;margin-bottom:4px;}
  .a-stats{
    position:static;
    grid-column:1 / -1;grid-row:2;
    display:flex;flex-direction:row;gap:2.5rem;
    text-align:center;justify-content:center;
  }
  .a-stat{margin-bottom:0;text-align:center;}
  .a-num{font-size:2rem;}
  /* Ocultar todo lo decorativo */
  .ab-bookmark,.ab-ticket,.ab-heart,.ab-star,.ab-star-2,.ab-sparkle,.ab-books{display:none;}
  /* Ruleta chips en mobile: scroll horizontal */
  .ruleta-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .ruleta-chips::-webkit-scrollbar{display:none;}
  .r-chip{flex-shrink:0;}
  .ruleta-proof{font-size:0.72rem;padding:6px 10px;max-width:100%;box-sizing:border-box;text-align:center;justify-content:center;}
  /* Decoraciones flotantes ruleta — ocultar en mobile para no saturar */
  .rs-deco--confetti,.rs-deco--book{display:none;}
  .rs-deco--star1{font-size:1.4rem;}
  .rs-deco--star2{font-size:1rem;}

  /* ── VÉNDENOS ── */
  .vendenos-section{padding:3rem 1.2rem;}
  .vendenos-steps{grid-template-columns:1fr;}
  .v-step-arrow{display:none;}

  /* ── FOOTER ── */
  footer{padding:3rem 1.2rem 1.5rem;}
  .fg{grid-template-columns:1fr;}

  /* ── DRAWER CARRITO ── */
  .drawer{width:100vw;}

  /* ── MODAL DE PEDIDO ── */
  .mdl{padding:1.8rem 1.4rem;border-radius:16px;}
  .pays{grid-template-columns:repeat(2,1fr);}
  .frow{grid-template-columns:1fr;}

  /* ── MODAL LIBRO DETALLE ── */
  .bdl-top{grid-template-columns:1fr;}
  .bdl-gallery{padding:1.2rem;}
  .bdl-info{padding:1.2rem;max-height:none;}
  .bdl-title{font-size:1.5rem;}
  .bdl-rec{padding:1.5rem 1.2rem;}
  .bdl-rec-grid{grid-template-columns:repeat(2,1fr);}

  /* ── UNIVERSO SCREEN ── */
  .univ-nav{padding:0.8rem 1rem;}
  .univ-body{padding:0 1rem 2.5rem;}
  .univ-series-grid{grid-template-columns:1fr 1fr;}

  /* ── MODAL CHECKOUT ── */
  #mb .mdl{max-height:96vh;padding:1.5rem 1.2rem;}
  #mb .mdl h2{font-size:1.5rem;}
}

/* ── PANTALLAS MUY PEQUEÑAS (≤480px) ─────────────────────── */
@media(max-width:480px){
  .hero-h1{font-size:1.8rem;white-space:normal;}
  .hero-text{padding:2.5rem 1.2rem 2rem;}
  /* Mantener 2 columnas — 1 col hace las cards demasiado altas */
  .grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .cover{max-height:200px;} /* evitar portadas gigantes en mobile */
  .info{padding:0.7rem 0.8rem 0.8rem;}
  .ititle{font-size:0.95rem;}
  .smano-books{grid-template-columns:1fr;}
  .smano-book{display:flex;align-items:center;gap:0.8rem;}
  .feats{grid-template-columns:1fr;}
  .cat-chip{font-size:0.64rem;padding:5px 11px;}
  .chip{font-size:0.66rem;padding:7px 13px;}
  .nav-logo{font-size:1.1rem;}
  .sec-title{font-size:1.4rem;}
  .ob{font-size:0.62rem;padding:8px 8px;}
  .mdl{padding:1.2rem 1rem;}
  .pays{grid-template-columns:repeat(2,1fr)!important;}
  .frow{grid-template-columns:1fr;}
  .bdl-top{grid-template-columns:1fr;}
  .bdl-rec-grid{grid-template-columns:repeat(2,1fr);}
  .univ-series-grid{grid-template-columns:1fr;}

  /* Nav mobile pequeño */
  nav{padding:0 0.8rem;height:56px;}
  .nav-logo{font-size:1rem;}
  .cart-btn{padding:7px 14px;font-size:0.72rem;}
  .cart-btn span:not(.cart-n){display:none;} /* ocultar texto, solo icono+número */

  /* Carrito drawer full width */
  .drawer{width:100vw;border-radius:0;}

  /* Modal pedido más compacto */
  .mdl{max-height:94vh;overflow-y:auto;}
  #mb .mdl{padding:1rem 0.9rem;}

  /* Flash strip en móvil pequeño */
  .flash-strip{padding:0.8rem 1rem;}
  .fstrip-code{font-size:0.75rem;}

  /* Ruleta */
  .ruleta-section{padding:2.5rem 1rem;}
  .ruleta-h2{font-size:1.7rem;}

  /* Footer */
  footer{padding:2.5rem 1rem 1.2rem;}
  .fbot{font-size:0.65rem;}

  /* Detalle libro */
  .bdl-title{font-size:1.3rem;}
  .bdl-price{font-size:1.8rem;}
  .bdl-info{padding:1rem;}
  .bdl-gallery{padding:1rem;}

  /* Auth modal */
  .auth-box{padding:1.5rem 1.2rem;}
  .auth-title{font-size:1.5rem;}

  /* WA fab más pequeño */
  .wa-fab{width:48px;height:48px;bottom:1.2rem;right:1.2rem;}
}

/* ── TOUCH: mejoras generales en móvil ─────────────────────── */
@media(hover:none) and (pointer:coarse){
  /* Hacer botones más fáciles de tocar */
  .ob{min-height:42px;display:flex;align-items:center;justify-content:center;}
  .chip,.cat-chip{min-height:36px;}
  .btn-gold,.btn-ghost{padding:15px 30px;}
  .cart-btn{padding:11px 20px;}
  /* Eliminar hover que queda pegado en touch */
  .card:hover{transform:none;}
  .spine:hover{transform:none;}
}

/* ── Carrusel de portadas en packs de saga ────────────────────────────────
   Se usa scroll-snap nativo: el gesto tactil del movil funciona solo, sin
   libreria ni listeners de arrastre. Las flechas son para raton.
   ───────────────────────────────────────────────────────────────────────── */
.cover-serie { position: relative; overflow: hidden; }

.serie-track {
  position: absolute; inset: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.serie-track::-webkit-scrollbar { display: none; }

.serie-slide {
  position: relative; flex: 0 0 100%; width: 100%; height: 100%;
  scroll-snap-align: center;
}
.serie-slide img,
.serie-slide .cover-ph {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block;
}

.serie-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: rgba(0, 0, 0, .48); color: #fff;
  font-size: 1.15rem; line-height: 1; cursor: pointer; z-index: 3;
  opacity: 0; transition: opacity .2s;
  display: flex; align-items: center; justify-content: center;
}
.card-serie:hover .serie-nav,
.serie-nav:focus-visible { opacity: 1; }
.serie-prev { left: 6px; }
.serie-next { right: 6px; }

.serie-pos {
  position: absolute; bottom: 8px; right: 8px; z-index: 3;
  background: rgba(0, 0, 0, .58); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; pointer-events: none;
}

.ribbon.r-serie { background: #6D4C9F; color: #fff; }

/* En movil las flechas estorban: el dedo ya desliza */
@media (hover: none) {
  .serie-nav { display: none; }
  .serie-pos { bottom: 6px; right: 6px; font-size: .64rem; }
}

/* ── Tarjeta de universo ──────────────────────────────────────────────────
   El hover se hacia con JS moviendo la tarjeta 6 px hacia arriba. Al rozar el
   borde inferior, la tarjeta se apartaba de debajo del cursor: se disparaba
   mouseout, volvia a su sitio, y otra vez mouseover. Resultado: parpadeo.
   Con :hover y una escala pequena la tarjeta crece ALREDEDOR del cursor, que
   se queda siempre dentro, y el navegador no entra en ese bucle.
   ───────────────────────────────────────────────────────────────────────── */
.univ-card{
  transition:transform .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.univ-card:hover{
  transform:scale(1.025);
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
@media (prefers-reduced-motion:reduce){
  .univ-card{transition:none}
  .univ-card:hover{transform:none}
}

/* Comprar ahora — atajo desde la ficha del libro al carrito */
.bdl-btn-comprar{
  width:100%;padding:13px 18px;margin-top:8px;
  border:none;border-radius:10px;cursor:pointer;
  background:var(--gold,#C9A96E);color:#1A1A2A;
  font-family:var(--sans);font-size:0.95rem;font-weight:700;letter-spacing:0.02em;
  transition:filter 0.2s, transform 0.2s;
}
.bdl-btn-comprar:hover{filter:brightness(1.08);transform:translateY(-1px);}

/* Ver mas universos. Antes usaba .ob-ghost, que es texto blanco para el
   overlay oscuro de la tarjeta: sobre el fondo crema no se leia nada. */
.univ-mas{
  padding:.7rem 1.5rem;border-radius:999px;cursor:pointer;
  background:transparent;border:1.5px solid var(--gold,#C9A96E);
  color:var(--ink,#1A1A2A);font-family:var(--sans);
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.univ-mas:hover{background:var(--gold,#C9A96E);color:#1A1A2A;}

/* El hueco bajo la portada. position:sticky no sirve aqui: .bdl tiene
   overflow:hidden y eso lo anula. La columna mide lo que mida la sinopsis,
   asi que en vez de pelearse con la altura, la portada se centra y crece
   hasta donde da: el espacio sobrante queda repartido y se lee como margen. */
@media (min-width:861px){
  .bdl-top{grid-template-columns:400px 1fr;}
  .bdl-gallery{justify-content:center;padding:2rem 1.8rem;}
  .bdl-main-wrap{aspect-ratio:auto;max-height:none;}
  .bdl-main-img{height:auto;max-height:60vh;object-fit:contain;}
}

/* Novedad: libros dados de alta esta semana */
.ribbon.r-nuevo{background:#2E7D5B;color:#fff;}

/* "Compramos a todo el Perú", arriba de Vende tus libros (clienta, 27/09) */
.vendenos-peru{font-family:var(--serif,Georgia,serif);font-size:1.25rem;font-weight:700;color:var(--rust,#C0563F);margin:.8rem 0 .2rem;text-align:center;}

/* Mis favoritos, en su propia ventana (27/09) */
.wl-cuenta{font-size:.85rem;color:var(--muted,#6b7280);margin:0 0 .8rem;}
.wl-vacia{padding:2rem 0;text-align:center;color:var(--muted,#6b7280);}
.wl-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border,#e5e7eb);}
.wl-img{width:68px;height:100px;object-fit:cover;border-radius:6px;background:#f1ece4;flex:none;}
.wl-info{flex:1;min-width:0;}
.wl-tit{font-weight:700;margin:0 0 2px;line-height:1.3;}
.wl-aut{font-size:.82rem;color:var(--muted,#6b7280);margin:0 0 4px;}
.wl-precio{font-weight:700;margin:0 0 8px;}
.wl-precio s{font-weight:400;color:var(--muted,#6b7280);}
.wl-acciones{display:flex;gap:6px;flex-wrap:wrap;}
.wl-acciones button{border-radius:20px;padding:6px 12px;font-size:.8rem;cursor:pointer;border:1px solid var(--border,#d1d5db);background:#fff;}
.wl-acciones .wl-btn-car{background:#3E7A8C;color:#fff;border-color:#3E7A8C;}

/* La fecha de entrega, antes de pagar (27/09) */
.fecha-prevista{margin:8px 0 6px;padding:10px 12px;border-radius:8px;background:#EAF4EE;color:#1E5B3A;font-size:.86rem;line-height:1.45;border:1px solid #BFDCCB;}