/* ============================================================
   EL MÁGICO LIBRERO — sistema de diseño
   Tokens heredados del cierre de banner aprobado por el cliente
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root{
  --night-blue: #0e1a2e;
  --night-blue-deep: #08111f;
  --night-blue-soft: #16253d;
  --gold: #e8c77e;
  --gold-soft: #d9b866;
  --gold-dim: #b89a5f;
  --gold-bright: #f6e3ab;
  --cream: #f3e9d2;
  --glow: rgba(232,199,126,0.28);
  --line: rgba(232,199,126,0.16);
  --card-bg: rgba(20,32,53,0.55);
  --card-bg-strong: rgba(14,26,46,0.85);
  --shadow-deep: 0 20px 60px rgba(0,0,0,0.45);
  --ease-magic: cubic-bezier(.22,.85,.32,1.15);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  background: var(--night-blue-deep);
  color: var(--cream);
  font-family:'Cormorant Garamond', serif;
  font-size:20.5px;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}

img, video{ max-width:100%; display:block; }
video{ accent-color: var(--gold); }
a{ color:inherit; }
button{ font-family:inherit; }

.container{
  max-width: 1080px;
  margin:0 auto;
  padding: 0 24px;
}

/* ---------- Fondo mágico global: cielo + cocuyos ---------- */
.magic-sky{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 900px 500px at 18% -10%, rgba(232,199,126,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 10%, rgba(232,199,126,0.06), transparent 60%),
    linear-gradient(180deg, var(--night-blue-deep) 0%, var(--night-blue) 45%, var(--night-blue-deep) 100%);
}
.magic-sky::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, var(--cream) 45%, transparent 46%),
    radial-gradient(1px 1px at 22% 38%, var(--cream) 45%, transparent 46%),
    radial-gradient(1.5px 1.5px at 35% 8%, var(--cream) 45%, transparent 46%),
    radial-gradient(1px 1px at 55% 28%, var(--cream) 45%, transparent 46%),
    radial-gradient(1.5px 1.5px at 68% 60%, var(--cream) 45%, transparent 46%),
    radial-gradient(1px 1px at 80% 20%, var(--cream) 45%, transparent 46%),
    radial-gradient(1.5px 1.5px at 92% 45%, var(--cream) 45%, transparent 46%),
    radial-gradient(1px 1px at 4% 70%, var(--cream) 45%, transparent 46%),
    radial-gradient(1.5px 1.5px at 45% 82%, var(--cream) 45%, transparent 46%),
    radial-gradient(1px 1px at 88% 85%, var(--cream) 45%, transparent 46%);
  opacity:0.55;
}
#fireflies{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.firefly{
  position:absolute;
  width:5px; height:5px;
  border-radius:50%;
  background: radial-gradient(circle, var(--gold-bright) 0%, var(--gold) 45%, transparent 75%);
  box-shadow: 0 0 8px 2px var(--glow);
  opacity:0;
  animation-name: firefly-drift, firefly-blink;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}
@keyframes firefly-drift{
  0%   { transform: translate(0,0); }
  25%  { transform: translate(18px,-24px); }
  50%  { transform: translate(-10px,-42px); }
  75%  { transform: translate(-26px,-14px); }
  100% { transform: translate(0,0); }
}
@keyframes firefly-blink{
  0%,100%{ opacity:0; }
  15%{ opacity:.9; }
  40%{ opacity:.25; }
  60%{ opacity:.85; }
  85%{ opacity:.15; }
}

