/* F5-01 FIX: suelo de tamano de letra en las tarjetas.
   Medido en produccion: 655 de 1.154 textos visibles (57%) se pintaban por
   debajo de 12px, y 421 a 9px. No eran adornos — eran la categoria, la
   editorial y el "S/." del precio. Las guias de Apple y Android ponen el
   minimo practico en 11-12px; a 9px mucha gente de mas de 40 anos no lo lee.
   El suelo pasa a 0.75rem = 12px. */
/* ═══════════════════════════════════════════════════════════
   SABER DE LIBROS — HOJA DE ESTILOS
   Todo el diseño de la tienda vive aquí. El marcado y la lógica
   están en index.html y no hace falta tocarlos para rediseñar.
   Orden: base y variables -> componentes heredados -> arquitectura A
   -> componentes propios -> capa cosmos -> intro.
   Las reglas de abajo ganan a las de arriba.
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   SABER DE LIBROS — TIENDA v4  ·  Rediseño profesional
   ═══════════════════════════════════════════════════════════ */

/* ── Barra de progreso de scroll ────────────────────────── */
nav{transition:background 0.25s,box-shadow 0.25s,border-color 0.25s;}
.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(0deg);}60%{transform:translateY(-4px) rotate(0deg);}}
:root{
  /* ── Paleta SABER DE LIBROS · COSMOS ───────────────────────
     Se conservan los nombres de variable (--rust, --sky, --gold,
     --sage, --ink, --paper) para no romper ningún selector; solo
     cambian los valores. Ojo: --ink pasa a ser el color del TEXTO
     (luz de estrella) y --espacio es el fondo profundo. */

  /* Fondos del espacio */
  --espacio:#070B18;        /* vacío profundo */
  --paper:#0A0F20;          /* fondo general */
  --paper2:#111832;         /* superficie elevada */
  --cream:#151D3B;          /* tarjetas y paneles */
  --nebulosa:#1B2450;       /* superficie destacada */

  /* Texto: luz de estrella */
  --ink:#EAE7F7;  --ink2:#BDB8D8;
  --muted:#9A94BC;  --muted2:#6E6890;

  /* Bordes tenues, como polvo estelar */
  --border:#25305A; --border-dark:#37447A;
  --borde-sutil:rgba(234,231,247,0.14);

  /* Acentos — del logo, llevados al espacio */
  --rust:#E8B45C; --rust-dark:#C8913A; --rust-light:#2A2440;   /* oro estelar: acción */
  --rust-ink:#F6D9A0;
  --sky:#5FD4C4;  --sky-dark:#3FA99B;  --sky-light:#16302F;    /* aguamarina: disponible */
  --gold:#E8B45C; --gold-dark:#C8913A; --gold-light:#2E2743;   /* oro: ofertas */
  --sage:#8A7FE8; --sage-light:#241F45;                        /* violeta nebulosa */

  /* Tipografía elegante: serif de alto contraste + geométrica fina */
  --serif:'Marcellus',Georgia,serif;
  --script:'Marcellus',Georgia,serif;
  --sans:'Space Grotesk',system-ui,sans-serif;

  --radius-pill:999px; --radius-card:10px; --radius-sm:7px;

  /* Sombras: en el espacio la luz no rebota, se difumina */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.45), 0 12px 30px rgba(0,0,0,0.35);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.5), 0 26px 60px rgba(0,0,0,0.45);

  --low-stock:#E8B45C; --out-stock:#E2687A;

  /* Campos de estrellas reutilizables, generados con degradados
     puntuales: no hay imágenes ni peticiones extra. */
  --nube-nebulosa:
    radial-gradient(60% 45% at 18% 12%, rgba(138,127,232,.18), transparent 70%),
    radial-gradient(50% 40% at 82% 78%, rgba(95,212,196,.13), transparent 70%),
    radial-gradient(45% 35% at 62% 22%, rgba(232,180,92,.10), transparent 70%);

  --grid-paper:none; --grid-size:auto;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* Sin overflow-x:hidden a propósito. Lo llevaba para tapar un
   desbordamiento de la rejilla del catálogo, pero de paso convertía
   la página en contenedor de scroll y eso anula position:sticky en
   toda la web: la cabecera no se quedaba fija. El desbordamiento se
   corrige en su origen con min-width:0 (ver .cuerpo más abajo). */
body{
  font-family:var(--sans);color:var(--ink);font-weight:400;line-height:1.55;
  background:var(--paper);
}

/* ── SCRAPBOOK UTILS ───────────────────────────────────────
   Clases decorativas reutilizables. NO tocan ninguna funcionalidad,
   solo se montan encima como pseudo-elementos o helpers visuales.
   ─────────────────────────────────────────────────────────── */

/* Washi tape (cinta decorativa — pseudo-elemento absoluto) */

/* Asterisco hand-drawn (SVG inline via background) */

/* Flecha punteada hand-drawn (para conectar secciones) */

/* Marco "papel rasgado" (torn edge arriba + abajo) */

/* Sticker / etiqueta inclinada */
.scrap-sticker.coral{background:var(--rust);color:#fff;}

/* Overlay oscuro sobre fondos personalizados — SOLO se activa cuando hay imagen.
   Antes era crema (diseño claro original); el sitio ahora es de tema oscuro
   (--paper) y ese overlay claro dejaba el texto --ink/--sky/--muted invisible. */
.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(10,15,32,0.82) 0%,
    rgba(10,15,32,0.68) 40%,
    rgba(10,15,32,0.82) 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:1px solid var(--border);
  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 */
/* Logo bounce al hover */
.nav-logo:hover img{animation:logoBounce 0.4s ease;}
@keyframes logoBounce{0%,100%{transform:translateY(0);}40%{transform:translateY(-5px);}70%{transform:translateY(-2px);}}
/* Pequeña etiqueta scrapbook "menú ↓" arriba de los links */
.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(0deg);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(0deg);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(--espacio);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:var(--cream);}
.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:var(--cream);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 — pastilla junto al selector de distrito ── */
.delivery-row{
  flex:0 0 auto;display:flex;align-items:center;gap:5px;
  background:var(--sky-light);border:1px solid var(--sky);
  border-radius:var(--radius-pill);padding:0.5rem 0.9rem;
  font-size:0.78rem;white-space:nowrap;
}
.delivery-row::before{content:'🛵';font-size:0.8rem;}
.delivery-row strong{color:var(--sky);font-weight:700;}

/* ══════════════════════════════════════════════════════════
   HERO — Impactante, basado en el espíritu del logo
   ══════════════════════════════════════════════════════════ */
/* El texto del hero centrado verticalmente, libritos también centrados */
/* 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 */
/* Halo crema SOLO detrás del texto (título + descripción + botones) */
/* Asterisco hand-drawn flotante (izquierda arriba) */
/* Borde rasgado inferior + asterisco mostaza derecha */
/* ── Decoraciones flotantes scrapbook del hero ── */
/* ── 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;}
/* Sin GSAP: nada se pre-oculta, así que no hace falta revelarlo después. */
.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(0deg);
  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(0deg);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;
}
/* Sticker "NUEVO" rotado sobre los libros izquierda */
/* Corazón scrapbook derecha */
/* Contenedor de portadas — fila horizontal dentro de cada lado */
/* Portadas con leve rotación alterna scrapbook */
.covers-row .hero-cover:nth-child(odd){transform:rotate(0deg);}
.covers-row .hero-cover:nth-child(even){transform:rotate(0deg) translateY(-3px);}
.covers-row .hero-cover:nth-child(3n){transform:rotate(0deg) translateY(-6px);}
/* 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(--borde-sutil);
}
.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;}

/* ══════════════════════════════════════════════════════════
   MARQUEE — banda scrapbook (washi-tape feel)
   ══════════════════════════════════════════════════════════ */
.marquee::before,

/* ══════════════════════════════════════════════════════════
   FEATURES — Cards con color accent
   ══════════════════════════════════════════════════════════ */
.feats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--border);background:var(--cream);
  border-top:1px solid var(--border);
}
.feat{
  padding:2.4rem 1.8rem;
  border-right:2px solid 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: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(0deg);box-shadow:0 2px 8px rgba(20,22,31,0.10);}

/* ══════════════════════════════════════════════════════════
   CATÁLOGO
   ══════════════════════════════════════════════════════════ */
.catalog{
  max-width:1400px;margin:0 auto;padding:5rem 2.5rem;position:relative;
}
.sec-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:2.5rem;padding-bottom:1.2rem;
  border-bottom:2px solid var(--border-dark);
  position:relative;
}
.sec-head::before{
  content:'';position:absolute;top:-14px;left:20px;transform:rotate(0deg);
  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(0deg);
  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:1px solid var(--border);border-radius:var(--radius-pill);
  background:var(--gold);
  transition:transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow:0 2px 8px rgba(20,22,31,0.10);
}
.sec-link:hover{transform:translate(-1px,-1px);box-shadow:0 2px 8px rgba(20,22,31,0.10);background:var(--rust);color:#fff;}

/* ── FILTROS ────────────────────────────────────────────── */
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  padding:7px 18px;font-size:0.82rem;font-weight:700;cursor:pointer;
  border:1px solid var(--border);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:0 2px 8px rgba(20,22,31,0.10);
}
.chip:hover{background:var(--gold-light);transform:translate(-1px,-1px);box-shadow:0 2px 8px rgba(20,22,31,0.10);}
.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:1px solid var(--border);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:0 2px 8px rgba(20,22,31,0.10);
}
.cat-chip:nth-child(3n){transform:rotate(0deg);}
.cat-chip:nth-child(3n+1){transform:rotate(0deg);}
.cat-chip:hover{background:var(--sky-light);transform:rotate(0) translate(-1px,-1px);box-shadow:0 2px 8px rgba(20,22,31,0.10);}
.cat-chip.active{background:var(--rust);color:#fff;transform:rotate(0deg);}
/* 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;}

/* ══════════════════════════════════════════════════════════
   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:1px solid var(--border);
  box-shadow:0 2px 8px rgba(20,22,31,0.10);
  transition:transform 0.3s cubic-bezier(.25,.46,.45,.94), box-shadow 0.3s ease;
  content-visibility:auto;
}
.card:nth-child(4n){transform:rotate(0deg);}
.card:nth-child(4n+2){transform:rotate(0deg);}
.card:hover{
  transform:translate(-3px,-5px) rotate(0);
  box-shadow:0 2px 8px rgba(20,22,31,0.10);
}
.card.agotado{opacity:0.55;cursor:default;}
.card.agotado:hover{transform:none;box-shadow:0 2px 8px rgba(20,22,31,0.10);}
.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:1px solid var(--border);
}
.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(0deg);display:inline-block;
}
.ititle{
  font-family:var(--serif);font-size:1.1rem;color:var(--ink);
  margin-bottom:4px;line-height:1.15;font-weight:400;letter-spacing:0;
}
.iauthor{
  font-family:var(--script);
  font-size:1rem;color:var(--muted);margin-bottom:auto;padding-bottom:0.9rem;
  font-weight:600;font-style:normal;
}
.ifoot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:0.9rem;border-top:1px solid var(--border);
  flex-wrap:wrap;gap:4px;
}
.iprice{font-family:var(--serif);font-size:1.4rem;font-weight:400;color:var(--rust);letter-spacing:0;}
.iprice-c{font-size:0.72rem;color:var(--muted);font-family:var(--sans);font-weight:500;}
.istock{font-size:0.7rem;font-weight:600;}
.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:1px solid var(--border);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:0 2px 8px rgba(20,22,31,0.10);
}
.pb.act{background:var(--rust);color:#fff;}
.pb:hover:not(.act){background:var(--gold-light);transform:translate(-1px,-1px);box-shadow:0 2px 8px rgba(20,22,31,0.10);}

/* ══════════════════════════════════════════════════════════
   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(--borde-sutil);
  border-bottom:3px solid var(--borde-sutil);
}
.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(0deg);
  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(0deg);
  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:var(--cream);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;
}
/* Polaroid con foto del logo */
/* Cita flotante */
/* Stack de libros SVG centrado abajo */
/* Marcador/bookmark colgando desde arriba */
/* Estrella dibujada decorativa */
/* Estrellita 2 y sparkle */

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
footer{
  background:var(--espacio);
  border-top:4px solid var(--rust);
  padding:5rem 2.5rem 2rem;
  position:relative;
}
footer::before{
  content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(0deg);
  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;
  /* F5-01: estaba al 0.4 de opacidad. Sobre el fondo oscuro del pie eso
     deja los enlaces legales —terminos, privacidad, reclamaciones— por
     debajo del contraste minimo. Al 0.72 siguen siendo discretos y se
     leen. */
  color:rgba(250,245,239,0.72);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:hover{transform:scale(1.12);box-shadow:0 8px 28px rgba(37,211,102,0.5);}

/* ── Hero trust bar ──────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════
   FLASH SALE STRIP — Barra después del hero
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   PACK 3×2 BANNER — Entre features y envíos
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   RULETA — Sección entre catálogo y about
   ══════════════════════════════════════════════════════════ */
.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:1px solid var(--border);
  border-radius:var(--radius-pill);text-decoration:none;
  font-size:0.78rem;font-weight:800;transition:all 0.15s;width:fit-content;
  box-shadow:0 2px 8px rgba(20,22,31,0.10);
}
.wheel-wa:hover{transform:translate(-2px,-2px);box-shadow:0 2px 8px rgba(20,22,31,0.10);}
@keyframes popIn{0%{transform:scale(0.5);opacity:0;}80%{transform:scale(1.1);}100%{transform:scale(1);opacity:1;}}
.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(--espacio);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:1px solid var(--border);
  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:0 2px 8px rgba(20,22,31,0.10);
}
.btn-spin:hover:not(:disabled){background:var(--rust-dark);transform:translate(-2px,-2px);box-shadow:0 2px 8px rgba(20,22,31,0.10);}
.btn-spin:disabled{opacity:0.5;cursor:not-allowed;transform:none;}

/* ── Premios posibles + prueba social ─────────────────────── */

/* Tarjetitas misterio */

/* Badge prueba social */

/* Decoraciones flotantes de la sección ruleta */

/* ══════════════════════════════════════════════════════════
   VÉNDENOS — Sección de compra de libros al público
   ══════════════════════════════════════════════════════════ */

/* ── 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-porque{max-width:820px;margin:0 auto 2.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.resenas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;margin-bottom:3rem;}
.resena-card{background:var(--cream);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(0deg);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;}
.resenas-empty-ico{font-size:2.2rem;margin-bottom:0.6rem;}
.resenas-empty-titulo{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin:0 0 0.4rem;}
.resenas-empty-sub{font-size:0.84rem;color:var(--muted);margin:0;}
/* Formulario */
.resena-form-wrap{background:linear-gradient(165deg,var(--cream) 0%,var(--paper2) 100%);border-radius:var(--radius-card);border:1.5px solid var(--border);border-top:3px solid var(--gold);padding:2.2rem 2rem;max-width:560px;margin:0 auto;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.resena-form-quote{position:absolute;top:-18px;right:18px;font-family:var(--serif);font-size:6rem;line-height:1;color:var(--gold);opacity:0.14;pointer-events:none;user-select:none;}
.resena-form-title{font-family:var(--serif);font-size:1.25rem;color:var(--ink);margin-bottom:0.4rem;text-align:center;position:relative;}
.resena-form-sub{font-size:0.82rem;color:var(--muted);text-align:center;margin-bottom:1.6rem;position:relative;}
.resena-field{margin-bottom:1.1rem;position:relative;}
.resena-label{display:block;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted);margin-bottom:0.45rem;}
.resena-stars-row{display:flex;gap:10px;justify-content:center;}
.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;background:var(--paper);}
.resena-inp:focus{border-color:var(--rust);}
.resena-textarea{resize:vertical;min-height:90px;}
.resena-contador{display:block;text-align:right;font-size:0.72rem;color:var(--muted);margin-top:0.3rem;}
.resena-btn{width:100%;padding:0.8rem;background:var(--rust);color:#fff;border:1px solid var(--border);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:0 2px 8px rgba(20,22,31,0.10);}
.resena-btn:hover{background:var(--rust-dark);transform:translate(-1px,-1px);box-shadow:0 2px 8px rgba(20,22,31,0.10);}
.resena-btn:active{transform:translate(1px,1px);box-shadow:0 2px 8px rgba(20,22,31,0.10);}
.resena-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:0 2px 8px rgba(20,22,31,0.10);}
.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;}
  .resenas-porque{grid-template-columns:1fr;gap:16px;max-width:340px;}
}
/* ── Fila: libro | formulario | libro ─────────────────────── */
.resenas-form-row{
  display:flex;align-items:center;justify-content:center;
  gap:2.5rem;margin-bottom:3rem;
}

/* ── Libros 3D decorativos (CSS puro, sin librerías) — se balancean
   izquierda/derecha mostrando siempre la portada, nunca dan la
   vuelta completa (no llegan a enseñar lomo ni contratapa). */
.resenas-book3d{
  width:190px;height:280px;flex-shrink:0;
  perspective:1300px;pointer-events:none;
  display:none;
}
.resenas-book3d-in{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  animation:rbBalance 7s ease-in-out infinite;
}
.resenas-book3d-r .resenas-book3d-in{animation-delay:-3.5s;}
@keyframes rbBalance{
  0%,100%{transform:rotateX(-4deg) rotateY(-24deg);}
  50%{transform:rotateX(-4deg) rotateY(24deg);}
}
.rb-face{position:absolute;border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,0.45);}
.rb-front,.rb-back{
  width:190px;height:280px;
  background-size:cover;background-position:center;
}
.rb-front{transform:translateZ(19px);}
.rb-back{transform:rotateY(180deg) translateZ(19px);}
.rb-left,.rb-right{width:38px;height:280px;left:76px;}
.rb-left{transform:rotateY(-90deg) translateZ(95px);}
.rb-right{transform:rotateY(90deg) translateZ(95px);}

/* Cada libro es un título completo y distinto: portada real al frente
   (foto), lomo y contratapa en color sólido a juego con esa portada —
   Standard Ebooks solo publica la tapa (es un ebook, no existe foto de
   lomo/contratapa físicos de esta edición, así que no se inventa una).
   Portadas: "Orgullo y Prejuicio" de Jane Austen y "Don Quijote" de
   Cervantes (trad. John Ormsby), ambas CC0 vía Standard Ebooks.
   https://standardebooks.org/ebooks/jane-austen/pride-and-prejudice
   https://standardebooks.org/ebooks/miguel-de-cervantes-saavedra/don-quixote/john-ormsby
   Solo se piden en desktop (≥1280px, ver media query abajo) — en mobile
   el navegador no llega a descargarlas porque el elemento nunca se
   muestra (display:none). */
