/* =========================================================
   REVISTA LAS S - 3D FLIPBOOK LUXURY EDITION
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --color-burgundy-deep: #14020d;
  --color-burgundy-rich: #2c051a;
  --color-gold-bright: #dfb76c;
  --color-gold-foil: #c59846;
    --font-title: 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 45%, #220517 0%, #11010a 60%, #050003 100%);
  color: #fff;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* --- Top Toolbar --- */
.reader-toolbar {
  width: 100%;
  height: 52px;
  flex-shrink: 0;
  background: rgba(18, 2, 12, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.toolbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toolbar-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.toolbar-brand-link:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.reader-logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.brand-issue {
  font-size: 0.75rem;
  color: var(--color-gold-bright);
  border-left: 1px solid rgba(255,255,255,0.2);
  padding-left: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.btn-tool {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(197, 152, 70, 0.3);
  color: #f0e6ea;
  padding: 0.38rem 0.85rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  position: relative;
}

.btn-tool:hover, .btn-tool.active {
  background: var(--color-gold-foil);
  color: var(--color-burgundy-deep);
  border-color: var(--color-gold-bright);
}

/* Intermittent / Pulsing Glowing Fullscreen Button —  premium */
.btn-fullscreen-pulse {
  background: linear-gradient(135deg, rgba(197, 152, 70, 0.25), rgba(67, 12, 42, 0.6));
  border: 1px solid var(--color-gold-bright) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(223, 183, 108, 0.4);
  animation: pulseGlow 2s infinite ease-in-out;
}

.btn-fullscreen-pulse:hover {
  background: linear-gradient(135deg, #c59846, #dfb76c) !important;
  color: #1a020f !important;
  animation: none;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffdb70;
  display: inline-block;
  animation: blinkDot 1.2s infinite ease-in-out;
  box-shadow: 0 0 6px #ffdb70;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 5px rgba(223, 183, 108, 0.3), inset 0 0 4px rgba(223, 183, 108, 0.2);
    border-color: rgba(223, 183, 108, 0.5);
  }
  50% {
    box-shadow: 0 0 18px rgba(223, 183, 108, 0.85), inset 0 0 8px rgba(223, 183, 108, 0.4);
    border-color: #ffe6a3;
  }
  100% {
    box-shadow: 0 0 5px rgba(223, 183, 108, 0.3), inset 0 0 4px rgba(223, 183, 108, 0.2);
    border-color: rgba(223, 183, 108, 0.5);
  }
}

@keyframes blinkDot {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.btn-tool-primary {
  background: linear-gradient(135deg, #c59846, #dfb76c);
  color: #1a020f;
  border: none;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(197, 152, 70, 0.4);
}

.btn-tool-primary:hover {
  background: linear-gradient(135deg, #dfb76c, #f7dfa7);
  transform: translateY(-1px);
}

/* --- ZOOM grupo bien visible --- */
.zoom-group{
  display:inline-flex;align-items:center;gap:.25rem;
  background:rgba(255,255,255,.08);border:1px solid rgba(223,186,109,.38);
  padding:.22rem .28rem;border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.btn-zoom{
  width:34px;height:30px;justify-content:center;padding:0;
  background:rgba(22,3,15,.9);border-color:rgba(223,186,109,.45);
  font-size:.95rem;
}
.btn-zoom:hover{background:var(--color-gold-foil);color:var(--color-burgundy-deep);border-color:var(--color-gold-bright)}
.zoom-label{
  min-width:48px;text-align:center;font-size:.8rem;font-weight:800;
  color:var(--color-gold-bright);letter-spacing:.5px;
  padding:0 .15rem;
}
.hide-sm{display:inline}
@media(max-width:900px){
  .zoom-group{padding:.18rem .22rem}
  .btn-zoom{width:32px;height:28px}
  .hide-sm{display:none}
  .zoom-label{min-width:42px;font-size:.76rem}
}
@media(max-width:768px){
  .reader-toolbar{height:48px;padding:0 .6rem;gap:.4rem}
  .reader-logo-img{height:28px;}
  .brand-issue{font-size:.62rem;padding-left:.5rem;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .toolbar-actions{gap:.3rem;}
  .btn-tool{padding:.32rem .55rem;font-size:.74rem;min-height:32px;}
  .btn-tool span:not(.pulse-dot){display:none}
  .zoom-group span.zoom-label{display:inline}
  .btn-zoom span{display:inline}
  .btn-zoom{width:32px;height:30px;}
  .zoom-label{min-width:38px;font-size:.74rem;}
}
@media(max-width:640px){
  .reader-toolbar{padding:0 .5rem;gap:.3rem;height:46px;}
  .toolbar-actions{gap:.25rem}
  .btn-tool{padding:.28rem .45rem;}
  .btn-tool span:not(.pulse-dot){display:none}
  .zoom-group{padding:.14rem .18rem;}
  .zoom-group span.zoom-label{display:inline}
  .btn-zoom span{display:inline}
  .flipbook-stage{padding:4px 6px;}
  .dock-container{height:44px;}
  .bottom-dock{padding:0 .6rem;gap:.5rem;height:34px;max-width:92vw;}
  .dock-counter{font-size:.72rem;min-width:76px;letter-spacing:.5px;}
  .dock-slider{width:90px;}
  .dock-btn{padding:.2rem .35rem;font-size:.9rem;min-width:32px;min-height:32px;}
  .thumbs-drawer{height:118px;bottom:44px;padding:0 .6rem;gap:.6rem;}
  .thumb-card{flex:0 0 60px;height:90px;}
  .thumb-img{height:68px;}
  .revista-wa-float{bottom:max(56px, env(safe-area-inset-bottom));right:max(10px, env(safe-area-inset-right));}
  .revista-wa-btn{width:48px;height:48px;font-size:22px;}
  .revista-wa-pulse{width:48px;height:48px;}
  @keyframes waPulsing{0%{width:48px;height:48px;opacity:.85}100%{width:100px;height:100px;opacity:0}}
}
@media(max-width:380px){
  .reader-toolbar .toolbar-brand{flex:1;min-width:0;}
  .brand-issue{display:none;}
  .zoom-label{min-width:34px;}
  .dock-slider{width:70px;}
}

/* --- 3D Flipbook Stage (Large, Centered, Full Spread) --- */
.flipbook-stage {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 6px 12px;
}
.flipbook-stage.zoomed{
  overflow:hidden;
  cursor:grab;
}
.flipbook-stage.zoomed:active{cursor:grabbing}
.flipbook-stage.zoomed .flipbook-center-box{
  cursor:grab;
}
.flipbook-stage.zoomed:active .flipbook-center-box{cursor:grabbing}
#flipbook.zoomed{
  transform-origin:center center;
  will-change:transform;
}

.stage-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(197, 152, 70, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.flipbook-center-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 1500px;
}

#flipbook {
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 120px rgba(0,0,0,0.7);
  border-radius: 4px;
}

.mag-page {
  background-color: #faf6f0;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.08);
}

.mag-page-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: #faf6f0;
}
#flipbook.is-landscape .mag-page-img{
  background: #12030d;
}

/* --- Bottom Control Dock --- */
.dock-container {
  width: 100%;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1000;
}

.bottom-dock {
  height: 36px;
  background: rgba(22, 3, 15, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 0 1rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 6px 25px rgba(0,0,0,0.75);
  color: #fff;
}

.dock-btn {
  background: none;
  border: none;
  color: #e0d0d6;
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.dock-btn:hover {
  color: var(--color-gold-bright);
  transform: scale(1.15);
}

.dock-counter {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-gold-bright);
  letter-spacing: 1px;
  min-width: 90px;
  text-align: center;
}

.dock-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 130px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.dock-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-gold-bright);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(229, 190, 117, 0.9);
}

/* --- Thumbnails Drawer --- */
.thumbs-drawer {
  position: fixed;
  bottom: 46px;
  left: 0;
  width: 100%;
  height: 135px;
  background: rgba(14, 2, 9, 0.98);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(212, 175, 55, 0.4);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: 0.85rem;
  overflow-x: auto;
  z-index: 2000;
  transform: translateY(190px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.85);
}

.thumbs-drawer.open {
  transform: translateY(0);
}

.thumb-card {
  flex: 0 0 70px;
  height: 105px;
  background: #25071a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3px;
  transition: all 0.2s ease;
}

.thumb-card:hover, .thumb-card.active {
  border-color: var(--color-gold-bright);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5);
}

.thumb-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 2px;
}

.thumb-num {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--color-gold-bright);
  text-align: center;
}