/* ---------- Header / navegación ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 16px;
  padding:16px 24px;
  background: linear-gradient(180deg, rgba(8,17,31,0.92) 0%, rgba(8,17,31,0.78) 80%, transparent 100%);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Playfair Display', serif;
  font-style:italic; font-weight:600;
  font-size: clamp(19px, 2.6vw, 25px);
  color: var(--gold);
  text-decoration:none;
  letter-spacing:.2px;
  white-space:nowrap;
}
.brand svg{ width:28px; height:28px; flex-shrink:0; }

.nav-tabs{
  display:flex; gap:6px;
  background: rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
}
.nav-tabs button{
  border:none; background:transparent; cursor:pointer;
  color: var(--cream); opacity:.72;
  font-family:'Cormorant Garamond', serif;
  font-size:16px; letter-spacing:.4px;
  padding:8px 18px; border-radius:999px;
  transition: all .35s var(--ease-magic);
}
.nav-tabs button.active{
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-dim));
  color: var(--night-blue-deep);
  opacity:1;
  font-weight:600;
  box-shadow: 0 4px 16px var(--glow);
}
.nav-tabs button:not(.active):hover{ opacity:1; color: var(--gold); }

.nav-links{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.nav-links button{
  background:none; border:none; cursor:pointer;
  color:var(--cream); opacity:.72;
  font-family:'Cormorant Garamond', serif; font-size:15.5px; letter-spacing:.3px;
  padding:4px 0; transition: all .3s ease;
}
.nav-links button:hover{ opacity:1; color:var(--gold); }
.btn-nav-wa{ padding:9px 20px; font-size:14.5px; white-space:nowrap; }

.header-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

.lang-toggle{
  display:flex; align-items:center;
  border:1px solid var(--line); border-radius:999px;
  padding:3px; gap:2px;
  background: rgba(255,255,255,0.03);
}
.lang-toggle button{
  border:none; background:transparent; cursor:pointer;
  color:var(--cream); opacity:.6;
  font-size:13px; letter-spacing:.6px; font-weight:600;
  padding:6px 11px; border-radius:999px;
  transition: all .3s ease;
}
.lang-toggle button.active{
  background: var(--gold); color: var(--night-blue-deep); opacity:1;
}

/* ---------- Vistas ---------- */
.view{ position:relative; z-index:2; }
.view[hidden]{ display:none; }
.view-enter{ animation: view-fade .6s var(--ease-magic); }
@keyframes view-fade{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Secciones genéricas ---------- */
section{ position:relative; padding: 64px 0; }
.section-tight{ padding: 40px 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--gold-dim);
  font-size:13px; letter-spacing:3px; text-transform:uppercase;
  margin-bottom:14px;
}
.eyebrow::before, .eyebrow::after{
  content:""; height:1px; width:30px;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.eyebrow::after{ background: linear-gradient(90deg, var(--gold-dim), transparent); }

h1,h2,h3{ font-family:'Playfair Display', serif; font-weight:600; margin:0 0 .5em; color:var(--gold-bright); }
h2{ font-size: clamp(26px,4vw,38px); font-style:italic; }
h3{ font-size: clamp(19px,2.4vw,23px); font-style:italic; }

.lead{
  font-size: clamp(17px,2vw,20px);
  color: var(--cream); opacity:.85;
  max-width:640px;
}

.divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin: 8px 0 28px; color: var(--gold-dim);
}
.divider span{ font-size:20px; line-height:1; transform:translateY(-1px); }
.divider::before,.divider::after{ content:""; height:1px; width:64px; background:linear-gradient(90deg,transparent,var(--gold-dim)); }
.divider::after{ background:linear-gradient(90deg,var(--gold-dim),transparent); }