.resenas-book3d-l .rb-front{background-image:url('media/libros3d/rb-real-1.jpg');}
.resenas-book3d-l .rb-back,
.resenas-book3d-l .rb-left,
.resenas-book3d-l .rb-right{background:#3E2A1C;}
.resenas-book3d-r .rb-front{background-image:url('media/libros3d/rb-real-2.jpg');}
.resenas-book3d-r .rb-back,
.resenas-book3d-r .rb-left,
.resenas-book3d-r .rb-right{background:#1E2A3E;}
@media(min-width:1280px){
  .resenas-book3d{display:block;}
}
@media(prefers-reduced-motion:reduce){
  .resenas-book3d-in{animation:none;transform:rotateX(-6deg) rotateY(24deg);}
}

/* ── DRAWER / CARRITO ─────────────────────────────────────── */
.back{position:fixed;inset:0;background:rgba(15,13,10,0.65);z-index:1000;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.back.open{opacity:1;pointer-events:all;}
/* ── Orden de las capas ─────────────────────────────────────────
   La barra de navegacion es sticky con z-index:900, y TODAS las capas que
   se abren encima estaban por debajo: el acceso en 500, el checkout en 300,
   el carrito en 201, los avisos en 500. Resultado: la barra se dibujaba
   sobre ellas y les comia la cabecera —al abrir "Iniciar sesion", el titulo
   del panel quedaba detras del buscador—.

   Escala, de abajo arriba. Si se anade una capa nueva, va aqui:
     nav ............... 900
     velo de fondo .... 1000
     carrito .......... 1100
     checkout / acceso  1200
     panel de filtros . 9100
     avisos (toast) ... 9500   siempre visibles, incluso sobre un modal
     intro ........... 100000
   ────────────────────────────────────────────────────────────── */
.drawer{position:fixed;right:0;top:0;bottom:0;width:400px;max-width:100vw;background:var(--cream);z-index:1100;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(--borde-sutil);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:1200;display:none;align-items:center;justify-content:center;padding:1rem;}
.mdl-bg.open{display:flex;}
.mdl{background:var(--cream);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:2.5rem;border-radius:24px;
     /* El panel casi siempre tiene mas contenido del que cabe, y un borde
        limpio no lo dice. Este degradado pegado abajo se ve solo mientras
        queda algo por debajo: al llegar al final se apoya en el fondo del
        panel y desaparece. Es la unica pista de que hay que bajar. */
     background-image:linear-gradient(var(--cream),var(--cream)),
                      linear-gradient(to top,rgba(0,0,0,.18),transparent 42px);
     background-position:local, bottom;
     background-size:100% 100%, 100% 42px;
     background-repeat:no-repeat, no-repeat;
     background-attachment:local, scroll;}
.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:var(--cream);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;}

/* Distrito de entrega — select + costo en una sola fila */
.distrito-row{display:flex;align-items:center;gap:8px;}
.distrito-row .distrito-select{flex:1;min-width:0;}

/* ── Métodos de pago: lista de filas, no grilla de chips ──── */
/* Seis metodos en una sola columna ocupaban 343px, y el panel del checkout
   corta a 810px con casi la mitad del contenido por debajo. Resultado: se
   veian cuatro, y los dos ultimos —50%+50% y Acumular— quedaban fuera de la
   ventana. Se podia bajar, pero nada lo insinuaba, asi que parecian no estar
   disponibles.

   En dos columnas caben los seis a la vez, en 180px en vez de 343. Y de paso
   vuelven a tener efecto las dos media queries que ya pedian
   grid-template-columns sobre .pays: estaban escritas para una rejilla y no
   hacian nada desde que esto paso a flex. */
.pays{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;margin-bottom:1.5rem;align-items:stretch;
}
@media(max-width:480px){ .pays{grid-template-columns:1fr;} }
.pay{
  display:flex;align-items:center;gap:11px;
  padding:10px 14px;cursor:pointer;
  border:1px solid var(--border);border-radius:10px;
  background:var(--paper2);
  font-family:var(--sans);color:var(--ink2);
  transition:border-color 0.2s,background 0.2s;
  position:relative;
}
.pay::before{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.85rem;background:var(--nebulosa);
}
.pay[data-metodo="yape"]::before{content:'📱';}
.pay[data-metodo="plin"]::before{content:'🔵';}
.pay[data-metodo="tarjeta"]::before{content:'💳';}
.pay[data-metodo="transferencia"]::before{content:'🏦';}
.pay[data-metodo="abono"]::before{content:'½';font-weight:700;}
.pay[data-metodo="acumular"]::before{content:'📦';}
.pay-nombre{font-size:0.86rem;font-weight:700;color:var(--ink);}
.pay-sub{display:block;font-size:0.7rem;color:var(--muted);font-weight:400;margin-top:1px;}
.pay::after{
  content:'';margin-left:auto;flex:0 0 auto;
  width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--border-dark);
}
.pay.act{border-color:var(--rust);background:var(--rust-light);}
.pay.act::before{background:var(--rust);color:#1a1428;}
.pay.act::after{border-color:var(--rust);background:radial-gradient(var(--rust) 45%,transparent 50%);}
.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(--borde-sutil);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:9500;background:var(--espacio);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 solid var(--borde-sutil);
  animation:stockShine 6s linear infinite;
  position:relative;
}
@keyframes stockShine{
  0%{background-position:0% 0;}
  100%{background-position:200% 0;}
}

/* ── UNIVERSO MODE ────────────────────────────────────────── */
.univ-overlay.active{opacity:1;pointer-events:none;}
.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;}
.univ-bg::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.55);}
.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-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-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 solid 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:var(--cream);}
.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{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-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:1rem;}
.bdl-btn-cart{padding:14px;background:var(--espacio);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:1200;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(--espacio);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;}
/* 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(--espacio);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:var(--cream);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;
  /* El menu se salia por abajo: medido 552px de alto sobre una pantalla de
     545. Sin tope crecia sin limite y el ultimo enlace quedaba fuera, sin
     forma de alcanzarlo. Ahora se acota a lo que queda de pantalla y, si no
     cabe, se desplaza por dentro.
     Se usa dvh y no vh: en el movil la barra del navegador aparece y
     desaparece, y vh se calcula con la pantalla ENTERA, ignorandola — que es
     justo lo que hacia que se cortara. vh queda de respaldo para navegadores
     que no entiendan dvh. */
  /* Respaldo por si el JS no llega a medir; el valor exacto lo pone
     toggleMobileMenu(), que conoce la altura real de la cabecera. */
  max-height:calc(100vh - 160px);
  max-height:calc(100dvh - 160px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;}
.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){
  .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;}
  .wheel-result{align-items:center;}
}

@media(max-width:768px){

  /* ── NAV ── */
  nav{grid-template-columns:auto 1fr auto;padding:0 1rem;height:60px;overflow:hidden;}
  .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) */
  #btn-mis-pedidos{display:none!important;}
  #nav-auth-area{display:none;}
  .hamburger-btn{display:flex;}

  /* ── HERO ── */
  .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;}

  /* ── MARQUEE ── */

  /* ── FLASH STRIP ── */

  /* ── PACK BANNER ── */

  /* ── 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 ── */
  .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.72rem;}
  .ititle{font-size:0.88rem;}
  .iauthor{font-size:0.72rem;}
  .iprice{font-size:1.1rem;}
  .iprice-c{font-size:0.75rem;}
  .istock{font-size:0.62rem;}
  .ob{font-size:0.62rem;padding:8px 8px;letter-spacing:0.06em;}

  /* ── SEGUNDA MANO ── */

  /* ── RULETA ── */
  .wheel-wrap{width:240px;height:240px;}
  .wheel-svg{width:240px;height:240px;}
  .btn-spin{width:100%;max-width:240px;}

  /* ── 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;
  }
  /* Ocultar todo lo decorativo */
  /* Ruleta chips en mobile: scroll horizontal */
  /* Decoraciones flotantes ruleta — ocultar en mobile para no saturar */

  /* ── VÉNDENOS ── */

  /* ── 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;}
  /* 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.82rem;}
  .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 */

  /* Ruleta */

  /* 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;font-size:1.3rem;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;}
  .cart-btn{padding:11px 20px;}
  /* Eliminar hover que queda pegado en touch */
  .card:hover{transform:none;}
  .spine:hover{transform:none;}
}

/* ═══════════════════════════════════════════════════════════
   ARQUITECTURA A · TIENDA CON FILTROS LATERALES
   Va al final para ganar a las reglas heredadas.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Barra de servicio ──────────────────────────────────── */

/* ── 2. Cabecera con buscador protagonista ─────────────────── */
nav{position:sticky;top:0;z-index:900;background:rgba(255,255,255,0.97);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);display:block;padding:0;box-shadow:none;}
.nav-in{max-width:1340px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:24px;}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none;color:inherit;}
.nav-logo img{width:46px;height:46px;object-fit:contain;}
.nav-marca{font-family:var(--serif);font-weight:800;font-size:0.9rem;line-height:1;letter-spacing:-0.02em;text-transform:uppercase;}
.nav-marca-sub{display:block;font-family:var(--script);font-size:0.72rem;letter-spacing:0.06em;
               color:var(--muted);text-transform:none;font-weight:400;margin-top:3px;}
.buscador{flex:1;display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-card);
          overflow:hidden;max-width:620px;background:var(--cream);}
.buscador-ico{padding:0 0 0 14px;color:var(--muted);font-size:1.15rem;line-height:1;}
.buscador input{flex:1;border:none;outline:none;padding:12px 14px;font-size:0.94rem;font-family:var(--sans);
                color:var(--ink);background:none;min-width:0;}
.buscador input::placeholder{color:var(--muted2);}
.buscador button{background:var(--espacio);color:#fff;border:none;padding:0 22px;align-self:stretch;
                 font-weight:700;font-size:0.9rem;font-family:var(--sans);cursor:pointer;transition:background 0.15s;}
.buscador button:hover{background:var(--rust);}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:7px;flex-shrink:0;}
.nav-txt{display:inline;}

/* ── 3. Barra de categorías ────────────────────────────────── */
.catnav .cat-chip{background:none;border:none;border-bottom:3px solid transparent;border-radius:0;
                  padding:12px 14px;font-size:0.88rem;font-weight:600;color:var(--muted);
                  white-space:nowrap;cursor:pointer;transition:color 0.15s,border-color 0.15s;
                  font-family:var(--sans);box-shadow:none;transform:none;}
.catnav .cat-chip:hover{color:var(--ink);border-bottom-color:var(--border-dark);transform:none;box-shadow:none;}
.catnav .cat-chip.active{color:var(--rust);border-bottom-color:var(--rust);background:none;transform:none;box-shadow:none;}
.catnav .cat-chip.oferta-chip{color:var(--gold-dark);}
.catnav .cat-chip.oferta-chip.active{color:var(--gold-dark);border-bottom-color:var(--gold);}

/* ── 5. Cuerpo: catálogo con columna de filtros ────────────── */
.catalog{max-width:1340px;margin:0 auto;padding:0 22px 60px;background:none;}
.migas{padding:16px 0 12px;font-size:0.83rem;color:var(--muted);}
.migas a{color:inherit;text-decoration:none;}
.migas a:hover{color:var(--rust);}
.cuerpo{display:grid;grid-template-columns:255px 1fr;gap:32px;align-items:start;}

.filtros{position:sticky;top:86px;}
.filtros-head{display:none;align-items:center;justify-content:space-between;margin-bottom:14px;}
.filtros-head h2{font-size:1.1rem;font-weight:800;}
.filtros-x{background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--muted);padding:4px;}
.fbloque{border-bottom:1px solid var(--border);padding:16px 0;}
.fbloque:first-of-type{padding-top:0;}
.fbloque h4{font-size:0.76rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;
            margin-bottom:11px;color:var(--ink);}
.filtros .fsel{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
               font-size:0.88rem;font-family:var(--sans);color:var(--ink);background:var(--cream);cursor:pointer;outline:none;}
.filtros .fsel:focus{border-color:var(--rust);}
.chips-col{display:flex;flex-direction:column;gap:6px;}
.chips-col .chip{width:100%;text-align:left;padding:9px 13px;border:1px solid var(--border);
                 border-radius:var(--radius-sm);background:var(--cream);font-size:0.87rem;font-weight:600;
                 color:var(--muted);cursor:pointer;transition:all 0.15s;font-family:var(--sans);
                 box-shadow:none;transform:none;}
.chips-col .chip:hover{border-color:var(--border-dark);color:var(--ink);transform:none;box-shadow:none;}
.chips-col .chip.active{background:var(--rust);border-color:var(--rust);color:#fff;transform:none;box-shadow:none;}
.chips-col .chip.an.active{background:var(--sky);border-color:var(--sky);}
.chips-col .chip.au.active{background:var(--gold);border-color:var(--gold);color:var(--ink);}
.btn-limpiar{width:100%;margin-top:16px;padding:11px;border:1.5px solid var(--border);
             border-radius:var(--radius-sm);background:var(--cream);font-weight:600;font-size:0.86rem;
             font-family:var(--sans);color:var(--ink);cursor:pointer;transition:all 0.15s;}
.btn-limpiar:hover{border-color:var(--rust);color:var(--rust);}

/* Ruleta como módulo lateral compacto */
.mod-ruleta{margin-top:22px;background:var(--paper2);border:1px solid var(--border);
            border-radius:var(--radius-card);padding:18px;text-align:center;}
.mod-tag{font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;
         color:var(--gold-dark);margin-bottom:5px;}
.mod-ruleta h4{font-size:0.95rem;font-weight:800;margin-bottom:13px;line-height:1.25;}
.mod-ruleta .wheel-wrap{position:relative;width:150px;height:150px;margin:0 auto 12px;}
.mod-ruleta .wheel-svg{width:100%;height:100%;display:block;}
.mod-ruleta .wheel-pin{position:absolute;top:-8px;left:50%;transform:translateX(-50%);
                       font-size:1.2rem;z-index:3;color:var(--ink);}
.mod-ruleta .wheel-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
                          width:26px;height:26px;border-radius:50%;background:var(--cream);
                          border:3px solid var(--borde-sutil);z-index:2;}
.mod-ruleta .btn-spin{width:100%;padding:11px;border:none;border-radius:var(--radius-sm);
                      background:var(--espacio);color:#fff;font-weight:700;font-size:0.86rem;
                      font-family:var(--sans);cursor:pointer;transition:background 0.15s;}
.mod-ruleta .btn-spin:hover{background:var(--rust);}
.mod-ruleta .btn-spin:disabled{opacity:0.5;cursor:not-allowed;}
.mod-ruleta .wheel-result{margin-top:10px;font-weight:800;font-size:0.85rem;color:var(--rust);min-height:20px;}

/* ── Barra de resultados ───────────────────────────────────── */
.resbar .rcount{color:var(--muted);font-size:0.87rem;display:block;margin-top:2px;}
/* enlace liso: heredaba el estilo de píldora naranja y competía con "Filtros" */
.resbar .sec-link{font-size:0.86rem;font-weight:600;color:var(--rust);cursor:pointer;white-space:nowrap;
                  background:none;border:none;padding:0;border-radius:0;box-shadow:none;transform:none;}
.resbar .sec-link:hover{color:var(--rust-dark);text-decoration:underline;background:none;transform:none;box-shadow:none;}
.btn-filtros-mob{display:none;padding:9px 16px;border:1.5px solid var(--borde-sutil);border-radius:var(--radius-sm);
                 background:var(--cream);font-weight:700;font-size:0.85rem;font-family:var(--sans);
                 color:var(--ink);cursor:pointer;white-space:nowrap;}

/* ── Rejilla más densa que el diseño anterior ──────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;}

/* ── Adaptación ────────────────────────────────────────────── */
@media(max-width:1000px){
  .cuerpo{grid-template-columns:1fr;}
  /* el aside pasa a panel deslizante */
  .filtros{position:fixed;top:0;left:0;bottom:0;width:min(310px,88vw);background:var(--cream);z-index:9200;
           padding:20px;overflow-y:auto;transform:translateX(-100%);transition:transform 0.27s cubic-bezier(.4,0,.2,1);
           box-shadow:10px 0 40px rgba(20,22,31,0.2);}
  .filtros.abierto{transform:none;}
  .filtros-head{display:flex;}
  .btn-filtros-mob{display:block;}
  .nav-in{flex-wrap:wrap;gap:12px;}
  .buscador{order:3;flex:1 0 100%;max-width:none;}
}
@media(max-width:620px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;}
  .nav-txt{display:none;}
  .catalog{padding-left:14px;padding-right:14px;}
  .nav-in{padding-left:14px;padding-right:14px;}
}

/* ═══════════════════════════════════════════════════════════
   COMPONENTES SABER DE LIBROS
   La capa de componentes heredada era la firma visual de otra
   marca (borde negro grueso, sombra dura desplazada, polaroids
   inclinadas, bordes discontinuos). Aquí se redefine con el
   lenguaje de la propuesta A: plano, fino, mucho blanco.
   ═══════════════════════════════════════════════════════════ */

/* ── Tarjeta de libro ──────────────────────────────────────── */
.card{
  background:var(--cream);border:1px solid var(--border);border-radius:var(--radius-card);
  box-shadow:none;overflow:hidden;
  transition:border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--border-dark);
  box-shadow:0 10px 28px rgba(20,22,31,0.10);
}
.cover{
  border-radius:0;border-bottom:1px solid var(--border);
  background:var(--paper2);
}
.info{padding:13px 14px 15px;}

/* Etiqueta de estado: cuadrada y discreta, no bandera redondeada */
.ribbon{
  top:9px;left:9px;padding:3px 8px;border-radius:var(--radius-sm);
  font-size:0.64rem;font-weight:800;letter-spacing:0.03em;text-transform:uppercase;
  box-shadow:none;
}

/* ── Botones ───────────────────────────────────────────────── */
/* Antes: minúsculas de 0.68rem en mayúsculas con 0.1em de tracking.
   Ahora: texto normal, legible, sin gritar. */
.ob{
  font-size:0.82rem;letter-spacing:0;text-transform:none;font-weight:700;
  padding:10px 14px;border-radius:var(--radius-sm);border:1px solid transparent;
}
.ob-gold{background:var(--rust);color:#fff;}
.ob-gold:hover{background:var(--rust-dark);}
.ob-ghost{background:var(--cream);color:var(--ink);border-color:var(--border);}
.ob-ghost:hover{border-color:var(--borde-sutil);background:var(--paper2);}

/* ── Pie ───────────────────────────────────────────────────── */
footer{
  background:var(--espacio);border-top:none;padding:56px 22px 26px;
}
/* Solo se apaga la cinta decorativa heredada (::before).
   ::after queda libre: lo usa el conejo del pie. */
footer::before{display:none;}

/* ── "Nosotros": marco limpio, sin polaroid inclinada ──────── */

/* ── Paginación ────────────────────────────────────────────── */
.pag button,.pag a{
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--cream);
  box-shadow:none;font-weight:600;transform:none;
}
.pag button:hover,.pag a:hover{border-color:var(--rust);color:var(--rust);transform:none;}
.pag .active,.pag button.active{background:var(--espacio);border-color:var(--borde-sutil);color:#fff;}

/* ── Carrito y modales: sombra difusa, no dura ─────────────── */
#drawer,.mdl,.bdl-main,.auth-content{
  border-radius:var(--radius-card);box-shadow:0 20px 60px rgba(20,22,31,0.20);
}
#drawer{border-left:1px solid var(--border);}

/* ── Reseñas ───────────────────────────────────────────────── */
.resena-card,.resenas-grid > *{
  border:1px solid var(--border);border-radius:var(--radius-card);
  box-shadow:none;transform:none;background:var(--cream);
}

/* Nada de inclinaciones decorativas en ningún hijo impar/par */
.card:nth-child(odd),.card:nth-child(even),
.resena-card:nth-child(odd),.resena-card:nth-child(even){transform:none;}

/* ── "Nosotros": panel de credenciales ─────────────────────── */
.ab-panel{background:var(--cream);border:1px solid var(--border);border-radius:var(--radius-card);
          padding:26px;box-shadow:0 10px 30px rgba(20,22,31,0.07);}
.ab-panel-head{display:flex;align-items:center;gap:13px;padding-bottom:16px;
               border-bottom:1px solid var(--border);margin-bottom:16px;}
.ab-panel-head strong{display:block;font-size:1rem;font-weight:800;letter-spacing:-0.01em;}
.ab-panel-head span{font-size:0.78rem;color:var(--muted);}
.ab-lista{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:20px;}
.ab-lista li{font-size:0.88rem;color:var(--muted);line-height:1.5;padding-left:20px;position:relative;}
.ab-lista li::before{content:'';position:absolute;left:0;top:7px;width:8px;height:8px;
                     border-radius:2px;background:var(--rust);}
.ab-lista b{color:var(--ink);font-weight:700;}
.ab-panel .a-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;
                   padding-top:18px;border-top:1px solid var(--border);}
.ab-panel .a-num{font-size:1.7rem;font-weight:800;letter-spacing:-0.02em;color:var(--ink);}
.ab-panel .a-lbl{font-size:0.75rem;color:var(--muted);}

