/* ===== RESET & VARIABLES ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --red:#E63946;--dark:#0a0a0a;--dark2:#0f0f0f;--cream:#f5f0e8;--gray:#888;
  --card-bg:rgba(255,255,255,0.04);--glass:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.08);--shadow-red:rgba(230,57,70,0.25);
  --font:'Space Grotesk',sans-serif;--mono:'Space Mono',monospace;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);background:#1e1b18;color:var(--cream);overflow-x:hidden;line-height:1.6;min-height:100vh}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:var(--font)}

/* ===== NOISE ===== */
.noise-overlay{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== LOGO ===== */
.logo-img{height:36px;width:auto;object-fit:contain;display:block}

/* ===== NAVBAR ===== */
.navbar, .nav {position:fixed;top:0;left:0;width:100%;z-index:100;padding:.8rem 1.5rem;
  background:rgba(10,10,10,.92);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.navbar-right, .nav-right{display:flex;align-items:center;gap:1rem}
.nav-left{display:flex;align-items:center;gap:1rem}
.nav-brand{display:flex;align-items:center;gap:1rem;font-weight:700;letter-spacing:1px;color:var(--cream)}
.user-badge{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--gray)}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--red);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:#fff;flex-shrink:0}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.4rem;font-size:.78rem;
  font-weight:600;letter-spacing:1px;text-transform:uppercase;border-radius:100px;transition:all .3s;border:none}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:#c72e3a;transform:translateY(-2px);box-shadow:0 8px 30px var(--shadow-red)}
.btn-outline, .btn-ghost{border:1px solid var(--border);color:var(--cream);background:transparent}
.btn-outline:hover, .btn-ghost:hover{border-color:rgba(255,255,255,.3);background:var(--glass)}
.btn-outline.active{background:var(--red);color:white;border-color:var(--red);}
.btn-sm{padding:.4rem .9rem;font-size:.7rem}
.btn-danger{background:transparent;border:1px solid rgba(230,57,70,.4);color:var(--red)}
.btn-danger:hover{background:rgba(230,57,70,.15)}

/* ===== FORM ELEMENTS ===== */
.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;}
.form-group label{font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--gray)}
.form-group input,.form-group textarea,.form-group select{
  background:var(--card-bg);border:1px solid var(--border);border-radius:10px;
  padding:.75rem 1rem;color:var(--cream);font-family:var(--font);font-size:.9rem;
  transition:.3s;outline:none;width:100%}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(230,57,70,.12)}
.form-separator{text-align:center;color:var(--gray);font-size:0.8rem;margin:1rem 0;}