/* ---------- Video banners (sin barras negras: aspect-ratio + cover) ---------- */
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  background: var(--night-blue-deep);
  box-shadow: var(--shadow-deep);
}
.video-frame.portrait{ aspect-ratio: 9 / 16; max-width:380px; margin:0 auto; border-radius:18px; }
.video-frame video{
  width:100%; height:100%;
  object-fit:cover;
  background: var(--night-blue-deep);
  display:block;
}
.video-frame .poster-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: opacity .5s ease;
}
.video-frame.playing .poster-img{ opacity:0; pointer-events:none; }
.play-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
  background: linear-gradient(180deg, rgba(8,17,31,0.15), rgba(8,17,31,0.55));
  cursor:pointer;
  border:none; width:100%; padding:0;
  transition: opacity .4s ease;
}
.video-frame.playing .play-overlay{ opacity:0; pointer-events:none; }
.play-btn{
  width:68px; height:68px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-dim));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 6px rgba(232,199,126,0.12), 0 10px 30px rgba(0,0,0,0.5);
  animation: pulse-ring 2.6s ease-in-out infinite;
}
.play-btn svg{ width:24px; height:24px; margin-left:3px; fill:var(--night-blue-deep); }
@keyframes pulse-ring{
  0%,100%{ box-shadow: 0 0 0 6px rgba(232,199,126,0.12), 0 10px 30px rgba(0,0,0,0.5); }
  50%{ box-shadow: 0 0 0 14px rgba(232,199,126,0.02), 0 10px 30px rgba(0,0,0,0.5); }
}
.play-caption{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  color: var(--cream); font-size:15px; letter-spacing:.5px;
  background: rgba(8,17,31,0.5); padding:4px 14px; border-radius:999px;
  border:1px solid var(--line);
}

/* ---------- Sello para tapar la marca de agua de los videos ---------- */
.video-badge{
  position:absolute; z-index:6;
  width:9.5%; max-width:82px; height:auto; aspect-ratio:1/1;
  right:4%; bottom:9%;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.6));
  pointer-events:none;
}
@media (max-width:640px){
  .video-badge{ width:14%; right:3%; bottom:8%; }
}

/* ---------- Botón dorado genérico ---------- */
.btn-gold{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Cormorant Garamond', serif; font-weight:600; font-size:16px; letter-spacing:.4px;
  color: var(--night-blue-deep);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-soft));
  padding:12px 26px; border-radius:999px;
  text-decoration:none; border:none; cursor:pointer;
  box-shadow: 0 6px 20px rgba(232,199,126,0.25);
  transition: transform .3s var(--ease-magic), box-shadow .3s ease;
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232,199,126,0.38); }
.btn-outline{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Cormorant Garamond', serif; font-size:15px; letter-spacing:.4px;
  color: var(--gold); background:transparent;
  padding:10px 22px; border-radius:999px; border:1px solid var(--gold-dim);
  text-decoration:none; cursor:pointer; transition: all .3s ease;
}
.btn-outline:hover{ background: rgba(232,199,126,0.08); border-color:var(--gold); }

/* ---------- Hero ---------- */
.hero-section{ position:relative; overflow:hidden; }
.audio-toggle{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,0.04);
  color:var(--gold); display:flex; align-items:center; justify-content:center;
  cursor:pointer; margin:22px auto 0; transition: all .3s ease;
}
.audio-toggle:hover{ border-color:var(--gold-dim); background:rgba(232,199,126,0.08); }
.audio-toggle.muted{ color:var(--cream); opacity:.55; }
.audio-toggle svg{ width:18px; height:18px; }

.hero-flanked{
  display:grid; grid-template-columns: 96px 1fr 96px; align-items:center; gap:20px;
  margin-top:32px;
}
.hero-side{ width:100%; height:auto; opacity:.92; filter: drop-shadow(0 8px 20px rgba(0,0,0,.4)); }
.hero-copy{ text-align:center; }
.hero-lead{
  font-size: clamp(17px,2vw,20px); color:var(--cream); opacity:.88;
  max-width:640px; margin:0 auto 26px; line-height:1.6;
}
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:14px 18px; justify-content:center; align-items:center; margin-bottom:22px; }
.hero-cta-row button.btn-gold{ font-family:inherit; }
.btn-text{
  background:none; border:none; color:var(--gold-soft);
  font-family:'Cormorant Garamond', serif; font-size:15px;
  text-decoration:underline; text-underline-offset:4px; cursor:pointer;
}
.btn-text:hover{ color:var(--gold); }
.hero-stats{
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:center;
  font-size:14px; color:var(--cream); opacity:.68; letter-spacing:.2px;
}
@media (max-width: 820px){
  .hero-flanked{ grid-template-columns:1fr; }
  .hero-side{ display:none; }
}