/* ═══════════════════════════════════════════════════════════
   CORRECCIONES DE INTEGRACIÓN
   Van al final a propósito: las media queries no suman
   especificidad, así que una regla suelta escrita más abajo
   gana a cualquier @media anterior. Aquí se reponen los
   comportamientos responsive que quedaron pisados.
   ═══════════════════════════════════════════════════════════ */

/* El panel de filtros había vuelto a position:relative (lo necesita
   su canto de madera ::before), y eso lo dejaba asomando 22px por la
   izquierda y ocupando su celda de la rejilla, lo que empujaba el
   catálogo más de 1300px hacia abajo. Debajo de 1000px vuelve a ser
   un panel deslizante fuera de pantalla. */
@media(max-width:1000px){
  .filtros{
    position:fixed;top:0;left:0;bottom:0;
    width:min(310px,88vw);z-index:9200;
    border-radius:0;border-left:none;border-top:none;border-bottom:none;
    transform:translateX(-100%);
    overflow-y:auto;overflow-x:hidden;   /* su overflow:hidden cortaba el scroll */
    box-shadow:10px 0 40px rgba(58,39,22,0.28);
  }
  .filtros.abierto{transform:none;}
  .filtros-head{display:flex;}
}

/* El buscador saltaba de línea ya en 1000px y dejaba la cabecera en
   tres pisos en cualquier portátil. En pantallas medianas cabe de
   sobra en línea: solo baja de verdad en móvil. */
@media(min-width:861px) and (max-width:1000px){
  .nav-in{flex-wrap:nowrap;}
  .buscador{order:0;flex:1 1 auto;max-width:520px;}
}

/* ═══════════════════════════════════════════════════════════
   INTRO — biblioteca cósmica, una sola vez por sesión
   Todo con transform y opacity (lo mueve el compositor).
   El nodo se destruye al terminar, así que no deja coste.
   ═══════════════════════════════════════════════════════════ */
.intro{
  position:fixed;inset:0;z-index:100000;overflow:hidden;
  /* Este color se ve mientras la imagen de estrellas carga, y a pantalla
     completa: la intro tapa la pagina entera durante 5 segundos. Era
     #12200F, un verde oscuro heredado del video antiguo, asi que quien
     entraba con la red lenta veia la tienda "en verde" sin saber por que.
     Ahora es el mismo negro azulado del sitio: si la imagen tarda, lo que
     se ve es el fondo de siempre. */
  background:var(--espacio,#070B18);
  animation:introSalir 0.9s cubic-bezier(.7,0,.3,1) 5.1s forwards;
  will-change:opacity,transform;
}
.intro.cerrando{animation:introSalir 0.55s cubic-bezier(.7,0,.3,1) forwards;}
body.intro-activa{overflow:hidden;}

/* ── Rayos de luz ──────────────────────────────────────────── */
@keyframes rayoEntra{from{opacity:0;}to{opacity:1;}}

/* ── Marca ─────────────────────────────────────────────────── */
.intro-marca{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  text-align:center;color:#FBF3E2;z-index:5;
  text-shadow:0 3px 22px rgba(0,0,0,.75);
  animation:marcaEntra 1.5s cubic-bezier(.2,.9,.3,1) 2.7s both;
  will-change:opacity,transform,filter;
}
/* F6-02: era un <h1> y competia con el del catalogo */
.intro-marca .intro-nombre{
  font-family:var(--serif);font-weight:700;font-size:clamp(2rem,5.5vw,3.6rem);
  letter-spacing:-.02em;margin:.5rem 0 .2rem;line-height:1.05;
}
.intro-marca p{
  font-family:var(--sans);font-size:.8rem;letter-spacing:.42em;
  text-transform:uppercase;opacity:.82;
}
@keyframes marcaEntra{
  from{opacity:0;transform:translate(-50%,-40%) scale(.9);filter:blur(6px);}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0);}
}

/* ── Botón saltar ──────────────────────────────────────────── */
.intro-saltar{
  position:absolute;right:22px;bottom:20px;z-index:10;
  background:rgba(0,0,0,.35);color:#F3E6D2;border:1px solid rgba(243,230,210,.35);
  padding:9px 18px;border-radius:999px;font-family:var(--sans);
  font-size:.82rem;font-weight:600;cursor:pointer;backdrop-filter:blur(4px);
  animation:rayoEntra .5s ease-out .3s both;transition:background .15s,border-color .15s;
}
.intro-saltar:hover{background:rgba(0,0,0,.55);border-color:#F3E6D2;}

/* ── Salida ────────────────────────────────────────────────── */
@keyframes introSalir{
  from{opacity:1;transform:scale(1);}
  to  {opacity:0;transform:scale(1.08);visibility:hidden;}
}

/* ── Menos movimiento: se ve una sola imagen fija y se va ──── */
@media (prefers-reduced-motion: reduce){
  .intro{animation:introSalir .4s ease 1.6s forwards;}
  .intro *{animation:none!important;}
  .intro-marca{opacity:1;}
}
/* Sin ajuste movil: la imagen vertical tambien centra el hueco. */

/* los animales van por delante de la niebla y llevan un filo de luz */

/* ── Legibilidad sobre la tabla de la cabecera ─────────────────
   Al pasar la cabecera a madera, el nombre quedó en marrón sobre
   marrón: 2.66:1. En crema da 4.79:1 y además es coherente con
   la barra de servicio, que ya iba en claro sobre nogal. */
/* Se usa "nav .nav-marca" y no ".nav-marca" a propósito: existe una
   regla previa con ese mismo selector (especificidad 0-1-1) y con la
   clase suelta (0-1-0) no bastaba, por mucho que fuera después. */
nav .nav-marca{color:#F8EDD8;text-shadow:0 1px 3px rgba(0,0,0,0.55);}
nav .nav-marca-sub{color:rgba(248,237,216,0.82);text-shadow:0 1px 2px rgba(0,0,0,0.5);}

/* ── Ciervo rediseñado: patas de dos tramos ────────────────────
   El anterior era un óvalo con palos rectos. Ahora el muslo gira
   en la cadera y la caña gira en la rodilla, así que la pata se
   dobla al correr. Los ejes van en unidades del viewBox. */
/* la caña se recoge al elevar la pata y se estira al apoyar */
/* el barrido del muslo, algo menor que antes: ahora dobla la rodilla */
/* ═══════════════════════════════════════════════════════════
   INTRO CON VÍDEO REAL
   El clip manda; la escena dibujada queda como respaldo y solo
   .intro-video ahora es un <img>, no un <video>.
   ═══════════════════════════════════════════════════════════ */
/* El <picture> es inline y mide 0x0 por defecto; sin esto la imagen
   absoluta de dentro colapsa y no se ve nada. */
.intro-fondo{position:absolute;inset:0;display:block;z-index:0;}
.intro-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  z-index:0;
  animation:videoEntra 0.5s ease-out both;
  will-change:opacity;
}
/* Antes animaba también "scale" — mover/escalar un video de pantalla
   completa mientras recién decodifica sus primeros frames es lo que
   causaba el tranco reportado. Solo opacidad: mismo efecto de entrada,
   sin forzar al navegador a repintar la capa entera cada frame. */
@keyframes videoEntra{from{opacity:0;}to{opacity:1;}}

/* Velo: el centro del clip mide 80/255 de brillo y la marca va en
   crema. Este degradado oscurece el centro sin apagar los rayos
   de luz de los bordes, que son lo mejor del plano. */
.intro-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 48% at 50% 44%, rgba(10,14,8,0.62), transparent 72%),
    linear-gradient(180deg, rgba(10,14,8,0.45), transparent 26%, transparent 62%, rgba(10,14,8,0.60));
}

/* La escena dibujada solo se ve si el vídeo falla */

.intro-marca{z-index:5;}
.intro-saltar{z-index:10;}

@media (prefers-reduced-motion: reduce){
  .intro-video{animation:none;}
}