.btn-close-drawer {
  position: absolute;
  top: 6px;
  right: 12px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

/* --- WhatsApp Flotante Intermitente --- */
.revista-wa-float {
  position: fixed;
  bottom: 62px;
  right: 16px;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.revista-wa-btn {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #3b0923;
  color: var(--color-gold-bright);
  border: 1px solid rgba(223, 183, 108, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 8px 22px rgba(34,4,20,.45), 0 4px 12px rgba(0,0,0,.35);
  animation: waBlink 3.2s ease-in-out infinite;
  text-decoration: none;
}
.revista-wa-btn:hover { transform: scale(1.07); animation: none; background: #581639; border-color: #dfb76c; }
.revista-wa-btn i { position: relative; z-index: 2; }
.revista-wa-pulse {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(223, 183, 108, 0.65);
  pointer-events: none;
  animation: waPulsing 2.2s cubic-bezier(0.215,0.61,0.355,1) infinite;
}
.revista-wa-pulse-2 { animation-delay: .75s; }
.revista-wa-pulse-3 { animation-delay: 1.5s; }
@keyframes waPulsing {
  0% { width: 52px; height: 52px; opacity: .85; }
  100% { width: 112px; height: 112px; opacity: 0; }
}
@keyframes waBlink {
  0%,82%,100% { transform: scale(1); }
  86% { transform: scale(1.08); }
  90% { transform: scale(.96); }
  94% { transform: scale(1.06); }
}
.revista-wa-tip {
  background: #2a081c;
  color: #dfb76c;
  font-size: .78rem;
  font-weight: 600;
  padding: .4rem .8rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  border: 1px solid rgba(212, 175, 55, 0.35);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.revista-wa-float:hover .revista-wa-tip { opacity: 1; transform: translateX(0); }
@media (max-width: 640px) {
  .revista-wa-tip { display: none; }
  .revista-wa-float { bottom: 58px; right: 12px; }
}

/* Móvil — una sola página gigante */
#flipbook.is-mobile-single{
  box-shadow:0 18px 50px rgba(0,0,0,.85), 0 0 80px rgba(0,0,0,.6);
  border-radius:6px;
}
#flipbook.is-mobile-single .mag-page{
  box-shadow: inset 0 0 12px rgba(0,0,0,.06);
}
/* Móvil — flipbook centrado y safe-area */
@supports (height: 100dvh){
  html,body{height:100dvh;}
}
.reader-toolbar{padding-left:max(.6rem, env(safe-area-inset-left));padding-right:max(.6rem, env(safe-area-inset-right));}
.dock-container{padding-bottom:env(safe-area-inset-bottom);}
.flipbook-stage{padding-left:max(6px, env(safe-area-inset-left));padding-right:max(6px, env(safe-area-inset-right));}
@media(max-width:768px){
  #flipbook{max-width:94vw;}
  #flipbook.is-mobile-single{max-width:94vw;}
  .flipbook-stage{padding:8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));}
  .dock-container{height:42px;}
}
@media(max-width:640px){
  #flipbook{max-width:92vw;}
}

/* --- Print / PDF Export --- */
@media print {
  html, body {
    width: 210mm !important;
    height: auto !important;
    overflow: visible !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  
  .reader-toolbar, .dock-container, .thumbs-drawer, .stage-vignette {
    display: none !important;
  }
  
  .flipbook-stage, .flipbook-center-box, #flipbook {
    display: block !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  
  .mag-page {
    width: 210mm !important;
    height: 297mm !important;
    page-break-after: always !important;
    break-after: page !important;
    display: block !important;
  }
  
  .mag-page-img {
    width: 210mm !important;
    height: 297mm !important;
    object-fit: fill !important;
  }

  @page {
    size: A4 portrait;
    margin: 0;
  }
}