.alice-runner{
  position:absolute; bottom:3%; left:0; width:120px; height:auto;
  opacity:0; pointer-events:none; z-index:3;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
  animation: alice-run 15s ease-in-out infinite;
  animation-delay: 2.5s;
}
@keyframes alice-run{
  0%{ transform: translateX(-160px); opacity:0; }
  4%{ opacity:.95; }
  44%{ opacity:.95; }
  50%{ transform: translateX(100vw); opacity:0; }
  100%{ transform: translateX(100vw); opacity:0; }
}
@media (max-width:640px){ .alice-runner{ width:88px; } }

/* ---------- Cómo comprar ---------- */
.steps-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:36px; margin:36px 0 40px; text-align:center;
}
.step-num{
  width:44px; height:44px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dim));
  color:var(--night-blue-deep); font-family:'Playfair Display', serif;
  font-weight:600; font-style:italic; font-size:18px;
}
.step-card p{ color:var(--cream); opacity:.78; font-size:15.5px; }

/* ---------- Historia / texto de apertura ---------- */
.story-block{ text-align:center; max-width:680px; margin:0 auto; }
.story-block .quote{
  font-family:'Playfair Display', serif; font-style:italic; font-weight:600;
  font-size: clamp(21px,3.2vw,30px); color: var(--gold);
  text-shadow: 0 0 22px rgba(232,199,126,0.22);
  margin:0 0 16px;
}
.story-block .subquote{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size: clamp(16px,2vw,19px);
  color: var(--cream); opacity:.88; margin:0 0 24px; line-height:1.6;
}
.story-block .story-text{
  font-size: clamp(16px,1.8vw,18px); color:var(--cream); opacity:.78; line-height:1.8;
}

/* ---------- Escenas ilustradas (Alicia / Quijote) ---------- */
.scene{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:48px; align-items:center;
}
.scene.reverse{ grid-template-columns: 1fr 1.1fr; }
.scene.reverse .scene-art{ order:2; }
.scene-art{
  position:relative;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.45));
}
.scene-art svg{ width:100%; height:auto; }
.scene-text p{ color:var(--cream); opacity:.82; }
@media (max-width: 820px){
  .scene, .scene.reverse{ grid-template-columns:1fr; }
  .scene.reverse .scene-art{ order:0; }
}

/* ---------- Instagram card ---------- */
.insta-card{ text-align:center; }
.insta-link-row{ margin-top:20px; display:flex; justify-content:center; }

/* ---------- Footer ---------- */
.site-footer{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  padding: 48px 0 90px;
  text-align:center;
  color: var(--cream); opacity:.7;
  font-size:15px;
}
.site-footer .foot-brand{
  font-family:'Playfair Display', serif; font-style:italic; color:var(--gold); font-size:20px; margin-bottom:8px;
}
.site-footer a{ color: var(--gold-soft); text-decoration:none; border-bottom:1px solid transparent; }
.site-footer a:hover{ border-color: var(--gold-soft); }
.foot-meta{ margin-top:10px; font-size:13px; opacity:.65; }

/* ============================================================
   WhatsApp flotante con magia
   ============================================================ */