.filtros::before{
  background:linear-gradient(180deg,#6B4426,#3D2B1F);
  background-size:auto;
  height:7px;
  box-shadow:inset 0 -1px 2px rgba(0,0,0,0.30);
}

/* ── Intro cósmica: 3 s en total (pedido: máx. 3s, más fluida) ──
   La intro se ve 5 s enteros; la salida arranca ahí y dura 0,7 s
   justo en 3 s — el clip de fondo (5,08 s) queda cortado, pero para
   entonces la marca ya se vio y se está yendo. */
.intro{animation:introSalir 0.7s cubic-bezier(.7,0,.3,1) 5s forwards;}
/* La marca va al centro exacto: el fondo nuevo es un portal con el
   hueco vacío justo ahí, hecho para alojarla. Antes iba al 33%
   porque el video tenía un chorro de partículas a media altura.
   Entra rápido (0,8s) para caber en la ventana de 3s. */
.intro-marca{top:50%;animation:marcaEntra 0.8s cubic-bezier(.2,.9,.3,1) 0.4s both;}
/* Velo ajustado al clip nuevo: oscurece la franja del logotipo sin
   apagar el libro iluminado de abajo, que es lo mejor del plano. */
/* Velo suave. El portal ya trae el centro casi negro, así que un
   radial fuerte solo borraría las estrellas del hueco. Queda un
   toque para asegurar el contraste del texto crema. */
.intro-velo{
  background:
    radial-gradient(46% 32% at 50% 50%, rgba(4,8,18,0.42), transparent 78%),
    linear-gradient(180deg, rgba(4,8,18,0.30), transparent 32%, transparent 82%, rgba(4,8,18,0.35));
}


/* ── Indicador de carga ─────────────────────────────────
   La barra se llena en los mismos 5 s que dura la intro: el visitante
   ve cuanto falta en vez de una espera muda. Es CSS puro — no mide la
   descarga real, pero el catalogo ya esta cargando por detras y suele
   terminar antes. */
.intro-cargando{
  position:absolute;left:50%;top:50%;transform:translateX(-50%);
  margin-top:118px;z-index:6;text-align:center;
  animation:rayoEntra .6s ease-out 1.1s both;
}
.intro-barra{
  width:170px;height:2px;border-radius:2px;
  background:rgba(251,243,226,.16);overflow:hidden;
}
.intro-barra i{
  display:block;height:100%;width:100%;border-radius:2px;
  background:linear-gradient(90deg,#8A7FE8,#5FD4C4,#E8B45C);
  transform-origin:left center;
  animation:barraCarga 5s cubic-bezier(.25,.6,.35,1) both;
}
@keyframes barraCarga{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.intro-cargando span{
  display:block;margin-top:10px;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.34em;
  text-transform:uppercase;color:#FBF3E2;opacity:.62;
}
@media(max-width:620px){
  .intro-cargando{margin-top:150px;}
  .intro-barra{width:140px;}
}
/* Sin movimiento: la barra aparece llena, sin animarse. */
@media (prefers-reduced-motion: reduce){
  .intro-barra i{animation:none;transform:scaleX(1);}
}


/* ── Formulario de pago de Izipay (Krypton) ──────────────────────────
   Krypton copia los estilos calculados de sus campos y los reenvia a los
   iframes donde vive el numero de tarjeta. Esa copia ocurre EN EL MOMENTO
   de renderizar, asi que estas reglas tienen que existir de antemano: si
   se inyectan despues no tienen ningun efecto.

   Sin esto los tres campos salian negros — el formulario heredaba el tema
   oscuro de la tienda y quedaba texto oscuro sobre fondo oscuro, ilegible.
   El resto del formulario (selectores, boton) lo pinta Izipay en claro,
   asi que hay que forzar claro tambien aqui para que case. */
#izipay-form-host .kr-embedded .kr-field-element,
#izipay-form-host .kr-embedded .kr-field-component,
#izipay-form-host .kr-embedded .kr-iframe-wrapper { background:#ffffff !important; }
#izipay-form-host .kr-embedded,
#izipay-form-host .kr-embedded * { color:#14161F !important; }
#izipay-form-host .kr-embedded input { background:#ffffff !important; color:#14161F !important; }

/* ═══════════════════════════════════════════════════════════
   CAPA COSMOS
   La arquitectura no cambia: sigue siendo el catálogo con filtros
   laterales. Cambia el material — espacio profundo, luz de estrella
   y oro. Va la última para ganar a lo heredado.
   ═══════════════════════════════════════════════════════════ */

/* ── Fondo: espacio profundo, sin mosaico ───────────────────
   El campo de estrellas anterior eran degradados repetidos en
   mosaico de 480px: al repetirse se veían las costuras como una
   línea y el conjunto leía como cuadrícula. Ahora es UN solo SVG
   de 439 estrellas con banda de vía láctea, puesto a "cover" y
   sin repetir, así que no hay ningún borde que pueda verse. */
:root{
  --campo-estrellas:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'><circle cx='518' cy='151' r='0.6' fill='rgba(255,255,255,0.81)'/><circle cx='585' cy='58' r='0.5' fill='rgba(215,228,255,0.25)'/><circle cx='112' cy='91' r='0.6' fill='rgba(200,255,246,0.91)'/><circle cx='635' cy='976' r='0.7' fill='rgba(255,255,255,0.4)'/><circle cx='865' cy='571' r='0.7' fill='rgba(255,238,205,0.26)'/><circle cx='1022' cy='372' r='0.6' fill='rgba(255,238,205,0.61)'/><circle cx='503' cy='586' r='0.9' fill='rgba(255,255,255,0.37)'/><circle cx='1118' cy='244' r='1.6' fill='rgba(255,255,255,0.56)'/><circle cx='189' cy='418' r='0.7' fill='rgba(215,228,255,0.9)'/><circle cx='1112' cy='594' r='1.3' fill='rgba(255,255,255,0.23)'/><circle cx='1511' cy='474' r='0.5' fill='rgba(255,255,255,0.74)'/><circle cx='455' cy='386' r='0.5' fill='rgba(255,255,255,0.9)'/><circle cx='269' cy='117' r='0.9' fill='rgba(255,255,255,0.28)'/><circle cx='266' cy='402' r='0.7' fill='rgba(255,238,205,0.81)'/><circle cx='445' cy='415' r='1.1' fill='rgba(255,255,255,0.92)'/><circle cx='133' cy='151' r='0.5' fill='rgba(255,238,205,0.55)'/><circle cx='292' cy='282' r='1.6' fill='rgba(255,238,205,0.46)'/><circle cx='510' cy='125' r='0.5' fill='rgba(200,255,246,0.53)'/><circle cx='1277' cy='392' r='0.6' fill='rgba(215,228,255,0.55)'/><circle cx='100' cy='67' r='0.7' fill='rgba(255,238,205,0.26)'/><circle cx='84' cy='0' r='0.6' fill='rgba(255,238,205,0.91)'/><circle cx='238' cy='252' r='1.0' fill='rgba(255,255,255,0.55)'/><circle cx='774' cy='86' r='1.0' fill='rgba(215,228,255,0.75)'/><circle cx='1326' cy='161' r='1.6' fill='rgba(200,255,246,0.46)'/><circle cx='1566' cy='863' r='0.9' fill='rgba(255,255,255,0.58)'/><circle cx='569' cy='223' r='1.6' fill='rgba(255,255,255,0.43)'/><circle cx='312' cy='239' r='0.8' fill='rgba(215,228,255,0.33)'/><circle cx='569' cy='29' r='0.9' fill='rgba(255,255,255,0.54)'/><circle cx='583' cy='220' r='0.8' fill='rgba(215,228,255,0.44)'/><circle cx='1252' cy='750' r='0.7' fill='rgba(200,255,246,0.51)'/><circle cx='633' cy='401' r='0.7' fill='rgba(255,255,255,0.31)'/><circle cx='1049' cy='612' r='1.3' fill='rgba(255,255,255,0.69)'/><circle cx='249' cy='548' r='0.6' fill='rgba(255,255,255,0.59)'/><circle cx='338' cy='252' r='0.8' fill='rgba(255,255,255,0.77)'/><circle cx='415' cy='419' r='1.0' fill='rgba(200,255,246,0.87)'/><circle cx='1468' cy='502' r='1.6' fill='rgba(215,228,255,0.57)'/><circle cx='1242' cy='609' r='0.7' fill='rgba(215,228,255,0.31)'/><circle cx='991' cy='120' r='1.6' fill='rgba(215,228,255,0.59)'/><circle cx='398' cy='277' r='1.6' fill='rgba(255,255,255,0.53)'/><circle cx='980' cy='506' r='0.9' fill='rgba(255,238,205,0.53)'/><circle cx='1292' cy='508' r='1.6' fill='rgba(255,255,255,0.85)'/><circle cx='1476' cy='893' r='1.3' fill='rgba(255,255,255,0.29)'/><circle cx='628' cy='316' r='1.1' fill='rgba(200,255,246,0.24)'/><circle cx='484' cy='122' r='1.0' fill='rgba(255,255,255,0.29)'/><circle cx='637' cy='487' r='0.8' fill='rgba(215,228,255,0.3)'/><circle cx='1591' cy='404' r='1.0' fill='rgba(200,255,246,0.43)'/><circle cx='586' cy='338' r='0.5' fill='rgba(255,238,205,0.48)'/><circle cx='998' cy='512' r='0.8' fill='rgba(255,255,255,0.93)'/><circle cx='134' cy='272' r='0.7' fill='rgba(255,255,255,0.39)'/><circle cx='1514' cy='406' r='1.6' fill='rgba(200,255,246,0.62)'/><circle cx='523' cy='279' r='0.7' fill='rgba(255,255,255,0.51)'/><circle cx='430' cy='17' r='0.9' fill='rgba(255,255,255,0.24)'/><circle cx='429' cy='129' r='0.8' fill='rgba(255,255,255,0.9)'/><circle cx='419' cy='181' r='0.9' fill='rgba(255,255,255,0.59)'/><circle cx='464' cy='500' r='1.0' fill='rgba(255,255,255,0.8)'/><circle cx='59' cy='18' r='0.8' fill='rgba(255,255,255,0.58)'/><circle cx='691' cy='495' r='1.1' fill='rgba(255,255,255,0.93)'/><circle cx='1332' cy='707' r='1.1' fill='rgba(255,255,255,0.94)'/><circle cx='1408' cy='431' r='1.1' fill='rgba(200,255,246,0.85)'/><circle cx='1553' cy='599' r='0.5' fill='rgba(255,255,255,0.53)'/><circle cx='430' cy='4' r='1.0' fill='rgba(255,238,205,0.93)'/><circle cx='349' cy='183' r='0.6' fill='rgba(255,238,205,0.55)'/><circle cx='939' cy='394' r='0.8' fill='rgba(255,238,205,0.25)'/><circle cx='1254' cy='597' r='1.3' fill='rgba(200,255,246,0.3)'/><circle cx='1144' cy='513' r='1.6' fill='rgba(255,238,205,0.29)'/><circle cx='1205' cy='568' r='0.5' fill='rgba(255,238,205,0.82)'/><circle cx='1277' cy='711' r='0.8' fill='rgba(255,255,255,0.25)'/><circle cx='213' cy='361' r='1.3' fill='rgba(200,255,246,0.61)'/><circle cx='30' cy='531' r='0.9' fill='rgba(255,255,255,0.18)'/><circle cx='1197' cy='503' r='1.6' fill='rgba(200,255,246,0.23)'/><circle cx='1040' cy='460' r='0.6' fill='rgba(200,255,246,0.55)'/><circle cx='460' cy='47' r='0.8' fill='rgba(255,255,255,0.24)'/><circle cx='777' cy='973' r='0.8' fill='rgba(255,255,255,0.7)'/><circle cx='1134' cy='286' r='0.6' fill='rgba(255,238,205,0.94)'/><circle cx='1549' cy='449' r='0.8' fill='rgba(255,255,255,0.89)'/><circle cx='119' cy='90' r='0.9' fill='rgba(255,255,255,0.91)'/><circle cx='965' cy='632' r='0.6' fill='rgba(255,255,255,0.72)'/><circle cx='649' cy='727' r='1.1' fill='rgba(255,255,255,0.42)'/><circle cx='1443' cy='290' r='1.1' fill='rgba(255,238,205,0.48)'/><circle cx='1367' cy='281' r='0.9' fill='rgba(255,255,255,0.67)'/><circle cx='399' cy='266' r='0.8' fill='rgba(215,228,255,0.78)'/><circle cx='1415' cy='812' r='1.6' fill='rgba(200,255,246,0.6)'/><circle cx='273' cy='415' r='0.9' fill='rgba(200,255,246,0.75)'/><circle cx='416' cy='656' r='1.6' fill='rgba(255,255,255,0.7)'/><circle cx='268' cy='162' r='1.3' fill='rgba(215,228,255,0.6)'/><circle cx='223' cy='192' r='1.0' fill='rgba(255,255,255,0.61)'/><circle cx='383' cy='258' r='0.5' fill='rgba(215,228,255,0.76)'/><circle cx='613' cy='746' r='0.9' fill='rgba(255,255,255,0.44)'/><circle cx='797' cy='574' r='1.6' fill='rgba(255,255,255,0.59)'/><circle cx='1033' cy='432' r='0.5' fill='rgba(215,228,255,0.28)'/><circle cx='1556' cy='248' r='0.7' fill='rgba(200,255,246,0.3)'/><circle cx='1354' cy='895' r='0.5' fill='rgba(255,255,255,0.18)'/><circle cx='486' cy='128' r='1.1' fill='rgba(255,255,255,0.72)'/><circle cx='159' cy='300' r='0.8' fill='rgba(255,255,255,0.48)'/><circle cx='1594' cy='279' r='0.8' fill='rgba(255,255,255,0.55)'/><circle cx='1039' cy='55' r='1.1' fill='rgba(255,255,255,0.24)'/><circle cx='1068' cy='925' r='0.5' fill='rgba(200,255,246,0.72)'/><circle cx='673' cy='683' r='0.9' fill='rgba(255,238,205,0.75)'/><circle cx='108' cy='496' r='0.8' fill='rgba(255,255,255,0.36)'/><circle cx='998' cy='610' r='1.3' fill='rgba(200,255,246,0.5)'/><circle cx='87' cy='24' r='1.1' fill='rgba(255,255,255,0.22)'/><circle cx='295' cy='450' r='1.0' fill='rgba(255,255,255,0.74)'/><circle cx='1491' cy='329' r='1.6' fill='rgba(255,255,255,0.75)'/><circle cx='1576' cy='442' r='0.6' fill='rgba(255,255,255,0.4)'/><circle cx='1214' cy='380' r='0.9' fill='rgba(215,228,255,0.81)'/><circle cx='866' cy='446' r='1.3' fill='rgba(215,228,255,0.2)'/><circle cx='397' cy='625' r='1.1' fill='rgba(255,255,255,0.21)'/><circle cx='536' cy='954' r='1.0' fill='rgba(255,255,255,0.89)'/><circle cx='1014' cy='943' r='0.8' fill='rgba(200,255,246,0.26)'/><circle cx='1531' cy='954' r='0.9' fill='rgba(215,228,255,0.88)'/><circle cx='212' cy='497' r='0.9' fill='rgba(255,255,255,0.81)'/><circle cx='972' cy='328' r='1.0' fill='rgba(255,238,205,0.78)'/><circle cx='126' cy='197' r='0.8' fill='rgba(200,255,246,0.49)'/><circle cx='54' cy='553' r='1.1' fill='rgba(255,255,255,0.86)'/><circle cx='424' cy='84' r='1.3' fill='rgba(215,228,255,0.94)'/><circle cx='277' cy='133' r='0.8' fill='rgba(200,255,246,0.76)'/><circle cx='1215' cy='780' r='0.9' fill='rgba(255,255,255,0.62)'/><circle cx='406' cy='260' r='0.7' fill='rgba(255,255,255,0.37)'/><circle cx='104' cy='252' r='1.6' fill='rgba(255,255,255,0.36)'/><circle cx='1045' cy='991' r='1.3' fill='rgba(255,255,255,0.86)'/><circle cx='1345' cy='914' r='0.9' fill='rgba(255,255,255,0.36)'/><circle cx='719' cy='260' r='0.5' fill='rgba(255,238,205,0.26)'/><circle cx='1136' cy='350' r='1.0' fill='rgba(255,255,255,0.29)'/><circle cx='1462' cy='815' r='1.1' fill='rgba(255,255,255,0.7)'/><circle cx='994' cy='78' r='1.3' fill='rgba(255,255,255,0.6)'/><circle cx='247' cy='534' r='1.1' fill='rgba(215,228,255,0.72)'/><circle cx='1581' cy='668' r='0.5' fill='rgba(255,238,205,0.42)'/><circle cx='1414' cy='414' r='1.0' fill='rgba(215,228,255,0.68)'/><circle cx='1165' cy='204' r='0.7' fill='rgba(255,255,255,0.51)'/><circle cx='260' cy='15' r='1.1' fill='rgba(255,238,205,0.25)'/><circle cx='1484' cy='737' r='1.0' fill='rgba(255,238,205,0.4)'/><circle cx='275' cy='67' r='0.8' fill='rgba(255,255,255,0.41)'/><circle cx='1561' cy='483' r='1.1' fill='rgba(200,255,246,0.25)'/><circle cx='993' cy='825' r='0.8' fill='rgba(255,238,205,0.66)'/><circle cx='1354' cy='829' r='0.8' fill='rgba(255,238,205,0.21)'/><circle cx='250' cy='359' r='0.8' fill='rgba(255,238,205,0.21)'/><circle cx='1348' cy='672' r='1.0' fill='rgba(255,238,205,0.27)'/><circle cx='1038' cy='308' r='1.1' fill='rgba(215,228,255,0.69)'/><circle cx='806' cy='179' r='1.3' fill='rgba(215,228,255,0.54)'/><circle cx='1222' cy='780' r='0.7' fill='rgba(215,228,255,0.8)'/><circle cx='171' cy='128' r='0.6' fill='rgba(255,238,205,0.8)'/><circle cx='105' cy='351' r='0.7' fill='rgba(255,238,205,0.43)'/><circle cx='421' cy='506' r='0.5' fill='rgba(215,228,255,0.33)'/><circle cx='928' cy='883' r='1.6' fill='rgba(215,228,255,0.66)'/><circle cx='1181' cy='371' r='1.0' fill='rgba(255,255,255,0.62)'/><circle cx='529' cy='81' r='0.5' fill='rgba(255,238,205,0.41)'/><circle cx='937' cy='664' r='0.5' fill='rgba(255,255,255,0.76)'/><circle cx='820' cy='896' r='0.8' fill='rgba(255,255,255,0.65)'/><circle cx='36' cy='3' r='0.6' fill='rgba(255,238,205,0.58)'/><circle cx='359' cy='584' r='0.8' fill='rgba(215,228,255,0.46)'/><circle cx='1132' cy='451' r='0.7' fill='rgba(255,255,255,0.85)'/><circle cx='643' cy='264' r='1.6' fill='rgba(255,238,205,0.87)'/><circle cx='1033' cy='444' r='1.3' fill='rgba(255,255,255,0.37)'/><circle cx='70' cy='532' r='0.8' fill='rgba(255,255,255,0.3)'/><circle cx='228' cy='200' r='1.6' fill='rgba(215,228,255,0.68)'/><circle cx='1301' cy='175' r='0.9' fill='rgba(200,255,246,0.66)'/><circle cx='1253' cy='715' r='1.1' fill='rgba(215,228,255,0.75)'/><circle cx='129' cy='656' r='0.6' fill='rgba(200,255,246,0.38)'/><circle cx='62' cy='336' r='0.9' fill='rgba(255,255,255,0.73)'/><circle cx='1017' cy='679' r='1.6' fill='rgba(255,255,255,0.93)'/><circle cx='1194' cy='327' r='1.0' fill='rgba(215,228,255,0.64)'/><circle cx='1452' cy='631' r='1.6' fill='rgba(255,238,205,0.54)'/><circle cx='1159' cy='570' r='0.8' fill='rgba(255,238,205,0.48)'/><circle cx='43' cy='107' r='1.0' fill='rgba(200,255,246,0.93)'/><circle cx='46' cy='42' r='0.5' fill='rgba(200,255,246,0.72)'/><circle cx='1138' cy='384' r='0.8' fill='rgba(255,255,255,0.27)'/><circle cx='1034' cy='294' r='0.9' fill='rgba(255,255,255,0.2)'/><circle cx='1457' cy='769' r='1.3' fill='rgba(255,238,205,0.84)'/><circle cx='1193' cy='789' r='1.6' fill='rgba(255,255,255,0.78)'/><circle cx='459' cy='436' r='0.9' fill='rgba(255,255,255,0.77)'/><circle cx='7' cy='491' r='0.7' fill='rgba(255,238,205,0.92)'/><circle cx='1510' cy='284' r='0.8' fill='rgba(255,255,255,0.56)'/><circle cx='1502' cy='767' r='1.6' fill='rgba(200,255,246,0.79)'/><circle cx='1427' cy='745' r='0.5' fill='rgba(255,255,255,0.47)'/><circle cx='737' cy='532' r='0.5' fill='rgba(255,255,255,0.45)'/><circle cx='886' cy='323' r='0.9' fill='rgba(255,255,255,0.63)'/><circle cx='812' cy='267' r='0.7' fill='rgba(255,255,255,0.74)'/><circle cx='1157' cy='603' r='0.8' fill='rgba(255,255,255,0.43)'/><circle cx='263' cy='658' r='0.7' fill='rgba(255,255,255,0.94)'/><circle cx='1173' cy='435' r='0.6' fill='rgba(215,228,255,0.4)'/><circle cx='698' cy='222' r='0.9' fill='rgba(255,255,255,0.54)'/><circle cx='412' cy='738' r='0.8' fill='rgba(215,228,255,0.88)'/><circle cx='1122' cy='587' r='0.8' fill='rgba(200,255,246,0.69)'/><circle cx='1408' cy='774' r='0.8' fill='rgba(200,255,246,0.7)'/><circle cx='199' cy='433' r='0.6' fill='rgba(255,255,255,0.87)'/><circle cx='1252' cy='713' r='0.9' fill='rgba(215,228,255,0.83)'/><circle cx='728' cy='622' r='0.7' fill='rgba(255,255,255,0.87)'/><circle cx='1245' cy='389' r='0.6' fill='rgba(255,238,205,0.21)'/><circle cx='320' cy='348' r='1.3' fill='rgba(200,255,246,0.6)'/><circle cx='592' cy='343' r='1.3' fill='rgba(200,255,246,0.34)'/><circle cx='1167' cy='614' r='0.9' fill='rgba(215,228,255,0.39)'/><circle cx='98' cy='75' r='1.0' fill='rgba(255,255,255,0.63)'/><circle cx='843' cy='219' r='1.1' fill='rgba(255,255,255,0.54)'/><circle cx='1015' cy='469' r='0.8' fill='rgba(255,255,255,0.81)'/><circle cx='1306' cy='468' r='1.6' fill='rgba(215,228,255,0.68)'/><circle cx='602' cy='254' r='0.7' fill='rgba(200,255,246,0.55)'/><circle cx='1278' cy='358' r='1.0' fill='rgba(215,228,255,0.55)'/><circle cx='244' cy='303' r='0.6' fill='rgba(255,255,255,0.82)'/><circle cx='1013' cy='15' r='0.6' fill='rgba(255,255,255,0.69)'/><circle cx='973' cy='578' r='0.7' fill='rgba(255,255,255,0.78)'/><circle cx='1256' cy='209' r='1.6' fill='rgba(200,255,246,0.31)'/><circle cx='1430' cy='788' r='0.8' fill='rgba(255,255,255,0.56)'/><circle cx='849' cy='742' r='0.6' fill='rgba(255,255,255,0.61)'/><circle cx='892' cy='484' r='1.3' fill='rgba(255,255,255,0.37)'/><circle cx='863' cy='863' r='1.0' fill='rgba(255,238,205,0.54)'/><circle cx='796' cy='297' r='1.1' fill='rgba(200,255,246,0.5)'/><circle cx='817' cy='485' r='0.5' fill='rgba(215,228,255,0.34)'/><circle cx='1000' cy='339' r='1.0' fill='rgba(255,238,205,0.44)'/><circle cx='547' cy='252' r='0.9' fill='rgba(215,228,255,0.41)'/><circle cx='646' cy='504' r='1.6' fill='rgba(255,255,255,0.45)'/><circle cx='1047' cy='792' r='1.0' fill='rgba(255,255,255,0.73)'/><circle cx='938' cy='635' r='0.5' fill='rgba(255,238,205,0.49)'/><circle cx='1417' cy='545' r='0.9' fill='rgba(255,255,255,0.26)'/><circle cx='979' cy='617' r='0.6' fill='rgba(200,255,246,0.34)'/><circle cx='1014' cy='625' r='0.7' fill='rgba(215,228,255,0.85)'/><circle cx='899' cy='258' r='1.1' fill='rgba(255,255,255,0.21)'/><circle cx='87' cy='568' r='0.6' fill='rgba(215,228,255,0.78)'/><circle cx='23' cy='387' r='0.7' fill='rgba(215,228,255,0.55)'/><circle cx='1433' cy='627' r='0.5' fill='rgba(255,255,255,0.71)'/><circle cx='1579' cy='858' r='0.6' fill='rgba(255,255,255,0.28)'/><circle cx='441' cy='569' r='0.7' fill='rgba(255,255,255,0.89)'/><circle cx='1238' cy='714' r='0.6' fill='rgba(255,238,205,0.41)'/><circle cx='1135' cy='461' r='0.9' fill='rgba(255,255,255,0.88)'/><circle cx='1148' cy='11' r='0.6' fill='rgba(255,255,255,0.48)'/><circle cx='778' cy='60' r='1.3' fill='rgba(255,255,255,0.54)'/><circle cx='1032' cy='630' r='1.1' fill='rgba(215,228,255,0.78)'/><circle cx='1512' cy='785' r='0.9' fill='rgba(255,238,205,0.4)'/><circle cx='1558' cy='703' r='1.0' fill='rgba(200,255,246,0.85)'/><circle cx='1564' cy='831' r='0.9' fill='rgba(255,255,255,0.63)'/><circle cx='1434' cy='807' r='0.5' fill='rgba(255,255,255,0.43)'/><circle cx='676' cy='587' r='0.5' fill='rgba(255,255,255,0.4)'/><circle cx='745' cy='207' r='0.5' fill='rgba(215,228,255,0.79)'/><circle cx='865' cy='536' r='0.6' fill='rgba(255,238,205,0.36)'/><circle cx='834' cy='260' r='1.0' fill='rgba(255,238,205,0.55)'/><circle cx='323' cy='213' r='0.9' fill='rgba(255,238,205,0.46)'/><circle cx='1386' cy='372' r='0.6' fill='rgba(255,238,205,0.3)'/><circle cx='49' cy='281' r='0.6' fill='rgba(255,238,205,0.21)'/><circle cx='778' cy='567' r='0.9' fill='rgba(215,228,255,0.51)'/><circle cx='406' cy='38' r='0.7' fill='rgba(255,255,255,0.47)'/><circle cx='1072' cy='393' r='0.7' fill='rgba(255,255,255,0.47)'/><circle cx='1587' cy='222' r='0.9' fill='rgba(255,255,255,0.9)'/><circle cx='1035' cy='985' r='0.7' fill='rgba(255,255,255,0.42)'/><circle cx='1503' cy='677' r='1.3' fill='rgba(255,255,255,0.76)'/><circle cx='753' cy='372' r='1.0' fill='rgba(255,255,255,0.55)'/><circle cx='1427' cy='468' r='0.5' fill='rgba(255,255,255,0.3)'/><circle cx='1482' cy='385' r='0.6' fill='rgba(255,255,255,0.53)'/><circle cx='516' cy='234' r='1.0' fill='rgba(255,255,255,0.29)'/><circle cx='1178' cy='180' r='0.7' fill='rgba(255,255,255,0.52)'/><circle cx='426' cy='412' r='0.9' fill='rgba(255,255,255,0.62)'/><circle cx='535' cy='168' r='1.0' fill='rgba(215,228,255,0.53)'/><circle cx='183' cy='979' r='0.8' fill='rgba(255,255,255,0.61)'/><circle cx='691' cy='262' r='0.8' fill='rgba(255,255,255,0.26)'/><circle cx='665' cy='162' r='0.9' fill='rgba(200,255,246,0.29)'/><circle cx='843' cy='186' r='1.1' fill='rgba(255,238,205,0.35)'/><circle cx='369' cy='176' r='0.6' fill='rgba(200,255,246,0.86)'/><circle cx='793' cy='274' r='0.8' fill='rgba(255,255,255,0.63)'/><circle cx='556' cy='282' r='1.3' fill='rgba(215,228,255,0.25)'/><circle cx='1456' cy='477' r='0.9' fill='rgba(255,238,205,0.37)'/><circle cx='1331' cy='367' r='1.0' fill='rgba(255,255,255,0.62)'/><circle cx='114' cy='357' r='1.0' fill='rgba(215,228,255,0.78)'/><circle cx='390' cy='89' r='0.7' fill='rgba(255,255,255,0.26)'/><circle cx='889' cy='955' r='0.8' fill='rgba(255,238,205,0.38)'/><circle cx='1019' cy='464' r='1.3' fill='rgba(255,255,255,0.26)'/><circle cx='1147' cy='45' r='1.3' fill='rgba(255,255,255,0.63)'/><circle cx='176' cy='122' r='1.6' fill='rgba(255,255,255,0.64)'/><circle cx='622' cy='420' r='1.6' fill='rgba(255,255,255,0.21)'/><circle cx='1243' cy='339' r='1.0' fill='rgba(255,238,205,0.73)'/><circle cx='1533' cy='934' r='1.1' fill='rgba(255,255,255,0.69)'/><circle cx='583' cy='531' r='1.1' fill='rgba(200,255,246,0.33)'/><circle cx='33' cy='139' r='1.3' fill='rgba(255,255,255,0.67)'/><circle cx='1086' cy='273' r='0.5' fill='rgba(255,255,255,0.66)'/><circle cx='195' cy='14' r='0.5' fill='rgba(255,255,255,0.4)'/><circle cx='556' cy='167' r='1.6' fill='rgba(255,255,255,0.87)'/><circle cx='746' cy='534' r='0.6' fill='rgba(255,255,255,0.57)'/><circle cx='1465' cy='577' r='0.6' fill='rgba(255,255,255,0.75)'/><circle cx='1344' cy='610' r='1.1' fill='rgba(200,255,246,0.33)'/><circle cx='765' cy='819' r='1.0' fill='rgba(255,238,205,0.35)'/><circle cx='518' cy='325' r='0.8' fill='rgba(255,255,255,0.41)'/><circle cx='254' cy='67' r='1.3' fill='rgba(255,238,205,0.69)'/><circle cx='621' cy='440' r='0.6' fill='rgba(200,255,246,0.58)'/><circle cx='1182' cy='155' r='1.0' fill='rgba(255,255,255,0.29)'/><circle cx='1216' cy='475' r='0.7' fill='rgba(255,255,255,0.5)'/><circle cx='972' cy='380' r='1.3' fill='rgba(255,255,255,0.4)'/><circle cx='469' cy='391' r='1.1' fill='rgba(255,255,255,0.68)'/><circle cx='1259' cy='850' r='1.3' fill='rgba(255,238,205,0.41)'/><circle cx='486' cy='145' r='0.8' fill='rgba(255,255,255,0.25)'/><circle cx='1457' cy='11' r='1.3' fill='rgba(255,238,205,0.41)'/><circle cx='1238' cy='538' r='1.6' fill='rgba(200,255,246,0.82)'/><circle cx='1096' cy='390' r='1.0' fill='rgba(255,255,255,0.53)'/><circle cx='1082' cy='525' r='1.0' fill='rgba(200,255,246,0.57)'/><circle cx='898' cy='574' r='1.1' fill='rgba(215,228,255,0.55)'/><circle cx='1107' cy='746' r='1.0' fill='rgba(255,255,255,0.42)'/><circle cx='1322' cy='513' r='0.9' fill='rgba(255,238,205,0.71)'/><circle cx='1421' cy='421' r='0.9' fill='rgba(255,255,255,0.81)'/><circle cx='808' cy='188' r='0.6' fill='rgba(200,255,246,0.45)'/><circle cx='1260' cy='307' r='0.5' fill='rgba(215,228,255,0.89)'/><circle cx='1347' cy='586' r='0.8' fill='rgba(255,238,205,0.31)'/><circle cx='823' cy='144' r='0.6' fill='rgba(255,238,205,0.29)'/><circle cx='1215' cy='107' r='0.7' fill='rgba(215,228,255,0.91)'/><circle cx='1317' cy='613' r='0.5' fill='rgba(200,255,246,0.68)'/><circle cx='1233' cy='323' r='1.0' fill='rgba(255,255,255,0.39)'/><circle cx='932' cy='349' r='1.1' fill='rgba(255,255,255,0.2)'/><circle cx='1425' cy='583' r='1.3' fill='rgba(255,255,255,0.22)'/><circle cx='1305' cy='304' r='1.3' fill='rgba(255,255,255,0.93)'/><circle cx='389' cy='390' r='0.8' fill='rgba(215,228,255,0.5)'/><circle cx='1400' cy='484' r='0.8' fill='rgba(255,255,255,0.25)'/><circle cx='573' cy='187' r='0.9' fill='rgba(255,255,255,0.48)'/><circle cx='184' cy='534' r='1.1' fill='rgba(255,255,255,0.68)'/><circle cx='620' cy='467' r='1.1' fill='rgba(200,255,246,0.21)'/><circle cx='208' cy='196' r='0.7' fill='rgba(215,228,255,0.61)'/><circle cx='1338' cy='805' r='1.0' fill='rgba(215,228,255,0.35)'/><circle cx='1522' cy='505' r='1.3' fill='rgba(200,255,246,0.7)'/><circle cx='1597' cy='596' r='1.0' fill='rgba(215,228,255,0.59)'/><circle cx='196' cy='513' r='0.9' fill='rgba(215,228,255,0.75)'/><circle cx='1242' cy='232' r='0.6' fill='rgba(255,255,255,0.23)'/><circle cx='1288' cy='758' r='0.9' fill='rgba(255,255,255,0.25)'/><circle cx='1412' cy='861' r='0.9' fill='rgba(255,255,255,0.32)'/><circle cx='1087' cy='664' r='1.1' fill='rgba(200,255,246,0.2)'/><circle cx='563' cy='629' r='0.6' fill='rgba(255,238,205,0.39)'/><circle cx='1174' cy='713' r='0.5' fill='rgba(215,228,255,0.65)'/><circle cx='317' cy='303' r='0.5' fill='rgba(200,255,246,0.61)'/><circle cx='912' cy='717' r='1.1' fill='rgba(255,238,205,0.7)'/><circle cx='1242' cy='286' r='0.5' fill='rgba(200,255,246,0.93)'/><circle cx='1463' cy='750' r='1.1' fill='rgba(255,238,205,0.95)'/><circle cx='1326' cy='281' r='1.1' fill='rgba(255,255,255,0.52)'/><circle cx='1005' cy='453' r='0.8' fill='rgba(255,238,205,0.51)'/><circle cx='1355' cy='778' r='0.8' fill='rgba(200,255,246,0.21)'/><circle cx='1320' cy='559' r='0.7' fill='rgba(200,255,246,0.93)'/><circle cx='378' cy='260' r='0.7' fill='rgba(215,228,255,0.46)'/><circle cx='148' cy='637' r='1.3' fill='rgba(255,255,255,0.7)'/><circle cx='385' cy='629' r='1.1' fill='rgba(255,255,255,0.77)'/><circle cx='1343' cy='406' r='0.9' fill='rgba(215,228,255,0.19)'/><circle cx='330' cy='60' r='0.8' fill='rgba(255,255,255,0.27)'/><circle cx='717' cy='113' r='1.3' fill='rgba(255,255,255,0.62)'/><circle cx='269' cy='72' r='1.3' fill='rgba(200,255,246,0.24)'/><circle cx='531' cy='739' r='1.3' fill='rgba(215,228,255,0.92)'/><circle cx='304' cy='543' r='0.6' fill='rgba(200,255,246,0.68)'/><circle cx='40' cy='395' r='1.0' fill='rgba(200,255,246,0.32)'/><circle cx='987' cy='379' r='1.0' fill='rgba(255,255,255,0.43)'/><circle cx='406' cy='58' r='1.1' fill='rgba(255,255,255,0.88)'/><circle cx='791' cy='500' r='0.9' fill='rgba(200,255,246,0.64)'/><circle cx='128' cy='688' r='1.3' fill='rgba(215,228,255,0.67)'/><circle cx='143' cy='40' r='0.8' fill='rgba(255,255,255,0.35)'/><circle cx='1259' cy='425' r='0.5' fill='rgba(215,228,255,0.58)'/><circle cx='1425' cy='63' r='0.7' fill='rgba(255,255,255,0.88)'/><circle cx='1080' cy='568' r='1.6' fill='rgba(215,228,255,0.43)'/><circle cx='685' cy='535' r='0.7' fill='rgba(255,238,205,0.93)'/><circle cx='992' cy='811' r='1.0' fill='rgba(255,255,255,0.65)'/><circle cx='904' cy='421' r='0.7' fill='rgba(255,255,255,0.41)'/><circle cx='849' cy='634' r='0.8' fill='rgba(215,228,255,0.7)'/><circle cx='384' cy='441' r='0.8' fill='rgba(255,255,255,0.32)'/><circle cx='406' cy='95' r='0.9' fill='rgba(255,255,255,0.73)'/><circle cx='886' cy='227' r='0.6' fill='rgba(255,238,205,0.75)'/><circle cx='736' cy='686' r='0.8' fill='rgba(255,255,255,0.61)'/><circle cx='219' cy='776' r='0.8' fill='rgba(255,255,255,0.22)'/><circle cx='24' cy='594' r='0.9' fill='rgba(255,255,255,0.27)'/><circle cx='1395' cy='563' r='1.0' fill='rgba(200,255,246,0.31)'/><circle cx='1346' cy='804' r='0.5' fill='rgba(255,255,255,0.82)'/><circle cx='383' cy='513' r='1.0' fill='rgba(255,255,255,0.74)'/><circle cx='1306' cy='353' r='1.0' fill='rgba(255,255,255,0.8)'/><circle cx='567' cy='694' r='1.3' fill='rgba(255,255,255,0.27)'/><circle cx='781' cy='74' r='0.7' fill='rgba(255,255,255,0.61)'/><circle cx='1398' cy='670' r='0.9' fill='rgba(200,255,246,0.59)'/><circle cx='1218' cy='269' r='0.5' fill='rgba(255,255,255,0.44)'/><circle cx='779' cy='484' r='0.5' fill='rgba(255,238,205,0.24)'/><circle cx='1309' cy='680' r='1.3' fill='rgba(200,255,246,0.92)'/><circle cx='1352' cy='393' r='1.6' fill='rgba(255,255,255,0.24)'/><circle cx='845' cy='311' r='0.5' fill='rgba(255,255,255,0.34)'/><circle cx='1164' cy='331' r='1.0' fill='rgba(255,255,255,0.42)'/><circle cx='927' cy='334' r='1.3' fill='rgba(255,238,205,0.85)'/><circle cx='73' cy='146' r='0.9' fill='rgba(255,255,255,0.48)'/><circle cx='800' cy='262' r='1.6' fill='rgba(255,255,255,0.63)'/><circle cx='1013' cy='635' r='0.9' fill='rgba(255,255,255,0.79)'/><circle cx='814' cy='635' r='1.6' fill='rgba(255,255,255,0.73)'/><circle cx='97' cy='337' r='1.3' fill='rgba(255,255,255,0.57)'/><circle cx='1295' cy='997' r='0.8' fill='rgba(200,255,246,0.19)'/><circle cx='725' cy='446' r='0.9' fill='rgba(255,238,205,0.9)'/><circle cx='106' cy='301' r='1.6' fill='rgba(255,255,255,0.69)'/><circle cx='118' cy='190' r='0.7' fill='rgba(255,255,255,0.41)'/><circle cx='685' cy='868' r='1.3' fill='rgba(255,255,255,0.43)'/><circle cx='441' cy='258' r='0.7' fill='rgba(255,255,255,0.66)'/><circle cx='1127' cy='218' r='0.8' fill='rgba(255,255,255,0.87)'/><circle cx='1383' cy='648' r='0.5' fill='rgba(255,238,205,0.92)'/><circle cx='78' cy='73' r='1.0' fill='rgba(255,255,255,0.73)'/><circle cx='1024' cy='923' r='1.0' fill='rgba(255,255,255,0.85)'/><circle cx='1038' cy='405' r='1.0' fill='rgba(215,228,255,0.31)'/><circle cx='1504' cy='873' r='1.0' fill='rgba(255,255,255,0.61)'/><circle cx='527' cy='93' r='0.7' fill='rgba(255,255,255,0.59)'/><circle cx='573' cy='362' r='1.6' fill='rgba(255,238,205,0.3)'/><circle cx='920' cy='230' r='1.3' fill='rgba(200,255,246,0.77)'/><circle cx='725' cy='278' r='0.9' fill='rgba(255,255,255,0.28)'/><circle cx='846' cy='351' r='1.3' fill='rgba(215,228,255,0.94)'/><circle cx='622' cy='212' r='0.5' fill='rgba(200,255,246,0.26)'/><circle cx='1079' cy='351' r='1.1' fill='rgba(215,228,255,0.5)'/><circle cx='1512' cy='627' r='0.9' fill='rgba(200,255,246,0.2)'/><circle cx='694' cy='231' r='1.1' fill='rgba(255,255,255,0.67)'/><circle cx='1407' cy='499' r='0.7' fill='rgba(255,255,255,0.55)'/><circle cx='400' cy='320' r='1.3' fill='rgba(255,255,255,0.34)'/><circle cx='476' cy='24' r='0.5' fill='rgba(255,255,255,0.28)'/><circle cx='241' cy='736' r='0.7' fill='rgba(215,228,255,0.54)'/><circle cx='144' cy='340' r='1.1' fill='rgba(255,255,255,0.86)'/><circle cx='936' cy='201' r='0.5' fill='rgba(255,238,205,0.21)'/><circle cx='952' cy='575' r='0.5' fill='rgba(255,255,255,0.22)'/><circle cx='103' cy='110' r='0.7' fill='rgba(255,255,255,0.58)'/><circle cx='286' cy='685' r='1.6' fill='rgba(255,255,255,0.57)'/><circle cx='1555' cy='224' r='0.7' fill='rgba(255,255,255,0.19)'/><circle cx='110' cy='43' r='1.1' fill='rgba(255,255,255,0.79)'/><circle cx='428' cy='326' r='1.3' fill='rgba(255,238,205,0.6)'/><circle cx='529' cy='410' r='0.9' fill='rgba(255,255,255,0.49)'/><circle cx='864' cy='383' r='1.1' fill='rgba(255,255,255,0.86)'/><circle cx='1437' cy='635' r='1.6' fill='rgba(255,255,255,0.89)'/><circle cx='1321' cy='663' r='0.5' fill='rgba(255,255,255,0.88)'/><circle cx='649' cy='559' r='1.3' fill='rgba(255,255,255,0.6)'/><circle cx='729' cy='578' r='1.3' fill='rgba(255,238,205,0.57)'/><circle cx='874' cy='380' r='1.1' fill='rgba(255,255,255,0.45)'/><circle cx='630' cy='526' r='1.0' fill='rgba(255,238,205,0.24)'/><circle cx='556' cy='589' r='0.7' fill='rgba(255,238,205,0.23)'/><circle cx='583' cy='205' r='1.0' fill='rgba(255,255,255,0.36)'/><circle cx='244' cy='662' r='0.5' fill='rgba(255,255,255,0.43)'/><circle cx='1331' cy='818' r='0.7' fill='rgba(215,228,255,0.72)'/><circle cx='164' cy='357' r='1.6' fill='rgba(200,255,246,0.41)'/><circle cx='1112' cy='449' r='0.7' fill='rgba(255,255,255,0.76)'/><circle cx='9' cy='131' r='0.8' fill='rgba(255,238,205,0.66)'/><circle cx='544' cy='381' r='0.8' fill='rgba(255,255,255,0.18)'/><circle cx='92' cy='178' r='0.9' fill='rgba(255,255,255,0.89)'/><circle cx='387' cy='834' r='1.3' fill='rgba(255,255,255,0.84)'/><circle cx='1552' cy='431' r='0.9' fill='rgba(215,228,255,0.45)'/><circle cx='1564' cy='852' r='0.6' fill='rgba(255,255,255,0.69)'/><circle cx='629' cy='415' r='0.5' fill='rgba(255,238,205,0.26)'/><circle cx='740' cy='462' r='1.1' fill='rgba(255,255,255,0.95)'/><circle cx='1378' cy='447' r='2.1' fill='rgba(255,255,255,.95)'/><circle cx='1378' cy='447' r='6' fill='rgba(200,220,255,.13)'/><circle cx='787' cy='510' r='2.1' fill='rgba(255,255,255,.95)'/><circle cx='787' cy='510' r='6' fill='rgba(200,220,255,.13)'/><circle cx='1281' cy='650' r='2.1' fill='rgba(255,255,255,.95)'/><circle cx='1281' cy='650' r='6' fill='rgba(200,220,255,.13)'/><circle cx='1156' cy='413' r='2.1' fill='rgba(255,255,255,.95)'/><circle cx='1156' cy='413' r='6' fill='rgba(200,220,255,.13)'/><circle cx='120' cy='658' r='2.1' fill='rgba(255,255,255,.95)'/><circle cx='120' cy='658' r='6' fill='rgba(200,220,255,.13)'/><circle cx='880' cy='737' r='2.1' fill='rgba(255,255,255,.95)'/><circle cx='880' cy='737' r='6' fill='rgba(200,220,255,.13)'/><circle cx='1199' cy='164' r='2.1' fill='rgba(255,255,255,.95)'/><circle cx='1199' cy='164' r='6' fill='rgba(200,220,255,.13)'/><circle cx='387' cy='128' r='2.1' fill='rgba(255,255,255,.95)'/><circle cx='387' cy='128' r='6' fill='rgba(200,220,255,.13)'/><circle cx='1270' cy='150' r='2.1' fill='rgba(255,255,255,.95)'/><circle cx='1270' cy='150' r='6' fill='rgba(200,220,255,.13)'/></svg>");
  --nebulosa-profunda:
    radial-gradient(70% 55% at 15% 8%,  rgba(96,72,190,.30), transparent 68%),
    radial-gradient(60% 50% at 88% 26%, rgba(38,140,150,.22), transparent 66%),
    radial-gradient(80% 60% at 62% 88%, rgba(150,96,60,.16), transparent 70%),
    radial-gradient(50% 40% at 38% 55%, rgba(120,90,210,.14), transparent 72%);
}
body{
  background-color:var(--espacio);
  background-image:var(--nebulosa-profunda), var(--campo-estrellas);
  background-size:100% 100%, cover;
  background-repeat:no-repeat, no-repeat;
  background-position:center center, center center;
  background-attachment:fixed, fixed;
  color:var(--ink);
}
/* Segundo plano de estrellas en deriva. El elemento mide el doble
   de la ventana, así que al desplazarse nunca entra un borde. */
body::before{
  content:'';position:fixed;top:-50vh;left:-50vw;width:200vw;height:200vh;
  z-index:0;pointer-events:none;
  background:var(--campo-estrellas) center/cover no-repeat;
  opacity:.40;
  animation:derivaEstrellas 300s linear infinite alternate;
}
@keyframes derivaEstrellas{
  from{transform:translate3d(0,0,0) scale(1);}
  to  {transform:translate3d(-6vw,-4vh,0) scale(1.06);}
}
/* parpadeo muy leve de un tercer plano, para que el cielo respire */
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--campo-estrellas) center/cover no-repeat;
  opacity:.22;animation:titilan 9s ease-in-out infinite alternate;
}
@keyframes titilan{from{opacity:.12;}to{opacity:.34;}}

/* Solo el contenido en flujo se eleva sobre el campo de estrellas.
   El carrito, las ventanas modales y la intro NO entran aquí: llevan
   position:fixed y ponerles relative los mandaba al final de la página. */
/* La cabecera queda fuera: ya es position:sticky, y ponerle relative
   la despegaba del borde superior al desplazar. Sticky también crea
   contexto de apilado, así que se eleva sobre las estrellas igual. */
.catalog,footer,.about,.resenas-section,
#universos-section{position:relative;z-index:1;}
nav{z-index:900;}

/* ── Tipografía elegante ───────────────────────────────────── */
h1,h2,h3,.sec-title,.resbar-tit h1,.a-h2,.card h3,.nav-marca{
  font-family:var(--serif);font-weight:500;letter-spacing:.005em;
}
.sec-title,.a-h2{font-weight:400;}
.nav-marca{font-weight:600;font-size:1.15rem;letter-spacing:.02em;text-transform:none;color:var(--ink);}
.nav-marca-sub{
  font-family:var(--sans);font-weight:300;font-size:.58rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--muted);
}
.card h3{font-size:1.05rem;font-weight:600;line-height:1.25;}