/* ===== LOGIN PAGE ===== */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--dark);position:relative;overflow:hidden}
.login-bg{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(230,57,70,.06) 0%,transparent 70%)}
.login-card{position:relative;z-index:2;width:100%;max-width:400px;padding:2.5rem 2rem;
  background:rgba(15,15,15,.85);backdrop-filter:blur(30px);
  border:1px solid var(--border);border-radius:20px;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.login-card .logo-img{height:44px;margin-bottom:2rem}
.login-card h2{font-size:1.3rem;margin-bottom:.3rem}
.login-card p{color:var(--gray);font-size:.82rem;margin-bottom:1.8rem}
.login-form{display:flex;flex-direction:column;gap:1rem}
.login-error{display:none;background:rgba(230,57,70,.15);border:1px solid rgba(230,57,70,.4);
  color:var(--red);padding:.6rem 1rem;border-radius:10px;font-size:.8rem;text-align:center}
.login-error.show{display:block}

/* ===== HOME PAGE ===== */
.home-page{padding-top:70px;min-height:100vh}
.home-hero{padding:3rem 2rem 2rem;text-align:center}
.home-hero h1{font-size:clamp(1.8rem,4vw,3rem);font-weight:700;letter-spacing:-1px;line-height:1.1;margin-bottom:.8rem}
.home-hero p{color:var(--gray);font-size:.95rem;max-width:480px;margin:0 auto 1.5rem}
.home-stats{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.stat-chip{background:var(--card-bg);border:1px solid var(--border);border-radius:100px;padding:.4rem 1.2rem;font-size:.78rem;display:flex;align-items:center;gap:.4rem}
.stat-chip strong{color:var(--red)}
.section-label{font-family:var(--mono);font-size:.62rem;letter-spacing:4px;text-transform:uppercase;color:var(--red);margin-bottom:.8rem;text-align:center}
.section-title{font-size:clamp(1.3rem,3vw,1.8rem);font-weight:700;text-align:center;margin-bottom:2rem;letter-spacing:-0.5px}
.people-section{padding:0 2rem 3rem;max-width:1100px;margin:0 auto}
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem}
.person-card{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:1.2rem .8rem;text-align:center;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.person-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(230,57,70,.08),transparent);opacity:0;transition:.3s}
.person-card:hover{border-color:var(--red);transform:translateY(-3px)}
.person-card:hover::before{opacity:1}
.person-avatar{width:52px;height:52px;border-radius:50%;background:rgba(230,57,70,.2);border:2px solid rgba(230,57,70,.4);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;color:var(--red);margin:0 auto .8rem}
.person-name{font-size:.82rem;font-weight:600;line-height:1.2}
.person-count{font-size:.65rem;color:var(--gray);margin-top:.2rem;font-family:var(--mono)}
.btn-all-album{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 2.2rem;font-size:.85rem;margin:0 auto 2rem;background:var(--red);color:#fff;border:none;border-radius:100px;font-weight:600;letter-spacing:1px;text-transform:uppercase;transition:all .3s;cursor:pointer}
.btn-all-album:hover{background:#c72e3a;transform:translateY(-2px);box-shadow:0 8px 30px var(--shadow-red)}

/* ===== ADMIN PAGE ===== */
.admin-page{padding-top:70px;min-height:100vh;max-width:1000px;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
.admin-section{margin-bottom:2.5rem}
.admin-section h2{font-size:1.1rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.admin-section h2::before{content:'';display:block;width:4px;height:18px;background:var(--red);border-radius:2px}
.users-table,.people-table{width:100%;border-collapse:collapse}
.users-table th,.people-table th{font-size:.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--gray);padding:.5rem .8rem;text-align:left;border-bottom:1px solid var(--border)}
.users-table td,.people-table td{padding:.6rem .8rem;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.04)}
.add-form{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:1.2rem;margin-bottom:1.2rem}
.add-form h3{font-size:.85rem;margin-bottom:.8rem}
.add-form-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.7rem;margin-bottom:.8rem}
.add-form-row input{background:var(--dark);border:1px solid var(--border);color:var(--cream);padding:.5rem;border-radius:8px;font-family:var(--font);font-size:.82rem;outline:none}

/* ========================================================
   ALBUM PAGE — REALISTIC BOOK (StPageFlip)
   ======================================================== */
.album-page{padding-top:70px;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#1e1b18;}
.album-toolbar{display:flex;align-items:center;justify-content:center;padding:.5rem 1rem;flex-shrink:0;color:#999;font-size:0.9rem;}
.album-body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0; position:relative;}
.album-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0.5rem 1rem 1rem 1rem;position:relative;user-select:none;-webkit-user-select:none; min-height:0; perspective:none;}

/* Book Container */
.book-container {
  position: relative;
  flex: 1; /* Occupy remaining space */
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: none;
  min-height: 0; /* Enable shrinking */
}

#bookElement {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Page Styles */
.book-page {
  background-color: #f4ecd8 !important; /* Beige paper */
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 30px rgba(0,0,0,0.05);
  border: 1px solid #d4c5a9;
  overflow: hidden;
}

/* Isolated Fallback Mode Styles for Mobile Navigation — Centrado Absoluto con Transiciones Premium */
#bookElement.fallback-mode {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#bookElement.fallback-mode .book-page {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.96) !important;
  height: 98% !important; /* Aprovecha casi el 100% del contenedor */
  width: auto !important;
  aspect-ratio: 3 / 4 !important; /* Proporción Polaroid perfecta */
  max-width: 95% !important;
  max-height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.35) !important;
  border-radius: 8px !important;
}

#bookElement.fallback-mode .book-page.active-fallback {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 10 !important;
}

/* StPageFlip background override */
.stf__page, .stf__block, .stf__wrapper {
  background-color: transparent !important;
}
.book-page.--left { border-right: 1px solid rgba(0,0,0,0.2); box-shadow: inset -10px 0 20px rgba(0,0,0,0.1); }
.book-page.--right { border-left: 1px solid rgba(0,0,0,0.2); box-shadow: inset 10px 0 20px rgba(0,0,0,0.1); }

