/* Estilos personalizados para Muertes Curiosas */
:root {
  --mc-danger: #dc3545;
  --mc-bg-dark: #121212;
  --mc-accent: #b3001b;
  --mc-font-title: 'Oswald', sans-serif;
  --mc-font-body: 'Roboto', sans-serif;
}
html, body { scroll-behavior: smooth; }
body {
  font-family: var(--mc-font-body);
  background-color: #0d0d0f;
  color: #ddd;
}
.navbar-brand { font-family: var(--mc-font-title); letter-spacing:.5px; }
.hero {
  min-height: 100vh;
  background: #000 url('../img/portada.jpg') center/cover no-repeat fixed;
}
.hero .overlay {
  position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(180,0,25,.35), rgba(0,0,0,.85));
}
.hero-title { font-family: var(--mc-font-title); text-transform: uppercase; text-shadow:0 4px 12px rgba(0,0,0,.9); }
.section-title { font-family: var(--mc-font-title); letter-spacing:.5px; position: relative; display:inline-block; }
.section-title::after { content:""; position:absolute; left:0; bottom:-6px; width:60%; height:3px; background:linear-gradient(90deg,var(--mc-danger),transparent); }
.section-bg-alt { background: linear-gradient(135deg,#181818 0%, #111 100%); }
.section-divider { background: linear-gradient(135deg,#111 0%, #181818 100%); }
.edition-card { transition: transform .25s, box-shadow .25s; border:1px solid #2a2a2a; background:#1a1a1d; color:#ffffff;}
.edition-card:hover { transform: translateY(-6px); box-shadow:0 10px 28px -8px rgba(0,0,0,.6); }
.edition-illustration { max-height:300px; width:auto; object-fit:contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.placeholder-figure { display:block; border:2px dashed #333; }
.placeholder-block { background: rgba(255,255,255,0.02); border:1px dashed #333; }
.floating-skull { position:absolute; top:15%; right:10%; font-size:90px; opacity:.12; animation: floaty 8s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(-15px) rotate(-6deg);} 50% { transform: translateY(75px) rotate(6deg);} }
/* Variantes decorativas de calaveras */
.with-decor { position: relative; overflow: hidden; }
.floating-skull.skull-left { left: -5px; right: auto; top: 35%; font-size:70px; animation-duration: 9s; }
.floating-skull.skull-right { right: -5px; top: 50%; font-size:70px; animation-duration: 7.5s; }
.floating-skull.skull-hero-left { left: 8%; top: 65%; font-size: 60px; animation-duration:10s; }
.floating-skull.skull-sm { font-size:42px; }
.float-delay-1 { animation-delay: 1.5s; }
.float-delay-2 { animation-delay: 3s; }
.float-delay-3 { animation-delay: 4.5s; }
.floating-skull:hover { opacity:.25; }
footer { border-top:1px solid #222; }
a { transition: color .2s; }
a:hover { color: var(--mc-danger); }

/* Figuras de ejemplo: ajuste natural al tamaño de la imagen sin recorte ni estirado forzado */
.example-figure { display:flex; align-items:center; justify-content:center; width:100%; margin:0; overflow:hidden; border-radius:.65rem; background:#1e1e1e; padding:.35rem; box-shadow:0 4px 14px -6px rgba(0,0,0,.7); }
.example-figure.variant { background:#252525; }
.example-image { max-width:100%; height:auto; display:block; border-radius:.45rem; object-fit:contain; }
/* Centrado vertical específico figura muerte.jpg */
.center-figure { display:flex; align-items:center; justify-content:center; width:100%; height:100%; margin:0 !important; }

/* Autor */
.author-figure { background:#222; border:1px solid #2c2c2c; padding:.75rem; border-radius:.85rem; box-shadow:0 6px 18px -6px rgba(0,0,0,.6); }
.author-image { width:100%; height:auto; display:block; object-fit:contain; border-radius:.55rem; }

/* Reveal animation */
.pre-reveal { opacity:0; transform: translateY(25px); transition: opacity .8s ease, transform .8s ease; }
.reveal-in { opacity:1 !important; transform: translateY(0) !important; }

/* Utilidades */
.bg-dark-subtle { background:#222 !important; }
.bg-secondary-subtle { background:#2b2b2b !important; }

/* Scrollspy offset fix */
:target { scroll-margin-top: 90px; }

/* Responsive tweaks */
@media (max-width: 767.98px) {
  .floating-skull { display:none; }
  .hero { background-attachment: scroll; }
}