/* ── Barra de servicio y cabecera ──────────────────────────── */
nav{
  background:rgba(10,15,32,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);background-image:none;
}
.buscador{
  border:1px solid var(--border-dark);background:var(--paper2);
  border-radius:var(--radius-pill);overflow:hidden;
}
.buscador:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,180,92,.14);}
.buscador input{color:var(--ink);}
.buscador input::placeholder{color:var(--muted2);}
.buscador button{background:var(--gold);color:var(--espacio);font-weight:600;}
.buscador button:hover{background:var(--rust-ink);}
.cart-btn,.wl-btn,.nav-pedidos-btn{
  background:var(--paper2);border:1px solid var(--border);color:var(--ink);
}
.cart-btn:hover,.wl-btn:hover{border-color:var(--gold);}

/* ── Barra de categorías ───────────────────────────────────── */
.catnav .cat-chip{color:var(--muted);font-family:var(--sans);font-weight:400;letter-spacing:.04em;}
.catnav .cat-chip:hover{color:var(--ink);border-bottom-color:var(--border-dark);}
.catnav .cat-chip.active{color:var(--gold);border-bottom-color:var(--gold);}

/* destello que recorre la banda */
/* ── Migas y cabecera de resultados ────────────────────────── */
.migas,.migas a{color:var(--muted);}
.migas a:hover{color:var(--gold);}
.resbar .rcount{color:var(--muted);font-family:var(--sans);}
.resbar .sec-link{color:var(--gold);}
.resbar .sec-link:hover{color:var(--rust-ink);}