/* The rings (ahora son huecos simples estilo cuaderno) */
.book-rings {
  position: absolute;
  top: 5%; bottom: 5%;
  left: 50%;
  width: 16px;
  transform: translateX(-50%);
  background: transparent;
  z-index: 10;
  pointer-events: none;
  background-image: radial-gradient(circle at center, #1e1b18 4px, transparent 5px);
  background-size: 100% 25px;
}

/* Page content (Polaroids) */
.page-content {
  position: absolute;
  inset: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 15px;
}

/* Polaroid Photo Slot (Padding hack for perfect 0.85 aspect ratio everywhere) */
.photo-slot {
  width: 75%; /* Desktop */
  height: 0;
  padding-bottom: 88.2%; /* 75 / 0.85 = 88.2 */
  background: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  border: 1px solid #eee;
  position: relative;
}

/* Spinner Loader in background of Polaroid slot */
.photo-slot::before {
  content: '';
  position: absolute;
  top: calc(50% - 22px);
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border: 2px solid rgba(0,0,0,0.1);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: photo-spin 0.8s linear infinite;
  z-index: 1;
}

@keyframes photo-spin {
  to { transform: rotate(360deg); }
}

/* Mobile single photo override */
.page-content.single-photo {
  justify-content: center;
}
.page-content.single-photo .photo-slot {
  width: 85%;
  height: 0;
  padding-bottom: 100%; /* 85 / 0.85 = 100 */
}

.photo-slot.align-left { transform: rotate(-2deg) translateX(-2%); }
.photo-slot.align-right { transform: rotate(3deg) translateX(2%); }
.photo-slot-empty { flex:1; display:flex; align-items:center; justify-content:center; font-size:2rem; opacity:0.1; }

.photo-slot img {
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 45px); /* Leave space at bottom for polaroid look */
  object-fit: contain;
  background-color: #f9f9f9;
  border: 1px solid rgba(0,0,0,0.1);
  pointer-events: none;
  filter: sepia(0.2) contrast(1.1) brightness(0.95);
  z-index: 2; /* Sits on top of the spinner */
}

