/*
Theme Name: Misterio 360 - Archivo Clasificado
Theme URI: https://misterio360.com
Author: Equipo Misterio 360
Author URI: https://misterio360.com
Description: Tema de WordPress con diseño oscuro estilo editorial clasificado, archivo paranormal y bóveda de investigación.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: dark-mode, editorial, grid-layout, custom-colors, custom-menu, classified, mystery
Text Domain: misterio360
*/

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Hanken+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --misterio-primary: #662067;
  --misterio-accent: #f1bd00;
  --misterio-bg: #121414;
  --misterio-surface: #1a1c1c;
  --misterio-border: #333535;
  --misterio-text: #e2e2e2;
  --misterio-muted: #d3c1ce;
  --font-serif: 'EB Garamond', 'Playfair Display', Georgia, serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', monospace;
}

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

body {
  background-color: var(--misterio-bg);
  color: var(--misterio-text);
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, .font-serif, .entry-title {
  font-family: var(--font-serif);
  color: #ffffff;
  margin: 0;
}

.font-mono, .font-mono-label {
  font-family: var(--font-mono);
}

/* Custom Component Styles matching the app */
.evidence-box {
  border: 1px dashed var(--misterio-accent);
  position: relative;
  background-color: var(--misterio-surface);
}

.evidence-box::before {
  content: 'CLASIFICADO';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-family: var(--font-mono);
  font-size: clamp(3rem, 10vw, 7rem);
  color: rgba(241, 189, 0, 0.04);
  z-index: 0;
  pointer-events: none;
  font-weight: 700;
  white-space: nowrap;
}

.grain-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.archive-card {
  background: linear-gradient(180deg, rgba(30, 32, 32, 0.95) 0%, rgba(18, 20, 20, 1) 100%);
  border: 1px solid rgba(156, 140, 152, 0.2);
  transition: all 0.3s ease;
}

.archive-card:hover {
  border-color: var(--misterio-primary);
  box-shadow: 0 0 25px rgba(102, 32, 103, 0.4);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0d0e0f;
}
::-webkit-scrollbar-thumb {
  background: #333535;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--misterio-primary);
}

/* WordPress standard styles */
.aligncenter { display: block; margin: 1em auto; }
.alignright { float: right; margin: 0 0 1em 1em; }
.alignleft { float: left; margin: 0 1em 1em 0; }
.wp-caption { max-width: 100%; border: 1px solid var(--misterio-border); padding: 5px; background: #0d0e0f; }
.wp-caption-text { font-family: var(--font-mono); font-size: 0.75rem; color: var(--misterio-accent); text-align: center; }