/* ── Columna de filtros: panel de observatorio ─────────────── */
.filtros{
  background:var(--cream);border:1px solid var(--border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-md);
}
.filtros::before{
  background:linear-gradient(90deg,var(--sage),var(--gold),var(--sky));
  height:2px;background-size:auto;box-shadow:none;
}
.fbloque{border-bottom:1px solid var(--border);}
.fbloque h4{
  font-family:var(--serif);font-weight:600;font-size:1.02rem;
  text-transform:none;letter-spacing:.01em;color:var(--ink);
}
.filtros .fsel{background:var(--paper2);border-color:var(--border);color:var(--ink);}
.filtros .fsel:focus{border-color:var(--gold);}
.chips-col .chip{background:var(--paper2);border-color:var(--border);color:var(--muted);}
.chips-col .chip:hover{border-color:var(--border-dark);color:var(--ink);}
.chips-col .chip.active{background:var(--gold);border-color:var(--gold);color:var(--espacio);}
.chips-col .chip.an.active{background:var(--sky);border-color:var(--sky);color:var(--espacio);}
.chips-col .chip.au.active{background:var(--sage);border-color:var(--sage);color:#fff;}
.btn-limpiar{background:var(--paper2);border-color:var(--border);color:var(--ink);}
.btn-limpiar:hover{border-color:var(--gold);color:var(--gold);}
.btn-filtros-mob{background:var(--paper2);border-color:var(--border-dark);color:var(--ink);}

/* ── Ruleta ────────────────────────────────────────────────── */
.mod-ruleta{background:var(--nebulosa);border-color:var(--border-dark);}
.mod-tag{color:var(--gold);}
.mod-ruleta h4{color:var(--ink);}
.mod-ruleta .btn-spin{background:var(--gold);color:var(--espacio);font-weight:600;}
.mod-ruleta .btn-spin:hover{background:var(--rust-ink);}
.mod-ruleta .wheel-result{color:var(--sky);}

/* ── Tarjetas de libro: cada una, un pequeño planeta ───────── */
.card{
  background:var(--cream);border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, border-color .28s;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 30px rgba(232,180,92,.18);
}
.cover{background:var(--paper2);border-bottom:1px solid var(--border);}
.card .info,.card .info *{color:var(--ink);}
.card .aut,.card .est{color:var(--muted);}
.ribbon{box-shadow:0 0 14px rgba(0,0,0,.4);}
.card-wl{background:rgba(21,29,59,.85);border:1px solid var(--border);}

/* aparición escalonada de las tarjetas al pintar la rejilla */
.grid .card{animation:cardEntra .5s cubic-bezier(.2,.8,.3,1) both;}
.grid .card:nth-child(1){animation-delay:.02s} .grid .card:nth-child(2){animation-delay:.06s}
.grid .card:nth-child(3){animation-delay:.10s} .grid .card:nth-child(4){animation-delay:.14s}
.grid .card:nth-child(5){animation-delay:.18s} .grid .card:nth-child(6){animation-delay:.22s}
.grid .card:nth-child(7){animation-delay:.26s} .grid .card:nth-child(8){animation-delay:.30s}
.grid .card:nth-child(n+9){animation-delay:.34s}
@keyframes cardEntra{from{opacity:0;transform:translateY(16px) scale(.985);}}

/* ── Botones ───────────────────────────────────────────────── */
.ob{font-family:var(--sans);font-weight:500;letter-spacing:.02em;}
.ob-gold{background:var(--gold);color:var(--espacio);font-weight:600;}
.ob-gold:hover{background:var(--rust-ink);box-shadow:0 0 20px rgba(232,180,92,.35);}
.ob-ghost{background:transparent;color:var(--ink);border-color:var(--border-dark);}
.ob-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(232,180,92,.06);}

/* ── Paginación ────────────────────────────────────────────── */
.pag button,.pag a{background:var(--paper2);border-color:var(--border);color:var(--ink);}
.pag button:hover,.pag a:hover{border-color:var(--gold);color:var(--gold);}
.pag .active,.pag button.active{background:var(--gold);border-color:var(--gold);color:var(--espacio);}

/* ── Nosotros ──────────────────────────────────────────────── */
.about{background:var(--paper2);}
.ab-panel{background:var(--cream);border-color:var(--border);border-top:2px solid var(--gold);}
.ab-panel-head strong{color:var(--ink);}
.ab-panel-head span,.ab-lista li{color:var(--muted);}
.ab-lista b{color:var(--ink);}
.ab-lista li::before{background:var(--gold);border-radius:50%;box-shadow:0 0 8px rgba(232,180,92,.6);}
.ab-panel .a-num{color:var(--gold);font-family:var(--serif);}
.ab-panel .a-lbl{color:var(--muted);}
.a-tag{color:var(--sky);}
.a-p{color:var(--ink2);}
.a-soc a{color:var(--ink);border-color:var(--border-dark);}
.a-soc a:hover{color:var(--gold);border-color:var(--gold);}

/* ── Reseñas ───────────────────────────────────────────────── */
.resenas-section{background:var(--paper);}
.resena-card,.resenas-grid > *{background:var(--cream);border-color:var(--border);color:var(--ink);}
.resenas-tag{color:var(--sky);}

/* ── Pie: el espacio más profundo ──────────────────────────── */
footer{
  background:var(--espacio);color:var(--ink2);
  border-top:1px solid var(--border);
  background-image:var(--campo-estrellas);background-size:cover;background-repeat:no-repeat;
}
footer h2,footer h3,footer h4{color:var(--ink);}
footer a{color:var(--ink2);}
footer a:hover{color:var(--gold);}
.pago{border-color:var(--border-dark);color:var(--ink2);background:transparent;}

/* ── Carrito y ventanas ────────────────────────────────────── */
#drawer,.mdl,.bdl-main,.auth-content{
  background:var(--paper2);color:var(--ink);border:1px solid var(--border);
}
#drawer{border-left:1px solid var(--border);}
.mdl input,.auth-content input,#drawer input,.mdl select,.mdl textarea{
  background:var(--paper);border-color:var(--border);color:var(--ink);
}

/* ── Estados y avisos ──────────────────────────────────────── */
.loading-state{color:var(--muted);}
#stock-notice{background:var(--sage-light);color:var(--rust-ink);border-bottom:1px solid var(--border-dark);}
#toast{background:var(--nebulosa);color:var(--ink);border:1px solid var(--border-dark);}

/* ── Menos movimiento ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  body::before,.grid .card{animation:none!important;}
  .card:hover{transform:none;}
}

/* ═══════════════════════════════════════════════════════════
   TARJETA DE LIBRO · estructura propia
   Fuera el panel flotante sobre la portada con dos botones
   apilados y la banderola en diagonal: eso era el patrón de otra
   tienda. Aquí la información se lee de arriba abajo y las
   acciones viven en su propia fila, siempre visibles.
   ═══════════════════════════════════════════════════════════ */
.card .overlay{display:none!important;}

.card .cover{overflow:hidden;}
.card .cover img{transition:transform .5s cubic-bezier(.2,.8,.3,1);}
.card:hover .cover img{transform:scale(1.05);}

/* Estrella de deseos, no corazón */
.card-wl{
  position:absolute;top:9px;right:9px;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(7,11,24,.62);border:1px solid var(--borde-sutil);
  backdrop-filter:blur(6px);transition:.18s;z-index:3;padding:0;
}
.card-wl svg{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;}
.card-wl:hover{border-color:var(--gold);transform:scale(1.1);}
.card-wl.activo{background:rgba(232,180,92,.18);border-color:var(--gold);}
.card-wl.activo svg{fill:var(--gold);stroke:var(--gold);}

/* Línea de contexto: estado + categoría, en una sola fila */
.imeta{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap;}
.card .ribbon{
  position:static;padding:2px 9px;border-radius:var(--radius-pill);
  font-family:var(--sans);font-size:.63rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;box-shadow:none;
}
.icat{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:400;
}
.ititle{
  font-family:var(--serif);font-size:1.14rem;font-weight:600;
  line-height:1.22;letter-spacing:.005em;color:var(--ink);margin:0 0 3px;
}
.iauthor{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:.9rem;color:var(--muted);margin-bottom:12px;
}
.ifoot{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding-top:11px;border-top:1px solid var(--border);margin-top:auto;
}
.iprice{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--gold);letter-spacing:.01em;}
.iprice-c{font-size:.8rem;font-weight:400;opacity:.75;}
.iprice-old{font-family:var(--sans);font-size:.78rem;color:var(--muted2);text-decoration:line-through;}

/* Acciones en su propia fila, no flotando sobre la portada */
.iacciones{display:flex;gap:7px;margin-top:11px;}
.iadd{
  flex:1;padding:10px 12px;border:none;border-radius:var(--radius-sm);
  background:var(--gold);color:var(--espacio);
  font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.03em;
  cursor:pointer;transition:.18s;
}
.iadd:hover{background:var(--rust-ink);box-shadow:0 0 18px rgba(232,180,92,.4);}
.iadd-off{background:var(--paper2);color:var(--muted2);cursor:not-allowed;}
.ilupa{
  width:40px;flex-shrink:0;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:transparent;
  display:grid;place-items:center;cursor:pointer;transition:.18s;padding:0;
}
.ilupa svg{fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ilupa:hover{border-color:var(--sky);}
.ilupa:hover svg{stroke:var(--sky);}

.card .info{display:flex;flex-direction:column;flex:1;padding:14px 15px 16px;}

/* Iconos de línea en lugar de emojis: los emojis los dibuja el
   sistema operativo, así que cambian de aspecto en cada equipo y
   no se pueden teñir con la paleta. */
.ico{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;}
.cart-btn,.wl-btn,.nav-pedidos-btn{display:inline-flex;align-items:center;gap:7px;}
.buscador-ico{display:inline-flex;align-items:center;color:var(--muted);}
.btn-filtros-mob{display:inline-flex;align-items:center;gap:7px;}
.mobile-menu a{display:flex;align-items:center;gap:10px;}
.univ-cart-btn{display:inline-flex;align-items:center;gap:7px;}
#stock-notice,.mod-tag,.resena-form-title,.btn-spin,.bdl-btn-wa{display:flex;align-items:center;justify-content:center;gap:8px;}

/* ═══════════════════════════════════════════════════════════
   VENTANAS · carrito, ficha de libro, cuenta, universos
   Habían quedado con fondo blanco (#fff a pelo en el CSS
   heredado), así que rompían el tema oscuro al abrirlas.
   ═══════════════════════════════════════════════════════════ */
.drawer,.mdl,.bdl,.bdl-info,.auth-box,.univ-screen{
  background:var(--paper2);color:var(--ink);
}
.drawer{border-left:1px solid var(--border);}
.mdl{border:1px solid var(--border);}
.bdl{border:1px solid var(--border);box-shadow:0 32px 80px rgba(0,0,0,.6);}
.bdl-meta,.bdl-rec{background:var(--espacio);border-color:var(--border);}
.bdl-rec-card{background:var(--cream);box-shadow:none;border:1px solid var(--border);}
.bdl-title,.bdl-rc-t,.mdl-resumen-title{color:var(--ink);font-family:var(--serif);}
.bdl-author,.bdl-cat,.bdl-desc,.bdl-meta-item,.bdl-rc-a{color:var(--muted);}
.bdl-price,.bdl-rc-p{color:var(--gold);font-family:var(--serif);}
.bdl-btn-cart{background:var(--gold);color:var(--espacio);font-weight:600;}
.bdl-btn-cart:hover{background:var(--rust-ink);}
.bdl-btn-wa{background:transparent;color:var(--ink);border:1px solid var(--border-dark);}
.bdl-btn-wa:hover{border-color:var(--sky);color:var(--sky);}
.bdl-close,.auth-close,.univ-exit{
  background:var(--cream);color:var(--ink);border:1px solid var(--border);
}
.bdl-close:hover,.auth-close:hover{border-color:var(--gold);color:var(--gold);}
.bdl-bg,.mdl-bg,.auth-bg{background:rgba(4,7,18,.86);backdrop-filter:blur(6px);}
.auth-title{color:var(--ink);font-family:var(--serif);}
.auth-sub,.auth-switch{color:var(--muted);}
.auth-fld input,.mdl input,.mdl select,.mdl textarea,.drawer input{
  background:var(--paper);border:1px solid var(--border);color:var(--ink);
}
.auth-fld input::placeholder,.mdl input::placeholder{color:var(--muted2);}
.auth-btn{background:var(--gold);color:var(--espacio);font-weight:600;}

/* ═══════════════════════════════════════════════════════════
   CATÁLOGO A TODO EL ANCHO
   La columna de filtros fija se comía un tercio de la pantalla y
   empujaba los libros. Ahora los libros mandan y los filtros
   viven en un panel que se abre con el botón, en cualquier
   tamaño de pantalla — no solo en móvil.
   ═══════════════════════════════════════════════════════════ */
.cuerpo{grid-template-columns:1fr;gap:0;}

.filtros{
  position:fixed;top:0;left:0;bottom:0;
  width:min(330px,88vw);z-index:9200;
  border-radius:0;border:none;border-right:1px solid var(--border);
  background:var(--paper2);
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;overflow-x:hidden;padding:20px;
  box-shadow:24px 0 60px rgba(0,0,0,.5);
}
.filtros.abierto{transform:none;}
.filtros-head{display:flex;}
.filtros::before{display:none;}

/* El botón de filtros deja de ser solo de móvil */
.btn-filtros-mob{display:inline-flex!important;}

/* Fondo que atenúa la página con el panel abierto */
.filtros-velo{
  position:fixed;inset:0;z-index:9100;background:rgba(4,7,18,.6);
  backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s;
}
.filtros-velo.on{opacity:1;pointer-events:auto;}

/* Rejilla más densa: caben más libros de un vistazo */
.grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:16px;}
@media(min-width:1100px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:20px;}
}
@media(max-width:620px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
}
/* la portada manda en la tarjeta, el texto ocupa lo justo */
.card .cover{aspect-ratio:2/3;}
.card .info{padding:12px 13px 14px;}
.ititle{font-size:1.05rem;}
.iauthor{font-size:.84rem;margin-bottom:9px;}
.iprice{font-size:1.32rem;}

/* ═══════════════════════════════════════════════════════════
   ESTRUCTURA NUEVA · cabecera de catálogo y barra de mando
   La franja de categorías cruzando toda la página, las migas y
   la fila de resultados eran el esqueleto de la otra tienda.
   Aquí el catálogo se presenta con su propia portadilla y las
   categorías viven pegadas a la rejilla, no flotando arriba.
   ═══════════════════════════════════════════════════════════ */
/* El aire de aqui estaba calculado para una cabecera que ademas llevaba una
   ruta de navegacion util. Cuando esa ruta se reduce a la palabra "Inicio"
   —el caso normal, sin filtros— quedaban 113px de fondo estrellado con una
   palabra suelta en medio. Se aprieta. */