.whatsapp-fab{
  position:fixed; right:22px; bottom:22px; z-index:50;
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 35% 30%, #3ee089, #1fae63);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  text-decoration:none;
}
.whatsapp-fab svg{ width:30px; height:30px; fill:#fff; }
.wa-ring{
  position:absolute; inset:-8px; border-radius:50%;
  border:1.5px solid var(--gold-soft);
  opacity:0; animation: wa-pulse 3.2s ease-out infinite;
}
.wa-ring.r2{ animation-delay:1.1s; }
.wa-ring.r3{ animation-delay:2.2s; }
@keyframes wa-pulse{
  0%{ transform:scale(.85); opacity:.65; }
  100%{ transform:scale(1.55); opacity:0; }
}
.wa-sparkle{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background: var(--gold-bright); box-shadow:0 0 6px 2px var(--glow);
  animation: wa-orbit 3.6s linear infinite;
}
.wa-sparkle.s2{ animation-delay:1.2s; animation-duration:4.4s; }
.wa-sparkle.s3{ animation-delay:2.4s; animation-duration:2.8s; }
@keyframes wa-orbit{
  0%{ transform: rotate(0deg) translateX(34px) rotate(0deg) scale(.6); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ transform: rotate(360deg) translateX(34px) rotate(-360deg) scale(.9); opacity:0; }
}

/* ============================================================
   Ráfaga de libros mágicos al hacer clic
   ============================================================ */
#magic-burst-layer{ position:fixed; inset:0; z-index:60; pointer-events:none; }
.magic-book{
  position:absolute; width:22px; height:22px; opacity:0;
  will-change: transform, opacity;
}
.magic-book svg{ width:100%; height:100%; }
@keyframes book-pop{
  0%{ opacity:0; transform: translate(0,0) scale(.3) rotate(0deg); }
  12%{ opacity:1; }
  100%{ opacity:0; transform: translate(var(--bx), var(--by)) scale(1) rotate(var(--br)); }
}

/* ============================================================
   CATÁLOGO
   ============================================================ */
.catalog-hero{ text-align:center; padding-bottom:20px; position:relative; }
.wand-scene{ position:relative; height:120px; margin:0 auto 8px; max-width:420px; }
.wand-scene svg{ width:100%; height:100%; }

.catalog-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
  margin: 18px 0 34px;
}
.chip{
  border:1px solid var(--line); background:rgba(255,255,255,0.03);
  color:var(--cream); opacity:.75; font-size:14px; letter-spacing:.3px;
  padding:7px 16px; border-radius:999px; cursor:pointer; transition:all .25s ease;
}
.chip.active, .chip:hover{ opacity:1; border-color:var(--gold-dim); background:rgba(232,199,126,0.08); color:var(--gold); }

