/* ==========================================================================
ESTILOS GENERALES Y NEUMORFISMO (Efecto Partitura / Marfil, Negro, Grises)
========================================================================== */
:root {
--bg-base: #EAEAE6;
--text-primary: #141413;
--text-secondary: #575753;
--shadow-light: #FFFFFF;
--shadow-dark: #C8C8C2;
--staff-line: rgba(20, 20, 19, 0.08);
}

* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

body {
background-color: var(--bg-base);
color: var(--text-primary);
font-family: 'Inter', sans-serif;
overflow-x: hidden;
background-image:
repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 120px,
var(--staff-line) 120px,
var(--staff-line) 121px,
transparent 121px,
transparent 129px,
var(--staff-line) 129px,
var(--staff-line) 130px,
transparent 130px,
transparent 138px,
var(--staff-line) 138px,
var(--staff-line) 139px,
transparent 139px,
transparent 147px,
var(--staff-line) 147px,
var(--staff-line) 148px,
transparent 148px,
transparent 156px,
var(--staff-line) 156px,
var(--staff-line) 157px
);
}

.font-serif-title { font-family: 'Cinzel', serif; }
.font-editorial { font-family: 'Cormorant Garamond', serif; }

.neu-flat {
background: var(--bg-base);
box-shadow: 9px 9px 18px var(--shadow-dark), -9px -9px 18px var(--shadow-light);
border: 1px solid rgba(255, 255, 255, 0.45);
transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.neu-card-hover:hover {
transform: translateY(-6px);
box-shadow: 14px 14px 28px #bebeb8, -14px -14px 28px var(--shadow-light);
border-color: rgba(20, 20, 19, 0.25);
}

.neu-inset {
background: var(--bg-base);
box-shadow: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
border: 1px solid rgba(255, 255, 255, 0.2);
}

.neu-btn {
background: var(--bg-base);
box-shadow: 5px 5px 11px var(--shadow-dark), -5px -5px 11px var(--shadow-light);
border: 1px solid rgba(255, 255, 255, 0.5);
transition: all 0.25s ease;
}

.neu-btn:hover {
box-shadow: 7px 7px 14px var(--shadow-dark), -7px -7px 14px var(--shadow-light);
transform: translateY(-1px);
}

.neu-btn:active, .neu-btn.active {
box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
transform: translateY(0);
}

.neu-btn-dark {
background: #141413;
color: #F5F5F2;
box-shadow: 6px 6px 14px #b5b5af, -6px -6px 14px var(--shadow-light);
border: 1px solid #2e2e2c;
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.neu-btn-dark:hover {
background: #000000;
transform: translateY(-2px) scale(1.02);
box-shadow: 9px 9px 18px #a8a8a2, -9px -9px 18px var(--shadow-light);
}

.staff-divider {
height: 24px;
width: 100%;
background-image: repeating-linear-gradient(
to bottom,
rgba(20, 20, 19, 0.28) 0px,
rgba(20, 20, 19, 0.28) 1px,
transparent 1px,
transparent 5px
);
}

@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

.timeline-item {
opacity: 0;
transform: translateY(30px) scale(0.98);
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.timeline-item.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}

/* ---------- Obras gratuitas: rojizo, visible sin opacar al botón de compra ---------- */
.neu-btn-free {
background: #A33B30;
color: #FBF4F2;
box-shadow: 6px 6px 14px #b5b5af, -6px -6px 14px var(--shadow-light);
border: 1px solid #7E2B23;
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.neu-btn-free:hover {
background: #8E3128;
transform: translateY(-2px) scale(1.02);
box-shadow: 9px 9px 18px #a8a8a2, -9px -9px 18px var(--shadow-light);
}
.etiqueta-gratis { background: #8E3128; }

/* ---------- Ventana de la obra: sube desde abajo al abrirse ---------- */
#score-modal .modal-panel { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
#score-modal.opacity-0 .modal-panel { transform: translateY(80px); }

@keyframes subirDescripcion {
from { opacity: 0; transform: translateY(70px); }
to { opacity: 1; transform: translateY(0); }
}
.desc-sube { animation: subirDescripcion 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }

.neu-card-hover:active { transform: translateY(-2px) scale(0.98); }

@media (prefers-reduced-motion: reduce) {
#score-modal .modal-panel { transition: none; }
.desc-sube { animation: none; }
}

/* ---------- Ventana de la obra: alto REAL en celulares (la barra del navegador ya no tapa la X) ---------- */
#score-modal {
padding-top: max(0.75rem, env(safe-area-inset-top));
padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
.modal-panel { height: 94vh; height: 94dvh; max-height: 100%; }
.visor-pdf { height: 52vh; height: 52dvh; }

/* ---------- Visor de páginas en imágenes (celulares) ---------- */
.visor-paginas {
display: flex;
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
background: #fff;
}
.visor-paginas .pagina {
flex: 0 0 100%;
height: 100%;
overflow-y: auto;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.visor-paginas .pagina img { display: block; width: 100%; height: auto; }
.visor-flecha {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 2.5rem;
height: 2.5rem;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
color: #141413;
background: rgba(234, 234, 230, 0.92);
box-shadow: 3px 3px 8px rgba(120, 120, 114, 0.45), -2px -2px 6px rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.6);
}
.visor-flecha:active { box-shadow: inset 2px 2px 5px rgba(120, 120, 114, 0.45); }

/* ---------- Obra destacada: caja con parpadeo rojizo suave + insignia circular ---------- */
@keyframes parpadeoRojizo {
0%, 100% { background-color: var(--bg-base); }
50% { background-color: #ffe6df; }
}
.card-destacada { animation: parpadeoRojizo 3s ease-in-out infinite; border-color: rgba(163, 59, 48, 0.28); }
.insignia-destacada {
position: absolute;
top: 0.45rem;
right: 0.45rem;
z-index: 5;
width: 6.2rem;
height: 6.2rem;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-8deg);
filter: drop-shadow(0 4px 4px rgba(70, 25, 20, 0.32));
pointer-events: none;
}
.insignia-destacada svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.insignia-texto {
position: relative;
font-family: 'Inter', sans-serif;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1;
color: #FBF4F2;
}
@media (prefers-reduced-motion: reduce) {
.card-destacada { animation: none; background-color: #EFE2DD; }
}