.cat-cab{padding:34px 0 4px;text-align:center;}
.cat-eyebrow{
  font-family:var(--sans);font-size:.68rem;font-weight:400;
  letter-spacing:.44em;text-transform:uppercase;color:var(--sky);
  margin-bottom:12px;
}
.cat-cab h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;
  letter-spacing:.02em;color:var(--ink);margin:0;
}
.cat-cab .rcount{
  display:block;margin-top:10px;font-family:var(--sans);
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
/* filete de constelación bajo el título */
.cat-cab::after{
  content:'';display:block;width:120px;height:1px;margin:15px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* Migas de pan — ruta de navegación, patrón habitual de librería online */
.migas{
  display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.03em;color:var(--muted);
  margin:10px 0 0;
}
/* Sin filtros no hay ruta que contar, y el nav se oculta desde tienda.js.
   Hace falta ganarle al display:flex de arriba: [hidden] por si solo no puede. */
.migas[hidden]{display:none;}
.migas span[role="button"]{cursor:pointer;transition:color .15s;}
.migas span[role="button"]:hover{color:var(--gold);}
.migas-sep{color:var(--border-dark);}
.migas-act{color:var(--gold);}

.mando{
  display:flex;align-items:center;gap:14px;
  padding:18px 0 16px;margin-bottom:26px;
  border-bottom:1px solid var(--border);flex-wrap:nowrap;
}
.rail{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;}
.rail::-webkit-scrollbar{display:none;}
.mando .cat-chip{
  background:transparent;border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:7px 15px;font-family:var(--sans);font-size:.79rem;font-weight:400;
  letter-spacing:.03em;color:var(--muted);white-space:nowrap;cursor:pointer;
  transition:.18s;box-shadow:none;transform:none;
}
.mando .cat-chip:hover{border-color:var(--border-dark);color:var(--ink);transform:none;}
.mando .cat-chip.active{
  background:rgba(232,180,92,.12);border-color:var(--gold);color:var(--gold);
  transform:none;box-shadow:0 0 16px rgba(232,180,92,.16);
}
.mando .cat-chip.oferta-chip{color:var(--sky);border-color:rgba(95,212,196,.35);}
.mando .cat-chip.oferta-chip.active{background:rgba(95,212,196,.12);border-color:var(--sky);color:var(--sky);}
.mando-acc{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.mando-acc .sec-link{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;color:var(--muted);cursor:pointer;
}
.mando-acc .sec-link:hover{color:var(--gold);}
.orden-lbl{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.orden-sel.fsel{padding:7px 30px 7px 12px;font-size:.78rem;background-color:var(--cream);}
@media(max-width:820px){ .orden-lbl{display:none;} }

/* Enlaces sueltos, ahora en la cabecera */
.nav-link{
  font-family:var(--sans);font-size:.82rem;letter-spacing:.06em;
  color:var(--muted);white-space:nowrap;transition:color .15s;padding:0 4px;
}
.nav-link:hover{color:var(--gold);}

/* Marcellus no tiene negritas: el peso lo dan el tamaño y el espaciado */
h1,h2,h3,.ititle,.cat-cab h1,.nav-marca{font-weight:400;letter-spacing:.015em;}
.ititle{font-size:1.02rem;line-height:1.28;}
.nav-marca{font-size:1.1rem;}
.iprice{font-family:var(--serif);font-weight:400;}

@media(max-width:820px){
  .nav-link{display:none;}
  .mando{flex-wrap:wrap;}
  .mando-acc{width:100%;justify-content:space-between;}
  .cat-cab{padding-top:30px;}
}

/* ═══════════════════════════════════════════════════════════
   PIE · composición centrada
   Era la rejilla corporativa de cuatro columnas (marca ancha +
   tres listas) idéntica a la de la otra tienda. Ahora la marca
   preside centrada y los enlaces van en una sola fila fluida.
   ═══════════════════════════════════════════════════════════ */
.fg{display:block;max-width:820px;margin:0 auto 2.4rem;text-align:center;}
.fb{margin-bottom:2.2rem;}
.fb h2{font-family:var(--serif);font-weight:400;font-size:1.9rem;letter-spacing:.03em;}
.fb h2 em{font-style:normal;color:var(--gold);}
.fb p{color:var(--muted);max-width:46ch;margin:.7rem auto 0;font-size:.92rem;}
/* las tres listas pasan a una fila horizontal continua */
.fc{display:inline;}
.fc h3{
  display:block;font-family:var(--sans);font-size:.63rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--muted2);
  margin:1.6rem 0 .7rem;
}
.fc a{
  display:inline-block;margin:0 .55rem;font-family:var(--sans);
  font-size:.86rem;color:var(--ink2);
}
.fc a:hover{color:var(--gold);}
@media(max-width:700px){
}

/* "Limpiar" heredaba la píldora dorada de .sec-link y competía con
   "Filtros". Es una acción secundaria: va como enlace liso. */
.mando-acc .sec-link{
  background:none!important;border:none!important;padding:0!important;
  border-radius:0!important;box-shadow:none!important;transform:none!important;
  color:var(--muted);font-weight:400;
}
.mando-acc .sec-link:hover{color:var(--gold);text-decoration:underline;background:none!important;}

/* ═══════════════════════════════════════════════════════════
   NOSOTROS · banda de constelación
   Fuera la onda crema del borde superior y la cuadrícula de
   cuaderno del lateral: eran los adornos de la otra tienda. Y
   fuera también el reparto en dos columnas (texto | tarjeta),
   que era su composición. Ahora es una sola columna centrada
   con los cuatro puntos en fila, como una constelación.
   ═══════════════════════════════════════════════════════════ */
.about::before,.about::after,.about-v::before{display:none!important;content:none!important;}
.about{
  display:block;background:var(--paper2);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:64px 24px 56px;
}
.about-t{
  padding:0;max-width:660px;margin:0 auto 44px;
  text-align:center;align-items:center;
}
.a-tag{
  background:none;box-shadow:none;padding:0;border-radius:0;
  font-family:var(--sans);font-size:.68rem;font-weight:400;
  letter-spacing:.44em;text-transform:uppercase;color:var(--sky);
  margin-bottom:14px;
}
.a-h2{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.12;
  letter-spacing:.015em;margin-bottom:1.1rem;
}
.a-h2 em{
  font-family:var(--serif);font-style:normal;font-weight:400;
  font-size:1em;color:var(--gold);text-shadow:none;
}
.a-p{color:var(--muted);font-size:.94rem;line-height:1.7;max-width:56ch;margin:0 auto;}
.a-soc{justify-content:center;margin-top:1.8rem;gap:.7rem;}
.a-soc a{
  color:var(--muted);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:7px 16px;font-family:var(--sans);
  font-size:.78rem;font-weight:400;letter-spacing:.04em;
}
.a-soc a:hover{color:var(--gold);border-color:var(--gold);background:transparent;}

.about-v{background:none;padding:0;min-height:0;display:block;}
/* el panel deja de ser una tarjeta y pasa a ser una banda */
.ab-panel{
  background:none;border:none;border-top:1px solid var(--border);
  border-radius:0;box-shadow:none;padding:38px 0 0;max-width:1100px;margin:0 auto;
}
/* Estaba oculta, y sin ella la banda se quedaba en tres parrafos flotando
   sin nada que los sujetara. Vuelve, centrada sobre la lista. */
.ab-panel-head{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding-bottom:20px;margin-bottom:24px;text-align:center;
  border-bottom:1px solid var(--border);
}
.ab-panel-head img{opacity:.92;}
.ab-panel-head strong{
  font-family:var(--serif);font-weight:400;font-size:1.12rem;
  letter-spacing:.02em;color:var(--ink);
}
.ab-panel-head span{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
}
/* Eran cuatro columnas para tres credenciales: la cuarta quedaba vacia y las
   tres se iban a la izquierda, descentradas respecto al resto de la seccion. */
.ab-lista{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;
  margin:0 auto 34px;max-width:940px;
}
.ab-lista li{padding-left:0;text-align:center;font-size:.86rem;line-height:1.55;}
.ab-lista li::before{
  position:static;display:block;margin:0 auto 12px;
  width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px rgba(232,180,92,.7);
}
.ab-lista b{display:block;font-family:var(--serif);font-weight:400;
  font-size:1.02rem;color:var(--ink);margin-bottom:5px;letter-spacing:.01em;}
.ab-panel .a-stats{
  grid-template-columns:repeat(2,auto);justify-content:center;gap:56px;
  border-top:1px solid var(--border);padding-top:26px;
}
.ab-panel .a-num{font-family:var(--serif);font-weight:400;font-size:2rem;}
@media(max-width:820px){
  .ab-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
  .about{padding:44px 18px 40px;}
}
@media(max-width:520px){ .ab-lista{grid-template-columns:1fr;} }

/* ═══════════════════════════════════════════════════════════
   PIE · más compacto
   Ocupaba una pantalla entera para cuatro enlaces: tipografías
   grandes y mucho aire entre grupos.
   ═══════════════════════════════════════════════════════════ */
footer{padding:44px 22px 22px;}
.fg{margin-bottom:1.6rem;max-width:900px;}
.fb{margin-bottom:1.4rem;}
.fb h2{font-size:1.3rem;letter-spacing:.04em;}
.fb p{font-size:.83rem;margin-top:.45rem;max-width:52ch;}
.fc h3{font-size:.58rem;letter-spacing:.24em;margin:1rem 0 .45rem;}
.fc a{font-size:.8rem;margin:0 .45rem;line-height:1.9;}
.pagos{justify-content:center;margin-top:1rem;}
.pago{font-size:.7rem;padding:4px 10px;}

/* ── Correcciones ──────────────────────────────────────────────
   1) .a-stats venía con position:absolute (en la otra tienda
      flotaba sobre un panel coral). Al pasar la sección a una
      banda en fila, se montaba encima del cuarto punto.
   2) .fb h2 pintaba el texto con var(--paper): esa variable
      antes era casi blanca y ahora es el fondo oscuro, así que
      "de Libros" quedaba oscuro sobre oscuro. */
.ab-panel .a-stats{
  position:static;display:grid;grid-template-columns:repeat(2,auto);
  justify-content:center;gap:56px;
  border-top:1px solid var(--border);padding-top:26px;margin-top:8px;
}
.ab-panel .a-stat{margin-bottom:0;text-align:center;}

footer .fb h2{color:var(--ink);}
footer .fb h2 em{color:var(--gold);font-family:var(--serif);font-size:1em;font-weight:400;}

/* ── Formulario de reseñas ─────────────────────────────────────
   Se había quedado en blanco con el título en color claro encima:
   invisible. Los campos van más oscuros que el panel para que se
   distingan, no al revés. */
.resena-form-wrap{
  background:var(--cream);border:1px solid var(--border);
  box-shadow:var(--shadow-md);padding:2rem 1.8rem;
}
.resena-form-title{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:1.3rem;letter-spacing:.02em;margin-bottom:1.4rem;
}
.resena-inp{
  background:var(--paper);border:1px solid var(--border);color:var(--ink);
  font-family:var(--sans);
}
.resena-inp::placeholder{color:var(--muted2);}
.resena-inp:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,180,92,.12);}
.resena-btn{
  background:var(--gold);color:var(--espacio);border:none;
  font-family:var(--sans);font-weight:600;letter-spacing:.03em;box-shadow:none;
}
.resena-btn:hover{background:var(--rust-ink);box-shadow:0 0 20px rgba(232,180,92,.32);}
/* estrellas: apagadas discretas, encendidas en oro */
.resena-stars-row span{color:var(--border-dark);}
.resena-stars-row span.lit{color:var(--gold);text-shadow:0 0 12px rgba(232,180,92,.5);}
.resena-card{background:var(--cream);border:1px solid var(--border);box-shadow:none;}
.resena-estrellas{color:var(--gold);}
.resena-texto{color:var(--ink2);}
.resena-nombre{color:var(--muted);}
.resenas-h2{font-family:var(--serif);font-weight:400;color:var(--ink);}
.resenas-h2 em{color:var(--gold);font-style:normal;}
.resenas-sub{color:var(--muted);}
.resenas-tag{
  background:none;border:1px solid var(--border);color:var(--sky);
  font-family:var(--sans);font-weight:400;letter-spacing:.24em;
}
/* campos de otros formularios (checkout, cuenta) */
.fld input,.fld select,.fld textarea{
  background:var(--paper);border:1px solid var(--border);color:var(--ink);
}
.fld input::placeholder{color:var(--muted2);}
.mobile-menu{background:var(--paper2);border-bottom:1px solid var(--border);}
.mobile-menu a{color:var(--ink);border-bottom:1px solid var(--border);}

/* ── Todos los campos de formulario ────────────────────────────
   Quedaban blancos los del checkout, la cuenta y la bodega. Una
   regla general evita perseguirlos clase a clase. */
input:not([type=range]):not([type=checkbox]):not([type=radio]),
select, textarea{
  background:var(--paper);
  border:1px solid var(--border);
  color:var(--ink);
  font-family:var(--sans);
}
input::placeholder, textarea::placeholder{color:var(--muted2);}
input:focus, select:focus, textarea:focus{
  border-color:var(--gold);outline:none;
  box-shadow:0 0 0 3px rgba(232,180,92,.12);
}
select option{background:var(--paper2);color:var(--ink);}
input[type=checkbox],input[type=radio]{accent-color:var(--gold);}

/* contador del carrito y de deseos */
.cart-n,.wl-n{background:var(--gold);color:var(--espacio);font-weight:600;}

/* ═══════════════════════════════════════════════════════════
   IDEAS PORTADAS DE LA MAQUETA CÓSMICA
   La maqueta venía con clases propias y sin la lógica de la
   tienda, así que no se puede copiar encima: se portan las tres
   ideas que aportan y se aplican al marcado real.
   ═══════════════════════════════════════════════════════════ */

/* ── Cinta de marquesina (sustituye a la barra de servicio) ── */
/* ── Barra de progreso de lectura ──────────────────────────── */
.progreso{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;
  transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--sage),var(--gold),var(--sky));
  box-shadow:0 0 12px rgba(232,180,92,.5);pointer-events:none;
}

/* ── Logotipo con anillo en órbita ─────────────────────────── */
.marca__orbe{position:relative;display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;}
.marca__orbe img{width:38px;height:38px;object-fit:contain;}
.marca__anillo{
  position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(232,180,92,.32);
  animation:orbita 18s linear infinite;
}
/* el punto de luz que recorre el anillo */
.marca__anillo::after{
  content:'';position:absolute;top:-2px;left:50%;
  width:4px;height:4px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 9px var(--gold);
}
@keyframes orbita{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion: reduce){
  .progreso{transition:none;}
}
@media(max-width:620px){
}

/* ═══════════════════════════════════════════════════════════
   EL LIBRO SE ABRE AL PASAR EL CURSOR
   La tapa gira sobre su lomo (transform-origin en el borde
   izquierdo) y deja ver la página de debajo con la sinopsis.
   Idea tomada de la maqueta cósmica y adaptada a la tarjeta real.
   ═══════════════════════════════════════════════════════════ */
.card .cover{
  perspective:1400px;          /* sin esto el giro se ve plano */
  overflow:visible;            /* la tapa abierta sale del recuadro */
  position:relative;z-index:1;
}

/* ── Página: papel bajo la tapa ─────────────────────────────── */
.cover-pagina{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:14px 13px;
  border-radius:3px 8px 8px 3px;
  background:linear-gradient(160deg,#F6F1E6,#DED4C0);
  color:#2A2420;
  box-shadow:inset 3px 0 8px rgba(0,0,0,.18);
  overflow:hidden;
}
.cp-texto{
  font-family:var(--serif);font-size:.72rem;line-height:1.45;
  color:#3B342C;flex:1;overflow:hidden;margin:0;
}
.cp-datos{
  display:flex;flex-direction:column;gap:2px;margin:8px 0 6px;
  font-family:var(--sans);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7A6E5E;
}
.cp-abrir{
  align-self:flex-start;padding:5px 11px;border-radius:999px;
  border:1px solid rgba(42,36,32,.32);
  font-family:var(--sans);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:#2A2420;
}

/* ── Tapa: lo que gira ──────────────────────────────────────── */
.cover-tapa{
  position:absolute;inset:0;z-index:2;
  transform-origin:left center;
  transform-style:preserve-3d;
  border-radius:3px 8px 8px 3px;
  overflow:hidden;
  background:var(--paper2);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:transform 1s cubic-bezier(.22,.7,.15,1), box-shadow .5s ease;
}
/* canto sombreado del lomo, para que parezca papel y no una lámina */
.cover-lomo{
  position:absolute;left:0;top:0;bottom:0;width:7px;
  background:linear-gradient(90deg,rgba(0,0,0,.45),transparent);
  pointer-events:none;
}
.card:hover .cover-tapa,
.card:focus-within .cover-tapa{
  transform:rotateY(-62deg);
  box-shadow:14px 18px 44px rgba(0,0,0,.6);
}
/* la estrella se queda por encima de todo */
.card-wl{z-index:6;}

/* En táctil no hay cursor que pase por encima: la tapa se queda
   cerrada y el detalle se abre al tocar, como siempre. */
@media (hover:none){
  .card:hover .cover-tapa{transform:none;box-shadow:0 10px 26px rgba(0,0,0,.45);}
}
@media (prefers-reduced-motion: reduce){
  .cover-tapa{transition:none;}
  .card:hover .cover-tapa{transform:none;}
}

/* La opcion "Tarjeta" estuvo oculta mientras no habia pasarela real: con
   Culqi solo habia clave publica de prueba, asi que el cliente veria el
   formulario y el cobro fallaria al final. Ya no aplica: Izipay esta
   conectado, con sus cuatro claves en Secret Manager, el formulario de
   Krypton renderiza y crearSesionPagoIzipay devuelve un formToken real.
   Se retira la regla que la ocultaba. */

/* ═══════════════════════════════════════════════════════════
   NOSOTROS Y RESEÑAS · versión compacta
   Ambas secciones ocupaban demasiada pantalla para el peso real
   que tienen en la página (no son la venta, son contexto).
   ═══════════════════════════════════════════════════════════ */
.about{padding:40px 22px 34px;}
.about-t{margin-bottom:26px;}
.a-tag{margin-bottom:9px;}
.a-h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.6rem;}
.a-p{font-size:.87rem;line-height:1.6;}
.a-soc{margin-top:1rem;}
.a-soc a{padding:5px 13px;font-size:.73rem;}
.ab-panel{padding-top:20px;}
.ab-lista{gap:16px;margin-bottom:18px;}
.ab-lista li{font-size:.79rem;line-height:1.45;}
.ab-lista li::before{margin-bottom:8px;width:5px;height:5px;}
.ab-lista b{font-size:.9rem;margin-bottom:2px;}
.ab-panel .a-stats{gap:32px;padding-top:14px;}
.ab-panel .a-num{font-size:1.5rem;}
.ab-panel .a-lbl{font-size:.66rem;}

.resenas-section{padding:2.4rem 1.5rem;}
.resenas-head{margin-bottom:1.5rem;}
.resenas-tag{font-size:.6rem;padding:0;margin-bottom:8px;}
.resenas-h2{font-size:clamp(1.4rem,2.6vw,1.7rem);margin-bottom:.3rem;}
.resenas-sub{font-size:.82rem;}
.resenas-grid{gap:.8rem;margin-bottom:1.6rem;}
.resena-card{padding:1rem 1rem;gap:.35rem;}
.resena-estrellas{font-size:.92rem;}
.resena-texto{font-size:.83rem;line-height:1.55;}
.resena-nombre{font-size:.74rem;}
.resena-form-wrap{padding:1.5rem 1.4rem;max-width:460px;}
.resena-form-title{font-size:1.05rem;margin-bottom:1rem;}
.resena-stars-row{margin-bottom:.9rem;}
.resena-stars-row span{font-size:1.5rem;}
.resena-inp{padding:.55rem .8rem;margin-bottom:.6rem;font-size:.84rem;}
.resena-btn{padding:.65rem;font-size:.84rem;}

@media(max-width:820px){
  .about{padding:30px 18px 26px;}
  .resenas-section{padding:1.8rem 1.2rem;}
}

/* ═══════════════════════════════════════════════════════════
   ESTANTES DE DESCUBRIMIENTO · Ofertas / Novedades
   Filas horizontales arriba de la rejilla, visibles solo sin
   filtros activos. Reutilizan la misma tarjeta .card de la
   rejilla, solo cambia el contenedor: flex+scroll en vez de grid.
   ═══════════════════════════════════════════════════════════ */
.estantes{display:none;margin-bottom:8px;}
.estante{margin-bottom:30px;}
.estante-cab{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);
}
.estante-tit{
  font-family:var(--serif);font-weight:600;font-size:1.15rem;
  color:var(--ink);letter-spacing:.01em;margin:0;
}
/* "Ver todos" aplica el mismo filtro que los chips de arriba. */
.estante-ver{
  flex:none;background:none;border:0;cursor:pointer;padding:2px 0;
  font-family:inherit;font-size:.86rem;font-weight:600;color:var(--rust);
  border-bottom:1px solid transparent;transition:border-color .15s;
}
.estante-ver:hover{border-bottom-color:var(--rust);}
.estante-ver:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:3px;}

.estante-fila{
  display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--border-dark) transparent;
}
.estante-fila::-webkit-scrollbar{height:6px;}
.estante-fila::-webkit-scrollbar-thumb{background:var(--border-dark);border-radius:99px;}
.estante-fila::-webkit-scrollbar-track{background:transparent;}

/* Dentro de una fila, la tarjeta necesita un ancho propio: en la
   rejilla lo hereda de grid-template-columns, aquí no hay grid. */
.estante-fila > .card{
  flex:0 0 178px;scroll-snap-align:start;
}
@media(min-width:1100px){
  .estante-fila > .card{flex-basis:196px;}
}
@media(max-width:620px){
  .estante-fila > .card{flex-basis:146px;}
  .estante-fila{gap:12px;}
  .estante-tit{font-size:1.02rem;}
  .estante-cab{margin-bottom:11px;}
  .estante-ver{font-size:.8rem;}
}

/* ═══════════════════════════════════════════════════════════
   GARANTÍAS · SUSCRIPCIÓN · MEDIOS DE PAGO
   Estructura tomada de las librerías de referencia (banda de
   promesas antes del pie, bloque de suscripción y fila de medios
   de pago), traducida al lenguaje cosmos: sin cajas corporativas,
   iconos en órbita y filetes de constelación.
   ═══════════════════════════════════════════════════════════ */
.garantias{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(27,36,80,.28),transparent);
  padding:34px 2rem;
}
.garantias-in{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
}
.gtia{text-align:center;}
.gtia-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(232,180,92,.20),rgba(27,36,80,.55));
  border:1px solid var(--border-dark);color:var(--gold);
  box-shadow:0 0 18px rgba(232,180,92,.10);
}
.gtia-ico svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.gtia h3{
  font-family:var(--sans);font-size:.84rem;font-weight:700;
  letter-spacing:.04em;color:var(--ink);margin:0 0 5px;
}
.gtia p{font-family:var(--sans);font-size:.76rem;color:var(--muted);margin:0;line-height:1.6;}

/* ── Suscripción ─────────────────────────────────────────── */
.susc{
  max-width:1000px;margin:0 auto 3rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;
  flex-wrap:wrap;
  padding:26px 32px;border:1px solid var(--border);border-radius:16px;
  background:linear-gradient(135deg,rgba(27,36,80,.55),rgba(21,29,59,.35));
}
.susc-txt h3{
  font-family:var(--serif);font-weight:400;font-size:1.42rem;
  color:var(--ink);margin:0 0 5px;letter-spacing:.02em;
}
.susc-txt p{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin:0;}
.susc-btn{
  flex-shrink:0;display:inline-block;text-decoration:none;white-space:nowrap;
  padding:12px 24px;border-radius:var(--radius-pill);
  background:var(--gold);color:#1a1428;
  font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.03em;
  transition:filter .2s,box-shadow .2s;
}
.susc-btn:hover{filter:brightness(1.08);box-shadow:0 0 22px rgba(232,180,92,.28);}

/* ── Medios de pago ──────────────────────────────────────── */
.pagos{text-align:center;margin:0 auto 2.2rem;max-width:1100px;}
.pagos-tit{
  display:block;font-family:var(--sans);font-size:.63rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--muted2);margin-bottom:.9rem;
}
.pagos-row{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;}
.pago-chip{
  padding:7px 15px;border:1px solid var(--border);border-radius:var(--radius-pill);
  background:rgba(27,36,80,.4);
  font-family:var(--sans);font-size:.76rem;color:var(--ink2);letter-spacing:.02em;
}

@media(max-width:900px){
  .garantias-in{grid-template-columns:repeat(2,1fr);gap:26px;}
}
@media(max-width:560px){
  .garantias{padding:26px 1.2rem;}
  .garantias-in{grid-template-columns:1fr;gap:22px;}
  .susc{flex-direction:column;text-align:center;padding:24px 20px;}
  .susc-btn{width:100%;text-align:center;}
}

/* ── BARRA DE SERVICIO (franja superior) ──────────────────── */
/* Va por encima del nav sticky, así que se desplaza con la página:
   no compite con la cabecera cuando el visitante baja. */