.slot-tag-overlay { position:absolute; inset:10px 10px 35px 10px; pointer-events:none; z-index:5; }
.slot-tag-overlay.active { pointer-events:all; cursor:crosshair; }
.tag-pin { position:absolute; transform:translate(-50%,-50%); cursor:pointer; pointer-events:all; z-index:10; }
.pin-dot { width:12px; height:12px; background:var(--red); border-radius:50%; border:2px solid #fff; box-shadow:0 2px 4px rgba(0,0,0,.3); transition:transform .2s; }
.tag-pin:hover .pin-dot { transform:scale(1.2); }
.pin-label { position:absolute; top:100%; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.8); color:#fff; font-size:.7rem; padding:2px 6px; border-radius:3px; margin-top:4px; white-space:nowrap; opacity:0; transition:opacity .2s; pointer-events:none; }
.tag-pin:hover .pin-label { opacity:1; }
.pin-delete { position:absolute; top:-8px; right:-8px; background:#fff; color:var(--red); border-radius:50%; width:16px; height:16px; font-size:12px; line-height:16px; text-align:center; font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.3); display:none; }
.tag-pin:hover .pin-delete { display:block; }

/* Navigation Group (Bottom) */
.album-bottom-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 20;
  flex-shrink: 0; /* Never shrink */
  margin-top: 10px;
}

/* Action Buttons OVER the Book Margin */
.album-controls-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.action-btn {
  background-color: #1a1a1a;
  color: #fff;
  border: none;
  font-size: 0.75rem;
  padding: 6px 14px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.action-btn:hover {
  background-color: #E63946; /* Bowd Red */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.action-btn svg {
  opacity: 0.9;
}

.album-nav-controls{display:flex;align-items:center;gap:1.5rem;background:rgba(20,15,10,.8);padding:.5rem 1rem;border-radius:2rem;}
.nav-arrow{background:none;border:none;color:var(--cream);font-size:1.5rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}
.nav-arrow:hover:not(:disabled){background:rgba(255,255,255,.1)}
.nav-arrow:disabled{opacity:.3;cursor:not-allowed}
.nav-progress{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:100px}
.nav-progress span{font-size:.8rem;font-family:var(--font-mono);letter-spacing:1px}
.nav-progress-bar{width:100%;height:2px;background:rgba(255,255,255,.2);border-radius:1px;overflow:hidden}
.nav-progress-fill{height:100%;background:var(--red);width:0;transition:width .3s}

.nav-hint{font-size:.7rem;color:#888;white-space:nowrap}

/* ===== MODALS ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.3s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--dark2);border:1px solid var(--border);border-radius:18px;padding:1.8rem;width:100%;max-width:400px;transform:scale(.95);transition:.3s;box-shadow:0 40px 80px rgba(0,0,0,.6); max-height:90vh; overflow-y:auto;}
.modal-overlay.open .modal{transform:scale(1)}
.modal h3{font-size:1.2rem;margin-bottom:1.5rem; text-align:center;}
.modal-actions{display:flex;gap:.6rem;justify-content:center;margin-top:1.5rem}

/* Comentarios en Modal */
.comments-list { display:flex; flex-direction:column; gap:0.8rem; margin-top:1.5rem; max-height:300px; overflow-y:auto; padding-right:10px; }
.comment-item { background:var(--card-bg); padding:1rem; border-radius:8px; position:relative; }
.comment-author { color:var(--red); font-weight:bold; font-size:0.8rem; margin-bottom:0.3rem; }
.comment-text { font-size:0.9rem; color:var(--cream); }
.comment-date { font-size:0.7rem; color:var(--gray); margin-left:0.5rem; font-weight:normal; }
.comment-delete { position:absolute; top:10px; right:10px; color:#888; background:none; border:none; font-size:1.2rem; cursor:pointer; }
.no-content { color:#888; font-style:italic; text-align:center; font-size:0.9rem; padding:1rem; }

/* ===== TOAST ===== */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(100px);background:rgba(15,15,15,.95);border:1px solid var(--border);backdrop-filter:blur(20px);padding:.7rem 1.5rem;border-radius:100px;font-size:.78rem;z-index:600;transition:transform .4s cubic-bezier(.34,1.56,.64,1);white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.error{border-color:rgba(230,57,70,.5);color:var(--red)}

/* ===== RESPONSIVE — OPTIMIZACIONES EXTREMAS PARA MÓVIL Y PORTRAIT ===== */
@media (max-width: 768px) {
  body { padding-top: 50px !important; }
  .nav { padding: 0.5rem 1rem !important; height: 50px !important; }
  .nav-brand { font-size: 0.9rem !important; }
  .logo-img { height: 28px !important; }
  
  .album-page { padding-top: 50px !important; }
  .book-container { height: calc(100dvh - 175px) !important; width: 100% !important; }
  
  .album-bottom-bar { gap: 8px; margin-top: 8px; }
  
  /* Distribución inteligente de botones móviles en cuadrícula de 2 columnas */
  .album-controls-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: 
      "nav nav"
      "tag comm" !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 8px 10px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  .album-nav-controls {
    grid-area: nav !important;
    transform: scale(0.95) !important;
    width: auto !important;
  }

  #tagModeBtn {
    grid-area: tag !important;
    width: 100% !important;
    max-width: 150px !important;
    justify-content: center !important;
  }

  #openCommentsBtn {
    grid-area: comm !important;
    width: 100% !important;
    max-width: 150px !important;
    justify-content: center !important;
  }

  /* Centrar botón de comentarios si el de etiquetar está oculto (para no-admins) */
  #tagModeBtn[style*="display: none"] ~ #openCommentsBtn,
  #tagModeBtn[style*="display:none"] ~ #openCommentsBtn {
    grid-column: 1 / -1 !important;
    grid-area: auto !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 180px !important;
  }

  .action-btn { font-size: 0.65rem; padding: 5px 10px; }
}

/* Mobile Portrait ONLY */
@media (max-width: 768px) and (orientation: portrait) {
  .book-container {
    width: 100% !important;
  }
}

/* ===== MASTER ORIENTATION BLOCK (MOBILE LANDSCAPE) ===== */
.orientation-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(15px);
  z-index: 9999;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--cream);
}

.orientation-card {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2.5rem 2rem;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}

.orientation-card h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
  margin-top: 0.5rem;
}

.orientation-card p {
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.6;
}

.orientation-card strong {
  color: var(--red);
}

/* Animated SVG phone */
.phone-animation {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: rotate-phone-anim 2.2s ease-in-out infinite;
}

@keyframes rotate-phone-anim {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(90deg); }
  55% { transform: rotate(90deg); }
  85% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* Mostrar el bloqueo en celulares acostados (Landscape) */
@media (max-height: 500px) and (orientation: landscape), (max-width: 950px) and (orientation: landscape) {
  .orientation-overlay {
    display: flex !important;
  }
}

/* Ocultar anillas en celulares porque siempre se ve de a 1 hoja por página logicamente */
@media (max-width: 950px), (max-height: 500px) {
  .book-rings { display: none !important; }
}