.book-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:22px; margin-top: 12px;
}
.book-card{
  background: var(--card-bg);
  border:1px solid var(--line);
  border-radius:16px; padding:22px;
  backdrop-filter: blur(3px);
  transition: transform .35s var(--ease-magic), border-color .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column; gap:12px;
}
.book-card:hover{ transform: translateY(-4px); border-color: var(--gold-dim); box-shadow: 0 16px 34px rgba(0,0,0,0.35); }
.book-top{ display:flex; gap:16px; align-items:flex-start; }
.book-cover{
  flex-shrink:0; width:76px; height:100px; border-radius:6px; overflow:hidden;
  background: var(--night-blue-soft); box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.book-cover img{ width:100%; height:100%; object-fit:cover; }
.book-cover img.cover-fallback{ object-fit:contain; padding:18px; opacity:.6; }
.book-heading{ flex:1; }
.book-num{ color:var(--gold-dim); font-size:13px; letter-spacing:1px; }
.book-title{ font-family:'Playfair Display', serif; font-style:italic; font-weight:600; color:var(--gold-bright); font-size:19px; line-height:1.25; margin:2px 0 4px; }
.book-credit{ font-size:14px; color:var(--cream); opacity:.65; }
.book-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.badge{ font-size:12.5px; letter-spacing:.3px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--cream); opacity:.8; }
.badge.price{ color: var(--night-blue-deep); background: var(--gold-soft); border-color:transparent; font-weight:600; opacity:1; }
.badge.soldout{ color:#f3a5a5; border-color:rgba(243,165,165,.4); }
.book-resumen{ font-size:15.5px; color:var(--cream); opacity:.85; line-height:1.65; }

.btn-wa-book{
  align-self:flex-start;
  background: linear-gradient(135deg,#3ee089,#1fae63) !important;
  color:#fff !important;
  padding:9px 18px; font-size:14.5px;
  box-shadow: 0 4px 14px rgba(31,174,99,.3);
}
.btn-wa-book svg{ fill:#fff; }
.btn-wa-book:hover{ box-shadow: 0 8px 20px rgba(31,174,99,.4); }

.tech-toggle{
  align-self:flex-start;
  background:none; border:none; color:var(--gold-soft); cursor:pointer;
  font-family:'Cormorant Garamond', serif; font-size:14.5px; letter-spacing:.4px;
  display:flex; align-items:center; gap:6px; padding:0;
}
.tech-toggle svg{ width:12px; height:12px; transition: transform .3s ease; }
.tech-toggle.open svg{ transform: rotate(180deg); }
.tech-panel{
  max-height:0; overflow:hidden; transition: max-height .4s var(--ease-magic);
  font-size:14px; color:var(--cream); opacity:.75;
}
.tech-panel .tech-inner{ padding-top:10px; border-top:1px dashed var(--line); margin-top:2px; }
.tech-row{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; }
.tech-row b{ color:var(--gold-dim); font-weight:600; opacity:.9; }
.tech-note{ font-style:italic; opacity:.7; }

.catalog-foot-note{ text-align:center; margin-top:44px; color:var(--cream); opacity:.65; font-size:14.5px; }

/* ---------- Libros voladores decorativos (fondo del catálogo) ---------- */
#flying-books{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.flying-book-deco{ position:absolute; width:26px; opacity:.5; animation: float-book 14s ease-in-out infinite; }
.flying-book-deco svg{ width:100%; height:auto; }
@keyframes float-book{
  0%{ transform: translate(0,0) rotate(-6deg); }
  50%{ transform: translate(24px,-40px) rotate(8deg); }
  100%{ transform: translate(0,0) rotate(-6deg); }
}

@keyframes spin-mill{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  .site-header{ padding:12px 16px; }
  .nav-tabs button{ padding:7px 12px; font-size:14.5px; }
  section{ padding:44px 0; }
  .whatsapp-fab{ right:14px; bottom:14px; width:54px; height:54px; }
}

/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ============================================================
   Cursor de varita mágica en toda la web
   ============================================================ */
body{ cursor: url('images/wand-cursor.svg') 32 10, auto; }
a, button, .chip, .tech-toggle, .play-overlay, .whatsapp-fab, [role="button"]{
  cursor: url('images/wand-cursor.svg') 32 10, pointer;
}
#wand-trail-layer{ position:fixed; inset:0; z-index:65; pointer-events:none; }
.wand-dust{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle, var(--gold-bright) 0%, var(--gold) 55%, transparent 75%);
  box-shadow: 0 0 8px 2px var(--glow);
  opacity:.9; will-change: transform, opacity;
  animation: wand-dust-fade 0.7s ease-out forwards;
}
@keyframes wand-dust-fade{
  0%{ opacity:.9; transform: scale(1) translateY(0); }
  100%{ opacity:0; transform: scale(.3) translateY(10px); }
}

/* ============================================================
   Lupa mágica (opcional, se activa desde el encabezado)
   ============================================================ */
.magnify-toggle{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,0.04);
  color:var(--gold); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .3s ease; flex-shrink:0;
}
.magnify-toggle:hover{ border-color:var(--gold-dim); background:rgba(232,199,126,0.08); }
.magnify-toggle.active{ background: linear-gradient(135deg,var(--gold-soft),var(--gold-dim)); color:var(--night-blue-deep); border-color:transparent; }
.magnify-toggle svg{ width:18px; height:18px; }

#magnify-lens{
  position:fixed; top:0; left:0; width:170px; height:170px;
  border-radius:50%; overflow:hidden; z-index:200;
  border:2.5px solid var(--gold); box-shadow:0 10px 34px rgba(0,0,0,.55), 0 0 0 5px rgba(232,199,126,.12);
  pointer-events:none; display:none; background:var(--night-blue-deep);
}
#magnify-lens.on{ display:block; }
#magnify-inner{ position:absolute; top:0; left:0; transform-origin:0 0; }
body.magnifying{ cursor:none; }
body.magnifying *{ cursor:none !important; }
body.magnifying #magnify-lens{ cursor:none; }