.servicio{
  background:var(--espacio);
  border-bottom:1px solid var(--border);
  font-family:var(--sans);font-size:.73rem;
}
.servicio-in{
  max-width:1400px;margin:0 auto;padding:7px 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.servicio-envio{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--muted);letter-spacing:.03em;
}
.servicio-envio .ico{fill:none;stroke:var(--sky);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.servicio-links{display:inline-flex;align-items:center;gap:9px;}
.servicio-links a{color:var(--muted);text-decoration:none;transition:color .18s;}
.servicio-links a:hover{color:var(--gold);}
.servicio-sep{color:var(--border-dark);}
@media(max-width:720px){
  .servicio-in{padding:6px 1rem;justify-content:center;}
  .servicio-links{display:none;}
  .servicio-envio{font-size:.7rem;}
}

/* ═══════════════════════════════════════════════════════════
   AJUSTE FINAL · ficha compacta, pie en columnas, reseñas breves
   Las librerías de referencia muestran muchos títulos por pantalla
   con fichas bajas y un pie repartido en columnas. Esta capa
   comprime lo que sobraba sin tocar ninguna función.
   ═══════════════════════════════════════════════════════════ */

/* ── 1 · TARJETA DE LIBRO MÁS BAJA ───────────────────────── */
/* La portada 2/3 y los espacios generosos hacían una ficha muy
   alta: obligaba a rodar la pantalla para ver dos libros. */
.grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;}
.card .cover{aspect-ratio:3/4;}
.card .info{padding:10px 11px 12px;}
.imeta{gap:6px;margin-bottom:5px;}
.card .ribbon{padding:1px 7px;font-size:.75rem;letter-spacing:.06em;}
.icat{font-size:.75rem;letter-spacing:.06em;}
.ititle{font-size:.95rem;line-height:1.2;margin:0 0 2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.iauthor{font-size:.78rem;margin-bottom:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ifoot{padding-top:7px;gap:6px;}
.iprice{font-size:1.18rem;}
.iprice-c{font-size:.78rem;}
.iprice-old{font-size:.7rem;}
.iacciones{margin-top:8px;gap:6px;}
.iadd{padding:11px 10px;font-size:.76rem;}   /* 40px de alto: el pulgar falla con 32 */
.ilupa{width:40px;}
.card-wl{width:26px;height:26px;top:7px;right:7px;}
.card-wl svg{width:14px;height:14px;}
/* El corazón se ve de 26px, pero se pulsa en 44: el ::after extiende la
   zona sensible sin agrandar el dibujo ni tapar la portada. */
.card-wl::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
}
/* la fila de estantes sigue el mismo ancho que la rejilla */
.estante-fila > .card{flex:0 0 168px;}
@media(min-width:1100px){ .estante-fila > .card{flex-basis:176px;} }
@media(max-width:620px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:11px;}
  .estante-fila > .card{flex-basis:142px;}
  .ititle{font-size:.88rem;}
  .iprice{font-size:1.05rem;}
}

/* ── 2 · PIE EN COLUMNAS ─────────────────────────────────── */
/* Vuelve a repartirse en columnas como en las referencias, pero
   con la marca presidiendo a la izquierda y filetes de nebulosa
   en vez de la rejilla corporativa de la otra tienda. */
.fg{
  display:grid;
  grid-template-columns:1.6fr repeat(4,1fr);
  gap:2.4rem;
  max-width:1200px;margin:0 auto 2.6rem;
  text-align:left;
}
.fb{margin-bottom:0;}
.fb h2{font-size:1.55rem;}
.fb p{margin:.6rem 0 0;max-width:34ch;font-size:.85rem;}
.fc{display:block;}
.fc h3{
  display:block;margin:0 0 .9rem;
  font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  padding-bottom:.55rem;position:relative;
}
.fc h3::after{
  content:'';position:absolute;left:0;bottom:0;width:26px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.fc a{
  display:block;margin:0 0 .6rem;
  font-family:var(--sans);font-size:.82rem;color:var(--ink2);
  transition:color .18s,transform .18s;
}
.fc a:hover{color:var(--gold);transform:translateX(3px);}
.pagos{text-align:left;max-width:1200px;padding-top:1.6rem;border-top:1px solid var(--border);}
.pagos-row{justify-content:flex-start;}
@media(max-width:1000px){
  .fg{grid-template-columns:1fr 1fr;gap:2rem;}
  .fb{grid-column:1/-1;}
}
@media(max-width:560px){
  .fg{grid-template-columns:1fr;gap:1.6rem;text-align:center;}
  .fb p{margin-inline:auto;}
  .fc h3::after{left:50%;transform:translateX(-50%);}
  .fc a:hover{transform:none;}
  .pagos{text-align:center;}
  .pagos-row{justify-content:center;}
}

/* ── 3 · RESEÑAS BREVES Y CON MOVIMIENTO ─────────────────── */
.resenas-section{padding:2.2rem 1.5rem 2.6rem;}
.resenas-head{margin-bottom:1.4rem;}
.resenas-h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;margin:0 0 .4rem;}
.resenas-h2 br{display:none;}       /* el título cabe en una línea */
.resenas-h2 em{font-style:normal;}
.resenas-sub{font-size:.85rem;margin:0;}
.resenas-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem;margin-bottom:1.5rem;}

/* Estado vacío: ahora lleva ícono + título + subtítulo (antes una
   sola línea en una píldora se veía perdida en la sección). */
/* Antes: un rectangulo punteado de 192px de alto para decir que no hay nada,
   justo debajo de tres tarjetas que ya explican por que dejar una resena y
   justo encima del formulario para dejarla. Tres veces el mismo mensaje, y el
   del medio ocupando mas que los otros dos. Se queda en una linea. */
.resenas-empty{
  grid-column:1/-1;
  padding:.2rem 1rem 1.6rem;border:none;background:transparent;
  font-family:var(--sans);font-size:.84rem;color:var(--muted);
  text-align:center;
}
.resenas-empty-ico{font-size:1.5rem;margin-bottom:.35rem;}
.resenas-empty-titulo{font-size:1rem;margin:0 0 .2rem;}
.resenas-empty-sub{font-size:.8rem;}

/* Tarjeta de reseña: aparece flotando desde abajo, escalonada */
.resena-card{
  background:linear-gradient(150deg,rgba(27,36,80,.5),rgba(21,29,59,.3));
  border:1px solid var(--border);border-radius:12px;
  padding:1rem 1.1rem;position:relative;overflow:hidden;
  animation:resenaEntra .55s cubic-bezier(.2,.8,.3,1) backwards;
  transition:transform .28s,border-color .28s,box-shadow .28s;
}
.resena-card:nth-child(1){animation-delay:.04s;}
.resena-card:nth-child(2){animation-delay:.12s;}
.resena-card:nth-child(3){animation-delay:.2s;}
.resena-card:nth-child(4){animation-delay:.28s;}
.resena-card:nth-child(n+5){animation-delay:.34s;}
.resena-card:hover{
  transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 22px rgba(232,180,92,.14);
}
/* destello que cruza la tarjeta al pasar el cursor */
.resena-card::after{
  content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(232,180,92,.09),transparent);
  transition:left .65s ease;pointer-events:none;
}
.resena-card:hover::after{left:120%;}
.resena-estrellas{color:var(--gold);font-size:.9rem;letter-spacing:.1em;margin-bottom:.5rem;}
.resena-texto{
  font-family:var(--serif);font-size:.9rem;line-height:1.55;color:var(--ink2);
  margin:0 0 .7rem;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.resena-nombre{font-family:var(--sans);font-size:.74rem;color:var(--muted);letter-spacing:.04em;}

@keyframes resenaEntra{
  from{opacity:0;transform:translateY(16px) scale(.98);}
  to{opacity:1;transform:none;}
}

/* Las estrellas del formulario laten suavemente hasta que se puntúa */
.resena-stars-row span{transition:transform .18s,color .18s;}
.resena-stars-row span:hover{transform:scale(1.22);}
.resena-form-wrap{padding:1.3rem 1.3rem 1.4rem;max-width:520px;}
.resena-form-title{margin-bottom:.8rem;font-size:.92rem;}
.resena-inp{margin-bottom:.6rem;}
.resena-textarea{min-height:76px;}

@media(prefers-reduced-motion:reduce){
  .resena-card{animation:none;}
  .resena-card::after{display:none;}
}

/* Autor y precio en una sola línea cada uno: eran las dos piezas
   que seguían estirando la ficha a lo alto. */
.iauthor{line-height:1.3;padding:0;}
.ifoot{align-items:baseline;flex-wrap:nowrap;}
.iprice-wrap{flex-direction:row;align-items:baseline;gap:7px;flex-wrap:wrap;}
.iprice-old{line-height:1.2;}
/* El precio de oferta no cabe en una línea en fichas estrechas:
   se apila, pero apretado (antes ocupaba 58px, ahora ~38). */
.iprice-wrap{flex-direction:column;gap:0;flex-wrap:nowrap;align-items:flex-start;}
.iprice-old{font-size:.68rem;line-height:1.15;}
.iprice{font-size:1.08rem;line-height:1.2;}
.iprice-badge{font-size:.58rem;padding:1px 5px;margin-left:3px;}
/* al ocultar el <br> del título hacía falta reponer el espacio */
.resenas-h2 em::before{content:" ";}

/* ── Categorías: estantería completa a la vista ───────────── */
/* Las que ya tienen libros muestran su número; las vacías quedan
   atenuadas pero visibles, para que se vea el alcance de la tienda. */
.mando .cat-chip[data-n]:not([data-n=""])::after{
  content:attr(data-n);
  margin-left:6px;font-size:.68rem;font-weight:600;
  color:var(--muted);opacity:.85;
}
.mando .cat-chip.active[data-n]:not([data-n=""])::after{color:inherit;opacity:.7;}
.mando .cat-chip.cat-vacia{
  opacity:.42;border-style:dashed;border-color:var(--border);
}
.mando .cat-chip.cat-vacia:hover{opacity:.7;border-style:solid;}

/* ── Enlace propio por libro ──────────────────────────────── */
/* El título de la ficha es ahora un enlace real: se puede abrir en
   pestaña nueva, copiar la dirección y lo puede indexar Google. */
.ititle-link{color:inherit;text-decoration:none;transition:color .18s;}
.ititle-link:hover{color:var(--gold);}
.ititle-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px;}

/* Botón de compartir dentro de la ficha del libro */
.bdl-btn-link{
  padding:12px;background:transparent;color:var(--ink2);
  border:1px solid var(--border-dark);border-radius:2px;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.bdl-btn-link:hover{border-color:var(--sky);color:var(--sky);}

/* ═══════════════════════════════════════════════════════════
   FICHA DE LIBRO COMO PÁGINA PROPIA
   Deja de ser una ventana emergente sobre el catálogo: pasa a
   ocupar la pantalla como una página con su propia dirección,
   igual que en las librerías grandes, pero en clave cosmos.
   ═══════════════════════════════════════════════════════════ */
.bdl-bg{
  position:static;inset:auto;background:transparent;z-index:auto;
  display:none;padding:0;overflow:visible;
}
.bdl-bg.open{display:block;}
.bdl{
  background:transparent;border:none;box-shadow:none;border-radius:0;
  max-width:1180px;margin:0 auto;padding:1.6rem 2rem 3rem;
  animation:bdlPagina .4s cubic-bezier(.2,.8,.3,1);
}
@keyframes bdlPagina{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* Al ver un libro, el resto de la tienda se aparta */
body.viendo-libro .catalog,
body.viendo-libro #universos-section,
body.viendo-libro .about,
body.viendo-libro .resenas-section,
body.viendo-libro .garantias{display:none!important;}

/* Migas y botón de volver */
.bdl-migas{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-family:var(--sans);font-size:.76rem;color:var(--muted);margin-bottom:.9rem;
}
.bdl-migas a{color:var(--muted);text-decoration:none;transition:color .16s;}
.bdl-migas a:hover{color:var(--gold);}
.bdl-migas-sep{color:var(--border-dark);}
.bdl-migas-act{color:var(--gold);}
.bdl-volver{
  background:none;border:none;cursor:pointer;padding:0;margin-bottom:1.4rem;
  font-family:var(--sans);font-size:.8rem;color:var(--sky);letter-spacing:.03em;
  transition:transform .16s;
}
.bdl-volver:hover{transform:translateX(-3px);}

/* Dos columnas, la portada en su propio panel */
.bdl-top{
  grid-template-columns:360px 1fr;gap:2.6rem;align-items:start;
  background:transparent;
}
/* El recuadro de envio vive ahora dentro de esta columna, bajo la portada. */
.bdl-gallery .bdl-envio{
  margin-top:1.4rem;padding-top:1.2rem;
  border-top:1px solid var(--border);
}
.bdl-gallery{
  background:linear-gradient(150deg,rgba(27,36,80,.5),rgba(21,29,59,.3));
  border:1px solid var(--border);border-radius:14px;padding:1.4rem;
  /* Con las pestanas dentro de la columna derecha, esa columna es mucho mas
     larga que la portada. Se queda fija a la vista mientras se lee, en vez
     de dejar una franja vacia al lado del texto. */
  position:sticky;top:96px;
}
@media(max-width:900px){ .bdl-gallery{position:static;} }
.bdl-info{padding:0;}
.bdl-title{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.15;margin:.3rem 0 .4rem;}

/* Pestañas */
.bdl-tabs{
  display:flex;gap:2px;margin:2rem 0 0;
  border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.bdl-tab{
  background:none;border:none;cursor:pointer;
  padding:12px 20px;margin-bottom:-1px;
  font-family:var(--sans);font-size:.84rem;font-weight:600;letter-spacing:.02em;
  color:var(--muted);border-bottom:2px solid transparent;transition:.18s;
}
.bdl-tab:hover{color:var(--ink);}
.bdl-tab.act{color:var(--gold);border-bottom-color:var(--gold);}
.bdl-paneles{padding-top:1.6rem;}
.bdl-panel{display:none;animation:bdlPanel .3s ease;}
.bdl-panel.act{display:block;}
@keyframes bdlPanel{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* Tabla de detalles */
.bdl-tabla{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.86rem;}
.bdl-tabla tr{border-bottom:1px solid var(--border);}
.bdl-tabla tr:last-child{border-bottom:none;}
.bdl-tabla th{
  text-align:left;padding:11px 16px 11px 0;width:190px;
  font-weight:500;color:var(--muted);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;vertical-align:top;
}
.bdl-tabla td{padding:11px 0;color:var(--ink2);}
.bdl-lista{margin:0;padding-left:1.1rem;font-family:var(--sans);font-size:.87rem;color:var(--ink2);line-height:1.8;}
.bdl-lista strong{color:var(--ink);}

@media(max-width:900px){
  .bdl{padding:1.2rem 1.2rem 2.4rem;}
  .bdl-top{grid-template-columns:1fr;gap:1.6rem;}
  .bdl-gallery{max-width:320px;margin:0 auto;}
  .bdl-tab{padding:11px 14px;font-size:.79rem;}
  .bdl-tabla th{width:120px;font-size:.66rem;padding-right:12px;}
}

/* Correcciones de la ficha al pasar de ventana a página */
/* El badge de estado heredaba el posicionamiento absoluto de .ribbon
   (pensado para la esquina de la tarjeta) y se despegaba a la esquina. */
.bdl-badge.ribbon{
  position:static;box-shadow:none;
  padding:4px 12px;border-radius:var(--radius-pill);
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
}
.bdl-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:.5rem 0 1.1rem;}
/* La columna de datos traía el fondo sólido del modal: como página
   quedaba un rectángulo suelto que se cortaba a media pantalla. */
.bdl-info{background:transparent;padding:0;}
.bdl-top{background:transparent;}

/* Los botones se estiraban a lo ancho de toda la columna (714px) y
   el espacio a la derecha del precio quedaba vacío. Se acota el
   bloque de compra y se aprovecha el hueco con las garantías. */
.bdl-info{max-width:520px;}
.bdl-actions{max-width:520px;}
.bdl-envio{
  display:grid;gap:10px;margin:1.3rem 0 1.1rem;max-width:520px;
  padding:1rem 1.1rem;border:1px solid var(--border);border-radius:12px;
  background:linear-gradient(150deg,rgba(27,36,80,.42),rgba(21,29,59,.24));
}
/* align-items:center y no flex-start: con flex-start el icono se pegaba
   arriba y el texto, al ocupar dos o tres lineas, dejaba el circulo 31px
   por encima de su centro. Cuanto mas estrecha la pantalla, mas se notaba. */
.bdl-envio-item{display:flex;align-items:center;gap:11px;}
.bdl-envio-ico{
  /* box-sizing para que el borde de 1px no lo haga de 34px */
  flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;color:var(--sky);
  background:rgba(95,212,196,.10);border:1px solid rgba(95,212,196,.28);
}
/* display:block es lo que centra de verdad el dibujo: un <svg> es un
   elemento EN LINEA, asi que se apoya en la linea base del texto y queda
   6px por encima del centro por mucho que el contenedor lo centre. */
.bdl-envio-ico svg{display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.bdl-envio-item strong{
  display:block;font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--ink);
}
/* Se acota al <span> del TEXTO. Antes era ".bdl-envio-item span" a secas y
   tambien alcanzaba al icono, que es un <span>: le ganaba en especificidad
   y le imponia display:block —anulando el grid que lo centraba— y ademas
   color:var(--muted), asi que los iconos salian grises en vez de
   aguamarina. Dos fallos con una sola causa. */
.bdl-envio-item div span{
  display:block;font-family:var(--sans);font-size:.75rem;color:var(--muted);margin-top:1px;line-height:1.5;
}
@media(max-width:900px){
  .bdl-info,.bdl-actions,.bdl-envio{max-width:none;}
}

/* Causa real del desbordamiento horizontal en móvil: los hijos de una
   rejilla no encogen por debajo de su contenido salvo que se les diga.
   Con esto la columna de resultados ya no empuja la página a lo ancho,
   y el <body> puede prescindir de overflow-x:hidden (que rompía sticky). */
.cuerpo > *{min-width:0;}
.resultados{min-width:0;}

/* Sustituye los onmouseover/onmouseout que estaban en el HTML del pie.
   El color era el mismo; ahora lo hace CSS y el marcado queda sin código. */
.pie a:hover, .pie-link:hover { color: #fff; }

/* Aviso de "estas en tus favoritos", encima de la rejilla. La unica salida
   estaba al final de la lista, detras de la paginacion. */
.wl-aviso{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin:0 0 1.4rem;padding:12px 18px;
  border:1px solid var(--gold);border-radius:10px;
  background:rgba(232,180,92,.08);
  font-family:var(--sans);font-size:.86rem;color:var(--ink);
}
.wl-aviso strong{color:var(--gold);}
.wl-aviso-btn{
  background:var(--gold);color:var(--espacio);border:none;
  padding:8px 18px;border-radius:20px;cursor:pointer;
  font-family:var(--sans);font-size:.8rem;font-weight:700;
}
.wl-aviso-btn:hover{filter:brightness(1.08);}

/* ── Libro en 3D de la ficha ────────────────────────────────────
   Ocupa el hueco que quedaba a la derecha: .bdl-info esta limitada a 520px
   dentro de una columna de 714, asi que sobraban 194px de fondo estrellado.

   No pesa nada. La portada ya esta descargada —es la misma de la ficha—, el
   lomo y la contratapa son color plano, y no hay JavaScript: son cuatro divs
   con transform. Y solo existe mientras hay una ficha abierta, porque se
   genera al construirla.

   Debajo de 1280px no se muestra, y como nunca se muestra el navegador
   tampoco pide su imagen de fondo: en movil el coste es exactamente cero.
   Ahi el espacio hace falta para leer, no para adornar. */
.bdl-book3d{
  width:190px;height:280px;
  perspective:1300px;pointer-events:none;
  display:none;align-self:start;justify-self:center;
  position:sticky;top:110px;margin-top:3.2rem;
}
.bdl-book3d-in{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  /* Mas lento que el de las resenas para que no parezcan sincronizados. */
  animation:rbBalance 9s ease-in-out infinite;
}
@media(min-width:1280px){
  .bdl-top{grid-template-columns:360px minmax(0,1fr) 190px;}
  .bdl-info{max-width:none;}
  .bdl-book3d{display:block;}
}
@media(prefers-reduced-motion:reduce){
  .bdl-book3d-in{animation:none;transform:rotateX(-4deg) rotateY(22deg);}
}